Charte graphique web : ce que Digitaalis fait pour votre site, et ce qu’il ne fait pas

On me demande souvent un logo. Je réponds non, et ce non mérite une explication. Un visiteur se fait une opinion sur l’attrait d’une page en 50 millisecondes (Lindgaard et al., 2006). Ce qu’il juge dans ce laps de temps, ce n’est pas votre logo. C’est l’ensemble : les couleurs, les polices, l’espace entre les blocs, le bouton qu’on a envie de toucher. Cet ensemble a un nom, la charte graphique web, et il est souvent confondu avec deux autres choses.

Dans cet article, je remets les trois niveaux dans l’ordre : stratégie de marque, identité de marque, charte graphique web. Je vous dis ensuite ce que je fais pour votre site, ce que je ne fais pas, et vers qui je vous envoie. Et je vous raconte, sans nom, un travail récent mené à partir d’un simple fichier SVG pour une créatrice de bijoux de Collioure.

Stratégie de marque, identité de marque, charte graphique : trois mots, trois métiers

Les trois expressions se retrouvent dans la même phrase chez beaucoup de prestataires. Elles ne décrivent pourtant ni le même travail, ni le même livrable, ni le même métier.

La stratégie de marque répond à « pourquoi et pour qui »

La stratégie de marque, c’est le fond. À qui vous vendez, ce qui vous distingue, la promesse que vous tenez, le ton que vous employez. Elle tient souvent en quelques pages et ne contient aucune couleur. C’est le travail d’un consultant en marketing, d’une agence de branding, ou le vôtre, autour d’une table, avec du temps.

L’identité de marque, c’est le logo et tout ce qui va avec

L’identité de marque traduit cette stratégie en signes : le nom, le logo, ses déclinaisons, parfois un univers photographique et un packaging. C’est un métier de graphiste. Un bon logo se dessine, se teste en petit et en noir et blanc, se décline en plusieurs versions. Il vous suivra sur la vitrine, les cartes, les étiquettes et le site.

La charte graphique web, c’est la traduction de tout ça sur un écran

La charte graphique web prend le logo et la stratégie, et décide comment ils vivent sur un site. Quelles couleurs pour les fonds, les titres, les boutons. Quelles polices, à quelles tailles, sur mobile et sur ordinateur. Quels espacements, quels états au survol, quel contraste. C’est un document technique autant qu’esthétique, et c’est mon métier.

Une analogie que j’utilise souvent : la stratégie de marque, c’est la raison pour laquelle on construit la maison, et pour qui. L’identité, c’est l’architecture et la façade. La charte web, ce sont les finitions que le visiteur touche : les poignées, les interrupteurs, la couleur des murs. J’avais déjà utilisé cette image dans votre site WordPress expliqué comme une maison.

Pourquoi la charte web est le maillon qui manque le plus souvent

Beaucoup de TPE ont une stratégie, même informelle. Presque toutes ont un logo. Très peu ont une charte web. Le résultat se voit sur des centaines de sites de commerçants et d’artisans du département.

Un logo posé sur un thème par défaut

Le cas le plus fréquent : un beau logo, payé à un graphiste, posé dans l’en-tête d’un thème WordPress jamais réglé. Le bleu du thème côtoie le bordeaux du logo. Les titres sont dans la police du thème, le logo dans une autre. Rien n’est faux, mais rien ne va ensemble.

Trois polices, quatre couleurs de bouton, zéro règle

Le second cas : le site a été fait page par page, par plusieurs mains, sans document de référence. Chaque page a sa police, chaque bouton sa couleur. 94 % des raisons de rejet d’un site sont liées au design, et non au contenu (Sillence, Northumbria University, 2004). Près d’un internaute sur deux cite d’abord l’apparence quand on lui demande pourquoi il fait confiance à un site (Stanford Web Credibility Project, 2002).

Le visiteur juge en 50 millisecondes, et surtout sur mobile

Les 50 millisecondes citées plus haut se jouent le plus souvent sur un téléphone. 64,7 % des visites web en France partent d’un mobile (StatCounter, janvier 2025), et le mobile représente 79 % du temps de navigation quotidien des Français (Médiamétrie, 2025). Une charte pensée uniquement pour un écran d’ordinateur est une charte à moitié faite.

La cohérence paie aussi en chiffres. Les entreprises qui présentent leur marque de façon cohérente déclarent jusqu’à 33 % de chiffre d’affaires en plus (Marq, 2021). L’édition précédente de la même enquête donnait 23 % (Lucidpress, 2019). L’ordre de grandeur varie, la direction ne change pas.

Un test simple à faire ce soir : ouvrez votre site sur votre téléphone, puis posez une carte de visite à côté. Si les couleurs et les lettres ne racontent pas la même histoire, votre charte web n’existe pas encore.

Ce que je fais : des typographies et des couleurs en harmonie sur votre site

Chaque site que je livre a sa charte web. Elle est comprise dans chaque pack, du plus simple au plus complet, parce qu’un site sans charte est un site que vous ne pourrez pas faire évoluer sans le casser. Voici concrètement ce que je produis.

Partir de votre logo, jamais d’une page blanche

Je commence par votre logo, dans le meilleur format possible : un SVG, sinon un PNG en haute définition. J’en extrais les couleurs exactes, puis je cherche ce qui manque. La plupart des logos de TPE n’ont qu’une couleur. Un site a besoin d’une deuxième, la couleur d’accent, pour les boutons, les prix et les liens. Elle se choisit sur le cercle chromatique, souvent en complémentaire de la couleur principale, et se teste directement sur le logo avant toute maquette.

Je fixe ensuite une répartition. Une palette de quatre couleurs avec des ratios d’usage vaut mieux que dix couleurs sans règle. Le contraste entre texte et fond est vérifié selon la norme du W3C : 4,5:1 minimum pour le texte courant, 3:1 pour les gros titres (W3C, WCAG 2.2). Les logos en sont exemptés, pas vos boutons.

Deux ou trois polices, pas plus

Une police pour les titres, une pour le texte, parfois une troisième pour une accroche. Je les choisis sur Google Fonts, ce qui garantit qu’elles se chargent vite et s’affichent pareil chez tout le monde. Je présente toujours deux ou trois pistes sur un vrai texte de votre activité, jamais sur du faux latin. Le choix se fait en regardant votre nom, vos produits et votre bouton d’achat, pas un alphabet.

Le guide web : tailles, espacements, boutons et leurs états

C’est la partie que les clients ne demandent pas et qui change tout. Pour chaque élément, une taille sur ordinateur, sur tablette et sur mobile. Un texte courant qui ne descend jamais sous 16 px. Une échelle d’espacements en multiples de 8 px, invisible pour le visiteur mais responsable de l’impression de propreté. Un bouton d’action avec ses quatre états : normal, survol, clavier, indisponible. Et une règle que je répète à chaque projet : un seul bouton d’action par écran, celui qui compte.

Tout cela est ensuite réglé dans la palette globale et les réglages typographiques de WordPress et de Kadence, jamais codé en dur page par page. Le jour où vous ajoutez une page, elle hérite de la charte sans effort.

Le kit graphique se valide avant la première page du site. Pas de maquette, pas d’intégration tant que la palette et les polices ne sont pas approuvées par écrit. Cela évite de repeindre un site entier pour un vert qui ne plaisait pas.

Ce que je ne fais pas, et vers qui je vous envoie

Je ne dessine pas de logo. Je ne trouve pas de nom. Je ne rédige pas de plateforme de marque, je ne conçois pas de packaging et je ne fais pas de shooting photo. Ce sont des métiers à part entière, avec leurs outils, leur temps et leur prix. Les faire à moitié entre deux pages WordPress serait vous rendre un mauvais service.

Ce que je fais, c’est travailler à partir de ces livrables. Si vous avez déjà un logo, même ancien, même en un seul fichier, j’en tire le maximum : déclinaisons de couleurs, versions sur fond clair et sur fond foncé, zone de protection, taille minimale à l’écran. Si vous n’en avez pas, je vous oriente vers un graphiste indépendant ou une agence de branding, et je reprends la main quand le logo est prêt.

Vous n’avez pas de logo ? L’ordre à respecter : le graphiste d’abord, le site ensuite. Un site conçu avant le logo devra être repris quand le logo arrivera. Un logo conçu avant le site se décline naturellement dessus.

Cette frontière a un autre avantage : vous savez exactement ce que vous achetez. Une charte web n’est pas une identité de marque au rabais. C’est un livrable précis, avec des valeurs en pixels et en hexadécimal, que n’importe quel intégrateur pourra reprendre après moi.

Cas concret : d’un logo SVG à une charte web pour une créatrice de bijoux de Collioure

Ce mois-ci, j’ai préparé une charte web pour une boutique de bijoux faits main à Collioure. La créatrice voulait repositionner sa boutique en marque. Elle avait un logo, dont elle était contente, et rien d’autre. Un devis d’agence pour une refonte complète de l’identité avait été jugé trop cher. Je raconte ici la méthode, pas le résultat commercial : c’est le procédé qui vous intéresse.

Le point de départ : un logo bordeaux, tout au même niveau

Le logo combinait un mot en écriture manuscrite et un mot en capitales, le tout en bordeaux sur fond crème. Élégant, mais sur un site, tout se retrouvait au même niveau. Aucun élément ne pouvait ressortir, ni un prix, ni un bouton, ni un lien.

Cinq couleurs d’accent testées sur le logo lui-même

Plutôt qu’un nuancier abstrait, j’ai recolorié le mot manuscrit du logo en cinq accents : un vert sapin, un bleu nuit, un ocre doré, une terracotta et un olive. Le mot en capitales restait bordeaux dans tous les cas. Le vert sapin s’est imposé pour deux raisons. C’est la couleur complémentaire du bordeaux, donc le contraste est naturel. Et la créatrice avait déjà eu cette intuition par le passé sur ses supports. On ne remplaçait rien, on prolongeait un choix juste.

La palette finale tient en quatre couleurs : bordeaux `#9E1B33`, vert sapin `#0F6E5C`, crème `#F6F3EC`, noir `#1A1A1A`. Avec une répartition indicative : 55 % de bordeaux, 30 % de crème, 12 % de vert, 3 % de noir. Le vert reste un accent réservé aux boutons, aux prix et aux liens.

Trois pistes de typographies sur un vrai texte de la boutique

J’ai présenté trois univers, chacun sur la même accroche, le même titre de collection et le même bouton « Composer mon bijou ». Une piste qui prolonge le logo : un script pour les accroches, des capitales solides pour les titres, une linéale légère pour le texte. Une piste plus ronde, qui rappelle les breloques. Une piste éditoriale, avec une serif italique, plus proche d’un magazine. La comparaison sur un texte réel rend le choix évident en quelques minutes.

Du logo au guide web : déclinaisons, tailles, échelle de 8 px

Le logo est resté strictement identique dans son dessin. Il a gagné une version bicolore, devenue la version principale, et sept déclinaisons : sur crème, sur bordeaux, sur vert, sur noir, en monochrome, en noir pour les documents, en blanc pour les photos. Les fichiers SVG intègrent la zone de protection, égale à la moitié de la hauteur du logo. Taille minimale fixée : 90 px à l’écran, 25 mm en impression.

Le guide web fixait ensuite les tailles de titres sur trois écrans, un texte courant à 18 px sur ordinateur et jamais sous 16 px sur mobile, une grille de 12 colonnes, des espacements en multiples de 8 px, et un bouton d’action vert unique par écran avec ses quatre états. Le tout livré en une seule page web, ouvrable depuis un téléphone, plutôt qu’en PDF.

Par où commencer : aujourd’hui, cette semaine, ce mois

Vous n’avez pas besoin de tout refaire pour avancer. Trois horizons suffisent.

Aujourd’hui. Retrouvez votre logo dans son meilleur format, un SVG ou un PNG en haute définition, et notez ses couleurs exactes. Si vous ne les connaissez pas, votre graphiste les a.

Cette semaine. Comptez les polices de votre site actuel, page par page. Au-delà de trois, il y a un problème. Vérifiez le contraste de vos boutons avec un outil gratuit en ligne. Sous 4,5:1, une partie de vos visiteurs ne lit pas.

Ce mois. Décidez de quoi vous avez besoin. Pas de logo, ou un logo dont vous avez honte : un graphiste. Un logo qui vous plaît et un site qui ne lui ressemble pas : une charte web, et probablement une refonte de votre site WordPress. Dans les deux cas, la charte web est comprise dans chaque pack Digitaalis.

En résumé

Sources