.st0{fill:#FFFFFF;} .st0{fill:#FFFFFF;} .st0{fill:#FFFFFF;} .st0{fill:#FFFFFF;}

Qu’est-ce qu’une charte graphique ? 

minutes de lecture

Si vous êtes en train de monter une activité, vous êtes en somme en train de créer une marque. Cette marque aura son identité propre.

Aussi et même si j'encourage un(e) entrepreneur(se) en début de parcours à ne pas se focaliser à 100% sur son positionnement de marque et donc son image, il reste important de connaître ce qu'est une charte graphique notamment lors de la conception de votre site web.

Cet article vous présente le concept de charte graphique avec ses différents composants, puis une méthode à suivre simple et rapide pour déterminer vos familles de couleur lors de votre création de charte graphique.

On y va ?

Qu'est-ce qu'une charte graphique

La charte graphique représente l'ensemble des éléments visuels qui vont formater l'image de votre marque. Cette charte graphique impacte donc le positionnement de votre marque.

Elle va se composer de différents éléments dont le logo est central. Cette charte graphique représente un point de repère qui détermine les conditions pour utiliser tel ou tel élément visuel.

La charte graphique est l'expression visuelle de l'entreprise, de ses valeurs, sa mission, son univers, et ce qu'elle souhaite communiquer.

Les objectifs d'une charte graphique

L'utilité première d'une charte graphique est d'avant tout assurer que tous vos supports de communication soit harmonisés et cohérents.

Cela assure que votre marque, votre entreprise puisse être reconnu facilement (liste non exhaustive) à travers :

  • votre carte de visite,
  • vos flyers et plaquettes commerciales,
  • vos affiches,
  • votre enseigne pour un magasin physique,
  • votre site web,
  • vos emails,
  • vos vidéos,
  • vos devis et factures,
  • etc.

L'uniformisation des éléments visuels à travers tous vos éléments de communication doit permettre de rendre rapide l'identification de votre marque et entreprise.

Le respect de votre charte graphique à travers tous vos leviers de communication est l'assurance que votre image de marque véhiculée soit identique partout.

De quoi se compose une charte graphique

Alors c'est bien tout ça. Mais encore faut-il savoir précisément sur quoi appliquer toutes ces règles.

Le logo

Le logo est au centre de votre charte graphique. C'est le pilier de votre image de marque et de son positionnement. Il est présent partout. N'importe quel support physique ou virtuelle attaché à votre entreprise comportera votre logo.

L'enjeu d'un logo est de renvoyer l'âme de la marque. La marque se veut elle jeune, dynamique, classique, rigoureuse ? Le logo se doit de refléter cela.

Puis la charte graphique doit encadrer son utilisation en déterminant sa taille minimale, ses proportions et comment il se place en fonction d'autres éléments tels que des titres, des marges, du texte.

La typographie

La typographie joue un rôle essentiel dans la communication.

Elle détermine :

  • la police d'écriture,
  • le corps de police c'est-à-dire sa taille,
  • la mise en page

La combinaison de ces éléments crée une perception de vos textes. Une perception qui peut changer du tout au tout en modifiant la police, sa taille, son espacement etc.

Si la perception change, l'importance du message se modifie également.

Le plus important à privilégier sera le confort de lecture.

Typographie et contenus internet.

Quelques recommandations pour améliorer le confort de lecture

Vous souhaitez assurer un certain confort de lecture pour vos contenus de votre site web ?
Voici quelques conseils que je vous apporte en matière de taille de police et d'interlignes :


  1. Taille H1 : 40px
  2. Taille H2 : 34px
  3. Taille H3 : 24px
  4. Taille H4 : 20px
  5. Taille paragraphe : 18px ou 16px
  6. Hauteur de ligne : 30px
  7. Saut de ligne : 24px

À noter que ce sont des recommandations sur lesquelles vous baser mais ce n'est en aucun cas une règle absolue. Car certaines polices sont plus larges ou plus étroites que d'autres. En fonction de celle(s) que vous avez choisi, ces tailles sont peut-être à adapter.


C'est en tout cas ce que j'utilise en combinaison des polices Literata pour mes titres et Muli pour mes paragraphes

Si vous cherchez à approfondir le sujet de la typographie et des polices d'écriture, je vous invite à consulter cet article à propos des polices de caractère assurant la meilleur lisibilité.

Création de charte graphique

En tant que webmaster freelance, je vous donne tout de suite une méthode concrète, simple et rapide afin d'identifier des couleurs et familles de couleurs lors de votre création de charte graphique. Pas besoin d’avoir fait de longues études en graphisme pour l’utiliser, c’est promis.

Il s'agit ici de ne plus perdre de temps !

Si vous avez un projet de création de site internet actuel ou futur, vous ferez forcément face à un moment ou à un autre à la question du design. Si vous faîtes appel à un prestataire, celui-ci vous posera nécessairement la question.
Si vous n’êtes pas prêt sur ce sujet, le problème est que soit vous perdrez du temps, soit vous ne serez pas tout à fait en accord avec le résultat.

En effet, le prestataire vous soumettra des choix que vous devrez prendre, bien sûr, mais la direction première ne sera alors pas de votre ressort et il y’a donc un risque de décalage avec ce que vous auriez souhaité. Ou alors, il vous faudra revenir en arrière et donc perdre du temps.

Aussi, il n’y rien de plus frustrant que d’avoir un moment « Eurêka » après que le processus enclenché ou le résultat finalisé. Il est donc préférable de se poser les questions en amont.

Suivez cette méthode et vous déterminerez ainsi vos couleurs ou au moins les familles des couleurs qui vous correspondront.

Une valeur égale une couleur

Pour faciliter les choix des couleurs et donc la définition de votre charte graphique, nous allons partir de vos valeurs et du ressenti que vous souhaitez faire transparaître à travers votre site.
Votre charte graphique doit refléter vos valeurs. C’est un moyen sûr, efficace et concret de procéder afin de ne pas se tromper.

Transmettre une émotion

Chaque couleur ou famille de couleur transmet une émotion, une sensation, un sentiment. L’enjeu est donc de faire correspondre ces émotions à vos valeurs.

Si vous avez quelques difficultés, prêtez-vous à l’exercice de répondre à la question suivante :

« Qu’est-ce que je souhaite faire ressentir aux internautes qui visitent mon site Internet ? »

Et si vous avez une boutique physique ou si vous rencontrez déjà physiquement des clients, demandez-vous également :

« Qu’est-ce que j’apporte ou souhaite apporter à mes clients ? »

A ce stade, vous n’avez pas besoin de définir des couleurs précises. Si vous faîtes appel à un freelance, ce n’est pas votre boulot. Votre boulot est de l’orienter là où vous souhaitez aller. Définissez donc des familles de couleurs qui lui serviront de base concrète. Et si toutefois, vous identifiez des couleurs précises, tant mieux, c’est du temps de gagné !

Mais commencez par le début, réfléchissez à vos valeurs, écrivez tout ce qui vous passe par la tête puis vous identifierez les 3 plus importantes. Ensuite, utilisez la liste de correspondance ci-dessous entre couleurs et les valeurs/émotions véhiculées.

Liste de correspondance entre couleur et valeur/émotion

Ici, vous allez comprendre le sens des couleurs, quels sont les messages et les émotions qu’elles véhiculent.
En fonction de vos objectifs et valeurs, et aussi de votre secteur, vous saurez lesquelles utiliser ou du moins leurs familles.
Chaque couleur possède des nuances. Ce que vous allait découvrir n’est donc pas un cadre fermé.

Couleurs chaudes

Le rouge

C’est la plus chaude et la plus dynamique des couleurs. Le rouge est stimulant, ardent, excitant, puissant. Il évoque la joie, la fête, la vitalité, le triomphe.
Dans sa forme la plus pure, il est à utiliser de manière minime afin d’attirer l’attention, l’intérêt ou marquer l’importance.

Exemples de secteurs : Luxe, mode, sport, médias, humanitaire, vin et gastronomie.
Ne pas en abuser : Trop de rouge pur évoque la colère, la violence, le danger.

L'orange

C’est une couleur équilibrée, énergique et attirante. L’orange véhicule des valeurs de créativité et de communication en transmettant de la chaleur ainsi que de l’optimisme.
Bien utilisé, l’orange crée une impression accueillante et engageante. Il donne du positif en illuminant vos pages et/ou vos textes.

Exemples de secteurs : Communication, divertissement, sport, forme et fitness, agro-alimentaire (fruits)
Ne pas en abuser : Trop d’orange devient agressif. Cela peut également vieillir votre graphisme.

Le jaune

Couleur du soleil, c’est la plus lumineuse et énergique. Le jaune reflète le bonheur, stimule et invite au mouvement.
Le jaune provoque un sentiment de bonheur, de dynamisme et représente le contact social. De fait, C’est une couleur adéquate pour une publicité ou une communication évènementielle.

Exemples de secteurs : Tourisme, agro-alimentaire, assurance et crédit, musique, information
Ne pas en abuser : Trop de jaune fatigue les yeux et peut s’associer au mensonge, à la jalousie.

Couleurs froides

Le vert

Couleur de la Nature par excellence, le vert évoque le renouveau, l’univers des possibles et donc l’espoir.
Le Vert a un effet calmant et rafraichissant. Il apporte de l’équilibre et de l’harmonie. Dans ses tonalités plus foncées, telle que le vert émeraude, il symbolise le courage, l’intelligence et l’aisance.

Exemples de secteurs : Nature, environnement et écologie, loisirs.
Ne pas en abuser : Le vert peut parfois symboliser l’échec et la solitude.

Le bleu

Historiquement associé aux hommes et garçons, il est à la fois ciel et mer. Par ses nuances claires, il est symbole de rêve, de sérénité, de bienveillance. Par ses nuances plus foncées, il est synonyme de connaissance, de sérieux et de protection.
Idéale pour la communication, il inspire la fiabilité, la constance et la croissance.

Exemples de secteurs : Les bleus foncés sont adéquats pour des graphismes liés aux affaires, aux technologies et à l’informatique. Représentant le calme et la bienveillance, les bleus clairs sont parfaits pour des sites sociaux.
Ne pas en abuser : Sur-utilisé, il peut inspirer le dirigisme, la peur et la mélancolie.

Le violet

Le violet ou mauve représente la noblesse, l’abondance et la dignité. Symbole d’éveil de l’esprit, il peut servir à renvoyer un message de créativité et d’imagination.
Contradictoire, le violet peut être différemment perçu entre les hommes et les femmes. Les premiers y ressentent potentiellement de l’inquiétude et de l’instabilité, tandis que les dernières y perçoivent des signes positifs de réussite sociale et de luxe.
Dans ses tons plus clairs, il s’associe avec le printemps et la romance.

Exemples de secteurs : Art et culture, luxe, musique, études, croyance, business et féminité
Ne pas en abuser : De par sa contradiction entre hommes et femmes, il est préférable de l’utiliser de manière secondaire afin de valoriser d’autres couleurs.

Le rose

Couleur socialement associée aux femmes et filles, le rose représente la sensualité, le romantisme, le bien-être, et bien sûr la féminité. Il renvoie également directement à l’enfance.
En tant que couleur principale, il transmet un fort message de bonheur. Utilisé sporadiquement en contraste avec d’autres couleurs, il apportera un dynamisme certain et de la délicatesse.

Exemples de secteurs : Enfance, confiserie et pâtisserie, loisirs, art et peinture, femmes.
Ne pas en abuser : Trop l’utiliser peut donner une impression de naïveté et d’immaturité. Un aspect rétrograde ou kitch peut également apparaitre.

Couleurs neutres

Les couleurs suivantes sont conseillées pour être utilisées en tant que couleurs de fond accompagné de couleurs plus vives et lumineuses.
Les trois couleurs monochromes
NB : Ici, je resterai simple en considérant le noir, le gris et le blanc comme des couleurs.

Le noir

Couleur profondément ancrée, il symbolise la mort et le deuil quand il est seul. Accompagné de couleurs vives, il met en valeur leur lumière et apporte de l’élégance et du style.
Il évoque aussi la notoriété et le pouvoir, ainsi que la modernité.

Exemples de secteurs : Cinéma, art, photographie, luxe.
Ne pas en abuser : Ne pas l’utiliser seul ou avec du gris, ce qui donne une impression de tristesse et de monotonie. Ne pas l’associer avec du rouge vif (mort + sang).

Le gris

Associé à la tristesse, la mélancolie et la vieillesse, le gris n’est pas très positif en tant que tel. Toutefois, utilisé ponctuellement et marié avec des couleurs vives, il apporte de l’élégance et un sentiment de sobriété qui inspire le respect.
Il évoque la sagesse, la neutralité et l’équilibre.

Exemples de secteurs : Construction, design, école, argent, informatique et technologie de pointe.
Ne pas en abuser : Trop l’utiliser renvoie automatiquement un manque d’énergie, de monotonie et de tristesse.

Le blanc

Couleur de la pureté et de l’innocence, le blanc est équilibré et neutre. Relié au mariage, au paradis et à la virginité, le blanc est intrinsèquement très positif.
Il évoque la justice et la liberté, l’espoir et la clarté. Renvoyant à la propreté, il permet visuellement d’aérer l’espace et de mettre en valeur les autres couleurs.
Idéal comme couleur de fond, préférez tout de même des nuances crèmes ou pastels pour éviter un effet de vide et de creux.

Exemples de secteurs : Mode, actualités, mariage.
Ne pas en abuser : Trop de blanc atténue fortement l’identité visuelle. Il peut s’associer aux notions de vide et de stérilité.

Les marrons

NB : Je traiterai ici le marron avec ses deux nuances plus claires que sont l’ivoire et le beige.
Le marron représente le bienfait et la fiabilité et trouve ses racines dans la Nature. C’est une couleur rassurante et équilibrée qui s’associe à l’expérience et au confort.
Couleur naturelle qui suggère la force, la chaleur et la sécurité, le marron est aussi synonyme de volupté et de douceur de par l’imaginaire du chocolat et du café.
Le marron et ses nuances sont parfaits en toile de fond et se marie avec quasiment la totalité des autres couleurs, notamment le noir, le blanc, le rose, le violet et le bordeaux.
Pour ses nuances, l’ivoire représente le calme, l’élégance et la pureté. C’est une bonne alternative au trop blanc.
Le beige est relié au conservatisme et à la piété.

Exemples de secteurs : Culture, histoire, environnement, confiserie, luxe.
Ne pas en abuser : Trop de marron entraine un effet d’obsolescence voire de ringardise. Trop de beige renvoit une impression d’ennui et de manque d’intérêt.

Harmonie de couleurs

Vous avez ici un topo des éléments composant une charte graphique puis un focus sur les couleurs, leurs sens et émotions qu’elles portent avec elles et comment identifier celles qui vont correspondre à votre entreprise et l'image que vous souhaitez véhiculer.

À ce propos, je vous conseille vivement de réfléchir à ce que vous souhaitez transmettre à travers votre site afin de déterminer les couleurs et tonalités qui vous correspondent. Il n'est absolument pas nécessaire de passer énormément de temps dessus surtout si vous commencez.

Ayant cela en tête, vous serez à même de discuter convenablement et efficacement avec votre prestataire, si vous décidez de vous faire accompagner de manière approfondie.

Aussi, le travail pour obtenir une harmonie de couleur est également à votre portée si vous souhaitez y réfléchir.


Vous aimerez aussi

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}