Les couleurs ont leurs propres poids naturels. Le jaune est une couleur naturellement “plus légère”, tandis que le bleu et le rouge sont considérés comme naturellement “plus lourds”.
Les couleurs plus sombres en général sont perçues comme plus lourdes. Plus une couleur a de l’ombre (ce qui signifie, plus on ajoute de noir dans une couleur), plus elle paraît lourde. Plus une couleur est teintée (c’est-à-dire plus on ajoute de blanc à une couleur), plus elle paraît claire. Les couleurs ci-dessous appartiennent à la même teinte (respectivement vert et violet), mais ont des teintes et des nuances différentes.
Plus une couleur est saturée, plus elle apparaît lourde.
Mais, qu’est-ce que cela signifie et quel est l’impact sur vos conceptions ? En termes simples…
Une belle étude de cas pour toute cette théorie ci-dessus est présentée ci-dessous. Toutes les textures, formes et couleurs ne peuvent pas rivaliser avec le bouton Play rouge entièrement saturé au centre (l’équilibre radial aide également). De plus, l’arrière-plan flou contribue à attirer l’attention sur l’écran. Remarquez que les couleurs ombragées du ballon ne détournent pas l’attention du bouton. Les boutons du bas dans des couleurs plus claires, turquoise et jaune, ne font pas concurrence et sont clairement secondaires. Bien joué, les concepteurs de l’interface utilisateur d’Airdrop!
Considérez ensuite le design ci-dessous. 3 lignes de texte contre une seule ligne contenant une étiquette de prix. Quel est l’élément qui attire le plus votre regard ? Bingo ! L’ombre ultra foncée l’emporte clairement sur les caractères clairs et équilibre aussi joliment les 3 lignes par rapport à la ligne unique en utilisant la couleur. Remarquez qu’il y a également un bel équilibre asymétrique entre les côtés gauche et droit de ce design, mais c’est pour un autre post 🙂
C’est une compétition de poids dans ce prochain design ! L’arrière-plan rose chaud fortement saturé rivalise un peu avec l’élément sombre au centre, qui se démarque grâce à sa position centrée et son poids lourd (en termes de nuances). Il y a beaucoup de choses qui se passent en arrière-plan (et le site Web a du mouvement en plus de tout cela), mais malgré toute la texture et le motif répété de l’arrière-plan, l’œil a toujours une concentration claire. Beau travail.
Regardez la composition ci-dessous. Pouvez-vous simplement dire que le couple en rouge et jaune a une attraction visuelle beaucoup plus forte sur votre œil que le couple de gauche, et même le gril devient un point focal secondaire en raison de la nuance rouge ? Les verts ne peuvent pas rivaliser avec ces couleurs fortes. En fait, il y a un peu de concurrence visuelle entre la chemise et le gril rouges et l’icône rouge. C’est quelque chose que le concepteur pourrait vouloir considérer et potentiellement aborder en éclaircissant la chemise et en saturant un peu l’icône (ce serait ma suggestion, en tout cas 🙂 Bien sûr, sur le site en direct, il y a une animation à l’icône qui incite le visiteur à prêter plus d’attention à l’icône : http://yadrenakopot.ru/
So, c’est votre guide rapide sur la façon dont le poids des couleurs affecte le design de l’interface utilisateur. J’espère que vous prendrez en considération les poids de couleur sur votre prochaine conception comme juste un des nombreux outils dans votre boîte à outils de concepteur.