Sommaire
Partager sur

Pour certains c’est une évidence, pour d’autres le terme de “style­guide” n’évoque rien, si c’est votre cas, cet article est fait pour vous !

Le style­guide ou GUI (Graphi­cal User Inter­face) est un docu­ment qui compile l’en­semble des éléments d’une inter­face compo­sant un site Web ou une appli­ca­tion (mobile, métier). C’est en quelques sortes une charte graphique très complète.

Le style­guide fait office de réfé­rence commune pour tous les compo­sants graphiques. Il est à la fois utile à l’UI desi­gner, lors de la créa­tion des maquettes, et à l’équipe de déve­lop­pe­ment front-end, lors de l’in­té­gra­tion. Il est égale­ment très utile pour évoquer les diffé­rentes évolu­tions du projet, lors des itéra­tions.

Concrè­te­ment, il permet à l’en­semble des acteurs d’un projet digi­tal de gagner du temps, par exemple pour ajou­ter de nouvelles pages, ou faire évoluer des compo­sants. C’est LE modèle qui permet­tra de garder une harmo­nie et une réelle cohé­rence sur l’en­semble des pages d’un site ou d’une appli­ca­tion.

Pour les desi­gners, il a l’avan­tage d’of­frir une vision globale, recen­sant tous les éléments, et donc d’évi­ter d’avoir, d’une page à une autre, un élément décliné diffé­rem­ment.

Pour les déve­lop­peurs front-end, il sera un outil indis­pen­sable pour créer des feuilles de style.

Il permet­tra égale­ment de faci­li­ter le dialogue entre l’in­té­gra­teur et le desi­gner.

Côté client, il aura l’avan­tage d’of­frir un cadre stricte, qui permet­tra de garan­tir une cohé­rence globale.

Cons­truire un style­guide

Un style­guide peut être plus ou moins complexe selon la nature du projet, et son ampleur.

Nous avons compilé les diffé­rents éléments que nous retrou­vons géné­ra­le­ment sur ce style­guide, afin de vous aider visua­li­ser plus clai­re­ment en quoi il consiste, et la manière dont il faut les présen­ter.

Le logo

  • ses diffé­rentes utili­sa­tions
  • sa taille mini­male et maxi­male
  • son type de fond
  • les couleurs

Les typo­gra­phies

  • la police d’écri­ture
  • les taille de police utili­sées
  • sa graisse
  • le style (h1, h2, para­graphe..)
  • les règles d’uti­li­sa­tion ( devant image, sur fond de couleur..)
  • la hauteur de ligne
  • le kerning

Le choix des couleurs

  • code hexa­dé­ci­mal
  • code RVB
  • type : primaire ou secon­daire

Les icônes et picto

  • leur zone de sécu­rité
  • leurs compor­te­ments

Les images

  • le style du trai­te­ment photo/image
  • les marges
  • les règles de rognage

La grille

  • la base­line grid
  • les colonnes (mobile / tablette / desk­top)

Les boutons et pop ups

  • couleur
  • taille en px
  • le padding
  • le radius si néces­saire
  • les compor­te­ments (au hover, au clic)

Les formu­laires

  • le padding et margin des colonnes
  • le style des sépa­ra­tions

Struc­ture

  • les régions de l’in­ter­face (footer, hear­der, navi­ga­tion, tool­bar, menu burger, le keyboard)

Un docu­ment qui évolue

Le style­guide ne doit pas être un docu­ment figé, il doit évoluer à mesure que le temps passe, au même rythme que votre site web.

Il permet égale­ment de cadrer les évolu­tions de votre projet sans avoir à vous replon­ger dans tous les psd de votre site à la recherche des diffé­rents éléments. Tous les éléments récur­rents sont censés s’y trou­ver, et chaque mise à jour graphique, chaque évolu­tion doit faire l’objet d’une mise à jour de votre style­guide.

À vous de jouer main­te­nant !