Assurez la cohérence visuelle avec votre charte graphique

14 mai 2021 — Experience Utilisateur
Photo by Jackie Hope on Unsplash

Une charte graphique est un outil qui définit précisément l’identité visuelle de votre marque. Elle a pour but d’assurer la cohérence graphique de l’ensemble des réalisations pour cette marque. Concrètement, cet outil est donc un document qui donnera toutes les indications clés pour un graphiste, mais également l’ensemble des communicants.

Une charte graphique ?

charte graphique

Une identité forte donnera du crédit à votre marque et sera un gage de crédibilité auprès de vos prospects, clients et partenaires. Elle comprend généralement :

  • le logo
  • des polices de caractères;
  • des couleurs ;
  • des icones/pictogrammes
  • parfois, les animations et intéractions (si le support de la charte le permet)
  • les bonnes pratiques et les interdits

N’oubliez pas également que votre charte peut comporter plusieurs identités, qu’elles soient graphiques, sonores, ou même olfactives, afin de proposer une expérience différente et enrichie à vos utilisateurs.

Présenter l’univers de la marque

balazs ketyi lpwl2pevgkc unsplash edited 1

En premier lieu, faites la fiche d’identité de l’entreprise. Il faut aller à l’essentiel, lui donner les clés principales pour l’aider dans sa tâche qui concerne l’univers graphique. Par exemple:

  • la mission explicite concrètement le rôle de l’entreprise, sa raison d’exister.
  • la vision explique les ambitions de la structure dans l’avenir.
  • l’historique rapide de l’entreprise, éventuellement les anciens logos.
  • les publics ciblés.
mourizal zativa gnmvpape3pe unsplash edited scaled

Un logo ne doit pas juste être beau et artistique, il doit surtout être efficace, lisible, et répondre à un objectif. Choisissez parmi les trois grands types de logos:

  • iconiques (ex: Apple, Nike, VolksWagen…)- réservé aux marques à très grande notoriété
  • typographiques (ex: Google, CocaCola…)
  • combinés (ex: Lacoste, BNP Paribas, Michelin…)

Ensuite,

  • Testez votre logo en monochrome, en miroir, de loin.
  • Définissez la taille minimale pour l’affichage du logo.
  • Définissez l’espacement à réserver autour du logo pour assurer la lisibilité

Choisissez vos polices

st james studio id5lt7 sydq unsplash edited 1 scaled

Les polices existantes sont très nombreuses:

  • Suivez le contexte de votre marque. Par exemple, les polices Serif (avec des empattements – comme Time New Roman) inspirent la tradition, le raffinement… alors que les polices Sans Serif (sans empattement – comme Arial) montrent plutôt la modernité.
  • Pensez aussi aux traitements possibles sur les polices : l’espacement des lettres et des lignes, les couleurs, l’épaisseur.
  • Ajoutez une ou deux polices complémentaires, pour s’adapter à vos différentes communications. Par exemple, dans un site web, la police des titres est généralement différente de celle des textes.
  • Utilisez l’extension WhatFont pour identifier une police qui vous plait sur une page web.

Déterminez vos couleurs

balazs ketyi feueg 8xla8 unsplash edited 1
  • Commencez par sélectionner quelques couleurs en cherchant leurs symboles. Par exemple, le rouge inspire la force et l’urgence, et le bleu inspire la légitimité et le sérieux
  • Pour faire varier les couleurs, on utilise généralement la tonalité, la saturation et la clarté
  • Choisissez quelques autres couleurs additionnels qui pourront vous servir à accentuer certains éléments et gagner l’attention de votre public. Entre 1 et 4 max.
  • Puisque votre charte graphique doit être utile pour tous les formats, les couleurs choisies doivent être lisible autant pas un développeur web, qu’un imprimeur. Or il existe plusieurs modes de couleurs pour ces métiers (HEX, RVB, CMJN). Veillez à spécifier vos couleurs dans ces différents modes.

Icones et Photographies

balazs ketyi aacursb7auc unsplash edited scaled

Concernant les icones/pictogrammes, il est au moins nécessaire de cadrer leur style (filaire, plein…), leurs tailles, leurs couleurs…

Concernant les photos, il est préconisé de présenter une direction artistique pour leur sélection par les communicants ou les iconographes. Par exemple, la tonalité, l’ambiance, le cadre…

Les bonnes pratiques et les interdits

med badr chemmaoui zspbhokqdmc unsplash edited scaled

Il est important de guider les utilisateurs de votre charte graphique en définissant les bonnes pratiques et les interdits.

  • Définissez la position et la taille des éléments graphiques (ex: logo) pour vos différents supports (site web, carte de visite, flyers…) en montrant explicitement les exemples.
  • Les interdits peuvent être :
    • interdiction d’utiliser le logo sur un fond qui n’est pas blanc
    • ne pas déformer le logo en modifiant son ratio
    • ne pas retirer la tagline sous le logo…
  • Pour finir, même si elle n’est pas encore complète, votre charte graphique devra être adoptée par toute votre équipe et tous vos collaborateurs externes s’ils travaillent pour votre communication. Veillez donc à la laisser disponible.
  • Et idéalement, la justification de tout changement permettra à chacun de comprendre et s’approprier les codes visuels de votre marque.

Espérons que cet article vous permettra de préparer votre projet avant de lancer votre site web !

Chargement