Qu'est-ce que l'atomic design ?
L'atomic design est une technique de conception d'interfaces créée en 2013 par Brad Frost (webdesigner, speaker et consultant). Cette méthode, qui utilise une métaphore biologique, a pour objectif de faciliter la création d'interfaces web homogènes, adaptées à tous les supports digitaux.
L'atomic design a radicalement changé la façon de designer des interfaces web. Cette approche s'est développée dans un contexte d'évolution technologique entraînant l'apparition d'une multitude de supports et de tailles d'écrans, rendant ainsi le design par page obsolète.
Plus précisément, l'atomic design constitue une nouvelle façon de concevoir qui se veut plus évolutive et modulable et qui permet de mieux communiquer avec les équipes de chaque pôle (UI / UX, développement, gestion de projet…).
Caractéristiques de l'atomic design
Cette technique, telle qu'imaginée par Brad Frost, se caractérise par la classification d'éléments d'interface en plusieurs catégories.
- Les atomes constituent les plus petits éléments d'interface (une couleur, un style typographique, une icône…). Par nature, ils sont indivisibles.
- Les molécules se composent d'un ensemble d'atomes et forment des composants d'interface simples. Par exemple, un champ d'inscription à une newsletter (avec label, champ et CTA). Il est important à cette étape, de réfléchir à leur déclinaison responsive.
- Les organismes se différencient des molécules car ils constituent des zones. Par exemple, le footer d'une interface est un organisme qui se compose de logos, de liens, de textes, d'un champ d'inscription à une newsletter…
- Les templates (là où la métaphore organique s'arrête) ont pour fonction de tester la façon dont les organismes s'imbriquent et interagissent entre eux. À ce stade, on n'utilise pas de vrai contenu.
- Les pages constituent l'étape finale, là où le vrai contenu est mis en place. Les pages ne doivent pas toutes être réalisées en maquettes. C'est le travail fait lors de la création du design system qui permettra ensuite de décliner facilement les différentes pages.
Avantages du design atomique
Cette façon de faire présente un certain nombre d'avantages.
Tout d'abord, cette méthode permet de garantir une cohérence graphique globale de l'interface. En effet, tous les composants sont interdépendants et disposent d'un socle commun. Prenons comme exemple la modification de l'arrondi des bords d'un bouton. Le bouton étant un atome et se trouvant réutilisé dans une multitude de composants, ce changement sera visible sur tous les éléments qui utilisent ce bouton et la cohérence graphique s'en trouvera préservée.
Ensuite, cette approche permet de gagner du temps. Les composants déjà créés et intégrés pourront être réutilisés à l'infini. Il ne sera pas nécessaire de repartir de zéro à chaque fois qu'une nouvelle fonctionnalité devra s'ajouter à l'interface mais bien de repartir de l'existant et de l'adapter si nécessaire. Ce principe constitue un très grand avantage quel que soit le contexte de création d'un projet web.
De plus, l'atomic design permet d'adopter un langage commun entre les équipes, que ce soit au niveau du design (UI/UX), du développement web ou de la gestion de projet. C'est une véritable bibliothèque évolutive qui permet de réaliser des tests plus facilement et qui pourra s'adapter plus rapidement aux changements inhérents à l'évolution des objectifs de l'entreprise.
Étapes à suivre pour sa mise en place
Cette approche est adaptée à tout type de projet de site web, d'application, de logiciel métier peu importe la taille ou la complexité du projet.
Pour créer un design system basé sur ce principe, voici les étapes à suivre :
- Utilisation de la charte graphique
Pour créer les premiers composants d'interface (les atomes), on peut se baser sur la charte graphique existante de l'entreprise et sélectionner les principes qu'on souhaite conserver et mettre en place sur le web : couleurs, typographie, iconographie, traitement des images…
- Création des premiers composants
Cette approche tranche radicalement avec ce qui était fait dans la création web auparavant, c'est-à-dire créer des wireframes et lister tous les éléments qui devront être réalisés, sans forcément de vision globale ou de perspective d'évolution.
Ici, on commence par créer des composants de base, tout en réfléchissant à leurs différentes applications et adaptations responsive. Il faut réfléchir à comment va se comporter chaque élément dans une multitude de contextes et sur une grande diversité d'écrans.
On peut ainsi commencer par réaliser un élément d'interface simple en fonction du projet sur lequel on est en train de travailler (site e-commerce, vitrine, application métier…) pour pouvoir ensuite décliner le reste des éléments.
- Penser modularité et évolution
À chaque nouvel élément créé, il est important de réfléchir à ce qu'il se passera lors d'un changement d'état (actif, inactif, survol…) mais aussi à sa déclinaison responsive.
Comment cet élément va-t-il s'adapter ? Sera-t-il présenté sous la même forme sur desktop et sur mobile ?
Ce travail d'abstraction permet d'éviter les mauvaises surprises.
- Librairie de composants
De nos jours, les outils de création d'interfaces nous permettent de créer des librairies de composants adaptés à la mise en place d'une méthode de conception telle que l'atomic design. Ces outils permettent de lier les composants entre eux et de les mettre à jour très facilement.
Les librairies de composants permettent de réunir tous les éléments créés pour un projet donné et peuvent par la suite être partagées à toute l'équipe et mises à jour très facilement.
Les outils de design web et de prototypage les plus utilisés de nos jours sont Figma, Sketch et Adobe XD, et sont tous les trois dotés de ces fonctionnalités.