Popularisé par Brad Frost en 2013, pour répondre à la complexité croissante des interfaces et à la nécessité d’avoir des systèmes de design cohérents, l’atomic design est une manière de concevoir des interfaces en s’inspirant de la chimie pour optimiser la création d’interface responsive d’applications et sites web.
De la même manière que la matière est composée d’atomes, de molécules et d’organismes, une interface peut être décomposée en briques fondamentales. L’Atomic Design met l’accent sur la construction hiérarchique : on part des plus petits éléments pour aller vers des templates plus complexes.
Les 5 niveaux de l’Atomic Design
- Les atomes :
Ce sont les éléments de base qui, individuellement, n’ont pas de but fonctionnel mais ils constituent les bases. Il peut s’agir des couleurs, typographies, boutons, champs de formulaire, icônes, logo, police, ect..
- Les molécules
Les molécules sont les combinaisons de plusieurs atomes. Par exemple : un champ de texte + un bouton = une barre de recherche. Ces combinaisons simples commencent à former l’interface.
- Les organismes
Les organismes regroupent plusieurs molécules pour former des sections autonomes de l’interface. Par exemple : un en-tête de site composé du logo, d’une barre de recherche et d’un menu de navigation = un header
- Les templates
À ce stade, on assemble différents organismes pour donner une structure globale à la page. Les templates sont des modèles de page, qui montrent la mise en page générale sans encore se focaliser sur le contenu final (textes, images, …) - Les pages
Les pages sont la concrétisation finale : elles reprennent les templates en y intégrant le contenu réel. C’est à ce niveau que l’on valide la cohérence visuelle et fonctionnelle.
Les avantages de l’Atomic Design
- Cohérence : les éléments réutilisables assurent une uniformité à travers tout le produit, éviter ainsi que deux pages utilisent des boutons ou styles différents.
- Efficacité : les équipes gagnent du temps en capitalisant sur des composants déjà définis : on peut ainsi réduire le temps de conception, mais aussi de développement et de maintenance.
- Évolutivité : la modularité permet de faire évoluer un système sans devoir tout reconstruire (par ex. modifier un bouton dans la bibliothèque met à jour tout le site).
- Collaboration : designers et développeurs parlent le même langage grâce à une bibliothèque de composants partagée.
Atomic design et design system
L’Atomic Design est souvent la base d’un design system, car il fournit une méthode structurée pour organiser cette bibliothèque. Ainsi, les équipes bénéficient d’une meilleure cohérence à travers tous leurs produits, d’une plus grande efficacité grâce à la réutilisation des composants, et d’une meilleure collaboration puisque designers et développeurs parlent le même langage. De plus, cette organisation rend le système évolutif : modifier un composant dans la bibliothèque met automatiquement à jour toutes les interfaces qui l’utilisent.
En résumé
L’Atomic Design n’est pas seulement une métaphore élégante : c’est une véritable philosophie de construction qui favorise la clarté, la réutilisabilité et la scalabilité dans la conception d’interfaces responsives. En adoptant cette approche, les équipes construisent des systèmes robustes et flexibles, tout en gagnant du temps sur la confection des maquettes et facilitent également la communication avec les équipes de développement.
Pour compléter vos connaissances et connaître l’Atomic Research, n’hésitez pas à jeter un coup d’oeil à notre article L’Atomic Research : une méthode pour mutualiser l’apprentissage en UX partie 1 et partie 2
Julie Bouvier, Product designer chez UX-Republic
