Le Atomic Design

Pourquoi c'est important

Introduit par Brad Frost en 2013, l'Atomic Design est une methodologie inspiree de la chimie qui decompose chaque interface en 5 niveaux hierarchiques. Vous ne crées plus des pages isolees, vous construisez un système modulaire, coherent et scalable.

Le framework

1. 01

   1. Atomes

   Les briques de base irreductibles : bouton, input, label, icone, couleur. Impossible de les decomposer davantage. C'est votre vocabulaire visuel.

2. 02

   2. Molecules

   Deux atomes ou plus combines pour une fonction unique. un champ de recherche = input + bouton. Principe de responsabilite unique (Frost, 2013).

3. 03

   3. Organismes

   Groupes de molecules formant une section complete. un header = logo + navigation + barre de recherche. C'est un bloc autonome et reutilisable.

4. 04

   4. Templates

   Le squelette de votre page. Les organismes sont positionnes dans un layout. Pas encore de vrai contenu, juste la structure et les emplacements.

5. 05

   5. Pages

   Le template rempli avec du vrai contenu (textes, images, données). C'est ici que vous testez la resilience de votre système : est-ce que tout tient avec des données reelles ? Des titres longs ? Des images manquantes ?

Pour aller plus loin