Qu’est-ce que l’Atomic Design ?

atomic design process

Rédigé par Louise

1 décembre 2022

Brad Frost, l’inventeur de l’Atomic Design (Frost 2015), est parti du constat que la conception “page par page” ou “écran par écran” n’est plus adaptée aux devices actuels. En effet, le même objet d’interface doit désormais pouvoir s’afficher sur différents devices (desktop, mobile, tablette, etc.) tout en conservant une apparence et des principes d’interaction cohérents entre les différents devices de manière que l’utilisateur puisse facilement passer d’un device à l’autre.

Cet article est librement inspiré de l’article : Atomic design, une nouvelle métaphore ?

 

 

 

Aux origines de l’Atomic Design

Dans une conception écran par écran, le designer crée des enchaînements d’écrans correspondant aux parcours utilisateur, puis il en extrait les éléments de base de l’interface pour élaborer l’UI kit ou la charte graphique qui servira de référence à l’équipe de développement. Cette démarche de conception semble plus naturelle car elle suit le déroulement logique de l’activité de l’utilisateur.

Cependant, rien ne garantit que les éléments de l’interface soient cohérents d’un écran à l’autre, ni d’un device à l’autre. Par ailleurs, la démarche n’est pas modulaire. L’introduction d’un nouvel écran remet en question l’ensemble de la conception. Il arrive fréquemment qu’il faille reprendre tous les écrans à la suite d’une modification mineure de l’un d’entre eux.

L’approche Atomic Design propose une démarche inverse : partir du plus petit (l’atome) pour concevoir plus grand (la page ou l’écran). Les éléments de base de l’interface sont conçus en premier, de manière générique, puis assemblés pour concevoir les molécules, les organismes et finalement les pages ou les écrans.

principes atomic design

 

La conception atomique (Atomic Design)

Les éléments d’interface selon l’Atomic Design

Selon la métaphore moléculaire inventée par Brad Frost, l’Atomic Design consiste donc à construire l’interface à partir des éléments suivants :

Les atomes sont les éléments graphiques de base de l’interface. Ils ne peuvent être réduits ou décomposés en d’autres atomes. Un atome, seul, ne répond pas à un objectif fonctionnel. Il s’agit, par exemple, de la forme des boutons, d’un champ de saisie, d’un visuel de type icône, etc.

Les éléments de l’identité graphique du produit sont typiquement des atomes : le code couleur, la typographie, les formes, etc.

atomic design atoms

Atomes

Les molécules sont composées d’atomes. Elles forment les premiers éléments de l’interface. Par exemple, un bouton dans la couleur primaire et un libellé forment un bouton d’action. Ces molécules sont conçues de manière responsive en imaginant la manière dont leur forme va évoluer selon le support sur lequel elles apparaissent.

atomic design molecules

Molécule

Les organismes sont des combinaisons de molécules et éventuellement d’atomes. Par exemple, un champ de saisie et un bouton d’action forment l’organisme de publication de message.

Les templates sont des modèles de page ou d’écran. Ils ne contiennent pas de contenu, les textes sont remplacés par du “lorem ipsum”, les images par des placeholders. Ils servent à vérifier le comportement ‘responsive’ des organismes et sont conçus selon les différents supports d’affichage de l’application.

atomic design templates

Le modèle (template)

Les pages ou écrans correspondent à une étape du parcours utilisateur. Elles sont conçues à partir d’une template qui a été alimenté avec du contenu selon la tâche que doit réaliser l’utilisateur sur cette page.

L’intérêt de l’Atomic Design est que la page est conçue dans une seule résolution. Elle se décline dans les autres résolutions selon la dynamique définie pour le template dans lequel elle a été construite.

atomic design pages

La page

Concevoir en Atomic Design

La méthode OOUX est un excellent point de départ pour initier une conception “atomique” car elle fournit une bibliothèque structurée des principaux composants de l’interface : les objets.

Pour commencer à identifier les atomes, ces objets sont donc dessinés en repérant dans chacun d’entre eux les atomes qui les composent. Les atomes sont conçus de manière générique pour être réutilisables et instanciables de différentes manières. A chaque nouvel atome identifié, il faut se poser la question de savoir s’il est unique ou s’il s’agit de l’instance d’un atome conçu auparavant. Pour cela, il faut distinguer la forme de l’élément de son contenu. Un même atome possède une forme unique, déclinée de la même manière sur l’interface, mais il peut servir à différents contenus et donc apparaître dans différents objets de l’interface (objet selon la terminologie OOUX).

La construction de la bibliothèque d’atomes est incrémentale et fait l’objet de nombreux allers/retours entre les atomes et les objets de l’interface. L’objet est dessiné à partir des atomes existants, un nouvel élément de base (atome) est identifié. Il est ajouté à la bibliothèque d’atomes, etc.

Concevoir une interface en Atomic Design est un gain de temps comparativement à la démarche écran par écran, car il n’est plus nécessaire de définir tous les écrans. L’Atomic Design est l’assurance d’une conception homogène et donc d’une interface plus facile à apprendre pour son utilisateur. Finalement, c’est une conception objet qui, comme la démarche OOUX, va faciliter les échanges avec l’équipe de développement.

 

Lire aussi :

 

 

Lire aussi…