Webdesign: Choisir et utiliser vos couleurs

Des psychologues ont suggéré que la couleur était responsable à hauteur de 60% de l’acceptation ou non d’un produit ou d’un service. Il est donc évident que l’influence des couleurs va bien au-delà d’un simple aspect esthétique !
En effet, les couleurs contribuent à transmettre un message, elles hiérarchisent les informations et définissent une atmosphère de façon générale. C’est donc un élément clé de votre design mais également de votre identité de marque. Avant de choisir l’association de ces couleurs, il est important de bien déterminer l’audience à laquelle on s’adresse, le positionnement de la marque, les valeurs et les émotions que l’on souhaite véhiculer.

 

Comment choisir vos couleurs ?
Les couleurs nous transmettent des messages que nous interprétons inconsciemment en faisant des associations qui varient selon notre environnement culturel. Chaque couleur peut ainsi être associée à une émotion, à une symbolique qui influence le comportement des visiteurs.
Hormis ces émotions et ces valeurs que vous souhaitez véhiculer, il faut également prêter attention au secteur d’activité dans lequel vous évoluez. En effet, certaines couleurs sont plus conseillées que d’autres dans certains secteurs et il est nécessaire de respecter ce code couleur au risque de perdre en crédibilité auprès de vos clients. Par exemple, il est très courant d’utiliser la couleur bleue dans l’informatique ou la finance car il s’agit d’une couleur qui exprime la confiance et la sécurité, des valeurs indispensables pour rassurer le consommateur.

 

Pour vous aider à choisir, vous trouverez ci-dessous les principales couleurs et leurs significations.

Bleu: Confiance, Intelligence, Tranquillité, Sécurité, Responsabilité
Rouge: Energie, Passion, Amour, Provocation
Orange: Créativité, Communication, Succès, Courage, Vitalité
Vert: Naturel, Stabilité, Fertilité, Croissance
Jaune: Joie, Amitié, Energie, Soleil, Chaleur
Noir: Puissance, Élégance, Classe, Protection

 

Une fois que vous avez défini la couleur maîtresse qui va constituer la base de votre charte graphique, vous pouvez sélectionner deux autres couleurs pour compléter votre palette.

roue_chromatique_grande

Le choix de ces couleurs peut obéir à plusieurs règles :

Les couleurs complémentaires : en vous aidant d’une roue chromatique, vous sélectionnez la couleur qui est à l’opposé parfait de votre couleur principale. Utiliser des couleurs complémentaires permets de souligner de façon très lisible les éléments clés de votre design.
Les couleurs analogues : il s’agit des deux familles de couleurs qui encadrent votre couleur principale dans la roue chromatique. C’est généralement une combinaison que l’on retrouve dans la nature. Cela crée un rendu harmonieux, plaisant aux yeux, qui apporte sérénité et confort au design.
Les couleurs « isocèles » : pour obtenir ces couleurs, il s’agit de tracer un triangle isocèle dans la roue chromatique en partant de votre couleur principale comme une des bases de votre triangle. Il s’agit d’un choix couramment utilisé lorsque l’on veut commencer une création dans trop de complications.
Les couleurs monochromes : Il s’agit des couleurs qui descendent directement de votre couleur maîtresse, soit en plus foncées, soit en plus claires. Cette combinaison est très souvent utilisée pour des designs épurés et minimalistes.
De plus, vous devez aussi respecter une juste utilisation des couleurs chaudes et des couleurs froides. Les couleurs chaudes expriment la passion, la joie, l’enthousiasme et l’énergie alors que les couleurs froides expriment le calme et le professionnalisme. Utiliser les deux en même temps et en trop grande proportion risque de rendre votre site incompréhensible et l’utilisateur peut ne pas comprendre le message de votre entreprise et ne plus la trouver digne de confiance.

 

Comment les utiliser?
Une fois que vous avez défini votre gamme de couleur, il y a une proportion qui a bien fait ses preuves et qui permet de les utiliser de façon proportionnée. Il s’agit de la règle des 60-30-10.
60%
Les teintes de votre couleur maîtresse doivent recouvrir 60% de votre design. Cela comprend donc les grandes zones traditionnelles : blocs, slider, background, menu…

30%
Votre deuxième couleur va être utilisée à hauteur de 30% pour créer un contraste avec la première et venir mettre « en lumière » des éléments importants de votre design.

10%
Enfin les 10% restants utilisés par votre troisième couleur vont souligner les éléments stratégiques tels que les boutons et autres appels à action.

 

D’un point de vue plus opérationnel, au moment de la construction de votre design sous photoshop par exemple, veillez à respecter une harmonie entre les couleurs appliquées sur vos différents calques et tous les éléments photo que vous allez ajouter. En effet, une connexion colorimétrique doit être établie afin de créer une unité dans le design.

 

Enfin d’un point de vue technique, gardez toujours en tête qu’une page web affiche 256 couleurs correspondants aux codes hexadécimaux. Si vos couleurs n’en font pas partie, le navigateur affichera la couleur la plus proche. Attention donc à respecter ce point.

 

Nous espérons que ces conseils vous aideront à mettre en place des designs harmonieux et parlants auprès de vos clients.
Et n’oubliez pas que vous avez toujours la possibilité de retravailler et de partager vos maquettes sur notre plateforme collaborative si vous ne deviez pas trouver tout de suite la bonne combinaison de couleurs 😉

Comments: no replies

Join in: leave your comment

Rating*