Ce que recouvre l’expression charte graphique site web varie énormément d’un projet à l’autre. Chez certains, elle se réduit à un logo et deux codes couleur notés dans un courriel. Chez d’autres, elle prend la forme d’un document de quarante pages décrivant chaque composant d’interface, ses états et ses règles d’usage. Entre ces extrêmes, la version utile pour un site web tient généralement en une quinzaine de pages précises, conçues pour être appliquées et non pour impressionner.
L’enjeu est simple : sans référentiel écrit, chaque nouvelle page dérive un peu. Une teinte légèrement différente ici, un bouton arrondi autrement là, un titre en 26 pixels alors que l’échelle prévoyait 24. Au bout de deux ans, le site ressemble à une accumulation de décisions individuelles, et le sentiment de sérieux qu’il inspirait s’effrite sans qu’on sache exactement pourquoi.
Charte graphique site web : ce que contient réellement le document
Une charte destinée au web se distingue nettement d’une charte d’identité classique pensée pour l’imprimé. Les contraintes ne sont pas les mêmes : écrans de tailles variables, rendu des couleurs dépendant du matériel, interactions, états multiples d’un même élément, accessibilité obligatoire pour de nombreux acteurs.
Le document se structure autour de sept familles. Les fondations de marque d’abord : logo, versions autorisées, zones de protection, usages interdits. Les couleurs ensuite, avec leurs valeurs exactes et leurs rôles définis. La typographie, avec les familles retenues, l’échelle de tailles et les règles d’usage. Les principes de mise en page, grille et espacements. Les composants d’interface, boutons, champs, cartes, messages. Le traitement des images et des pictogrammes. Enfin le ton et l’écriture, souvent oubliés alors qu’ils font autant l’identité que le graphisme.
Une charte utile décrit des règles applicables, pas des intentions. Écrire que la marque est « moderne et chaleureuse » n’aide personne. Écrire que les angles des blocs mesurent huit pixels, que les boutons principaux emploient une seule teinte et que les photos privilégient la lumière naturelle donne des consignes vérifiables. Le test de qualité tient en une question : deux designers différents, munis du même document, produiraient-ils des pages cohérentes entre elles.
Cadrer avant de dessiner
La tentation d’ouvrir immédiatement un outil de maquettage coûte cher. Une phase de cadrage courte, deux à quatre heures d’entretien bien menées, oriente l’ensemble du travail et évite les allers-retours interminables sur des propositions décorrélées du besoin.
Le cadrage répond à cinq questions. À qui s’adresse le site, dans quel contexte d’usage, et avec quel niveau de familiarité numérique. Quelle perception la structure veut-elle susciter, exprimée en trois adjectifs maximum, avec leurs contraires assumés. À quoi ressemble le paysage concurrentiel, non pour s’y fondre mais pour éviter de reproduire les mêmes codes. Quelles contraintes techniques et réglementaires s’imposent, notamment en matière d’accessibilité. Enfin quels contenus existent réellement, car une identité conçue pour de belles photographies s’effondre si le commanditaire ne dispose que de clichés amateurs.
L’atelier de références visuelles complète utilement ces entretiens. Le principe consiste à présenter une vingtaine de propositions contrastées et à demander des réactions immédiates, positives comme négatives, en demandant systématiquement pourquoi. Les rejets sont souvent plus informatifs que les préférences : ils délimitent le territoire interdit et évitent de perdre des semaines sur une direction condamnée d’avance.
L’inventaire de l’existant fait partie du cadrage et se néglige trop souvent. Recenser les supports déjà produits, enseigne, documents commerciaux, publications sur les réseaux, révèle des usages installés qu’une charte ne peut ignorer sans créer une rupture brutale. Une couleur employée depuis dix ans par une structure a une valeur de reconnaissance qu’aucune considération esthétique ne remplace du jour au lendemain. Décider consciemment de la conserver, de la faire évoluer légèrement ou de la remplacer relève d’un arbitrage explicite, à documenter dans la charte plutôt qu’à trancher en silence dans un coin de maquette.
Le moodboard, avec précaution
Une planche d’ambiance sert à valider une direction, pas à promettre un résultat. Le danger réside dans le décalage entre des images inspirantes empruntées à des univers très différents et le rendu final, contraint par les contenus réels. Annoncer clairement que la planche traduit une atmosphère, et non une maquette, évite une déception coûteuse au moment de la première présentation.
Construire le système graphique
La charte se bâtit ensuite couche par couche, en allant du plus général au plus détaillé. L’ordre importe, car chaque niveau s’appuie sur le précédent.
| Couche | Décisions à prendre | Livrable attendu |
|---|---|---|
| Couleurs | Teintes de marque, neutres, statuts | Palette avec valeurs et rôles |
| Typographie | Familles, échelle, graisses | Échelle documentée et exemples |
| Grille | Colonnes, marges, points de rupture | Schémas par taille d’écran |
| Espacement | Unité de base, multiples | Barème d’espacements |
| Composants | Boutons, champs, cartes, alertes | Bibliothèque avec états |
| Iconographie | Style, épaisseur, taille | Jeu de pictogrammes cohérent |
| Images | Cadrage, traitement, formats | Règles et exemples commentés |
La palette mérite une attention particulière car elle porte l’essentiel de la reconnaissance. Une structure de palette efficace comporte peu de couleurs de marque, deux le plus souvent, complétées par une série de gris et par des teintes fonctionnelles réservées aux messages de succès, d’avertissement et d’erreur. Chaque couleur reçoit un rôle écrit, ce qui interdit l’usage décoratif improvisé. Le détail de cette construction, contrastes compris, fait l’objet de notre article sur le choix des couleurs d’un site.
L’échelle typographique et le barème d’espacement forment ensuite l’ossature. Travailler avec une unité de base, souvent quatre ou huit pixels, produit une régularité perceptible sans effort et facilite le travail des développeurs. Les composants viennent en dernier, et leur documentation doit couvrir tous les états : repos, survol, focus clavier, désactivé, chargement, erreur. L’état de focus est le plus souvent oublié, alors qu’il conditionne l’usage au clavier et donc l’accessibilité du site entier.
Le mode sombre pose une question désormais courante, et il vaut mieux la traiter dès la construction du système que deux ans plus tard. Un thème sombre ne s’obtient pas en inversant les valeurs : les couleurs vives paraissent plus agressives sur fond foncé, les ombres perdent leur fonction de relief, et les gris doivent être recalculés pour conserver des écarts perceptibles. Prévoir dès le départ des rôles de couleur abstraits, du type fond principal ou texte secondaire, plutôt que des teintes figées, permet de brancher un second thème sans reprendre chaque composant un par un.
Un système bien construit sert directement la lisibilité des pages, puisqu’il fournit les outils de hiérarchisation prêts à l’emploi. Les principes de hiérarchie visuelle se traduisent alors en valeurs concrètes plutôt qu’en intentions, ce qui rend leur application beaucoup plus fiable d’une page à l’autre.
Documenter et transmettre
Une charte que personne ne lit ne sert à rien. Le format de restitution compte donc autant que le contenu, et il dépend des personnes qui l’utiliseront.
Trois formats coexistent. Le document imprimable convient aux validations et aux échanges avec des interlocuteurs non techniques ; il vieillit vite. La bibliothèque dans un outil de maquettage sert les designers et permet de propager une modification à toutes les maquettes. La documentation en ligne, alimentée directement par le code du site, constitue la version la plus robuste pour les équipes techniques, puisqu’elle ne peut pas diverger du produit réel. Beaucoup de projets combinent les deux derniers formats, le premier n’étant produit que si le commanditaire l’exige.
Quelle que soit la forme, la structure gagne à suivre une logique constante : pour chaque élément, à quoi il sert, comment il se comporte, ce qu’il ne faut pas en faire. Les contre-exemples valent leur place : montrer un bouton mal utilisé, avec l’explication du problème, prévient mieux qu’une consigne abstraite. Chaque page de la charte doit répondre à une question pratique que se posera un utilisateur du document.
La transmission se prépare également. Une session de présentation d’une heure, où l’on parcourt le document en construisant une page ensemble, ancre bien plus les règles qu’un envoi de fichier. Prévoir ce temps dans la proposition initiale évite qu’il soit sacrifié en fin de projet, quand le budget se tend. Ce poste apparaît d’ailleurs dans les fourchettes tarifaires du webdesign au même titre que la conception elle-même.
Faire vivre la charte dans le temps
Une charte n’est pas un monument. Elle évolue avec le site, les contenus et les usages, et son intérêt tient à sa capacité à absorber ces changements sans se contredire.
Trois pratiques simples assurent cette longévité. La première consiste à numéroter les versions et à dater chaque modification, avec une ligne expliquant la raison du changement. La deuxième à désigner une personne responsable des arbitrages : sans propriétaire identifié, les exceptions s’accumulent et le document perd son autorité. La troisième à prévoir une revue annuelle, courte, qui compare le site réel aux règles écrites et corrige l’un ou l’autre selon ce qui a le plus de sens.
Les écarts constatés lors de ces revues sont instructifs. Un composant systématiquement détourné signale généralement un manque dans la bibliothèque plutôt qu’une indiscipline des équipes. Une couleur ajoutée hors palette révèle souvent un besoin fonctionnel non anticipé. Traiter ces signaux comme des demandes d’évolution, plutôt que comme des fautes, maintient la charte utile et respectée.
Le ton éditorial mérite le même soin que le reste, et sa dérive se remarque autant qu’un écart de couleur. Fixer quelques règles suffit : vouvoiement ou tutoiement, longueur moyenne des titres, usage ou non des abréviations, formulation des messages d’erreur. Un site dont les pages alternent entre un registre familier et un jargon administratif donne une impression de désordre que le graphisme ne rattrape pas. Trois exemples commentés, un bon et deux mauvais, transmettent cette cohérence de ton plus efficacement qu’une page de principes abstraits.
Reste une question de proportion. Une structure de trois personnes n’a pas besoin du même appareil qu’un service public gérant quarante sites. Pour un site vitrine classique, une charte de dix à quinze pages, précise sur les couleurs, la typographie, les espacements et une douzaine de composants, couvre l’essentiel des besoins pour plusieurs années. Viser plus lourd produit un document impressionnant que personne n’ouvrira, ce qui revient exactement au même que de n’en avoir aucun.