Comprendre les bases de l'Atomic Design en 3 minutes

Le design est une discipline créative, mais le design d'interface (UI) est à la croisée des mondes entre créativité, logique, fonctionnalité et technique.

Pour faciliter la réutilisation d'éléments graphiques au sein de plusieurs interfaces (pages, écrans, etc...) et ainsi gagner du temps, au lieu de "dessiner" librement une interface, on va plutôt créer un "Design System".

Un Design System représente un ensemble de composants visuels construits sur des règles de typographies, de dispositions, de formes et de couleurs.

L'Atomic Design est une méthode de conception spéciale pour créer des design systems et basée sur les notions d'imbrication et de réutilisation, souvent chères aux développeurs.

Atomic Design

Comme son nom l'indique, l'Atomic Design s'inspire de la nature et de la chimie pour décrire son organisation, incluant 5 niveaux de complexité différents :

1. Les atomes
2. Les molécules
3. Les organismes
4. Les modèles
5. Les pages

Les atomes représentant les composants primaires du design system, tandis que les pages représentent les structures de plus haut niveaux, les plus complexes.

Les atomes

Les atomes sont les composants basiques, non-composés du systèmes.

Ça peut être un bouton, une icone, un titre, un lien, un champ ou un label... En HTML les atomes correspondent aux balises les plus simples, qui peuvent être décorées, animées et contenir du texte, mais aucun autre composant atomique.

Les molécules

Les molécules représentent le premier niveau de composition. Seuls, les atomes n'ont pas grand intérêt, mais si vous ajoutez ensemble une icone, un label, un champ et un texte, vous obtenez une première pièce plus complexe: un champ de formulaire complexe avec toutes les indications nécessaires.

Les organismes

Si on rassemble plusieurs molécules entre elles, l'organisme résultant va devenir une véritable section indépendante du système.

Prenez plusieurs molécules et quelques atomes indépendants comme un titre (atome), des champs de formulaires (molécules) et un bouton (atome) et vous obtiendrez un nouvel organisme : un formulaire d'inscription.

Les modèles (templates)

Logiquement, un modèle est donc un ensemble d'organisme organisés de manière à rendre accessible toutes les informations et les fonctionnalités à l'utilisateur final.

Un exemple de modèle pourrait inclure les organismes suivants :

• Un header (barre de navigation)
• Le profil utilisateur
• Le contenu d'un article (organisme principal du modèle)
• Une liste des articles connexes
• Un footer

Chacun de ces organismes étant donc eux-mêmes composés de molécules, elles-mêmes composées d'atomes.

Les pages

Contrairement aux éléments précédents, les pages ne sont composées de plusieurs templates, mais une page implémente un modèle et intègre les informations (textes,...) et les contenus (images,...) c'est donc la version finale de l'interface.

Si vous voulez en apprendre plus sur l'Atomic Design, je vous invite à lire l'article complet de son créateur Brad Frost, où vous trouverez également le lien vers son livre