La charte graphique

Après avoir vu le cahier des charges, un autre document requiert toute notre attention lors de la création d’un site internet : il s’agit de la charte graphique. Qui, quoi, comment ? Une fois de plus je vais tenter de répondre à ces différentes questions.

Qu’est ce qu’une charte graphique ?

Une charte graphique est un document qui décrit les caractéristiques visuelles d’un support de communication. Vous devez y trouver l’ensemble des règles d’utilisation des différents signes graphiques qui constituent l’identité graphique d’une entité (organisation, entreprise, administration, club sportif, association …)

Je ne parlerai dans cet article que du cas de la charte graphique web.

A quoi sert-elle ?

La charte graphique sert de référentiel.

Elle permet aux différents acteurs susceptibles de travailler et/ou de modifier l’aspect graphique d’un support, de garder une cohérence visuelle sur l’ensemble de ce support. Cela garantie une identité graphique claire, homogène et sans ambigüité.

Cette cohérence graphique facilite :
- la reconnaissance de l’entité par le récepteur
- l’expérience de navigation de l’utilisateur au sein des pages d’un même support

Qui doit la rédiger ?

Le rédacteur de la charte graphique est généralement un créatif. Il est logique que la personne qui ait conçue le design d’un site web, rédige également la charte graphique. En effet, c’est à priori la personne la plus au courant des choix graphiques effectués dans la mise en place du design.

Notons, que dans le cadre d’un site internet, il est possible à partir des feuilles de style CSS, de retrouver une grande partie des informations nécessaires à l’élaboration de la charte graphique.

Comment la rédiger ?

Voici une proposition de plan pour rédiger une charte graphique :

I. Univers graphique

1. Objectif(s) et contexte

Quel est brièvement l’objectif du site ?
Dans quel contexte se fait cette création ?
Si il s’agit d’une refonte, quels sont les points à améliorer ?

2. Tonalité graphique

Quel doit être l’ambiance du site ?
Quelles caractéristiques graphiques doivent se dégager ?

3. Message(s) à véhiculer

Quel message le design devra-il transmettre ?

4. Valeur(s) à transmettre

Quelles valeurs de l’entreprise le design devra-il transmettre ?

II. Organisation structurelle des écrans

Comment les grands blocs de contenu s’organisent-ils dans la mise en page ?

Cette partie peut être reprise des documents de zoning établit par les responsables d’architecture de l’information, les ergonomes et les directeurs artistiques. Les documents de zoning indiquent également les niveaux de hiérarchie des différents éléments dans la page.

III. Organisation métrique des écrans

1. Description des côtes

Il s’agit de la taille en pixel des principaux blocs d’éléments de la page.

2. Description des marges

Il s’agit de la taille en pixel des marges qui séparent les principaux blocs d’éléments de la page.

A partir des gabarits des principaux écrans du site, placer des repères visuelles et des commentaires indiquant des informations sur la taille des éléments et les marges qui les séparent. Cette description doit permettre aux intégrateurs de construire les pages en respectant les proportions, les positionnements, les blancs tournant qui caractérisent la mise en page dessinée par le graphiste. Attention, ne négligez pas les petits éléments comme les boutons, les puces, les icônes … qui doivent également être placés de manière rigoureuse et homogène sur toutes les pages.

IV. Palette chromatique

Elle décrit l’ensemble des caractéristiques chromatiques utilisés dans le site.

Indiquer également si certaines couleurs sont à proscrire ou au contraire déjà utilisées dans d’autres supports de communication et donc à réutiliser.

Ne pas oublier les différentes couleurs des liens selon leur état (visité ou non, actif, rollover …).

V. Typographie

Il s’agit de la description de tous les paramètres liés au texte et blocs de texte : police, taille, graisse, soulignement ou pas, interlignage, interlettrage …

VI. Éléments graphiques

Il s’agit du logo, des icônes, des pictogrammes, des puces, des illustrations et des photographies.

Indiquer leurs tailles, leurs couleurs, leurs zones d’exclusion (logo), leurs marges, la présence d’un cadre ou non.

Pour les pictogrammes et icônes, indiquer leur signification et leur fonction.

Sources :

Charte graphique, Wikipédia.
Elaborer un document de charte graphique pour le web, livre blanc rédigé par Benoit Drouillat.