Atomic design : définition, 5 niveaux et exemple concret

Atomic design : la définition

Imaginez une interface construite comme on assemble de la matière. De petites pièces se combinent, puis forment des ensembles toujours plus grands. Bouton, champ de saisie, icône : voilà les plus petites. Réunies, elles donnent un formulaire ; le formulaire rejoint un en-tête complet, et l'en-tête finit dans une page entière.

C'est Brad Frost, designer web américain, qui a formalisé la méthode, d'abord dans un article de blog en 2013, puis dans un livre intitulé « Atomic Design ». Sa source d'inspiration ? La chimie, où les atomes forment des molécules, elles-mêmes regroupées en organismes. Du vocabulaire d'origine, on a gardé les termes anglais : atoms, molecules, organisms, templates et pages.

En clair, l'atomic design is a methodology for creating design systems, pour reprendre la formule qui circule dans la communauté anglophone. Ni logiciel ni framework, donc. Je la décrirais plutôt comme une façon de penser et de nommer les éléments d'une interface, applicable aussi bien dans Figma qu'en CSS, avec React, Vue ou Angular.

À quoi sert l'atomic design pour votre site ?

Si vous dirigez une entreprise, l'intérêt se mesure vite. Faire évoluer un site construit en briques réutilisables coûte moins cher. Vous modifiez un bouton une fois ? Toutes les pages qui l'utilisent suivent. Adieu les vingt nuances de bleu et les boutons qui changent de forme d'une page à l'autre.

Une interface plus cohérente

Rien ne rassure autant un visiteur qu'une interface régulière. Gardez un même style de bouton pour chaque appel à l'action : l'utilisateur comprend tout de suite où cliquer. Cette constance profite aussi à l'expérience utilisateur et l'interface, deux leviers qui pèsent directement sur la conversion.

Un gain de temps pour l'équipe

Designers et développeurs finissent par parler la même langue. « Molécule de recherche », dit le designer, et le développeur voit aussitôt de quel composant il s'agit. Résultat : le travail de development avance plus vite, puisqu'on pioche dans une bibliothèque existante au lieu de repartir d'une page blanche.

Moins de dette technique

Bricolé page par page, un site accumule du code dupliqué, et chaque retouche devient risquée, puis chère. En centralisant styles et comportements dans des composants uniques, l'atomic design freine cette dette technique.

Comment ça marche : les 5 niveaux de l'atomic design

Cinq étages, chacun posé sur le précédent : tout le cœur de la méthode est là. Pour les pièces, regardez les trois premiers. Les deux derniers, eux, décrivent leur mise en page.

1. Les atomes (atoms)

Impossible de découper un atome davantage sans qu'il perde son sens : c'est le plus petit élément d'une interface. Seul, il sert rarement. Il fixe pourtant les règles de base.

• un bouton
• un champ de texte
• une étiquette (label)
• une icône
• une couleur, une police, un espacement

2. Les molécules (molecules)

Prenez un label, un champ et un bouton, assemblez-les, et vous obtenez un champ de recherche. Une molécule, c'est exactement cela : un petit groupe d'atomes qui fonctionnent ensemble. Elle remplit une fonction précise, une seule. D'où la facilité avec laquelle on la teste et la réutilise.

3. Les organismes (organisms)

Viennent ensuite les organismes, des sections complètes de l'interface faites de molécules et d'atomes. Logo, menu de navigation et champ de recherche réunis ? Voilà un en-tête de site. Grille de produits, pied de page, formulaire de contact entrent dans la même catégorie. On reconnaît déjà, à ce stade, des morceaux de vrai site.

4. Les templates

Avec les templates, les organismes prennent place dans une structure de page. Pas encore de contenu final : du texte fictif, des images grises, et la mise en page qui se dessine. Vous penserez sans doute à un wireframe, à une différence près, et elle compte : le template est construit avec les vrais composants. Il sert à vérifier l'équilibre de la page et son comportement en responsive design.

5. Les pages

Remplissez un template avec le vrai contenu (textes, photos, prix réels) et vous tenez une page. C'est elle que voit l'internaute. Ce dernier niveau met le système à l'épreuve dans des conditions réelles, et je le trouve souvent le plus instructif : un titre trop long ou une photo mal cadrée suffit à révéler les faiblesses d'un composant.

Un exemple concret : la page contact d'une PME

Prenons une entreprise de rénovation. Elle veut une page contact capable de générer des demandes de devis. Voyons comment l'atomic design la découpe, de la plus petite pièce jusqu'à la page finale.

Où est le bénéfice ? Il se voit plus tard. Six mois après, l'entreprise lance une landing page pour une campagne publicitaire. Comme le formulaire existe déjà, on reprend l'organisme tel quel. En quelques jours, la nouvelle page est en ligne, avec le même style et le même suivi des conversions.

Côté code : React, Vue et Storybook

En développement, chaque niveau se traduit par un dossier ou un composant. Sur un projet React ou Vue, vous croiserez souvent une arborescence atoms, molecules, organisms, templates et pages. Storybook, de son côté, affiche chaque composant isolément, avec ses variantes et ses états. Et pour la maquette ? Figma propose des composants et des variantes qui suivent la même logique.

Atomic design et design system : quelle différence ?

Proches, les deux notions ne se confondent pas pour autant. Par design system, on entend l'ensemble des règles, composants et documentations qui encadrent l'interface d'un produit. L'atomic design, lui, est une méthode pour construire ce système et l'organiser.

• Côté résultat, le design system : une bibliothèque de composants, une charte, des règles d'usage.
• Côté méthode, l'atomic design : une façon de classer et d'assembler ces composants.
• Rien n'empêche de bâtir un design system sans atomic design, mais pour une équipe qui débute, la méthode offre un cadre clair.

Une PME n'a pas besoin d'un système aussi vaste que celui d'un grand groupe. Vingt à trente composants bien pensés couvrent souvent un site vitrine ou une boutique, et c'est ce que je recommande. Nous suivons cette approche en création de site internet : peu de briques, mais solides et réutilisées partout.

Les erreurs courantes avec l'atomic design

Sur le papier, rien de plus simple. En pratique, certains pièges reviennent souvent, surtout lors des premiers projets.

Débattre sans fin du bon niveau

Une carte produit est-elle une molécule ou un organisme ? Des équipes y passent parfois des heures. Mon conseil : rappelez-vous que le classement est un outil, pas une fin. Fixez une règle simple, notez-la, avancez.

Créer trop de composants

À vouloir tout découper, on se retrouve avec trois versions du même bouton. Chaque nouveau composant doit répondre à un vrai besoin. Avant d'en créer un, vérifiez donc qu'une simple variante d'un composant existant ne ferait pas déjà le travail.

Oublier l'accessibilité et les états

Un bouton n'a pas un aspect unique. Survolé, actif, désactivé : chaque état compte, sans oublier l'état focus pour la navigation au clavier. Pensés dès l'atome, ces états profitent à tout le site. Oubliés, ils propagent le même défaut sur chaque page.

Négliger la documentation

Sans mode d'emploi, une bibliothèque finit ignorée. Accordez à chaque composant une courte fiche : à quoi il sert, quand l'utiliser, quand l'éviter. Faute de quoi, le prochain prestataire recréera ses propres pièces et la cohérence s'évaporera.

Questions fréquentes