Charte graphique : la base d’un site cohérent

Votre site a été fait en plusieurs fois. La page d'accueil a un bleu, la page contact un autre bleu, les boutons changent de forme d'une page à l'autre, et le logo n'a pas la même taille partout. Chaque modification a été faite « à l'œil », dans l'urgence. Résultat : le site ressemble à un patchwork, et vos visiteurs, sans savoir pourquoi, lui font moins confiance.

La solution tient en un document : la charte graphique. Elle fixe une fois pour toutes les règles visuelles de votre site, pour que tout ce que vous ajoutez, aujourd'hui ou dans deux ans, reste cohérent, quel que soit celui qui le fait.

Ce qu'est (et n'est pas) une charte graphique

La charte graphique est le document de référence qui rassemble les règles d'usage des éléments visuels d'une marque. Elle ne se confond pas avec l'identité visuelle, qui est l'ensemble des signes qui vous représentent (logo, couleurs, style). La charte, elle, dit comment les utiliser. Pour un site, on parle de charte graphique web : c'est la déclinaison de votre identité sur écran, avec des règles propres aux pages, aux boutons et aux formulaires.

Ce que contient une charte graphique de site web

Cinq familles d'éléments reviennent dans presque toutes les chartes. Le tableau ci-dessous les résume, avec ce qu'on y définit et l'erreur la plus courante.

Ce que la charte vous fait gagner

• De la cohérence. Votre site, vos réseaux sociaux, vos e-mails et vos documents parlent d'une seule voix visuelle.
• De la confiance. Un site harmonieux donne une impression de sérieux, avant même que le visiteur ait lu un mot.
• Du temps. Chaque nouvelle page, chaque publicité, chaque article se fait plus vite quand les règles sont écrites.
• De l'indépendance. Si vous changez de prestataire, la charte lui permet de reprendre le site sans le défigurer.

Penser au web dès la charte

Une charte pensée pour l'imprimé ne suffit pas toujours pour un site. Trois points méritent une attention particulière :

• Le contraste. Un texte gris clair sur fond blanc est joli mais illisible pour beaucoup de visiteurs. Le référentiel d'accessibilité WCAG recommande un contraste minimal de 4,5 pour 1 pour le texte courant.
• L'adaptation à tous les écrans. Les tailles de titres et l'espacement doivent rester lisibles sur mobile.
• Le poids des éléments. Polices et visuels trop lourds ralentissent la page. Ce sujet touche aux performances : voir notre guide sur les Core Web Vitals.

Construire sa charte en quatre étapes

1. Rassemblez l'existant. Logo en fichiers de bonne qualité, couleurs utilisées, polices, supports actuels. Beaucoup d'entreprises ont déjà plus de matière qu'elles ne le pensent.
2. Faites le tri. Gardez une couleur principale, deux ou trois secondaires, deux polices au plus. Moins il y a de choix, plus le résultat est cohérent.
3. Définissez les composants. Boutons, liens, titres, formulaires : une règle simple pour chacun, avec un exemple.
4. Écrivez-la sur une page. Une charte de quelques pages, claire, vaut mieux qu'un document de cinquante pages que personne n'ouvre.

Charte et cahier des charges

La charte trouve sa place dans le cahier des charges de votre site : elle indique à votre prestataire le style à respecter. Si elle n'existe pas encore, la demander fait partie des questions à poser avant de signer. Pour situer ce poste dans un budget, lisez combien coûte la création d'un site internet.

À lire aussi : Quelles images pour votre site internet ? ; UX design : 15 principes pour un site clair.