L’Atomic Design, ça vous gagne !

19 Juin 2019

L’Atomic Design est une méthode de design modulaire conçue par Brad Frost, un développeur front-end qui s’est intéressé aux composants UI. Il s’est aperçu qu’on faisait une analogie entre le web et les livres. Mais depuis la multiplication des tailles d’écrans, la comparaison entre les livres et le web a perdu de son sens.

En Atomic Design l’interface n’est plus conçue de manière linéaire comme les pages d’un livre, elle est découpée en 5 niveaux :

atomic design schema

Cela ressemble à de la chimie, mais ne vous en faites pas, ce n’est rien de bien compliqué.

  • Les atomes sont des éléments qui sont indivisibles.
    Exemple : un logo, une couleur, une typographie, un bloc image, une icône, un champ de saisie…

  • Les molécules sont une addition d’atomes et forment des composants d’interface simples.
    Exemple : label + champ de saisie = champ simple

  • L’organisme combine plusieurs molécules pour former un bloc de l’interface finale.
    Exemple : champ simple + champ simple + bouton = formulaire

  • Le template forme la structure générale d’une page sans les textes et images.

  • La page est l’évolution d’un template vers la version finale d’un écran, en y intégrant les organismes et molécules.

Pourquoi travailler en Atomic Design?

  • Gain de temps : les pages sont facilement déclinables, on peut répéter facilement dix fois le même composant sur quatre pages différentes, le responsive est plus facile à concevoir et les maquettes plus rapides à tester

  • La charte graphique reste harmonieuse sur toutes les pages

  • Développeurs et designers se comprennent mieux car la logique de conception est identique (balises html, composants…)

  • L’Atomic Design est facile à décliner s’il faut changer, faire évoluer le Design System

Attention à ne pas confondre un UI kit et un Design System !

 

En savoir plus :
L’Atomic Design, une méthode de co-création prometteuse
Atomic Design, par Brad Frost