Le Web est un arc-en-ciel d'options de couleur. La couleur est un excellent outil pour capter l'attention des utilisateurs, leur donner un intérêt visuel et un impact et créer un contraste pour la lisibilité. La couleur est également au centre de nombreuses tendances en matière de design, y compris les styles plats et les matériaux.
Mais pouvez-vous vous tromper avec la couleur? Y a-t-il des teintes ou des combinaisons que vous devriez éviter? En un mot? Oui! Aujourd'hui, nous examinons les couleurs ou combinaisons de couleurs à éviter lors de la conception de sites Web et d'applications. (Et si vous avez déjà commis l'une de ces erreurs, nous proposons également d'autres solutions.)
Néons
Les couleurs néon peuvent être amusantes, vives et ajouter beaucoup de pop à un design. Malheureusement, ils sont incroyablement durs pour les yeux, donnant aux utilisateurs cela? Déchiré? sentir où tout fait mal à regarder.
Le problème avec les néons est qu’ils sont trop brillants pour pouvoir lire facilement et posent des problèmes liés aux fonds sombres ou clairs. Lorsqu'ils sont utilisés avec du texte, les néons posent des problèmes de lisibilité car les lettrages ont tendance à se perdre dans l'arrière-plan. Les arrière-plans au néon sont souvent envahissants et distraient le message principal de la conception.
Essayez ceci à la place: Supprimez une partie de la luminosité des couleurs au néon afin qu'elles aient un aspect plus sombre et plus subtil sur les écrans.
Orange You Glad fait du bon travail en incorporant? Presque? couleurs néon dans la conception de leur page d'accueil de plusieurs façons. Le thème commun est que les néons sont utilisés pour des éléments plus petits et avec des changements de couleur subtils qui rendent les roses, les jaunes et les verts plus faciles pour les yeux.
? Vibrant? Couleurs
Lorsque des couleurs hautement saturées sont associées, elles créent un "effet vibrant". où les couleurs semblent presque bouger dans un flou ou un mouvement rougeoyant. Tu ne veux pas faire ça.
Cette vibration peut être dérangeante pour les utilisateurs, comme le décrit le théoricien des couleurs Josef Albers dans son guide classique, intitulé Interaction of Colour :? «Cet effet initialement excitant est également agressif et souvent même inconfortable à nos yeux. On le trouve rarement utilisé sauf pour un effet de cri dans la publicité, et par conséquent, il est désagréable, détesté et évité.
Vous pouvez presque prédire ce qui fera vibrer les couleurs avant de les mettre côte à côte.
- Haute saturation de chaque couleur
- Complémentaire sur la roue chromatique
- Espacés de 180 degrés sur la roue chromatique
- La conversion des couleurs en niveaux de gris donne très peu de contraste
Un exemple classique est l'association du rouge vif et du vert. Le populaire? Noël? la combinaison est l’une des infractions de couleur les plus importantes (et la plus largement utilisée). Ces combinaisons posent également un problème d'accessibilité car elles sont indéchiffrables par les personnes daltoniennes.
Essayez ceci à la place: Si vous devez utiliser? Vibrant? combinaisons de couleurs, séparez-les avec quelque chose d'autre (de préférence un neutre) entre les deux.
Lumière sur lumière
C'est l'une de ces erreurs qui se produisent tout le temps. C’est peut-être parce que vous pouvez le réaliser avec des projets d’impression, c’est peut-être à cause de certains paramètres d’écran qui le rendent utilisable, mais les combinaisons de couleurs claires ne sont pas tout à fait justes.
Ils sont difficiles à lire. A chaque fois.
C'est là que les infractions les plus graves semblent se produire: les en-têtes de héros associant une image et un texte blanc, mais le texte tombe sur une partie claire de l'image. À ce stade, les mots sont illisibles. Cela arrive beaucoup plus souvent qu'il ne le devrait. Si chaque lettre n'est pas clairement lisible, vous devez la repenser.
Essayez ceci à la place: Heureusement, il existe des solutions assez simples à ce problème:
- Choisissez une nouvelle image avec un arrière-plan de couleur uniforme.
- Utilisez une zone colorée pour le texte au-dessus des images avec beaucoup de variation de couleur.
- Envisagez une superposition d'image en couleurs pour augmenter le contraste entre les éléments d'arrière-plan et de texte.
Tout ce qui est couleur arc-en-ciel
Même si cela va presque de soi, les sites Web aux couleurs de l'arc-en-ciel ne fonctionnent tout simplement pas. (Pensez au nombre de règles de la théorie des couleurs que vous enfreignez en imaginant un site Web sur le thème de l'arc-en-ciel dans votre tête maintenant.)
Les combinaisons de couleurs arc-en-ciel sont écrasantes et accablantes. Ils pourraient attirer l’attention d’un utilisateur au début, mais celui-ci rebondira dès qu’il réalisera que le contenu est indéchiffrable.
Essayez ceci à la place: Si vous souhaitez utiliser une palette de couleurs étendue, comme c'est le cas pour la tendance, optez pour le blocage des couleurs ou les styles de carte, dans lesquels les couleurs peuvent être associées à des éléments. Cette conception de type conteneur permettra une plus grande flexibilité en termes de couleur tout en créant un sens d'organisation et de fluidité.
Clair sur clair / sombre sur sombre
Tout comme la lumière sur la lumière, et une combinaison de saturations de couleurs similaires causera des problèmes. Cela devrait aller de soi, mais évitez-les.
Si vous pensez que cela ne vous arrivera pas, soyez prudent lorsque vous utilisez des palettes de couleurs monotones. C'est à ce moment que les concepteurs ont tendance à glisser ici. (En cas de doute, utilisez plus de contraste.)
Essayez ceci à la place: Pensez en contraste. Si vous souhaitez utiliser plusieurs couleurs vives ou sombres, considérez-les comme des options pour les écrans d'un site de défilement. Vous pourrez utiliser toutes les couleurs sombres ou lumineuses que vous préférez, tout en maintenant la lisibilité et la convivialité. (C'est un gagnant-gagnant!)
? K? Noir
En particulier si vous passez fréquemment entre des projets d'impression et des projets Web, comme le font de nombreux concepteurs, le noir pur peut se glisser par erreur dans les projets Web. Connu comme? K? noir dans les projets d'impression, car il utilise une seule plaque ou? Pure? noir (# 000000) dans les projets numériques, cette couleur est tout simplement plate.
Pensez à la réalité, toutes les combinaisons de noir sont en fait filtrées avec d'autres teintes pour lui donner cette richesse. (Même les plumes d'un corbeau semblent souvent bleuâtres ou plus violettes sous le bon éclairage.) Utilisez une combinaison de noir incluant d'autres couleurs pour créer cette couleur sombre et riche et conserver le noir pur pour l'impression.
Essayez ceci à la place: Essayez un noir avec des notes de coloration qui correspondent à votre marque ou ajoutez simplement les connotations de couleur appropriées. Plus vous passez du noir au gris, plus les couleurs de maquillage sont faciles à voir. Considérez le noir de concert avec les couleurs environnantes et réfléchissez à la composition de chacune et à la manière dont elles se rapportent les unes aux autres. (Par exemple, utilisez un noir légèrement plus bleuté pour compenser les teintes orange ou jaunes du texte ou d'autres éléments.) Par exemple, la couleur de Wonderland, ci-dessus, est # 0a0a0b.
Conclusion
La principale raison d'éviter ces couleurs et ces combinaisons est le manque de lisibilité et de contraste. En réalité, avec les bons choix de couleurs et beaucoup de contraste, presque toutes les teintes peuvent fonctionner avec modération.
Mais il ya un hic. Vous devrez peut-être le rendre un peu plus sombre ou plus clair que prévu. N'oubliez pas que les couleurs prennent des attributs de leur environnement (y compris le rétroéclairage d'un écran) et doivent être ajustées en conséquence.
Voici votre "tour du jour" :? Si vous devez plisser les yeux, interroger ou déplacer l'écran pour voir quelque chose, la couleur ne fonctionne pas et vous devez passer à autre chose.