L'Atomic Design est une méthode de conception de produits numériques qui divise les éléments d'interface utilisateur en :
- "atomes" (éléments les plus petits et fondamentaux)
- "molécules" (groupes d'atomes)
- "organismes" (groupes de molécules)
- "templates" (pages entières)
C'est un modèle mental pour penser les interfaces utilisateur comme un système de composants interconnectés et hiérarchisés.
Cette approche permet de créer des systèmes de design cohérents et réutilisables pour les sites web et les applications.
1. Atomes
Les atomes sont les éléments les plus petits et les plus simples de l'interface utilisateur, tels que :
- Les labels
- Les inputs
- Les boutons
- Les icônes
- Les typographies
- Les couleurs
- Les bordures
- Les fonds
Ces atomes incluent des éléments HTML de base qui ne peuvent plus être décomposés sans cesser d'être fonctionnels.
2. Molécules
Les molécules sont des groupes d'atomes qui travaillent ensemble pour créer des fonctionnalités plus complexes, exemple :
Un formulaire de connexion :
- Username input
- Password input
- Button
Une barre de navigation (navbar) :
- Link 1
- Link 2
- Link 3
3. Organismes
Les organismes sont des composants d'UI relativement complexes composés de groupes de molécules et/ou d'atomes et/ou d'autres organismes, exemples :
Un header :
- Icon
- Navbar
Un footer
4. Templates
Exemple :
- Une homepage
- Header
- Hero
- Footer
5. Pages
C'est le rendu finale qui contient les templates avec les données réels du site internet en ligne.
Références :