Ce que doit contenir une charte graphique pensée pour le web

Une charte graphique imprimée dans un PDF de quarante pages ne sert pas à grand-chose si le site ne la respecte pas. Pour le web, une charte doit être pensée pour être appliquée : par le développeur qui construit le site, par l'équipe qui publie chaque semaine, par la personne qui prépare un visuel pour les réseaux sociaux. Voici ce qu'elle doit contenir.

Le logo et ses déclinaisons

Un seul fichier de logo ne suffit pas. Prévoyez :

• une version horizontale et une version compacte pour les petits espaces ;
• une version claire et une version foncée, pour tous les fonds ;
• un symbole seul, utilisé comme icône du site et photo de profil ;
• des fichiers vectoriels (SVG) pour le web, et les règles de marge et de taille minimale.

Les couleurs, en codes utilisables

Chaque couleur doit être donnée en code hexadécimal pour le web, en plus des références d'impression. Au-delà de la couleur principale, définissez :

• les couleurs de fond et de texte, avec un contraste suffisant pour rester lisible ;
• les couleurs d'action : boutons, liens, états de survol ;
• les couleurs de statut : succès, avertissement, erreur ;
• si besoin, une version adaptée au mode sombre.

La typographie

Deux familles de polices suffisent presque toujours : une pour les titres, une pour le texte. La charte précise les graisses utilisées, les tailles de chaque niveau de titre sur ordinateur et sur mobile, et l'interlignage. Vérifiez que les polices choisies sont disponibles pour le web et que leur licence l'autorise.

Les composants

C'est la partie qui manque le plus souvent, et celle qui fait gagner le plus de temps. Une charte web décrit les éléments qui reviennent sur chaque page :

• boutons principaux et secondaires ;
• champs de formulaire et messages d'erreur ;
• cartes, encadrés, tableaux ;
• en-tête et pied de page.

Sur WordPress, ces composants se traduisent directement en styles de blocs. Votre équipe compose ensuite ses pages avec des éléments déjà conformes, sans risquer de casser la mise en page.

Les images et les icônes

Définissez un style d'image (photos réelles, illustrations, ambiance, cadrage) et un jeu d'icônes cohérent. Précisez les formats à utiliser sur le site et sur chaque réseau social, pour éviter les visuels recadrés au hasard.

Le ton

Le graphisme ne fait pas tout. Quelques lignes sur la façon de s'adresser à vos clients (tutoiement ou vouvoiement, niveau de technicité, longueur des phrases) donnent une cohérence à l'ensemble de vos textes.

Le format de livraison

Une charte utile pour le web se livre avec :

• les fichiers sources et les exports dans tous les formats nécessaires ;
• un document de référence court et visuel ;
• les couleurs, polices et espacements traduits en variables directement utilisables par le développeur.

En résumé

Une bonne charte graphique pour le web est une boîte à outils plus qu'un manuel. Quand le graphisme et le développement sont pensés ensemble, la charte passe directement dans le site et votre image reste cohérente sur chaque page et chaque publication.