• 0k
  • 0
Web design \ 23 Septembre 2014

Comment bien utiliser les couleurs sur votre site Internet ?

Si créer un site est devenu un jeu d’enfants avec Wix, choisir judicieusement sa charte graphique en général, et ses couleurs en particulier, n’a rien d’enfantin. Certes, les goûts ne se discutent pas, mais une courte conversation est de rigueur pour ce qui est de l’utilisation des couleurs en web design.

L’influence de vos couleurs s’étend bien au-delà de l’aspect esthétique de votre site : elles permettent de hiérarchiser visuellement son contenu, contribuent à véhiculer son message et définissent son atmosphère de manière générale. Les couleurs constituent par conséquent un élément clé du design de votre site mais également de l’identité de votre marque.

Cette semaine, nous nous penchons sur la façon d’utiliser et de choisir des couleurs harmonieuses qui épouseront votre design adroitement et vous recommandons, comme de coutume, quelques bons outils au passage.

Parapluies de toutes les couleurs

Comment utiliser vos couleurs ?

Il n’existe pas de règle immuable en matière d’utilisation des couleurs. Néanmoins, il est important de rester simple dans ses choix (les dégradés et les textures bateau sont officiellement hors-jeu en 2014), de conserver un nombre de couleurs raisonnable et de les répartir de façon proportionnée. La règle de 60-30-10 a déjà fait ses preuves et ne vous réservera pas de mauvaises surprises.

  • Les teintes de votre couleur maitresse doivent couvrir 60% de votre espace.
  • Votre deuxième couleur doit couvrir 30% du design de votre page Web et créer un contraste fort avec la première afin d’attirer l’attention sur les éléments que vous souhaitez mettre en valeur.
  • La couleur complémentaire, qui recouvre les 10% restants, sert à accentuer des éléments stratégiques tels que les boutons et autres appels à l’action.

Tempalte Wix coloré

Comment composer votre palette ?

Le principal dilemme auquel nous faisons face – ignorants en graphisme que nous sommes – est : comment composer ses palettes de couleurs sans passer par la case coloriage ? L’une des merveilles du Web 2.0, est qu’il regorge d’outils gratuits très utiles. Vous pouvez choisir votre palette sur Colourco ou encore grâce à la roue chromatique Adobe Kuler. Ces deux outils gratuits formidables vous permettent de découvrir le code HEX de vos couleurs. Ce code en 6 caractères vous sera utile pour les retrouver à l’intérieur de l’éditeur Wix afin d’en faire usage sur votre site.

Un autre outil qui sera utile aux utilisateurs de Google Chrome est l’extension Eye Dropper. Cette pipette, semblable à celle que vous utilisez sur Paint ou Photoshop, vous permet de capturer une couleur sur le Web et d’en obtenir le code instantanément. Pratique, non ?

Code HEX dans l'éditeur Wix

Maintenant que vous connaissez les outils et principes de base, il ne vous reste plus qu’à faire votre choix.

Comment choisir vos couleurs ?

Chaque couleur est associée à une émotion particulière. En voici les plus courantes :

Couleur Sensation Exemple
 Bleu  Confiance, intelligence  Facebook, Intel, Nokia
 Rouge  Energie, passion  Coca-cola, Kellog’s, Nintendo
 Orange  Créativité, communication  Orange (fastoche)
 Vert  Naturel, stabilité  Starbuck’s, Perrier
 Jaune  Joie, amitié  Hertz, Wix, La Poste
 Noir  Puissance, élégance  L’Oréal, Nike

Vous pourrez trouver toutes les associations couleur/sensation facilement en utilisant l’outil code-couleur. Une fois l’impact des couleurs assimilé, il ne vous reste qu’à choisir une palette moderne afin d’en exploiter le potentiel.

Les couleurs « neutres »

Les couleurs neutres sont les couleurs telles que crème, gris ou encore le beige qui sont naturellement douces et ne sont pas sans rappeler les matériaux comme le bois, la pierre ou encore la terre.  En web design, elles transmettent une atmosphère sereine, calme et naturelle. Particulièrement utiles pour les sites d’arts culinaires, de produits bios ou encore de bien-être, les palettes neutres transmettent votre message en douceur. Les amateurs des styles rétro et vintage pourront également y trouver leur bonheur.

Template Wix aux couleurs neutres

Les couleurs « néon »

En exploitant vos 30% avec des couleurs vives et rafraîchissantes comme le bleu turquoise ou le fuchsia, vous donnez de l’énergie à votre design et apportez une touche à la fois jeune et sophistiquée à votre site. Cette tendance, adoptée par bon nombre de web designers est en pleine explosion. En utilisant un arrière-plan sombre vous maximisez la visibilité de vos éléments « néon » et faites, accessoirement, preuve de bon goût. On n’a pas idée de créer un site entièrement fluo, quelle infamie.

Template Wix couleur néon

Les couleurs pastel

Un peu de douceur dans ce Web de brutes. Les pastels sont des couleurs féminines, douces et agréables visuellement. A l’opposé des couleurs criardes et fluo, les tons pastel sont idéals pour séduire ses visiteurs en douceur et avec élégance. Les créateurs de sites dont l’activité est liée à l’enfance, à la mode ou même à l’art apprécieront particulièrement l’aspect raffiné qu’apporte ce type de couleurs. Combinées avec une typographie Serif, leur charme peut facilement s’exacerber.

Template Wix aux couleurs pastelles

Les combinaisons monochromes

Le concept est relativement simple : il s’agit d’utiliser différentes couleurs appartenant à la même teinte. Le style monochrome inspire confiance et permet d’orienter la concentration des visiteurs vers les éléments pertinents. En outre, le minimalisme est particulièrement en vogue et cette tendance surfe fièrement sur sa vague. Notez que dans ce cas précis, utiliser une texture de bon goût permettra de relever le tout afin de ne pas de tomber le piège tendu par ce type de combinaison à savoir, la monotonie excessive.

Template Wix monochrome

Conclusion : faites vos jeux (de couleurs)

Si vous vous sentez une âme de designer, la conjoncture est idéale pour donner libre cours à vos pulsions colorées. Les tendances les plus fortes du moment, comme le Flat design (ou design plat) ou encore le Long Scrolling font la part belle aux couleurs et vous donnent l’occasion de jouer avec les tons de votre site. Bien entendu, rien n’interdit d’utiliser quelques couleurs classiques ici et là, en particulier si vous optez pour un design Flat (cet outil vous changera la vie), mais les possibilités restent riches et variées. Il ne vous reste qu’à faire votre choix : après tout, les goûts et les couleurs ne se discutent pas, du moins en théorie.

Template Wix flat design

Prêt à vous lancer sur le Web ? Créez votre site internet gratuit dès aujourd’hui !

*Références :
3 Time-Tested Ways To Pick The Perfect Website Color Combination. Crazyegg
An Easy Guide to Cool Color Combos. Blog de Canva.com
How To Choose a Great Color Scheme For Your Website. WPMU DEV

Abonnez-vous à notre newsletter pour vous tenir informé de nos meilleurs conseils :



Recevez le
par e-mail !

Rejoignez le blog de Wix Ne manquez rien de notre actu !

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address. Email already exists

Hmmm, that's not a valid email address. Invalid email

Rejoignez-nous ! \ 

Découvrez nos conseils en web design, en marketing digital,
et suivez toute l'actu Wix ! Pas de spam. Promis.

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address. Email already exists

Hmmm, that's not a valid email address. Invalid email