Atomic design

Voici un article super intéressant de Brad Frost sur un nouveau processus de web design.

Le cours de Chimie de 5ème

Celui-ci, en quête de nouveaux process de design s’est souvenu de ses cours de chimie (ou peut-être est-ce l’effet Breaking Bad) pour élaborer une nouvelle manière de designer.
En s’inspirant de la similarité des interfaces (faites de multiples petits composants) et des organismes complexes (eux aussi fabriqués à partir d’éléments simples), Brad Frost nous livre une table périodique fabriquée à partir des éléments qui composent une page HTML.

 

Table périodique HTML comprenant des éléments de webdesign

Qu’est ce que l’Atomic Design ?

Voici dans l’ordre la méthodologie que Frost nous propose :

  1. Les atomes : Ce sont des tags HTML, des boutons, les éléments d’une page réduits au minimum
  2. Les molécules : Ce sont ces éléments combinés, un champs texte avec un bouton par exemple
  3. Les organismes : Ce sont les molécules qui sont combinées et qui commencent à former un ensemble, un bloc contenant un formulaire + un texte + une image par exemple
  4. La templates : Là on sort de l’analogie avec la chimie pour entrer dans le langage, on combine les organismes d’une certaine manière pour fabriquer le wireframe et rentrer dans un process de web design classique
  5. La pages : le wireframe est designé.

Cette manière d’envisager les étapes de fabrication d’une page n’est pas complètement nouvelle (partir du plus simple pour aller au plus complexe), mais l’analogie est intéressante et redonne ses lettres de noblesse aux alchimistes du web design que nous sommes.

Pour appliquer sa méthodologie, Frost a créé un outil assez intéressant permettant de comprendre sa démarche le pattern lab.

0 Commentaire

Laissez une réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

neuf − sept =