Une cohérence de marque appliquée sur tous les canaux augmente le revenu de 10 à 20% en moyenne, jusqu’à 33% dans les cas les plus aboutis, d’après l’étude State of Brand Consistency de Lucidpress, devenu Marq (2019). Concevoir l’identité visuelle de votre site internet pèse donc directement sur le chiffre d’affaires, au même titre qu’une refonte de tunnel de conversion.
Piloter la construction de l’identité de marque de votre site, sans être designer, suppose de tenir 5 décisions dans l’ordre : le positionnement de marque, le public cible, la palette de couleurs, la charte graphique (typographie, logo, UX design, responsive design, design system), puis le brief transmis au prestataire. Sauter la première étape est l’erreur la plus fréquente.
Définir le positionnement de marque avant la charte graphique
Bpifrance Création structure la construction d’une marque en 6 étapes : raison d’être, positionnement, nom, identité graphique, protection juridique, puis stratégie de lancement (Bpifrance Création, 2025). L’identité graphique arrive en quatrième position, jamais en premier.
Le positionnement de marque répond à une question précise : quelle valeur différente votre offre apporte-t-elle et à quelle place exacte sur le marché ? Une carte perceptuelle, les concurrents situés sur deux axes comme le prix et le niveau d’accompagnement, suffit pour visualiser où vous vous situez et où vous voulez aller.
Sans ce travail préalable, la charte graphique se construit sur des goûts personnels plutôt que sur une stratégie. Le positionnement se formalise avant la première maquette, jamais après.
Identifier le public cible qui va lire votre charte graphique
Une palette qui fonctionne pour un cabinet d’expertise-comptable B2B ne fonctionne pas pour une marque de cosmétique B2C, même budget, même prestataire. Le public cible détermine les codes visuels acceptables. Couleurs vives et typographies rondes captent l’attention d’un visiteur grand public pressé. Palette sobre et grille stricte rassurent un acheteur B2B qui compare plusieurs fournisseurs avant de signer.
Formalisez au moins un persona utilisateur type avant de lancer le brief : âge, poste, appareil de consultation dominant, moment de la journée où il visite le site. Cette dernière donnée conditionne directement le choix du responsive design, traité plus loin dans ce guide.
Choisir une palette de couleurs avec la psychologie des couleurs
Entre 62% et 90% de l’appréciation d’un produit se joue sur la couleur seule, en 90 secondes d’exposition, d’après l’étude de Satyendra Singh (University of Winnipeg) publiée dans Management Decision en 2006. Ce chiffre vaut aussi pour un site : avant de lire le premier mot, le visiteur a déjà réagi à votre palette.
Le bleu domine chez les banques et les éditeurs SaaS B2B parce qu’il évoque la confiance et la stabilité. Le rouge déclenche l’urgence, d’où sa présence massive sur les boutons d’appel à l’action des sites e-commerce. Ces associations varient selon la culture et le secteur. Elles orientent malgré tout un premier choix de psychologie des couleurs plutôt qu’un choix arbitraire.
Limitez la palette à 3 à 5 couleurs pour l’ensemble du site : une couleur principale, complétée par une à deux couleurs secondaires et des neutres pour les fonds et les textes. Adobe Color (lancé sous le nom Kuler en 2006, renommé en 2014) et Coolors permettent de tester des combinaisons et d’exporter les codes hexadécimaux directement utilisables dans la charte.
Les directives WCAG 2.0 niveau AA imposent un ratio de contraste minimum de 4,5:1 pour le texte courant et de 3:1 pour le texte de grande taille (WebAIM, 2025).
Vérifiez chaque association couleur de texte et couleur de fond avec le Contrast Checker de WebAIM avant de valider la charte. Ces seuils existent depuis la publication des WCAG 2.0 par le W3C en 2008 et restent la référence utilisée par l’outil de vérification de WebAIM. Un bouton d’action à contraste insuffisant fait perdre des conversions bien avant que le visiteur lise le contenu de la page.
Construire une charte graphique qui tient sur un support unique
La charte graphique traduit le positionnement et la palette en règles applicables : typographie, usage du logo, iconographie, hiérarchie visuelle. Elle tient sur un document unique, partagé avec toute personne qui produit du contenu pour le site : community manager, rédacteur, développeur front, puis prestataire externe.
Deux typographies pour la hiérarchie visuelle
Associez une police pour les titres et une seconde pour le texte courant. Une paire éprouvée : une sans-serif pour les titres (Roboto, Inter) et une serif pour le corps de texte (Merriweather, Georgia) ou l’inverse selon le secteur. Google Fonts propose plus de 1 500 familles gratuites, optimisées pour le web depuis le lancement du service par Google en 2010.
Taille minimale recommandée : 16px pour le corps de texte, avec un ratio d’échelle constant entre les niveaux de titre. Testez le rendu sur un écran de smartphone avant de figer la charte. Une police fine et élégante sur desktop devient parfois illisible à 320px de large.
Un logo qui passe le test du petit format
Un logo se teste en noir et blanc, en négatif, puis à 32px de large, la taille d’un favicon d’onglet. S’il perd sa lisibilité à cette échelle, il est trop détaillé pour un usage web. Prévoyez au minimum 4 déclinaisons : version couleur complète, monochrome noir, monochrome blanc pour fond sombre et symbole seul sans le nom de la marque pour les usages réduits comme un avatar de réseau social.
Les icônes suivent la même charte que le logo : même épaisseur de trait, même niveau d’arrondi, même famille visuelle. Ne mélangez jamais un style outline et un style plein sur une même page.
Penser responsive design et design system dès la charte
Le mobile représente 80% du temps passé sur Internet en France et plus de 90% chez les 15-24 ans, d’après L’Année Internet 2025 de Médiamétrie. Une charte graphique pensée uniquement pour un écran de bureau ignore l’appareil sur lequel elle sera vue la majorité du temps.
Le responsive design impose des contraintes concrètes sur la charte : une palette lisible en plein soleil sur smartphone, un logo qui se réduit sans perdre son symbole, des boutons d’au moins 44px de hauteur pour rester cliquables au doigt. Un site pensé pour tous les écrans ne se limite d’ailleurs pas à la charte graphique : la structure technique du site compte tout autant.
Le design system va plus loin que la charte : il documente chaque composant réutilisable (bouton, formulaire, carte produit) avec ses variantes et son code, sur le modèle du Material Design, introduit par Google en 2014. Pour un site de quelques pages, un document de charte suffit. Au-delà d’une dizaine de gabarits ou de plusieurs contributeurs, le design system évite que chaque page réinvente ses propres boutons.
Rédiger un brief graphique que votre prestataire exécute sans aller-retour
Un brief graphique incomplet se traduit presque toujours par des allers-retours supplémentaires avec le freelance ou l’agence, chacun rallongeant le délai de plusieurs jours. Le brief graphique transmis avant tout devis doit contenir :
- le positionnement de marque en une phrase et les valeurs à transmettre visuellement
- le public cible, avec au moins un persona type
- la palette de couleurs si elle existe déjà ou les couleurs à éviter, souvent celles d’un concurrent direct
- 2 à 3 exemples de sites ou de marques dont le style inspire, avec ce qui plaît précisément et pas seulement « j’aime »
- la liste des livrables attendus : logo, favicon, charte au format PDF, maquettes desktop et mobile, design system ou non
- le budget et le délai, même approximatifs
Un prestataire qui reçoit ce niveau de détail chiffre le projet en une itération. Sans lui, il devine à votre place. Et devine rarement juste du premier coup.
Faire soi-même, en freelance ou en agence
Le choix du prestataire dépend du budget disponible et de l’ampleur du projet, pas seulement du goût pour le graphisme. Un abonnement Canva Pro coûte environ 120 euros par an et propose des modèles de palette prêts à personnaliser. Le tableau ci-dessous reprend les fourchettes observées en France en 2025, d’après les grilles tarifaires publiées par Codeur.com.
| Critère | Le faire soi-même (Canva, outils gratuits) | Freelance | Agence |
|---|---|---|---|
| Budget | Gratuit à environ 120 € par an (abonnement Canva Pro) | 500 à 4 000 €, jusqu’à 8 000 € pour un senior confirmé | 6 000 à 15 000 €, jusqu’à 30 000 € pour un projet stratégique complet |
| Délai moyen | Quelques heures à 2-3 jours | 2 à 4 semaines | 6 à 10 semaines |
| Ce que vous obtenez | Une palette et une police assorties, sans document de référence | Une charte documentée, un logo et ses déclinaisons de base | Positionnement audité, charte complète, design system et déclinaisons multi-supports |
| Bon calcul si | Vous testez un MVP ou un site à budget zéro | Le site est le support principal de la marque, budget maîtrisé | Le site s’inscrit dans une stratégie de marque globale, plusieurs supports à décliner |
Selon Codeur.com (2025), un freelance junior facture dès 500 euros une charte fonctionnelle, un freelance confirmé jusqu’à 8 000 euros pour un projet complet, une agence entre 6 000 euros et 15 000 euros pour un site stratégique. Un budget agence ne garantit pas une meilleure exécution si le brief reste vague : un freelance bien briefé livre souvent un résultat plus pertinent qu’une agence mal cadrée. À l’inverse, un site qui porte à lui seul toute la communication de l’entreprise justifie l’investissement dans un design system complet, quel que soit le prestataire choisi.
Le piège qui coûte le plus cher : une charte jamais appliquée
81% des entreprises constatent des contenus hors charte dans leur communication et seules 25% de celles qui possèdent des guidelines de marque les appliquent de façon systématique, selon l’étude Marq citée en ouverture. La charte la mieux conçue ne sert à rien si personne ne la consulte après sa livraison : le retour reçu en interne se limite alors souvent à « ça ne ressemble pas à nous », sans que personne ne rouvre le document.
Diffusez le document à toute l’équipe qui touche au site, pas uniquement au designer d’origine. Vérifiez chaque trimestre qu’un échantillon de pages récentes respecte encore la palette, la typographie, le ton visuel, puis la hiérarchie des titres définie au départ. Bloquez ce contrôle trimestriel dans votre calendrier dès la livraison de la charte : c’est le geste qui empêche un travail payé plusieurs milliers d’euros de se diluer en 6 mois.
