Design Web

Le choix des couleurs est une étape importante du processus de conception web qui peut faire ou défaire le résultat final. Nous passerons ici en revue les fondamentaux de la théorie des couleurs et de la psychologie des couleurs, qui aident à créer des palettes qui ne jurent pas.

Si vous manquez d'imagination devant le choix d'un schéma de couleurs pour votre boutique en ligne, vous n'êtes pas seul. Le choix des tons qui peut sembler intuitif est en réalité malaisé  car tout le monde a une opinion subjective sur le sujet : certaines personnes aiment les couleurs vives et tranchées comme le rouge cerise et le vert néon, tandis que d'autres préfèrent des nuances pastels moins affirmées. Il faut lors de la création d'une charte graphique, dépasser le seul point de vue personnel et considérer un certain nombre de techniques éprouvées.

Il existe et c'est heureux, des principes qui rationalisent le choix des couleurs de sorte qu'il soit possible au terme d'un processus en trois étapes de trouver les tons qui, bien conjugués donneront aux pages web un aspect professionnel et esthétique.

l'importance des couleurs

Un bon choix de couleurs favorise la lisibilité d'un blog, l'attrait visuel d'un site marchand et l'identification d'une marque. En revanche, un mauvais choix de couleurs rend l'expérience utilisateur décevante, poussant les visiteurs à ne pas s'attarder sur vos pages. 

lisibilité des pages web

Le choix des couleurs (et des polices de caractère du reste ) impacte le niveau de lisibilité du contenu publié et il s'agit de trouver le niveau approprié de contraste entre le texte et l'arrière-plan. Trop peu de contraste rend le texte difficile à lire, tandis qu'un contraste excessif est fatigant pour les yeux. Un exemple classique de contraste des couleurs est le texte noir sur un fond blanc. Si vous regardez de près, vous remarquerez que de nombreux sites web utilisent en réalité du texte gris foncé (comme ces pages d'ailleurs) sur un fond blanc ou ivoire pour maximiser la lisibilité tout en réduisant la fatigue oculaire. D'un autre côté un texte clair sur un arrière plan foncé comme dans le cas du mode sombre proposé par un nombre croisant de navigateur, fonctionne également. C'est bien sûr plus reposant pour la vue, mais aussi plus audacieux car à encore à contre courant des usages. 

le web est un média visuel

Lorsque l'on parle d'attrait visuel en conception web, il ne s'agit pas d'opinions subjectives sur les couleurs. L'accent est plutôt mis sur la création de palettes de couleurs harmonieuses qui sont décrites par la théorie des couleurs. Comme nous le verrons plus en détail plus tard, il existe trois types de schémas qui ont un attrait universel : 

• monochromatique
• complémentaire
• analogue. 

Reconnaître et manier ces schémas rend le choix des teintes plus rapide et plus sûr. C'est utile parce que par la suite il est difficile de faire accepter au visiteur une refonte complète de l'identité visuelle à laquelle il s'est habitué. 

reconnaissance visuelle des marques

Un autre rôle important des couleurs dans un contexte de conception web est la reconnaissance de la marque. De nombreuses entités ont une couleur primaire (ou deux) qui est fortement présente sur leur site web et leurs supports marketing. Quelques exemples populaires :

• le rouge de Coca-Cola
• le vert de Starbucks 
• le bleu et le jaune à fort contraste d'Ikea

Ces grandes enseignes savent ce qu'elles font, croyez moi: la cohérence est à la base de la reconnaissance d'une marque par les couleurs. L'exemple de Desigual donne à penser qu'il a suffit à l'enseigne de confection de donner libre cours à l'imagination de ses designer, mais il y a en réalité beaucoup de savoir faire et un gros travail en amont.

utilisation de la théorie des couleurs pour le web

La théorie des couleurs aide à déterminer quelles couleurs fonctionnent bien ensemble. Les principes tournent autour de la roue des couleurs qui représente visuellement les relations entre les différents tons. Elle contient des couleurs primaires, secondaires et tertiaires. Elle peut également être divisée en teintes chaudes et froides, comme en peinture. 

Les différents schémas de couleurs

• Schémas de couleurs monochromatique

Les schémas de couleurs monochromatiques sont basés sur une seule teinte (mono = un) choisie parmi les couleurs primaires et secondaires, à laquelle on adjoint des tons proches d'intensité différentes pour créer un effet de continuité et d'unité. Ce peut être un bon choix pour se distinguer de la masse des autres sites ou faire ressortir les photos et autres illustrations par contraste.

• Schémas de couleurs complémentaires

Les schémas de couleurs complémentaires sont constitués de couleurs situées aux extrémités opposées de la roue des couleurs. Par exemple, le rouge et le vert ou le bleu et l'orange (comme sur ces pages ). Les couleurs complémentaires ont tendance à bien se contraster et sont donc un choix populaire en conception web. Cependant, le contraste ne doit pas être lassant et il faut s'assurer que les couleurs ne sont pas trop distrayantes.

• Schémas de couleurs Analogues

Les schémas de couleurs analogues sont composés de couleurs qui se  trouvent côte à côte sur la roue des couleurs. Ces schémas de couleurs sont élégants visuellement, mais comme pour les schémas de couleurs monochromatiques, il faut veiller à créer suffisamment de contraste pour la lisibilité. Une astuce connues pour utiliser ce type de design est de l'associer à une couleur neutre comme le noir ou le blanc pour améliorer la lisibilité.

Une fois que vous maîtrisez la théorie des couleurs, la création de palettes de couleurs devient plus intuitive. Mais quel schéma est le meilleur pour un projet donné, et comment décider quelles sections de la roue des couleurs utiliser ? la psychologie des couleurs nous en dit plus.

la psychologie des couleurs sur internet

Alors que la théorie des couleurs est axée sur la création de schémas de couleurs cohérents, la psychologie des couleurs étudie les sentiments et émotions associées aux différentes couleurs. car ces ressentis, pour subjectifs qu'ils soient sont bien souvent au cœur du processus de prise de décision du consommateur.

Significations admises des couleurs

Une façon d'incorporer la psychologie des couleurs au design web est de tenir compte des significations courantes des couleurs. De manière plus ou moins consciente, les couleurs suscitent en nous sentiments et impressions, et bien que ceux-ci soient influencés par les contextes culturels et les expériences personnelles de chacun, on admet généralement le thème suivant :

• Rouge : passion, puissance, amour, danger, excitation
• Bleu : calme, confiance, compétence, paix, logique, fiabilité (https://fr-fr.facebook.com/)
• Vert : santé, nature, abondance, prospérité (https://shiatsu-zen.net)
• Jaune : bonheur, optimisme, créativité, convivialité
• Orange : amusement, liberté, chaleur, confort, gaieté
• Violet : luxe, mystère, sophistication, fidélité, créativité
• Rose : douceur, sincérité, chaleur
• Marron : nature, sécurité, protection, soutien
• Noir : élégance, puissance, contrôle, sophistication, dépression
• Blanc : pureté, paix, clarté, propreté

Il faut sans doute relativiser la portée scientifique de cet inventaire qui autorise évidemment l'approximation et l'interprétation en fonction du public ciblé et du contexte culturel, mais qui penserait en toute première intention à du rose pour un stand de tir ou à du noir pour une crèche ?

Certaines significations de couleurs semblent contradictoires comme le rouge est souvent associé au danger mais aussi à l'amour et la passion. Le noir peut évoquer le puissance dans certains cas et de dépression dans d'autres. La solution tient au contexte, qui doit être pris en compte lors du choix.

L'utilisation du rouge ne signalera pas automatiquement le danger ou la romance. Les autres éléments de la page, tels que la typographie, les illustrations et le message travaillent de concert pour donner à voir certains aspects, créer une certaine ambiance.

Sans être de nouvelles tables de la loi, ces techniques de psychologie des couleurs aident à déterminer quelles couleurs représenteraient le mieux votre marque à travers les pages que vous publiez. Il est logique d'utiliser le vert pour un site web axé sur la santé en raison des associations de cette couleur avec la nature et le renouveau. Cependant, dans des domaines créatifs comme la conception et le design, les règles sont parfois faites pour être enfreintes: 

Dans le bon contexte, un schéma de couleurs à contre emploi peut fonctionner à plein pour une marque donnée. Bien sûr c'est un exercice d'équilibre. Une enseigne du domaine de la santé utilisant un schéma de couleurs monochrome rouge se démarquerait sans nul doute de ses concurrents qui emploient généralement des  tons de verts ou bleu ciel avec du gris. Elle prendrait toutefois le risque de rebuter une partie de ses clients potentiels en bousculant leurs habitudes. Ce peut être un pari gagnant pour une petite entreprise qui n'a ni les contraintes, ni autant à perdre qu'une firme de grande taille déjà bien installée sur son marché.

~Dans le cas de ce blog qui combine tutoriels et actualités sur des sujets parfois techniques, l'emploi d'un schéma complémentaire basé sur le bleu {= compétence} et un orange vitaminé et punchy gommant un peu l'aspect rigide, s'est imposé de lui-même~

créer sa palette de couleurs web 

a.le choix d'une couleur principale

Suivant la règle des 60/30/10 la couleur principale d'une palette représente environ 60 % de la couleur sur un site web. Référez-vous aux significations des couleurs énumérées ci-dessus pour déterminer celle qui transmettrait le mieux les émotions que vos utilisateurs devraient ressentir à la lecture de votre blog. Doivent-ils se sentir relaxés ? à l'affût des nouveautés ? concentrés sur un sujet ? 

b. choix des couleurs secondaires

Une fois que vous avez choisi une couleur principale, sélectionnez une ou plusieurs couleurs secondaires qui représenteront environ 30 % d'un site web. La psychologie des couleurs peut également jouer un rôle ici. Les couleurs douces et atténuées diffuse une ambiance différente de celle portée par des couleurs vives. Un schéma de couleurs bleu monochromatique peut sembler apaisant et relaxant, tandis qu'un schéma de couleurs bleu et orange complémentaires semblera plus ludique (comme dans ce blog ).

c. Sélectionnez une couleur d'accent

Enfin, chaque palette de couleurs doit inclure une couleur d'accent. Cette couleur est utilisée de avec parcimonie et occupe environ 10 % de l'espace du blog. Souvent, la couleur d'accent crée un fort contraste avec la couleur principale. Ce contraste permet d'attirer l'attention sur des éléments ciblés de la page comme les boutons de passage à l'action ou les liens promotionnels. 

Notons que le noir et le blanc sont également considérés comme des couleurs et peuvent être utilisés efficacement comme couleurs d'accent, en particulier sur des sites web plus colorés.

Typographie web, mise en page et ergonomie 

Dans ce guide, nous avons passé en revue les principes fondamentaux de la théorie et de la psychologie des couleurs pour proposer un processus de création graphique en trois étapes simples. Une fois le processus de choix des couleurs maîtrisé, il reste encore à considérer d'autres aspects de la charte visuelle comme:

• la typographie
• la mise en page
• l'ergonomie

J'aborderai d'ailleurs sous peu la question du choix des polices de caractère pour les contenus en ligne. Contrairement à ce qui vaut pour la presse papier, les pages web voient leurs mises en pages bousculées pour s'adapter aux différents supports de consultation. c'est une donnée qu'il faut prendre en considération dès la conception d'un site web et qui fera elle aussi l'objet d'un prochain billet dans cette même rubrique.