.svg)
L’atomic design est une méthode novatrice devenue incontournable pour imaginer et structurer des interfaces de manière modulaire. Son succès tient à la volonté de résoudre les problèmes de cohérence, de maintien et d’évolutivité dans la création d’environnements digital.
Dans cette approche, on retrouve les principes de l’atomic design, qui découlent d’une nouvelle approche du design modulaire. Cette dernière est le fruit d’une approche du design modulaire conçue pour mieux organiser les éléments d’interface.
Pour comprendre les origines de l’atomic design, rappelons que Brad Frost en 2013 a exposé les fondements de cette méthode. Au départ, on se demande souvent c’est quoi l’atomic design. Eh bien, il s’agit d’une approche atomic design : elle se base sur des éléments atomiques (les plus petites unités, ou atome) pour bâtir des ensembles plus vastes, comme la molécule ou les organismes.
C’est ainsi que atomic design est une nouvelle façon de visualiser la conception : elle s’applique tant au site web qu’à un produit plus complexe.
Les atomes sont les éléments fondateurs de l’atomic design
Les briques de base
Au cœur de l'atomic design, on parle d'une méthode qui tourne autour des atomes. Comme le dit le principe, on peut pas couper plus petit que l'atome. Donc, les atomes, ce sont les bases : la couleur, la typo, les icônes ou les boutons. Chaque atome représente l'interface utilisateur dans sa version la plus simple. L'idée, c'est de rendre la création d'interfaces plus facile en découpant bien le projet.
Du coup, on peut avancer petit à petit, en passant des plus petits éléments aux molécules, et ensuite aux atomes, pour finalement créer des ensembles plus grands.
Vers la molécule et les organismes
En regroupant plusieurs atomes, on obtient une molécule qui devient un bloc plus fonctionnel (par exemple, un label + un champ de saisie). De fil en aiguille, on aboutit à des entités plus grandes que l’on qualifie de les organismes.
Ces ensembles désignent les éléments d’interface complexe puisqu’ils réunissent des molécules pour générer des portions solides de une interface. Ainsi, on voit que design est une nouvelle approche quand on suit cette logique.
Toute cette hiérarchie montrent la structure générale de la présentation. Les premiers éléments de l’interface sont donc cruciaux pour aboutir à un design clair et efficace.
Notez que cette segmentation n’a pas de but fonctionnel direct : c’est avant tout un moyen d’organiser et de maintenir la cohérence. Comme le mentionne souvent brad frost présente dans ses explications, on parle d’approche de conception modulaire et progressive.
Petit tableau récapitulatif :
De la molécule au design system
Principes et structure générale du contenu
Après la molécule, on peut créer une page complète ou un template de page en combinant plusieurs blocs. Cette façon de procéder illustre la structure générale du contenu et facilite grandement le travail d’équipe. On met en place un design system lorsque l’on documente soigneusement chaque composant pour le rendre réutilisable.
Il est possible de concevoir un atomic design system en suivant quelques étapes clés. D’abord, on recense les briques de base (atomes). Ensuite, on assemble ces éléments atomiques en les molécules plus abouties. On forme enfin de grandes sections (organismes) avant de créer UN DESIGN SYSTEM qui englobe toutes ces parties.
Le tout s’inscrit dans une démarche itérative et non linéaire : rien n’est figé, et on peut toujours peaufiner.
Par ailleurs, atomic design permet de CRÉER UN DESIGN pérenne, et d’établir un design modulaire. D’ailleurs, cette approche du design modulaire conçue va parfois plus loin : on retrouve la notion de pattern dans l’organisation des briques.
Ainsi, on peut créer des design systems pour différents besoins. Lorsqu’on veut aller plus vite, on emploie les templates déjà prévus dans le design system.
Avantages de l’atomic design et collaboration
Les bénéfices concrets
Les avantages de l’atomic design sont multiples :
- Il s’agit d’optimiser la création de supports.
- On peut ressortir l’identité de l’entreprise plus facilement.
- On gagne en clarté pour la interface utilisateur.
- On dispose d’une base plus solide pour le développement d’un produit.
En effet, la totalité de la conception se fait sur un mode modulaire, permettant d’éviter de tout refaire à chaque besoin. Les les composants identifiés (boutons, formulaires, alertes, etc.) sont rangés dans UN DESIGN SYSTEM. Grâce à ce système, on peut évoluer rapidement.
Relier Atomic Design et l’Expérience Utilisateur
Une bonne conception UX ne se limite pas aux composants visuels. Le User Flow est essentiel pour guider les utilisateurs à travers l’interface. Découvrez comment structurer un parcours efficace en cliquant ici.
Un atomic design system efficace
Pour avoir un atomic design system efficace, il faut documenter chaque COMPOSANT. Dans cette logique, on propose souvent un guide décrivant comment utiliser les briques élémentaires, molécule par molécule, et comment concevoir LES TEMPLATES plus élaborés.
Ainsi, on maintient UNE INTERFACE uniforme, quel que soit l’écran visé (mobile, desktop, tablette).
De plus, cette méthode aide à concevoir des interfaces plus cohérentes en s’appuyant sur un langage commun partagé par les concepteurs, les designers et les ux designers. Elle n’a pas de but fonctionnel strict, mais elle facilite le travail entre les designers et LES DÉVELOPPEURS.
Comme c’est un bon design, chacun sait où placer tel ATOME et telle molécule pour construire UNE PAGE ou la totalité d’UN PRODUIT.
Création d’un design system et grandes étapes pratiques
Du digital à la grande ourse : un fil conducteur
Dans un univers digital en perpétuelle évolution, on peut prendre l’exemple de la grande ourse pour imager la manière dont on regroupe des étoiles (atomes) afin de former une constellation (molécules et organismes). Cette comparaison symbolise la structuration possible grâce à la conception atomique.
Lors de la création d’un design system, on suit généralement ces grandes étapes :
- Création d’un inventaire de tous les atomes : couleurs, styles, icônes, etc.
- Assemblage des atomes en molécule : par exemple, un bouton couplé à un champ texte.
- Groupement de ces molécule(s) en les organismes plus imposants (en-têtes, sections, etc.).
- Mise en place d’un template pour avoir UNE INTERFACE structurée.
- Finalisation en concevant UNE PAGE concrète à partir du template.
Notons que design a toujours besoin d’un fil conducteur : la documentation. Cette étape de référentiel définit comment chaque composant doit être utilisé, afin de conserver la cohérence du design.
Brad Frost a insisté sur la collaboration
Puisque brad frost a introduit et détaillé cette méthodologie, il n’est pas surprenant qu’il souligne la force d’un langage commun et d’une organisation rigoureuse. On retrouve alors la notion de développement d’un produit itératif, piloté par des retours et des prototypes.
L’un des maîtres-mots est avoir une vue globale des besoins visuels et fonctionnels.
Ensuite, un mini-tableau pour résumer la transition des briques élémentaires au template :
Approche de conception et design d’interface utilisateur
Focus sur la phase finale
Une fois les briques en place, la design d’interface utilisateur devient plus fluide. En effet, chaque composant existant peut être combiné en un UN DESIGN abouti. On parle ici de design d’interface utilisateur qui gagne en homogénéité et en clarté. De plus, cette méthode conception valorise la modularité, permettant d’optimiser la création et la maintenance.
Interface utilisateur finale et fonctionnement
Lorsque l’on veut tester l’interface utilisateur finale, il suffit de vérifier les variations de chaque brique sur différents écran(s). Les les dernières actualités dans ce domaine montrent que cette approche séduit de plus en plus de professionnels, car elle réduit le risque d’incohérence et peut pas être divisé en silos fermés.
On parle également de design systems à partir de la plus petite unité, et tout cela s’accompagne parfois d’une touche de ux design ou de design thinking.
