Comment gérer les couleurs dans vos interfaces ?

Au moment d’appliquer la charte graphique à nos interfaces, nous sommes amenés à nous poser la question de la couleur.

Si une charte est déjà créée, vous devez en prendre connaissance et l’appliquer (souvent sous l’œil vigilant du département marketing et communication qui veille à la bonne utilisation des éléments graphiques).

Mais il se peut que vous soyez en charge de la création de la charte et donc du choix des couleurs. Pour construire la charte, vous devez porter une attention particulière à la symbolique et au mariage des couleurs.

Une palette cohérente et harmonieuse permet de délivrer correctement un message. Les couleurs ont un pouvoir de communication très puissant. En fonction de son utilisation, le choix et la diversité des couleurs choisies vous allez pouvoir créer une hiérarchie parmi vos contenus et mettre en évidence certains éléments dont les call-to-action par exemple.

Il faut également porter une attention particulière à l’accessibilité. Quand on mentionne l’accessibilité pour les couleurs, on pense surtout au contraste des couleurs entre les fonds et les textes. Il existe un ratio pour bien choisir les correspondances de couleurs.

Je vous partage un outil en ligne qui vous permettra de valider le mariage de vos couleurs quant à l’accessibilité web.

La création d’une palette de couleur a trois objectifs :

  1. Apporter esthétisme, harmonie et cohérence dans vos interfaces.
  2. Faire passer à vos lecteurs les enjeux, les valeurs et la personnalité de votre marque.
  3. Se distinguer et marquer les esprits par rapport aux concurrents.

Je pourrais même ajouter un argument en vous parlant d’organisation : en tant que designer, définir rapidement sa palette de couleur et s’y tenir permet de construire sereinement les interfaces et ne pas se perdre.

Je vous partage donc aujourd’hui mes astuces pour construire votre palette de couleurs.

N’hésitez pas à nous donner en commentaires vos bonnes pratiques sur vos projets ! Chez UX Republic, nous sommes toujours à l’écoute de vos bonnes pratiques et de votre avis !

#1 Couleur principale

Commençons par le commencement : la couleur principale de votre site ! C’est la couleur qui donne vie à l’identité de votre marque.

Pour cette couleur dominante, il est intéressant de se documenter sur la psychologie et la signification des

couleurs. Ainsi, en fonction du secteur d’activité, de la typologie ou de la cible, vous obtiendrez de l’aide pour la choisir.

Ne choisissez pas en fonction de vos préférences personnelles ou des tendances de design. Il faut que vous ayez des arguments forts pour votre client et surtout votre objectif est de faire passer un message aux utilisateurs grâce à la couleur.

Vous pouvez créer des déclinaisons à partir de cette couleur pour obtenir différents tons et différentes opacités.

#2 Couleur secondaire

La couleur secondaire apporte du contraste par rapport à votre couleur principale.

Il faut penser qu’elle symbolise différents états dans vos interfaces et notamment les actions (les call-to-actions et les liens par exemple).

Vu qu’elle va ponctuer les interactions et les contenus importants, il est primordial de choisir une couleur qui se démarque et qui incite à cliquer, tout en restant harmonieux avec votre charte.

Comment je trouve cette couleur ?

Généralement, on choisit une couleur à l’opposé et complémentaire à la couleur principale. Pour cela, vous pouvez vous aider du cercle chromatique. Mais ce n’est pas une règle absolue ! Laissez libre court à votre créativité !

Beaucoup de sites utilisent le noir comme couleur d’action (notamment dans le secteur du luxe) et cela fonctionne car s’est inscrit dans l’univers de la marque et d’autres procédés sont utilisés pour mettre en exergue le contenu.

La couleur secondaire est une bonne pratique en UX design mais beaucoup de designers ne l’utilisent pas et se servent de la couleur principale comme couleur d’action.
Par exemple, dans les guidelines Apple, on retrouve la Tint Color, cette couleur unique qui symbolise la couleur de marque / du produit et les éléments cliquables.

#3 Couleurs de fond

La couleur de fond utilisée est souvent le blanc ou le gris clair. Mais encore une fois, n’hésitez pas à faire des tests pour éveiller votre créativité.

●  Le blanc est une option sûre, c’est une couleur épurée qui permettra à votre contenu d’être mis en valeur.

●  Le gris clair permet de mettre en évidence des contenus ayant des fonds blancs et donc les mettre en valeur (des cartes ou un tableau par exemple).

●  Les teintes foncées vous pouvez également penser votre interface plus sombre et utiliser des teintes foncées comme le gris anthracite ou le bleu nuit. Encore une fois, en fonction de votre palette.

●  Les dégradés sont également une option et pour cela il vous faut plusieurs couleurs qui s’accordent ensemble et qui ne créent pas de déséquilibre ou de scission trop prononcée.

Mon astuce pour déterminer la couleur de fond est de partir de la couleur principale et de l’éclaircir pour créer un lien avec celle-ci.

Comment je trouve cette couleur ?

  • Je sélectionne la couleur principale dans Figma, Sketch ou autre outil de conception.
  • Je passe en mode HSL (au lieu d’être en Hex par exemple.
  • Je change la valeur “L” à 95.

#4 Couleurs des textes

Une bonne pratique à garder en tête pour vos designs est de ne pas utiliser du noir (#000000) pour vos éléments, notamment vos textes.

On préférera au noir des variantes qui partent du bleu, du vert, du gris, … Encore une fois, en fonction de votre palette.

Mon astuce pour déterminer la couleur de texte reprend la méthode pour la couleur de fond, c’est-à-dire de partir de la couleur principale et de l’assombrir pour créer un lien avec celle-ci.

Comment je trouve cette couleur ?

  • Je sélectionne la couleur principale dans Figma, Sketch ou autre outil de conception
    Je passe en mode HSL (au lieu d’être en Hex par exemple)
  • Je change la valeur “L” à 10

Je vous conseille également de choisir deux couleurs pour les textes. Une sombre et une plus claire pour créer une hiérarchie entre différents types de contenus.

#5 Couleurs des alertes

Pour certaines typologies de site, il est intéressant de prévoir des couleurs pour les alertes : du rouge, orange et vert.

Elles pourront vous servir à faire passer des messages ou des notifications à vos utilisateurs comme une erreur ou une validation.

Ce sont des couleurs qui sont utilisées pour :

●  les messages d’erreur, les pages 404, les alertes (snackbars, toasts, modales …).

●  les états et/ou statuts d’un élément

●  des boutons ou des liens (le rouge pour détruire ou supprimer par exemple)

# En conclusion

Pour construire une palette de couleurs, votre première tâche est donc tout d’abord de choisir votre couleur principale. Grâce à ce choix, vous pourrez décliner une palette harmonieuse et cohérente.

Petit aparté sur l’utilisation et le partage de la charte que vous allez créer : pensez à créer un document qui regroupe les couleurs et leurs utilisations pour la partager à l’équipe projet et notamment aux développeurs du projet.

Cela peut également prendre la forme d’une librairie dans votre outil de conception préféré.
Et dans ce cas, je vous conseille d’utiliser les termes (“primary-color”, “secondary-color”, …) . Et non pas le nom de la couleur (“Bleu”, “rouge”, “#FEFEFE, …).

Ainsi, si un changement est effectué ce sera plus simple pour vous. Et à l’utilisation ce le sera également lors de la création de vos différents parcours.

Pensez à prendre votre temps pour vous inspirer, vérifier les symboliques puis faire des tests et challenger vos choix.

 

 

Source image : https://undraw.co/illustrations

 

Alexa CUELLAR UX-UI Designer @UX-Republic


Nos prochaines formations