Guide stylistique — Exemple de charte graphique et éditoriale

Lorsqu’on réalise le design d’un site web, il est d’usage de formaliser les choix créatifs retenus en répertoriant les éléments qui composent l’identité graphique et éditoriale dans un guide stylistique. Son objectif est de garantir à l’utilisateur final une expérience visuelle et intellectuelle cohérente tout au long de la navigation. Ce guide stylistique s’adresse généralement aux professionnels chargés de la réalisation technique du site (développeurs, intégrateurs web, etc.) et à ceux qui devront intégrer les contenus au quotidien, qu’il s’agisse des textes et de tout élément graphique ou multimedia. Il peut également préciser les valeurs de la marque et son positionnement vis-à-vis de ses concurrents. C’est dire l’importance de ce guide qui servira souvent de référence dans l’entreprise.

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.