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.
Exemples :
- Un formulaire de connexion (Username input + Password input + Button)
- Une barre de navigation (Link + Link + Link)
3. Organismes
Groupes de molécules rassemblé ensemble pour former une section d'une interface.
Exemples :
- Un header (Icon + navbar)
- Un footer (Icon + navbar)
4. Templates
Exemples :
- 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 :