Atomic design
L‘Atomic Design est une méthode de conception d‘interfaces utilisateur qui décompose les éléments en atomes, molécules, organismes, templates et pages pour créer des interfaces cohérentes et réutilisables.
L’Atomic Design est une approche de conception formalisée par Brad Frost en 2013. Elle vise à créer des interfaces utilisateur cohérentes et réutilisables en décomposant les éléments en cinq niveaux : les « atomes », les « molécules », les « organismes », les « templates » et les « pages ». L’analogie vient de la chimie : la matière se construit à partir de quelques éléments simples, combinés selon des règles stables.
Cinq niveaux, du plus simple au plus complet
Atomes
Les atomes sont les éléments de base : boutons, champs, icônes, titres, mais aussi les jetons de couleur, de typographie et d’espacement. Seuls, ils ont peu de sens ; ils fixent pourtant le vocabulaire visuel de tout le système.
Molécules
Les atomes s’assemblent en molécules, de petits groupes qui remplissent une fonction : un champ de recherche avec son libellé et son bouton, une entrée de menu avec son icône, un formulaire simple.
Organismes
Les organismes combinent des molécules pour former un composant autonome et réutilisable : un en-tête de site, une liste de cartes, un formulaire complet.
Templates et pages
Les templates organisent les organismes en une mise en page, sans contenu réel ; les pages sont ces mêmes templates remplis de vrais contenus. C’est à ce niveau que l’on vérifie que le système tient face aux textes longs, aux images manquantes ou aux traductions.
Pourquoi l’adopter
Cette approche favorise la modularité et la réutilisabilité, et encourage une conception systématique à grande échelle. Elle donne aux designers et aux développeurs un langage commun, se prête naturellement aux bibliothèques de composants et aux design systems, et rend les évolutions plus sûres : modifier un atome se répercute partout où il est utilisé.
Les limites de la métaphore
La métaphore ne doit pas devenir un carcan. La frontière entre molécule et organisme est parfois floue ; l’essentiel est que l’équipe partage les mêmes conventions de découpage et de nommage.