Règle des 3C
-
Les couleurs ont un impact au niveau psychologique
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 !
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. Il est important de bien les marier.
Voici 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, ProtectionUne fois la couleur maîtresse définie qui va constituer la base de la charte graphique, on peut choisir deux autres couleurs pour compléter la palette.

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.
– 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.Outils : adobe color, coloors , color hunt
Les choix de couleurs n’ont donc pas uniquement leur importance pour un logo.
Mais aussi pour un bouton d’appel à l’action. Pour le fond qui va être sous le texte. Ou les colonnes qui vont l’encadrer. Pour le bandeau en haut de page…
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 à actionCONSEIL : Limiter le nombre de couleurs pour une meilleure homogénéité.
Déterminer :
- couleur fond de page
- couleur de texte courant
- couleur principale
- couleur secondaire
-
Le contraste, quand on parle de design d’interface, ne se limite pas à vérifier l’impact d’une page quand elle est imprimée en noir et blanc.
Le contraste va créer du dynamisme en jouant sur :
- Les couleurs
- Les tailles des éléments
- Leurs formes
- Leurs directions
Le premier point permet de s’assurer que la navigation reste aussi aisée quel que soit le support utilisé (et les réglages qui lui sont propres). Vous devrez trouver la réponse à des questions aussi cruciales que “texte foncé sur fond clair ou texte clair sur fond foncé ?”
-
1. Des images
Les images peuvent avoir deux fonctions sur une interface : être utiles ou créer un lien émotionnel.
Parmi elles, vous trouverez des photos (de produits, de démonstration ou d’appui par rapport à un contenu textuel), des illustrations (qui personnaliseront l’interface), des icônes (au but principalement utilitaire, mais qui peuvent être transformées pour leur insuffler de la personnalité), des mascottes (pour créer un sentiment d’appartenance).
2. Du texte
Le texte ne fait pas partie du design à proprement parler, mais il est pourtant un élément indispensable pour toute interface, il faut donc lui trouver de la place et le mettre en valeur.
La typographie, la taille, la couleur du contenu textuel doit donc également être pensée et prévue pour attirer l’œil et pour être lisible par tous.
3. Des vidéos
Les vidéos sont maintenant devenues incontournables et on en trouve également dans les interfaces, que ce soit en guise d’introduction, de démonstration ou juste pour illustrer un propos.
Cependant, les vidéos devront être prévues pour correspondre au ton de l’interface et au reste de son contenu, pour créer un effet d’unité réel et qu’elles fassent professionnelles.
