5 techniques pour peaufiner UX avec couleur
La couleur est l'un des éléments clés de tout système de conception. Sur les sites Web ou dans les applications, la couleur peut être utilisée de diverses manières: parfois, la couleur peut être utilisée pour créer un point focal par contraste ou en limitant la couleur à un emplacement sélectionné; La couleur peut également aider à établir la hiérarchie et, par conséquent, à influencer le regard de l'utilisateur.
Dans cet article, nous parlerons de l’utilisation stratégique de la couleur.
1. Créer un point focal à travers les proportions
Un bon exemple de proportions de couleur est la conception de Viporte . Au fur et à mesure que vous descendez sur leur page d'accueil, chaque section est ornée d'une grande lettre au centre. La lettre est remplie d'une belle couleur avant que les animations des sections ne soient lancées. La couleur des différentes images animées est liée à la couleur des lettres. Le point focal est très certainement au centre des sections, en partie grâce à l'utilisation ciblée de la couleur. Les proportions varient - parfois il y a un peu de couleur et parfois il y en a beaucoup. De toute façon, les proportions sont utilisées pour attirer l'attention sur un point focal. Si la couleur était plus évidente partout dans chaque section, le point focal ne serait pas aussi clair.
2. Attirer l'attention à travers le contraste
Une autre chose que la couleur peut manipuler est le contraste. Lorsque les couleurs du design global sont calmes ou moelleuses, l'ajout d'une couleur contrastante attirera beaucoup d'attention sur les images.
C'est exactement ce qui se passe dans la conception de Thinx . Sur la page d'accueil, le schéma de couleurs général de l'interface est en réalité noir et blanc. Pourtant, la conception repose largement sur de nombreuses photos. Surtout en haut de la page d'accueil, les photos des sous-vêtements présentent un fond rouge foncé. Par rapport à tout le reste de la page, c'est plutôt audacieux. Sans aucun doute, la chose qui ressort ici est le rouge foncé. Le rouge a un contraste beaucoup plus élevé par rapport aux couleurs noir et blanc. J'aime utiliser Thinx comme exemple, car cela montre que les couleurs vives et les néons ne sont pas les seuls appropriés pour attirer l'attention de quelqu'un à travers le contraste. C'est vraiment un jeu de deux couleurs qui permettra à l'un d'entre eux de se démarquer.
3. Utiliser la couleur pour créer des motifs UX
La meilleure façon de créer des motifs visuels passe par la cohérence. Les modèles, à leur tour, créent des relations auxquelles un utilisateur peut s’habituer. Il en va de même pour les utilisateurs qui ont l'habitude de certifier des icônes liées à certaines actions, c.-à-d. Une corbeille signifie supprimer. Les couleurs sont beaucoup plus subjectives, car chaque site Web ou application peut avoir sa propre signification pour les couleurs.
Prenons la relation avec la couleur bleue sur Site Web du portefeuille de personnes infernales . C'est un exemple simple et parfait pour faire valoir mon point de vue. Tout ce qui peut être cliqué sur le site Web de Underbelly est bleu. Après avoir utilisé le site Web pendant quelques secondes, il devient rapidement clair que leurs liens sont bleus. Et c'est comme ça que vous créez des motifs à travers la couleur. Les patterns sont bons car ils permettent aux utilisateurs et aux visiteurs de reconnaître facilement quelque chose. Plus la reconnaissance est facile, moins les gens pensent et maintenant nous savons à quel point cela fait plaisir. Steve Krug .
4. Créer une hiérarchie par la couleur
Une autre chose pour laquelle la couleur peut être utile est la mise en place d’une hiérarchie. Sur La page produit de Skore , à peu près toutes les sections ont des éléments verts. Non seulement le répétitif vert - qui crée un motif reconnaissable - aide-t-il à distinguer les parties importantes de chaque section. Souvent, il est facile d'expliquer la hiérarchie à travers la taille de cette taille de police. Mais l'intensité d'une couleur, ainsi que le montage d'une couleur en cours d'utilisation peuvent également être très utiles pour définir une hiérarchie.
Dans l'exemple de Skore, le vert a un bon contraste avec le texte gris et le fond blanc. Il se distingue En outre, leur palette de couleurs ne repose pas sur d’autres couleurs d’accentuation rendant le vert primaire. Tout cela contribue à la manière dont chaque section affiche la hiérarchie. Par conséquent, la couleur verte aide à orienter les yeux de l'utilisateur vers les éléments importants fournissant une belle hiérarchie dans chaque section. Les éléments verts indiquent à un utilisateur où regarder en premier.
5. Utiliser des similitudes de couleur
En dehors de tout ce que nous faisons avec la couleur en tant que concepteur, nous l'utilisons principalement pour le réutiliser afin de maintenir la cohérence dans la conception. Jetons un coup d'oeil à La fin d'année d'InVision page de destination En haut de la page, un dégradé rose et violet est utilisé comme image de fond. Plus bas dans la page, le rose et le violet sont également utilisés pour les couleurs des boutons. De plus, la page de destination réutilise le blanc sur les arrière-plans de couleur rose et violet. Il réutilise également la couleur du texte noir et gris sur les arrière-plans blancs. Si les couleurs étaient différentes à chaque fois, cela ne serait pas aussi beau.
Regardons un autre exemple, en particulier Co-motion . Sur leur page d'accueil, le studio de création utilise quelques couleurs différentes. Mais ils sont tous assez similaires dans leur ton pour fournir un flux cohérent. Dans cet exemple, il n'y a rien qui ressorte spécifiquement qui peut aussi être un bon objectif. Dans ce cas, l'accent est mis sur la couleur sur un bon flux cohérent de la page, où vous essayez de garder l'utilisateur engagé et de faire défiler la page.
Conclusion
La couleur peut être un excellent outil pour atteindre divers objectifs de conception. La couleur peut aider à définir et à établir une hiérarchie et à fournir un point focal. L'accent de couleur se présente sous diverses formes. De toute façon, travailler avec la couleur peut être très amusant. Influencer le regard des visiteurs ou des utilisateurs peut être plus facile à l'aide d'une palette de couleurs stratégique.