Les couleurs et le Webdesign

Comment bien utiliser les couleurs sur votre site web ?

Il n’y a pas de règles pour choisir ses couleurs, généralement cela dépendra de votre charte graphique.  Cependant, dans un site web et comme dans tout autre support de communication, l’harmonisation des couleurs est importante. Le tout est d’avoir un rendu cohérent et qui donnera envie aux utilisateurs de naviguer à l’intérieur de votre site web.

Pour bien gérer les différentes couleurs dans un site web on parle généralement de 2 à 3 couleurs. La première doit être la couleur dominante. On dit qu’elle recouvre 60% du site (je précise que le noir et blanc ne sont pas des couleurs). La couleur secondaire, elle, peut recouvrir 30% de votre site Internet et doit être complémentaire à la couleur dominante (nous verrons par la suite comment trouver une couleur complémentaire). Enfin la dernière couleur, si vous souhaitez en utiliser une, ne doit recouvrir que 10% du site. Elle doit être utilisée avec parcimonie pour mettre en avant par exemple des éléments importants de votre site tels que les Call To Action (boutons d'action) ou les survols.

Pour choisir vos couleurs il faut savoir que chacune d’elles est liée à une émotion :

Il ne faut pas se baser sur vos couleurs favorites pour construire votre site mais plutôt sur la symbolique des couleurs. Pour pouvoir ainsi refléter au mieux votre secteur d’activité et votre public. Dans toutes ces couleurs on trouve des nuances différentes. Comme les couleurs neutres, pastels et vives. Les couleurs neutres comme le beige, le marron et le gris font souvent penser à des couleurs d’éléments naturels comme le bois ou la terre. Elles permettent de jouer sur les émotions en transmettant une atmosphère chaleureuse. Elles sont souvent utilisées pour des sites culinaires ou d’artisanat mais peuvent aussi se combiner avec d’autres usages comme pour mettre en avant le côté fait main ou sur mesure. Les couleurs vives quant à elles, sont là pour mettre en avant le dynamisme et l’humain. Tandis que les couleurs pastels ont tendance à refléter l’apaisement. Vous pouvez aussi faire des combinaisons de monochrome. C’est relativement simple, il s’agit de prendre une couleur principale et de la décliner en différentes teintes. Pour cela le site Kuler, que nous verrons par la suite, est un très bon outil. N’ayez pas peur du blanc : n’étant pas une couleur, il ne rentre donc pas dans notre pourcentage 60 30 10. Il permet de laisser respirer votre site tout en mettant en avant les éléments colorés.

Les contrastes en web design

Le contraste c’est l’opposition de deux choses, dont l’une fait ressortir l’autre. Ici nous parlerons du contraste dans les couleurs mais il faut savoir que le contraste se fait aussi par l’opposition d’une typographie petite à une grande typographie ou bien une interaction avec l’utilisateur comme un élément qui bouge. En web design, on va mettre en avant tout ce qui peut ou doit permettre à l’utilisateur d’avoir une interaction avec le site web. Comme le menu, les liens, les boutons etc. Plus vous facilitez la  navigation de l'utilisateur, plus il sera à même de rester longtemps et de parcourir un plus grand nombre de pages (même si faire rester l'utilisateur le plus longtemps sur votre site n'est pas toujours l'objectif). Les contrastes vont aussi permettre à l’utilisateur de lire. Ca serait dommage que l’on ne lise pas le contenu de notre site… Il existe des sites permettant de quantifier le niveau de lisibilité de votre texte comme : hexnaw

Si on utilise un fond blanc il est facile de mettre en avant un bouton. En le mettant d’une couleur attrayante il va favoriser l’action. La meilleure solution reste donc le fond blanc avec texte noir mais vous pouvez aussi utiliser un fond très pâle avec une typographie noire ou un fond vif et une typo blanche. Attention à la combinaison du jaune et blanc !

Quelques outils

Les couleurs sont une chose importante pour la construction de votre site web. Je vais vous donner quelques bonnes ressources pour pouvoir travailler vos couleurs.   Kuler : est une application d’Adobe pour créer des palettes de couleurs. Si vous séchez sur la deuxième couleur à choisir, alors ce site va vous aider à trouver l'harmonie parfaite avec celle-ci.

BrandColors : ce site regroupe les palettes de couleurs de différentes marques. Comme Facebook, Airbnb, Adobe etc. Il est intéressant pour situer votre marque.

Coolors : Ce site permet de créer des palettes de couleurs. Et de facilement trouver des variantes de teintes très utiles pour vos sites Internet.

Les bonus

Utiliser une photo pour créer votre palette

Pour obtenir des couleurs harmonieuses il est possible d’utiliser une photo. En utilisant l’outil pipette disponible dans de nombreux logiciels. Tels que Illustrator ou bien Photofiltre et Gimp. Il existe aussi des applications telles que la boîte à couleurs. Cette technique permet d’utiliser les composés d’une image pour en sortir une palette de couleurs. Cela peut être envisagé pour les personnes utilisant la même typologie de photos (champs, mer, ciel bleu etc.).

Pour vous, nous avons déniché les couleurs tendances de 2017.

Le vert Greenery est la couleur de l’année d’après Pantone. C’est une couleur apaisante et moderne souvent utilisée pour des start up dans le digital.

Les tonalités vives sont tendances en 2017. Utilisées en dégradés, en aplats ou en superposition elles sont présentes sur un très grand nombre de sites.

Spotify : Pour Spotify la couleur est le vert, elle est représentée sur tous les boutons pour inciter à l'action. C'est la couleur de la marque. Pour apporter du dynamisme et selon les périodes, plusieurs couleurs y sont ajoutées comme ici le jaune et le rose.

Deliveroo : sur le site de Deliveroo, on est sur un fond blanc avec de beaux visuels. Deux couleurs dominent : la couleur principale, du vert pour les aplats et les boutons d'actions, et le violet pour mettre en avant la recherche qui est un élément essentiel sur le site.

Ouigo : avec Ouigo on retrouve ces mêmes principes. La couleur principale, le bleu, est traitée en aplat. Et la couleur secondaire, qui est la couleur du logo, est traitée pour les éléments importants. Le contraste se fait aussi ici par le fond blanc.

Sosh : avec Sosh, on est sur une technique un peu différente puisque la couleur principale permet de mettre en avant les éléments importants. Ils y ajoutent par contre ici plusieurs couleurs secondaires toutes au même niveau : du rose, du gris et du jaune pour mettre en avant des engagements.