Une methode facile en 2 étapes pour bien choisir les couleurs de votre blog

Fab du blog Nomade Digital est passionné de création graphique et dans cet article il donne la méthode simple qu’il utilise dans son travail pour choisir les couleurs d’un site Internet ou d’un blog.

1 – Choisir ses contrastes :

Une des première chose à faire avant de vous lancer dans les choix de couleurs c’est de définir vos contrastes.

Vous le savez déjà, on écrit pas en noir sur un fond foncé, c’est illisible. Et bien le même principe s’applique à votre site :
Votre logo est foncé, donnez lui un fond clair pour le mettre en valeur
Vos articles seront écrit en noir, mettez un fond blanc ou un gris très clair

Avec cette première réflexion vous allez pouvoir définir des contrastes pour votre site, par exemple une bannière claire pour votre logo foncé, une barre de menu foncée avec vos menus écrit en clair.

Il vous faudra aussi définir votre « background-color », la couleur qui entourera votre contenu, elle sera très présente et en général les « normes » web veulent qu’un background (si vos articles sont écrit en noir sur fond blanc) soit d’une couleur foncée pour recentrer l’attention sur l’article et que l’oeil ne parte pas en vadrouille sur les cotés, soit de la couleur (ou une couleur très proche) du fond de vos articles.

2 exemple pour illustrer ça :
– Le design actuel de WeD que vous êtes en train de lire : le background est gris foncé, vous sentez bien que votre oeil est attiré par le contenu blanc de cet article non ?
– Le design de mon site NomadeDigital : mon background est de la même couleur que mon contenu, je n’ai pas voulu utiliser de contraste horizontal, mais pourtant, votre oeil sait tout de même ou le contenu important se trouve.

Vous pouvez vous faire un schéma rapide sur une feuille et vous verrez que déjà vous aurez moins de choix, placez-y le squelette de votre site, header, menu, contenu, footer, background, et marquez « foncé » ou « clair » dans ces zones.

2 – Choisir vos couleurs :

Il n’est pas conseillé d’avoir trop de couleurs différentes sur votre site pour éviter l’effet « guirlande de Noël », essayer de vous cantonner à 2, 3, maximum 4 couleurs.

Le choix des couleurs est souvent un casse tête pour les gens qui n’ont pas de formation artistique, ne vous inquiétez pas, beaucoup d’outils sont à votre disposition pour vous aider !

Il vous faudra définir votre couleur principale (peut être celle de votre logo ?) Ou une couleur qui vous plait, n’oubliez pas que votre blog est le reflet de votre identité. Une fois cette couleur choisie, il vous faut trouver les couleurs complémentaires :

Un outil incontournable, Color Scheme designer : Comment l’utiliser ?

Vous pouvez chercher les tons complémentaire d’une couleur (option mono), trouver deux couleurs complémentaires (option complément), trois couleurs (triad) ou quatre (tetrad)

Un exemple concret : Vous voulez mettre 3 couleurs différentes sur votre site, votre couleur principale est le bleu, choisissez donc « triad » et déplacez simplement le point noir le long du cercle de couleurs, vous voyez les couleurs complémentaires de votre bleu s’afficher sur la droite ?

Une fois vos couleurs choisies, notez le Hex code (code de couleur web de type #447BD4) sur le schéma de votre blog en plaçant votre souris sur la couleur à droite, c’est ce code qu’il vous faudra mettre dans votre CSS.

Encore plus fort, vous voulez un exemple en direct de ce que ça pourrait donner ? cliquez sur « light page exemple » et le site vous génère un exemple de page avec le combo de couleurs que vous venez de choisir !

Une autre façon de définir les couleurs de votre site est de choisir un site qui vous plait, d’aller sur ColorCombos et d’entrer l’url de ce site dans le champs à droite « Grab website colors »
ColorCombos vous génère lors tout la palette de couleurs du site que vous venez de lui donner.

3 – Quelques conseils supplémentaires :

  • N’oubliez pas que votre blog vous représente, ses couleurs doivent vous parler.
  • Ne négligez pas la couleur de vos liens (balise <a>) il faut que les gens soient capable de voir en un coup d’œil si ce bout de texte est un lien ou pas, vous pouvez utiliser pour ça une des couleurs de votre « combo ».
  • Ne mettez pas de pubs criardes, choisissez vos encart, vos bloc adsense en fonction de vos couleurs, à quoi bon travailler votre design pour le gâcher en plaçant trois bannières flashy ?
  • Demandez l’avis de vos amis, des gens du forum de WeD, lorsque vous passez beaucoup de temps à bosser votre design vous pouvez vous perdre un peu, demandez régulièrement des retours, acceptez la critique.

Qu’est-ce que vous pensez de cette méthode ? Est-ce que vous connaissiez ces outils ? N’hésitez pas à nous dire si cette méthode vous a aidé !

Si vous avez besoin de donner un nouveau look à votre blog, d’une couverture pour votre ebook ou autre, n’hésitez pas à contacter Fab sur le forum ou sur NomadeDigital pour un devis gratuit !

(Crédit photo: laffy4k @ flickr)

Click Here to Leave a Comment Below 12 comments
papilloon - 6 years ago

A voir aussi cet article sur le sens des couleurs bien que l’écriture soit peu lisible 😉
http://trinity-advise.com/choix-de-couleurs-pour-mieux-vendre-et-communiquer-sur-le-web/

[Reply]

Reply
Une methode facile en 2 étapes pour bien choisir les couleurs de son blog - Courrier Blog - 6 years ago

[…] Initialement posté ici: Une methode facile en 2 étapes pour bien choisir les couleurs de son blog […]

Reply
Piotr - 6 years ago

Je connaissais la complémentarité des couleurs et les choix stratégiques pour rendre son post visible mais je n’aurai jamais pense qu’il y avait des outils qui permettent d’aider dans cette démarche… je vais tester de ce pas et on verra – peut-être – les changements 😉

[Reply]

Reply
Sébastien - 6 years ago

Très intéressant l’outil: Color Scheme designer.
Je pense avoir respecté la majeur partie de tes astuces sur mon blog.

Merci pour le partage en tout cas 🙂

[Reply]

Reply
Olivier - 6 years ago

en complément:
14 outils pour choisis ses couleurs: http://css4design.com/choisir-sa-palette-de-couleur

[Reply]

Reply
Julien - 6 years ago

Je savais qu’il ne faut pas utiliser plus de 2 ou 3 couleurs. Par contre je découvre Color Scheme Designer. Très pratique !

Merci pour l’info je vais pouvoir retravailler mon design plus facilement.

[Reply]

Reply
Sandrine - 6 years ago

Merci pour toutes ces informations, que je vais étudier de près car cela parait bien simple dans le texte et mon expérience de néophyte me dit qu’en pratique c’est plus délicat, mais je n’hésiterai pas à revenir vous voir sur le forum.
Dans tous les cas j’aime la luminosité qui ressort de ton blog et la police que tu as utilisé 🙂

j’ai bien noté que tout comme la communication verbale notre cerveau ne peut gérer que 4 infos maximum 🙂

[Reply]

Reply
Fab - 6 years ago

Merci pour vos comm 🙂

@Sandrine : merci pour la remarque, je prépare un article sur les typos pour mon site, en espérant motiver des gens à sortir des 3/4 polices classiques qu’on voit partout, il faut oser 😉

Et évidemment si vous avez des questions, il y a le forum, les mails, ou les commentaires sur ce site ou le miens, n’hésitez pas !

[Reply]

Reply
Kris / MyWebBusiness - 6 years ago

Des bon conseils à prendre afin d’optimiser nos blogs. On oublie très souvent que apparence est très importante 😉

[Reply]

Reply
Julien - 6 years ago

Color scheme designer est un outils génial. Cela fait un moment que je l’utilise, et ça aide énormément pour choisir des couleurs harmonieuses.

[Reply]

Reply
Comment les marketeurs influencent notre perception - 6 years ago

[…] dans le blogging, est le choix des couleurs et du thème d’un blog, comme l’explique Fab dans son article. La vision influence notre perception, il faut donc en jouer en marketing. La vue sera le premier […]

Reply
JEANNE - 5 years ago

Bonjour, très bon conseil, merci de le partagé. Car je suis débutante et découvre beaucoup de très bons articles.
Merci encore 🙂

[Reply]

Reply

Leave a Reply:

Pas de commentaire avec des ancres optimisées du style "gagner de l'argent" ou "casino en ligne", merci.