1. Les trois fonctions du graphisme sont : identifier, informer et promouvoir.
2. Contrairement à l’artiste, le graphiste travaille en vue d’une reproduction industrielle.
3. Les progrès des arts graphiques sont dus à quelques pionniers qui travaillaient en équipe.
4. Les arts graphiques sont un langage à la grammaire indéfinie dont le vocabulaire s’étend sans cesse.
5. Les imprimeurs du moyen-âge réutilisaient déjà à volonté les illustrations gravées sur bois.
6. L’affiche est le premier support et l’entité la plus élémentaire des arts graphiques, mêlant le texte et les images.
7. La règle de base de l’Isotype est que la représentation d’un nombre important d’éléments doit se faire par de nombreux signes (et non par un seul signe de grande taille).
8. Eléments de base de la «typographie Bauhaus» : linéales, chiffres surdimensionnés et barres horizontales ou verticales pour utilisées de manières  esthétique et pour hiérarchiser l’information.
9. En 1906, les timbres dessinés pour la Bosnie-Herzégovine furent les premiers à utiliser la photographie.
10. Les graphistes viennois restaient cependant avant tout des artistes et il fallut longtemps encore avant que la profession de graphiste n’existe à proprement parler.
11. Les biscuits Bahlsen, le café Hag et les encres Pelikan furent parmi les premiers à adopter l’idée d’une image de marque.
12. Le matériel publicitaire que Behrens conçut pour AEG, austère et géométrique, est considéré comme la première utilisation d’un graphisme élaboré au service d’une politique commerciale.
13. Le concept du «style maison», ou de charte graphique fut développé dans les années 1930 par Olivetti et par la Container Coroporation of America (CCA).
14. La première guerre mondiale affirma l’importance du graphisme.
15. A la fin du XIXe siècle, la lithographie permet aux artistes d’imprimer de grands aplats de couleur, ce qui leur donne la liberté de dessiner eux-même les lettres plutôt que d’utiliser la gamme restreinte des caractères existants. Cette nouvelle maitrise de l’impression marque la naissance du graphisme.
16. Le métier de graphiste date du milieu du XXe siècle.
17. Les affiches des pays en guerre reflétaient leur niveau de développement graphique.
18. Mallarmé considérait la double page d’un livre comme un seul et même espace.
19. Le futurisme marque une rupture avec  la mise en page traditionnelle et symétrique.
20. Après la révolution de 1917, les arts graphiques devinrent un outil de communication de masse.
21. Les livres conçus par Lissitzky expriment l’idée selon laquelle les mots imprimés sont vus et non pas entendus.
22. Au sein du Bauhaus, une analyse approfondie de la communication visuelle commença par celle de l’alphabet.
23. Koch avait repris le Erbar, un caractère géométrique du début des années 1920, pour son Kabel qui apparut en même temps que le Futura, en 1927.
24. Le style moderne internationale survécut au nazisme pour réapparaitre dans les années 1960 sous le nom de «style suisse».
25. L’agence de publicité est une invention américaine.
26. Dans le travail de Cassandre, c’est le texte, la lettre qui déclenchent les idées qui engendrent la forme plastique.
27. L’affiche déclina au cours des années 1930 face au développement des magazines affichant de la publicité.
28. De nos jours, l’art de la mise en pages tire sa force de la libre association des techniques. Avec un appareil photo, une paire de ciseaux, une bouteille d’encre de chine et de la colle, une composition peut naitre et une idée nouvelle s’exprimer — Alfred Tolmer, imprimeur à Londres en 1931.
29. Aux Etats-Unis, dans les années 1930, les similitudes entre les pages éditoriales et publicitaires étaient révélatrices de l’interdépendance économique de la presse et de la publicité.
30. Aux Etats-Unis, la profession de directeur artistique était antérieure à celle de graphiste. Le club des directeurs artistiques de New York fut fondé en 1920.
31. Mehemed Fehmy Agha s’occupa de la direction artistique de Vogue, de House and Garden et de Vanity Fair. On lui doit la grille de maquette en double pages et l’utilisation de faux textes. Il fut le premier à considérer un magazine comme une succession de double pages plutôt que comme une suite de pages individuelles. Il est considéré comme le premier directeur artistique moderne.
32. Quand la simple énumération des faits est insuffisante, laborieuse ou peu claire pour le lecteur et qu’une organisation visuelle s’impose, il faut alors faire appel au graphisme — Will Burtin.
33. C’est justement quand vous commencez à vous ennuyer de votre création que votre public commence à la remarquer.
34. Le graphiste, affirmait Lou Dorfsman, doit être capable de montrer que le projet répond à un besoin, comment il fonctionnera, ce qu’il coûtera, à qui et comment il sera diffusé.
35. Au milieu des années 1960, le graphisme fut enfin reconnu comme une profession à part entière et les mensuels spécialisés comme Print, Communication Arts et Art Direction témoignaient de son excellente santé.
36. En 1940, la CCA avait créé son «laboratoire graphique», équipé d’une caméra qui enregistrait les mouvements de l’oeil sur un dessin.
37. Tschichold affirmait que le Bauhaus commettait deux erreurs : le rejet de toute mise en page centrée et l’utilisation exclusive de linéales.
38. Le système de grille de Gerstner trouvait sa source dans l’unité de base de mesure typographique et non dans les proportions de la page.
39. En 1957, le caractère sans sérif Neue Haas (rebaptisé Helvetica) devint incontournable pour les graphistes «constructivistes» des années 1950 et 1960.
40. La charte graphique d’Olivetti concernait même les logements, les écoles et les hôpitaux créés pour les employés.
41. Dans les années 1950, les photographies détourées accompagnées d’aplats de couleur devinrent des éléments incontournables du graphisme italien.
42. Au magazine Elle, dans les années 1960, Peter Knapp diposait d’un personnel considérable : 14 maquettistes, 2 retoucheurs, 1 dessinateur de lettres, 5 photographes de laboratoire, 5 compositeurs, 5 illustrateurs et 6 photographes de modes et leurs assistants.
43. Les graphistes suisses, comme Knapp, avait une formation complète et étaient habitués à des exigeances techniques inconnues en France.
44. En Grande-Bretagne, après la seconde guerre modiale, les arts graphiques participaient au programme de reconstruction économique et sociale.
45. Pendant les années 1950, les graphistes se forgèrent une identité professionnelle en adhérant à la Society of Industrial Artists qui leur offrait une charte professionnelle semblable à celle des architectes.
46. La qualité typographique du livre en Allemagne reposait sur les règles de composition établies par des graphistes tels que Renner et Tschichold dans les écoles d’imprimerie d’avant-guerre , et grâce auxquelles les mots et les lignes étaient correctement espacés, un aspect souvent négligé dans d’autres pays (particulièrement en France).
47. Si l’on considère le graphisme comme un moyen de résoudre un problème, tout ce que l’on peut espérer communiquer, c’est le problème lui-même. Le style est un virus — Neville Brody.
48. Grâce à l’informatique, le nombre de caractères disponibles dépassa le millier dès les années 1980.
49. Tant que nous aurons besoin de l’alphabet et de l’image, le graphisme existera.

Pour terminer cette longue liste, voici ce que pensait Ashley Havinden, qui résume parfaitement l’éclectisme dont doit faire preuve le graphiste :

Le graphiste est celui qui est capable de résoudre les problèmes de communication, quel que soit le médium imposé. Les graphistes sont libres de s’inspirer du classicisme de l’Antiquité, du fonctionnalisme du Bauhaus, de la symétrie du XVIIIe siècle, du réalisme de la Renaissance, de l’expérimentalisme cubiste, des bizarreries victoriennes, des images oniriques surréalistes, des photographies d’amateurs, des dessins industriels, des divisions de l’espace dans l’art abstrait et l’architecture moderne, de la typographie du XVe siècle, de la radiographie, de la gravure sur bois, de la nouvelle typographie de Tschichold, etc.

Le Graphisme au XXe siècle

Richard Hollis

Traduit de l’anglais par Christine Monnatte

ISBN : 2-87811-115-X

J’espère que ces quelques notes vous auront donné envie d’en savoir plus sur l’histoire du graphisme dans le monde. Si le format de ce billet vous plait, j’ai d’autres vieux bouquins dans ma bibliothèque qui n’attendent qu’une relecture pour se manifester !

Articles sur le même sujet

• La typothèque idéale par Smashing Magazine
• Guide stylistique — Exemple de charte graphique et éditoriale
• Tutoriel grille verticale en CSS par Smashing Magazine
• Quelques notes sur les éléments graphiques du webdesign
• Près de 60 polices de caractère pour Google Font Directory

Ca ne coûte pas plus cher, de bien bloguer !

Mais à la réflexion, pourquoi payer plus cher si l’on peut obtenir un retour sur investissement à partir d’une centaine d’euros ? Partant de cette idée — et puisqu’au final la mise en place d’un blog brut de décoffrage ne prend pas plus de 5 minutes d’après le script d’installation du CMS WordPress — je me suis dit qu’il devait être possible de proposer l’installation d’un blog pro pour 9,90€ttc⁽¹⁾ :

Où est l’arnaque ?

(1) Pas d’arnaque : installation par mes soins d’un blog propulsé par WordPress avec un thème graphique en accord avec votre secteur d’activité en contrepartie de l’installation de publicités discrètes, d’outils de mesure d’audience (Google Analytics) et de la somme de 9,90€ versée sur mon compte PayPal à l’adresse infographiste@gmail.com \O/ Vous pouvez me contacter pour en savoir plus.

Envie d’aller plus loin ?

Si vous désirez aller plus loin avec votre blog professionnel, je suis disponible pour vous accompagner ponctuellement ou durablement sur tous les aspects de la vie d’un blog d’entreprise ou d’un site internet :

• Conception et rédaction d’une charte éditoriale pour les blogs multi-rédacteurs,
• Rédaction de contenu : billet, article, dossier, revue de presse,
• Réécriture des textes rédigés initialement par votre équipe pour coller à la charte éditoriale,
• Modification du thème graphique installé à l’origine
• Création d’une charte graphique personnalisée,
• Mise en place de plugins adaptés à vos besoins,
• Accompagnement pour les mises-à-jour,
• Aide à la communication de crise,
• Gestion de votre réputation sur le web (e-réputation) et les réseaux sociaux (oui, ça veut dire que vous saurez comment utiliser Twitter),
• Achat de nom de domaine,
• Montée en charge,
• Référencement,
• Et plus à venir…

Comment ça marche ?

Il suffit de me faire parvenir votre projet de blog d’entreprise via la page contact ou directement à l’adresse infographiste@gmail.com. Facile, non ?

Plus d’information sur les tarifs WordPress

• 8 exemples de tarifs pour l’intégration de votre site WordPress d’après la méthode des Personas
• Quel tarif pour un thème WordPress ?

Articles sur le même sujet

• 8 exemples de tarifs pour l’intégration de votre site WordPress d’après la méthode des Personas
• Quelques notes de lecture sur Le Graphisme au XXe siècle
• Quel tarif pour un thème WordPress ?
• Référencement de sites Web — Chassez le naturel, il revient au SEO !
• Guide stylistique — Exemple de charte graphique et éditoriale

En ce qui concerne les estimations qui suivent, j’ai essayé d’être fidèle à la réalité, même si les Personas et les projets qui les accompagnent ont été imaginé de toutes pièces. Toute ressemblance avec des personnes ou des situations réelles ne serait que pure coïncidence.

Périmètre des fonctionnalités et cahier des charges

En dehors de la détermination du tarif journalier — abordée de manière très complète par Aymeric dans Quels tarifs pratiquer pour un freelance ? — il faut avoir en tête que la formation des prix est à la fois très simple et très complexe. Comme dans la mécanique quantique, le principe d’incertitude joue à plein tant qu’il manque certaines informations, puis tout se cristallise comme par enchantement dès que l’on connait :

• Le périmètre des fonctionnalités.

  Il s’agit grosso modo des besoins exprimés par le clients qui seraient passés à la moulinette de la pertinence et de la faisabilité. Par exemple : je veux un site web pour présenter mon activité peut devenir Mise en place d’un site web web composé d’une page A propos, d’une page Contact et de plusieurs rubriques administrables librement par le client à l’aide d’une console d’administration à laquelle il aura préalablement été formé. Le périmètre des fonctionnalités se formalise généralement sous la forme d’un cahier des charges contractuel.

• Le temps nécessaire pour les mettre en place.

  La variable «temps» dépend directement des éléments du cahier des charges mais aussi de l’expérience du prestataire. Plus vous travaillez vite et plus vous pourrez satisfaire de nombreux clients dans un laps de temps donné. Du point de vue du client, la question qui se pose souvent est de savoir si le prestataire qu’il a choisi lui fait supporter le prix de son inexpérience. Seules des demandes de devis répétées et une certaine expérience du métier permettront d’y voir clair. Sinon, n’hésitez pas à faire appel à un professionnel pour étudier vos devis avant soumission !

• Les attentes du client.

  Le client peut déclarer vouloir un site Web pour se faire connaitre auprès des fournisseurs alors qu’en réalité il veut augmenter ses ventes. Il faut lever ce genre de lièvre le plus en amont possible. C’est là que se situe ce qu’on appelle le conseil. Notion souvent floue, un peu tarte à la crème mais néanmoins essentielle pour ne pas tomber de haut. Voir plus haut la partie consacrée au périmètre des fonctionnalités.

• La situation du client (taille de l’entreprise, secteur d’activité)

  Ce point est souvent mal vécu par les clients qui pensent que les prix sont faits «à la tête du client». C’est parfois vrai, mais la plupart du temps cette donnée agit à la baisse. Il est parfois difficile de dire «non» à un client qui n’a pas les moyens de ses ambitions si le carnet de commande n’est pas rempli. Cela dit, j’ai remarqué que l’on ne facturait que très rarement le «vrai» prix d’une prestation que l’on travaille en freelance ou dans le cadre d’une agence.

Les Personas

1. Aldebert

   Ce mécanicien-auto envisage de changer d’employeur. Il pense qu’un blog lui permettrait de se faire connaitre auprès des recruteurs en rédigeant des articles sur l’automobile. L’aspect du blog importe peu. Un bandeau sur le thème de l’automobile et de la mécanique suffira. Il est prêt à s’investir dans son blog et aimerait à terme devenir une référence dans le secteur.

   Estimation du temps

   • Réalisation du bandeau, personnalisation des couleurs et mise en place du thème.
   • Tarif : 450€

2. Corinne

   Illustratrice dans la presse pour enfant, elle a souvent présenté son travail sur les forums spécialisés dans les arts graphiques. Elle décide de lancer un blog pour présenter les ébauches de ses dessins afin de se faire connaitre et recueillir les avis de ses pairs. Corinne veut un blog avec un look orienté « typo » avec un usage prononcé du noir et du blanc pour mettre ses dessins en valeur. La maquette du blog passera de deux colonnes à une colonne lorsque les visiteurs afficheront le billet seul. La page d’accueil affichera la description du dessin accompagné d’une miniature.

   Estimations

   • Mise en place du blog,
   • Tarif : 750 €.

3. Jean-Marc

   Ce dirigeant de PME spécialisée dans le conseil aux paysagistes en milieu urbain et dans la fourniture de matériel de jardinage possède une clientèle composée de collectivités, d’entreprises et de particuliers. Il souhaite mettre en place un site Web pour présenter ses réalisations au jour le jour aux prospects qui lui demandent de fournir un échantillon de ses réalisations en complément des brochures et des catalogues qu’il propose. Après quelques échanges de mail, le format retenu est un simple blog aux couleurs de l’entreprise dont les billets seront composés d’une photo et d’une description. Le blog comportera également un formulaire de contact et une page A propos. Le client insiste sur la sobriété et la rapidité d’affichage du site. Aux couleurs de l’entreprise signifie que le blog reprendra principalement le logo de l’entreprise et s’inspirera des éléments graphiques existants : plaquette commerciale, cartes de visite, catalogue produit, etc. pour le choix des couleurs. Un seul Template WordPress suffit pour afficher les billets et les pages. Le point de départ est une page blanche.

   Estimations

   • Mise en place du blog,
   • Mise en place des éléments graphiques,
   • Livraison prévue une semaine plus tard.
   • Tarif : 1 975€

4. Martine

   Cette responsable communication dans une agence Web a demandé à son graphiste de pondre une charte graphique pour un mini site Web événementiel pour un de leur client. Il s’agit d’une page d’accueil assez visuelle accompagnée de trois rubriques possédant chacune leur univers graphique. Il faudra découper les 4 fichiers Photoshop et faire l’intégration HTML / CSS des quatre templates WordPress. Chaque rubrique affichera un seul article composé d’un texte accompagné d’images que le client pourra mettre à jour facilement. Pas de boucle WordPress complexe à prévoir mais un travail précis sur les feuilles de styles CSS associées aux formats d’image et à leurs légendes.

   Estimations

   • Découpage et intégration des 4 fichiers,
   • Travail sur les images,
   • Tarif : 2 650€.

5. André

   Responsable d’une association d’ancien élèves, André voudrait une partie réservée aux adhérents pour les tenir informés de la vie de l’association et une partie publique accessible aux moteurs de recherche pour attirer de nouveaux membres. Le client veut pouvoir ajouter des Widgets dans les zones publiques et/ou privatives. La charte graphique sera aux couleurs de l’association avec deux ou trois icônes pour personnaliser le site et le rendre attrayant. Le logo reprend le nom de l’association dans une typographie plus dynamique que l’existant, accompagné d’un pictogramme à concevoir. Un seul template suffit pour afficher les différents contexte d’affichage. Plusieurs boucles WordPress spécifiques avec des conditions pour les accès réservés sont à prévoir.

   Estimations :

   • Conception et intégration,
   • Formation des membres du bureau de l’association,
   • Tarif : 3 370€.

6. Lise

   Lise est co-dirigeante d’une petite entreprise de trois personnes qui propose des prestations de conseils et de rédaction Web autour du Personal Branding, de l’e-réputation et des réseaux sociaux. Ses clients sont des entreprises du secteur médical qui cherchent à vulgariser des concepts complexes à un large public. Lise veut un site web pour présenter ses activités avec une partie « blog » pour partager ses réflexions du quotidien. Le design sera sobre, clair avec quelques touches de couleurs dans les titres et les puces. Les concepts à vulgariser sont au nombre d’une dizaine. ils feront chacun l’objet d’une page dédiée composée à chaque fois de textes et d’images, le tout mis en page à la manière d’un magazine : textes, mise en exergue, photos de tailles différentes avec ou sans légende.

   Estimations

   • Charte graphique et intégration du blog ,
   • Gabarit pour les 10 pages de conceptsr,
   • Mise en page des pages-concepts,
   • Tarif : 3 950€.

7. Raoul

   J’aime le croc de boucher (JLCDB) est une organisation qui représente les sociétés de vente de crocs de boucher en direction des bouchers-charcutiers de la Ville de Paris principalement. Suite à une mésentente au plus haut niveau de l’état, le terme « croc de boucher » a vu son champs sémantique et sémiologique lui échapper. Raoul veut se réapproprier le paradigme du croc de boucher, ce qui est bien naturel. Un blog mis à jour régulièrement sur les thématiques abordés par JLCDB sera le pivot de la communication de l’organisation. Raoul veut déléguer la rédaction et l’animation du blog pour une durée de 3 mois renouvelables selon les résultats, à raison de la publication d’un billet de 500 mots par semaine.

   Estimations

   • Mise en place d’un blog orienté SEOs,
   • Etude du marché et ciblage des mots-clés et expressions-clés ,
   • Mise en place des modèles de billets et du planning de rédaction en fonction de l’actualité du client,
   • Forfait pour 12 billets + ou – 2 : 1 500€
   • Tarif : 4 600€.

8. Darken Rahl

   Le chef des D’Hara’s est persuadé qu’il lui manque un blog sur les Mord-Siths pour rallier les terres du milieu à sa cause.

   Estimations

   • ASAP. Délai de livraison : avant-hier.
   • Tarif : N’en parlons plus ;)

Notes

Les tarifs indiqués sont des estimations qui incluent :

• La mise en place d’un thème WordPress unique et personnalisé,
• L’achat du nom de domaine pour la première année (15€ par an ensuite),
• Une année d’hébergement sur un serveur mutualisé (env. 30€ par an),
• Le prix de l’accompagnement après la livraison est inclut dans les tarif. Optionnel, il représente 15% du montant indiqué. Cet accompagnement se veut une assistance par email principalement, portant sur la prise en main de l’administration du blog et la rédaction des billets durant un mois à compter de la livraison du site.
• J’ai fais l’impasse d’un Personas ayant besoin d’un site nécessitant une « empreinte » graphique forte avec des visuels et/ou des photos. Pour tel site, je pense qu’une somme forfaitaire allant de 250€ à 1 500€ selon le projet (à ajouter aux tarifs indiqués dans l’article) est un bon point de départ.

Remarques

De nombreux prestataires partent d’un thème WordPress existant pour l’adapter ensuite aux « besoins » des clients. Personnellement, je préfère partir : soit d’une feuille blanche, ce qui permet — notamment dans les cas où la charte graphique est minimaliste — de proposer des sites ayant de la personnalité ; soit d’un template de base minimaliste créé par mes soins.

Ce qui ne remet pas en cause l’intérêt de certains thèmes Frameworks (ou même du thème Twenty Ten livré par défaut avec WordPress 3.0). Il faut simplement voir s’ils conviennent vraiment à ce que vous voulez. Personnellement, j’en suis revenu à cause du manque d’optimisation : « qui trop embrasse mal étreint » ?

Note du 07/04/2011 : j’ai augmenté les tarifs initiaux pour tenir compte des commentaires qui me faisaient remarquer à juste titre que je n’avais pas pris en compte le temps nécessaire à la conception et à l’administratif. Je m’étais surtout focalisé sur les temps de réalisation, ce qui n’a pas manqué d’induire les lecteurs attentifs en erreur. Merci de votre compréhension.

Articles sur le même sujet

• Votre blog professionnel à partir de 9,90€
• Une lettre d'information mensuelle pour les abonnés WordPress ?
• Quel tarif pour un thème WordPress ?
• « css 4 design » — Nouvelle charte graphique et redesign du logo
• Le petit journal du web : PHP, WordPress, Javascript, CSS, Ruby, Responsive Webdesign

… en vain ;)

Sur les 80 polices sélectionnées, les 30 premières sont incontournables : on en retrouve la moitié sur au moins 80% des identités graphiques et cartes de visite un peu partout dans le monde depuis quelques dizaines d’années…

Les 50+ typos suivantes sont certainement moins connues malgré des qualités qui crèvent l’écran : un look and feel jeune et dynamique (ce sont des typos bien plus récentes que les 30 premières), un joli dessin, et plus que tout autre considérations, du caractère ! En même temps c’est la moindre des choses, non ?

Coup de coeur pour Le monde Courrier, Parisine PTF, Palatino Sans & Informal, Whitman, Insider et Mello Sans.

Lire 80 Beautiful Typefaces For Professional Design.

Voici mes 11 typos préférées

• Akzidenz Grotesk
• Avant Garde Gothic
• Avenir
• Barmeno
• Formata
• Helvetica Neue
• Insignia
• Neuzeit
• OCRB
• Officina Sans
• Rotis Sans Serif

⁽¹⁾ Ce billet est issu d’un brouillon daté du 26 août 2007 à une époque où j’ai eu l’occasion de tester la connexion de secours de Free ;)

Articles sur le même sujet

• Le petit journal permanent de la TypOgrApHiE !
• Quelques notes de lecture sur Le Graphisme au XXe siècle
• Près de 60 polices de caractère pour Google Font Directory
• 940.css version fluide — Grille de mise en page en pourcentage
• Tutoriel grille verticale en CSS par Smashing Magazine

Le graphisme, c’est de l’expérience utilisateur

L’expérience utilisateur au sens large, c’est-à-dire en prenant en compte les différents contextes de visite d’un utilisateur qui bouge (sans se  limiter à la session en cours, donc), peut être compromise. Comment faire confiance à un site qui change d’apparence comme de chemise ? Selon l’écart qu’il peut y avoir entre les différents affichages, le visiteur peut légitimement se demander s’il n’est pas victime d’une tentative de Phishing (même s’il est plus facile de refaire une page web à l’identique qu’avec des différences, on est bien d’accord).

Ça va sans dire mais mieux en le disant : si la confiance est un élément important dans votre communication, il vaut mieux que votre site s’affiche de manière identique sur les différentes combinaisons plate-forme-navigateurs présentes sur le marché. Et vous l’aurez sans doute deviné, si l’on veut que le site web présente une interface identique sur tous les navigateurs, les notions d’amélioration progressive et de dégradation gracieuse perdent toute leur substance.

FUD ? Je reconnais qu’avec cette histoire de confiance, la peur, l’incertitude et le doute se sont insinués dans votre esprit. Et ce n’est que le début car j’aborde maintenant un élément essentiel dans toute communication d’entreprise : l’identité graphique. Il s’agit de faire en sorte que les signes distinctifs d’une marque (société, produit, etc.) soient explicités, sublimés et fixés dans la charte graphique que les différents intervenants devront respecter quel que soit le domaine d’intervention : plaquette imprimée, site web, drapeau planté sur la lune, etc.

Adapter la charte graphique au web, pas le contraire !

Pour s’en sortir, il faut parfois s’affranchir de la charte graphique de l’entreprise si celle-ci n’est pas adapté au support web. On rencontre souvent, par exemple, des chartes qui prévoient le logo en bas à gauche de la page compte tenu du parcours de l’oeil sur l’imprimé. Ce sens de lecture en Z, n’est pas forcément optimisé pour le web sauf à limiter la hauteur de la page à la hauteur de l’écran disponible sans défilement. Ce n’est pas impossible mais ce n’est pas souhaitable non plus si l’on veut profiter à fond du support.

Qui ne m’audit, consent…

L’idée serait donc d’adapter la charte graphique de l’entreprise au support web dans un premier temps, puis de faire un audit pour connaitre les limites de cette charte graphique quand vient le temps de l’intégration pour connaitre le temps qu’il faut réserver à ceux qui interviennent le plus souvent en fin de chaine et qui paient les pots cassés, soit sur le temps de travail (travailler plus pour gagner plus ?) soit au détriment de la qualité du produit fini.

Après cet audit, il sera possible de revoir la charte graphique pour l’adapter aux contraintes du web soit en éliminant les coins arrondis et/ou les ombres portées par exemple, soit en mettant en place des stratégies techniques pour que ces coins arrondis et ses ombres portées puissent voir le jour dans de bonnes conditions. Reste aussi la possibilité de déterminer une politique de dégradation gracieuse et/ou d’amélioration progressive dès le départ. L’objectif est que l’équipe chargée de l’intégration ait connaissance de ces contraintes le plus tôt possible pour travailler avec la charte graphique et non pas contre.

Pour (éviter de) conclure

Bon évidemment cette démarche est réserver à celles et ceux qui veulent vraiment s’investir dans le web, pour les autres, il sera nécessaire d’expliquer à leurs prestataires qu’ils sont trop exigeants et qu’il faut apprendre à gérer les problèmes au lieu d’essayer de les éviter en amont !

PS : Les Quelques notes regroupent des débuts de billets restés longtemps sous forme de brouillons faute de matière suffisante que je partage en l’état :  l’humour peut côtoyer la mauvaise foi et l’exactitude peut se mélanger à l’approximation… Un joyeux b***** en fait, même si tout n’est pas à jeter !

Articles sur le même sujet

• Quelques notes sur les éléments graphiques du webdesign
• Quelques notes sur les fonctions de l'intégrateur web et de l'intégratrice web
• Webdesign — L'essence précède l'existence (Wireframe, Mockup et Mood Board)
• Un site Web n'a pas forcément besoin de graphismes
• Quelques notes de lecture sur Le Graphisme au XXe siècle

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 charte 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.

Articles sur le même sujet

• 940.css version fluide — Grille de mise en page en pourcentage
• Quelques notes de lecture sur Le Graphisme au XXe siècle
• Calculer une grille de mise en page « typo » avec le nombre d'Or
• #WDFR — Imprimez votre grille pour dessiner vos croquis
• Framework CSS — Sémantique, maquette dynamique et autres notes

Grille de mise en page

La grille de mise en page est divisée en 16 colonnes de 42 pixels séparées par une gouttière de 18 pixels pour une largeur de 942 pixels

Ces proportions ont un rapport avec le fait que 42 — comme chacun sait – est la réponse à toutes les questions ;) Je voulais surtout sortir des sentiers battus, c’est-à-dire des designs en 960 ou 950 pixels que l’on trouve généralement dans les frameworks CSS. S’il suffisait de tomber sur des dizaines entières pour avoir des proportions harmonieuses, ça se saurait ! En matière de web design, quelques pixels de plus ou de moins peuvent faire la différence.

Grille horizontale ou verticale ?

Établir une grille verticale n’est pas difficile en soi : il suffit de s’assurer que les valeurs de line-height, de padding et de margin top et bottom, etc. soient des multiples de l’interlignage de base. Dans mon cas, la taille par défaut est de 14px pour le corps du texte et 1.5em pour l’interlignage, soit 21px de hauteur de ligne. Facile, d’autant plus que la plupart des frameworks CSS possède une section typography qui fait presque tout le le travail…

Le problème, c’est que si je trouve que l’alignement des blocs sur une grille horizontale est harmonieux, je suis rarement satisfait par la verticale. Non pas que globalement l’harmonie n’y est pas, mais lorsqu’on se met à lire une page web au lieu de la regarder, il y a souvent des espaces à revoir. Par ailleurs, je n’ai pas envie de m’assurer que la hauteur de mes images est elle aussi un multiple de ma grille verticale…

16 colonnes à la une ?

Ce n’est pas tout d’avoir 16 colonnes à disposition, encore faut-il organiser le contenu dans le respect de l’ergonomie et de la lisibilité globale et résister à la tentation d’utiliser toutes les combinaisons permises par la grille. Tout comme il ne faut pas multiplier le nombre de polices de caractère, il ne faut pas trop disperser l’attention du lecteur.

La page d’accueil

Une grille,  c’est bien à condition qu’on ne voit pas qu’elle ! Pour cela, j’ai divisé le header en 4 blocs de largeurs inégales tout en faisant en sorte que le point d’équilibre se situe au mileu de la page.

Des blocs inégaux, mais équilibrés

A la une

Ensuite, un article mis en avant occupe toute la largeur disponible tout en étant lui-même découpé en deux blocs de 8 colonnes chacun. Un pour le résumé de l’article et un pour le visuel qui l’accompagne.

Les champs personnalisés (custom fields) en ont encore sous le pied

Cliquez sur l'image pour l'agrandir

Ce dernier est ajouté via les champs personnalisés. Ils ont mauvaise presse depuis quelques temps mais sont d’une efficacité redoutable lorsqu’il s’agit d’ajouter plusieurs éléments en rapport avec l’article comme c’est le cas ici avec le visuel et sa légende, avec la possibilité d’avoir des éléments par défaut. Le tout est de ne pas en abuser.

Les miniatures

En revanche, l’affichage de la miniature qui flotte au début des résumés des articles est confié à l’excellent get_post_images() proposé par Mehdi Kabab. Ce script est composé d’un jeu de fonctions à mettre dans functions.php. A noter que  timthumb est prêt à être utilisé pour redimensionner les images afin d’alléger la page. A ce propos, je regarderais plus tard ce que WordPress 2.9 à dans le ventre en matière de miniatures.

Les billets et la sidebar

Sur la page d’accueil, les billets et la navigation alternative sont à égalité

Cliquez pour agrandir l'image.

J’ai ensuite centré les éléments sur deux blocs principaux occupant 8 colonnes chacun en page d’accueil : un bloc pour l’affichage du résumé des articles et un autre pour la barre latérale qui se divise encore en deux à la fin pour accueillir des contenus de faible largeur, comme les listes de lien, par exemple.

Le footer

Pour le pied de page, je suis parti sur un découpage en 4 colonnes occupant toute la largeur pour rompre avec la monotonie (parfois nécessaire pour une lecture tranquille) et relancer l’attention. C’est peut-être subjectif mais je trouve qu’un découpage en 4 colonnes pour le footer donne un ancrage à la page dans son ensemble. D’autres informations suivent sur la largeur de la page ou la moitié, comme le colophon par exemple.

Un footer en 4 colonnes pour asseoir la page avec un retour de flamme pour inciter à poursuivre la lecture. vers le haut.

La page des articles

Lorsqu’on se trouve dans la page affichant l’article seul, l’article mis en avant disparait ; les proportions changent pour améliorer la lisibilité du billet : 11 colonnes pour le texte et 5 colonnes pour la barre latérale.

Intégration de la grille

Pour rebondir encore un peu sur les questions récurrentes concernant l’utilité d’un framework CSS lors de la phase d’intégration HTML & CSS, je rappelle qu’il est tout à fait possible de travailler avec une grille pour le placement des différents blocs sans pour autant utiliser un framework, comme je le suggère dans Framework CSS sémantique ? Comment je vois les choses.

C’est d’ailleurs ce que j’ai fait ici. Au lieu d’utiliser Blueprint et son fichier grid.css pour caler les blocs sur la grille de base, j’ai opté pour Boilerplate créé par l’un des concepteurs de Blueprint qui propose — mieux qu’un framework — un redesign CSS global ! A charge pour l’intégrateur web d’ajouter les règles CSS de son choix pour que la page web suive la maquette !

Et HTML5, il pue du bec ?

Lorsque j’ai commencé à travailler sur Illustrator, j’avais en tête de réaliser l’intégration en utilisant au maximum les nouvelles balises proposées par HTML5. Comme vous pouvez le voir, à l’exception du Doctype et d’une balise time qui doit trainer quelque part, je suis resté au bon vieux XHML 1.0 ou XHML5 si vous préférez. Les raisons sont à la fois triviales et complexes :

• Triviales — malgré ce que j’ai lu — et écris sur ce blog également — sur le fonctionnement du script html5shiv pour qu’Internet Explorer reconnaisse les nouvelles balises, le résultat est parfois aléatoire. Dans mon cas, les problèmes de mise en page rencontrés sur IE8 disparaissaient en basculant sur le mode compatibilité avec IE7… Un comble, qui a suffit pour que j’envoie balader toutes les balises sémantiques.

• Complexes — en parlant de sémantique, je me suis bien pris la tête avec ses histoires de header, footer, nav et aside. Sur le papier, c’est assez simple. En revanche, je me suis heurté à des problèmes d’interprétation in real life.

En effet, les balises header et footer ne concernent pas uniquement l’en-tête et le pied du document HTML. Ainsi, au sein d’un article, on peut regrouper le titre et le nom de l’auteur dans une balise header et réserver une balise footer pour les meta-informations comme la date de publication, les tags ou les catégories.

Pour compliquer encore un peu les choses, si l’envie vous prend de mettre une date juste en dessous du titre de l’article, vous pourrez également utiliser un balise footer quand bien même elle serait placée juste en dessous du header de l’article et au-dessus du texte du billet. Et oui, puisque on vous dit que c’est sémantique et que ça n’a rien à voir avec la position ou l’apparence des éléments !

Pour faire court, au bout d’un moment, pour ne pas différer encore la mise en ligne du nouveau thème et prendre le temps de la réflexion pour apprendre les bonnes manières pour baliser correctement un document en HTML5, j’ai repris quelques cuillères à soupe de div !

Peu d’éléments graphiques

Un logo en flamme ?

C’est un logo en flamme, on étudie notre stratégie internet.

So 1997, non ? Pour ceux qui s’en souviennent, il s’agit d’un clin d’oeil concernant une publicité pour les solutions internet d’IBM (voir le pitch). La flamme est un des rares éléments graphiques présent dans le design. L’idée est de laisser le champ libre pour le contenu qui contiendra du texte, des images et des mises en exergues de texte, ce qui sera largement suffisant pour détourner l’attention des plus distraits ;)

Une autre flamme couchée sur le côté répond à la première dans le footer en direction des éléments de copyright et dans un mouvement circulaire pour diriger l’oeil du lecteur vers la partie Miscéllanées.

Les articles sont le nerf de la guerre

Laisser parler le contenu et laissez-lui une chance de se transformer en message

La raison de cette relative pauvreté dans les visuels de la maquette, c’est que je compte travailler graphiquement certains articles pour accentuer le style magazine du blog. Il s’agit de soigner le traitement éditorial et visuel des textes plutôt que multiplier les accroches, les visuels imposants, voire les fils d’information en continu en page d’accueil ! En matière de mise en page, comme dans beaucoup d’autres, il faut laisser parler le contenu pour lui laisser une chance de se transformer en message.

Améliorer les performances globales

Même si les performances web sortent du cadre de cet article, il est intéressant de noter que depuis quelques temps Google met la pression sur tous les fronts concernant les questions liées à la rapidité d’affichage des sites web. De l’amélioration des protocoles réseaux existants, à la mise en place d’outils d’évaluation du temps de chargement des pages, Google devrait intégrer ces données dans son algorithme pour favoriser les pages répondant plus rapidement aux attentes des utilisateurs. Le chemin du designer web est tracé et l’intégrateur doit suivre le mouvement (ou le contraire).

Une des clés pour améliorer les performances se trouve dans la charte graphique

A cet égard, une visite récente sur Google Webmaster Tools m’indiquait un temps moyen de chargement de 4.2 secondes par page avec le thème WordPress Hybrid. (thème minimaliste sans aucune image que j’avais laissé tel quel en attendant). La surprise est venue aujourd’hui, avec un temps moyen de chargement divisé par deux depuis l’installation du thème actuel ! Sans compter la marge de progression : si j’ai commencé à réunir les fichiers CSS dans style.css et il reste la même chose à faire avec les fichiers Javascript.

Application de la grille pour les images des articles

Cette fois, j’ai essayé d’utiliser les outils proposés par WordPress pour l’affichage des légendes des images. Voici tout d’abord un exemple d’une image accompagnée d’une légende à laquelle j’ai ajouté un hors-texte sous la forme d’une balise d’en-tête de niveau 6 (h6) qui flotte à droite de l’ensemble composé par l’image et sa légende (ou tout simplement du texte comme je l’ai utilisé plus haut). Il est aussi possible de faire flotter ce hors-texte à côté d’une  image qui ne serait pas accompagné d’une légende.

Parmi les contraintes qui s’imposent lors d’un redesign (6 ou 7 de mémoire sur ce blog en plus de 3 ans), l’historique de la base d’articles existants et les différentes tailles d’images qui les composent n’est pas à négliger. Pas question que les anciens articles voient leur mise en page partir en sucette ! Ce qui est certainement le cas pour certains d’entre eux ; des interventions manuelles seront nécessaires pendant un certain temps… No pain, no gain!

C’est tout pour le moment

Il reste encore beaucoup à dire sur la mise en place du thème. Comme je viens d’installer la beta 2 de WordPress 2.9, je vais laisser passer un peu de temps pour découvrir les nouvelles fonctionnalités avant de les introduire dans le thème.

Je reviendrais vers vous pour une deuxième partie de cet article qui est déjà bien assez long (je m’étais promis de faire court) où j’aborderais les aspects plus techniques comme les boucles WordPress que j’ai utilisées, etc.

N’hésitez pas à intervenir dans les commentaires pour me signaler les éventuels dysfonctionnements qui auraient échappés à ma vigilance ou simplement me dire tout le mal que vous pensez de ma nouvelle charte graphique ;)

Stay tuned and mind the gap!

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• Un « Logothic » pour WordPress Basics
• WordPress je thème
• Super Formateur HTML & CSS bientôt dans la place ?
• 24 listes pour Webdesigners

Le téléchargement de ces menus est gratuit ; toutefois, vous pouvez acheter les fichiers originaux au format .psd si vous voulez personnaliser davantage vos menus selon votre charte graphique.

Merci Thierry ;)

Articles sur le même sujet

• WordPress — Menus «funky» avec wp_list_bookmarks()
• Le Petit Journal du Web — 09/2011
• Navigation web — donne-moi ce que je veux ! est en ligne gratuitement
• Menu à onglets (tabs) — idTabs ou domTab ?
• Optimiser et styler les catégories WordPress avec les CSS

De l’architecture cosmique aux coquillages…

Parmi les applications de la suite de Fibonacci, la spirale logarithmique permet de concevoir des grilles de mise en page harmonieuses. Cette suite de chiffre est très proche du nombre d’or qui a inspiré les plus grands artistes.

Ce nombre d’or peut-être utilisé de différentes manières. Il est possible, par exemple, de créer un rectangle d’or dont le rapport entre la longueur et la largeur vaut le nombre d’or, soit 1,618 en simplifiant.

Avec ce rectangle d’or, construisons une spirale d’or en traçant des 1/4 de cercle dans chaque carré. Voir spirale logarithmique.

Nous pouvons voir cette spirale à l’oeuvre dans la nature sous des formes diverses, que ce soit dans la forme de certaines galaxies, ou dans la construction des certains animaux.

La forme de ce nautile est très proche d’une spirale logarithmique.

Une galaxie qui vaut son pesant d’or ?

… En revenant au design d’un site web

C’est bien beau, mais comment faire pour mettre ce nombre d’or en pratique pour construire une grille de mise en page ?

Avec The Ideal Website, iA apporte sa réponse en utilisant la série de Fibonacci pour déterminer la taille et la distance des éléments entre eux.

Différence entre la mise en page pour l’imprimé et l’écran

Si les fondamentaux du graphisme et les habitudes de lecture ne sont pas bouleversés par le passsage de l’imprimé à l’écran, il y a une chose que l’on oublie parfois, c’est que les règles de mise en page d’un magazine papier ou d’un livre sont inextricablement liées depuis des centaines d’années au coût induit par l’ensemble des techniques d’impression : format, grammage, trame d’impression, noir et blanc, niveau de gris, quadri, ton direct, etc.

Ainsi, on notera que les collections bon marché présentent des marges et un interlignage réduits pour limiter le nombre de pages à imprimer. Les collections haut de gamme présentent, quant à elles, un contenu encadré par des marges généreuses savamment calculées pour offrir un rectangle d’empagement optimal.

Sur le web, les coûts liés au support sont en grande partie supportés par l’utilisateur (ordinateur, écran) et par l’éditeur (hébergement, bande passante). Ce qui implique qu’une grande partie des conditions dans lesquelles la page sera consultée échappe au concepteur. Parmi ces conditions : le format de l’écran (16/9ème, 16/10ème ou 3/4) ou sa résolution (1024 x 768, 1280 x 1024, 1440 x 900, etc.).

Les formats de base du design

En attendant d’avoir des écrans ronds, les formats de base de toute mise en page sur le web sont le carré et le rectangle (qui n’est d’ailleurs, qu’une version allongée du carré). Reste à déterminer les proportions idéales pour obtenir un « beau » rectangle à partir d’un banal carré.

En effet, toutes les proportions ne se valent pas : certaines seront plus harmonieuses que d’autres. Il existe plusieurs méthodes pour obtenir des rectangles aux proportions particulières à partir d’un carré :

A la recherche du format A4

Une technique simple pour obtenir un rectangle harmonieux

Avec votre logiciel de dessin préféré :

1. dessinez un carré et à partir du point inférieur gauche (A) tracez un cercle jusqu’au point supérieur droit du carré (C).
2. Prolongez ensuite les lignes A D et B C vers le haut, au moins jusqu’au point d’intersection avec le cercle (D1) pour la ligne A D.
3. Tracez un trait parallèle à D C à partir de D1 jusqu’au point C1 pour obtenir un rectangle en A B C1 D1 (ou en A B2 C2 D si vous travaillez dans l’autre sens).

Et voilà, deux colonnes prêtes à l’emploi !

Nous obtenons donc une base harmonieuse pour un design en deux colonnes équilibrées de manière géométrique avec des proportions dans un rapport de 1,4142 soit la racine carré de 2.

Ce ratio hauteur/largeur correspond à celui que l’on rencontre dans le format des feuilles de papier de la série A (A4, A3, A2, A1, A0, etc.) tel que définit par l’Afnor (Association française de normalisation).

Ce qui permet, lorsqu’on respecte le ratio du début à la fin de la mise en place d’une identité graphique pour une entreprise, d’harmoniser les formats : A4 (210 x 297) pour les lettre en-tête, et A7 (74 x 105) pour les cartes de visite, par exemple.

Le nombre d’or

L’exemple précédent utilisait le rapport de la racine carré de deux. Le nombre d’or quant à lui utilise le rapport 1,618 ou (1 + racine-carré de 5) / 2.

Soit une largeur totale de 450 pixels divisée par 1,618 pour un résultat de 278 pour la colonne la plus large et 172 pixels pour la sidebar. N’hésitez pas à arrondir en 280px et 170px pour simplifier ;)

L’emploi de la section dorée donne une impression de repos, de sécurité, de constance dans un rythme indéfiniment continué. R. Bouveresse dans le Nombre d’or, Psychologie n° 77, juin 1977.

La suite de Fibonacci

C’est en cherchant à décrire la la croissance d’une population de lapins que Fibonacci a sorti la série suivante : 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181, 6765, 10946, etc.

Cette suite se caractérise par le fait que l’addition des deux premiers chiffres a le troisième comme résultat, et ainsi de suite (si j’ose dire…).

Représentation visuelle de la suite de Fibonacci

Remplir l’espace de la feuille blanche

Maintenant que vous avez décidé du meilleur rapport hauteur/largeur pour déterminer votre rectangle, il reste à occuper cet espace. On peut utiliser les mêmes techniques que pour la structure, mais les ratios paraitront souvent trop importants pour être utilisés dans des colonnes étroites ou même dans la zone de contenu selon la densité du éléments à maquetter.

La règle des tiers pour remplir votre rectangle

Parmi les techniques les plus utilisées dans les arts graphiques et la photographie, on trouve la règle des tiers qui vient à notre secours pour nous guider sur la meilleure façon de disposer les éléments de notre mise en page.

Il semble que les photographes et les peintres se soient plus que les autres appropriés cette règle de composition, mais rien n’empêche les webdesigners de s’en inspirer pour placer les éléments-clés de leur charte graphique.

Appliquer une grille en fonction du nombre de colonnes

Actuellement très en vogue dans le design des blogs de type magazine avec l’utilisation des frameworks CSS comme Blueprint, la mise en place d’une grille de mise en page en 6, 8, 12 ou 24 colonnes avec gouttière est relativement simple à mettre en place. Il s’agit de diviser la largeur de votre design en colonnes espacées par une gouttière (margin-right).

24 colonnes à la une en 950 px

Par exemple, Blueprint propose une grille pour un design fixe de 950 pixels de large divisé en 24 colonnes de 30 pixels espacées de 10 pixels, avec un interlignage de 18 pixels (soit un rapport de 150% par rapport à la taille du texte de référence — 12 pixels), soit la formule : largeur totale = (nombre de colonnes * 40) – 10 — où 40 est la valeur d’une colonne de 30px + une marge droite de 10px et où -10 est la valeur de la gouttière retranchée pour la dernière colonne.

Si vous ne voulez pas utiliser de framework prêt à l’emploi, rien ne vous empêche de créer votre propre grille que vous placerez en background de votre container principal pour l’avoir sous les yeux pendant le développement.

16 colonnes à la une en 960 px

La grille fournit par Blueprint est basée sur une largeur de 950px ou sur des multiples de 30 pixels pour les colonnes. Si vous voulez une largeur de 960 pixels, je vous propose une grille en 16 colonnes de 45 pixels chacune avec une gouttière de 16 pixels (le plus dur, c’est de tomber sur des valeurs entières, faut tâtonner un peu…), soit la formule suivante : largeur totale = (nombre de colonnes * 61) – 16.

En haut : élément de base pour la grille. En bas : le même élément répété en background sur le container.

La taille du texte comme point de référence ?

Avant de commencer à bâtir un design à partir de proportions — aussi divines soient-elles — il nous faut une valeur de référence. Il peut s’agir de la largeur d’un visuel ou d’une colonne de texte.

Dans le cas d’un blog constitué principalement d’articles, il peut être judicieux de partir du corps de texte le plus faible que vous aurez identifié : les notes de bas de pages, les mises en exergues ou les légendes des photos sont de bons candidats. Là, c’est à vous de baliser (n’ayez pas peur…) l’ensemble de votre contenu pour identifier tout les niveaux hiérarchiques.

Admettons que vous décidiez que les légendes des photos auront le corps le plus faible. La taille minimum légale pour afficher des Conditions Générales de Vente oscille entre 7 et 8 points à l’impression. A l’écran, une taille de 9 pixels semble vraiment le minimum.

La différence principale qu’il y a entre l’imprimé et le web n’est pas tant le choix restreint des polices sur ce dernier que leur rendu qui peut varier radicalement selon la taille. L’exemple le plus flagrant concerne Verdana, disgracieux à 100% mais très classe à 85%. A contrario, Times New Roman n’est pas très lisible à 85% mais « rend » très bien à 100% et au-delà.

La conséquence sur votre design web, c’est que vous ne pourrez pas jouer subtilement sur le corps et la graisse des caractères : si à l’impression toute la gamme des tailles est rendue parfaitement (quoique l’encre peut boucher les corps les plus faibles), certaines polices ne seront pas bien dessinées selon la résolution de l’écran ou les effets comme Cleartype qui peuvent être activés ou non.

Petit mais costaud

Si nous prenons 9 pixels comme taille minimum, les suites peuvent-elles nous aider à déterminer la taille des différents niveaux de titre ?

En utilisant 1,41 comme coefficient multiplicateur (racine-carré de 2) :

• H6 — 9 pixels
• H5 — 13 pixels
• H4 — 18 pixels
• H3 — 25 pixels
• H2 — 35 pixels
• H1 — 49 pixels

A noter que nous ne sommes pas obligé de distinguer les différents niveaux de titres par des tailles différentes, et que dans de nombreux cas, un changement de couleur ou de contraste peut s’avérer plus judicieux. D’autant plus que pour les moteurs de recherche la taille n’est pas un critère discriminant ;)

Par ailleurs, tous les niveaux de titre ne sont pas systématiquement utilisés, ce qui peut permettre de réduire l’écart entre h6 et h1.

Déterminer la largeur des colonnes

Première méthode : Pour déterminer la largeur des colonnes de texte, c’est encore plus simple : une fois que la taille des textes est définit, il suffit de compter le nombre de mot que les colonnes devront accueillir, sachant que 15 mots par ligne est parfait pour la lecture.

Ainsi, en fonction de la taille du texte et du nombre de caractères par ligne, nous avons une largeur de colonne qui peut servir de base pour induire les autres valeurs par le jeu du coefficient multiplicateur du nombre d’or ou de tout autre ratio.

Notez toutefois qu’une ligne de 15 mots à 9px n’est pas vraiment d’une lecture aisée, et qu’il sera sans doute nécessaire de diviser par 2 le nombre de mots. Dans ce cas, pensez aussi à dimininuer l’interlignage pour conserver un gris typographique harmonieux.

Deuxième méthode : On peut également partir d’une largeur de colonne en s’inspirant des chiffres vus plus haut pour les niveaux de titre. Si on les multiplie par 10, on obtient les valeurs suivantes : 90, 130, 180, 250, 350 et 490 que l’on peut utiliser comme suit :

• Colonne principale : 490 pixels,
• Barre latérale 250 pixels,
• Gouttière : 20 pixels.
• Largeur totale : 760 pixels.

On peut en profiter pour ajouter un header et un footer :

• Header : 760 x 90,
• Footer : 760 x 30 (multiple de 90).

Exemple de design bâti sur la racine-carré de 2

Pour conclure

L’application d’une suite mathématique ou d’un ratio pour contruire une grille de mise en page est rarement mis en application sur le web autant en raison des contraintes imposées par la grille elle-même que par la nature dynamique d’un site web : difficile, par exemple, de prévoir des images pour rythmer la mise en page des articles d’un site, si le client a la liberté — via le CMS — de ne pas les mettre. Il faut donc anticiper la présence ou l’absence d’image.

Une des contraintes fortes qui limitent l’application d’une grille sur le web, c’est le fait que contrairement à l’imprimé qui possède toujours une hauteur, le site web, lui n’en n’a cure : chaque page peut avoir une hauteur différente. Il faudra donc veiller à ce que la grille de mise en page s’exprime par palier pour être visible tout au long du défilement de la page et pas seulement dans le haut de la page.

Toutefois, les bénéfices apportées par les tracés régulateurs en terme d’harmonie et d’équilibre tout au long de la navigation, font pencher largement la balance en leur faveur. Une fois mise en place, la grille impose son rythme pour le moindre élément, ce qui évite de se poser des questions existentielles sur la taille d’un champs texte ou sur l’emplacement d’une nouvelle rubrique.

Bibliographie

Il s’agit surtout de livres assez anciens. Si vous avez des références plus actuelles n’hésitez pas à en faire profiter tout le monde dans les commentaires ;)

• Maquette et mise en page — Pierre Duplan et Roger Jauneau — Editions du Moniteur, 1992 (ISBN 2 281 31051 5),
• Typographie — Emil Ruder — A. Niggli Ltd, 1988 (ISBN : 3 7212 0043 8),
• Le secrétariat de rédaction — Louis Guéry — Editions du CFPJ, 1990 (ISBN 2 85900 045 3),
• Typographie, du plomb au numérique — Jean-Luc Dusong et Fabienne Siegwart — Dessain et Tolra, 1996 (ISBN 2 04 021744 4),
• Grids, the structure of graphic design — André Jute — Rotovision, 1996 (ISBN 2 88046 277 0),
• Tous les numéros d’Etapes Graphiques…

Articles sur le même sujet

• Frameworks CSS + Reset CSS : design from scratch
• Créer le logo et la charte graphique de mon nouveau blog en 4 étapes
• 5 règles simples pour améliorer l'affichage de vos textes
• Quelques notes sur la conception d'une charte graphique
• Calculer une grille de mise en page « typo » avec le nombre d'Or

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

• Quelques notes sur la conception d'une charte graphique
• Détourer les cheveux avec Photoshop
• Nombre d'or, suite de Fibonacci et autres grilles de mise en page pour le design web
• 5 règles simples pour améliorer l'affichage de vos textes
• Smashing Magazine : des CSS plein les yeux