Le web design : agencer les couleurs.(Part 2)

Le webdesign : comment s'en servir ? (partie 2)

 

La première partie de l’article sur le web design mettait en avant les avantages d’un agencement réussi (structure d’une page Internet, affichage…), mais vous aidait aussi à choisir votre police.

Qu’en est-il des couleurs en web design ? Il est vrai que leur agencement n’est pas évident pour tous. Qui sait si le rouge va bien avec le vert ? C’est ici que nous intervenons pour essayer de vous expliquer comment utiliser les couleurs sur votre site Internet.

Quelles couleurs choisir pour valoriser votre site?

Le choix des couleurs devra correspondre, le cas échéant, aux couleurs de l’organisation (notamment aux couleurs du logo) et exprimer une ambiance particulière. Il est recommandé de ne pas en choisir plus de trois.
Quel que soit le choix des couleurs, il vous est conseillé d’établir une couleur prédominante, représentant la majeure partie de la page web, et une ou plusieurs couleurs secondaires plus dynamiques (plus vives), en moindres proportions, afin de mettre des éléments en exergue.

Les couleurs possèdent une symbolique implicite. 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.

Voici les couleurs les plus utilisées, et dans quel type de site elles peuvent être utilisées (liste non exhaustive) :

  • 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 : 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 pour un autre type de site que celui indiqué dans la liste.

Il existe des règles universelles régissant l’harmonie des couleurs, dues à des propriétés physiques de l’œil. En effet, lorsqu’il contemple une couleur, l’œil crée automatiquement, sur son contour, un filtre de la couleur complémentaire. On parle de « contraste simultané ». Avec ce mécanisme, la perception des couleurs dépend des couleurs 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 couleurs de même teinte dont les tons sont proches,
  • en mêlant des couleurs complémentaires (chaudes et froides), c’est-à-dire des couleurs éloignées sur le diagramme chromatique. Pour deux couleurs choisissez des couleurs complémentaires, diamétralement opposées ; pour trois couleurs, les couleurs 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 la couleur dominante de l’arrière plan est nécessaire. A ce titre, il est fortement déconseillé d’opter pour un arrière-plan graphique car il peut gêner la lecture et dégage généralement un sentiment d’amateurisme. L’arrière-plan devra ainsi généralement être choisi très pâle.

Ce document intitulé « Webmastering – Webdesign » issu de Comment Ça Marche (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.

Nos autres articles:

1 thought on “Le web design : agencer les couleurs.(Part 2)

  1. Article interressant, 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 s’y interresser. Si je trouve plus d’infos sur le sujet, je reviendrais poster.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

11 + deux =