Comment choisir les couleurs de votre site web ?
Vous avez toujours un mal de chien à assortir votre chemise à votre pantalon ? Vous ne vous sentez pas l’âme d’un artiste, encore moins d’un webdesigner ? Vous vous sentez pétrifié à l’idée de devoir choisir les couleurs de votre site web ? La situation est grave mais certainement pas désespérée : vous êtes tout à fait capable de parvenir à un résultat probant. A condition de garder deux ou trois choses à l’esprit, de ne pas griller les étapes et de vous poser les bonnes questions.
Pas besoin d’être un grand webdesigner pour choisir les couleurs de son site web, même si l’étape est intimidante. Le choix n’est pas non plus à prendre à la légère : il a un impact considérable sur votre image de marque ou d’entreprise, autant que sur les comportements de votre cible. En branding, les couleurs parlent de vous et pour vous.
Pour ne pas gâcher votre stratégie ou pire encore, faire fuir les internautes avec un site moche, trois étapes essentielles à suivre :
- Choisir la couleur dominante
- Déterminer une palette de couleurs
- Agencer ces couleurs sur les pages web
1 Couleur maîtresse et identité de marque
La reconnaissance d’une marque ou d’une image d’entreprise dépend à 80% de la couleur, selon les études. D’où il s’agit de ne pas faire n’importe quoi. La règle numéro 1 est de respecter la couleur dominante du logo, ou les couleurs si le logo est bichrome ou polychrome, pour renforcer l’identité visuelle.
Démonstration. Reconnaîtriez-vous d’un coup d’œil distrait le logo de Google s’il vous était montré en rose sur fond noir ? Quelques secondes supplémentaires seront nécessaires. A l’inverse, vous êtes capable d’identifier immédiatement la marque même lorsque la forme ou la typographie change.
Si les couleurs ne sont pas encore déterminées, comment choisir parmi toute la gamme possible ? La pire erreur serait d’opter pour sa couleur préférée.
En fonction des cultures et des régions du monde, les couleurs sont connotées, associées à certaines représentations. Par exemple, le vert évoque la santé, la nature ou l’environnement ; le rouge la passion, l’urgence ou le danger ; le rose la féminité, la romance et l’innocence ; le bleu la sécurité, la stabilité et le calme ; etc. Les choix ne sont pas innocents. Songeons par exemple aux couleurs des partis politiques. Que penserait-on d’un logo communiste en bleu ou d’un logo écologiste en rouge ?
Chaque couleur suscite chez la cible des émotions et sentiments inconscients (et par conséquent des comportements de conversion) qui varient en fonction de l’âge et du genre (masculin/féminin). A vous d’identifier le profil de votre cible et de déterminer quels sentiments votre marque doit susciter, en fonction de votre secteur d’activité.
S’aligner ou se démarquer des concurrents ?
Observez les couleurs utilisées par vos concurrents. Certains secteurs ont des couleurs très codifiées, d’autres moins. Deux options : se fondre dans le moule ou au contraire se démarquer. Si votre secteur d’activité le permet, n’hésitez pas à trancher par la couleur !
2 Des couleurs secondaires harmonieuses : quelques trucs
Une fois déterminée la couleur dominante, arrive le moment délicat où il va falloir choisir les couleurs secondaires pour créer un « color scheme », c’est-à-dire une palette de couleurs pour votre site web. Daltoniens s’abstenir.
N’en faites pas trop
A moins de proposer des spectacles de cirque (et encore), une à deux couleurs secondaires suffisent pour établir votre color scheme. Mieux vaut éviter l’effet « pull jacquard », largement passé de mode, qui provoque au mieux la confusion de l’internaute, au pire la nausée.
Inspirez-vous
On ne doit pas toujours réinventer la poudre. N’hésitez pas par exemple à choisir une photo qui vous inspire pour reproduire certaines associations de couleur.
Utilisez les outils en ligne
De nombreux outils en ligne de color matching (Adobe Color CC tool, Colorspire, ColoRotate, Color Scheme Designer, etc.) permettent de tester les combinaisons de couleur et de les harmoniser. Jouez avec les teintes, les contrastes, les gammes et les nuances, votre œil appréciera si cela fonctionne.
Préservez la lisibilité du contenu
Ne négligez pas la couleur de fond, le background de votre page web. En général, plus il y a de contenu et plus le fond doit rester discret pour ne pas gêner la lisibilité et fatiguer les yeux. Il faut qu’on se sente bien sur votre page pour y rester !
3 Agencer les couleurs sur une page web : la règle d’or
La palette de couleurs est soigneusement établie, testée, approuvée. Reste à agencer les teintes sur les différentes zones de vos pages web. Mais pas n’importe comment.
La couleur est un stimuli visuel puissant. En clair, elle guide le regard du visiteur lorsqu’il navigue sur votre page. Elle lui dit en quelque sorte quoi regarder et dans quel ordre, en créant une hiérarchisation visuelle des éléments de la page.
Utilisez les couleurs dans les zones stratégiques pour attirer l’attention du visiteur : engendrer des conversions, stimuler un clic… Mais n’en abusez pas : trop de stimuli crée la confusion, l’internaute ne saura plus ce qu’il doit regarder !
Comme en pâtisserie, tout est question de proportions
Si vous craignez de vous tromper et de gâcher la recette, des proportions « idéales » ont été définies en design pour répartir harmonieusement les couleurs. Une sorte de standard appelé la « règle des 60-30-10 » :
- 60 % de couleur dominante: les teintes de la couleur maîtresse doivent couvrir 60% de l’espace de la page. Classiquement les grandes zones traditionnelles comme le menu, les blocs, les sliders…
- 30 % de couleur secondaire : cette deuxième couleur doit contraster avec la couleur dominante pour valoriser les éléments importants du design sur environ 30 % de la page.
- 10 % de couleur complémentaire : la troisième couleur se réserve pour accentuer les petites zones les plus stratégiques comme les boutons, qui appellent une action : un clic, une réponse, etc.
Toutes les grandes marques choisissent méticuleusement leurs couleurs. Elles font partie intégrante de leur stratégie d’image, de positionnement, de conversion de l’internaute, etc. A vous de jouer, osez la couleur !
