Blog inspirant depuis 2008
  • Pin It

La psychologie et l’utilisation des couleurs dans le design Web

couleurs

La façon dont les couleurs influencent notre état d’âme, notre moral et notre corps est une chose vraiment passionnante. Le sujet du billet d’aujourd’hui concerne donc notre perception des couleurs dans le design web et de la manière elles sont utilisées par différentes compagnies dans leur site Internet.

« Le billet suivant est une traduction d’un article paru sur le site web de 1stwebdesigner.com écrit par Anastasia Miles ».

À la base, les couleurs sont divisées en 2 catégories. Les couleurs situées dans la zone rouge (sur le dessein à gauche) sont les couleurs chaudes (rouge, orange, jaune) et les couleurs situées dans la zone bleue sont les couleurs froides (bleu, mauve, vert). Les couleurs chaudes évoquent plusieurs sensations et émotions, dont la sensation de chaleur, de conforts et d’agrément, et en opposition, de rage et d’agressivité. Les couleurs froides, elles, peuvent se décrire comme évoquant le calme, la tranquilité, mais peuvent également être associées à la tristesse ou à l’indifférence.

Dans les temps anciens, les gens croyaient que les couleurs pouvaient guérir de différentes maladies.

  • La couleur Rouge était utilisée pour augmenter la circulation sanguine et stimuler le corps et l’esprit
  • La couleur Jaune était utilisée pour stimuler les nerfs et purifier le corps
  • La couleur Orange était utilisée pour augmenter votre énergie
  • La couleur Bleu était utilisée contre la souffrance
  • La couleur Indigo était utilisée contre les problèmes de peau

Même si la plupart des psychologues sont sceptiques par rapport à la thérapie par les couleurs, les grosses compagnies, elles, n’hésitent pas à créer de grosses campagnes publicitaires basées sur notre perception des couleurs. Voici un tableau des couleurs ainsi que quelques-unes des émotions/sensations qui leur sont rattachées.

Couleurs Émotions/Sensations
Noir Symbole du mal, mais également utilisé pour indiquer une notoriété. Souvent associé avec la mort et le deuil, la tristesse, la sexualité, la formalité, et le perfectionnement.
Blanc Pureté et innocence. Froid, fade et stérile.
Rouge Évoque de fortes émotions, associé avec l’amour, la chaleur et le confort. Également considéré comme étant intense. Le rouge peut aussi évoquer la colère, l’excitation, l’intensité et la sexualité.
Bleu Une couleur favorite pour plusieurs personnes et la couleur favorite des hommes. Apporte un sentiment de calme et de sérénité. Également décrit comme étant paisible, tranquille, sécuritaire et ordonnée.
Vert Symbolise la nature et le monde naturel. Représente également la tranquilité, la chance, la santé et la jalousie. Symbole de fertilité, a un effet calmant et soulage aussi le stress.
Jaune Le jaune représente la joie et la chaleur, mais il peut également représenter des sentiments de frustration et de colère. Plus fatigant pour les yeux (c’est pourquoi on voit rarement un site Web en jaune vif ou une chambre peinte en jaune, à l’exception des salles de jeux pour les enfants) mais beaucoup utilisé afin de capter l’attention (ex : les pancartes sur la route).
Mauve Relié à la royauté et à la richesse, au savoir et à la spiritualité, au sexe et aux relations, à l’exotisme et à quelque chose de particulié.
Brun (souvent utilisé avec arrière-plan en bois). Couleur naturelle qui évoque la force et la fiabilité, la chaleur, le confort et la sécurité.
Orange. Couleur flagrante vous faisant ressentir de l’excitation, de l’enthousiasme et de la chaleur. Étant une combinaison de rouge et de jaune, la couleur orange est souvent utilisée pour attirer l’attention.
Rose On associe le rose à l’amour, à la romance, à la jeunesse et son utilisation peut avoir un effet relaxant.

Voici quelques analyses de quelques sites web de grandes marques connues à travers le monde.

1. Coca-Cola

Les couleurs primaires du site sont le rouge sur un arrière-plan blanc et gris pâle pour une meilleure visibilité et un meilleur contraste. Le rouge est censé créer un sentiment d’excitation et d’énergie. À droite de la bouteille de Coca-Cola, le texte “Open happiness” correspond à la perception des couleurs utilisées.

Même si le blanc est probablement utilisé afin de mettre l’accent sur le rouge, cette couleur apporte un sentiment de fraîcheur. Du beau travail!

2. McDonalds

Habituellement, McDonalds utilise le jaune et le rouge (suscite l’excitation chez les enfants). Par contre, sur le site web, les couleurs choisies sont le noir et le blanc. Il n’est pas étonnant de voir ses couleurs sur le site Internet, puisqu’ il est principalement visité par des parents soucieux des répercussions d’une telle alimentation sur la santé de leurs enfants. L’utilisation du blanc et du noir est la solution parfaite pour rendre le site web formel, informatif, propre et même, stérile.

Imaginez maintenant si la compagnie avait utilisé le jaune et le rouge (excitation et fatiguant pour les yeux) pour leur site Internet – ce qui rendrait les parents contrariés, ce qui entraînerait un perte d’argent pour la compagnie.

3. Ikea

L’en-tête du site web est designer avec des couleurs vives, composées d’un jaune crème, d’un jaune verdâtre, de blanc et de bleu pour liens d’achats. Les photos utilisées dans l’animation flash sont lumineuses. L’utilisation de ces couleurs provoque une sorte d’excitation et vous rend joyeux. Le reste du site web est assez simple. Du texte bleu et noir sur un arrière-plan blanc afin de vous donner un accès complet à l’information.

La page des offres spéciales possède une grande bannière colorée de rouge dont vous ne pouvez détacher vos yeux! Trop tard, Ikea vous a eu.

4. Budweiser

Le rouge et le noir sont utilisés dans la page principal du site web de Budweiser signifiant ici « Hey mon ami! Bois de la Budweiser et tu seras un vrai Homme. »

5. M&M’s

Les couleurs de M&M’s sont habituellement le jaune et le rouge (excitation double). Par contre, le site web est un mélange de toutes les couleurs possibles; bleu, blanc, mauve, vert, jaune, orange, rouge, etc. L’équipe de marketing de M&M’s sont très intelligents, l’utilisation de toutes ces couleurs rend les bonbons M&M’s accessibles au grand publique.


Avant de designer un site, pensez-vous à la signification des couleurs par rapport à votre client? Avez-vous des couleurs favorites en matière de sites web?

14 commentaires

  • Josée Trépanier | 2010/04/21

    J'ai pu remarqué que tout comme McDonald, le rouge et le jaune est dominant dans les marques des restaurants fast food tels que Burger King et Wendys.

    À cause de la couleur qu'on parfois les aliments périmés, vous ne trouverez peu ou presque jamais de pâtisserie ayant du vert ou du bleu dessus du fait de notre perception (par expérience pour avoir travaillé quelques années dans des pâtisseries)

  • Annie Cournoyer | 2010/04/21

    Quand je vois un produit bien présenté sur un fond blanc j'ai le sentiment que le posséder serait rafraîchissant (Ikea, Coke, marevueweb, Apple) tandis que présenté sur un fond noir le produit a davantage une fonction réconfortante et reflète une image de confiance (McDo, Sony, Adobe).
    Beaucoup de sites semblent utiliser différentes variations de gris. Peut-être pour créer un sentiment de fraîcheur en ne negligent pas la notion de distinction.

    Quoi qu'il en soit, trop de couleurs ça m'étourdie et un manque de couleurs ça m'ennuie!

    Pas toujours évident de faire de beaux agencements de couleurs qui sortent de l'ordinaire. Pour m'aider j'utilise souvent ce site:
    http://kuler.adobe.com/#create/fromacolor

  • Louis-philippe Dea | 2010/04/21

    C'est vrai, ce que tu dis à propos des pâtisseries fait beaucoup de sens. Après avoir traduit ce billet, je suis certain que je vais porter une attention particulière aux couleurs des choses qui m'entourent.

  • Louis-philippe Dea | 2010/04/21

    Je suis d'accord, souvent, trop de couleurs c'est comme pas assez.

    Ça l'a été mon principal défi sur MaRevueWeb. Je voulais un style épuré mettant pour mettre de l'avant le contenu, mais en même temps, je voulais de la couleur et de la vie.

    C'est pourquoi j'ai choisi d'avoir un arrière-plan blanc. Je me suis dit qu'avec mon en-tête coloré ainsi qu'avec l'ajout de photos dans mes billets, j'allais pouvoir ajouter la touche de coloration que j'avais dans l'idée.

    P.S: J'ai également pris mes choix de couleurs sur Kuler.adobe 🙂

  • katsoura | 2010/04/23

    1stwebdesigner.com est down

    Comme on dit, les goûts et les couleurs ça ne se discute pas. C'est aussi une affaire culturelle. Par exemple, le blanc est la couleur du deuil en Asie.

    2. Mac Do « des parents soucieux des répercussions d’une telle alimentation »: je ne partage pas cet avis, ils viennent pour connaitre les produits, les nouveautés, faire des choix avant de se déplacer… Même si les fast-food tentent de se donner une image plus diététique, leur cœur de métier c'est la malbouffe. On y va pour se faire plaisir, faire plaisir aux gosses et non pas pour compter les calories.

    5. M&M's: la conclusion est un peu rapide. La combinaison de toutes les couleurs n'est pas la clé du succès. En tout cas, leur site est très chouette à visiter.

  • marevueweb | 2010/04/23

    Salut Katsoura,

    Il est vrai que dépendant des cultures, l'interprétation des couleurs peut varier.

    Je sais très bien que les goûts pour les couleurs ça ne se discute pas et je ne fais pas mention non plus d'une couleur étant plus belle qu'une autre.

    Le billet a été écrit afin de mettre en avant-plan l'interprétation générale qu'ont la majorité des individues par rapport à certaines couleurs.

  • Louis-Philippe Dea | 2010/04/25

    Pour en apprendre plus sur la signification des couleurs par rapport aux cultures, j'ai trouvé cette belle image qui résume très le sujet:

    http://www.informationisbeautiful.net/visualiza

  • ait'oumeziane mennad | 2011/07/18

    j’adore!!!

  • anthony | 2012/01/19

    Bonjour à tous!!! Je me présente je suis un élève de premiere année en patisserie et mon professeur m’a donné un exposé a faire intitulé  » les couleurs en patisserie ». je ne sais pas vraiment quoi dire sur ce sujet. J’aurais besoin d’un peu d’aide s’il vous plait… si des idées vous passent par la tête, elles sont les bienvenue pour moi =) Je vous remercie

  • MICHEL Richard | 2012/11/10

    Bonjours j’suis un etudiant en Infographie et technicien en Electricite et Construction Batiment…en infographie mon Prof m’a donne un expose intitule<<psychologie des couleurs et pourquoi utilise telle et telle couleurs.

  • MICHEL Richard | 2012/11/10

    C’est d’accord…

  • Atilousse | 2013/01/02

    bonjour je suis un infographe dans une entreprise de production d’article en plastique j’ai eu mon déplome cette été (école des des beaux arts) j’ai besoin de l’aide a propos de ce domaine de clicherie et film en plastique et la psychologie de la couleur

  • Annecy Internet | 2013/02/14

    Bonjour et merci pour les infos dont je me sert de plus en plus.

    Bien à vous.

    Jade

  • Rkim | 2013/07/01

    c’est pas tout ces commentaires. les couleurs influencent certe les femmes peuvent nous en dire plus.

Laisser un commentaire