Couleurs et signification en Webdesign
La vie réelle est pleine de couleurs du soleil, lumière artificielle, chaleur, froid, habits, marques, fashion, et un million d’autres choses qui peuvent affecter votre façon de percevoir les couleurs. En tant qu’UX designer nous pouvons ne pas nous occuper des pantones et de la charte graphique, mais nous avons définitivement beaucoup de choses à apprendre des :
Couleurs
Vous venez juste d’arriver ? Vous voudrez peut être commencer par qu’est ce que l’UX design.
Il y a certaines choses que nous pouvons apprendre à propos de ces canards colorés.
En tant qu’UX designer, nous sommes généralement bons pour réaliser des wireframes en noir et blanc. Et c’est une bonne chose ! Nous nous concentrons sur les fonctions tandis ce que l’UI designer peut se concentrer sur le style.
Cependant, certaines fois la couleur est une fonction. Comme les feux tricolores ou comme la couleur des Mister frizz.
Signification :
Dans l’image ci dessus, nous pouvons voir 3 canards : bleu, jaune et rouge. Ils sont tellement beaux ! Immédiatement ces canards semblent avoir un tonalité différente, et c’est facile d’imaginer comment leur couleur pourraient modifier la signification de ces canards.
Si les canards étaient des boutons, ils pourraient signifier : confirmer, annuler et supprimer. S’ils étaient des indicateurs de réservoir d’essence cela serait : plein, moitié plein et vide. Et si ils étaient sur une plaque de cuissons : chaud, un peu chaud et froid.
Vous avez compris l’idée : bien que les canards sont identique, la couleur peut changer leur signification.
Si vous n’avez pas besoin d’indiquer quelque chose comme cela, laisser l’UI designer choisir les couleurs. Sinon indiquez les sur vos wireframes !
Reculer ou avancer :
L’autre chose à garder à l’esprit, c’est qu’une couleur peut être criarde ou calme.
La seconde image au dessus montre un canard rouge et deux bleus. Celui en rouge ne parait pas un peu plus près ? Et ben non. Donc les choses comme les boutons d’achats devraient avoir une couleur qui saute aux yeux. Plus de gens cliques sur des couleurs qui « avancent ».
D’un autre côté, des fois on veux que certaines choses restent en fond, elles sont visibles, mais ne doivent pas distraire les utilisateurs, comme les deux petits canards bleu. C’est très bien pour quelque chose comme un menu qui apparait toujours à l’écran. S’il est d’une couleur criarde c’est inutile et ça distrait l’utilisateur du reste de la page.
Garder vos wireframes simple !
Les couleurs dans les wireframes doivent donner des indications fonctionnelles. N’utilisez la couleur que si ça apporte une information, mais n’en faites pas un document de style ! En plus ca risque de faire partir la discussion sur le style et les couleurs alors que ce n’est PAS DU TOUT le but des wireframes.
Combinez les principes visuels
La couleur peut très bien marcher avec la leçon sur le poids visuel. Quelque chose de gros est immanquable, mais quelque chose de gros est rouge l’est encore moins ! Réalisez vos alertes d’erreur rouges et avec un fort contraste.
Et si vous informez juste votre utilisateur que ce qu’il a fait a été réussi (passer une commande, envoyer un formulaire de contact…) mettez le pas trop gros et en vert.
