Améliorez votre design avec de la couleur !

Améliorez votre design avec de la couleur !

La couleur est l’un des outils les plus importants qu’un designer ait à sa disposition. Celle-ci donne le ton et influence la réception de l’image, attire l’attention des utilisateurs, joue sur leurs émotions et accroît la facilité de la prise en main. 

À la découverte du disque des couleurs

Le terme de couleurs désigne un certain mode de perception de différentes longueurs d’ondes. En 1666, le grand Isaac Newton identifie trois groupes de couleur :

• les couleurs primaires : jaune, rouge, bleu,
• les couleurs secondaires : orange, violet, vert (combinaisons des couleurs primaires) 
• les couleurs tertiaires : jaune orangé, rouge orangé, rouge violacé, etc (combinaisons des couleurs primaires et secondaires). 

Jusque là, rien de nouveau… Et Newton a placé les couleurs sur un disque afin de mettre en évidence les relations entre elles. 

Parlons de la théorie des couleurs 

Dans les arts visuels, on peut rencontrer diverses tentatives pour expliquer l’association des couleurs – connues sous le nom de théories des couleurs. Même si je ne compte pas vous faire un cours sur la théorie des couleurs (vous n’êtes pas là pour ça), il est important de savoir que cette théorie repose sur l’harmonie des couleurs : les couleurs doivent être associées de bonne façon. 

Vous pouvez envisager les harmonies de couleur comme les fondations ou le modèle sous-jacent d’une palette de couleur. En voici quelques-unes :

• l’harmonie d’analogie : des couleurs voisines sur le disque. Cette harmonie créée un léger contraste de couleur. 
• l’harmonie de complémentarité : des couleurs opposées sur le disque, et qui produisent un fort contraste. 
• l’harmonie de complémentarité adjacente : une couleur combinée avec deux couleurs se trouvant d’un côté et de l’autre de sa couleur complémentaire. 
• l’harmonie triadique : trois couleurs équidistantes sur le disque des couleurs (à 120° les unes des autres). 
• l’harmonie monochromatique : tons et nuances d’une seule teinte. 

Il existe d’autres harmonies qui mobilisent quatre couleurs. Cependant, plus vous introduisez des couleurs, plus il est difficile d’équilibrer et d’organiser la hiérarchie visuelle ! En clair, contentez-vous d’utiliser deux ou trois couleurs 😉

Le sens des couleurs 

Bien qu’on puisse trouver sur internet une kyrielle d’articles populaires parlant du sens des couleurs, on trouve peu de recherches fournissant la preuve d’un effet universel de certaines couleurs sur les émotions. En règle générale, même si, grâce à l’avènement de la mondialisation, certaines couleurs ont pu se voir attribuer un sens déterminé (par exemple le rouge pour “stop”), l’interprétation des couleurs varie d’une culture à une autre. Il faut aussi garder à l’esprit que certains individus atteints de maladies peuvent ne pas distinguer certaines couleurs. Je vous en ai d’ailleurs déjà parlé dans l’un de mes précédents articles dédié à l’UX et au daltonisme.  

Si vous avez pour objectif de donner un sens particulier à votre design par le biais des couleurs, il vous faut :

1. prêter attention au fait qu’il ne fonctionnera pas dans le monde entier  
2. organiser des tests utilisateurs afin de vous assurer que votre interprétation des couleurs corresponde à celle de vos utilisateurs

Employer les couleurs dans votre design 

Les palettes de couleur sont des séries de couleurs qui ont été sélectionnées pour un projet particulier ou pour un ensemble de design. Chaque couleur est méticuleusement choisie et l’ensemble des couleurs vient mettre en lumière les produits et votre interface. 

Création d’une palette de couleurs

La création d’une palette de couleurs peut être un défi. Les directives suivantes vous aideront à créer une bonne palette de couleurs : 

• Choisissez une harmonie de couleurs (parmi celles proposées ci-dessus) et itérez sur les couleurs individuelles. Un schéma monochromatique est généralement le plus facile à créer et appliquer, donc si vous n’avez aucune expérience des couleurs, commencez par cette harmonie. Une fois l’harmonie choisie, alternez les différentes couleurs pour voir comment elles fonctionnent et comment elles se présentent ensemble, jusqu’à obtenir une combinaison gagnante qui fonctionne correctement avec votre design. Bien sûr, on n’y arrive jamais du premier coup ! Si vous ne savez pas par où commencer, inspirez vous de palettes déjà existantes comme sur Adobe Color par exemple 😉 La technique, c’est aussi de comprendre pourquoi vous aimez un jeu de couleurs en particulier. Est-ce la saturation en couleurs ? La légèreté des couleurs ? Leur chaleur ou leur froideur ? Les réponses vous aideront à créer votre palette de couleurs !

• Limitez votre palette à trois couleurs. Un nombre limité de couleurs renforce la hiérarchie visuelle, ce qui distrait beaucoup moins l’attention des utilisateurs. Par exemple : avez-vous déjà passé un temps infini à rechercher une boîte spécifique de céréales dans les rayons du magasin ? Bien évidemment ! Et c’est tout simplement parce qu’on y trouve une ribambelle de couleurs ! Eh oui, toutes les couleurs sont en concurrence pour mobiliser votre attention. C’est la même chose dans les designs… Plus ou moins !

• Restez dans le ton donné par votre couleur principale. Quand vous créez une palette de couleurs, suivez toujours les recommandations. Non seulement votre travail s’en trouvera facilité, mais en plus de cela l’expérience de marque en sera plus forte et cohérente.  Si vous n’avez pas de lignes directrices, regardez les designs existants et tentez de les incorporer dans votre palette. 

Utilisation de la palette de couleurs

Une fois que vous avez votre palette de couleurs, il est temps de l’appliquer à votre design et de voir le résultat ! Voici quelques conseils :

• Utilisez la règle des 60-30-10. Cette règle signifie tout simplement que les couleurs doivent être utilisées dans 60%, 30% et 10% de votre zone de conception. Utilisez 60% pour la couleur dominante, 30% pour la couleur secondaire et 10% pour une couleur d’accentuation. Ces proportions permettent de créer un équilibre parfait, et évite d’obtenir un ensemble coloré en désordre et chaotique ! En général, les couleurs dominantes et secondaires doivent être relativement neutres. Réservez la couleur d’accentuation pour les éléments que vous voulez faire ressortir, comme les call-to-action.

• Appliquez puis itérez. Une fois la règle des 60-30-10 appliquée, modifiez vos couleurs afin d’améliorer l’esthétique et faire ressortir les éléments importants. Ensuite, posez vous les bonnes questions : 

1. Vos choix de couleurs contribuent-ils à créer la bonne hiérarchie visuelle ?
2. L’œil est-il attiré vers les éléments de votre conception que vous souhaitiez mettre en avant ?
3. Vos choix de couleurs créent-ils un équilibre et un contraste dans votre conception

• Utilisez les couleurs de manière cohérente dans votre interface. Si vous utilisez un bleu vif pour vos CTA sur une page, cette même couleur devra être appliquée sur les autres pages pour le reste de vos CTA. Si vous utilisez le rouge comme couleur d’avertissement sur une page, cette couleur ne doit pas être utilisée pour signifier autre chose sur une autre page. Eh oui, soyez cohérent ! Et qui dit cohérence, dit compréhension des couleurs par vos utilisateurs !

Test de la palette de couleurs

• Testez votre conception. Une fois que vous avez appliqué votre palette de couleurs à votre design, faites quelques tests d’utilisabilité.
  
  Pourquoi ? Tout simplement, parce que les couleurs peuvent modifier l’efficacité des boutons, des liens ou de tout autre type d’éléments. Prenons l’exemple des fameux boutons gris qui semblent parfois désactivés alors qu’ils ne sont pas censés l’être. Vérifiez également les problèmes de lisibilité et d’accessibilité, liés à la fois au contraste et au daltonisme. Vous pouvez utiliser accessible-colors.com pour tester l’accessibilité de différentes combinaisons texte-fond.
  
  De plus, si vos tests d’utilisabilité suggèrent que certaines de vos couleurs de tiennent pas la route, revenez en arrière et reprenez dès le début.

Le choix d’une palette de couleurs et son application à votre design ne sont pas de simples accidents heureux ! Il faut de la répétition et une application minutieuse pour réellement tirer profit de la couleur sur votre interface utilisateur. Une utilisation appropriée des couleurs peut améliorer la perception que les utilisateurs ont de votre marque, attirer l’attention, encourager les interactions, et avoir un impact sur les émotions des utilisateurs 😉

Via : Using Color to Enhance Your Design