Comment définir la charte graphique d’un site web ?
Si je vous parle d’un ours jaune pour les grands et les petits…
Vous me dites Haribo.
Si vous avez trouvé aussi vite la réponse, c’est grâce à la charte graphique de la marque.
Souvent négligée, la charte graphique est pourtant essentielle. Elle vous permet :
- De clarifier l’identité de votre marque,
- D’avoir une communication interne et externe homogène,
- D’apporter à votre marque une image professionnelle.
En clair, créer sa charte graphique, c’est creuser les fondations de sa marque.
Alors prenez votre pelle, et creusons le sujet ensemble !
Identité, cible et méthode
Eh, une seconde !
Ne foncez pas tête baissée dans la création de la charte graphique.
Avant de commencer, il vous faut :
- Définir votre identité de marque,
- Définir vos cibles,
- Choisir votre méthode.
Définir son identité
Pour réfléchir à l’identité visuelle de sa marque, il faut avoir défini l’identité de sa marque tout court.
Pour vous guider, trouvez les réponses à ces questions ;
- Quelles sont les missions et la vision de la marque ?
Posez des mots sur l’objectif global de votre entreprise.
Vous devez définir les missions, ainsi que les moyens que vous vous donnez pour y parvenir.
Vos missions guident votre marque, et guident donc votre charte graphique.
- Quelles sont les valeurs de la marque ?
Vos valeurs sont les caractéristiques de votre entreprise. Si vos clients partagent vos valeurs, ils seront à même de rester fidèles à votre marque.
Elles vous guident dans la charte graphique tout au long du processus, notamment pour les couleurs que vous choisissez ainsi que les illustrations.
- Quel est l’esprit de l’entreprise ?
Plutôt esprit de famille, convivialité, ou professionnalisme ?
Votre esprit d’entreprise doit se retrouver également sur votre charte graphique ; vous devez représenter votre marque dans chacun de ses aspects.
- Quelle est la stratégie de communication de la marque ?
Pour définir votre charte graphique, vous devez penser à votre support et votre stratégie de communication.
Vous êtes exclusivement sur le web ? Vérifiez que vos polices et vos couleurs sont visibles sur tous les moteurs de recherche.
Vous communiquez essentiellement sur les réseaux sociaux ? Votre charte doit s’adapter aux pratiques de ces réseaux ; le format carré d’Instagram, le nombre de caractères de Twitter…
Identifier sa cible
Votre identité visuelle doit être en adéquation avec votre cible.
- Qu’est-ce que les utilisateurs viennent chercher chez vous ?
- Qu’est-ce qui vous fait sortir du lot ?
Mettez-vous à la place de vos visiteurs, ou futurs clients, pour identifier leurs attentes et leurs goûts.
Pour cela, aidez-vous de la création de personas. De plus, la définition de ces personas peut vous être utile dans chaque étape de votre stratégie marketing, et complétée au fur et à mesure de la vie de la marque.
Le persona, c’est le profil type des personnes qui s’intéressent à votre marque et qui visitent votre site web.
Réalisez des profils de persona complets, avec :
- Leurs âges,
- Leurs situations professionnelle et familiale,
- Leurs particularités,
- Leurs préférences,
- Des photos ou des éléments visuels qui les représentent.
Toutes ces informations sur votre marque seront présentes sur votre charte graphique. Avec les éléments que vous avez rassemblés, préparez une description de votre marque à placer en début de votre charte.
Choisir sa méthode
Les éléments présents dans une charte graphique sont toujours les mêmes. Pourtant, les méthodes peuvent varier.
- Le format de sa charte graphique :
Le format de votre charte graphique peut être variable.
La charte graphique peut prendre la forme d’un PDF, d’un livre papier, être en format portrait ou paysage, ne tenir que sur une page…
Les contraintes de format sont à prévoir pour réaliser au mieux votre charte graphique.
- Les templates de charte graphique :
Si vous manquez d’inspiration quant au format, ou que vous êtes peu à l’aise en graphisme, utilisez des templates et des sites spécialisés pour aider :
👉 Canva et Pinterest vous proposent des templates de chartes graphiques, ou des inspirations d’autres chartes graphiques.
👉 Mockup est un pack gratuit téléchargeable pour les entreprises. Il vous permet de créer plusieurs maquettes avec votre identité visuelle. Vous pouvez donc vérifier la cohérence de votre charte sur tous les supports ; carte de visite, stylo, en-tête de document…
👉 Stationery est aussi une solution gratuite et téléchargeable pour créer des maquettes de votre identité visuelle.
👉 Stylify Me vous permet de récupérer les éléments d’une charte graphique que vous appréciez, pour pouvoir les adapter à votre projet créatif.
Si vous êtes en panne d’inspiration, consultez notre sélection des meilleurs exemples de chartes graphiques web !
- Faire appel à un professionnel :
À certaines étapes, ou pour tout le processus, vous pouvez faire appel à un professionnel du graphisme.
Habitué du domaine, il vous conseille et vous permet de mettre en forme vos idées, tout en vous proposant des améliorations ou alternatives et enrichir votre réflexion.
Évidemment, le choix de faire appel à un graphiste a un coût, et demande un certain temps :
Comptez entre 750 euros et plus de 5000 euros, selon si vous faites appel à un graphiste en freelance ou une agence de communication et le temps que vous lui laissez.
Choisissez votre méthode, et en avant !
Vous avez désormais toute la matière nécessaire à la création de votre charte graphique.
Celle-ci doit comprendre :
- Votre logo et votre slogan,
- Vos typographies,
- Vos couleurs,
- Vos illustrations, formes et iconographies,
- Des données techniques quant aux proportions et à la hiérarchisation de vos éléments.
Et tout cela doit découler de votre identité, vos valeurs et l’histoire de votre marque.
Nous allons détailler ces éléments étape par étape pour créer une charte graphique intuitive, complète et flexible !
Logo et slogan
Définir son logo
Si votre charte graphique ne se résume pas qu’à votre logo, il en est un élément majeur.
Il est cohérent de réaliser votre logo en même temps que votre charte graphique. De cette manière, vous êtes certain qu’il s’adapte à votre charte, et vous intégrez votre réflexion au processus créatif de la charte.
Définissez également des sous-logos, qui peuvent être une signature ou un condensé de votre logo pour les espaces plus restreints.
Vous devez aussi réfléchir à une option du logo qui peut s’adapter aux photographies qui n’ont pas de fond uni si vous souhaitez apposer votre marque sur vos illustrations personnelles.
Définir ses expressions
Vous devez également, sur votre charte graphique, indiquer votre slogan et vos expressions.
Définissez d’abord votre slogan. Cela vous sera utile pour définir votre typographie, et évaluer si vos mots et votre police s’adaptent.
Votre charte graphique pose aussi les principes de communication autour de votre marque ; vous devez classer les expressions rattachées à votre marque entre celles que vous acceptez et celles que vous refusez.
Vous suivez toujours ?
Alors, on continue !
Couleurs de la charte graphique
L’homogénéité de votre charte graphique passe essentiellement par les couleurs que vous choisissez.
Une palette de couleurs harmonieuse donne l’aspect professionnel et harmonieux de votre site web.
En général, une charte graphique est composée de 3 couleurs principales qui se complètent, et jusqu’à 6 couleurs secondaires pour donner du relief à votre contenu.
Palette colorée de la nouvelle identité visuelle de Welcome to the Jungle.
Significations des couleurs
- Le bleu : Stabilité, fiabilité et confiance sont les principales significations du bleu.
- Le vert : Symbole de croissance et de connaissance, le vert est aussi associé à des valeurs écologiques.
- Le rouge : Supposée ouvrir l’appétit, le rouge est utilisé pour capter l’attention et évoquer l’audace et la puissance.
- Le jaune : Optimiste et dynamique, le jaune est souvent utilisé pour apporter de l’éclat sur un site sobre.
- L’orange : Utilisée pour capter l’attention, elle donne aussi un sentiment chaleureux et convivial.
- Le violet : Bien que cette couleur soit à utiliser avec parcimonie, elle évoque généralement la puissance et le luxe.
- Le rose : Le rose est une couleur douce, et souvent associée à la féminité et l’enfance.
Couplez ces couleurs à des contrastes en utilisant toutes les nuances du noir au blanc.
Cependant, selon la cible à laquelle vous vous adressez, les significations des couleurs peuvent changer. Les couleurs ne signifient pas les mêmes choses dans certains pays par exemple !
Les tendances de couleurs
Les chartes graphiques web récentes utilisent ces tendances :
- Deux couleurs contrastées, comme le beige et le gris foncé,
- Une ou plusieurs couleurs vives.
Les couleurs pastel, ou les couleurs très vives et vintages sont souvent utilisées dans les chartes graphiques web créées ou modifiées ces dernières années.
👍🏻 : Les sites proposent généralement une version claire et une version foncée, pour les lecteurs nocturnes. Pensez à adapter vos couleurs aux fonds clair et foncé.
Source : Charte graphique France Télévisions
Créer des palettes colorées
Maintenant que vous connaissez les significations des couleurs et les tendances, vous pouvez commencer à créer vos palettes.
Pour former vos palettes colorées, plusieurs outils peuvent vous aider :
- Paletton : Ce site vous permet d’obtenir plusieurs nuances d’une couleur.
- Cohesive Colors : A partir d’une couleur définie, ou de façon aléatoire, vous pouvez générer une palette harmonieuse de cinq couleurs et en modifier l’intensité.
- Color Hunter : Avec une photo téléchargée sur ce site, vous obtenez une palette de couleurs correspondantes.
Palette créée avec Cohesive Colors.
Précisez dans votre charte graphique les codes HTML et Pantone des couleurs que vous sélectionnez.
Typographie de la charte graphique
Votre charte graphique repose également sur un choix de police cohérent.
Sélectionnez jusqu’à 3 polices :
- Une police de titre : Prenez une police imposante, originale et significative de votre marque. Elle peut également être utilisée pour votre slogan, ou pour créer un sous-logo.
- Une police de corps de texte : À l’inverse, optez plutôt pour une police lisible. Les lecteurs sur le web lisent 30 % moins vite que sur papier, et peuvent rapidement passer à un autre article s’ils rencontrent une difficulté de lisibilité.
- Une police secondaire : Celle-ci est optionnelle, mais peut être utile pour détacher certains éléments de vos contenus tels que les sous-parties, les réseaux sociaux, les extraits de texte…
Les tendances de polices
- Les polices à empattement :
Les polices à empattements, considérées moins modernes que leurs cousines sans empattement, sont cependant très utilisées pour donner du cachet à une marque.
- Les polices minimalistes :
Ces polices très fines, et parfois subjectives, sont souvent choisies pour leur modernité. Cependant, elles peuvent être difficilement lisibles.
- Les polices classiques et vintages :
Dans la décoration comme dans la typographie, le vintage est à la mode ! Les polices imposantes, colorées et très affirmées ne dérogent pas à la règle.
- Les polices dynamiques :
Les sites web adoptent de plus en plus de polices cinétiques, soit en mouvement.
Trouver sa police
Mais dans cet océan de polices, comment trouver les siennes ?
Qu’une seule solution : faites des tests !
Reprenez votre slogan et les expressions liées à votre marque, et écrivez-les avec les polices qui vous semblent les plus pertinentes.
Voici plusieurs méthodes pour vous guider dans votre recherche de typographies :
- Utilisez un générateur :
Si vous êtes en panne d’inspiration, utilisez un générateur de polices aléatoires tel que Fontspark. Tapez votre slogan ou le nom de votre marque, et faites défiler les polices. Vous pouvez sélectionner certains paramètres, comme l’empattement ou l’épaisseur de la police.
- Visualisez les paragraphes :
En pleine hésitation entre plusieurs polices ? Mettez-les en action !
Générez des paragraphes type Lorem Ipsum avec vos polices pour avoir une idée concrète de l’identité visuelle des contenus de votre site.
- Créez votre propre police :
Oui, il est possible de faire faire sa police sur-mesure ! Par exemple, Welcome to the Jungle a créé sa police lors du dernier changement d’identité visuelle du site, intitulée simplement “Welcome”.
👍 Gardez le confort de votre cible en tête ; si vos contenus sont riches, choisissez une police lisible pour vos corps de texte.
Formes et iconographies de la charte graphique
Enfin, vous devez définir vos illustrations et vos formes.
Les formes
Songez à toutes les formes présentes sur votre site web.
- Quel aspect prendront vos boutons cliquables ?
- Dans quelle forme apparaîtront vos photos ?
Une fois de plus, le processus de création d’une charte graphique implique de penser à chaque détail. Plus votre charte est complète et précise, plus votre identité de marque sera reconnaissable.
Les illustrations
Quelles photos et illustrations souhaitez-vous sur votre site ?
Définissez les images et les ambiances qui vous parlent, et qui reflètent votre marque.
Pour cela, vous pouvez employer la méthode du moodboard ; la planche de tendances vous permet de réunir toutes vos inspirations sur un même document, et avoir un visuel global.
Préférez les images personnelles, ou provenant de banques d’images peu utilisées ou mises à jour régulièrement. Vous pouvez consulter notre top 12 des banques d’images gratuites !
Vous devez porter un grand soin à vos illustrations aussi bien sur le plan visuel que juridique.
Eh oui !
Si les images que vous utilisez ne sont pas libres de droit, votre charte graphique ne sera pas valide. De plus, vous pouvez enregistrer votre charte graphique à l’Institut National de la Propriété Intellectuelle pour protéger vos visuels et vos illustrations.
L’iconographie
Vos contenus peuvent être habillés de tampons ou d’éléments iconographiques qui renforcent votre image de marque.
Vous pouvez d’ailleurs utiliser ces éléments iconographiques pour les transformer en goodies pour vos clients ! Ils peuvent ainsi porter votre marque au travers de stickers, de pins ou d’affiches et diffuser votre image.
Tailles, proportions et hiérarchie visuelle
Votre charte graphique est indispensable à votre communication, notamment votre communication externe.
Un nouveau collaborateur ou une agence doit consulter cette charte afin de respecter votre image de marque et la diffuser dans les bonnes conditions.
Utilisation du logo
Définissez les espaces et les formes que peut prendre votre logo.
Faites en sorte que la lisibilité de votre logo soit optimale ; si cela nécessite d’ajouter des marges blanches et qu’il fasse une certaine hauteur et une certaine largeur, précisez-le.
Proportions des couleurs et de la typographie
Votre identité visuelle est presque terminée !
Cependant, il vous faut réfléchir aux proportions et aux tailles de vos éléments, et les préciser dans votre charte.
- Quelles tailles de police adopter ?
- Quelle importance d’espace accorder aux différentes couleurs ?
Si ce détail semble insignifiant, il peut faire la différence ! Cela participe aussi à la cohérence de votre charte graphique, et donc de votre image de marque.
Les mauvaises pratiques
De la même manière que votre signature ne doit être falsifiée, votre logo doit correspondre à vos revendications.
Dans votre charte graphique, précisez aussi les mauvaises utilisations de votre image de marque. Soyez exhaustifs, et complétez votre charte au fur et à mesure.
Envisagez toutes les dispositions possibles qui ne correspondent pas à la marque.
Source : Charte graphique France Télévisions
Il doit être impossible de se tromper en lisant votre charte graphique !
L’utilisation de sa charte graphique
Votre charte graphique est prête !
Une charte graphique adaptée à tous les supports
Votre charte graphique doit être adaptable à plusieurs supports pour étendre votre identité visuelle et ancrer votre marque dans l’esprit des utilisateurs.
L’identité visuelle de votre site sera présente sur toutes vos productions, de vos documents d’entreprise, aux factures en passant par les stylos et les tasses à café.
Si vous vendez des produits, vous avez une réflexion autour du packaging à réaliser !
Votre identité graphique s’adapte-t-elle à ;
- Des pochons en tissu ?
- Aux emballages papier ?
- À des boîtes en carton ?
Packagings Monoprix
Changer sa charte graphique ?
Lorsque l’on établit une trame pour un projet sur le long terme, se pose la question de la flexibilité.
Est-ce possible ou judicieux de modifier sa charte graphique ?
Bien sûr, elle sera modifiée avec le temps. Les tendances et les technologies changent constamment, et vous devrez vous adapter tout au long de la vie de votre site web.
Source : Charte graphique SNCF.
Si une refonte de votre charte graphique est possible, elle ne doit pas être trop régulière et trop incompréhensible pour ceux qui vous suivent.
N’hésitez pas à réunir en amont les éléments que vous voulez modifier, vos nouvelles idées, et modifiez votre charte graphique une fois que vous avez assez de matière.
Pensez à expliquer votre refonte de charte graphique à vos visiteurs ! Cela vous permet d’inclure votre communauté, et de faire un bilan de vos objectifs et de vos projets futurs.
Si la création de sa charte graphique est un travail de grande ampleur, il est primordial. Les méthodes sont multiples pour créer une charte graphique.
Le temps que vous passez à la création de votre charte n’est jamais perdu ; elle vous sera utile dans toutes les phases de développement de votre marque.
En suivant ces étapes, vous parviendrez à la charte graphique parfaite !
