L'application de schémas de couleurs nécessite de les voir
De nombreuses ressources en ligne existent pour permettre aux concepteurs d’explorer, de modifier et de télécharger de superbes combinaisons de couleurs.
Jouer avec des combinaisons complémentaires, analogues, monochromatiques et autres, nous ouvre des possibilités excitantes, et les cadeaux ne manquent pas.
Mais il y a une différence entre un jeu de couleurs gagnant et un design gagnant qui l'utilise.
Le choix des couleurs est la première étape. Les adapter à vos exigences de conception est tout aussi important.
Ce qui semble bon dans une nuance peut ne pas bien fonctionner sur une page Web, mais cela ne signifie pas que vous devez retourner à la case départ. Nous allons explorer ici de nouvelles façons de voir les schémas de couleurs.
La couleur joue un rôle important dans la manière dont les personnes absorbent le contenu. Qu'un design soit réservé ou bruyant, amical ou sinistre, chaud ou froid, les visiteurs d'un site Web sont immédiatement influencés par la tonalité de la mise en page, de la typographie, de l'imagerie et, bien sûr, des couleurs et des couleurs.
Choisir des couleurs peut être le travail le plus subjectif dans la conception de sites Web. Certaines couleurs fonctionnent bien ensemble; d'autres, pas tellement. Certaines combinaisons font appel à certaines personnes. Plus d'un jeu de couleurs peut convenir au même design.
Heureusement, de nombreuses ressources existent pour vous aider. Générateurs de palette de couleurs tels que Concepteur de schémas de couleurs , Adobe Kuler , Volcan Volcan et Schéma de couleurs quotidien sont parmi les grands endroits pour trouver des combinaisons de couleurs qui définissent efficacement une ambiance. Mais trouver une palette n'est que la première étape. L'efficacité potentielle de toute combinaison de couleurs peut être compromise par la manière dont elle est appliquée .
Le nombre de couleurs dans un schéma fait la différence
Un jeu de couleurs est un ensemble de couleurs qui ont été choisies pour fonctionner ensemble. Les schémas ont généralement au moins quatre couleurs et peuvent souvent être téléchargés en tant qu’images simples et parfois
Le schéma de couleurs ci-dessus est typique de la façon dont la plupart des schémas sont présentés: des échantillons uniformes de couleurs plates. Cet ensemble pourrait être étiqueté comme tel:
- De bonne humeur
- Amical
- Contemporain
- Décontractée
- Primaires
Mais faire ressortir une ou deux couleurs et penser à différents adjectifs.
L'image ci-dessus a le même schéma qui a été présenté dans le swatch, mais il est moins décontracté et plus désertique. Cette image met l'accent sur les couleurs chaudes. Les taches isolées de bleu et de vert attirent l'attention en étant plus clairsemées. L’humeur qui en résulte peut être décrite comme suit:
- Sablonneux
- Brillant
- Chaud
- Kaki
- Rugueux
Le choix de la couleur dominante affecte la manière dont le schéma apparaît.
Encore une fois, nous utilisons les mêmes couleurs, mais à une fin très différente. Cette image ressemble à une carte du monde abstraite, avec des îles rouges, vertes et brunes. L'image n'est pas seulement plus fraîche, elle est légèrement plus sombre , même si elle provient de la même palette.
Être capable de reconnaître de bonnes combinaisons de couleurs ne suffit pas, car les couleurs sont rarement appliquées uniformément à la conception d'un site Web. Utiliser les couleurs avec sagesse et dans les bonnes proportions est aussi important que de choisir les bonnes couleurs.
L'arrière-plan règle le ton
L'endroit le plus évident pour avoir un impact avec la couleur est en arrière-plan. Cette vaste étendue peut attirer autant d'attention que le contenu placé au-dessus d'elle.
Malgré un contenu identique, le dessin à droite est beaucoup plus chaud que celui de gauche. Mais il se passe plus que le simple changement de couleur.
Les barres de contenu dans le motif vert (c.-à-d. Le texte blanc sur le rouge) tiennent bien sur le large fond vert. Mais le fond rouge à droite lave les barres vertes. En effet, en plus d'être plus chaud, cette nuance particulière de rouge est plus saturée. En fait, les seuls gros éléments avec un poids visuel suffisant pour contrer le fond rouge sont les gros titres. Le petit texte du corps et les barres vertes fanées sont pâles en comparaison. Ce n'est pas nécessairement mauvais; un arrière-plan puissant donne à la page une présence substantielle. Le design vert est plus frais et donne au contenu un environnement plus décontracté.
Quelle utilisation de la couleur est la meilleure? Cela dépend de votre intention. Les visiteurs doivent-ils considérer le contenu comme étant détendu ou audacieux? Voulez-vous minimiser les barres de couleur? Êtes-vous préoccupé par le fait que le contexte va maîtriser l'information? Une couleur est-elle plus importante qu'une autre dans votre marque? Les réponses à ces questions détermineront quelle couleur est «correcte». Cette palette de couleurs unique présente deux solutions différentes.
Couleur derrière le texte
L'interaction du texte et de l'arrière-plan est affectée par la taille et la quantité de chacun. L'effet du texte sur la page dépend autant de la couleur du texte lui-même que de la couleur de l'arrière-plan, malgré la tendance générale à se soucier davantage de l'arrière-plan.
Au-dessus, un texte clair sur un fond sombre fonctionne mieux lorsque le type est gros. Emprunté à la palette de couleurs avec laquelle nous avons commencé, cet or est moins adapté au corps du texte (environ 13 pixels ou moins). La solution est simple:
Au-dessus, le petit texte des deux dernières lignes est plus pâle. Ce n'est pas tout à fait blanc, mais beaucoup plus lisible que les deux lignes de la première image. Le contraste ajouté empêche le petit texte d'être dominé par l'arrière-plan. La clé consiste à utiliser votre jeu de couleurs comme point de départ et non comme règle fixe. Si une couleur d'arrière-plan menace de submerger des éléments plus petits, augmentez le contraste, ce qui préservera l'intégrité du schéma et gardera le contenu lisible.
Texte sur blanc
De nombreuses pages Web ont des arrière-plans blancs ou des zones de contenu blanches. Mais "blanc" ne signifie pas "blanc". De larges bandes de blanc affectent la perception de la couleur. Par exemple:
Les couleurs avec lesquelles nous avons commencé paraissent plus claires lorsqu'elles sont utilisées pour du texte.
- Le bleu relativement foncé crée suffisamment de contraste pour rendre le texte lisible contre le blanc.
- Cette nuance particulière de vert se fond dans l'arrière-plan. Si l'intention est l'harmonie, alors le vert fonctionne.
- Rouge + blanc = rose ou pêche.
- L'or ressemble presque à un ton sépia.
Le blanc a tendance à égayer tout ce qu'il touche. Si vous souhaitez définir une ambiance de lumière, toutes les combinaisons ci-dessus peuvent fonctionner. Pour plus d'impact, vous pouvez assombrir le jeu de couleurs.
Jouer avec des schémas de couleurs dans Photoshop
Si votre conception ne nécessite pas que toutes les couleurs de votre schéma soient utilisées de manière uniforme, vous devriez tester une ou deux couleurs pour la dominance. L'astuce consiste à trouver un schéma avec des couleurs qui fonctionnent les unes avec les autres et avec la couleur dominante.
Heureusement, nous avons un processus facile pour tester les couleurs. Pour voir comment différentes mesures de couleur peuvent affecter une conception, procédez comme suit dans Photoshop.
1. Recherchez ou créez un jeu de couleurs. Notre exemple a cinq couleurs, mais tout nombre supérieur à un fonctionnera.
2. Créez une nouvelle image dans Photoshop, 500 x 500 pixels, avec un arrière-plan blanc.
3. Créez quatre nouveaux calques (votre calque d'arrière-plan sera le cinquième). Si votre schéma a plus ou moins de cinq couleurs, ajoutez ou supprimez des calques en conséquence.
4. Remplissez chaque couche avec une couleur différente de votre schéma.
5. Ajoutez un masque de calque à chaque calque au-dessus du calque d'arrière-plan. Votre palette de calques devrait ressembler à ceci:
Ci-dessus, la palette de calques Photoshop, avec un calque par couleur et des masques de calque appliqués.
6. Exécutez l' action "Thresholdizer" sur chaque couche masque - mais pas sur les couches elles-mêmes.
Au-dessus, lorsque vous utilisez l'action "Thresholdizer", veillez à sélectionner le masque de couche , pas le calque réel. Si vous exécutez l'action sur le calque par erreur, alors réjouissez-vous de la fonction "Annuler".
Cette action crée principalement un motif aléatoire dans un masque de calque. De là, le concepteur prend en charge: avec le contrôle "Threshold". Faites glisser le bouton Seuil vers la gauche pour afficher plus d’un calque donné et pour révéler moins. En appliquant cette action à chaque masque de calque, une couleur domine les autres de manière aléatoire.
Dans ce cas, le contrôle Threshold détermine la quantité de couche visible. Un masque à couche essentiellement noire cache la couche; la plupart du temps blanc révèle la couche. L'exécution de l'action Thresholdizer sur chaque masque de couche créera un mélange de couleurs comme celui-ci:
Ce document Photoshop montre à quoi pourrait ressembler un dessin si le jaune était dominant. Ajuster les couleurs maintenant est un jeu d'enfant: pour donner une couleur plus (ou moins) de contraste, utilisez simplement une commande Photoshop (comme Image> Réglages> Teinte Saturation ).
Par exemple, la teinte de vert qui a bien fonctionné avec le bleu plus tôt ne semble pas très bonne maintenant que le bleu n'est pas dominant. Quelques expériences révèlent ce qui suit:
Nous avons ici deux variantes de notre palette de couleurs originale. La variante n ° 1 assombrit légèrement le vert. Ça marche presque La variante n ° 2 change tout sauf le jaune pour ajouter du contraste et aligner les teintes.
Et si notre design avait surtout du bleu au lieu de jaune? Cette nuance de bleu est suffisamment sombre pour contraster avec les autres couleurs, mais aucune d'entre elles ne se coordonne, elles sont toutes primaires. En choisissant une nouvelle dominante, nous avons créé un nouveau problème.
La variante n ° 1 ci-dessus remplace le rouge tendre par un bleu plus foncé et transforme la nuance de vert en une menthe pâle. La variante n ° 2 va dans l'autre sens, en utilisant plus de rouge (ou de bordeaux) au lieu de moins.
Le mérite de l'une de ces variations est subjectif. Idéalement, vous devez les appliquer à la conception avant de prendre une décision finale. La clé est dans le processus: obtenir une palette, choisir une couleur dominante et faire travailler les autres.
À propos de l'action "Thresholdizer"
Il n'y a pas de mystère à cette action. Vous pouvez obtenir le même effet en appliquant Filtre> Rendu> Nuages ou Filtre> Rendu> Nuages de différence à un masque de calque. Cette action affine simplement le processus en organisant la commande Seuil en déciles.
S'il vous plaît n'hésitez pas à télécharger l'action "Thresholdizer" . Mieux encore, créez votre propre et partagez-le avec tout le monde en fournissant un lien dans les commentaires ci-dessous.
Évaluer la couleur sans l'action
Bien sûr, il existe des moyens de juger la couleur sans jouer avec Threshold. Commencez par choisir une couleur principale, puis faites fonctionner les autres.
Voici notre palette de couleurs originale, avec le brun comme couleur primaire.
Nous avons atténué le vert et saturé le rouge. Les couleurs plus sombres sont autonomes, comme le bleu (qui n'a pas été ajusté).
Ici, nous avons effacé le vert, le jaune et le rouge. Ces "accents" discrets se fondent dans le fond marron. Assombrir le bleu pour créer un contraste.
Les trois couleurs primaires plus foncées vont bien contre le brun moyen, tandis que le jaune pâle sert de couleur d'accent.
Là encore, la décision finale est prise lorsque le concepteur applique ces schémas à la conception réelle. Jusque-là, ce ne sont que des points de départ: des outils utiles pour éviter les conflits, des références pratiques pour garder les conceptions sur le thème et un excellent moyen d'explorer les combinaisons.
La couleur n'est qu'un élément de conception. L' utilisation de la couleur est une compétence que l'on doit pratiquer pour contrôler l'humeur, cultiver les goûts et être capable de voir les possibilités dans quelques échantillons.
Une seule chose est certaine: le vert doit partir.
Écrit exclusivement pour Webdesigner Depot par Ben Gremillion. Ben est un freelance concepteur web qui résout les problèmes de communication avec une meilleure conception.
Comment testez-vous les couleurs? Quelles sont vos méthodes préférées pour créer des palettes de couleurs? Partagez vos points de vue dans les commentaires ci-dessous.