() translation by (you can also view the original English article)
Je me rappelle parfaitement l'un de mes premiers cours d'arts plastiques: j'étais jeune enfant, enthousiaste et on m'a présenté une palette de peinture de couleurs vives. Je me souviens de découvrir, pour la première fois, avec joie, la façon dont on mélange les couleurs primaires pour obtenir les couleurs secondaires. J'en ai donc conclus que si l'on pouvait créer une nouvelle couleur si éclatante à partir de deux autres, toutes les couleurs mélangées ensemble pourraient former quelque chose d'encore mieux! J'étais très déçue lorsque j'ai réalisé que peu importe la manière dont je procédais, et que si j'utilisais toutes les couleurs à ma disposition, je ne manquais pas de me retrouver avec une couleur kakie, qui pourrait d'ailleurs bien porter le nom "BEURK".
Des années plus tard, alors que je débutais dans le web design, la même expérience s'est répétée. Alors que je me formais au métier, je suis tombé inévitablement dans le piège d'une utilisation excessive de couleurs ou encore d'une mauvaise combinaison de ces dernières. À la fin, je me retrouvais toujours avec quelque chose d'un peu "BEURK".
J'ai donc entrepris d'apprendre et de maîtriser la création de palette de couleurs pour le web. J'ai d'abord trouvé beaucoup d'informations fascinantes sur la théorie des couleurs. J'ai lu à propos des teintes, des nuances, des ombres, des tons, de la saturation et de la luminosité, mais aussi au sujet des différents schémas de couleurs: analogue, monochromatique, triadique, complémentaire et complémentaire adjacente.
Cependant, il m'a semblé que toutes ces informations ne me permettaient pas de créer des maquettes de site aux couleurs plus harmonieuses. En fait, ce n'est qu'en passant de la théorie à la pratique, en testant différents schémas de couleurs, et en commettant des erreurs, que j'ai commencé à comprendre ce que j'avais lu.
Dans ce procédé, j'ai relevé quelques points importants (que j'aurais bien aimé avoir sous la main dès le départ), qui nous permettent de choisir, dans la création de sites web, de manière sûre, des couleurs qui s'accordent entre elles. Quand vous commencez, la théorie complète des couleurs n'est pas vraiment ce qu'il vous faut. Bien souvent, pour démarrer du bon pied, vous avez besoin de quelque chose de moins théorique: quelque chose se rapprochant plus de la "peinture au numéro".
Dans ce tutoriel, je partage avec vous six lignes directives infaillibles avec lesquelles on ne peut pas commettre d'erreurs. Mais surtout, en suivant ces points importants, vous pourrez comprendre les bases du travail avec la couleur dans le web design. Toutefois, ce ne sont pas des règles, puisque vous créerez, dans votre carrière, de nombreuses combinaisons de couleurs qui prendront certainement une direction complètement différente. Il s'agit plutôt d'un point de départ ou d'un guide pour vos premières prestations dans le monde du web design et puis pour vous épargner une rencontre avec la fameuse couleur "BEURK".
1. La composition de couleurs représente la toile et non le tableau
Peu importe le temps qu'on passe sur la création d'un splendide design, celui-ci passe tout compte fait au second plan pour laisser la place à la vraie vedette du tableau: le contenu. C'est l'un des principes fondamentaux du web design! Le choix des couleurs ne devrait pas rendre le design du site plus prédominent que le contenu présenté. Votre design devrait rester en arrière-plan, de manière à mettre en valeur le contenu.
La plupart du temps, on crée le design de manière relativement indépendante, dans des logiciels comme Photoshop ou Sketch: c'est pratique courante dans le web design. Si l'on ne possède pas d'exemple de contenu, il est facile d'obtenir, à première vue, un superbe design, qui pourrait du coup, sous forme de maquette, peut-être plaîre au client. Cependant, dans la pratique, ce genre de design détourne beaucoup trop l'attention des visiteurs du site. En fait, le web design est un procédé étroitement lié au contenu si bien que des designs de grande qualité paraissent dépourvus de sens sans la mise en place de leurs contenus.
L'utilisation d'un faux-texte en attendant le texte définitif, dans un logiciel de conception ou bien directement dans le code, suivie du développement du design est un excellent procédé. C'est surtout vrai si des photos ou des images d'un style particulier devront faire partie du design. On pourra alors s'assurer de former un tout harmonieux. Imaginez que le contenu du site est un individu unique pour lequel vous devez ajuster parfaitement ses habits.
2. Démarrez avec différents niveaux de gris comme couleur de base
Il existe un nombre indéfini de combinaisons de couleurs que vous pouvez choisir pour votre fond et pour la majeure partie de votre texte. Cependant, je vous recommande de commencer à maîtriser la plus facile: blanc et/ou gris clair pour le fond avec un texte gris foncé.
Si vous prenez n'importe quelle sélection de sites web, de templates ou de thèmes connus, celles-ci se basent la plupart du temps exactement sur cette même combinaison de gris foncé pour le texte sur un fond blanc ou gris clair. Et ce n'est pas par hasard! Effectivement, avec cette combinaison, on obtient virtuellement la garantie d'offrir aux visiteurs une bonne qualité de lisibilité, ainsi que la mise en avant du contenu, composé du texte et des images.
Démarrez avec un échantillon représentatif du contenu. Puis, composez un design à partir de niveaux de gris:
De façon générale, évitez d'utiliser une couleur noire profonde pour le texte. En effet, la lisibilité est meilleure avec du gris foncé. On peut choisir n'importe quelle teinte dans la gamme suivante: #333333 - #666666.
En ce qui concerne vos couleurs de fond, le blanc #FFFFFF est la meilleure stratégie pour des fonds placés immédiatement derrière tout texte principal. Quant aux autres éléments de fond, vous pouvez utiliser les gris suivants: du code hexa #FFFFFF jusqu' au code hexa #CCCCCC.
Je le précise une nouvelle fois: ceci ne s'agit pas de règles que vous devez utiliser. Il s'agit de grandes lignes qui vous garantissent le bon démarrage de votre projet.
3. Choisissez UNE couleur supplémentaire pour les accents
La plupart du temps, si les couleurs ne s'harmonisent pas entre elles, c'est qu'elles sont trop nombreuses et trop différentes. Plus vous utilisez de couleurs, plus il devient difficile de contrôler leurs efficacités. On commencera donc par ajouter une seule couleur au-dessus de la base de gris. Elle sera utilisée dans le but d'accentuer des éléments stratégiques comme les liens, les menus, les boutons, etc. Cette couleur supplémentaire peut être le bleu, le vert, le rouge, ou ce qu'il vous plaît.
Choisissez-la en plaçant un rectangle sur un nouveau calque, au-dessus de votre base. Ainsi, vous pouvez évaluer la façon dont votre couleur s'accorde avec tous les autres éléments. Ouvrez maintenant votre sélecteur de couleurs et cliquez dans le centre du coin supérieur droit du champs de couleurs.
Faites glisser le curseur de couleurs vers le haut et vers le bas et choisissez une couleur qui vous semble s'accorder avec votre design.
Vous travaillez maintenant avec trois couleurs de base: la couleur de fond, la couleur du texte et la couleur supplémentaire pour les accents. Dans le futur, vous pouvez, et vous devriez d'ailleurs, utiliser plus d'une couleur pour les accents. Mais, pour l'instant, imaginez que c'est un peu comme jongler avec des massues. Vous travaillez déjà avec trois. Alors faites en sorte de maîtriser ces trois-là. Par la suite, une fois que vous avez gagné en confiance, vous pourrez en ajouter d'autres.
Ce que vous venez d'apprendre:
Vous avez appris comment choisir une "teinte". Pour faire court, une teinte est une couleur de base. Quand vous faites glisser le curseur de couleurs vers le haut et vers le bas, vous verrez, dans votre sélecteur de couleurs, la valeur "T" changer ( "T" dans la version française de Photoshop, "H" dans la version en anglais).
"T" signifie "Teinte" ("H" pour "hue" en anglais). Dans ce champs, s'affiche le nombre représentant la couleur que vous venez de choisir pour les accents.
4. En cas de doute, utilisez du bleu!
S'il y a un doute quelconque sur le choix de la couleur pour les accents, prenez du bleu. Vraiment! Bien souvent, on travaille plus aisément avec la couleur bleue. Celle-ci s'accorde, en effet, avec un très grand nombre de types de sites. Des couleurs comme le violet ou le jaune, qui peuvent être très agréables, peuvent aussi devenir très rapidement criardes, si celles-ci ne sont pas bien utilisées.
Vous pouvez utiliser le bleu pour votre couleur d'accent, sans pour autant risquer de vous tromper. Si vous n'êtes pas sûr par où commencer ou quelle couleur choisir dans un projet, vous pouvez toujours vous rabattre sur le bleu. Le bleu particulier que vous choisissez se situe entre un bleu marine (teinte 235) et un bleu de type cyan (teinte 190): vous êtes alors, plutôt, à l'abri des erreurs.
Pour mon exemple, j'ai choisi une teinte avec la valeur 205. Lorsque vous avez défini votre couleur d'accent, n'attendez plus et ajoutez-la à votre design, là où vous pensez qu'elle sera nécessaire. Si vous l'appliquez sur des boutons, ou sur n'importe quel autre élément sur lequel se trouve du texte, modifiez également la couleur du texte! Dans mon exemple, j'ai changé la couleur du texte en blanc.
5. Variations de la couleur d'accent
À partir du moment où vous avez choisi votre couleur supplémentaire pour les accents, ne touchez plus au curseur de couleurs. Vous allez avoir besoin d'autres couleurs pour votre design, mais celles-ci, pour rester simple, ne seront que des variations de la couleur d'accent que vous avez déjà choisie.
Cliquez-glissez et choisissez les variations voulues dans le sélécteur de couleurs.
Appliquez ces types de variations de couleur pour:
Des effets de rollover
Des bordures
Un texte discret, apposé sur votre couleur principale pour les accents
Des dégradés
Des effets d'ombres et lumières
6. Éloignez-vous du coin supérieur droit!
Le coin supérieur droit du champs de couleurs est une zone aux couleurs explosives. Ces dernières sont comme des voitures de Formule 1: elles peuvent être incroyablement efficaces et sont très séduisantes. Savoir les utiliser correctement requiert, cependant, beaucoup d'expérience. Sinon, gare aux accidents! Il est donc important de se faire les dents avec des couleurs plus atténuées.
C'est la raison pour laquelle, je vous ai demandé dans la troisième partie de ce tutoriel, de cliquer la palette de couleurs au centre du coin supérieur droit avant de sélectionner votre couleur d'accent, pour vous garantir de commencer par une couleur relativement modérée.
En guise d'illustration, regardez ce qu'il se passe quand je change seulement la teinte de notre design et que je laisse la palette de couleurs telle quelle.
C'est encore bien, n'est-ce-pas? Cependant, si je clique et fais glisser la souris jusqu'au coin supérieur droit du champs de couleurs, tout d'un coup, c'est beaucoup moins bien!
Aïe mes yeux!! Afin d'éviter d'aveugler vos visiteurs, je vous recommande d'estomper un peu le tout, en restant, à l'écart du coin supérieur droit de la palette de couleurs.
Ce que vous venez d'apprendre:
Dans les deux dernières sections, vous avez, en fait, appris à appliquer quelques-uns des différents aspects de la théorie des couleurs. Vous avez appris comment travailler avec:
La saturation et la luminosité
Lorsque vous cliquez et faites glisser le curseur dans le champs de couleurs, vous verrez changer les valeurs "S" et "L" ("S" et "B" dans Photoshop en anglais), qui signifient respectivement "Saturation" et "Luminosité" ("saturation" et "brightness" en anglais). Vous constaterez également que le nombre représentant la teinte reste la même. Vous pouvez donc créer des variations de couleur en modifiant la saturation et la luminosité de la teinte originale.
La saturation et les nuances
La saturation correspond à la vivacité d'une couleur. Par exemple, dans la phrase: "Ma chemise était gorgée de vin rouge du verre que j'avais renversé". La saturation est déterminée par la quantité de blanc ajoutée à votre teinte originale. Moins il y a de blanc, plus la couleur sera saturée.
Lorsqu'on mélange du blanc avec une teinte, on crée ce qu'on appelle une "nuance". Le terme tire d'ailleurs son origine du processus de mélange de peintures, dans lequel le blanc est ajouté à une couleur.
La luminosité et les ombres
La luminosité correspond à la quantité de noir mélangée à votre couleur. Moins il y a de noir, plus la teinte est lumineuse.
Lorsque vous faites glisser le curseur de couleurs vers le haut, vous réduisez la quantité de noir, et vous augmentez du coup la luminosité. La valeur "L" (ou "B" en anglais) du sélecteur de couleurs augmente aussi.
Mélanger du noir avec votre couleur originale correspond à la création d'une ombre. L'origine de ce procédé vient du mélange de couleurs de peinture, dans lequel la peinture noire est ajoutée à une peinture de couleur.
Les tons
Lorsque vous mélangez votre couleur avec du gris, on obtient ce que l'on appelle un "ton". Lorsqu'on éloigne notre curseur du coin supérieur droit, comme nous l'avons fait précédemment, vous réduisez la saturation aussi bien que la luminosité, ce qui revient à ajouter du noir et du blanc à la fois (donc du gris). De cette manière, on crée un ton. De façon générale, à chaque fois que votre saturation et luminosité sont inférieures à 100%, il s'agit d'un ton.
Encore une fois, l'origine de ce terme provient du procédé de mélange de couleurs de peinture, dans lequel on crée un gris que l'on mélange avec une couleur.
Les schémas de couleurs monochromatiques
Un schéma de couleurs "monochromatiques" est constitué de différentes nuances, d'ombres et de différents tons d'une même teinte de départ. Vous venez juste d'apprendre tous ces termes dans la cadre de travaux pratiques. En choisissant une couleur pour les accents et en élaborant ses variations, vous créez, en fait, un schéma de couleurs monochromatiques.
La prochaine étape?
Continuez à travailler vos schémas de couleurs monochromatiques sur une base de gris et gagnez en confiance. Essayez de créer vos palettes avec différentes couleurs d'accent et découvrez les changements possibles dans les paramètres de saturation et de luminosité.
Quand vous commencez à maîtriser la première étape, lancez-vous et ajoutez une deuxième couleur pour vos accents. Pour vos premiers essais, je vous recommande les couleurs bleu et orange, puisqu'elles forment un duo à partir duquel il est facile de travailler. Puis essayez le vert et le bleu, qui d'après mon expérience, prend la seconde place quant à sa facilité d'utilisation. Ces deux combinaisons ont tendance à avoir beaucoup de succès auprès des clients.
Mettez la main sur une extension "pipette graphique" pour votre navigateur web, et utilisez la pour découvrir la façon dont les web designers expérimentés travaillent! C'est vraiment la meilleure chose à faire pour vous aider à comprendre les schémas de couleurs pour le web. Au fur à mesure que vous surfez sur le net, vous rencontrerez de superbes schémas de couleurs: emparez-vous de la pipette et examinez les couleurs utilisées sur la page. Pour chaque échantillon de teinte sélectionnée, testez-le avec des niveaux de saturation et luminosité différents et déterminez ce qui fonctionne le mieux. Prêtez également attention aux couleurs qui s'accordent le mieux entre elles.
En cas de doute, vous pouvez toujours avoir recours aux principaux points importants vus dans ce tutoriel; vous serez, par la suite, à l'abri de cette fameuse couleur "BEURK".
