Étant donné un schéma de couleurs, comment puis-je appliquer à la conception d'un site Web?

Juste pour qu'il y ait quelque chose de concret à discuter, disons que j'ai ce schéma de couleurs:

La source

Il existe de nombreux articles sur la façon de choisir un schéma de couleurs cohérent basé sur des couleurs complémentaires, des couleurs monochromes, etc. cependant, une fois que j'ai un ensemble de couleurs, comment puis-je décider quelle couleur est l'en-tête, quelle couleur est le lien, qui est l'arrière-plan et le texte. Même si je décide que je veux un éclairage clair sur sombre ou foncé sur clair, mettre le reste des couleurs à l'écran peut toujours rendre le site laid.

Existe-t-il des règles générales ou des directives générales qui aident à décider quelles couleurs vont où?

Je vois beaucoup de gens commenter des choses comme "il n'y a pas de bonne réponse" avec lesquelles je suis (en quelque sorte) en désaccord ... Il y a certainement au moins une bonne réponse, peut-être quelques-unes et je suis sûr qu'il y a aussi un tas de mauvaises réponses, une bonne conception consiste à atteindre la meilleure solution possible en fonction des ressources et du temps dont vous disposez. Une telle solution va sûrement l'emporter sur plusieurs alternatives. Vous nous avez donné une palette de couleurs à des fins de discussion, donc je vais le faire et répondre à votre question en fonction de la palette de couleurs fournie. (Étant donné que je n'ai pas vu la disposition avec laquelle vous travaillez, cela sera toujours assez large, mais il vous faudra suivre un certain processus.)

Ainsi, les premières couleurs que j'aime choisir lors de la création d'un jeu de couleurs dans un projet Web sont l'arrière-plan du corps et la couleur principale du texte. C'est normalement une bonne idée de choisir les deux couleurs les plus contrastées pour remplir ces rôles et votre exemple de palette ne fait pas exception. Dans ce cas, les couleurs sont # DEE1DD et # 28363D. Maintenant, nous devons décider lequel utiliser pour le texte et lequel utiliser pour l'arrière-plan et dans la plupart des cas, j'essaie d'utiliser la couleur la plus claire pour l'arrière-plan et la plus sombre pour le texte. Il y a eu des recherches considérables pour montrer que nous lisons une couleur foncée sur une couleur claire plus facilement qu'une couleur claire sur sombre, c'est donc ce que je fais généralement par défaut, sauf s'il y a une raison pour un aspect plus sombre (comme vous faites un site Web pour un métal lourd groupe ou quelque chose ... je vais supposer que ce n'est pas le cas ici). Donc,

Ensuite, j'aime passer à ce que je pense être le prochain élément le plus important, à savoir les hyperliens. Vous voulez une couleur qui contraste suffisamment avec l'arrière-plan pour ne pas être difficile à lire, mais qui contraste aussi suffisamment avec le texte pour être perceptible. Dans cet exemple, la plupart des verts plus clairs seront illisibles sur le fond clair, donc la réponse la plus évidente est # 2F575D.

Ensuite, vous avez fait allusion à un en-tête qui devait être coloré, et encore une fois, nous en avons besoin pour contraster avec l'arrière-plan. Dans l'intérêt du minimalisme, j'essaie de réutiliser les couleurs que j'ai déjà utilisées dans le corps, et dans ce cas, la couleur du texte est probablement trop sombre pour remplir de grandes quantités d'espace, donc je serais enclin à sélectionner # 2F575D et pour toutes les raisons ci-dessus utiliseraient la couleur du corps d'arrière-plan # DEE1DD pour remplir du texte ou des liens dans l'en-tête.

Enfin, je couvre les éléments de conception non essentiels comme les derniers états de vol stationnaire et il nous reste quelques verts différents à choisir. Encore une fois, cela doit probablement être assez contrasté par rapport à l'arrière-plan, car les liens ne disparaissent pas lorsque vous les survolez, donc si vous avez tendance à aller avec # 658B6F ...

Et ... Voila! Vous avez maintenant un schéma de couleurs (de base) à 4 couleurs. J'espère que ce processus vous aidera autant qu'il m'aider :)!

Le site Web auquel vous vous êtes connecté vous montre comment utiliser ces couleurs:

#28363D for the active state 
#2F575D as the navigation background 
#DEE1DD as background 
#C4CDC1 as banner ...

J'éclabousse normalement ma propre couleur dans le design - même si je sais qu'elles sont légèrement fausses - au moins j'ai environ deux couleurs unies ou au moins une. Ensuite, une fois que j'ai exposé mon idée, je prends ma couleur primaire (celle que j'ai le plus utilisée) et je l'ajoute à une roue chromatique. De cette façon, je remplace mes autres couleurs. Ou j'essaie de trouver des images qui ont la plupart de mes couleurs d'origine.

J'ai lu des articles qui disent, prenez une image et concevez votre travail en fonction de ces couleurs, je ne peux pas faire ça. Je crée mon propre design, avec au moins une couleur à l'esprit, puis j'utilise les techniques de la théorie des couleurs

J'espère que cela aide

Il n'y a pas de formule sur ce qu'il faut prendre, qui devrait être le contexte et ainsi de suite, c'est pourquoi le design est un art.

Normalement, je ferai beaucoup d'essais avec le jeu de couleurs que j'ai, par exemple, quelle couleur de police est plus adaptée à quel arrière-plan.

Il existe cependant une règle générale, qui consiste à contraster les couleurs utilisées, la plupart des gens diront que c'est du bon sens, comme une police de couleur claire avec un fond de couleur sombre. Ensuite, cela peut se produire, comment déterminez-vous la couleur des sous-composants, tels que les boîtes d'alerte, la navigation, etc.

Comme je le vois, vous devriez avoir votre structure nue pour le site Web prête, puis après cela, vous devrez déterminer quels sont votre contenu principal, comment vous souhaitez le présenter. Peut-être une couleur plus douce sur les sous-composants, qui ne nécessite pas d'attention immédiate.

Comment savez-vous si c'est bon ou pas? Facile, dès que vous dites "c'est bien", c'est quand c'est bon. Il est toujours utile d'obtenir le second avis d'autres personnes.

Dans l'ensemble, continuez d'essayer avec la combinaison de couleurs, ne vous en tenez pas à une seule, et vous pourriez être surpris de la composition que vous pourriez obtenir à la fin.

@Color Combination: La combinaison fournie par le site Web est assez bonne pour commencer.

Je me souviens d'une époque où ma première femme et moi avons obtenu un grand panneau de toile et plusieurs tubes de peinture acrylique. Nous avons posé la toile sur le sol et jeté des couleurs aléatoires sans but partout. Nous l'avons laissé sécher et ensuite accroché au-dessus de notre cheminée. Au fil du temps, plusieurs invités ont déclaré à quel point il était magnifique et ont pensé que c'était une œuvre d'art chère ... c'est-à-dire jusqu'à ce que nous leur disions comment il était peint. Tout est dans l'œil du spectateur.

Après avoir raconté cette histoire, je dois dire que je suis d'accord qu'il existe des combinaisons de couleurs incompatibles, laides pour la majorité des téléspectateurs. Cependant, il n'y en a pas beaucoup. Je ne pense pas que vous devriez trop insister pour bien faire les choses . Ce qui est contenu dans le site Web peut compenser beaucoup de mauvais choix de couleurs. Le contenu l'emportera toujours sur la conception.