La théorie des couleurs de base nous dit qu'une palette de couleurs de vert, jaune et rouge est ridiculement laide, ce sont des couleurs qui s'affrontent. Si nous prenons le vert comme couleur dominante, les couleurs analogues qui vont avec sont le rouge et le bleu - il n'y a pas de place pour le jaune dans un tel schéma de couleurs.
Alors, existe-t-il un moyen de combiner le vert, le jaune et le rouge dans un jeu de couleurs sans aveugler les utilisateurs?
À titre d'exemple, j'ai une page sur un site Web où ces couleurs sont utilisées pour mesurer le niveau requis d'une compétence pour un projet par rapport au niveau réel d'un utilisateur donné de cette compétence. Le vert satisfait ou dépasse ce niveau, le jaune indique un léger déficit d'attente et le rouge signifie qu'ils ne sont pas assez bons ou qu'ils manquent totalement d'une compétence donnée.
Voici mon exemple (ignorez les champs orange et gris autour du lettrage, ils ne sont pas liés).
Nous pouvons tous convenir que cela semble assez terrible, mais c'est ce format auquel je dois adhérer, le tout vert-rouge-jaune. : /
Étant un programmeur principalement, par opposition à un concepteur graphique / Web, ma compréhension de la théorie des couleurs et de l'expérience utilisateur est limitée.
Pour mettre un point là-dessus, ma question est: Comment peut-on établir un schéma de couleurs traditionnellement conflictuel sans nuire à l'expérience utilisateur?
(Si ma question ne convient pas je vais la retirer, je ne savais pas trop où la poser, elle me semblait la plus appropriée)
la source
Réponses:
Le vert, le jaune et le rouge ne peuvent pas aller ensemble? Les Éthiopiens doivent être terriblement insultés. Google pour les images vertes, jaunes et rouges, et je pense que vous trouverez plusieurs exemples attrayants (ainsi que des images laides).
La qualité de tout ensemble de couleurs dépend des coordonnées exactes des couleurs, des positions relatives, des formes, de la taille des objets colorés et de l'effet que vous souhaitez avoir (par exemple, apaisant contre excitant, amusant contre sérieux, audacieux contre subtil). ). Je n'ai pas de règles strictes pour vous, mais voici quelques choses à expérimenter.
Compromis taille-saturation
Pour éviter un effet discordant (en supposant que vous ne le vouliez pas), la taille de l'objet coloré doit être inversement proportionnelle à sa saturation de couleur. Votre exemple avait des saturations assez élevées, alors essayez des saturations de couleurs plus faibles (par exemple, des pastels) ou coloriez autre chose que l'arrière-plan. Par exemple, vous pouvez colorer le texte et laisser l'arrière-plan neutre, ou vous pouvez colorer une petite forme ou un symbole à côté du texte. Ce dernier fournirait une chance d'utiliser la forme pour coder de manière redondante la correspondance des compétences à des fins d'accessibilité et d'impression en noir et blanc (coche verte pour Satisfait, point d'exclamation jaune pour Shortfall et symbole rouge «n'entrez pas» pour Not Good Enough) .
Espacement
L'aspect des couleurs dépend de leur proximité. Les couleurs qui s'affrontent lorsqu'elles sont adjacentes semblent correctes avec une petite séparation. Essayez de placer une bordure neutre autour de chaque cellule pour séparer davantage les couleurs (comme vous en avez dans vos en-têtes), à moins que les cellules de même couleur ne se mélangent pour être perçues comme un seul objet. Essayez différentes épaisseurs. Essayez de séparer chaque cellule avec des bordures blanches , pour un aspect en mosaïque.
Modèle
La façon dont les couleurs s'associent change également avec le motif créé par les couleurs, alors assurez-vous d'évaluer des maquettes avec des proportions et des positions typiques des couleurs. Par exemple, si la plupart du temps tout est vert et qu'il est très important que les utilisateurs assistent aux «reflets» des jaunes et des rouges, choisissez un vert qui fait un bon arrière-plan (par exemple, faible saturation, lumière) et jaune et le rouge semble s'asseoir «sur le dessus» (par exemple, une saturation plus élevée, sombre). Considérez que l'esthétique du motif peut également communiquer et motiver l'utilisateur. Si l'utilisateur a un ensemble de compétences particulièrement inadapté ou déséquilibré, vous voulez peut-être un schéma laid. Le motif le plus attractif doit correspondre à l'état le plus avantageux pour l'utilisateur.
Convivialité
Votre question concerne l'esthétique, mais le choix du codage couleur a également des implications d'utilisabilité importantes. Vos sélections de couleurs doivent être:
Visuellement distincts les uns des autres, surtout s'ils sont utilisés dans des conditions visuelles dégradées (par exemple, sur un mobile au soleil).
Fournit un bon contraste avec l'arrière-plan (si son premier plan), ou avec l'avant-plan (si son arrière-plan). Par exemple, le texte noir sur rouge n'est pas si bon. En règle générale, le premier plan et l'arrière-plan nécessitent des niveaux de luminosité différents.
Assurez-vous que les couleurs sont cohérentes avec ce qu'elles codent. Par exemple, les choses auxquelles l'utilisateur doit assister doivent avoir plus de contraste avec l'arrière-plan et les autres couleurs.
Fournissez l'accessibilité et l'imprimabilité, où chaque couleur a également un niveau d'obscurité différent, l'obscurité étant mise à l'échelle selon les rangs (rouge plus que jaune plus que vert). Rendez votre vert quelque peu bleuté et / ou votre rouge un peu orangé pour que les utilisateurs daltoniens rouge-vert (le type de daltonisme le plus courant) puissent toujours voir des différences de couleur.
Utilisez le codage couleur pour une seule variable. Je ne sais pas pourquoi vous utilisez le gris et l'orange, mais cela risque de créer de la confusion et de rendre plus difficile pour les utilisateurs d'utiliser les couleurs rouge vert et jaune. Chaque fois que vous avez plus de trois couleurs, il est difficile de garder les choses utilisables. Trouvez une autre façon de coder le code gris et orange (par exemple, utilisez la taille ou le poids de la police, ou utilisez des lignes en pointillés pour les bordures des cellules; voir Mettre le G dans l'interface graphique ).
Dans un projet sur lequel j'ai travaillé, les couleurs avec lesquelles j'étais venu étaient # E00000, # FF8400 et # C0FFE0 (pas un jaune très jaune, mais ça fonctionnait quand même).
J'ai plus d'informations sur le choix des codes de couleur, y compris sur la façon de calculer le contraste de couleur et de luminosité à Breaking the Color Code .
la source
#C0FFEEpour le code hexadécimal. :)Essayez d'utiliser des pastels au lieu des couleurs RGY réelles. Avec la saturation réduite, il devrait être plus facile de regarder les informations.
Hex rouge pastel: # F7977A RVB: 246-150-121
Hex Vert Pastel: # 82CA9D RGB: 130-202-156
Hex jaune pastel: # FFF79A RVB: 255-247-153
la source
Je vois trois principaux défis avec ces trois couleurs.
Je ne peux penser qu'à quelques options, en supposant que vous n'aimez pas l'effet pop art des grandes zones de couleur saturée. Ces deux éléments minimisent l'impact de la saturation en atténuant les couleurs.
Il y a un autre défi ici qui n'a rien à voir avec l'esthétique. Le rouge va dominer les deux autres couleurs et entraîner l'attention sur les marques négatives sur la page. Si tel est votre objectif, vous êtes bon. Si vous voulez que votre graphique soit de nature positive, vous aurez du mal.
la source
"Rouge", "Jaune", "Vert" laissent beaucoup de place à l'interprétation, vous avez donc de bonnes chances de trouver une combinaison qui fonctionne bien.
Pour votre problème d'esthétique, j'ai pris votre couleur "rouge" et "verte" et je l'ai mise dans le mélangeur de couleurs . Ensuite, j'ai choisi pHSL comme modèle de couleur pour le mélange. Cela a déjà amélioré le jeu de couleurs.
Ensuite, j'ai essayé différents "rouges" et "verts" pour améliorer encore l'impression. Un peu plus sombre, rouge plus saturé / plus fort. Un vert avec un peu plus de jaune, plus une saturation plus élevée.
OK, pas mal mais pas encore prêt.
Pour votre problème d'utilisation, gardez à l'esprit qu'il existe une hiérarchie de luminance (relative), de teinte et de saturation pour guider notre attention. Puisque le jaune a naturellement la valeur de luminance la plus élevée, ces champs attireraient le plus notre attention. J'ai donc importé les couleurs dans le convertisseur de couleurs pour peaufiner chaque couleur individuellement. Dans mon exemple, j'ai donné des valeurs de luminance égales "jaune" et "vert". Une luminance plus faible pour le jaune ou une luminance plus élevée pour le vert semblait esthétiquement problématique.
J'ai essayé ma combinaison dans Photoshop et j'ai réalisé que les bordures blanches (espacement) faisaient bonne impression. Je recommanderais donc un espacement blanc pour les cellules et au plus une fine ligne noire pour diviser chaque ligne d'entrées.
En utilisant les outils mentionnés ci-dessus, vous pourriez trouver une combinaison de couleurs qui répond encore mieux à vos goûts ou à vos exigences (par exemple, une saturation plus élevée pour le vert) ...
la source
Vous devez être prudent lorsque vous utilisez des couleurs comme arrière-plan, car cela peut rendre la lisibilité plus difficile et distraire l'utilisateur du message. c'est-à-dire fond rouge et police noire.
La conversion d'une couleur en niveaux de gris aide normalement à comprendre quelles couleurs contrastent le mieux. c'est-à-dire lorsque vous convertissez les rouges en niveaux de gris, la couleur est gris foncé. C'est donc une mauvaise couleur à utiliser comme arrière-plan lorsque votre police est noire. Vous devez choisir une couleur qui vous donnera un bon contraste.
Cependant, si vous souhaitez donner à l'utilisateur une compréhension rapide de ce que vous essayez de faire, je suggère de laisser les cellules vides (couleur claire) et d'ajouter simplement un petit symbole qui indique l'état (carré ou 5% ou la cellule remplie avec le Couleur)
De cette façon, l'utilisateur peut lire le texte et voir la catégorie à laquelle il appartient assez rapidement.
Cependant, si vous voulez combiner des couleurs, je vous suggère d'acheter le livre "Color index". Vous y trouverez des milliers de combinaisons qui iront bien ensemble et vous gagnerez du temps.
la source
Si vous trouvez les bonnes nuances de couleurs, vous pouvez certainement utiliser le rouge, le jaune et le vert ensemble.
Je recommande de regarder dans certains de ces sites où vous pouvez trouver de belles combinaisons:
http://www.colorschemer.com/schemes/search.php?s=red+yellow+green&submit=Search
Ou essayez d'en créer vous-même:
http://colorschemedesigner.com/
Ce que je recommande vraiment, après avoir choisi votre combinaison de couleurs, demandez à une autre personne ce qu’elle en pense. Parfois, nous n'avons pas assez d'aspect extérieur et nous aimons simplement les couleurs ensemble, même si elles ne sont pas bonnes du tout.
N'oubliez pas de penser au contraste et à la visibilité du texte tout en choisissant les nuances appropriées.
Je recommanderais d'utiliser un jaune plus clair car vous l'utilisez comme couleur assez neutre.
la source
Voici trois schémas, j'espère que vous l'aimerez.
la source