La charte graphique est un document qui sert de point de repère visuel afin de définir comment et dans quelles conditions utiliser les éléments visuels et in fine.
Pour un site internet en particulier, elle sert à simplifier la navigation, à homogénéiser l’ensemble des publications web et à favoriser l’accès à l’information sur l’ensemble du site et de ses rubriques.
L’objectif final est d’afficher une identité propre.
Sommaire
Que trouve-t-on exactement dans cette charte graphique ?
Même s’il n’y a pas de règle précise pour élaborer une charte graphique d’un site web, design et ergonomie (car aucune ne se ressemble), il y a toutefois quelques principes fondamentaux à respecter :
- Une foultitude d’idées qui permettra de bien cerner le thème du site internet.
- La création du logo.
- La disposition des éléments graphiques (maquette papier).
- Le choix des couleurs du site (entre 3 et 5).
- Le choix des polices du site.
- La réalisation de la maquette sur Photoshop (assemblage des différents éléments).
- La création de la bannière (qui en général contient le logo).
- La création des menus.
- La simulation d’un contenu.
- La mise en oeuvre d’un pied de page.
1. Une foultitude d’idées qui permettra de bien cerner le thème du site internet
La charte graphique d’un site internet sert à créer l’identité visuelle du site pour savoir de quel type de site il s’agit dès la première page visitée.
En même temps, elle sert à aider les visiteurs à s’y retrouver facilement dès le premier coup d’œil.
La première étape indispensable est pour cela de cerner le thème du site internet grâce à des mots-clés, des images, des couleurs, des tons… bref, une association ou… « tempête » d’idées !
Prenons un exemple concret : réaliser un site internet qui parle de la grossesse et des bébés. Les premières questions qui devront venir à l’esprit seront : qu’est-ce qui caractérisent la grossesse et les bébés ?
Comment peut-on graphiquement recréer cet univers pour que le visiteur sache de quoi parle le site rien qu’avec un seul coup d’œil?
On peut penser à une femme enceinte avec un gros ventre, à des parents heureux en train de regarder une échographie, au fœtus en images, à des bébés souriants…
Il va aussi sans doute falloir prévoir des poussettes, des berceaux, des mobiles, des biberons, des jouets… et tout ce qui peut se rapporter à ce thème.
Dans cette optique, la charte graphique doit donc permettre aux visiteurs de répondre d’un seul coup d’œil à plusieurs questions entre autres :
- Pourquoi suis-je là ?
- À qui appartient ce site ?
- Quelles informations me donne ce site ?
- De quoi parle ce site ?
C’est pourquoi, mise à part la tempête d’idées pour bien cerner le thème du site internet, il faut également créer le logo du site, définir la disposition des éléments graphique, choisir les couleurs du site et les polices, puis créer la bannière, les menus, le contenu et finalement le pied de page.
2. La création du logo
Le logo, c’est la signature visuelle du site, un élément majeur de la charte graphique. Cette dernière expliquera entre autres :
- sa symbolique
- ses proportions
- sa taille minimum
- les marges à respecter autour du logo
- son positionnement par rapport aux autres éléments (textes, marges, titres…)
- les couleurs
3. La disposition des éléments graphiques (maquette papier)
Il ne faut pas l’oublier, il y a plusieurs composants dans un site web. Les quatre parties principales dans les cas les plus classiques sont :
- La bannière, le cœur graphique du design
- Le menu qui permet de choisir le contenu à afficher
- Le corps où l’on affiche tout le contenu de la page
- Le pied de page pour afficher des éléments (visuels ou textuels) de manière moins apparente
Pour réaliser un site web, la disposition de ces éléments graphiques devra d’abord être étudiée sur maquette papier avant d’être réalisée sur Photoshop.
4. Le choix des couleurs du site
La charte graphique définit également les couleurs susceptibles d’être souvent utilisées, notamment celles qui font partie de l’identité de la marque et/ou de l’entreprise.
Pour une meilleure mémorisation et une distinction rapide, le choix des couleurs doit être limité, entre trois et cinq.
5. Le choix des polices du site
Les polices de caractère ou typographie sont définies dans la charte : règles d’utilisation des polices selon les documents, explication du choix des polices à utiliser pour un maximum de confort de lecture et pour véhiculer un ensemble d’impressions.
6. La réalisation de la maquette sur Photoshop (assemblage des différents éléments)
Une fois le logo, les éléments graphiques, les couleurs et les polices définis, la charte graphique présente en détail la réalisation de la maquette sur Photoshop, l’assemblage de tous les éléments présentés ci-dessus.
Elle présentera et expliquera donc de manière précise :
- La création de la bannière (qui en général contient le logo) : ton, couleurs, images… c’est elle qui joue le premier rôle en termes d’esthétisme
- La création des menus : on y met par exemple différentes sections du site avec des noms évocateurs comme « Page d’accueil », « Qui sommes-nous ? », « Contact », « Blog », « Inscription »…
- La simulation d’un contenu : Prenons par exemple le bouton “Contact” du menu. Si on clique dessus, le corps va afficher un formulaire de contact, des coordonnées, un plan, etc.
- La création d’un pied de page : Souvent, on peut lire dans les pieds de page : plan du site, contact, à propos de, presse, choix de la langue, mentions légales, etc.
