Conception et exemples de charte graphique
La charte graphique est la colonne vertébrale de toute communication de marque, elle reprend toutes les informations d'une marque, de son logo et de son design. Pour vous aider, voici nos explications pour créer une charte graphique unique !
Anne-Laure Compain
Avant de parler de charte graphique et d’exemples, commençons par un constat. Les marques dont on retient le nom ont toutes un point en commun.
Celui d’avoir une identité visuelle forte.
Alors oui, on va encore citer Apple, Nike ou Netflix. Mais parce que ce sont de bons exemples ! La preuve, on pourrait reconnaître entre mille ces logos et les typographies utilisées.
Car la communication de ces marques s’appuie d’une part sur une charte graphique solide, sur la régularité, mais surtout sur la cohérence dans leur communication.
La charte graphique est utilisée tous les jours dans les outils marketing d’une marque ou d’une entreprise. À travers des cartes de visite, un site web ou encore une devanture de magasin !
Et rappelez-vous nos exemples : on se souvient de ces marques de par cette régularité. Même logo, même couleurs, même typographie. Partout. Sur tous les supports.
Bien sûr, toutes les marques n’ont pas les mêmes budgets communication pour s’offrir cette place au soleil dans le cerveau de tous !
Mais même à votre échelle, la construction d’une charte graphique va vous aider à asseoir votre marque. Parce que votre marque n’est pas qu’un logo. C’est bien plus que ça.
Ensemble, nous allons donc parcourir l’intérêt pour vous d’avoir une charte graphique avec des exemples. Nous vous détaillerons aussi la différence de contenu entre une charte graphique papier et une charte graphique web.
Retrouvez également un modèle template de charte graphique à la fin de cette article.
1. Une charte graphique, c'est quoi ?
À la création de son entreprise, il faut établir l’univers graphique de sa marque. Cet univers sera ensuite repris dans la communication et tous les outils qu’ils soient papier (cartes de visite, flyer), physique (vitrine, stands) ou encore virtuel (site internet, réseaux sociaux).
On vous explique pourquoi c'est important. ⬇️
1.1 Définition d'une charte graphique
Vous venez de créer votre entreprise ou vous y songez. Félicitations ! 🥳
La charte graphique va être un des documents fondateurs de votre communication.
En effet, vous devez imaginer votre charte graphique comme un guide, un ensemble de règles qui explique les éléments visuels de votre marque. Ce guide fera partie des documents stratégiques importants pour vous.
La charte graphique est réalisée soit par :
- un(e) graphiste
- un(e) directeur.ice artistique
- un(e) webdesigner
Tous ces profils ont en commun de travailler sur l’image des marques. Ils maîtrisent les codes visuels (couleurs, typographies), et les logiciels adaptés pour traduire des concepts en image.
Si vous faites appel à l’un de ces profils pour créer votre charte graphique, nous allons d’abord vous donner des exemples !
En effet, il est important de bien cerner les différentes informations que doit comporter une charte graphique pour que ce travail soit complet.
Tout d’abord, nous allons tenter de définir la charte graphique comme un document (souvent sous la forme d’un document .pdf) qui regroupe les éléments de votre identité visuelle :
- logo et ses déclinaisons
- couleurs de l’entreprise
- typographies
- optionnel : d’autres informations sur votre marque et vos valeurs
À partir de ce document, votre identité visuelle pourra alors être adaptée et utilisée sur vos prochains éléments de communication (site internet, publicité, catalogue, carte de visite).
1.2 Pourquoi créer une charte graphique ?
Vous vous souvenez de l’exemple de la marque à la pomme, dans l’introduction ? C’est exactement pour cela que vous avez besoin d’une charte graphique !
Construire une marque forte commence d’abord par une identité visuelle claire, solide et qui est déclinée partout ! Même si vous êtes une petite marque, oui.
La charte graphique traduit la personnalité de votre entreprise. Elle renseigne sur la façon dont vos prospects ou clients vont vous reconnaître.
Vous imaginez, si vous utilisez une typographie différente à chacune de vos communications ? De quoi perdre vos prospects et clients… Changer trop souvent d’apparence risquerait de les troubler !
Cela semble évident, pourtant cela est loin d’être le cas en entreprise. La charte graphique est parfois négligée ou alors plus à jour. Ne faites pas cette erreur.
Dans une entreprise où plusieurs personnes travaillent avec des documents de communication, la charte graphique est vitale. Elle permet de maintenir une cohérence graphique.
Elle va ainsi renseigner chaque nouveau salarié sur les règles établies. En somme, la charte graphique fait gagner du temps à toute l’équipe et sert surtout de socle pour décider des futurs éléments de communication !
1.3 Mettre à jour sa charte graphique
Et oui, il est très souvent nécessaire de mettre à jour l'identité de sa marque ! Mais pourquoi ?
Et bien tout simplement parce que vos utilisateurs évoluent et leurs goûts aussi, les tendances changent et ce qui était moderne il y a 5 ans, est aujourd'hui dépassé. Le design et les tendances évoluent très rapidement et votre marque doit suivre le rythme.
La refonte de votre marque est alors à envisager pour à nouveau marquer les esprits de votre cible.
Présentation de votre logo, de ses lignes de construction et de ses déclinaisons. On retrouve aussi ses droits d'utilisation, ce que vous pouvez faire et ne pas faire avec votre logo.
Présentation des couleurs de la marque sous forme de palettes. Elles sont défini sur tous les supports, papier et web. Quelques fois des palettes light et dark peuvent être créées.
Présentation des polices d'écriture de votre marque. Vous pouvez en avoir un ou plusieurs. Elles sont présentées avec toutes leurs graisses : normal, italic, gras...
Recevez les dernières nouveautés et astuces web design directement dans votre boite mail.
2. Charte graphique exemples
La plupart des chartes graphiques sont construites autour de différents éléments. Ici, on en notera 3 principaux : votre logo, vos couleurs et typographies.
À noter : On peut aussi faire figurer des règles éditoriales (tone of voice, baseline, éléments de langage), les valeurs de la marque ou encore des éléments d’histoire (date de création).
C’est pourquoi dans les pays anglophones on parlera de brand book. Ce type de document regroupe la charte graphique, la charte éditoriale ou des informations sur la gouvernance d’entreprise.
Voyez ci-dessous quatre exemples de charte graphique particulièrement parlants ! Ces chartes sont de bonnes sources d'inspiration.
2.1 Slack
Slack est une plateforme de communication collaborative SaaS largement utilisée en entreprise sous forme de messagerie d’entreprise améliorée.
Sa charte graphique est divisée en plusieurs sections :
Explication sur le logo (version logo seul, version logo + typographie) :
- taille minimale
- couleurs de fond
- utilisation du logo en couleurs ou monochrome
- ce qu’il faut faire ou ne pas faire avec le logo (étirer, couper…)
Les couleurs de l’entreprise :
- couleurs principales
- couleurs secondaires
- combinaisons possibles de couleurs
La typographie à utiliser :
- Typographie des titres et informations importantes
- Typographie paragraphes
- Le cas échéant : la taille de la police en fonction de la taille
➡️ Slack est un bon exemple de charte graphique réussie et claire. On y apprend à connaître la personnalité de l’entreprise à travers tous ces détails sur la création du logo et le choix des couleurs.
La charte a aussi l’avantage d’être facile à lire. Résultat : pour ses salariés, c’est un outil facile à prendre en mains !
2.2 Starbucks
Starbucks est une chaîne de cafés américaine connue dans le monde entier. Son identité de marque est forte et fait partie de ces marques que l’on n’oublie pas de si tôt…
Grâce à son vert iconique et son logo emblème intemporel. D'ailleurs si vous souhaitez connaitre les différents type de logo qui existent.
La marque consacre un site web en entier à sa charte graphique. Le site est conçu à partir du brand book. C’est un excellent exemple de charte graphique !
Sur ce site, on y retrouve alors :
Le logo :
- son évolution depuis la création de l’entreprise
- sa déclinaison en fonction des différentes couleurs de fonds
- la typographie utilisée
Les couleurs :
- les différentes déclinaisons de couleurs utilisées
- les couleurs utilisées sur les éléments de communication en fonction des saisons
La typographie :
- les trois types de typographies utilisées
Les images :
- créations graphiques et images de marque et leur cas d’usage dans les éléments de communication
➡️ La charte Starbucks est assurément un exemple puissant : elle donne à voir une idée précise de la communication de l’entreprise.
On peut par exemple écrire un texte et voir le rendu avec la typographie que Starbucks utilise. On y découvre la théorie : ces règles graphiques et la pratique avec des exemples de publicités de la marque.
La charte graphique en elle-même porte l’identité graphique de la marque qui se veut fonctionnelle et expressive.
2.3 Deezer
Voici la charte graphique de Deezer, l’application de streaming musical française.
C’est encore ici une version site web de la charte graphique. Elle détaille précisément :
Le logo :
- comment le logo est construit
- l’espace à respecter entre le logo et les autres éléments graphiques
- la déclinaison du logo sous différents fonds de couleurs
- les tailles maximales et minimales
- les “do” et “don’t” autrement dit ce qu’il faut faire ou ne pas faire avec le logo
- la déclinaison du logo sous différentes langues
Les couleurs :
- les couleurs principales
- les couleurs secondaires
La typographie :
- la typographie principale et secondaire
- la déclinaison en arabe et hébreux
2.4 French Tech Grande Provence
Enfin, découvrez la parfaite charte graphique à travers l’exemple de la French Tech Grande Provence.
La French Tech est un label officiel français attribué à des pôles métropolitains ou des entreprises innovantes françaises.
Ici, la charte graphique est un bon modèle qui reprend les codes habituels des chartes graphiques :
Le logotype y est représenté avec des informations sur sa taille minimale et maximale. On le voit aussi avec ses différentes variantes. On retrouve un panorama des bonnes pratiques et de ce qu’il ne faut pas faire avec ce logo.
Toutes les couleurs utilisées sont détaillées ainsi que les typographies utilisées.
3. Créer une charte graphique l’exemple pas à pas
Beaucoup de petites entreprises pensent que le logo suffit pour créer une charte graphique. Ne commettez pas cette erreur !
Il est vrai que le logo est un pilier de la charte graphique, mais ce n’est pas le seul. Voici le pas à pas pour construire une charte graphique. Nous vous détaillons chaque partie juste en dessous !
C’est à partir de lui que l’on construit une identité graphique.
Pas plus de 5 couleurs pour une identité visuelle claire.
La typographie reflète l'esprit et les valeurs de votre entreprise.
3.1 Bâtir sa charte graphique à partir du logo
Le logo est en effet l’élément central de votre communication. C’est à partir de lui que l’on construit une identité graphique.
Votre logo ou logotype se doit de refléter la personnalité de votre entreprise. Il a un rôle d’image : c’est la porte d’entrée pour un prospect ou un client vers vous.
Le logo doit pouvoir se décliner sous plusieurs fonds de couleurs ou sur des formats différents.
Ainsi, on va retrouver le logo sur une carte de visite, sur une plaquette commerciale, sur un site internet… Et sur l’ensemble des éléments de communication.
Il se doit donc d’être : unique, simple et mémorable !
Vous connaissez les étapes importantes pour créer un logo ?
3.2 Bien choisir les couleurs de son identité de marque
Dans un second temps, la charte graphique fige aussi les choix des couleurs. On conseille l’utilisation de 5 couleurs maximales : c’est un nombre idéal pour ne pas troubler la mémorisation.
Dans la charte, vous devez faire apparaître ces couleurs, ainsi que le rendu de l’utilisation du logo avec ces différentes couleurs.
On doit renseigner les valeurs des couleurs avec : le nom Pantone, CMJN, RVB et les valeurs hexadécimales. Cela va faciliter l’intervention des graphistes pour vos futures communications.
Notez que les professionnels créatifs comme les graphistes ou webdesigners connaissent les couleurs et leurs significations. Cela peut-être utile pour orienter l'identité graphique de votre entreprise.
Voici la signification des couleurs les plus courantes :
Le bleu va être utilisé le plus souvent pour promouvoir :
- des entreprises du domaine de la santé (médicaments)
- de propreté (produits de nettoyage)
- de transactions financières (banques)
- de transport et du voyage (compagnies aériennes, aéroport, éolien)
Le bleu a l’immense avantage d’inspirer confiance, c’est une couleur rassurante. Cela peut expliquer pourquoi Facebook, Twitter ou Paypal l’utilisent : ces sites utilisent des données personnelles et ils doivent donc inspirer confiance !
Il est déconseillé d’utiliser le bleu pour lancer un concept dans le domaine de l’alimentaire.
Voici la signification d'autres couleurs :
- Le rouge attire fortement l'œil. En webdesign, c’est donc une couleur que l’on réserve aux promotions ou sur des boutons d’appels à l’action.
- Pour construire votre idée de marque, la couleur jaune va évoquer la joie et le loisir. Si vous travaillez dans le secteur de l’enfance, de l’éducation ou des activités de loisirs, cette couleur sera parfaite ! On peut aussi utiliser le jaune pour une marque de nourriture.
- Enfin, le vert est une bonne solution pour évoquer la stabilité ou la croissance d’une société. Naturellement, c’est aussi une couleur que l’on associe à la protection de l’environnement, au bien-être, à l’écologie ou encore à la relaxation. Le vert foncé, lui, est plutôt une couleur choisie dans le domaine de l’argent et de la finance.
💡Notez que la couleur n'est pas perçue de la même façon par tout le monde : elle ne doit donc pas être le seul élément pour transmettre une information ! Venez découvrir la signification des couleurs dans l'article design et couleur, duo de choc.
3.3 Le choix des typographies
La typographie ou police d’écriture a aussi une grande part à jouer dans la construction de votre identité de marque !
Il est important d’utiliser des typographies qui vont refléter votre entreprise et le message que vous voulez faire passer à travers votre communication.
Certaines marques font appel à des designers pour concevoir une typographie personnelle et unique. C’est un choix judicieux car il se trouve que votre marque sera encore plus identifiable parmi les autres !
Néanmoins, il est certain que cela représente un coût important.
C’est pourquoi Google Font est une mine d’or pour le recherche de typographies ! De nouvelles typographies y sont ajoutées presque tous les jours. Le choix ne manque donc pas.
Voici quelques exemples selon l’univers de marque souhaité :
Pour un style féminin :
Un esprit plus masculin :
Une typographie enfantine :
Police plus classiques :
Le typographies que l’on retrouve sur Google Font sont aussi parfaitement adaptées à l’utilisation sur un site internet. En revanche, ce n’est pas le cas pour toutes les typographies que vous pourrez télécharger sur des banques de données gratuites.
Alors comment choisir votre typographie parmi ce choix immense que représente Google Font ?
N'hésitez pas à déléguer cette tache à un professionnel du design. On peut penser qu'il est simple de choisir une typographie mais on s'y perd vite entre le "serif", le "sans serif" ou encore le "handwritting" !
La recherche d’adjectifs pour qualifier votre marque est importante car elle va donner le ton à votre communication. La typographie utilisée devra retranscrire votre adjectif principal.
Par exemple, pour une marque qui prône le minimalisme ou la modernité, on pourra choisir des typographies sans empattement comme Arial ou Helvetica. Ces polices ont des bords lisses, elles montrent une image contemporaine.
Généralement, on recommande de choisir 2 à 3 typographies maximum. Par exemple : vous utiliserez une police pour les titres et une secondaire pour les paragraphes. Si vous faites ce choix, essayer de varier vos typographies.
Personnellement, j'aime mélanger une typographie chic (serif) avec une typographie plus classique (sans serif). Vous pouvez voir un exemple en cliquant sur le lien ci-dessous.
Plutôt que d’utiliser la même police que votre logo, vous pouvez en choisir une complémentaire pour vos titres.
Ainsi, on remarquera une cohérence entre ces deux typographies. De plus, vous aurez ainsi une sorte de hiérarchie sur votre site entre la typographie de :
- votre logo
- vos titres
- votre texte
4. Différences entre une charte graphique papier et web
Nous avons vu jusque-là les spécificités d’une charte graphique papier. Il est important de bien comprendre la différence entre une charte graphique papier et une charte graphique web. En effet, dans le second cas, il y aura plus de détails relatifs à l’interface web.
4.1 Créer une charte graphique papier
Comme nous l'avons vu dans nos chartes graphique exemples, la charte graphique papier fera apparaître :
- Logo ou logotype et ses déclinaisons : il reflète l’image de votre entreprise. On retourne aussi toutes les déclinaisons possibles du logo (couleur, fond, texture…) détaillés sur différents supports : carte de visite, flyer, papier en-tête, devis, facture, affiche, véhicule.
- Typographie : à la fois la typographie du logo mais aussi des titres et textes si elles sont différentes.
- Couleurs : les associations de couleurs (voir article « comment créer son logo ») ne doivent pas être nombreuses, une suffit avec seulement 4 ou 5 couleurs complémentaires
- Le positionnement de chaque élément (logo, titre, baseline,…) pour chaque support de communication. On doit y renseigner les marges, le positionnement dans le document et les zones de sécurité
- Éléments graphiques éventuels comme des icônes ou des photographies
4.2 La charte graphique web
La charte graphique web est réalisée dans le cas d’une création de site web ou d’une refonte. Elle doit permettre à toute l’équipe projet (développeurs web, webdesigner, UX designer…) d’utiliser les mêmes codes.
On indique dans cette charte graphique :
- Logo : son utilisation sur le site, son emplacement et sa “zone de sécurité”
- Couleurs web : au maximum 5 couleurs qui définissent votre identité sur le web
- Typographies web : choix de la typographie, taille des titres (H1, H2, H3, …, H6), paragraphes, citations. Mais aussi les interlignes (espace entre les lignes d’un texte) et inter lettrage (espace entre les lettres d’un titre par exemple)
- Boutons : couleurs et affichage du texte au clic et au passage de la souris. On peut indiquer le rendu s’il y a une micro interaction (comme un changement de taille au passage sur la souris par exemple)
- Sections : indiquer la couleur de fond sous un texte et la couleur du texte en fonction
- Formulaires : cette fois on précise la couleur des champs du formulaire vides, en cours de remplissage, remplis et les potentiels rendus de l’affichage d’un message d’erreur
- Icônes
- Tout autre élément style comme une ligne horizontale qui sépare vos titres de vos paragraphes
Alors ! Prêts à créer votre propre charte graphique avec ces exemples ?
Nous vous conseillons de faire appel à un professionnel pour la réaliser. D'ailleurs, il est souvent intéressant de confronter ses idées à un professionnel extérieur à votre entreprise. Celui-ci apportera un regard neuf et objectif.
Et puis, entre nous... Un logo fait par un passionné de son métier aura certainement un rendu plus qualitatif que le logo dessiné sur votre cahier ! 😉
Téléchargez notre modèle de charte graphique
Snoweb vous met à disposition un exemple de charte graphique que nous avons réaliser pour un de nos clients.
Dans ce modèle de charte graphique vous pouvez voir en un seul document toutes les étapes détaillées dans l'article. À savoir :
- La construction du logo
- Les couleurs de la marque
- Le logo et toutes ses déclinaisons
- La ou les typographies utilisées
- Les usages interdits du logo
- Les utilisation possibles du logo
En espérant que cet article vous a plu et vous aide a mieux comprendre l'utilité d'une charte graphique.
Le sujet du web design vous fascine, alors ces articles devraient vous intéresser également.
Anne-Laure Compain
Anne-Laure Compain
Alexis Le Baron
Anne-Laure Compain
Anne-Laure Compain
Anne-Laure Compain
Recevez les dernières nouveautés et astuces sur le web design directement dans votre boite e-mail.
