4 techniques simples pour choisir les couleurs de votre site web
Dans le processus de création de votre site internet, il y a forcément un moment où vous vous posez la question du choix de vos couleurs ? C’est surement pour ceci que vous êtes là d’ailleurs héhé. Imaginez maintenant que ce choix de couleurs ait le pouvoir d’impacter et d’influencer votre visiteur à acheter ou à vous contacter. Que feriez-vous ? Vous liriez cet article attentivement, prendrez plus de 5 min pour choisir vos couleurs et vous avez raison 😌
Vous allez me dire ok, Quelle est leur signification ? Comment je les choisis ? ou encore Comment j’organise mon site avec ces couleurs ? Vos questions me semblent PAR-FAITES puisque c’est ce que nous allons voir dans la suite de l’article.
… et si vous n’êtes pas convaincu imaginez que l’on vous vend du Bio. Preférez-vous un packaging vert ou rouge ?!
Étape 1 : Définir vos couleurs selon leur signification
En pensant aux valeurs et idéologies que représentent les marques ci-dessous (Apple, Coca Cola ou encore Bein Sport) on se rend compte de l’importance de la couleur pour l’image de la marque.
Choisissez 2 couleurs principales correspondant à l’image que vous souhaitez donner de votre société.
Blanc
- pureté
- bonheur
- jeunesse
- encourageant
Noir
- formalité
- luxueux
- secret
- glamour
Gris
- impartial
- compromis
- maturité
- sophistiquée
Jaune
- chaleur
- bonne humeur
- optimisme
- humour
Orange
- revigorant
- plaisir
- créativité
- énergie
Rouge
- passion
- colère
- vigueur
- vitesse
Vert
- nature
- équilibre
- croissance
- rafraîchissant
Rose
- protection
- chaleur
- amical
- léger
Bleu
- connaissance
- tranquilité
- sécurité
- confiance
Marron
- terre à terre
- sérieux
- bien pensé
- confiance
Violet
- royal
- sagesse
- spiritualité
- autorité
Étape 2 : Construire sa palette de couleur
Définition préalable : Une palette de couleur représente l’ensemble des couleurs utilisées sur votre site internet.
L’objectif de l’utilisation d’une palette permet d’être cohérent dans la création de vos pages et le choix de vos visuels afin de le transformer en un puissant outil de conversion. Voici 4 astuces de bases pour clarifier vos choix de couleurs :
1- choisir une dominante
Dans la palette que vous allez déterminer, vous aurez forcément des couleurs claires et foncées. Mais le premier choix à faire est celui du fond de votre site web. Avec une dominante claire ou foncée.
Foncée : Élégance, luxe, sophistification
Claire : Simplicité, pureté, jeunesse
2- reprenez les couleurs de votre logo
Votre logo a un rôle à jouer dans le choix de vos couleurs. Ça parait évident, mais il est important de le préciser.
Afin de créer une harmonie, il est nécessaire de reprendre la ou les couleurs présentes sur votre logo.
3- ayez assez de contraste
C’est le meilleur conseil que l’on peut vous donner !
Créez un contraste suffisant entre vos couleurs de fond et de texte. Votre contenu sera plus lisible pour vos visiteurs. Sans ça personne ne pourra vous lire et votre audience se réduira.
4- jouer sur les nuances et l’équilibre
Pour un bon équilibre, utilisez les couleurs neutres de votre palette plus régulièrement puis celles plus vives afin d’accentuer le contenu que vous offrez. N’hésitez pas à tester différentes nuances d’une même couleur, qui peuvent être à la fois neutre ou vive.
Pour créer une belle harmonie vous pouvez utilisez un l’outil gratuit : Coolors.co, générateur de palette qui vous permet de créer la votre en bloquant les couleurs qui vous intéresse via le cadenas. Cliquez sur la barre d’espace pour renouveler les autres couleurs.
Combien de couleurs à déterminer ?
Votre site n’est pas un sapin de Noel et vous ne travaillez pas chez Desigual non plus. C’est pourquoi il faudra définir un nombre de couleurs. Dans son livre “The Handbook of Computer-Human Interaction” Martin Helander recommande de 2 à 5 couleurs pour réaliser la palette de votre site web. Chez Pop Startup, nous préconisons 4 ou 5 couleurs pour couvrir les éléments de votre site.
L’idée est d’attribuer une fonction à chaque couleur, pour créer une cohérence graphique et un cadre logique chez votre visiteur. Avec des titres, textes ou liens d’une couleur définie.
- 2 couleurs de fond : Pourquoi deux ? Afin de délimiter les sections de votre site et varier les tons pour que votre visiteur ne s’ennuit pas.
- 1 couleur de texte : La couleur du texte doit être en opposition avec la couleur de fond. En cas de fond clair, prenez une couleur de texte foncé (et vice versa) afin de créer un contraste et d’optimiser la lecture.
- 1 couleur de CTA et lien : La couleur des liens et CTA (appel à l’action/bouton) créez le dynamisme et l’interactivité de votre site puisque c’est à ces endroits que le visiteurs aura de l’action. Soyez sur de choisir une couleur vive qui sort du lot afin d’être reconnaissable partout.
- 1 couleur bonus pour les touches finales : Vous devriez également choisir une autre couleur qui sort du lot mais bien moins excentrique que celle de votre CTA. De cette manière votre CTA sera l’information principale sur laquelle votre visiteur sera concentré.
Donne vie à tes couleurs en téléchargeant gratuitement notre charte graphique à compléter !
- document type couleurs hexadécimal
- document type polices de caractère
- utile
- partageable
- format Google sheets
+ inclus dans ton pack CSW
Pages : Construisez les textes de votre site
Swag Doc : Définisez le style de votre site
Exemple avec Pop Startup
Le blanc #ffffff
Couleur de fond du site ; Cela représente des valeurs positives tel que l’équilibre, le calme et la sérénité. Des qualités nécessaires à faire ressentir au client lorsqu’il est en période de création.
Ceci donne également une certaine fraicheur et un côté épuré à l’agence.
Le orange #f6a831
Couleur des call to action et des liens ; Tout d’abord on retrouve du orange dans le logo de l’agence, ce qui implique de le retrouver dans le site.
Il s’adapte parfaitement avec la thématique « jus de fruit » du site et donne de l’énergie et un côté plaisir, c’est deux aspects doivent donner envie au visiteur de cliquer sur les liens proposés.
Le choix du orange est également lié à la créativité, qui pour une agence de web design est essentielle.
Le bleu #1d84d4
Couleur des touches finales ; La connaissance et la sécurité sont 2 éléments indispensables pour la création d’un site au niveau technique. A celà s’ajoute la notion de confiance qu’implique le bleu, nécessaire car c’est son image digitale que l’on donne à représenter.
Couleur Hexadécimal / Les couleurs sur le web
Sur internet, notamment en HTML et CSS, les couleurs sont définies par un code héxadécimal, composé d’un # et de 6 caractères. Ce code représente la valeur des couleurs primaires Rouge, Vert et Bleu (#RRVVBB) avec lesquels il est possible de recréer l’ensemble des couleurs. A vous le taupe (#B38B6D) et l’émeraude (#3EB5A5) 😌
Outil utile pour connaitre les codes : http://www.code-couleur.com/
Etape 3 : Configurer vos couleurs sur le thème Divi
Votre palette de couleur est définie. Il ne vous reste plus qu’à l’ ajouter à votre site web.
Si vous utilisez le thème Divi comme Pop Startup, vous pourrez paramétrer vos couleurs afin de les retrouver automatiquement lorsque vous créer de nouveaux contenus.
Pour cela rendez-vous dans votre tableau de bord WordPress puis dans les options du thème Divi. En scrollant, vous trouverez la configuration de la palette de couleur.
Désormais il reste à assigner les couleurs à vos titres, corps du texte, menu, lien etc…. Cliquez dans le Personnaliseur de thème dans votre barre de navigation. Sélectionnez l’onglet Paramètres généraux.
Dans Typographie, vous pourrez choisir les couleurs des liens, corps du texte et de vos en-tête (titre H1). Dans Paramètres de mise en page, vous pourrez configurer la couleur d’accent du thème. Dans Fond, la couleur d’arriere plan de votre site. Dans Barre de menu primaire, ce sont les couleurs de votre menu que vous pourrez configurer.
Retrouvez sur votre gauche, les captures d’écran de ces différents paramétrages.
Conclusion
Maintenant que vos couleurs sont définies et configurées, il ne vous reste plus qu’à vous imprégnez de ces couleurs. Dès lors que vous créez un nouveau contenu, vous aurez plus de choix colorimétrique afin de faire vivre une expérience complète a votre visiteur. Ce qui engagera davantage celui-ci à vous contacter…
Source : Elegant Theme, Kissmetrics, photo by Scott Webb via Unsplash