La charte graphique web est un document qui regroupe l’univers graphique et interactif d’un site Internet. Par extension à la charte graphique print, elle représente l’identité et l’image de l’entreprise ou d’un de ses produits sur la toile.
Elle découle naturellement du logotype de l’entreprise.
Que contient une charte graphique web ?
- Couleurs
- Typographie
- Logo
- Icônes
- Boutons
- Eléments de formulaire
- Eléments d’animation
- Tableaux
Livrable attendu :
- Document écrit contenant l’ensemble des éléments ci dessus
Attention, il ne s’agit en aucun cas d’une maquette de la page d’accueil !
Couleurs
Les codes couleurs issus du logo (généralement 2) ainsi que toutes les nuances nécessaires à l’interaction du site Internet :
- titres,
- textes,
- hyperliens dans leurs 3 états ; actif, survol, cliqué. Ces liens doivent être totalement distinct des éléments en gras ou en emphase.
- éléments d’alertes, messages d’erreurs, boutons
Typographie
Les polices de caractères à utiliser sur le site Internet, généralement 2 parfois 3. Elles seront utilisées sur le site afin de préserver la cohérence des contenus :
- Baseline,
- titres,
- texte,
- citations
La taille des polices est également définie, la taille par défaut, généralement comprise entre 12 et 16 pixels, ainsi que les tailles des éléments typographiques :
- titres,
- éléments mis en avant,
- paragraphes,
- citations,
- annotations,
- formulaires
- tableaux,
- etc.
Logotype
Il s’agit des variantes du logotype à utiliser sur le site :
- entête du site,
- pied de page,
- partage sur les réseaux sociaux
Icônes
Les sets d’icônes d’interactions ou informatives à utiliser sur le site. Aujourd’hui ces set d’icônes sont le plus souvent des polices de caractères particulières. Les plus courantes sont Glyphicons, FontAwesome et peuvent être étendues avec des icônes spécifiques à votre activité.
La plupart de ces icônes étant universellement reconnues et identifiées, il est recommandé de ne pas trop s’éloigner de la symbolique qu’elles véhiculent.
Boutons
Les boutons sont des éléments visuels indispensables pour interagir avec le site Internet, ils doivent être clairement identifiables et explicites. Ils sont de plusieurs types et leur impact sur la conversion de votre site est essentielle :
- Bouton d’action principal,
- Bouton d’action secondaire,
- Bouton d’information,
- Bouton d’annulation,
- etc.
Eléments de formulaire
Cela regroupe les éléments telles que :
- champ texte,
- cases à cocher,
- bouton radio,
- menus déroulants,
- étiquettes des champs
Il faut ajouter à celà les messages d’erreurs ou de validation des champs lors de l’interaction par l’utilisateur.
Eléments d’animation
Ces éléments ont pour but de capter l’attention de l’internaute pour l’inciter à interagir avec le site Internet, une action devrait être attendue à chaque élément interactif afin de tirer profit de l’intérêt du visiteur :
- popin : éléments qui apparaît en sur impression sur la page,
- accordéons,
- onglets,
- diaporamas
Tableaux
Les tableaux sont à utiliser avec précaution. Ils doivent présenter des données et les contraintes liées à l’utilisation des mobiles doit les rendre lisibles sur tout support.