Le web design et les couleurs du web. (Part 2)

Le web design et les couleurs du webLa première partie de l’article web design présentent les avantages d’un agencement graphique réussi (structure d’une page Internet, affichage, couleurs …). Définition des polices de texte et des règles typographiques.

Mais qu’en est-il des couleurs du web design, de l’agencement et de l’harmonie des couleurs. « Qui sait si le rouge va bien avec le vert… » Voici quelques idées pour concevoir une belle palette de couleur pour votre site Internet.

Le choix des couleurs du design de votre site Web

Le choix des couleurs devrait bien s’ajuster, le cas échéant, choisir les couleurs de l’organisation (notamment celles du logo) et diffuser une ambiance de marque. Il est recommandé de ne pas choisir plus de trois couleurs.
Quel que soit le choix des couleurs, il est conseillé d’établir une prédominante, pour présenter la tendance générale des pages web, et une ou plusieurs couleurs secondaires plus dynamiques (plus vives), pour souligner et mettre des éléments en relief.

Les couleurs possèdent une symbolique. Il est donc important de les choisir en connaissance de cause. En effet, les couleurs influent sur le comportement des individus :

  • physiquement : appétit, sommeil, température du corps, etc.
  • émotionnellement : sentiment de peur, de sécurité, de joie, etc.
  • psychologiquement : dynamisme, concentration, etc.

Le choix des couleurs du design de votre site Web

Voici les couleurs thématiques les plus utilisées en web design

  • Bleu: Voile, nouvelles technologies, informatique, médecine.
  • Violet : Culture, politique.
  • Rose : Journal personnel, femmes.
  • Rouge : Luxe, mode, sport, marketing, médias.
  • Orange : Divertissement, sport, voyage.
  • Jaune : Communication, tourisme.
  • Vert : Découverte, nature, voyage, éducation.
  • Brun : Environnement.
  • Blanc : Mode, actualités.
  • Gris : Design, associations, organisations à but non lucratif.
  • Noir : Cinéma, art, photographie.

Toutefois, il est possible d’utiliser une couleur en web design d’une autre thématique que celles indiquées dans la liste ci dessus.

Il existe des règles universelles régissant l’harmonie des couleurs, dues à des propriétés physiques de l’œil. En effet, l’œil crée automatiquement, sur son contour, un filtre de couleur complémentaire. On parle de « contraste simultané ». Avec ce mécanisme, la perception des couleurs dépend de celles avoisinantes. Il existe donc globalement deux façons principales de choisir des couleurs harmonieuses :

  • en choisissant des nuances d’une même couleur, soit des coloris de même teinte dont les tons sont proches,
  • en mêlant des couleurs complémentaires (chaudes et froides), c’est-à-dire éloignées sur le diagramme chromatique. Pour deux couleurs, choisissez-en des complémentaires, diamétralement opposées ; pour trois couleurs,ces dernières doivent former un triangle équilatéral, etc.

Le choix de la couleur d’arrière-plan (en anglais background) est primordial, car un arrière-plan mal choisi peut gêner la lisibilité. Un bon contraste entre la couleur d’avant-plan et celle dominante de l’arrière plan est nécessaire. Ainsi, il est fortement déconseillé d’opter pour un arrière-plan graphique. Cela peut gêner la lecture et transmettre une touche d’amateurisme. Généralement, l’arrière-plan devrait avoir des tons et des couleurs pastelles.

Ce document intitulé « Webmastering – Webdesign » issu de (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.

Autres articles :

Le web design : agencement, typographie.(Part 1)

https://www.abime-concept.com/blog/2009/06/19/la-charte-graphique-dun-site-web/

1 thought on “Le web design et les couleurs du web. (Part 2)

  1. Article intéressant, mais j’aurais aimé que l’alinéa parlant de l’influence des couleurs sur le comportement. C’est un sujet qui mériterait de plus s’y intéresser. Si je trouve plus d’infos sur le sujet, je reviendrais poster.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

un + dix-neuf =