Atomic design

Connaissez-vous le point commun entre un philosophe grec et un webdesigner ? L’un l’a découvert et a révolutionné la physique, l’autre l’utilise pour repenser la conception web. Il s’agit de l’atome. Cette minuscule particule vient nourrir une réflexion innovante au sujet de notre perception de l’espace et du web. Quand Démocrite et Brad Frost se croisent sur nos interfaces.

L’atome : cette particule élémentaire

En -450 avant J-C, sur les bords de la mer Égée, le philosophe grec Leucippe et son disciple Démocrite sont à l’origine de la découverte de l’atome, cette infime unité indivisible, unique et insécable. 2500 ans plus tard, Brad Frost est un jeune webdesigner qui bouscule à son tour son monde, celui du design d'interface, en proposant un design system "orienté objet".

Brad Frost utilise l’image de l’atome pour expliquer sa construction d’une page web, après avoir envisagé le monde comme un tout, constitué d’une multitude d’atomes réunis en molécules, puis en organismes. 

Ainsi, il propose de transposer cette vision sur une interface qui serait non plus un bloc fixe, mais plutôt un « système » composé d’une multitude de « composants ». 

Pourquoi faut-il changer de réalité ?

Comme l’exprime Brad Frost dans son livre Atomic Design, il n’est plus possible de considérer qu’une page web se construit comme la page d’un livre. Nos supports ont bien trop évolué. Nos écrans d’ordinateur d’abord, puis les smartphones, les tablettes, l’arrivée de la réalité virtuelle, les montres connectées. Il n’existe plus un format de visualisation unique. 

Les supports sont multiples, notre réalité devient protéiforme, la page ne peut plus être pensée comme l’espace ultime. Il faut désormais la considérer comme une agrégation de composants, « un système de composants » comme Brad Frost la nomme, destiné à des environnements très différents. 

Le webdesigner préconise de ne plus créer page après page. Il conseille de créer en premier lieu des éléments de contenu qui doivent pouvoir être déployés, comme des unités fonctionnelles, sur n’importe quel support. 

Ainsi Brad Frost décompose alors une interface en 5 composants, dont les 3 premiers reprennent l’analogie scientifique

• L’atome : Seul, cet élément n’a pas d’utilité fonctionnelle, mais il est indivisible. C’est notre élément le plus basique. Il s’agit par exemple d’un bouton, ou bien d’une typo, d’une couleur. 
• La molécule : Elle est l’assemblage de plusieurs atomes. Cette molécule permet d’apporter du sens. Ce peut être une barre de recherche composée d’un bouton + champ de recherche. 
• L’organisme : Il s’agit tout simplement de l’assemblage de plusieurs molécules plus ou moins complexes entre elles. Ces différents organismes vont composer l’interface.

Viennent ensuite les templates qui vont permettre de valider l’organisation et/ou la hiérarchisation des différents organismes qui viennent d’être créés. Pour finir, existent les pages qui sont des templates contenant des informations réelles, au format final.

Le principe de l’Atomic Design peut alors se résumer comme une méthodologie structurante qui consiste à penser puis concevoir un espace en partant du plus petit pour aller vers le plus grand. En ne concevant plus un bloc responsive mais un système de composants entièrement flexible.

L’avantage de cette méthodologie réside également dans le fait de, peu à peu, créer sa propre bibliothèque de composants utilisables, réutilisables et modifiables, à l’envi. Son « design kit » dans lequel il sera possible de se servir en fonction du besoin.

Le design atomique : innovation structurante

Pourquoi avons-nous choisi d’intégrer l’Atomic Design dans nos méthodes de travail ?

Parce que cette méthodologie facilite la communication. Nous partageons un langage commun, un langage atomique ! Il nous permet, entre collaborateurs (designers, développeurs, intégrateurs, etc) mais aussi avec nos clients, de nous comprendre parfaitement dans le suivi de projet et de stimuler la co-création en utilisant les mêmes concepts. 

Parce que cet outil est une réponse évidente aux évolutions de supports. L’Atomic Design nous permet de concevoir nos projets sans contrainte de support. Nous ne pensons plus espace. Nous pensons composants : boutons, contenus, composants d’un ensemble. Atomes, molécules et organismes rendent le déploiement plus aisé. 

Parce que l’Atomic Design nous offre une plus grande réactivité. Pour un nouveau projet, nous pouvons utiliser ou adapter une brique déjà conçue pour construire un nouvel édifice. Nos atomes et molécules sont stockés dans une bibliothèque de composants.

Ainsi nous pouvons rationnaliser et inventorier aussi bien des comportements que des actions. Dans le cas de projets longs, conçus sur plusieurs mois en mode « agile » avec nos clients, l’Atomic Design nous permet une plus grande flexibilité tout au long de la création, en garantissant une logique et une homogénéité de l'ergonomie et du design.