9 Mois

Dis papa, c’est quoi l’Atomic Design ?

Eh bien mon petit Jonathan, l’Atomic Design est une méthode de design qui sert à concevoir des chartes graphiques digitales autrement appelées « style guide » ou « kit UI » voir « design systems ».

Cette méthode, créée par Brad Frost, est une méthode de conception modulaire. Comme le souligne son créateur « On ne conçoit pas des pages mais des systèmes de composants ». Et ces éléments d’interfaces doivent s’adapter à grand nombre de supports différents : desktop, mobile, tablette, montre,…

L’Atomic Design est constitué de cinq niveau distinct :

Atomes
C’est un élément qui, seul, n’a pas de but fonctionnel. Il ne peut pas être divisé et il compose la base de tout élément graphique de l’interface.
Ex : un logo, une couleur, un style typographique, un bloc image, un pictogramme, un champ de saisie… et même des animations.

Molécules
Les molécules sont des groupes d'atomes liés entre eux et sont les plus petites unités fondamentales. Ces molécules ont leurs propres propriétés et constituent la base du style graphique.
Ex : label + champ de saisie + picto loupe = champ de recherche.

Organismes
Les organismes sont des groupes de molécules réunis pour former un ensemble plus complexe constituant l’interface.
Ex : champ de recherche + nav + logo = header

Templates
Les Templates se composent principalement de groupes d'organismes assemblés pour former les pages.
On voit le design et la mise en page se mettre en place. Cela permet d’avoir une vision concrète de ce que sera le résultat final. Les templates sont déjà développés en code et sont dépourvus de contenus réels. Cela permet aussi de tester le comportement « responsive » des divers organisme.

Pages
C’est la version finale et la plus fidèle de ce que sera le site une fois terminé. Tous les contenus de placement ont été remplacés par les vrais contenus (textes, images, couleurs, pictos, organismes et molécules finalisées…)

Au final, c’est un peu comme construire une maison en Lego. Au départ on a des briques de formes de tailles et de couleurs différentes. Avec ces briques, on peut construire tout un tas d’éléments (portes, murs, toits, fenêtres…).  En assemblant ces éléments on construit une maison, qui pourra elle-même faire partie d’un ensemble beaucoup plus grand : une ville.

Par son approche, l’Atomic Design s’apparente aux méthodes utilisées par les développeurs. Elle peut se révéler très efficace lors de la conception d’interfaces d’applications et permet d’assurer une qualité et une cohérence graphique tout au long du projet.

L’Atomic Design se montrera en revanche moins efficace lorsqu’il s’agira de donner une identité graphique marquée et plus originale à un site de marque. Dans ce cas, la méthode du « sculpteur » est sans doute plus appropriée. Là où la construction en Lego part des plus petites pièces pour réaliser un objet, le sculpteur dégrossira son bloc de pierre pour aller vers le détail le plus fin.

Thomas Meerseman

Le Marketing Automation, nouvel outil de prospection massive ? Brève suivante