Projet scolaire · Design System · Atomic Design
Design
System
Construire un design system marque blanche réutilisable comme base pour tous nos futurs projets.
Une base solide
pour tous les projets.
L'objectif de ce projet scolaire était de créer un design system en marque blanche — c'est-à-dire sans identité visuelle imposée — pour qu'il puisse servir de fondation réutilisable sur n'importe quel projet futur, quel que soit le client ou le secteur.
En tant que Design System Lead, j'ai piloté la structuration du DS, la définition des tokens, la création des composants et la rédaction de la documentation. Le tout construit sur une méthodologie Atomic Design — des atomes aux organismes.
5 étapes,
une méthodologie design.
La construction du DS a suivi une méthodologie UX rigoureuse en 5 étapes — de la recherche à la validation des composants en conditions réelles.
Recherche 🔍
Prise de contact · Audit de l'existant · Étude des besoins
Idéation 💡
Création des composants · Imagination de solutions
Tests 🔧
Tests des composants · Validation de l'utilisation
Définition ✏️
Définition des problèmes à résoudre · Périmètre du DS
Prototypage 🖥
Concrétisation des éléments · Assemblage des composants
Méthodologie design — les 5 étapes du projet
Un DS structuré
en Atomic Design.
Le design system est organisé selon la méthodologie Atomic Design de Brad Frost — 5 niveaux de granularité, des plus petits éléments aux pages complètes. Chaque niveau est documenté et tokenisé pour une utilisation cohérente et scalable.
Atomes
Couleurs, typographie, icônes, espacements, tokens de base.
Molécules
Boutons, inputs, champs de formulaire, badges, chips.
Organismes
Navigation, cards, formulaires, modales, tableaux.
Templates
Layouts de pages, grilles, structures de mise en page.
Pages
Instances concrètes, exemples d'utilisation du DS en contexte.
Nomenclature & documentation — langage commun de l'équipe
Nomenclature commune
Documentation D.S dans Notion
Ce que ce projet
m'a appris.
Piloter un design system m'a appris que la rigueur et la documentation sont aussi importantes que l'esthétique. Un DS mal documenté n'est pas utilisé — et un DS qui n'est pas utilisé n'a aucune valeur.
La méthodologie Atomic Design force à penser le design de façon systémique plutôt qu'intuitive — un changement de paradigme qui améliore durablement la qualité et la cohérence des interfaces.
Apprentissage 01
Penser systémique
Atomic Design oblige à concevoir des composants réutilisables plutôt que des écrans isolés — un gain de temps considérable sur le long terme.
Apprentissage 02
Documenter, c'est designer
Un composant sans documentation claire n'est pas utilisable par une équipe. Écrire les règles d'usage fait partie du travail de design.
Apprentissage 03
Collaboration & gouvernance
Aligner designers, product owners et développeurs sur un même langage visuel est l'un des défis les plus complexes — et les plus précieux.