Psychologie des couleurs

Le design doit être créé en fonction de l'identité de la marque, de son offre et des cibles (ses futurs visiteurs) auxquelles il s'adresse.
L'aspect d'un site, le choix de la couleur, des formes, de la typographie n'est jamais choisi par hasard.
Le design du site web a un rôle considérable, il sensibilise l'internaute, il fait appel à sa part émotive. S'il séduit une certaine cible d'internautes, il peut augmenter considérablement le nombre d'adhérents.
Les couleurs agrémentent le webdesign d'un site et jouent un rôle important car elles influencent notre perception et notre comportement.
Maitriser leurs influence peut nous aider à susciter les émotions ou comportements souhaités par l'internaute.

Choix des couleurs pour son site web

Les couleurs dominantes que l'on choisi pour un site web ne doivent donc être en aucun cas choisi pour leur seul valeur esthétique.
Le choix de la couleur est toujours l'objet d'un parti pris stratégique dans la conception d'un site internet.
De nombreux critères peuvent motiver le fait de choisir une couleur plutôt qu'une autre : la symbolique, l'ambiance, le contraste….
Le bon choix des couleurs peut aussi fortement aider à renforcer la lisibilité, la clarté du site, aider à comprendre la hiérarchisation des contenus et les différents niveaux d'arborescence ou encore à lier ou séparer des rubriques entres-elles.

Même si l'accord des couleurs a une grand part de subjectivité : à chacun son goût et sa couleur, certaines couleurs ont hérité d'une signification universelle, bien qu'il est toujours possible de les contourner :
Le rouge signifie par exemple une interdiction mais pour certains sites il peut être employé pour exprimer un dynamisme, une vivacité, la jeunesse. Comme ci-dessous le rouge vif de la marque Uniqlo donne une identité « colorée et branchée » à la marque mais aussi, il fait echo à la couleur du drapeau japonais (origine de la marque) :
couleur = identite visuelle

Le vert en revanche est souvent utiliser pour les boutons d'action dans les fiches produits d'un site ecommerce ou dans ceux que l'on trouve dans le tunnel d'achat : valider ou poursuivre la commande, ajouter au panier, il évoque la permission, dans le code de la route contrairement au rouge qui évoque l'interdiction et l'arrêt, le vert signifie « je passe ».



Chaque couleur aura donc une influence sur nos émotions, nos humeurs, notre ressentiment… En fonction de notre environnement culturel.
Il est donc important de bien la choisir en fonction du message que l'on veut faire passer et de la cible visée : s'adresse-t-on à un public masculin ou féminin, jeune ou pas, de quel continent… Autant de questions/réponses qui vous permettront de trouver la bonne couleur pour vos webdesign.

Une bonne dose de couleurs, mais pas trop
Voici quelques conseils sur l'utilisation de vos couleurs sur votre site web.
En 3 points essentiels :

Pas trop de couleurs !
Des sites avec trop de couleurs empêchent la clarté et la lisibilité et s'apparente à de l'amateurisme.
Vous n'êtes pas un enfant qui découvre ses premiers crayons de couleurs alors n'en faites pas trop !
Utilisez au maximum trois dominantes colorées et pas plus, votre site n'en sera que plus clair. Et tentez de bien harmoniser les couleurs entres-elles.

Color Scheme Generator est un outil qui permet de gagner du temps dans la recherche des harmonies de couleur

Pour l'utiliser, cliquez sur une couleur de la roue chromatique (1) C'est votre couleur de base...
Choisissez ensuite, juste au dessus de la roue (2), le type d'harmonie que vous souhaitez :
2 couleurs (contrast), 3 couleurs (triad) 4 couleurs (tetrad) ou Camaieu (analogic).
Vos harmonies apparaissent immédiatement dans la partie (3).
Sélectionnez maintenant la variante souhaitée en (4).
Vos différentes harmonies vous sont alors présentées en (5).
Vous pouvez aussi entrer directement le code RGB de votre couleur (en dessous de 2) et obtenir vos harmonies
color Scheme Designer

Des couleurs au service de l'ergonomie de votre site web
N'oubliez pas que vos couleurs peuvent renforcer le confort de lecture, donner des points de repères, favoriser la navigation …
Conserver une certaine logique dans leur utilisation par exemple lien en rouge pour tout ce qui est cliquable sur la page, ou toutes les informations d'une même catégorie…

Des couleurs qui facilitent la lecture
Lire à l'écran demande beaucoup plus d'effort que lire sur un support papier : la distance entre nous et le support est plus grande, l'écran est un support plus fatiguant pour les yeux …
Nous « lisons » sur internet plus rapidement que sur tout autres médias print, l'internaute est plus pressé de trouver ce qu'il cherche au milieu du flot d'informations qu'on lui propose.
Il est important de lui offrir une bonne lisibilité en travaillant les contrastes entre le fond et la forme.
Pour les zones textuelles, un contraste fort entre le texte et son fond favorise la lisibilité.

Dès qu'il y a une zone de texte importante, privilégier un fond neutre et unique, éviter les images en arrière-plan sauf si celles-ci on un jeu de transparence ou un flou qui mettra en avant le texte.
Utiliser une couleur flashy en fond si vous voulez par exemple mettre un des blocs de votre page web en avant.
La couleur est ici utilisé pour le fond des boutons d'action et pour les encarts promos et sont donc bien visibles dans la page. Le texte bleu foncé est sur un fond blanc neutre qui facilite la lisibilité.

La réflexion concernant l'utilisation d'une typographie adaptée est une partie non négligeable d'une bonne démarche "ergonomique".
Cinq siècles de typographie et de texte imprimé ont modelé notre approche de la lecture. Trop souvent on pense qu'un écran web n'est que la translation de l'information papier(print).
La conséquence est souvent un manque d'argumentaires pour justifier des choix auprès des clients.
- L'objectif ici est de soumettre quelques bons principes pour savoir ce qui fonctionne ou pas, et surtout être capable de l'expliquer au client ou au donneur d'ordre.

Chaque police de caractères appartient à une famille, adaptée à un usage particulier. Cette classification des caractères date de la fin du 19ème siècle. Elle est due à un imprimeur parisien, Francis Thibaudeau et elle s'appuie sur l'expérience des premiers imprimeurs de la Renaissance.
Une classification fondée sur la forme des empattements
L'empattement est le « pied » de la lettre, la partie basse sur laquelle « s'appuie » le caractère. On l'appelle aussi le serif. Ex : Times, Garamond


Si l'empattement est absent, c'est une police Bâton ou Antique. Ex : Arial, Verdana, Futura.


Thibaudeau complète sa classification par l'ajout de 5 autres catégories pour des usages plus spécifiques
- Les Scripts qui imitent une écriture manuscrite.


- Les Anglaises avec des "pleins" et des "déliés".


- Les Gothiques qui imitent une écriture calligraphiée.


- Les Vignettes qui ne sont pas des lettres mais des symboles (exemple : Windings).


- Les Fantaisies qui véhiculent ou renforcent - par leur forme - un message particulier.

Les lettres avec empattements sont moins lisibles sur l'écran que celles sans empattements.
Il y a plus de petits détails qui ont tendance à se "noyer" dans l'écran, la résolution d'un écran étant beaucoup plus faible que celle du papier.

Sur écran pour le texte de petite taille, il vaut mieux utiliser des caractères sans empattements.
Actuellement la plupart des sites « modernes » utilisent le Verdana pour le texte.
Par ailleurs un texte de couleur grise très foncée donne une meilleur lisibilité qu'un texte noir.
L'Arial est un peu "vulgaire" et peut-être un peu trop vu.
Le Tahoma peut produire, à certaines tailles de caractères, des serrements de caractères un peu disgracieux.
Le Verdana est bien adapté au web, cela est dû à l'aspect « carré » des caractères.
Le Trebuchet MS est plus typé, mais les caractères sont plus travaillés que le Verdana.
Une police assez moderne et "classieuse" : le Lucida
Lucida Sans Unicode pour Windows, Lucida Grande pour Macintosh
Rappel CSS :
font-family : Lucida Sans Unicode, Lucida Grande, Verdana, Trebuchet MS, Arial, Helvetica, sans-serif ;

Pour les textes de grande taille
Un caractère sans empattement sera plutôt adapté pour faire ressortir la modernité, l'aspect technologique d'un site.
Ex : le Century
Un caractère avec empattement sera plutôt adapté pour faire ressortir la stabilité et le côté sérieux d'un site.
Ex : le Garamond
- Et pour les titres ?
Au dessus de 16 ou 18 points de taille de caractères, les caractères avec empattement peuvent être utilisés.
C'est d'ailleurs "à la mode", sur certains sites de journaux, comme Le Monde ou Libération, les caractères du texte sont sans empattement, les titres sont avec. La police utilisée est souvent du Georgia.
Il est ainsi intéressant de constater que la "règle" de l'impression :
Information à voir (un titre) = pas d'empattement
Information à lire (un texte) = empattement
Cette règle s'inverse complétement sur le web.
Il est indispensable de bien expliquer ça au "client" s'il désire "translater" sa charte graphique papier - telle quelle - sur écran.

Exercice :

1/ Faire un benchmark graphique (concurrents / websites templates / websites awards)
2/ Rassembler des visuels, typos, couleurs, textures : Moddboard
3/ Créer le Wireframe détaillé de la homepage
4/ Créer un ou deux Style Tiles
écrivez des argumentaires et recommandations pour chacun de vos choix.