Le guide style est un document qui définit les règles d’utilisation des éléments visuels d’un produit numérique.
Il définit la charte graphique du site, c’est-à-dire ses couleurs, sa typographie, ses icônes, ses images en rendu réel.
Parfois le guide style est une documentation réelle créée par le concepteur ou le développeur du site et publiée en ligne pour partager et expliquer les choix de conception.
Certains guides de style sont créés uniquement à des fins internes, tandis que d’autres sont partagés délibérément pour des raisons de transparence et d’éducation.
Eléments inclus dans un guide style
- Les couleurs : les couleurs principales, secondaires et accent.
- La typographie : les familles de polices utilisées sur le site web, ainsi que les tailles, les graisses et les espacements des caractères.
- L’iconographie : les icônes utilisées sur le site web, y compris leurs dimensions, leurs couleurs et leurs styles.
- Les espacements : des espacements propotionnés entre groupes d’éléments.
- Les images : les types d’images utilisées sur le site web, ainsi que leurs formats, leurs dimensions et leurs styles.
- Les éléments graphiques : des éléments graphiques spécifiques au site web, tels que des logos, des illustrations ou des animations
Différencier guide style, charte graphique, UI Kit, design system
Charte Graphique (Brand Guidelines) : accès sur l’identité visuelle
Une charte graphique est un ensemble de directives visuelles spécifiques à une marque. Elle définit l’identité visuelle globale d’une entreprise ou d’une organisation, allant au-delà des interfaces numériques. La charte graphique inclut généralement des éléments tels que :
- Couleurs de la marque : Palette de couleurs définie avec des codes spécifiques (hexadécimaux, RVB, etc.).
- Typographie : Choix des polices de caractères et directives sur leur utilisation.
- Logo : Règles d’utilisation du logo, variations autorisées, tailles minimales, etc.
- Images et photographies : Directives sur le style d’images et de photographies à utiliser.
UI Kit (User Interface Kit) : composants visuels et fonctionnels d’interface prêts à l’emploi
Un UI Kit est un ensemble d’éléments d’interface utilisateur réutilisables, souvent au format vectoriel, prêts à l’emploi, facilitant la création cohérente d’interfaces graphiques. Il est généralement spécifique à un projet ou à une marque et comprend :
- Composants d’interface : Boutons, formulaires, cartes, barres de navigation, etc.
- Éléments de navigation : Icônes, menus déroulants, onglets, etc.
- Styles de texte et de typographie : Tailles de police, espacements, couleurs, etc.
- Couleurs : Palette de couleurs spécifique à l’interface utilisateur.
Design System : approche holistique et systémique
Un design system est une approche plus holistique qui englobe la charte graphique et l’UI kit. Il vise à fournir des lignes directrices pour concevoir, construire et maintenir un produit ou une interface utilisateur cohérents à travers différentes équipes et plates-formes. Un design system peut inclure :
- Composants UI : Ensemble de composants réutilisables comme dans un UI kit.
- Guidelines de conception : Principes de conception, philosophie d’interaction, etc.
- Documentation technique : Directives pour les développeurs, codes, modèles, etc.
- Accessibilité et animations : Lignes directrices pour garantir l’accessibilité et la cohérence dans les animations.
Le produit ou service est considéré dans son ensemble, en tenant compte de tous ses aspects, y compris les aspects visuels, fonctionnels, ergonomiques et sémantiques.
Processus de fabrication
- Une entreprise peut créer une charte graphique qui définit sa palette de couleurs, sa typographie et son iconographie.
- Ensuite elle peut créer un UI kit qui inclut des composants visuels tels que des boutons, des menus et des formulaires.
- Enfin, l’entreprise peut créer un design system qui inclut la charte graphique, l’UI kit, des guidelines de conception et des exemples de code.
Syn : style guide