Créer la charte graphique de votre blog en 3 étapes

Il est important dès la création de votre blog de penser à poser la charte graphique de votre blog, cela se passe en 3 étapes simples.

Depuis le temps que je surfe sur Internet j’en ai vu passé des sites et des blogs. Il existe un élément essentiel qui peut faire fuir vos visiteurs uniques c’est le look de votre blog. Vous n’aurez pas une seconde chance de faire une bonne première impression !

Je vous donne 3 astuces dans cet article pour que vos primo visiteurs restent plus de 7 secondes sur votre blog.

Imaginez les 3 couleurs principales de votre blog

En effet 3 couleurs c’est le maximum que je vous recommande pour un site ou un blog. Comme pour les vêtements d’ailleurs, lorsque vous croisez quelqu’un avec des chaussures blanches, un jean bleu, une chemise verte, un gilet gris et une veste marron, c’est pas

Dans le monde l’impression papier, si vous devez donner vos composantes de couleurs à un imprimeur, ce dernier attend du CMJN, Cyan, Magenta, Jaune, Noir. C’est bien de les connaître si vous devez imprimer des flyers ou des plaquettes comemrciales.

Dans le monde du web vous avez besoin de composantes RVB ou Hexadécimal. RVB pour Rouge, Vert et Bleu, ce sont les normes d’affichage correspondantes aux écrans comme vous vous rappeler peut-être les télévisions à tubes cathodiques, eh bien pour votre écran d’ordinateur c’est pareil, c’est avec du rouge, du vert et du bleu qu’on affiche vos images. Il me semble que désormais dans les écrans à LED de nouvelle génération ils ont ajouté le jaune.

L’hexadécimal, c’est le code couleur accepté par les standards du web définis par le W3C. Ce code commence par un #, puis 6 lettres et chiffres mélangés.

Voici ci-dessous une copie d’écran Photoshop qui vous montre qu’une couleur peut être exprimée en RVB, CMJN et Hexa.

Pour vous donner un exemple concret voici les couleurs de JeCommenceABloguer.fr

• Le ROUGE: R=237, V=0, B=0 | C=0, M=100, J=100 ,N=0 | Hexa #ED1C24
• Le GRIS:  R=88, V=89, B=91 | C=0, M=0, J=0, N=80 | Hexa #58595B
• La troisième couleur dominante est le blanc ! R255, V255, B255 | C0, M0, J0, N0 | Hexa #FFFFFF

Une fois que vous avez trouvé couleurs idéales de votre charte graphique, notez les de manière à les avoir sous le coude en permanence car vous en aurez souvent besoin. Et puis au fur et à mesure vous vous rendrez compte que ce sont les codes hexa les plus utilisés et vous finirez par les connaître par coeur

Imaginez vos typos ou plus communément appelées police de caractère

Idem que pour les couleurs, pas plus de trois polices, moi j’en utilise que 2, ELEGANCE pour les titres et Georgia pour les textes du blog.

Faites des essais sur une seule page pour choisir vos polices, ça vous permet de les comparer.

! ATTENTION AUX POLICES DU WEB !

Sur votre ordinateur, dans Photoshop, PowerPoint, Word, Illustrator, vous pouvez utiliser des milliers de typos ou polices à partir du moment ou elles sont installées sur votre ordinateur. Sur le web c’est différent ! Toutes les polices ne sont pas « interprétées » par les navigateurs web. Chrome, Safari, FireFox, IE ne savent lire qu’une quantité limitée de polices. Je vous ai fait un copie d’écran de Dreamweaver, un éditeur HTML très puissant qui propose une liste pas défaut, je vous conseille de ne pas vous en écarter.

Pourquoi je vous dis ça, parce que s’il vous passe par l’esprit de faire des logos en texte dans un logiciel installé sur votre ordinateur, vous n’obtenez pas le même résultat une fois sur Internet parce que le police n’est pas reconnu par le navigateur !

Comment connaître les composantes de couleurs ?

Un peu plus haut vous avez une copie d’écran de Photoshop et maintenant je vous monte une vision dans GIMP pour sélectionner vos couleurs et noter vos composantes:

Si vous voulez aller plus loin vous pouvez être très précis, pourquoi pas créer votre propre police de caractère, définir les espaces et la mise en forme exacte de chaque éléments, etc. Les points abordés ci-dessus sont les facteurs minimum à envisager pour votre blog.

Ressources extérieures

• Wikipedia : http://fr.wikipedia.org/wiki/Charte_graphique
• ICP : Vous trouvez une couleur qui plaît sur votre écran, capturez là ! Télécharger ICP

Si vous avez besoin de précisions, laissez vos commentaires en-dessous

Tagged as: charte graphique, cmjn, couleurs, création visuelle, eDesign, graphisme, hexadécimal, logo, rvb, visuel