Créer le logo et la charte graphique de mon nouveau blog en 4 étapes

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Créer 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 celà, 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 appellant 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 une référence musicale en appellant 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 synomynes ou les pluriels des termes recherchés, j’ai remarqué que la langue utilisée est un critère extrêmement discriminants 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, jai 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 à venir. 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 spectable, 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 baseline à laquelle vous avez échappé :D

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 ne vous 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 propros, 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 celà 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 :)

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



15 commentaires pour “Créer le logo et la charte graphique de mon nouveau blog en 4 étapes”

  1. Killian dit :

    Super article, très instructif pour la création d’un nouveau logo !

  2. blazouf dit :

    C’est toujours un plaisir de lire ton blog. D’ailleurs tu est le seul (a ma connaissance) qui aborde la question du graphisme d’abord, pour aller vers la technique (CSS) ensuite.

  3. Rémi dit :

    Tout pareil, j’ai bcp aimé cet article, la demarche est bien expliquée, c’est toujours instructif.

    Bien joué également cette prestation de création de blogs… j’aurais eu plus de temps libre je m’y serais surement interessé de plus près, c’est un marché qui a de l’avenir… on s’associe ;) :P

  4. lomig dit :

    Merci pour cet article transparent sur ta démarche, et donc très instructif… Et bravo pour le résultat, qui est excellent je trouve : original, léger et mettant très bien en valeur le texte…! Sinon, petite remarque : je n’ai pas trouvé le bouton du flux RSS sur "notorious blog"…je suis con, ou c’est qu’il est effectivement absent ? :)

  5. Copiteur !! Voleur de marché !! :D Bon, je sens que va falloir qu’on cause business tous les deux.

    Blazouf : c’est que tu ne connais pas le blog ultra concurrent de CSS4Design (attention ceci est une pub à peine visible).

    Lomig : je ne sais pas si Bruno en est arrivé au même point de réflexion que moi, mais je crois que ça y ressemble pas mal : Les non geeks n’ont en gros que très peu l’usage des flux RSS et les geeks savent à quoi correspond l’icone dans la barre d’adresse et savent quoi en faire.

    bruno : ya un truc qui me dérange dans ton design, j’aime bien le logo, mais le reste me donne une impression de "pas fini" (et je m’y connais en designs pas finis ;) ), à la fois trop et pas assez de blanc (les marges de callage des contenus sont amha un peu trop faibles), il me manque quelque chose.

  6. pixenjoy dit :

    C’est toujours très intéressant de découvrir la démarche créative qui a conduit un webdesigner à produire un site web. Cet article est à cet égard très instructif.

    Je trouve ton nom de domaine très bien choisi et Dieu sait si c’est difficile de trouver un nom libre qui corresponde à ces attentes aujourd’hui.

  7. Arkan dit :

    Bon comme je vois on va devoir faire un trio d’associés avec Bruno et Aymeric :p :p

    Sinon bon article Bruno, en effet il y a plein de petites choses bien utiles ;) Personnellement j’aurai fais des tests avec l’étoile remplaçant le point du "i" pour voir ce que cela donnait, là je trouve que ça fait répétition d’éléments dans le même coin mais ça te fait un beau favicon ^^

    La bordure verticale droite tout du long est particulière on ne la retrouve nulle part, je l’aurai surement retiré pour laisser vraiment le texte central "volant", tout en renforçant la présence des divers modules dans les colonnes gauche-droite.

    Mais bon s’pas moi qui l’ai fait (et c’est temps mieux pour le monde :p) et c’est bien loin de ce dont je suis capable dans tous les cas ^^

  8. Killian,

    #blazouf, #Rémi, #lomig { Merci pour vos avis qui me font vraiment plaisir ;) }

    #lomig { Il n’y a effectivement pas de bouton pour les flux RSS ou Atom. Je ne suis pas loin de penser ce que dit Aymeric, mais ma réflexion n’est pas allée jusque là : Notorious Blog est encore en phase de rôdage et pour ce qui est des flux RSS j’envisageais de tester quelques plugins.

    A l’heure où j’écris j’ai opté pour feedSmith qui a l’air pas mal pour rediriger les flux vers feedburner. Je mettrais un lien en haut de la page. Merci pour cette remarque qui me permet de me bouger sur cette question ;) }

    #Aymeric { Ben, vi quoi à force de te lire tu as fini par me convaincre ;) Tu n’est pas le premier à me faire cette remarque sur le design : pour les marges du contenu, tu as raison, je viens d’ajouter 10px de chaque côté.

    En revanche, je me dis que l’impression de "pas finie" (que j’ai aussi parfois) est peut-être due au fait que l’immense majorité des sites ou des blogs sont construits autour d’un rectangle d’empagement bien défini, ce qui manque peut-être dans mon cas. Je garde ta remarque au chaud en attendant de lire d’autres avis sur cette question.

    Pour les flux RSS, je suis de ton avis, mais en même temps, je crois qu’il est nécessaire de faire un peu de pédagogie surtout lorsqu’on veut s’adresser à un public composé en partie de professionnels et de chefs d’entreprise. } #pixenjoy { Merci, parce que j’ai passé du temps pour trouver ce nom de domaine et quand j’ai vu que le .com était déjà pris, j’ai eu chaud. (Bon, en même temps seul le .fr m’intéressait vraiment). }

  9. burningHat dit :

    "Une idée en appellant une autre, j’ai eu l’image du concept Nouvelle Star dont je suis fan depuis le début. [snip] et une référence musicale en appellant une autre, j’avais trouvé le nom : notorious blog."

    Je serais curieux de savoir comment on peut passer de la Nouvelle Star à un rappeur mort quand même… c’est fou ce que les chemins de l’esprit peuvent être tortueux ;)

    Excellent article comme toujours ceci dit ! ;)

  10. Neovov dit :

    Vraiment magnifique le logo, et expliquer la démarche c’est tout simplement génial (sauf que des illustrations des tatonnements aurait été un plus, j’y connais rien en typo et montrer ce que ça donnait avec d’autre ça aurait peut-être fait un peu plus comprendre).

    Par contre le reste du design est un peu light à mon gout, l’ensemble fait fade alors que le logo pétille de couleurs, retrouver plein de rose et d’orange aurait fait quelque chose de très fresh comme le logo (enfin, c’est mon avis, et je suis loin d’être un designer).

    Très bon boulot, très bon billet ;) !

  11. Neovov, j’ai essayé de réparer l’oubli des étapes rajoutant un visuel dans le billet ;)

    burningHat > hé hé oui, c’est curieux, on va dire que c’est le délire de l’artiste (n’y voyons pas le fantasme de l’homme :D )

  12. Neovov dit :

    Beaucoup mieux :) (et ça me dégoute encore plus, le talent ça ne me connait pas :D)

  13. fredmac dit :

    Vraiment très bon, très didactique… et le rajout des visuels… c’est la cerise sur le gateau.

  14. Anonyme dit :

    4 tapes pour crer le logo et la charte graphique d’un blog…

    Plus qu’un tutoriel pas pas sur la conception d’un logo dans un logiciel comme illustrator, je vous livre les tapes qui mnent de lenvie lide, jusqu la ralisation finale….

  15. Bruno Bichet dit :

    @dreamz > le nombre de branche sur une étoile et leur signification est une bonne question… J’avoue que je ne me la suis jamais posé : pour moi l’étoile standard à 5 branches mais après avoir fait quelques recherche suite à ta question, j’ai découvert qu’en fait, une étoile pouvait avoir un nombre indéfini de branche.

    Quand à la signification associé au nombre de branche, je suis tombé sur ce fil de discussion sur l’étoile de shériff : http://www.col.fr/forum/topic.asp?TOPIC_ID=12818 ou encore sur la symbolique de l’étoile à 7 branches : http://www.insolite.asso.fr/plateforme/OT-001.htm ou encore la construction d’une étoile à 5 branches à partir d’un pentagramme : http://villemin.gerard.free.fr/Wwwgvmm/Geometri/CinqEtoi.htm

    Sans parler de l’étoile de David (http://fr.wikipedia.org/wiki/%C3%89toile_de_David) et son détournement par les nazis pendant la seconde guerre mondiale (http://fr.wikipedia.org/wiki/%C3%89toile_jaune).

    Bref, à part la croix, je ne crois pas qu’il existe d’autres symboles graphiques aussi chargé de « symbolique » que l’étoile.



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site