Accueil › Blog › Article · Lecture 7 minutes
Article · Lecture 7 minutesCharte graphique : pourquoi la définir avant de créer votre site web
Beaucoup de professionnels commandent leur site internet sans logo stable, sans palette de couleurs définie, sans savoir si leur police de caractères tient sur fond sombre. Résultat : un site qui ressemble à une improvisation visuelle, impossible à décliner sur d'autres supports. La charte graphique n'est pas une formalité qu'on remplit après coup — c'est le socle sur lequel repose tout le reste.
Depuis 2011, j'accompagne des indépendants, des artisans et des PME normandes dans la création de leur présence en ligne. Et l'une des erreurs les plus fréquentes que j'observe, c'est de démarrer un projet de site web sans avoir réfléchi à la charte graphique. Le site est livré, le client est content — puis six mois plus tard il me rappelle parce que la carte de visite ne ressemble pas au site, que le bleu de l'impression diffère du bleu de l'écran, et que le logo pixélise à l'impression en grand format. Ces problèmes ne relèvent pas de la malchance. Ils arrivent parce que le travail d'identité visuelle a été sauté.
Pourquoi la charte graphique doit précéder la création du site web
Un site web est un assemblage de décisions visuelles : quelle couleur pour le fond, pour les boutons, pour les liens ? Quelle police pour les titres, pour le corps de texte ? Si ces décisions ne reposent sur rien, elles seront prises au hasard — par le développeur, par le thème WordPress par défaut, ou par une tendance graphique qui sera démodée dans dix-huit mois.
La charte graphique répond à ces questions en amont. Elle fige les choix : le vert utilisé a un code Hex précis (#27ae60, pas un vert approximatif), la police est nommée et documentée, le logo existe en version claire ET en version sombre. Quand le webdesigner reçoit la charte, il n'improvise pas : il applique. Le résultat est cohérent, produit plus rapidement, et déjà pensé pour fonctionner sur d'autres supports.
Sans cette base, chaque prestataire interprète à sa façon. L'imprimeur utilise un bleu différent de celui du site. Les réseaux sociaux affichent un logo mal proportionné. Votre site internet devient une île visuelle, déconnectée du reste de votre communication. La correction a posteriori coûte deux à trois fois plus cher que de faire les choses dans le bon ordre.
Ce que contient une charte graphique pour un site web professionnel
Une charte graphique n'est pas un document de soixante pages réservé aux grandes enseignes. Pour un indépendant ou une TPE, elle peut tenir en quatre à six pages et remplir parfaitement son rôle. Voici les éléments qui la composent.
Le logo et ses variantes
Un logo fonctionnel existe en au moins trois variantes : version principale (couleur), version monochrome (pour les documents imprimés en noir et blanc ou les tampons), et version inversée (blanc sur fond sombre, pour les en-têtes foncés et les goodies). Le fichier source doit être vectoriel — SVG, AI ou EPS — ce qui permet de le redimensionner à n'importe quelle taille sans perte de qualité. Un logo livré uniquement en JPG ou PNG est un fichier d'usage, pas un fichier source. S'il n'y a pas de vectoriel, l'identité visuelle n'est pas complète.
La palette de couleurs
Une palette bien construite comprend une couleur principale (celle qu'on associe immédiatement à la marque), une couleur secondaire (pour les accents, les boutons, les encadrés) et une teinte neutre (fond, texte). Chaque couleur est documentée avec ses codes précis :
- Hex : pour l'affichage web (ex. #2c3e50)
- CMJN : pour l'impression offset (ex. 96/78/44/38)
- RGB : pour les usages multimédias et les exports numériques
- Pantone (optionnel) : pour les productions premium ou les objets promotionnels
Sans ces codes, un imprimeur livrera un résultat approximatif. Avec ces codes, tout le monde parle le même langage — du développeur front-end à l'enseigne lumineuse de votre devanture.
Les typographies
On distingue la typographie d'affichage (titres H1, H2) et la typographie de corps (texte courant). Un choix raisonnable se limite à deux familles de polices, rarement trois. La charte précise les graisses autorisées (Regular, Medium, Bold), les tailles minimales et les contextes d'usage. Pour le web, elle indique aussi si la police est disponible en auto-hébergement (format WOFF2) — ce qui évite d'appeler un service tiers et améliore à la fois la performance de la page et la conformité RGPD.
Les règles d'usage et d'espacement
C'est la partie la plus souvent omise, et pourtant celle qui fait la différence au quotidien. Les règles d'usage précisent les associations interdites (ne jamais mettre le logo jaune sur fond blanc, ne jamais étirer le logo horizontalement), les marges minimales autour du logo, l'espacement entre les éléments typographiques. Elles incluent parfois des exemples d'application sur des supports concrets : carte de visite, signature mail, en-tête de devis, profil LinkedIn.
Ce qui arrive concrètement quand on saute cette étape
J'ai repris plusieurs projets après d'autres prestataires qui avaient sauté l'étape de la charte graphique site web. Voici les symptômes que je retrouve systématiquement :
- Le logo n'existe qu'en JPG basse résolution. Impossible de l'utiliser sur une bâche, un véhicule de société ou un tampon sans qu'il pixélise.
- Les couleurs du site et celles des supports imprimés sont proches mais différentes. Ce décalage est visible, surtout pour les clients fidèles qui voient les deux supports côte à côte.
- La typographie du site est une Google Font chargée depuis les serveurs de Google, absente dans les logiciels bureautiques de l'entreprise. Les en-têtes Word et les factures affichent donc une police différente, créant une rupture d'image invisible mais réelle.
- Quand le client veut créer un deuxième site — pour un second marché ou une activité annexe — il n'existe aucune référence commune. Chaque support devient un univers isolé.
Ces situations sont coûteuses à corriger, parce qu'elles impliquent de reprendre des supports déjà imprimés, de recoder des variables CSS, parfois de refaire un logo de zéro. L'investissement initial dans une charte graphique évite ces reprises.
Charte légère ou charte complète : que choisir selon son contexte ?
Tout le monde n'a pas besoin du même niveau de formalisation. Voici les deux approches les plus courantes.
Charte légère — pour un indépendant, une profession libérale ou un artisan qui démarre : logo en vectoriel, palette de trois couleurs avec codes Hex et CMJN, une ou deux polices documentées. Document de deux à quatre pages. Coût : dès 500 €. Suffisant pour un site vitrine, une carte de visite et une présence cohérente sur les réseaux sociaux.
Charte complète — pour une PME, un commerce avec plusieurs points de vente ou une marque dotée de produits physiques : toutes les déclinaisons du logo, palette étendue avec couleurs tertiaires, typographies primaires et secondaires, exemples d'application sur une dizaine de supports, règles détaillées sur les zones de protection et les usages interdits. Document de vingt à cinquante pages. Coût : entre 1 500 et 4 000 € selon la complexité. Permet d'onboarder n'importe quel prestataire sans perdre le contrôle de l'image de marque.
Dans les deux cas, la charte est livrée avec tous les fichiers sources. Un document sans fichiers sources n'est pas une charte — c'est un PDF inutilisable dès que vous changerez de prestataire.
Comment j'intègre la charte graphique dans mes projets web
Dans ma pratique, la charte graphique est abordée systématiquement avant la première maquette. Si le client arrive avec une charte existante, je l'analyse et j'identifie ce qui est directement utilisable en web — codes Hex, polices disponibles en WOFF2, logo en SVG. Si la charte n'existe pas ou est incomplète, je propose une phase d'identité visuelle avant de passer au design du site.
Cette approche évite les allers-retours inutiles. Quand les couleurs et les polices sont figées avant la première maquette, la direction artistique est validée plus vite et les retours portent sur la mise en page — pas sur « est-ce qu'on pourrait essayer un bleu différent ? ». Le projet y gagne en délai et en budget, et le résultat est cohérent dès la livraison.
Pour aller plus loin sur la préparation d'un projet web, mon article sur la rédaction du cahier des charges couvre cet aspect avec un angle complémentaire.
Demandez un devis pour votre charte graphique et votre site web
Que vous partiez de zéro ou que vous souhaitiez remettre à plat une identité visuelle existante, je peux vous accompagner sur l'ensemble du projet : charte graphique, design du site, intégration et référencement. Tous mes projets reposent sur une identité visuelle solide, pensée pour durer.
Tarifs indicatifs : identité visuelle complète dès 500 €, site vitrine dès 1 200 €. Une prestation combinée identité + site est souvent plus économique qu'une commande séparée, et le résultat est cohérent dès le premier jour.
Discutons de votre projet Voir mes prestations