Share
Je me souviens encore très bien de l’un de mes tout premiers cours d’art où, alors que j'étais petit et enthousiaste, on me présentait une gamme de peintures aux couleurs vives. Je me souviens du plaisir de voir les couleurs primaires se mélanger en couleurs secondaires pour la première fois, et je pensais que si deux couleurs pouvaient créer une belle nouvelle couleur, tout les couleurs ensemble doivent faire quelque chose d'encore mieux! C'était totalement décevant de réaliser que peu importe la façon dont je m'y prenais, si j'utilisais toutes les couleurs à ma disposition, je finissais inévitablement avec une couleur craquante que l'on ne peut appeler que «BLECH»..
Des années plus tard, en tant que concepteur de sites Web débutant, j'ai à nouveau fait l'expérience du même processus. Tandis que j'apprenais, je suis tombé dans le piège inévitable d'utiliser trop de couleurs, ou de les combiner dans le mauvais sens, pour aboutir à quelque chose d'un peu «BLECH»..
J'ai commencé à essayer d'apprendre à créer des combinaisons de couleurs pour le Web et j'ai trouvé beaucoup d'informations fascinantes sur la théorie des couleurs. Je me renseigne sur les teintes, teintes, nuances, tons, saturation et luminosité, ainsi que sur des nuances de couleurs analogues, monochromatiques, triades, complémentaires et composées.
La palette de couleurs RVB de baseCependant, sans cadre pratique pour intégrer ces informations, j'ai constaté qu'au début, cela ne m'avait pas beaucoup rapproché de la création d'un site Web bien coloré. En fait, ce n’est qu’après avoir commencé à créer des combinaisons de couleurs solides par essais et erreurs que toute la théorie des couleurs que j’avais lue a commencé à avoir un sens..
Au cours de ce processus, j’ai pris des «consignes de sécurité» pour les schémas de couleurs de sites Web que je souhaiterais connaître au début. Lorsque vous débutez, la théorie des couleurs n'est pas nécessairement ce dont vous avez besoin au départ. Souvent, vous avez besoin de commencer avec quelque chose d'un peu moins théorique et un peu plus «peinture par chiffres».
Dans ce didacticiel, je partagerai avec vous six directives précises que vous pouvez suivre pour bien comprendre le travail sur les couleurs dans la conception Web. Ce ne sont pas des règles, car vous allez créer de nombreux jeux de couleurs dans votre carrière qui iront dans une direction complètement différente. Ce sont plutôt un point de départ, un guide de sécurité expliquant comment survivre à vos premières sorties dans le monde de la conception Web sans jamais rencontrer «BLECH»..
L'un des principes les plus fondamentaux de la conception Web est que peu importe le temps que vous passez à créer une conception glorieuse, son rôle ultime est de jouer le second rôle pour la vraie star de la série. le contenu. Votre palette de couleurs ne doit jamais rendre la conception du site "plus forte" que le contenu présenté. Votre conception doit être à l'arrière-plan, ce qui permet de faire passer le contenu du site au premier plan..
La palette de couleurs subtile permet aux images d'être le point focal
Les couleurs vives distraient les images. Ne ris pas, ça se passe vraiment sur le web sauvage.Un processus très courant dans la conception Web consiste à créer la conception elle-même dans un isolement relatif, souvent dans des logiciels tels que Photoshop ou Sketch. Si vous n'avez pas d'exemple de contenu en place, il peut être facile de créer un design qui peut sembler génial en soi et qu'un client peut aimer sous forme de maquette, mais qui est trop distrayant pour les visiteurs du site. En fait, le processus de conception Web est si étroitement lié au contenu que de nombreuses conceptions Web de haute qualité semblent presque vides, sans contenu en place..
C'est une bonne idée de commencer par présenter un échantillon du type de contenu que vous souhaitez voir apparaître sur le site, que ce soit dans un logiciel de conception ou directement dans le code, puis conçu autour de celui-ci. C'est particulièrement le cas si des photos ou des images d'un style particulier doivent être impliquées, afin que vous puissiez vous assurer que votre conception se fondra harmonieusement avec elles. Imaginez que le contenu du site est une personne unique pour laquelle vous devez personnaliser un costume parfaitement ajusté.
Vous pouvez choisir un nombre infini de combinaisons de couleurs pour votre arrière-plan principal et votre base de texte. Cependant, ma recommandation est de commencer par maîtriser le plus simple, à savoir un fond blanc et / ou gris clair avec un texte gris foncé..
Si vous examinez une sélection de sites Web, modèles ou thèmes populaires, il y a fort à parier que la majorité d'entre eux auront exactement la même base de texte gris foncé en blanc ou gris clair, et ce pour une bonne raison. Avec cette combinaison, vous êtes pratiquement assuré de fournir une lisibilité aux visiteurs et de permettre au contenu à base de texte et d’image de passer au premier plan..
Avec quelques exemples de contenu en place, créez une mise en page de base en niveaux de gris, par exemple:
En règle générale, vous devriez éviter d'utiliser le noir de jais pour le texte car le gris foncé est un peu plus facile à lire. Une plage confortable va de n'importe où # 333333 à # 666666.
Pour vos couleurs de fond, tout blanc #FFFFFF est le pari le plus sûr pour les arrière-plans situés immédiatement derrière un corps de texte principal. Pour les autres éléments d’arrière-plan, vous pouvez aller de #FFFFFF vers le bas #CCCCCC.
Encore une fois, ce ne sont pas des règles pour les couleurs que vous doit utiliser, juste des directives que vous savez pouvoir utiliser en toute sécurité.
Les combinaisons de couleurs les plus courantes vont mal lorsque vous vous disputez avec plusieurs couleurs différentes. Plus vous utilisez de couleurs, plus il est difficile de les maîtriser. Donc, pour commencer, ajoutez simplement une couleur supplémentaire au-dessus de votre base de niveaux de gris qui sera utilisée dans le but de mettre en évidence des éléments tels que des liens, des titres, des menus, des boutons, etc. Votre couleur de surbrillance peut être bleue, verte, rouge ou celle que vous souhaitiez.
Choisissez votre couleur de surbrillance en plaçant d'abord un cadre sur votre base afin de pouvoir évaluer l'aspect de votre couleur par rapport à tous les éléments. Puis ouvrez votre sélecteur de couleurs et cliquez au centre du quart supérieur droit de la palette de couleurs.
Déplacez la barre de défilement vers le haut et le bas et choisissez une couleur qui, à votre avis, conviendra bien à votre conception..
À ce stade, vous travaillez avec trois couleurs de base. votre fond, texte et une surbrillance. Vous pouvez, et devriez, utiliser plus d’une couleur de surbrillance dans l’avenir, mais pour l’instant, pensez-y comme à jongler. Vous travaillez déjà avec trois broches de jonglage, alors familiarisez-vous avec ces trois broches, puis ajoutez-en davantage dans la rotation lorsque vous êtes confiant..
Vous venez d'apprendre à choisir un "teinte". En bref, une teinte est une couleur de base. Lorsque vous déplacez la barre de défilement vers le haut et le bas, vous voyez le"H"valeur dans votre changement de sélecteur de couleur.
"H" signifie teinte, et une fois que vous avez choisi votre couleur de surbrillance, le nombre dans cette case est sa teinte.
Si vous avez le moindre doute sur la couleur de surbrillance à utiliser, choisissez le bleu. Sérieusement. Le bleu est souvent la couleur la plus flexible à utiliser et convient au plus grand nombre de types de sites. Des couleurs comme le violet et le jaune peuvent être très agréables, mais peuvent aussi rapidement devenir criardes si elles sont mal utilisées.
D'autre part, vous pouvez faire à peu près n'importe quoi avec le bleu comme couleur de surbrillance et vous ne pouvez pas vous tromper. Si vous ne savez pas par où commencer ni quelle couleur utiliser dans un projet, retombez simplement en bleu. Le bleu que vous choisissez peut être un bleu marine (teinte 235) ou un aqua (teinte 190) et vous êtes en territoire relativement sûr.
Pour mon exemple de mise en page, j'ai choisi une teinte de 205. Une fois que vous avez défini votre couleur de surbrillance, ajoutez-la à votre conception là où vous le jugez nécessaire. Si vous utilisez la couleur de surbrillance sur les boutons ou sur une zone comportant du texte, modifiez également la couleur du texte. Dans ce cas, j'ai modifié le texte sur les zones en surbrillance en blanc.
Une fois que vous avez choisi votre couleur de surbrillance, laissez la barre de curseur (teinte) à cet endroit. Vous aurez besoin de couleurs supplémentaires pour votre conception, mais il s'agira toujours de variations de la couleur de surbrillance que vous avez déjà choisie afin de simplifier les choses..
Pour créer des variations de couleur, faites-le glisser dans la zone de carte du sélecteur de couleurs..
Utilisez ces types de variations de couleur pour des choses comme:
Le coin en haut à droite de la carte de couleurs est le pays des couleurs à indice d'octane élevé. Les couleurs dans le coin supérieur droit ressemblent aux voitures de course de Formule 1; ils sont incroyablement performants et séduisants, mais en général, il faut beaucoup d’expérience pour bien les utiliser. Sans cette expérience, ils peuvent provoquer des accidents, il est donc préférable de couper les dents sur des couleurs plus atténuées.
C'est pourquoi, dans la troisième partie de ce didacticiel, je vous ai demandé de cliquer sur la carte des couleurs au centre du coin supérieur droit avant de sélectionner la couleur de surbrillance, afin de vous assurer que vous avez démarré avec une couleur relativement atténuée..
Pour illustrer, regardez ce qui se passe si je modifie la teinte de notre dessin jusqu’à présent, sans toucher à la carte de couleurs.
Ça a toujours l'air pas mal, non? Cependant, si je déplace la carte des couleurs jusqu'à ce coin en haut à droite, tout à coup, ce n'est pas très agréable.
Aïe mes yeux !! Si vous voulez vous assurer que vous ne brûlez pas la rétine de vos visiteurs, suivez une directive générale pour atténuer les effets en restant dans le coin supérieur droit de la carte des couleurs..
Dans les deux dernières sections, vous avez réellement appris à appliquer différents aspects de la théorie des couleurs. Vous avez appris à travailler avec:
Lorsque vous faites glisser la souris dans la zone de sélection de couleurs, les valeurs "S" et "B" changent, ce qui signifie "Saturation" et "Luminosité"respectivement. Vous verrez également que le nombre de teintes reste le même. Vous créez donc des variations de couleur en modifiant la saturation et la luminosité de votre teinte d'origine.
Saturation c'est comment votre couleur est exprimée. Par exemple, pensez "Ma chemise était saturée de vin rouge renversé". Sur un sélecteur de couleurs typique, la saturation est déterminée par la quantité de blanc mélangée à la teinte de base. Le moins blanc, le plus saturé.
Lorsque vous faites glisser le curseur vers la droite sur la palette de couleurs, vous réduisez la quantité de blanc et par conséquent, augmentez la saturation de sorte que la valeur "S" augmente. Lorsque vous faites glisser le coin tout blanc vers la gauche, vous réduisez la saturation de sorte que la valeur "S" diminue.
Saturation sur une carte de sélecteur de couleur standardCe mélange de blanc avec votre teinte d'origine est également appelé "teinte". Le terme vient du mélange de peinture, où une peinture blanche est mélangée avec une peinture colorée.
Luminosité est la quantité de noir mélangée à votre couleur. Le moins de noir, le plus de luminosité.
Lorsque vous faites glisser le curseur vers le haut sur la carte, vous réduisez la quantité de noir, augmentez la luminosité et la valeur "B" du sélecteur de couleur augmente. Lorsque vous faites glisser vers le bas, vous augmentez le noir et la valeur "B" augmente.
Le mélange de noir avec votre teinte d'origine est également appelé "ombre". Cela vient également du mélange de peinture, où une peinture noire est mélangée avec une peinture colorée.
Lorsque vous mélangez le gris dans votre couleur, cela s'appelle créer un "Ton". Lorsque vous sortez du coin supérieur droit, comme nous l’avons fait ci-dessus, vous diminuez votre saturation et votre luminosité, ce qui ajoute du blanc et du noir (gris), ce qui crée un ton. que 100%, c'est un ton.
Encore une fois, ce terme vient du mélange de peinture, où une peinture grise est créée puis mélangée à une peinture colorée. C’est aussi là que la phrase "atténuer les choses"vient de. Cool hein?
UNE "monochromatique"Le jeu de couleurs est l'endroit où vous prenez une teinte de base et l'étendez avec des teintes, nuances et les tons. Vous venez d'apprendre ce que tous ces termes signifient dans un contexte pratique. Donc, en choisissant une couleur de surbrillance et en créant des variations, vous avez créé un jeu de couleurs monochromatique..
Continuez à pratiquer vos palettes de couleurs monochromatiques sur une base de niveaux de gris jusqu'à ce que vous vous sentiez vraiment en confiance. Essayez de les créer avec différentes teintes comme couleur de surbrillance, en essayant de voir comment cela change les paramètres de saturation et de luminosité que vous pouvez utiliser..
Lorsque vous vous sentez à l'aise, ajoutez une couleur de surbrillance supplémentaire. Je recommande d'essayer l'orange et le bleu lors de votre première sortie, car ils ont tendance à être le duo le plus facile à travailler. Ensuite, essayez le vert et le bleu, ce qui, selon mon expérience, est le deuxième plus facile. Ces deux combinaisons ont tendance à être un succès auprès des clients et des clients.
La meilleure chose à faire pour améliorer votre compréhension des schémas de couleurs pour le Web est de vous saisir vous-même d’une extension de navigateur d’échantillonneur de couleurs telle que Colorzilla et de l’utiliser pour commencer à examiner comment les concepteurs expérimentés le font. Lorsque vous naviguez sur Internet, lorsque vous voyez un jeu de couleurs qui a fière allure, éclairez l’échantillonneur de couleurs et examinez les couleurs utilisées sur la page. Pour chaque teinte que vous échantillonnez, examinez les niveaux de saturation et de luminosité qui conviennent le mieux. Faites également attention aux couleurs qui fonctionnent en combinaison avec d'autres.
En cas de doute, vous pouvez toujours vous fier à vos consignes "Sécurité d'abord" et vous serez à l'abri du "BLECH" à partir d'ici..
Accentsconagua