Qu’est-ce que l’Atomic Design ?
L’Atomic Design est une technique de conception créée par Brad Frost en 2013. Cette méthode permet à travers de composants plus simples : atom, molécules, organismes, template et pages de créer des Design Systems.
Avec le nombre croissant de sites web responsives et les nouveaux principes d’applications universelles, les UX/UI designers ont intérêt d’évoluer leurs techniques de co-création afin d’être toujours efficaces tout en gardant la cohérence du projet. Dans ce contexte, le nouveau concept l’atomic design semble une méthode adéquate au contexte actuel. Qu’est ce que l’atomic design? Comment l’utiliser?…
Dans cet article on va expliquer tous les détails sur cette nouvelle approche
Définition
Inspirée de la chimie, l’Atomic Design est une approche de conception permettant de réduire un site à ses plus petits composants afin de créer des Design Systems et d’optimiser la création d’interfaces responsives et fonctionnelles. Ces composants sont réutilisables, ils peuvent se regrouper afin de constituer des modules de plus grande taille. Ces modules, peuvent à leurs tours s’assembler pour constituer l’ossature d’une page puis d’un site. Il s’agit ainsi d’une démarche itérative et non linéaire.
Les composantes de l’atomic design :
L’atomic design est composé de cinq éléments organisés selon leur degré de complexité :
- L’atome :
Il représente la base graphique de l’interface, c’est le seul élément qui n’a pas de but fonctionnel et ne peut pas être divisé. L’atome permet de faire ressortir l’identité de l’entreprise. Il peut s’agir d’un logo, d’une police, des balises html…
- Les molécules :
Une molécule est composée d’un ensemble d’atomes formant les premiers éléments de l’interface. Un bouton, par exemple, comprend une typo, une forme, une gamme chromatique, éventuellement une animation ou une icône. La création des molécules facilite les tests et assure la cohérence dans toute l’interface.
- Les organismes :
Ils désignent les éléments d’interface complexe résultant du regroupement de molécules et éventuellement d’atomes. L’organisme peut s’agir d’un header (en-tête), une liste de produits, des résultats de recherche.
- Les templates :
Les templates sont des modèles de page ou d’écran. Ils montrent la structure générale du contenu, son squelette, la page finale…
A ce stade l’interface est encore dépourvue de contenus réels, les textes sont remplacés par du “lorem ipsum”, les images par des placeholders. Néanmoins, une template permet de tester la composition de la page et sa responsivité.
- Les pages :
Une page représente l’interface utilisateur finale. l’Atomic Design conçoit la page dans une seule résolution.
Quand mettre en place un Atomic Design System ?
L’atomic design permet à ses utilisateurs d’avoir une vue globale sur le projet et de faciliter la création d’un environnement de marque pour l’utilisateur via l’ensemble du dispositif digital. Ainsi, il est recommandé de mettre l’atomic design en place dès le début du projet. Cependant, on peut utiliser cette approche pour modifier un ou des sites existants.
Comment concevoir un Atomic design System efficace ?
Afin de concevoir un système d’atomic design pertinent et efficace, il y a certaines conditions à suivre. Dans ce contexte, on peut s’inspirer des conseils de Brad Frost présente dans son ouvrage :
- Accorder le budget et le temps essentiel pour le projet,
- Assurer la bonne communication avec les utilisateurs,
- Garantir une mise à jour simple des applications et des UI patterns,etc,
- Concevoir des styles guides simple et clair pour tout le monde,
- Assurer que les patterns de manière à ce qu’ils soient flexibles et réutilisables dans contextes divers.
Les avantages de l’atomic design
Le concept Atomic Design offre multiples avantages, voici quelques-uns :
- Assure une meilleure agilité entre les acteurs du projet,
- Gagner du temps en évitant de décliner tous les écrans de nos applications ou sites web,
- Faciliter le codage pour les développeurs,
- Garantir la pérennité du projet grâce à la réutilisation des composants,
- Adapter à tous le écrans,
- Garder une cohérence globale sur les éléments d’interface créés,
- Passer rapidement de l’abstrait au concret,
- Faciliter la communication entre les designers, développeurs, product owner… en fournissant un langage commun au sein des équipes.
La phase de découverte
L’approche de conception de l’Atomic Design est considérée comme une opportunité pour les entreprises et les UX/UI designers afin qu’ils puissent améliorer leurs stratégies digitales. Ce concept est référentiel UX/UI destiné à tous les développeurs d’une organisation leurs permettant de créer des éléments atomiques pour arriver à une interface dans son ensemble. La conception des systèmes de composants et des styles guides n’est pas une tâche facile, il est essentiel de respecter certaines conditions et suivre des bonnes pratiques afin de réussir à concevoir un Atomic design System efficace et pertinent.
by 
