Guide complet pour l'utilisation des couleurs dans la conception web

Article original : Comprehensive guide for color usage in web design

Par Tina Feijóo

Il existe beaucoup de matériel sur les couleurs en ligne. Mais aucun de nous n'a le temps de rechercher et de lire de longues séries d'articles pour couvrir le sujet. C'est pourquoi j'ai voulu créer ce guide complet pour l'application des couleurs dans la conception web. Dans cet article, nous aborderons :

La psychologie des couleurs
La terminologie des couleurs
Les règles des couleurs
Comment construire et appliquer une palette de couleurs dans la conception web
Outils et ressources utiles

Pour commencer

Vous avez donc un projet de conception web entre les mains. L'une des premières étapes que vous devrez probablement franchir pour lancer le processus est le choix d'une palette de couleurs. Si vous travaillez pour une marque existante, alors probablement votre champ de couleurs sera limité, surtout si cette entreprise dispose d'un guide de marque. Cependant, si jusqu'à présent vous n'avez qu'une esquisse en noir et blanc d'une marque, attendant des définitions telles que la couleur, alors continuez à lire.

La première chose que je recommande de faire est de réaliser un petit exercice avec votre client ou les parties prenantes du projet. L'exercice consiste à faire écrire par ces parties prenantes une courte liste d'attributs qu'ils pensent que leur nouvelle marque devrait avoir. Si vous pouvez être sur place pour l'exercice (je travaille personnellement à distance depuis l'Argentine pour des clients en Europe et aux États-Unis), faites-les écrire chaque attribut sur un post-it. Ensuite, rassemblez tous les post-its et placez-les sur un tableau blanc. Bientôt, vous commencerez à remarquer des motifs. Prenez et réorganisez les post-its afin de regrouper les notes qui se rapportent les unes aux autres. Ensuite, vous pouvez nommer chaque groupe. Dans ce cas, puisque c'est un petit exercice, le nom serait probablement un seul mot qui comprend tous ces attributs liés. En d'autres termes, un attribut consensuel.

Psychologie des couleurs

Lorsque vous avez terminé cet atelier miniature, vous devriez avoir entre les mains une liste d'attributs consensuels. Votre objectif est de faire en sorte que la marque évoque ces attributs. Pour cela, un outil très puissant est la psychologie des couleurs. Vous ne devriez pas définir la couleur d'une marque simplement parce que vous (ou quelqu'un d'autre) l'aimez. Quelle que soit la couleur que vous utilisez, elle aura sûrement un impact sur votre public. Il y a beaucoup à dire sur les publics, assez pour en parler dans un article séparé. Pour l'instant, disons simplement que votre public compte et que vous devriez concevoir spécifiquement pour lui.

Revenons à la psychologie des couleurs. Pour résumer, la couleur affecte les gens et évoque certaines idées/attributs. La manière dont nous relions les idées aux couleurs dépend de notre culture. Différentes cultures ont différentes interprétations des couleurs (voir, je vous ai dit que le public compte). Il existe du matériel sur la psychologie des couleurs pour de nombreux pays/régions du monde. Voici une ressource que j'ai trouvée.

Dans cet article, nous aborderons les interprétations des couleurs occidentales :

Rouge : Amour, danger, colère, guerre. Un rouge plus foncé pourrait être lié à l'élégance.
Orange : Énergie, vitalité, automne.
Jaune : Avertissement, bonheur, lâcheté, ou richesse, dans une teinte dorée.
Rose : Féminité, romance, sensibilité. Peut aussi transmettre l'énergie et l'innovation.
Violet : Royauté, luxe, créativité, spiritualité.
Bleu : Tristesse, calme, fiabilité, confiance, corporate.
Vert : Nature, chance, propreté (selon la teinte).
Gris : Conservateur, modernité, luxe.
Noir : Élégance, pouvoir, force.
Blanc : Pureté, propreté, élégance.

Il est important de noter que la teinte de la couleur affectera également ses interprétations. Mais ce n'est pas seulement la « teinte ».

Terminologie des couleurs

Parlons correctement. Si nous allons travailler avec les couleurs, nous devrions savoir comment en parler, et par conséquent, comment les manipuler pour répondre à nos besoins de conception. Familiarisons-nous avec quelques termes :

Teinte : C'est la couleur.
Saturation/Chroma : Cela fait référence à la pureté d'une couleur. Une couleur est la plus pure lorsqu'elle manque de gris.
Valeur : Fait référence à la clarté ou à l'obscurité d'une couleur.

Avec ces trois paramètres, nous pouvons créer de nombreuses « versions » d'une couleur. Pour mieux l'expliquer, regardons la Sphère de Munsell :

Les « versions » dont je parlais plus tôt ont en fait des noms. Oui, plus de terminologie des couleurs à apprendre !

Ton : Lorsque vous ajoutez du gris (désaturé) à une couleur ou à une teinte.
Teinte : Lorsque vous ajoutez du noir (baissez la valeur) à une couleur ou à une teinte.
Nuance : Lorsque vous ajoutez du blanc (augmentez la valeur) à une couleur ou à une teinte.

Créer une palette de couleurs

Donc, un rapide récapitulatif. Jusqu'à présent, vous avez :

Définir une liste d'attributs pour votre marque.
Sélectionner une couleur pour refléter ces attributs, grâce à l'utilisation de la psychologie des couleurs.
Déterminer une version plus spécifique (ton, teinte ou nuance) de votre couleur, grâce à votre connaissance de la Sphère de Munsell.

Super ! Maintenant, il est temps de créer une palette de couleurs pour votre site web. Pour cela, nous prendrons la nouvelle couleur de votre marque comme couleur centrale pour baser votre palette. L'étape suivante consiste à choisir quelques couleurs pour accompagner votre couleur principale, et donc, créer votre palette. Pour ce faire, il existe plusieurs règles de couleurs parmi lesquelles vous pouvez choisir et appliquer. Ces règles sont construites sur le Cercle Chromatique ou Roue des Couleurs, un outil très utile pour créer des combinaisons de couleurs.

Couleurs complémentaires

Ce sont des couleurs qui sont situées à des côtés opposés du Cercle Chromatique.

Couleurs analogues

Ce sont des couleurs qui sont côte à côte sur le Cercle Chromatique.

Couleurs triadiques

Ce sont des couleurs obtenues en superposant un triangle équilatéral au Cercle Chromatique.

Couleurs complémentaires divisées

Cette combinaison est obtenue en associant la couleur principale aux deux couleurs adjacentes à sa complémentaire.

Couleurs carrées

Ce sont des couleurs obtenues en superposant un carré au Cercle Chromatique.

Plus de combinaisons

Comme pour les combinaisons de couleurs triadiques et carrées, vous pouvez créer des palettes encore plus grandes en utilisant d'autres figures géométriques telles que le pentagone, ou un hexagone.

Astuce : Attention à la vibration des couleurs

Lorsque vous créez une palette, surtout une palette complémentaire, il n'est pas seulement nécessaire de définir les teintes. Vous devez également prendre en compte la saturation/chroma et la valeur de vos couleurs, afin d'obtenir une palette harmonieuse. Sinon, vous risquez que vos couleurs vibrent. Littéralement.

Il existe certaines couleurs qui, lorsqu'elles sont placées côte à côte, produisent un effet perturbant sur nos yeux. Elles semblent vibrer. Cela se produit surtout avec des couleurs qui sont opposées dans le Cercle Chromatique, et qui ont le même niveau de saturation.

Appliquer les couleurs dans la conception web

Maintenant que nous avons une couleur centrale et quelques notions sur les règles des couleurs, nous pouvons choisir une stratégie et définir notre palette de couleurs pour la conception de notre site web. Commençons par le début.

Combien de couleurs ?

La vérité est que vous pouvez avoir autant de couleurs que vous le souhaitez, mais vous devez garder à l'esprit que les palettes de couleurs plus grandes sont plus difficiles à mettre en œuvre efficacement. Cela peut également affecter la capacité à avoir un système de conception cohérent en place. Cependant, c'est votre choix. Je recommanderais personnellement d'avoir une palette de couleurs simple, surtout si vous commencez.

Quelles couleurs ma palette devrait-elle inclure ?

Pour commencer, votre palette devrait inclure une couleur très claire et une couleur très foncée. L'idée est que ces deux couleurs aient un grand contraste (je laisserai des outils pour mesurer le contraste à la fin de l'article). Par exemple, noir et blanc (oui, le blanc compte comme une couleur). Pourquoi ? Parce que vous aurez besoin d'une couleur pour les arrière-plans et d'une couleur pour le texte. C'est aussi simple que cela. Personnellement, je préfère choisir des couleurs neutres pour cela. Les couleurs neutres sont polyvalentes et élégantes et peuvent compléter n'importe quelle palette de couleurs donnée.

En résumé, votre palette de couleurs ne devrait pas seulement inclure des couleurs très vives et intéressantes. Vous avez aussi besoin de couleurs de base.

La palette de couleurs finale

Disons que nous allons avoir au total 5 couleurs dans notre palette. Nous savons déjà qu'une couleur devrait être vraiment claire (par exemple, blanc) et qu'une autre couleur devrait être très foncée (par exemple, noir). Cela nous laisse trois places ouvertes pour quelques couleurs intéressantes. Nous savons aussi que nous avons la couleur principale et que les deux autres couleurs seront liées à cette couleur principale grâce à l'utilisation des règles des couleurs.

Faisons semblant que notre couleur principale est le bleu. Voici quelques palettes possibles avec le bleu comme couleur principale.

Palette complémentaire

Palette analogue

Palette triadique

Comment appliquer ces couleurs à mon design ?

Bien sûr, il n'y a pas de règles fixes, et différents designers peuvent obtenir des résultats très différents en utilisant les mêmes couleurs, polices, etc. Cela n'est destiné qu'à servir de guide pour commencer. En d'autres termes, si vous n'avez aucune idée de ce qu'il faut faire avec votre nouvelle palette de couleurs.

Continuons avec notre palette inventée. Supposons que nous avons choisi d'utiliser la palette complémentaire.

Comment pouvons-nous l'appliquer ?

Blanc : peut être utilisé comme couleur de base/arrière-plan. Bien sûr, vous pouvez utiliser d'autres neutres clairs (comme le gris) pour certains arrière-plans, ou même une couleur vive de votre palette, mais en général, pour des raisons de lisibilité, vous devriez probablement avoir plus d'espace blanc en place.
Noir : Peut être utilisé pour le texte. Encore une fois, vous pouvez avoir des citations ou du texte mis en évidence dans une autre couleur.
Bleu clair : Choisissez une couleur qui est très différente de la couleur du texte mais qui a un bon contraste avec la couleur d'arrière-plan principale. Dans ce cas, cette couleur serait le bleu clair. Cette couleur sera parfaite pour les hyperliens. Vous voulez que les liens soient distinguables de votre texte, mais lisibles.
Bleu : C'est votre couleur principale, donc elle définira probablement le ton de votre design. Vous l'utiliserez probablement pour certains arrière-plans, boutons, graphiques, etc.
Orange : Ce serait votre couleur d'accent. Vous pourriez l'utiliser pour ajouter une touche de couleur à votre design. Peut être utilisé sur certains boutons, divers éléments, icônes et graphiques.

D'accord, mais qu'en est-il de la cohérence ?

J'aime les règles. Les règles pour moi sont ce qui sépare la conception avec une raison/un objectif/une justification de la conception de ce que vous ressentez. Donc, lorsque je commençais, je cherchais des règles pour utiliser les couleurs. Par exemple :

Tous les boutons (principaux) doivent-ils avoir la même couleur ?
Tous les éléments cliquables doivent-ils avoir le même aspect ?
Tous les éléments cliquables doivent-ils avoir la même couleur ?

Et ainsi de suite. La vérité est qu'il n'y a pas de règle (dans ce cas). Vous pourriez avoir des boutons (principaux) de différentes couleurs, et vous pourriez utiliser la même couleur pour les éléments cliquables et non cliquables. Tous les éléments cliquables n'ont pas besoin de ressembler à des liens ou à des boutons. Une chose qui est nécessaire est que vous montriez clairement quels éléments sont cliquables et lesquels ne le sont pas. Vous pouvez y parvenir en définissant des états de survol.

De plus, quelle que soit la manière dont vous décidez de concevoir vos éléments d'interface utilisateur, vous devez vous assurer que vous garderez la conception cohérente dans toute la plateforme. Pour ce faire, vous pourriez créer :

Un kitchen sink (si vous gérez HTML/CSS)
Un guide de style
Des symboles dans votre logiciel de conception (par exemple, Symboles Sketch). Ainsi, chaque fois que vous avez besoin d'un élément, vous ne le créez pas à partir de zéro, vous utilisez simplement un symbole existant. Si vous apportez une modification à un symbole, cette modification se reflétera sur toutes les instances du symbole.

Utilisations pratiques des couleurs

La couleur n'est pas seulement destinée à rendre votre design attrayant. Elle est également utilisée pour transmettre un sens. Par exemple :

Vous pouvez utiliser le rouge/jaune pour les avertissements/notices.
Vous pouvez mettre en œuvre un codage par couleurs (par exemple, tout le contenu du sujet X aura la couleur X).
Vous pouvez montrer le statut (le vert pourrait signifier actif, le rouge inactif, etc.).

C'est génial et cela aide les utilisateurs à comprendre et à décoder les informations que vous leur montrez. Cependant, vous ne devriez pas vous fier uniquement à la couleur. Pourquoi ? Parce que vous devez prendre en compte les utilisateurs daltoniens, qui représentent 8 % de la population mondiale. Pour leur bien, essayez toujours d'inclure des étiquettes claires et/ou des icônes pour transmettre un sens, et utilisez la couleur pour soutenir ce sens.

Palettes plus complexes

Comme nous l'avons dit précédemment, vous pouvez avoir des palettes plus complexes, avec plus de couleurs. Par exemple, une palette carrée, ou une palette analogue avec un nombre plus élevé de couleurs. Cela peut parfaitement fonctionner, mais comme toujours, la décision d'utiliser plus de couleurs doit être basée sur des éléments tels que l'objectif de votre site web et son public cible. Regardons quelques exemples :

Slack

slack.com

Stripe

stripe.com

Outils et ressources

Vous êtes arrivé à la fin de cet article, félicitations ! (et merci pour votre lecture). J'espère que vous avez trouvé cet article utile. Nous avons couvert beaucoup de terrain, mais de manière résumée (oui, cela aurait pu être plus long).

Veuillez trouver ci-dessous quelques outils et ressources pour travailler avec les couleurs dans la conception web :

Choisir des couleurs

Vérifier le contraste

Daltonisme

ColorOracle : D'un seul clic, voyez ce que les personnes atteintes de déficiences courantes de la vision des couleurs verront.

Vous pouvez lire plus de mes articles de blog sur uxagustina.com.