Blog

L'atomic design, qu'est-ce ?

Méthode de conception d'interfaces web initiée par Brad Frost, le constat de départ est que de moins en moins la page web répond d'une transposition issue du livre. Aujourd'hui chaque page est composée d'éléments qui doivent trouver leur place quelque soit la taill de l'écran (du smartphone à la TV connectée).

Il faut donc identifier dans chaque page quels éléments seront communs, quels seront spécifiques

Le découpage atomique en pratique

L'atome

L'atome est un élément qui n'a pas de but fonnctionnel. Il est l'élément de base de toute interface et ne peut être subdivisé.

Ex : un logo, une couleur, un style typographique, un bloc image, une icône, un champ de saisie…

La molécule

Ensemble de molécules qui forment un composant de l'interface,.

Ex : L'assemblage d'un champs de texte et un bouton forment une molécule de champs de recherche

L'organisme.

L'organisme est la combinaison de plusieurs molécules et atomes  qui forment une entité de l'interface:

Ex : un logo + une navigation = header

Le template

Les templates, en français "ossature" n'ont pour objectif que de pouvoir vérifier le comportement de chaque bloc en attendant l'intégration des données. Cela peut-être du faux-texte en latin, le célèbre "Lorem Ipsum"...