Visite guidée dans le guide stylistique de Mark Boulton pour le redesign du site web Drupal.org

Je vous propose une visite guidée dans le guide stylistique réalisé par Mark Boulton chargé du redesign du site Drupal.org. Ce guide est un petit bijou de concision tout en étant très complet. On y trouve trois parties principales : Langage visuel, Editorial et Prototype.

Langage visuel

La partie visuelle est la plus importante. Elle regroupe les informations liées à la marque, au logo, aux couleurs, aux choix typographiques, à la grille de mise en page, à la navigation sur le site, au traitement des images, aux formats publicitaires et à leurs emplacements, aux icônes ainsi qu’aux styles de mise en forme spécifiques pour les tableaux ou les formulaires.

Marque

Il est toujours utile de rappeler ce qui fait la spécificité de l’entreprise qui fait appel à vos services.  Les éléments mis en avant par l’entreprise sur elle-même sont un bon point de départ, mais il ne faut pas oublier de décrire précisément les produit ou les services qu’elle propose. Par ailleurs, un résumé des motivations qui pousse l’entreprise à (re)faire un site web est très utile. Cette partie se rédige idéalement en tout début de projet pour servir de garde-fou à votre imagination fertile.

Logo

Affichez le logo avec les éléments indispensables à son bon fonctionnement : marges mini et maxi, tailles, couleurs, version noir et blanc ou en niveau de gris, etc. Sans oublier les conseils comme : ne pas encadrer ou ne pas souligner le logo, par exemple. Il est utile de rappeler qu’il faut partir de la version originale du logo plutôt que de modifier la taille d’une version déjà en ligne. A cet égard, rappelez également le format png, gif ou jpg choisi avec le taux de compression ou d’échantillonnage approprié.

Couleur

Donnez un échantillon des couleurs utilisées dans le site en indiquant les valeurs RVB et Hexadécimales. Si les couleurs font partie des couleurs nommées en HTML, précisez-le. Dans le cas contraire, donnez un nom à chaque couleur pour faciliter la communication entre les différentes personnes susceptibles d’intervenir sur le site. Vous pouvez également enregistrer votre palette de couleur et fournir des palettes au format Photoshop ou Illustrator.

Typographie

Affichez un échantillon des polices de caractère que vous avez choisies selon les éléments HTML : niveaux de titre h1, h2, etc., paragraphes p, les liens a (survolés a:hover, visités a:visited, etc.), les listes (ordonnées ol, non-ordonnées ul, de définition dl). Ainsi que tout autre élément susceptible d’être utilisé. Affichez la typographie sous forme d’images au cas où la fonte en question ne serait pas disponible sur le poste de l’utilisateur.

Grille

Tout le monde ne travaille pas avec une grille de mise en page, mais si c’est le cas, affichez la grille en indiquant les valeurs retenues pour les colonnes, les gouttières et la largeur totale du design. Indiquez également les regroupements de colonnes prévus et donnez quelques exemples d’utilisation en surimpression avec la grille en arrière-plan.

Navigation

Indiquez les différentes solutions visuelles retenues pour la naviguation à l’intérieur du site : navigation principale (ex. les catégories), navigation secondaires (ex. les tags), les liens dans le pied de page avec des exemples de mise en forme pour chaque élément.

Images

Donnez des exemples d’utilisation des images en fonction du nombre de colonnes et des différentes manières de les habiller selon le texte et le contexte lorsque : l’image occupe toute la largeur d’une colonne ou d’un regroupement de colonnes ; des marges la séparent des bords ; l’image est habillée à droite ou à gauche ; un titre se trouve au-dessus, etc. Pensez à tous les cas de figure.

Publicités

Les formats publicitaires sont un peu le tue-l’amour du design web. Et pourtant, pour nombre de sites web, c’est le nerf de la guerre. Sans aller jusqu’à définir le pas de votre grille en fonction des formats les plus courants, il est important de préciser où et comment la publicité peut s’intégrer dans la mise en page.

Fournitures diverses

Regroupez ici les éléments visuels utilisés dans le site : icônes, boutons, mais aussi les styles spécifiques pour la mise en forme des tableaux, l’affichage de commentaires, les formulaires, etc. Si les icônes et les boutons sont très nombreux, n’hésitez pas à créer une rubrique spécifique pour les styles particuliers pour ne pas surcharger cette section.

Editorial

Après la charge graphique au complet, la charte éditoriale est un éléments primordiale : c’est elle qui servira de guide pour que les différents intervenants puissent faire vivre le site web en employant des conventions communes pour que le discours ne s’éparpille pas lorsque les rédacteurs sont nombreux.

Notez que même si vous êtes l’unique rédacteur de votre site, mettre votre charte éditoriale noir sur blanc n’est pas une perte de temps, bien au contraire !

Qu’est-ce qu’une charte rédactionnelle ?

La charte rédactionnelle (ou charte éditoriale) est un document qui définit un style particulier de rédaction, en relation avec l’image de l’entreprise ou d’un produit. Plus précisément, la charte rédactionnelle peut formaliser et fixer des principes d’écriture :

• Rédaction des titres (long, court, informatif, accrocheur, laconique, comique),
• Style d’écriture (impliquer le lecteur, écrire à la 1re personne du singulier, à la 2ème personne du pluriel)
• Nombre de mots optimum par billet et par paragraphe,
• Illustration des billets (photos, dessin, graphique),
• Comment citer l’entreprise et ses produits dans les liens hypertextes, ainsi que les collaborateurs, les marques déposées, les concurrents, etc.,
• Déterminer la liste des mots interdits (dans le milieu médical, par exemple).

Les plus courageux d’entre vous se plongeront dans le Guide stylistique de la CFP dont la version PDF pèse pas moins de 165 ko !

Prototype

La partie Prototype liste toutes les pages du site et donne pour chacune d’elle un exemple de mise en place de la charte graphique en terme de fonctionnalités. Cet exemple est réalisé en HTML / CSS pour donner une idée aussi proche que possible de la version finale si les prototypes en question étaient retenus par le client.

En guise de conclusion

La mise en place d’une charte graphique et éditoriale est assez chronophage, c’est pourquoi elle est souvent réservée aux projets importants. Mais sa rédaction tout au long de la phase de conception peut s’avérer une aide précieuse pour éviter la dispersion et formaliser les choix créatifs au fur et à mesure de leur cristallisation.

CSS Color Editor propose plusieurs modes colorimétriques pour le choix des couleurs de remplacement : hexadécimal, RGB, CMYK et HSV ainsi que la sélection libre avec la souris.

Modifiez complètement les couleurs de votre site web avec CSS Color Editor.

Dans les faits, ce principe de proximité est relativement simple à mettre en oeuvre : il suffit d’augmenter ou de diminuer la « distance » entre deux ensembles pour que l’utilisateur identifie rapidement les zones principales à parcourir, le faisant passer du statut de « visiteur » à celui de « lecteur ».

Cette notion de proximité est tellement évidente que nous sommes tous plus ou moins experts en « principe de proximité ». Nous apprenons au cours de notre scolarité à rassembler nos idées et à les structurer en parties et sous-parties avec une introduction pour commencer et une conclusion pour finir. Dans le cas d’une dissertation, la « distance » entre deux idées sera souvent exprimée par la longueur de la transition entre deux paragraphes.

Mettez des distances …

En ce qui concerne la composition graphique, nous disposons de plusieurs techniques pour exprimer cette « distance » :

• Ajouter ou retrancher de l’espace,
• Changer la police de caractère ou les styles typographiques,
• Jouer sur les couleurs, les contrastes, les fonds, les textures, etc.
• Augmenter ou diminuer la taille des blocs ou des éléments qu’ils contiennent,
• Utiliser des filets, des bordures ou des cadres,
• Indenter certaines parties du contenu ou décaler les blocs,
• Combiner ces différentes techniques.

… et n’ayez pas peur du blanc.

Pour parvenir à exprimer la distance entre plusieurs ensembles, il ne faut pas avoir peur d’user et d’abuser de l’espace blanc. Il ne coûte pas cher à produire, mais se fait curieusement plus rare à mesure que le talent du Webdesigner diminue. Une composition graphique doit respirer pour vivre ! Inutile donc de disperser les éléments du design comme s’il ne devait plus rester un seul espace vide.

Notez que ce qu’on appelle l’espace blanc n’est pas nécessairement blanc. Il s’agit de n’importe quel espace non rempli, indépendamment de la couleur du fond, fut-ce un dégradé.

Pour regrouper visuellement les élément liés entre eux …

Une profusion d’espace blanc ne garantit pas la lisibilité. Si les éléments d’une adresse postale sont dispersés au quatre coins de la page, il faudra du temps au lecteur pour réunir les informations, à supposer qu’il fasse le lien entre eux.

Au sein d’un même espace, il faudra veiller à utiliser du blanc pour hiérarchiser l’information. Ces micro espaces blancs devront idéalement être en rapport avec les macros espaces blancs qui circulent entre les blocs.

… utilisez les grilles de mise en page …

L’avantage d’utiliser une grille pour structurer une mise en page, c’est de pouvoir compter sur une gamme d’espaces blancs cohérents composés des colonnes et des gouttières. Les grilles permettent de tester rapidement différentes maquettes en laissant plus ou moins de colonnes entre les différentes parties de la page pour exprimer la distance sémantique qui les sépare.

Pour ce faire, il est important que le pas de la grille soit aussi fin que le nombre d’éléments le nécessite. Si les contenus présentent de nombreuses différences et/ou s’il existe des niveaux hiérarchiques en pagaille, il faudra un nombre de colonnes assez conséquent, ou utiliser une partie des éléments cités plus haut pour mettre de l’ordre.

… pour guider le visiteur dans la page …

Le principe de proximité est au service de la lisibilité, elle-même au service de l’action. Le groupement des éléments dans des ensembles, eux-même rassemblés dans des blocs permettra de montrer le chemin à suivre.

… vers le contenu approprié.

Tout les éléments abordés jusqu’ici n’ont finalement qu’un seul but :  permettre au visiteur d’optimiser sa navigation au sein du contenu pour qu’il trouve ce qu’il cherche le plus rapidement possible ou, le cas échéant, qu’il s’aperçoive vite que ce qu’il cherche ne s’y trouve pas. Plus vite il quittera votre site et moins il vous en voudra. Il est même capable de revenir plus tard ;)

Linkographie

En français

• Langage visuel: la Gestalt
• Les principes du design
• Quelques notes sur la conception d’une charte graphique
• Induire un comportement visuel avec la gestalt : principe de proximité

En anglais

• Design Basics: The Proximity Principle
• How C.R.A.P. Is Your Site Design?
• Using Grouping in Web Page Layouts
• Whitespace
• The Language of Design
• The Principles of Design
• Gestalt

Billet inspiré par The Principle of Proximity in Web Design écrit par Louis Lazaris pour Webdesigner Depot.

La couleur ? Longtemps elle a semblé échapper à toute appréhension, son caractère « accidentel » a découragé toute science. Sur elle on ne pouvait fonder un art. D’où la prééminence du dessin. Puis Newton établit que la lumière blanche n’est pas homogène mais composée. A sa suite, Buffon puis Goethe font leur place aux couleurs d’origine physiologique qu’ils rapportaient à l’oeil percevant. Les années 1840 marquent, elles, le grand tournant dont nous demeuront les héritiers : Chevreul, savant chimiste, remet en question les rapports admis de l’oeil avec l’objet perçu. Il établit la loi générale qui régit la perception des rapports entre couleurs contiguës. Une revalorisation de la couleur s’ensuivit qui a excercé une influence considérable sur plusieurs générations de peintres : Delacroix, les impressionnistes, Van Gogh, Gauguin, Seurat, Signac, les symbolistes, les futuristes et Delaunay. Le changement de paradigme ouvre sur la conquête des voies propres de la couleur qui conduiront la peinture jusqu’à l’abstraction.

Art et science de la couleur. Chevreul et les peintres, de Delacroix à l’abstraction. Edition revue et augmentée. George Roque. Gallimard, Collection Tel. 2009.

1. Toucan Color Palettes

Toucan fait partie des outils de création et d’édition en ligne proposés par Aviary. Vous pourrez très facilement créer vos palettes de couleur et les sauvegarder. Il est possible de lier Aviary à son compte Flickr pour piocher des couleurs dans votre stock de photos. Cerise sur le gâteau, il est possible de visualiser une palette de couleurs selon différentes affections de la vision telles que : protanopy, protanomaly, deutéranopy, deutéranomaly, tritanopy, tritanomaly, achromatopsy ou achromatomaly. Pratique pour s’assurer que les informations véhiculées par les couleurs seront accessibles pour tous !

2. kuler

L’outil indispensable pour chercher l’inspiration ou créer votre palette de couleur à partir de couleurs choisies d’après un nuancier (analogique, monochromatique, triade, complémentaire) ou en fonction de différentes teintes ou saturation. Des curseurs interactifs vous permettront d’affiner les choix initiaux en toute liberté selon votre intuition ou vos savants calculs quelque soit le mode colorimétrique de base : HVS, RGB, CMYK, LAB, HEX

Il est également possible de déterminer une palette de couleur d’après une image que vous aurez téléchargée depuis votre poste de travail ou depuis le meilleur site de photo au monde : flickr. Vous obtiendrez une palette de couleur que vous pourrez modifier en faisant varier les points chauds de l’image en question au cas où les couleurs par défaut passeraient à côté d’une couleur significative de l’image. Vous pourrez également faire varier les couleurs par défaut selon six modes prédéfinis.

3. ColorSuckr

Créé par Paul Burgess, ColorSuckr génère votre palette de couleur à partir du profil chromatique de votre image une fois que vous aurez indiqué son URL. Il est également possible de choisir une palette d’après une photo présente sur flickr en précisant un mot-clé. L’originalité vient du fait que l’on peut — pour chaque dominante de couleur — afficher les palettes de couleur déjà créées sur COLOURlovers. C’est un excellent exemple de mashup dans la pure tradition du web 2.0 !

4. colourlovers

COLOURlovers est un générateur de palettes qui prend la température de ce qui se fait de mieux en terme de nuanciers à travers le monde autant qu’il influe sur les tendances à venir. COLOURlovers permet à chacun (publicitaire, designer, graphiste, architecte, etc.) de chercher parmi des centaines de nuanciers, de les comparer entre eux et de se tenir au courant de ce qui se passe dans le milieu de la couleur, le tout en version française !

5. Pictaculous

L’originalité de cet outil est d’être compatible avec votre iphone : prenez une photo depuis votre appareil, envoyez-là à l’adresse colors@mailchimp.com et patientez pour la réponse !

6. Color Palette Generator

Pour commencer, choisissez une couleur en utilisant le sélectionneur de couleur, et une palette composée d’un camaïeu de 6 couleurs sera calculée automatiquement. Ce site comblera les fanas de couleurs grâce à la possibilité de sauvegarder des sets de couleurs aux formats Photoshop et Illutrator ! Voire de se faire envoyer les camaïeu par email !

7. colr

Dans le même esprit que Color Palette Generator le site extrait les couleurs d’une photo et propose une fonction « schemes » qui propose un dégradé selon les couleurs trouvées. Notez que si les couleurs ne vous conviennent pas, vous pourrez cliquer à nouveau pour avoir une autre proposition. Il est possible de tagger les couleurs et d’effectuer des recherches par tag ce qui s’avère très pratique quand on cherche une couleur par association d’idée.

8. Color Blender d’Eric Meyer

Un peu plus frustre d’apparence, mais néanmoins très utile. Voir ma petite note sur ce Color Blender pour une traduction du mode d’emploi.

9. colorschemer

Comme les autres, ce site permet de définir une palette de couleur mais se distingue en offrant l’utilitaire ColorPix pour prélever les couleurs visibles à l’écran. Le zoom va jusqu’à 2800% ce qui devrait suffire. L’application peut se lancer au démarrage et une option permet de placer la fenêtre au premier-plan ou la réduire dans la barre des tâches. En appuyant sur une touche, la couleurs sélectionnée est verrouillée. Redémarrez si cette fonction ne marche pas.

10. COLOROTATE

Colorotate offre une belle interface (bien qu’un peu confuse au premier abord) pour créer, mixer, mélanger les couleurs pour obtenir de palettes de couleurs. Le plus de Colorotate est d’afficher les palettes selon plusieurs types de déficiences visuelles.

11. Colorjack Studio

Je n’ai pas vraiment été convaincu par l’ergonomie et le look and feel de Colorjack Studio, mais qui sait, peut-être trouvera-t-il son public. En revanche, vous serez peut-être intéressés par les autres outils disponibles sur le site, comme Color Galaxy et Color Sphere.

12. Daily Color Scheme

Tous les jours une ressource colorée sous la forme d’une palette de couleur à télécharger pour Photoshop, Illustrator, etc. mais aussi sous forme de fichier CSS ou HTML.

13. Color Hunter

Crée une palette de couleur d’après un tag, une couleur hexadécimale (ne mettez pas le symbole# devant), l’URL d’une image ou en fonction d’une image sur votre disque dur. Propose également de modifier la tonalité des couleurs en diminuant la saturation.

14. Color Scheme Designer

Très bel outil pour créer des sets de couleurs modifiables globalement en jouant sur la saturation, le constraste ou en ajustant chaque couleur séparément.

N’hésitez pas à participer à ce billet en soumettant à l’attention des lecteurs les outils qui font votre bonheur quotidien ;)

L’existence d’un fichier wordpress.css sera très utile pour les fans de cette plateforme de blog ! Je regrette juste que les styles spécifiques à WordPress ne soient pas tous présent dès maintenant. Peut-être dans la prochaine version ? Pour finir, il reste myclass.css au cas où vous auriez quelque chose à déclarer :D

Bref, du beau, du bon, du pocky à télécharger d’urgence.

PS : Si vous trouvez que les frameworks pénalisent les performances globales de votre site web en raison des requêtes surnuméraires, jetez quand même un oeil dans les différents fichiers de BIC : vous y trouverez certainement matière à réflexion.

Le png c’est bien, mais le gif c’est mieux !

J’ai tenté en vain de raccorder le fond d’une image avec la couleur équivalente en hexadécimal à cause d’une légère différence de teinte qui n’avait pas lieu d’être : les valeurs entre la couleur sélectionnée avec la pipette de Photoshop et celle que j’indiquais dans ma feuille de style étaient identiques.

Puis j’ai eu l’idée de modifier le format du fond en passant du png au gif. Et là, bingo, mes deux couleurs se sont raccordées sans solution de continuité. Je précise que ce léger problème n’apparaissait que sur IE6, Firefox et Opera me restituant les bonnes teintes.

Toutefois si vous désirez absolument conserver le format png vous pouvez lire ce fil du forum Alsacréations qui décrit le même phénomène avec une solution logicielle : tweakpng pour enlever les informations liées au réglage du Gamma.

Ca me rappelle que le même phénomène se produit lorsqu’on veut raccorder certaines couleurs présentes dans une animation Flash avec une couleur en hexa dans le code HTML. Je me demande si le fait que Flash utilise le format png n’en serait pas la raison. Si des adeptes de Flash passent par ici j’aimerais bien savoir comment ils gèrent ce problème.

Ne débutez pas un id avec un underscore, car IE6 et Firefox n’aiment pas ça

C’est typiquement le genre de truc qu’il vaut mieux vérifier avant d’appeler SOS médecin : j’en ai fait l’amère expérience il y a peu. C’est assez curieux car les spécifications autorisent bien l’usage du souligné et du tiret pour les identificateurs et les classes…

En CSS2, les identificateurs (ainsi que les noms des éléments et ceux des classes et IDs des sélecteurs) ne peuvent contenir que des caractères parmi [A-Za-z0-9] et ISO 10646 supérieurs à 161, ainsi que le tiret (-) et le souligné (_) ; ils ne peuvent commencer ni par un tiret ni par un chiffre.

Donc, si j’ai bien lu : le tiret (-) est autorisé sauf au début, tandis que le souligné (_) est valide partout. Peut-être un excès de zèle de la part des navigateurs ?

overflow: hidden : cachez ce menu que je ne saurais voir

Lorsqu’on utilise la propriété float pour placer du contenu à gauche ou à droite d’un élément, il est souvent nécessaire de rétablir le flux, pour celà, on peut utiliser clear: left|right|both pour éviter que le bloc en question ait des voisins à gauche, à droite ou des deux côtés. Ce clear peut également être utilisé sur un élément HTML comme hr, br ou div.

Suite à mon billet sur la question du rétablissement du flux après un float, j’ai eu l’occasion de redécouvrir la propriété overflow: hidden|visibble|auto qui, en plus de gérer le débordement du contenu d’un élément, permet de créer un contexte de formatage qui a les mêmes conséquences que clear: both pour rétablir le flux.

Aussitôt lu, aussitôt testé avec succès, je commençais à me servir d’overflow: hidden quand je me suis rendu compte que la conséquence évoquée plus haut n’annulait pas sa fonction première : rendre visible ou pas le débordement d’un élément contenu dans un bloc auquel on applique overflow: hidden.

En effet, si l’on a un menu déroulant en position: absolute dans un bloc dont un ancêtre possède overflow: hidden et si la hauteur de cette ancêtre est inférieure à la hauteur du menu déroulant en question, ce dernier est coupé dans les limites de l’ancêtre… Voir à se sujet le billet de Rémi Prévost et les commentaires associés.

Hum… j’espère que c’est plus simple à comprendre qu’à expliquer ;)

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 :)

La plupart des sites web sont remplis de textes trop petits pour être lus correctement. Pourquoi ? Il n’y a aucune raison particulière, juste une stupide erreur collective qui a commencée lorsque la résolution des écrans était vraiment faibles. Donc :

Ne nous demandez pas de spécifier nous-même la taille de la police.

Nous ne voulons pas modifier les préférences de notre navigateur chaque fois que nous visitons un site web.

Ne nous dites pas que les pages encombrées sont plus agréables à lire.

Les sites web remplis jusqu’à la gueule ne sont pas beaux, ils puent. Remplir les pages à tout prix n’a jamais aidé l’ergonomie. C’est la paresse qui pousse ces concepteurs à nous bombarder d’informations inutiles. Nous voulons que vous réfléchissiez pour sélectionner ce qui peut nous intéresser. Nous ne voulons pas faire le boulot à votre place.

Ne nous dites pas que faire défiler une page *saimal*.

Parce qu’alors tous les sites web sont nuls. Ils n’y a rien à reprocher aux longues pages. Rien du tout. De même qu’il n’y a rien de mal à tourner les pages d’un livre.

Ne nous dites pas que le texte n’est pas important.

95% de ce qui importe dans le webdesign est typographie.

Ne nous demandez pas de porter des lunettes.

Plutôt que d’avoir les yeux sur l’écran, nous préférons continuer la lecture confortablement assis dans une position relax.

Cinq règles simples à appliquer pour améliorer l’harmonie visuelle de vos pages web »

C’est quoi au juste ce concours ?

Il s’agissait de proposer un thème pour WordPress en utilisant l’intendance fournie par Sandbox. Je vous renvoie sur l’un des billets que j’ai déjà écris sur ce thème Sandbox. Grosso modo, ce thème a deux particularités. D’une part, il offre l’intégration des microformats dans un écrin xhtml CHIC, donc classe… D’autre part, il utilise le fichier functions.php pour générer des classes à gogo en fonction du contexte dans lequel s’affiche la page dont voici quelques exemples :

 <body class="wordpress y2007 m05 d31 h18 home loggedin"> <body class="wordpress y2007 m05 d31 h18 archive category category-action-citoyenne loggedin"> <div id="post-1" class="hentry p1 post publish author-admin category-uncategorized y2007 m05 d16 h09"> <li id="comment-550" class="comment c1 byuser comment-author-admin bypostauthor c-y2007 c-m05 c-d31 c-h20">

Et quand on sait que Sandbox fera probablement partie un jour ou l’autre de la distribution WordPress, vous conviendrez qu’il est urgent d’aller jeter un oeil chez l’ami Scott !

46 designs — Mes impressions « à chaud »

La suite de ce billet contient mes notes de lecture prises durant la phase de sélection des designs. Ces notes, destinées à guider mes choix pour désigner les trois meilleurs thèmes accompagnés de leur chalengers, sont à peines réécrites pour les besoins de cet article. A la relecture, je m’aperçois que je n’ai pas été particulièrement tendre : que voulez-vous, c’est pas de ma faute si j’ai pris mon rôle de judge au sérieux ;) En, même temps, je me dis que ça ne sert à rien d’embellir les résultats après coup pour éviter de froisser les susceptibilités. Car en fait, si les résultats parlent d’eux-mêmes, ils ne disent finalement pas grand chose sur les designs qui n’ont pas été retenus.

Ca va sans dire mais mieux en le disant, il s’agit essentiellement d’impressions personnelles et subjectives, même si ça et là, quelques justifications techniques ou ergononiques donnent l’impression du contraire ^_^. Lorsque je n’ai pas pu me prononcer franchement « pour » un design, j’ai joué la carte de l’honnêteté en précisant « N/A » pour « Non Applicable » au moment où j’ai rédigé ma note. En revanche, je me suis appliqué à justifier mes impressions « contre ».

Les 46 designs »

Ceux qui ne connaissent pas l’ancienne version peuvent se faire une idée de l’ancien design. Pour faciliter la comparaison, j’ai ajouté un capture d’écran de la version en cours.

But : mettre en avant les catégories et la recherche sur le blog

Outre le champ de recherche, j’ai envie de mettre en avant les catégories pour en faire l’élément de navigation privilégié, sans pour autant remplacer la navigation horizontale située en haut de la page. Cette dernière ne devrait pas compter plus de deux ou trois autres liens supplémentaires. Comme le nombre d’items dans les catégories peut augmenter dans une plus large mesure, une disposition horizontale mènerait vite dans une impasse.

J’ai pensé ensuite aux menus déroulant. Mais bon… la finalité est d’améliorer l’ergonomie, pas le contraire ;) Je trouve particulièrement gênant de ne pas pouvoir accéder au contenu d’un clic. C’est peut-être sur cette question que l’on peut faire une distinction entre le site et le blog : si on a besoin de plus de sept rubriques ou catégories avec des sous-rubriques en nombre important (ou pire des sous sous-rubriques), alors c’est un site qu’il faut faire. Même si pour cela on peut utiliser une plate-forme de blog !

Objectif : faire de la place dans la sidebar

Je ne veux pas non plus sacrifier le calendrier, les archives ou le nuage de tags. Seulement leur donner l’importance qu’ils méritent : une navigation accessoire, sans être superflue pour autant :

• Le calendrier et les archives.

  Personnellement, je ne m’en sers pratiquement jamais pour naviguer sur un blog. Néanmoins, ces deux éléments donnent assez rapidement des informations sur le rythme de publication et l’ancienneté du blog. Quoique cette dernière pourrait être précisée sous la forme d’un online since 1967 ;)

• Le nuage de tag

  C’était à l’origine un élément important pour se déplacer dans le blog, de manière peu structurée, au gré de l’impulsion. Et de fait, les tags étaient plus utilisés que les catégories. Le problème ? Je suis moins rigoureux pour tagger un billet que pour lui associer une catégorie : les billets affichés en cliquant sur un tag nuageux sont parfois éloignés du sujet. Et celà impacte peut-être le nombre de pages vues ou le temps passé sur le blog. Et même si j’aimais bien mon tagcloud dans la sidebar, je l’ai quand même déplacé en bas de la page : sa vocation étant d’augmenter, il prendra ses aises dans toute la largeur.

Moyens : Javascript, CSS et déplacements de bloc »