Note : Ce contenu a été créé avant que Fabernovel ne fasse partie du groupe EY, le 5 juillet 2022.

‍

Alors, comment l’Atomic Design permet-il aux entreprises, et notamment aux start-up, de livrer rapidement les produits numériques dont les utilisateurs raffolent ?

Qu’est-ce que l’Atomic Design ?

“Get your content ready to go anywhere because it’s going to be everywhere”. Brad Frost

L’Atomic Design est une méthode théorisée et développée par Brad Frost dans un livre du même nom publié en 2016. Son constat est simple : il ne faut plus penser le design par page - le web n’est pas un livre, il n’est ni statique, ni fermé. Il faut avant tout penser aux fonctionnalités et à un système modulaire.

L’Atomic Design est donc une méthode de conception d’interfaces basée sur les composants. On inverse donc complètement le schéma de conception. Ainsi, le responsive est dans son ADN.

Frost identifie cinq éléments : les atomes, les molécules, les organismes, les templates, les pages. Les atomes sont les plus petites unités indivisibles et fonctionnelles. Par exemple dans une interface, un atome peut être une couleur, une icône ou un champ de saisie. Lorsqu’on design une interface, leur choix est primordial, c’est pourquoi on peut considérer que les atomes portent en leur coeur, l’identité visuelle d’une marque.

L’une des métaphores les plus utilisées pour comprendre ce qu’est l’Atomic Design consiste à faire une comparaison avec les Lego.

Imaginez que vous souhaitiez reproduire une voiture avec des Lego. Vous avez en votre possession des briques avec des formes, couleurs et tailles différentes (les atomes). Avec ces briques, vous allez construire toutes sortes d’éléments plus ou moins complexes : des sièges, des roues, un toit etc (les molécules et organismes). Et en assemblant tous ces différents éléments, on obtient un résultat final, une voiture qui doit être construite de manière suffisamment cohérente pour rouler et accueillir des passagers et qui surtout doit plaire à la personne pour laquelle vous l’avez construite (l’utilisateur final). Avec ces mêmes atomes, vous auriez pu construire un gros camion, une petite voiture de course ou un cabriolet. Avec l’Atomic Design c’est exactement la même chose. On assemble les éléments pour parvenir au résultat souhaité.

Si vous n’avez toujours pas bien saisi, je vous recommande également la lecture de la métaphore avec la musique, proposée par l’UX Designer Audrey Hacq qui montre combien l’Atomic Design est compatible avec la créativité, voire mieux comment elle peut dans une certaine mesure la libérer.

Atomic Design et agilité

L’une des clés de l’Atomic Design est de ne plus partir de la conception d’écrans mais de partir des fonctionnalités principales. A l’image des méthodologies Lean, la fin justifie les moyens.  Comment cela se traduit-il concrètement ?

Il ne faut plus se dire “Pour mon site web, je veux un écran de login” mais “Pour mon site web, je veux que mon utilisateur puisse se connecter”. Ce qu’il faut retenir c’est donc cette distinction subtile entre structure et contenu. Un composant va pouvoir être décliné et réutilisé dans différentes pages et contextes, mais son usage lui peut être différent à chaque fois.

L’UI Kit est un fichier avec tous les composants nécessaire au développement des interfaces, fourni par le designer pour les développeurs. Avec l’Atomic Design, il ne faut plus se dire “Je fais des écrans puis je sors un UI Kit” mais “Je conçois un UI Kit pour créer des fonctionnalités et des parcours”.

Aussi, l’intérêt de ce type de méthode réside surtout dans sa simplicité et sa facilité de compréhension par l’ensemble de l’équipe projet, du Product owner aux développeurs et aux chefs de projet ou Scrum Masters. Il est donc parfaitement adapté aux méthodes agiles qui favorisent le travail collaboratif et la co-conception des produits. C’est pourquoi dans son livre, Frost insiste sur « le passage de l’abstrait au concret » qui est rendu possible par le système de construction étape par étape qui permet au designer de pouvoir rapidement montrer ses composants dans le contexte final.

L’un des avantages, non négligeable, de ce type de méthode est également qu’elle fait gagner du temps notamment grâce à la simplification de la communication entre designers et développeurs front. Grâce à l’Atomic Design et son lexique spécifique, tout le monde parle le même langage. Quand on connait les enjeux liés au time-to-market pour nos industries, c’est un sérieux avantage qui s'inscrit parfaitement dans la logique du lean, de l'itération rapide et du Minimum Viable / Loveable Product.

Il y a évidemment de nombreuses autres facettes à l'Atomic Design, cet article n'est donc qu'une introduction qui j'espère vous aura donné envie de vous intéresser à cette méthode. Dans un contexte d’accélération où le collaboratif n’a jamais été aussi crucial pour concevoir des produits innovants et à fort impact, l’Atomic Design peut représenter un atout majeur dans de nombreux projets.