Êtes-vous dans le rouge? Êtes-vous vert de rage à la vue de votre design web? Voici quelques trucs

Êtes-vous dans le rouge? Êtes-vous vert de rage à la vue de votre design web? Voici quelques trucs

by Jade Bérubé Morin / Lundi, 06 Janvier 2014 / Published in UI/UX

Bonjour à tous!

Après plusieurs semaines d’absence, je vous reviens avec un nouveau blogue sur les couleurs. Quelques ajouts et précisions méritaient d’être ajoutés au premier article, alors voici la suite :

Comme je l’ai mentionné dans mon article précédent, l’importance des couleurs est primordiale. Il faut lui porter une attention toute particulière, d’autant plus depuis que les psychologues ont évalués que les couleurs peuvent influencer l’acceptation ou le rejet d’un produit ou d’une image jusqu’à 60%. De mauvaises couleurs ou un mauvais design peuvent être aussi néfastes pour une entreprise qu’un mauvais service ou un produit peu fiable. J’essaierai donc de vous en apprendre le plus possible sur la coordination des couleurs et comment les utiliser à votre avantage dans vos design web.

Couleurs chaudes et couleurs froides

Pour débuter, nous allons faire la distinction entre les deux différents types de couleurs, soit les couleurs froides et les couleurs chaudes, tel que démontré sur la photo ici-bas :

Roue des couleurs froide et des couleurs chaudes

 

Les couleurs chaudes reflètent la passion, le bonheur, l’enthousiasme, l’énergie et le confort.

Les couleurs froides donnent un effet de calme et de professionnalisme.

Règle générale, lorsqu’on commence le design d’un site web, on essaie d’éviter trop de combinaison de couleurs chaudes et de couleurs froides, car ça a tendance à déplaire aux visiteurs. Votre site web aura une apparence chargée et lourde et, par conséquent, donner un sentiment de manque de confiance envers votre entreprise.

La roue de couleurs est un outil très utile lors de l’agencement des couleurs d’un site web (ou de n’importe quel autre projet). Elle permet de visualiser différentes agencements de façon plus visuelle. FYI : le premier diagramme circulaire de couleur a été créé par Sir Isaac Newton en 1666!

Sir Isaac Newton

 

Couleurs primaires, secondaires et tertiaires

Fait connu, les couleurs primaires sont le rouge, le jaune et le bleu. J’espère ne rien vous avoir appris, sinon, il était temps! 😉

Roue des couleurs primaires

Les couleurs secondaires sont le vert, l’orange et le mauve. Elles sont créées en mélangeant les couleurs primaires l’une à l’autre.

Roue des couleurs secondaires

Les couleurs tertiaires sont des couleurs médianes que l’on arrive à créer en combinant des couleurs primaires avec des couleurs secondaires.

Roue des couleurs tertiaires

 

L’agencement des couleurs

Certaines combinaisons de couleurs sont facilement aimées et faciles à regarder tandis que d’autres sont plus abrasives pour le regard. En fait, les agencements de couleurs (et leur appréciation) sont beaucoup plus objectifs que vous ne pouvez le croire; elles sont basées sur le roue de couleurs. L’harmonie des couleurs consiste en deux couleurs ou plus, avec une relations entre elles sur la roue. Voici quelques un des types d’agencement les plus populaires.

 Agencements complémentaires

Elles sont complètement à l’opposé l’une de l’autre sur la roue. Elles ont un pouvoir de contraste et souvent la couleur dominante sera utilisée pour la couleur de fond et l’autre couleur pour faire ressortir les éléments les plus importants de la page (souvent le contenu).

Agencements complémentaires sur la roue

Agencements analogues

Elles se situent l’une à côté de l’autre d’une couleur donnée. Les agencements analogues sont souvent retrouvés dans la nature et sont harmonieux en plus de plaire facilement à l’œil. Elles se combinent parfaitement, elles sont sereines et confortables.

Agencements analogues sur la roue

Agencements triadiques

Elles utilisent le pouvoir de trois couleurs qui sont situées à 120° l’une de l’autre sur la roue, donc reliées entre elles par un triangle équilatéral. C’est souvent l’agencement qui est considéré comme étant le meilleur. Vous pouvez utiliser une couleur pour l’arrière-plan et les deux autres pour le contenu et les éléments à faire ressortir.

Agencements triadiques sur la roue

 

Voilà! J’espère que ces nouveaux indices dans la décision de vos couleurs pour votre prochain design vous aideront grandement. N’hésitez pas si vous avez des questions concernant quelque point que ce soit, laissez un commentaire et je vous répondrai rapidement!

Et vous, comment avez-vous procédé pour le choix de vos couleurs et de votre design?

The following two tabs change content below.
Jade Bérubé Morin, Ludis Media
Bachelière en Communication, rédaction et multimédia à l'Université de Sherbrooke, je travaille chez Ludis Média en tant que Spécialiste Marketing Client et blogueuse depuis juillet 2013. Je suis une passionnée de danse, depuis plus de 20 ans je pratique le hip-hop, le contemporain et le ballet dans mes temps libre!

10 Responses to “Êtes-vous dans le rouge? Êtes-vous vert de rage à la vue de votre design web? Voici quelques trucs”

  1. Très bon article merci.

    J’avais fait une rapide allusion aux couleurs dans un article sur Bien commencer un blog !
    Mais ce n’était qu’une petite allusion !

    Sinon, très bon billet,

    juste une petite remarque, la barre de partage social est vraiment trop près du contenu… Je trouve ça dommage !
    Bonne continuation, bon courage !

    • Bonjour Paul!

      Merci de ta réponse, ton article aussi est très bien, félicitations! Ce sont en effet deux articles complémentaires, puisque le design est au tout début du processus de création du site web ou du blogue!

      Merci aussi pour ton commentaire pour la barre de partage social, je vais transmettre le tout au département des développeurs et nous verrons à arranger ça! 🙂

      Bonne journée à toi !

  2. RenaudMG RenaudMG says : Reply

    Merci pour cette présentation très complète !
    Il y a quelques temps j’ai étudié les bases du Flat Design dans lequel il n’est pas choquant d’avoir jusqu’à 8 couleurs complémentaires sans alourdir les pages.

    • Wow un gros sens de l’organisation s’impose alors avec 8 couleurs complémentaires! Je préfère les agencements simples, mais comme dans le domaine du design tout est subjectif, il est difficile de plaire à tous! J’aimerais bien voir quelques exemples, si tu en as, des agencements à 8 couleurs bien exécutés!

      Je suis heureuse de savoir que cet article a pu t’aider!

      Au plaisir!

  3. Marc Marc says : Reply

    Isaac Newton en 1966? J’en doute fort! 😉

    • Haha merveilleux! Aujourd’hui sur 145 lecteurs tu es le premier à l’avoir vu ! Merci de me l’avoir pointé, la correction sera faite, c’est bien 1666… Les typos se glissent partout! Merci encore 😉

  4. RenaudMG RenaudMG says : Reply

    8 couleurs complémentaires je n’ai pas d’exemple, mais le widget dribble utilise une palette de 7 couleurs et sur http://www.dtelepathy.com/blog/inspiration/24-flat-designs-with-compelling-color-palettes on a une vingtaine d’exemples de sites en flat design avec une palette de 5 couleurs

  5. nezha maftah nezha maftah says : Reply

    Vraiment vous m’avez beaucoup aider a comprendre les melanges des couleurs merci beaucoup.

  6. Lise Lise says : Reply

    Merci beaucoup pour ses conseils et pour tout ce temps à les écrire et à les illustrer. Merci !
    Très utile !

Des commentaires?

 
 
TOP