Le logo et la charte graphique de mon nouveau blog en 4 étapes

J’ai déjà eu l’occasion de dire quelques mots sur la conception d’une charte graphique. Les 3 étapes évoquées alors étaient forcément réductrices… Plus qu’un billet sur le graphisme, il s’agissait d’une part de montrer comment la théorie peut s’articuler avec la pratique, et d’autre part, d’expliciter une méthode d’organisation. Aujourd’hui, je profite de la mise en place progressive de mon nouveau blog sur les blogs, les blogueurs, la blogosphère, le blogging, le microblogging, le moblogging (rien de sanglant, rassurez-vous) et la création de blogs événementiels, pour mettre la théorie en pratique. Après le teasing qui a débuté avec la chaîne Kawa-Yaka, je vous livre les étapes qui mènent de l’envie à l’idée, jusqu’à la réalisation finale.

Etape I L’idée

Depuis quelques mois, j’ai envie de créer un nouveau blog à côté de celui-ci pour séparer les sujets liés au développement web de ceux relatifs au blogging en général : écrire sur l’actualité des blogs me démange parfois, alors je vais gratter un p’tit peu… Par ailleurs, j’ai envie d’ajouter une dimension marketing, communication et web 2.0 à mes activités « traditionnelles » d’infographiste PAO, d’intégrateur HTML & CSS et de formateur en création de site web. Pour cela, rien ne vaut le lancement en fanfare d’un nouveau blog 😉

Trouver le bon positionnement dans un marché en pleine expansion

Pour élaborer mon cahier des charges, j’ai fait un petit tour de réseau pour me faire une idée des pratiques en matière de création de blogs d’entreprise — et pas uniquement pour copier !

Certains prestataires se contentent de placer le logo du client à gauche, au centre, ou soyons fous : à droite, le tout dans les tons gris-clairs, gris-foncés… ou bleus ! Un blog, oui ! A condition qu’il ressemble à un site web 1.0… A l’autre extrémité, d’autres font du sur-mesure, allant même jusqu’à la rédaction du contenu et l’animation du blog.

Reste à se positionner entre les deux comme le font la plupart des prestataires du secteur qui adaptent ou créent une charte graphique pour la découper ensuite en fonction des différentes pages composant un blog. Pour ma part, je compte m’adresser aux entreprises innovantes et dynamiques qui veulent bloguer différemment : celles qui veulent un blog sans complexe et sans tabou, prêtes à s’impliquer dans le contenu pour obtenir un bon retour sur investissement en grignotant des places dans les premiers résultats naturels sur Google.

Etapes II Trouver le nom du blog et une baseline

La plupart du temps la dénomination du logo est fournie par le client, et c’est bien le moins lorsqu’on ne travaille pas dans une agence de communication spécialisée dans le trouvage de nom. Etant moi-même le briffeur et le briffé, j’ai progressé de l’ombre vers la lumière par touches successives.

«L’art naît de contrainte, vit de lutte, meurt de liberté.»

Placer le terme blog dans la dénomination est apparu comme une évidence (d’autant plus que je compte proposer des prestations en création de blog d’entreprise). Chouette ! une contrainte sur laquelle appuyer la réflexion. Je voulais ensuite accoler un deuxième terme en relation avec le monde de l’entreprise avant ou après « blog ». Mais les clés pour obtenir un bon positionnement sur la requête blog dans les premières pages de Google ont été perdues depuis belle lurette ! Alors si en plus j’ajoute la notion de business……

Quoique. Aussi solide soit-elle aucune position n’est indéboulonnable si on a la Force avec soi (JE SUIS TON PR…). Armé de cette seule conviction, je décidais de trouver un nom de domaine qui claque. Du coup, j’ai passé pas mal de temps dessus…

Armé cette fois d’un stylo-bille bon marché, j’ai gribouillé quelques mots dont il ressort que le deuxième terme accolé avant ou après blog pourrait évoquer un univers lumineux, une ambiance festive qui donne envie de bouger. Comme une envie d’être sur scène. Voilà l’idée.

La chance est un paramètre à ne pas négliger, même si par nature on ne peut pas trop compter dessus. Il se trouve que cette idée d’être sur la scène me vient d’un sous-titre lu sur Feedburner : We’re live and on the scene! que j’ai transmuter en Maintenant, vous êtes sur scène !

Une idée en appelant une autre, j’ai eu l’image du concept Nouvelle Star dont je suis fan depuis le début. Et là, le mot notoriété m’est venue à l’esprit. Je l’ai trituré dans tous les sens et d’une référence musicale à une autre, j’avais trouvé le nom : Notorious Blog.

Restait le choix cornélien de la séparation (ou pas) des termes dans le nom de domaine. Mais maintenant, vous devez connaitre la réponse 😉

Pour le référencement, il est généralement recommandé de séparer les mots présents dans le nom de domaine par un tiret. Dans notorious blog les deux termes sont anglo-saxons. Si les capacités de Google vont jusqu’à reconnaitre les synonymes ou les pluriels des termes recherchés, j’ai remarqué que la langue utilisée est un critère extrêmement discriminant pour les résultats à venir : n’ayant que très peu de chance d’être bien positionné sur le seul mot blog d’une part, et sachant qu’une présence sur la recherche concernant notorious ne pourrait que décevoir l’internaute, j’ai accroché les deux termes.

Je laisse ainsi la majeure partie du travail de référencement et de positionnement aux balises title et description. C’est le prix à payer pour un nom de domaine qui sorte un peu de l’ordinaire. Sachant que de toute manière le référencement, c’est beaucoup d’travail (comme pour un album d’Astérix), il me suffira de travailler un peu plus vite, et la musique de Stupeflip devrait m’aider dans cette tâche 😉

Etapes III Quelques notes sur les étapes de la création du logo

Maintenant que j’ai la dénomination notorious blog! accompagné de Maintenant, vous êtes sur scène, il me reste la partie plaisante du travail : ouvrir Illustrator et saisir tout ça en Helvetica pour commencer, histoire d’avoir une première impression neutre (amis de la Suisse ^__^ ). En revanche, le choix du logiciel n’est pas neutre et influe considérablement sur les recherches graphiques. Je l’ai remarqué chez moi, mais aussi chez d’autres graphistes. Et puis d’abord, on ne fait pas un logo avec Photoshop ! Un bon logo doit rester efficace en noir et blanc et en niveaux de gris pour s’adapter à tout les supports et à tout les budgets. Mais surtout, il doit pouvoir être redimensionné sans perte d’information.

Choix typographique

Avec le temps je me suis fait une typothèque assez importante dont je suis loin d’utiliser toutes les ressources. Parmi les typos que j’affectionne particulièrement, il y a Akzidenz Grotesk, Rotis sans serif, Rotis serif, Helvetica Neue, Eurostile, Formata, Franklin Gothic, Frutiger, Univers, Futura, Insignia, Avenir et Barmeno. Vous pouvez le constater je suis typographiquement Suisse, au point où je me demande si je ne vais pas demander la nationalité 😉

Petite parenthèse sur la culture typo :

‘l’est pas mal ta typo, ‘s’appelle comment ?

Heu.. J’sais plus… DaFont ?

DaFont… Arrgh!, ‘l’est belle la culture typo à l’école…

C’est pas d’ma faute-teu… (sur l’air de Moi Lolita repris par Julien Doré, bien sûr)

Cette digression sur (l’absence de) la culture typo en générale étant terminée, je reprends le fil sur le choix de la typo pour mon logo. And the winner is… Barmeno, qui a gagné le droit d’habiller notorious blog! en version Regular et Bold. Cette typo est sobre tout en gardant un air de fête, et le léger arrondi des lettres est « nature » et accessible. Pour le slogan, je voulais une fonte girlie. Par ailleurs, à force de penser à la Nouvelle Star, je me suis dit qu’il fallait absolument que je place une étoile dans le logo.

Symbolique

La symbolique de l’étoile englobe l’univers du spectacle, Hollywood, la scène, le classement, la chance, le succès, mais aussi le petit prince, la nuit, l’inconnu… Même si les connotations positives l’emportent, je voulais ajouter un symbole positif pour écarter toute ambiguïté. C’est là qu’est apparu le point d’exclamation qui a pris assez rapidement la place du o de blog.

Choix typographique, le retour

Tout à mon point d’exclamation, J’avais laissé de côté la baseline girlie. Après avoir passé en revue plus de 500 typos en vain, j’avais lâché prise. Et j’ai bien fait, car en cherchant parmi mes typos de symboles, j’ai déniché LA police de caractère pour habiller Maintenant, vous êtes sur scène… Tada… Il s’agit de Giddyup Std qui correspond exactement à l’idée de j’avais en tête : une typo féminine, pas trop penchée et parfaitement lisible !

Couleurs et falbalas

Pour les couleurs, je me suis laissé porté par l’air du temps : rose (magenta), orange et vert. Non, pas le vert finalement, une troisième couleur dans le logo serait de trop. Je l’utiliserais probablement ailleurs dans la charte graphique. Un logo doit garder une certaine distinction pour ne pas lasser.

Tout naturellement, le rose est venu se coller à notorious tandis que l’orange s’est frotté à blog. C’est pas trop mal, mais ça manque de relief. Je voudrais quelque chose de plus gorgeous sans pour autant tomber dans la facilité des logos ombrés, web 2.0, effet miroir, toussa… (c’est fou, les contraintes qu’on peut se fixer soi-même en l’absence d’un client exigeant). Je voulais surtout que le logo reste sexy. Enfin, l’idée que je me fais du sexy : simplicité, harmonie et pas trop de maquillage.

Je reprends donc le processus de prise de notes non-structurées autour de l’idée de « scène » quand la phrase être sous les projecteurs me viens à l’esprit. Pas mal, me dis-je. Je gribouille quelques ovales de projecteurs. Je fais attention toutefois à ne pas pousser la métaphore trop loin : je veux que cette idée soit rappellée subtilement dans le logo.

Quelques essais après, je me dis que, finalement, les projecteurs sont une fausse bonne idée. C’est trop. En plus, à y regarder de près, je trouve la barre du point d’exclamation trop haute, trop présente. Je pourrais utiliser les ovales des projecteurs pour adoucir l’ensemble et avoir mon relief en prime. Pour celà, je dessine quelques ronds sur le logo en leur appliquand un effet de transparence doublé d’un mode de fusion (Illustrator est magique, je vous dis).

Mise à jour du 07/09/2007 : à la demande de neovov, je rajoute un visuel retraçant quelques étapes de la création du logo. La prochaine fois je garderai plus d’esquisses pour illustrer un éventuel billet 😉

En même temps vous pouvez voir une des baselines à laquelle vous avez échappé 😀

Etapes IV Déclinaison du logo en charte graphique

Le résultat me convient : il n’y a rien à ajouter et rien à retrancher. Les couleurs sont moins plates et je n’ai pas utilisé de dégradés. Jusqu’à présent, je n’ai parlé que du logo alors que je travaille en parallèle sur les autres éléments de la maquette.

Placer le logo au centre évoque la franchise, la simplicité. Les yeux dans les yeux. C’est direct. Pour les mêmes raisons, je voulais utiliser un fond blanc en évitant de mettre un cadre autour de la « page ». Un peu de respiration ne fait pas de mal. Le principe que j’ai retenu est le mélange de formes plutôt organiques pour le header et le footer, tandis que la zone principale est un peu plus structurée avec deux barres latérales qui accueillent à gauche les liens internes (catégories, Archive, etc.) et à droite les liens externes (blogroll, partenaires, etc.).

L’addition, s’il vous plait !

Le question de la largeur du design a été réglée assez rapidement. Je suis parti de la largeur du contenu principal. Il existe un nombre de mots optimum par ligne et ce nombre dépend de quelques paramètres comme le sujet (le vocabulaire médicale ou juridique est composé de mots plus longs que la moyenne) et le style de l’auteur (certaines tournures de phrase ont besoin de plus d’espace pour prendre de l’élan).

A ce propos, je me suis rendu compte d’une chose assez amusante : je commence généralement mes billets sur un post-it très étroit qui me permet de prendre des notes tout en surfant, puis je continue dans la zone de saisie de DotClear qui prend pratiquement toute la largeur de l’écran. Résultat ? Les phrases n’ont pas du tout la même structure ni le même nombre de mots selon la largeur de la zone de saisie !

Il faut aussi considérer la taille du texte qui influe sur le nombre de mots par ligne. Je veux une taille généreuse. Tout cela donne une largeur d’environ 550 pixels. Pour les barres latérales, j’ai pris quelques exemples de nom de rubriques composées de plusieurs termes et je suis arrivé à une largeur de 200 pixels pour la colonne de gauche et environ 190 pixels pour la droite, sachant qu’il faut retrancher une vingtaine de pixel pour avoir des marges correctes. Soit une largeur totale de 960 pixels.

Conclusion express : vous reprendrez bien un peu de blanc ?

Même si j’ai ciblé les utilisateurs possédant une résolution de 1024×768, je me suis quand même arrangé pour que la colonne de gauche et le texte principal restent lisibles en 800×600 : cette largeur de 960 pixels permet d’avoir des marges généreuses et du blanc à revendre. Car au final un design doit être au service d’une cause. Reste à savoir laquelle ! Ici, il s’agit de mettre le texte en valeur et de faire une place de choix au logo censé contenir toutes les promesses d’Amour, de Gloire et de Beauté que nous recherchons pour nos blogs 🙂