Qu’est-ce que l’Atomic Design ?

Aujourd’hui, créer des interfaces Web ou mobiles est particulièrement complexe, puisque celles-ci doivent s’adapter aux différents formats d’écran, à la diversité des utilisateurs ou encore à l’évolution constante des technologies. Autant vous dire que les équipes design doivent relever de nombreux défis pour concevoir des expériences cohérentes, efficaces et durables.

Heureusement, plusieurs méthodes de travail ont vu le jour pour faire face à cette complexité croissante, à commencer par l’Atomic Design. Cette approche, qui se veut innovante et structurante, permet d’organiser les éléments d’une interface comme un système modulaire à base de briques simples et réutilisables.

Cela étant dit, le principe de base de l’Atomic Design n’est pas révolutionnaire, puisqu’on le trouvait déjà plus ou moins dans l’ossature de nombreux sites créés à partir de CMS (Content Management System), comme Wordpress ou Drupal, qui proposent aussi des modules à dupliquer et à adapter sur différentes pages.

Allez, maintenant on vous explique tout.

Atomic Design : définition et principe

L’Atomic Design est une méthode de conception d’interfaces imaginée en 2013 par Brad Frost, un designer américain spécialisé dans l’expérience utilisateur (UX). Après avoir constaté un manque d’organisation et de logique dans de nombreux projets Web, ce dernier a l’idée de structurer le design de manière systématique en s’inspirant de la chimie.

En effet, à l’image des éléments chimiques, les éléments d’une interface doivent être vivants et évolutifs. L’Atomic Design doit ainsi permettre aux designers et développeurs de concevoir des interfaces utilisateurs (UI) harmonieuses, réellement adaptées aux besoins et usages actuels.

Pour y parvenir, il faut avant tout réfléchir à la manière d’agencer les composants et non plus uniquement à la conception visuelle. C’est pourquoi cette méthode de travail propose de penser le design de manière modulaire en divisant une interface en cinq niveaux hiérarchiques :

• Les atomes : les éléments de base, comme un bouton ou une couleur ;
• Les molécules : les petits groupes d’éléments qui forment une unité fonctionnelle ;
• Les organismes : les ensembles plus complets et cohérents ;
• Les templates : les squelettes de pages ;
• Les pages : avec du contenu réel.

Source : Brad Frost - Extending Atomic Design

C’est cette structure qui crée des interfaces plus logiques, évolutives et maintenables, grâce à la réutilisation et l’adaptation des composants à différents contextes.

Cette approche en finit donc avec la conception d’interface traditionnelle dite « page par page », où chaque maquette est pensée comme une entité unique avec ses propres éléments graphiques (souvent recréés à la main pour chaque nouvelle page). Cette ancienne méthode a notamment trois inconvénients majeurs :

• Une grande redondance avec des éléments similaires, mais légèrement différents d’une page à l’autre ;
• Peu de réutilisabilité, ce qui ralentit le développement ;
• une homogénéité visuelle plus difficile à maintenir.

Les 5 niveaux hiérarchiques de l’Atomic Design

Comme nous l'avons vu, le cœur de la méthode Atomic Design repose sur cinq niveaux de construction, qui vont du plus simple au plus complexe pour assurer la cohérence de l’interface. Autrement dit, on part de petites briques réutilisables pour arriver à des pages complètes.

1. Les atomes : des éléments fondamentaux

Les atomes sont les composants les plus simples d’une interface, ceux qui ne peuvent pas être davantage décomposés. Il s’agit par exemple d’une couleur, d’une police de caractère, d’un bouton sans texte, d’un champ de formulaire vide, d’une icône, etc.

Ces éléments ne sont pas forcément utiles seuls, mais restent essentiels pour former des composants plus complexes.

2. Les molécules : des combinaisons fonctionnelles

En chimie, les molécules sont des groupes d’atomes. Le principe est donc le même pour l’Atomic Design. Ces derniers forment les éléments de base de l’interface utilisateur et fonctionnent ensemble pour accomplir une tâche simple. C’est notamment le cas :

• d’un champ de recherche (molécule) = champ de saisie + étiquette (label) + icône de loupe ;
• d’un bouton avec texte (molécule) = couleur, typographie, fond, effet au survol.

Les molécules sont les premières unités réellement utilisables et compréhensibles d’un point de vue utilisateur. Elles représentent un élément d’interface fonctionnel, bien que relativement simple.

3. Les organismes : des blocs structurants

Un organisme est un groupe de molécules (et parfois d’atomes) qui forment une partie cohérente et autonome de l’interface. C’est ici que le design commence à ressembler à un site réel. Il s’agit entre autres :

• de l’en-tête du site Web, avec logo, barre de recherche et menu ;
• d’une fiche produit, avec image, titre, prix, bouton d’achat ;
• d’un pied de page, avec liens, coordonnées et mentions légales.

Les organismes permettent de visualiser comment plusieurs éléments interagissent tout en gardant une logique modulaire.

4. Les templates : la structure de la page

Les templates (modèles de page) sont des mises en page génériques dans lesquelles les organismes sont disposés pour former une structure complète de page, mais sans contenu final. Ils définissent ainsi la hiérarchie et la disposition des différents éléments (en-tête, contenu, colonnes, sidebar, pied de page, etc.).

Par exemple, un template de page produit contiendra une zone d’images, un bloc d’informations et un espace pour les avis. En revanche, il ne contiendra pas de données précises pour pouvoir être réutilisé.

De manière générale, les templates permettent de tester l’organisation globale avant d’y insérer le contenu.

5. Les pages : le rendu final avec contenu réel

Les pages forment la version finale de l’interface une fois tout le contenu inséré (textes, images, noms de produits, prix, avis clients, etc.). Elles concrétisent le travail réalisé à chaque étape précédente et valident le résultat avant la mise en ligne.

C’est donc l’enchaînement logique de ces cinq niveaux qui garantit une conception fluide, modulaire et durable. On ne part plus d’une page vide, mais d’un système vivant et adaptable à tous les types de projets.

Source : Brad Frost - Atomic Design Methodology

Les avantages de l’Atomic Design

Si l’Atomic Design a été rapidement adopté par de nombreuses équipes de design, projet et de développement, c’est parce que cette approche répond à des besoins très concrets.

D’abord, il offre une meilleure cohérence visuelle pour une expérience utilisateur homogène. En structurant les éléments d’interface dès la rédaction du cahier des charges, l’Atomic Design évite les incohérences. Les éléments de base, comme les atomes, les molécules, etc., constituent une sorte de charte graphique préexistante ou le début d’un Design System. Il n’est plus nécessaire de recréer un bouton à chaque nouvelle page ou d’adapter la même fiche produit selon les cas, tout est déjà prévu et défini. Cela renforce aussi la crédibilité de l’interface auprès des utilisateurs.

De même, il permet un gain de temps et d’efficacité, puisque créer une interface à partir de composants déjà conçus et testés permet de réduire considérablement les délais de production. Les équipes peuvent réutiliser des blocs existants sans repartir de zéro (bibliothèque partagée de composants), et ce, sans parler du codage qui est plus facile, car les lignes de code sont plus lisibles.

Et puis, n’oublions pas sa facilité de maintenance et de mise à jour. Une simple modification d’un composant atomique se répercute automatiquement dans tous les endroits où il est utilisé. Toutefois, les composants étant totalement indépendants les uns des autres, la modification de l’un d’entre eux n’affecte pas le reste de l’application et de l’interface.

La collaboration se voit également facilitée, vu que l’approche modulaire de l’Atomic Design favorise une meilleure communication entre les équipes, notamment entre les designers, les développeurs et les chefs de projet qui ont un langage commun pour décrire les composants et leur hiérarchie.

L’Atomic Design améliore aussi la flexibilité et la capacité d’adaptation. Comme l’interface est conçue à la façon d’un système modulaire, il est plus facile de l’adapter à différents formats, résolutions d’écran ou contextes d’usage. Chaque composant est indépendant et peut être ajusté sans devoir tout repenser. En plus, les éléments sont conçus pour être autonomes et peuvent être utilisés de manière homogène à travers diverses parties de l’interface utilisateur, et même dans différents projets.

Dernier avantage, et non des moindres, l’Atomic Design offre une meilleure scalabilité. En effet, il est simple d’ajouter de nouveaux composants ou de construire de nouvelles combinaisons en cas de nouveaux besoins fonctionnels, sans avoir à reconstruire tout le système ou à modifier l’existant.

Les limites et idées reçues de l’Atomic Design

L’Atomic Design offre de nombreux avantages, mais il est important d’avoir une vision équilibrée de cette méthode. Eh oui ! Comme toute approche, elle comporte aussi des limites et peut parfois être mal interprétée.

D’une part, l’Atomic Design n’est pas une méthode de design « visuel » : il n’a pas pour but de définir le style graphique d’une interface (couleurs, illustrations, ambiance visuelle, etc.), mais l’organisation des composants.

D’autre part, ce n’est pas une solution miracle. Il ne remplace pas la créativité et la réflexion sur l’expérience utilisateur. Un mauvais design découpé en atomes reste un mauvais design, même si l’Atomic Design apporte la rigueur nécessaire au développement du projet.

Attention, l’Atomic Design n’est pas toujours adapté aux projets simples. Il peut s’avérer trop structurant ou lourd à mettre en place, notamment pour des sites légers ou ponctuels (une landing page événementielle, un mini-site vitrine, etc.). L’intérêt de l’Atomic Design est proportionnel à la taille ou à la durée du projet.

Pour finir, il faut garder à l’esprit qu’une mauvaise application de la méthode de travail peut nuire à la clarté. Si l’équipe crée trop de composants similaires ou redondants, elle perdra vite les bénéfices de la modularité. À ce titre, il est d’ailleurs important de maintenir la bibliothèque de composants à jour, d’avoir des conventions de nommage logiques et de limiter les doublons.

Quand mettre en place un Atomic Design System ?

Il paraît évident que l’Atomic Design gagne à être mis en place dès le début du projet. Il en facilitera d’autant la réussite et l’aboutissement, notamment pour des projets évolutifs ou à grande échelle et/ou quand plusieurs équipes travaillent sur la même interface (réutilisabilité et collaboration facilitée entre designers et développeurs, comme nous l’expliquions précédemment).

Mais il est aussi possible de remodeler un ou plusieurs sites existants en intégrant l’Atomic Design. C'est particulièrement intéressant dans le cas d’une refonte qui va impacter plusieurs sites et/ou plusieurs interfaces au sein d’une organisation étendue, afin de rationaliser l’existant, d’éviter la duplication de styles et de gagner en maintenabilité.

En bref, l’Atomic Design invite à penser l’interface comme un écosystème structuré, vivant et évolutif. En découpant ses éléments en composants simples, puis en les combinant progressivement, cette méthode de travail aboutit à des interfaces plus cohérentes, plus faciles à maintenir dans le temps et plus évolutives. Néanmoins, l’Atomic Design demande un certain niveau d’organisation et de rigueur. Il n’est donc pas forcément adapté à tous les types de projets.

Crédit photo : Ralf Hahn