Voici six concepts à considérer pour que votre interface inspire confiance :

1. Clarté — Votre interface doit être… claire. Elle doit correspondre à ce que vos utilisateurs attendent. Cela semble facile, mais les designers ont tendance à en rajouter : ils veulent que leur travail se remarque, au risque de créer plus de confusion qu’autre chose. Les meilleures interfaces utilisateurs sont celles qui n’affectent pas les visiteurs et qui savent rester à leur place.
2. Contrôle — Le contrôle engendre la confiance. Donnez à vos utilisateurs les moyens d’agir pour aller là où ils le désirent. Montrez-leur la ou les directions à prendre et donnez-leur des retours visuels sur ce qu’ils sont en train de faire.
3. Navigation — Les visiteurs ont toujours besoin d’un peu d’aide pour se repérer dans un site, voire de beaucoup d’aide si votre interface est complexe. Il y a toujours des interactions ou des données qu’ils auront du mal à bien comprendre au premier abord. Faites en sorte que vos interfaces livrent leurs secrets par petits morceaux.
4. Humilité — Restez en retrait de l’expérience utilisateur. C’est son expérience à lui, pas la vôtre ! Ne lui dites pas sans arrêt ce qu’il a à faire, où il devrait cliquer, etc.
5. Choix – Montrez le chemin à vos visiteurs, mais laissez-leur le plaisir de la découverte, et laissez-les faire des choix.
6. Cohérence — Les interactions avec votre site doivent être prévisibles. Les éléments d’interfaces qui réalisent une action donnée doivent posséder des styles communs ; les éléments qui partagent des styles communs doivent réaliser des choses similaires.

La confiance, ça se mérite

La confiance de l’utilisateur s’obtient à coup de prévisibilité et de cohérence. Elle grandit lorsque les visiteurs se sentent à l’aise avec votre interface et non lorsqu’ils se sentent idiots. Les meilleurs interfaces donnent confiance en restant en retrait et en laissant les utilisateurs les «utiliser» plutôt que «travailler» avec.

→ Cet article est une traduction libre de l’article How to build user confidence in your UI paru sur Webdesigner Depot et rédigé par Patrick Cox à suivre sur Twitter : @pcridesagain.

PS N’hésitez pas à me signaler les coquilles ou les erreurs d’interprétations qui auraient eu le mauvais goût de se glisser dans l’article à l’insu de mon plein gré.

La famille Bariol est composée de :

• Bariol Thin,
• Bariol Light,
• Bariol Regular,
• Bariol Bold.

La version Regular est disponible gratuitement en échange d’un Tweet ou un Like Facebook. Les autres ne coûtent que 1€ , soit 3€ pour la famille complète. Pensez à vérifier vos spams pour recevoir le lien de téléchargement !

La licence est assez permissive : vous avez le droit de l’utiliser sur tous les supports, de la fournir à vos prestataires pour qu’ils puissent imprimer vos oeuvres ou de l’incorporer dans vos pages web à l’aide de la propriété CSS @font-face.

Et donc, cerise sur la typo, Bariol est accompagné d’une série de 280 icônes de très bonne facture.

N’hésitez pas à télécharger le livret de présentation de Bariol pour vous faire une idée plus concrète des possibilités de cette fonte plus qu’intéressante.

→ Rendez-vous sur bariol.com

Au menu :

• Organisation des fichiers et conventions de nommage,
• Gestion des calques,
• Images,
• Typographie,
• Effets et filtres,
• Organisation générale,
• Qualité,
• Export.

→ Lire aussi : Best Practices for a Clean & Easy PSD to XHTML Conversion

Le filtre Lo-fi d’instagram comparé au script Photoshop

A part certains messages d’erreur dues probablement à des différences de localisation (j’utilise la version française de Photoshop CS6), ces Scripts (ou Actions dans la version anglaise) fonctionnent plutôt bien et permettront aux accros d’Instagram de faire «Palace chez eux» pour la modique somme de 4,25€ payables via Paypal.

En plus de Photoshop, ces scripts sont également disponibles pour Lightroom et Aperture. Via le Journal Graphic.

Source Sans Pro — La première police de caractère open source par Paul D. Hunt pour Adobe

Les fontes constituant Source Sans Pro sont téléchargeables depuis Source Forge et prêtes à être installées sur votre ordinateur ; elles sont également disponibles en ligne via Typekit, WebInk ou Google Web Fonts.

A noter que Source Sans Pro sera bientôt disponible dans les applications en ligne Google documents et Google présentations.

Typo & Web s’articule en deux grandes parties. La première concerne les notions de lisibilité : qu’est-ce que la lisibilité ; processus de lecture ; lecture à l’écran ; rendu des caractère sur le web. La deuxième, nous montre la puissance des CSS au service de la lisibilité : choisir les caractères ; optimiser le confort de lecture ; aligner les textes ; le tout suivi d’un exemple à la loupe.

Pour finir, les annexes mettent en lumière :

• Les caractères Georgia et Verdana,
• La propriété font-face,
• Les différents formats de caractère (Bitmap, Postscript, TrueType, OpenType, Embedded OpenType, Woff et SVG),
• Les services de webfonts,
• La liste des ressources disponibles sur le web.

Typo & web
Pour une lisibilité optimale de la typographie sur internet
Aurélien Foutoyet
Nombre de pages : 168
Format : 16 x 23 cm
ISBN : 978-2-911220-43-2
Prix : 21,00 €

Profils colorimétriques et la gestion des couleurs dans Photoshop.

¶ Le blog de la couleur – Blog consacré à la colorimétrie et aux techniques avancées de photographie et de capture d’image. La rubrique Notions de colorimétrie est une vraie mine pour faire le point sur la couleur. Lire Quelle différence entre sRGB et Adobe RGB ?

¶ Guide de la gestion des couleurs – Ce guide de la gestion des couleurs est également un must-read. Je vous conseille notamment la partie Gérer les couleurs avec Photoshop :

1. Les préférences couleurs de Photoshop
2. Les informations couleurs de Photoshop
3. Gérer les couleurs avec Photoshop
4. Imprimer avec Photoshop

Vidéos didactiques sur Photoshop et Illustrator CS6

¶ Retouches beauté avec Photoshop – Tutoriel de Clément Nachbauer (@Nachbauer) sur l’art et les manières d’aborder la retouche beauté avec Photoshop dans un contexte de productivité.

Plus d’une heure de conseils et de techniques professionnelles de retouche d’images :

1. Retouche chromie dans Camera Raw,
2. Astuces pour le tampon de duplication, (sur calques indépendant, correction avec les modes de fusion Obscurcir et Eclaircir),
3. Outils correcteurs,
4. Méthode « plus clair, plus dense »,
5. Utilisation du curseur Clarté pour adoucir la peau en mode Camera Raw,
6. Déformation de marionnette pour replacer les bras,
7. Filtre fluidité pour adoucir une épaule,
8. Détourage de cheveux avec l’outil de sélection rapide et Amélioration des contours,
9. Améliorer les lumières et les contrastes d’une silhouette,
10. Eclaircir des zones spécifiques grâce à l’application de plusieurs calques de réglages Courbes et à l’ajout de dégradés sur le masque de fusion associé pour recentrer le regard sur les zones de lumière

¶ Harmonie des couleurs avec Adobe Photoshop CS6 et Adobe Illustrator CS6 – Après une première partie sur la théorie des couleurs, Jérôme Bareille (@izidesign) aborde l’utilisation des palettes de couleur complémentaires, analogues, triadiques, tétradiques etc. dans le design web et la bande dessinée.

Pour finir (à la 25e minute), l’auteur montre comment les outils de gestion des palettes de couleurs dans Illustrator peuvent nous aider à trouver et modifier les couleurs de nos créations numériques.

Bruit, textures, dégradés et bords arrondis dans Photoshop

¶ Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles – Un article très fouillé sur les différentes manières de gérer le bruit, les textures, les dégradés et les rectangles arrondis dans un contexte de redimensionnement sans perte de qualité.

Contraste et netteté

¶ Techniques avancées d’amélioration de la netteté — Ce tutoriel Adobe montre comment utilliser le filtre Passe-haut, sur un portrait, pour rendre les yeux très nets sans pour autant accentuer la netteté de la texture de la peau.

¶ Comprendre le masque flou sur Photoshop — Comparer deux techniques pour améliorer la netteté d’une visage : le filtre Accentuation et le filtre Passe-haut.

Manuels Adobe CS

¶ Manuels de références des logiciels Adobe Creative Suite CS5, CS5.1, CS5.5, and CS6 applications (PDF and HTML) en anglais

Guides de prise en main CS (en français)

¶ Après les manuels Adobe en version anglaise, voici quelques ressources en français :

• After Effects
• Illustrator
• Photoshop
• Flash Catalyst
• InDesign
• Premiere Pro

Détourer des cheveux

¶ How To Remove Background Around Lots Of Hair Photoshop – Utiliser la gomme magique d’arrière-plan et les outils de densité pour détourer des cheveux sur fond uni.

→ Lire aussi Détourer les cheveux avec Photoshop.

Cours Photoshop pour débutant

¶ Débuter sur Adobe Photoshop ! — Maitrise des outils de Photoshop, découverte des principales fonctionnalités du logiciel, l’art de la retouche photographique, création d’une illustration ainsi que d’une affiche publicitaire, de A à Z, conception et réalisation du design de votre site, acquisition du vocabulaire et des termes techniques liés à l’infographie, des travaux pratiques pour faire un point sur vos connaissances, des fichiers à télécharger tout au long du cours pour une pratique régulière.

La roue chromatique

¶ Last but not least, je ne résiste pas à la tentation de vous inviter à lire l’article La roue chromatique est un mensonge paru dernièrement sur ce site.

Filtre dynamique Tons foncés / tons clairs avec un objet dynamique.

Un double-clic sur le filtre en question ouvre à nouveau à boite de dialogue, tandis qu’un double-clic sur l’icône en forme de réglages située juste à droite permet de faire apparaitre les options de fusion et d’opacité.

A noter que cela fonctionne également avec Image > Réglages > Variantes ainsi que l’ensemble des filtres disponibles dans le menu Filtre.

Les roues chromatiques sont mauvaises ? Voyons comment fonctionne la vision des couleurs

Comment la vision des couleurs fonctionne-t-elle ? La théorie des couleurs devraient être une obsession pour chacun(e) d’entre nous, qu’il soit artiste ou web designer. Tiens, en parlant d’artistes : si vous leur demandez comment les couleurs  fonctionnent, ils se lancent généralement dans un grand discours à propos des couleurs primaires (rouge, bleu et jaune) qui forment la fameuse «roue chromatique» :

Les trois couleurs primaires du peintre

Et d’ailleurs, pourquoi appelle-t-on ça une roue ? Si vous mélangez ces couleurs dans des proportions égales, vous obtenez les couleurs secondaires Orange, Vert et Violet.

Les trois couleurs secondaires du peintre

En continuant avec ce procédé, vous obtenez au final l’infame roue chromatique, celle que vous avez probablement apprise à l’école : un bel outil symétrique dans lequel chaque nuance de couleur se fond dans une autre sans solution de continuité :

La roue chromatique artistique

Malheureusement, rien de tout cela ne résiste au premier contrôle, même léger.

Si vous ouvrez votre imprimante de bureau, vous verrez probablement quelque chose d’un peu différent :

Les quatre encres CMJN de votre imprimante à jet d’encre

Trois encres de couleur, qui, une fois combinées, produisent toutes les autres : Cyan, Magenta et Jaune. L’encre noire n’est là que pour faire des économies : pour faire du gris, on peut remplacer un mélange d’encres colorées par une certaine quantité de noir pour obtenir le même résultat.

Mais… Attendez ! Je pensais que les couleurs primaires étaient le Rouge, le Bleu et le Jaune ; pas le Cyan (bleu-vert), le Magenta (bleu-rouge) et le Jaune ! Et oui, nous avons un autre jeu de couleurs primaires qui produit notre roue chromatique contenant toutes les autres couleurs. Mais que signifie donc réellement cette notion de «couleur primaire» ?

La roue des couleurs CMJN

Ce n’est pas aussi simple que de dire que « tout groupe de trois couleurs peuvent produire tous les autres » parce que ce n’est tout simplement pas vrai (par expérience). Par ailleurs, il ne suffit pas de dire que tout groupe de trois couleurs peuvent produire toutes les autres à condition d’être espacées à distance égales sur la roue chromatique. En effet, la couleur jaune est commune à l’espace du peintre et de l’imprimante, tandis que les deux autres couleurs primaires diffèrent totalement (le rouge et le bleu sont des couleurs «primaires» pour le peintre, mais «secondaires» pour l’imprimante).

Les écrans de TV et d’ordinateurs présentent à leur tour des différences. Si vous vous rapprochez d’un écran CRT (pas un écran plat LCD), vous pouvez voir que chaque pixel (ou points) est réellement composé de trois groupes de points colorés : rouge, vert et bleu.

Les pixels d’un écran CRT

Si vous êtes habitués à l’informatique, vous pensez certainement au système de couleur RVB. Les vrais geeks pensent automatiquement à la couleur jaune quand ils voient #FFFF00. Si vous pensez à l’orange en voyant  #A33F17 vous êtes un dieu parmi les hommes !

Tout cela nous conduit vers un autre système de trois couleurs primaires qui génèrent toutes les autres, avec bien sûr, une autre roue chromatique. Celle-ci est un peu plus simple à expliquer. L’encre et la peinture sont des couleurs soustractives (l’ajout de cyan, de magenta et de jaune produit du noir), tandis que la lumière est additive (si vous mélangez trois faisceaux de lumière rouge, verte et bleue, vous obtenez du blanc) :

Les couleurs additives

Nous obtenons à nouveau une autre roue chromatique dans laquelle deux (mais pas les trois !) couleurs primaires correspondent à la palette de l’artiste et aucune aux encres de l’imprimante.

La roue des couleurs RVB (RGB)

Le compte n’y est pas. Tournons-nous vers la science pour mieux comprendre le phénomène.

La physique complique tout

Nous pouvons compter sur les sciences physiques. La lumière est une onde d’énergie (ou une particule, mais pour aujourd’hui, on dira que c’est juste une onde, ok ?) et, telle une corde de guitare qui vibre, les ondes de lumière se tortillent à certaines fréquences. Certaines fréquences sont visibles et la valeur de la fréquence détermine la couleur que nous voyons.

Le spectre des couleurs physiques

Maintenant, nous tenons quelque chose, mais quoi ?

Pour commencer, nous avons soudainement perdu la notion de roue. Bien que les précédents systèmes se contredisaient les uns les autres, ils se mettaient au moins d’accord sur le fait que les teintes passaient de l’une à l’autre sans solution de continuité, sans début ni fin dans une belle et heureuse symétrie.

A la place, nous avons ici un début (le violet) et une fin (le rouge). Entre les deux, le spectre des couleurs est continu et semble correspondre à ce que l’on voit dans les roues chromatiques traditionnelles, sauf qu’ici, cela se termine par le violet. Mais comment raccrocher les wagons avec le rouge ? Où sont passés nos couleurs fuschia, magenta ou pourpre, bien présentes dans la roue chromatique mais absentes du spectre physique ?

Comment une couleur peut-elle manquer ? Comment cela s’explique-t-il ?

Mais attendez, nous n’avons pas encore fini.

Résoudre les couleurs antagonistes

N’importe quel enfant de 7 ans sait que l’opposé du rouge est le vert et que l’opposé du bleu est le jaune. Qu’est-ce que cela signifie exactement ?

Après tout, il n’y a rien dans le spectre des couleurs physiques qui indique qu’une couleur est opposée à une autre, tout particulièrement en ce qui concerne les deux paires évoquées plus haut. La roue chromatique n’est pas d’une grande aide non plus. Si l’on essaie de faire correspondre les couleurs opposées sur la roue du peintre, on arrive à une curieuse asymétrie où deux couleurs primaires sont opposées et où la troisième couleur primaire est opposée à une couleur secondaire :

Les couleurs complémentaires de l’artiste-peintre

Toutefois, les couleurs opposées sont réelles. Au début des années 1800 Goethe (oui, ce Goethe-là) avait remarqué que le rouge, le vert et le bleu n’était jamais perçus en même temps, dans le sens où aucune couleur ne peut être décrite comme une combinaison de deux paires. Il n’y a pas de couleur dont on puisse dire qu’elle est rouge/verte ; si l’on vous demande d’imaginer une couleur verte avec un peu de rouge, rien ne vient à l’esprit  – je ne parle pas d’un verre avec un peu de rouge, on est bien d’accord ! (1). Dans les cent-cinquante années qui ont suivi, de nombreuses expériences ont été élaborées pour tester cette idée : toutes ont validées l’intuition de Goethe.

Il y a là quelque chose que ni la roue chromatique ni le spectre des couleurs ne peut expliquer.

Il est temps de revenir à la source de la perception des couleurs : la ridicule complexité du fonctionnement de l’être humain.

 La réponse : la physiologie, évidemment !

Ce qui suit est une grossière approximation de ce qui se passe réellement tout en étant globalement digne de confiance. Seules quelques personnes sur Terre sont capable de comprendre réellement comment tout cela fonctionne précisément.

Comme vous pouvez vous en douter, nous allons partir de l’oeil où trois types de cellule — les cônes — mesurent la quantité de lumière rouge, verte et bleue qui atteint la rétine.

Ah ah, je peux déjà entendre les geeks s’écrier : C’est du RGB après tout ! J’avais raison. Tout ce temps perdu  – non investit — pour savoir que #001067 est la couleur par défaut de la barre de titre dans Windows 95…

Doucement, cowboy. En fait, l’expression «quantité de rouge, vert et bleu» est une grossière simplification (je vous avais prévenu). En soulevant un peu le capot, les trois types de cônes qualifient des longueurs d’onde : S , M et L pour Short, Medium et Long ; ils répondent chacun à une gamme de longueur d’onde, comme ceci :

Le spectre des couleurs perçu par les cônes de la vision

Après cette digression (j’avais promis de ne pas trop entrer dans les détails), continuons : nous avons donc nos cônes R, V et B. Les signaux qu’ils envoient ne parviennent pas tel quel au cerveau : ils passent d’abord à travers un filtre dans lequel réside le mystère de la couleur. En fait, il existe trois filtres :

Le filtre #1 fonctionne de cette manière :

RV opposés

Explication : plus il y a de R et plus le signal est positif ; plus il y a de V et plus le signal est négatif. S’il y a une quantité égale de R et de V — ou aucun des deux, un peu ou beaucoup des deux — le signal est à zéro.

Voilà pourquoi on n’observe pas de couleur vert-rouge :

Disons que R et V peuvent varier entre 0 et 100 unités d’intensité. Considérons le cas où R=100 et V=25 (un quart de l’intensité de R). Considérons maintenant le cas où R=75 et V=0.

Dans les deux cas le filtre #1 calcule le même signal de sortie : 75. Mais rappelez-vous que le cerveau ne reçoit pas les données brutes pour le signal R et V — il ne reçoit que la sortie filtrée, ce qui fait que le cerveau ne peut pas faire la différence entre les deux scénarios.

C’est pourquoi il n’existe pas de couleur comme du rouge avec un peu de vert. A la place, nous avons juste un rouge moins intense. Physiquement, le cerveau est incapable de voir une couleur rouge-vert à cause du filtre qui supprime cette information.

Sachant que le bleu et le jaune sont des couleurs opposées, vous pouvez probablement avoir une idée du filtre #2 :

B-RV opposés

Ici le bleu (B) est opposé à une combinaison des canaux R et V. Les cônes R et V sont stimulés, soit lorsqu’il y a de la lumière rouge et verte (comme lorsque l’intégrateur CSS joue sur le rouge et le vert pour créer du jaune #FFFF00), soit lorsque la lumière 570nm (le jaune dans le spectre visible) stimule à la fois les cônes R et V.

Le filtre #3 est simple :

RVB opposés

Pour faire court, il mesure la quantité de lumière sans se soucier de sa teinte. Il ne s’occupe que de la luminosité.

Et le magenta ? Il provient de R et B sans V, en activant complètement le filtre #1, en mettant le filtre #2 à zéro. Le magenta n’est pas une longueur d’onde physique, c’est juste le résultat de la combinaison de deux filtres physiologiques.

La vraie roue chromatique, simplifiée

Pour faire cette vraie roue bidule-chouette, vous devez vous représenter les contraires rouge/vert et bleu/jaune. Ce n’est pas difficile du tout et je m’étonne que l’on en parle pas plus souvent :

Une roue chromatique composées de 4 couleurs primaires !

Quatre couleurs primaires ? Oui, pourquoi pas ? C’est ce qui se rapproche le plus de l’observation sans être trop compliqué.

 Bonus «prise de tête» : la relation contexte/couleur

C’est juste le début de la théorie des couleurs. Pour vous donner un aperçu de la complexité du bouzin, considérez ceci :

Lorsqu’une couleur est juxtaposée à d’autres couleurs, nous l’a percevons comme une couleur différente. Par exemple la plupart des gens diront que le petit carré est orange sur la gauche et marron sur la droite.

Interaction des couleurs selon le contexte

Dans la réalité, ces deux carrés sont de la même couleur ! C’est le contexte des couleurs alentour qui dicte la couleur perçue, sans considération pour les notions de longueur d’onde et de physiologie de la vision dont nous avons parlé.

Pire encore : le cerveau projette sur la perception des couleurs, les choses qu’il connait du monde. Par exemple, nous savons intuitivement que les ombres assombrissent artificiellement les couleurs, de sorte que notre cerveau en tient compte automatiquement dans notre perception des couleurs (c’est la constance des couleurs). Dans l’image qui suit, vous savez que les couleurs sombres ou claires de ce ballon sont les mêmes :

La constance des couleurs pour le cerveau

Mais il peut arriver que des illusions d’optique sont si puissantes que même lorsqu’on connait le truc, notre cerveau est abusé. D’après vous, quel est la carré le plus foncé entre A et B ?

Une illusion d’optique avec carrés gris qui fout les jetons…

En fait, les deux carrés sont de la même couleur (#787878) mais vous ne pouvez pas la voir même si vous le savez. Pour m’en persuader, je suis obligé d’ouvrir cette image dans Photoshop et de parcourir les deux carrés avec la pipette.

Ça fout les jetons, non ?

Pour aller plus loin

Vous êtes vraiment allé jusque-là ? Le sujet vous intéresse toujours ? Vous êtes vraiment aussi barge que moi.

Si vous voulez vraiment perdre quelques jours de votre vie, lisez donc cet étonnant traité de la théorie des couleurs. Bonne chance !

(1) Plaisanterie impardonnable du traducteur

Traduction de l’article Color Wheels are wrong? How color vision actually works avec l’aimable autorisation de Jason Cohen (@asmartbear), fondateur, entre autre, de WP Engine.

LECTURES COMPLÉMENTAIRES

• Les goûts et les couleurs
• La couleur sur le web
• 15 outils en ligne pour créer des palettes de couleur
• Art et science de la couleur. Chevreul et les peintres, de Delacroix à l ’abstraction. Edition revue et augmentée. George Roque. Gallimard, Collection Tel. 2009.