Atomic design

L’atomic design est une technique de conception créée par Brad Frost qui a pour but de créer des interfaces utilisateurs belles et fonctionnelles mieux adaptées aux différents appareils.

Cette méthode consiste à partir du plus petit élément (atomes), pour concevoir le plus grand (pages). L’idée est de concevoir les éléments de base de l’interface en premier qui vont être ensuite assemblés pour concevoir les molécules, les organismes, les templates et enfin les pages.

Selon la métaphore moléculaire de Brad Frost, l’atomic design est conçu à partir de 5 éléments.

1. Les atomes :

Il s’agit des éléments graphiques de base de l’interface, par exemple, la forme des boutons, la typographie, les couleurs.

2. Les molécules :

Les molécules sont composées d’atomes et formes les premiers éléments de l’interface. Elles sont conçues de manière responsive afin que leur forme évolue en fonction du support sur lequel elles apparaissent.

3. Les organismes :

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

4. Les templates :

Les templates servent à montrer le rendu final et à vérifier le comportement responsive des organismes.

5. Les pages :

Les pages correspondent au parcours utilisateur. Elles sont conçues à partir d’un template.