Aller directement au contenu

Atomic design, une nouvelle métaphore ?

07/11/2018
1

Définition Atomic Design

L’Atomic design est une nouvelle approche du design modulaire conçue par Brad Frost afin de créer des Design Systems à partir de composants plus simples : atom, molécules, organismes, template et pages.

À l’image des atomes et molécules chimiques, les éléments de l’interface doivent être vivants, évolutifs. Cette méthode permettrait aux designers et développeurs de concevoir des interfaces utilisateurs (UI) cohérentes, mieux adaptées aux besoins et aux usages actuels. L’Atomic design permet au client de voir les étapes de la conception.

Qu’est-ce que l’Atomic design ?

Le concept d’Atomic design a été créé par le webdesigner Brad Frost . L’idée principale est d’organiser chacun des éléments de l’interface pour concevoir des interfaces belles et fonctionnelles dans tous les environnements. Autrefois, il était possible de faire une analogie entre le web et les livres. La comparaison a perdu son sens avec la multitude de tailles d’écrans.

“We’re not designing pages anymore. We’re designing systems of components”
(« On ne conçoit pas des pages mais des systèmes de composants »). Stephen Hay

Au lieu de chercher à concevoir une page web, designers et développeurs doivent dorénavant réfléchir à la manière d’agencer les composants. L’Atomic design est une métaphore biologique pour rendre accessible cette méthode de conception. En effet, l’interface est découpée en 5 niveaux :

Principes Atomic Design

Atomic Design AtomsLes atomes d’interface ou éléments de base, par exemple, sur une page web : les balises html, animations, etc. Ces atomes font ressortir l’identité de l’entreprise.

Atomic Design Atoms

Atomic Design moleculesLes molécules correspondent à des groupes d’atomes formant une unité, ce sera le formulaire de recherche comprenant label, champ texte et bouton.

Atomic Design molecules

Atomic Design organismsLes organismes désignent les éléments d’interface complexe et résultent surtout de groupes de molécules et/ou d’atomes. Concrètement, il pourra s’agir d’une liste de produits.

Atomic Design organisms

Atomic Design templatesLes templates montrent la structure générale du contenu, son squelette, la page finale sans les textes, images, etc.

Atomic Design templates

Atomic Design pagesLes pages contiennent le contenu réel et abouti, c’est la « chair » placée sur le squelette.

Atomic Design pages

Voir deux de vidéo de présentation de l’Atomic design par Brad Frost.

Ci-dessous, une présentation pour comprendre la différence entre la méthode de travail traditionnelle du designer et l’application de l’Atomic design.

Une introduction à l’Atomic design par France Wang.

Atomic design = Modular Design ?

L’Atomic design a sans doute été inspiré par le Modular design.

Cette technique s’applique à tous les secteurs : architecture, décoration, automobile ou informatique. Le principe consiste aussi à utiliser les composants séparément pour aboutir au design d’un produit, d’un bâtiment ou d’un site web. Chacun des éléments est conçu indépendamment des autres et pourra être réutilisé dans un autre contexte. La métaphore des legos est souvent utilisée pour comprendre le concept de design modulaire. On l’associe aussi à la méthode d’innovation Design Thinking, pour son aspect Agile.

L’Atomic design est souvent vu comme un modular design

Toutefois, Brad Frost a précisé que son « design atomique » servait exclusivement à élaborer des design systems pour toute interface utilisateur (user interface design system) et rien d’autre. Son concept était donc distinct de la technologie choisie pour concevoir l’UI (Javascript, CSS…).

Voir les avantages du modular design

Quelques mises en œuvre du modular design

Origines de l’Atomic design ?

Le terme de modularité, en design, date en fait des années 1960. Christopher Alexander et Herbert Simon proposaient ainsi de concevoir le produit final à partir de sous-systèmes indépendants : le design produit modulaire. Les économistes suivant y ont aussi vu un moyen, pour les entreprises, de s’adapter aux évolutions technologiques et à la nécessité d’innover.

En 2001, le W3C publiait sa 1e proposition en termes de media queries (requêtes média) afin d’adapter le design de la page web aux caractéristiques de l’appareil utilisé. En 2004, Cameron Adams écrivait l’article Resolution Dependant Layout (ou Configuration suivant la résolution) pour améliorer la lisibilité des sites web dans les navigateurs standards.

Le terme Responsive Webdesign naît en 2010 sous la plume d’Ethan Marcotte. En 2015, E. Marcotte publie Responsive Design Patterns. Il y écrit que la page web a cessé d’exister depuis l’avènement des mobiles. Désormais, les web designers ne créaient plus des pages mais des composants modulaires. Ce web modulaire (Modular web) rend indispensable la création de patterns responsive.

La méthodologie de l’Atomic design est conçue en 2013 sur le blog de Brad Frost. Toutefois, c’est en 2016, avec la publication du livre, que le concept d’Atomic design crée un buzz.

Tableau périodique HTML

Le tableau périodique HTML de Josh Duck présente une excellente ventilation des éléments atomiques des concepteurs de sites Web.

Voir aussi : https://allthetags.com/

Principes de l’Atomic design ?

La création d’un Design System

Le design par composants de Brad Frost vise à la création d’un Design System pour concevoir tout type d’interface utilisateur, et en assurant le succès durable d’une entreprise. Avant de s’attacher à ses particularités, il paraît intéressant de rappeler ce qu’est un Design System ou système de design. Selon Nathan Curtis, auteur du livre Modular Web Design : « A design system is a living, funded product with a roadmap & backlog, serving an ecosystem ».

Atomic Design principes

Le Design System s’apparente à un organisme biologique dans le sens où il est vivant et apte à évoluer. Ce système doit s’adapter avec les projets, produits et usages, tout en restant cohérent par rapport l’identité de l’entreprise. Concrètement, c’est une suite de livrables, certains tangibles et d’autres intangibles. Le design de systèmes comprendra ainsi :

  • Des outils utiles aux designers : grilles et couleurs intégrées dans des guidelines, règles d’interactions, documentation, etc., comme les pièces d’un puzzle.
  • Des valeurs communes à l’équipe, une philosophie, des principes propres à la marque, etc.

Selon les projets et l’entreprise, le Design System pourra être strict ou flexible, modulaire ou au contraire intégré. Plusieurs exemples de Design Systems sont visibles dans la galerie de Design systems repo.

Les principes de l’Atomic design

Le terme « Atomic design » peut faire référence :

  • Aux méthodes de création d’un Design System
  • À une bibliothèque de composants (pattern library) aussi appelée Atomic design Library

Dans tous les cas, il s’agit de proposer un cadre pour construire un écosystème évolutif. Les principes de l’Atomic design sont notamment :

  • Proposer une méthode simple pour unifier, homogénéiser l’apparence des pages web
  • Adopter une vision holistique de la création d’un Design System (du Design Workflow à la phase de développement)
  • Passer de l’abstrait au concret en assemblant plutôt qu’en déconstruisant
  • Avoir une mentalité « Design System first » pour prévoir l’impact futur des ajouts de fonctionnalités et des itérations

Par ailleurs, dans sa méthodologie, Brad Frost présente sa taxonomie sous la forme d’étapes (1. Les atomes, 2. Les molécules, etc.) pour faire ressortir l’aspect hiérarchique du processus. Cependant, la démarche n’est pas linéaire. C’est davantage un modèle mental pour faciliter la conception simultanée de l’interface utilisateur finale et du Design System associé.

La présentation de référence, par Brad Frost

Avantages de l’Atomic design ?

Les principaux avantages d’une conception en Atomic design sont :

Le gain de temps et l’Agilité :

  • Prise en compte d’avance de tous les écrans (et points de rupture)
  • Adapté à la méthode Test & Learn pour expérimenter rapidement des prototypes
  • Possibilité de passer de manière fluide du design et au développement du produit

La capacité à garder une cohérence globale sur les éléments d’interface créés

  • La création rapide de la Style Guide et le principe des atomes favorise la cohérence dans le projet
  • L’intégrité de la marque est conservée à travers tous les points de contact
  • D’où une expérience utilisateur également cohérente et fluide

Communication et efficacité du travail entre designers et développeurs

  • Une logique de conception de l’interface et un langage commun en design et développement
  • Le développeur est plus rapide et efficace puisqu’il n’a pas besoin de répéter le code

Une bibliothèque de composants accessible et évolutive :

  • Des outils utiles au designer, au développeur, au client et à tout membre du projet
  • Possibilité de nommer et personnaliser les modèles (patterns)
  • Liberté dans les choix de langage (Javascript, HTML, CSS, etc.)

Mise en œuvre : Atomic Workflow

Il n’y a pas une liste rigide de règles à suivre pour concevoir en atomic. D’ailleurs, son créateur invite à ne pas utiliser les noms d’atomes, de molécules, d’organisme, etc. si un autre langage commun s’avérait aussi compréhensible pour l’équipe. En revanche, pour un Atomic Workflow efficace, certaines bases doivent être respectées.

  • Trouver le langage visuel unique, l’identité de la marque qui donnera la tonalité générale
  • Réfléchir d’abord aux fonctionnalités importantes et aux parcours cibles
  • Anticiper comment les composants et modèles seront ensuite déclinés
  • Penser composant responsive, par exemple en utilisant Sketch
  • Partager son système de composants avec l’équipe

Dans le 5e chapitre de son ouvrage, David Frost donne aussi différents conseils pour concevoir un Atomic design System efficace sur le long terme. Résumons les idées principales :

  • Consacrer le temps et le budget nécessaire à sa conception
  • Communiquer avec les utilisateurs pour modifier le système dès que c’est nécessaire
  • Simplifier le plus possible la mise à jour des UI patterns, des applications, etc.
  • Créer des styles guides compréhensibles par le plus grand nombre, pas seulement pour les développeurs
  • Promouvoir le Design System et ses évolutions, évangéliser à son sujet
  • Nommer les patterns de manière à ce qu’ils soient réutilisables dans différents contextes

Selon Frost, même si la tâche semble difficile au début, les bénéfices pour l’équipe, l’expérience utilisateur, l’entreprise et les clients sont ensuite réels.

L’Atomic design et la créativité ?

Certains pensent que le travail en Atomic design nuit à la créativité des designers. D’autres affirment qu’en prenant la métaphore des legos, de la musique, ou même des lettres de l’alphabet, les possibilités d’assemblage paraissent plutôt illimités. Son créateur insiste d’ailleurs sur le fait que par rapport aux UI Framework (framework d’interface) ou framework front-end, l’Atomic design offre un vrai potentiel créatif. Ses défenseurs y voient ainsi un moyen de travailler davantage sur l’expérience utilisateur sans pour autant compromettre la créativité du design.

Nous ne prendrons pas parti dans ce débat. Toutefois, il est certain qu’il faut pouvoir s’approprier cette méthodologie et l’adapter au projet. Il est même possible de voir, dans la liberté créative laissée par le design atomique, son principal défaut. En effet, dans des structures importantes, les divergences entre les équipes de design pourraient compliquer sérieusement l’avancée du projet. Dans le même temps, l’Atomic design system aiderait précisément à satisfaire les besoins des designers et des développeurs tout en maintenant la cohérence des produits et fonctionnalités.

Bibliographie

Ebook atomic design Brad FrostLe livre auto-édité Atomic design de Brad Frost.

Atomic Design décrit en détail tout ce qui entre dans la création et la maintenance de systèmes de conception robustes, permettant à votre organisation de déployer des interfaces utilisateur de meilleure qualité et plus cohérentes plus rapidement que jamais. Ce livre présente une méthodologie pour penser nos interfaces utilisateur comme des hiérarchies réfléchies, discute des qualités des guides de style efficaces et présente des techniques permettant de transformer le flux de travail de conception et de développement de votre équipe.

Lire aussi : http://bradfrost.com/blog/post/atomic-web-design/

 

 

Modular Web Design de Nathan CurtisNathan Curtis, Modular Web Design : creating reusable components for User Experience Design and documentation, New Riders, 2009. Un ouvrage déjà ancien pour appliquer le modular web design et concevoir un Design System.

Les équipes de conception d’expérience utilisateur souffrent souvent d’une approche décentralisée et non optimisée pour la création et la documentation d’une solution de conception pour chaque nouveau projet. Alors que les équipes réinventent à plusieurs reprises les conceptions d’écran, les résultats d’incohérence, et les équipes informatiques se démènent pour prendre les choses en main. Les bibliothèques de modèles (Pattern libraries) ne vont pas assez loin loin, suggérant des solutions générales aux problèmes courants au lieu d’offrir des traitements de conception concrets et spécifiques. Parfois, des solutions documentées se transforment en un fouillis coûteux d’attentes peu claires, d’objectifs irréalistes et de travail abandonné.
C’est tout le sens des composants, chacun représentant une partie d’une page Web. Les concepteurs peuvent produire des structures filaires, des maquettes ou des balises de manière beaucoup plus efficace en réutilisant des composants basés sur un système de conception établi. Plutôt que de limiter l’innovation, les composants permettent aux concepteurs de restituer rapidement les cadres de conception résolus et de se concentrer sur le problème à résoudre, améliorant ainsi considérablement la qualité et le taux de production. De plus, les équipes développent une base de référence plus approfondie pour la collaboration, une plate-forme de gouvernance et une structure de documentation utile et prévisible.

Ce livre définit le rôle des composants et leur importance, explique comment organiser et créer une bibliothèque de composants, explique comment utiliser les composants dans la pratique et explique un processus de documentation et de maintenance des composants.

Responsive Design Patterns de Ethan MarcotteEthan Marcotte, Responsive Design Patterns, Eyrolles, 2016. L’importance des modules réutilisables et leur processus de conception pour aboutir à un site Web responsive.

Alors que le responsive design évolue, il devient crucial que nous voyions au-delà du mobile, de la tablette et de l’ordinateur de bureau pour résoudre les problèmes de design web. Lorsqu’ils sont bien conçus et planifiés, les design patterns – petits modules réutilisables – peuvent plus que jamais aider un site Web responsive à toucher plus d’appareils (et de personnes).

Ethan Marcotte nous montre ici comment procéder, en mettant l’accent sur les systèmes de navigation responsive, le redimensionnement et l’adaptation d’images, la gestion de la publicité dans un contexte responsive et en énonçant des principes plus généraux afin de concevoir des présentations plus flexibles qui s’adaptent à tous les appareils.

Voir aussi le Pattern Lab : https://patternlab.io/

Conclusion

Avec l’accroissement du commerce mobile et les enjeux liés à l’expérience utilisateur, le principe du design par composants a pris de l’ampleur. En effet, il devient important d’offrir une expérience utilisateur cohérente et une homogénéité visuelle, quels que soient l’environnement et le support. Le concept d’Atomic design, conçu par Brad Frost, est né dans ce contexte. Par rapport aux designs et aux développements modulaires, l’Atomic design se veut avant tout une méthode de conception adaptée aux interfaces utilisateurs, du téléphone mobile au grand écran. Sa méthodologie et sa bibliothèque de composants montrent également une volonté de faciliter la compréhension des processus de design et de développement. D’ailleurs, tel est en partie le but de cette métaphore chimique. La démarche de l’Atomic design valorise donc la co-création et la gestion en équipe des projets. À ce jour, ce concept récent en est encore au stade du test, mais suscite néanmoins l’intérêt.

Voir notre méthode de conception

Lire aussi :

Voir aussi :

Un commentaire

Commentaire