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)