Le styleguide : Pourquoi l’utiliser ?

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 !