close

Découvrez nos offres pour faire du digital le levier de votre croissance !

download
Modèles

Téléchargez le Guide Ultime de gestion de projet digitale pour vous aider à piloter vos transformations et faire les bons choix !

Image mise en avant pour l'article

Qu'est-ce que l'Atomic Design ?

14 mars 2019
Avez-vous déjà entendu parler d'Atomic Design ? Cette nouvelle méthode de design modulaire a été conçue par Brad Frost. On ne conçoit plus simplement des pages, mais des systèmes de composants qui s'adaptent à de nombreux supports différents. Vous voulez en savoir plus ? Tout est dans cet article !


 


Le Web vient de fêter ses 30 ans. C'est un âge honorable, qu'il convient de célébrer, mais qui commence à générer quelques inconvénients. Certains concepts de bases qui sont quasiment nés avec le Web sont devenus... obsolètes.

En matière d'UX, c'est par exemple le cas de la "page" telle qu'on la concevait jusqu'à présent. Elle est dérivée des contenus papiers, d'où son nom, mais ne s'adapte plus aux usages d'aujourd'hui. Principal problème : la multiplication des terminaux, dotés d'écrans de tailles et de nature parfois radicalement différentes. Songez que l'on peut afficher un même site sur un smartphone, voire une montre connectée, comme sur un écran télé de 88 pouces.

Comment y remédier ? Un nouveau concept est né récemment, théorisé par Brad Frost : l'Atomic Design. Il se propose de révolutionner la conception de sites et d'interfaces, et par extension la façon d'aborder et de mener à bien ce type de projets. Pourquoi et comment ? Voici quelques explications...

 

Atomic Design : diviser pour mieux régner

La dénomination d'Atomic Design peut prêter à confusion. Elle se réfère à une hiérarchie de taille, telle qu'on peut l'imaginer en physique atomique : atome, molécule, puis cellules ou organismes, le tout permettant au final de concevoir des templates et des pages.

atomic-design

L'Atomic Design est apparue en 2013 sur le blog de Brad Frost, son concepteur. C’est en 2016, après la publication de son livre, que le concept d’Atomic Design est adopté par de nombreux designers et chefs de projets.

L'idée est de réduire un site à ses plus petits composants, lesquels peuvent ensuite être assemblés pour constituer des modules de plus grande taille. Ces modules peuvent eux-mêmes être accolés pour constituer l'ossature d'une page puis d'un site, qui s'affiche plus correctement sur tous types d'écrans.

On peut noter que le principe de base de l'Atomic Design n'est pas en soit 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). Les principaux CMS, tels que Wordpress ou Drupal, proposent aussi des modules que vous pouvez dupliquer et adapter sur différentes pages. Mais la structure qui encapsule ces modules est suffisamment rigide pour poser parfois des problèmes d'affichage sur des terminaux de petite taille, ou de très grande taille ...

Le concept d'Atomic Design se rapproche aussi de celui de Modular Web Design, apparu quelques années plus tôt.

 

Le concept d'Atomic Design est lié de près à l'UX

maquette

Nous avons abordé plusieurs fois l'expérience utilisateur ou UX lors de précédents articles. L'Atomic Design apporte sa contribution à l'élaboration d'une UX pertinente et optimisée. Il permet en effet de lancer un projet en prenant en compte dès le départ, au stade de l'ébauche, l'ergonomie future du ou même des sites, et de garder une grande continuité jusqu'à la maquette ou la réalisation finale.

L’Atomic Design consiste donc à s’intéresser d’abord à ce qui compose une interface utilisateur  et, ensuite, à son rendu final. Coupler par ailleurs les logiques d'Atomic Design à des UX patterns garantit ainsi l'absence de dissonance cognitive (quand un internaute pourrait rencontrer un composant identique mais ne produisant pas la même action ou inversement).

Brad Frost donne dans son ouvrage quelques conseils pour mettre en place un Atomic Design System pertinent. En particulier :

  • Consacrer le temps et le budget nécessaire,
  • Communiquer avec les utilisateurs pour modifier le système dès que c’est nécessaire,
  • Simplifier au maximum 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 l'Atomic Design System et ses évolutions,
  • Nommer les patterns de manière à ce qu’ils soient réutilisables dans différents contextes.

 

Une série d'avantages qui peuvent être précieux

Ce nouveau concept d'Atomic Design devrait permettre d'apporter de multiples avantages, à tous les stades de vos projets. En voici quelques-uns :

  • Création d'un cahier des charges facilitée : les éléments de base (atomes, molécules...) constituent une sorte de charte graphique préexistante,
  • Préparation rapide de templates : ils sont conçus à partir des modules eux-mêmes préconçus,
  • Codage plus facile : les lignes de code sont plus lisibles,
  • Pérennité et continuité des projets : vous réutilisez des éléments existants,
  • Adaptation à tous les écrans,
  • Possibilité de travailler plus facilement sur un projet en mode collaboratif

atomic-design (1)

 

Quand mettre en place un Atomic Design System ? 

Bien évidemment, ce nouveau concept gagne à être mis en place dès la naissance du projet, car il en facilitera la réussite et l'aboutissement. Toutefois, on peut imaginer remodeler un ou des sites existants en l'utilisant. 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.

Ce concept est bien documenté sur le Web, et prend par ailleurs toute sa valeur quand il s'agit de mettre en oeuvre des design systems. L'Atomic Design System utilise le principe de composants pour construire une bibliothèque d'éléments, visuels et principes d'interaction au code réutilisable. C'est un référentiel UX/UI destiné à tous les designers / développeurs d'une organisation et rationalise l'application d'une "charte digitale".  

Nous restons à votre disposition pour vous aider à déployer de telles stratégies UX/UI.

Nouveau call-to-action

 

Image mise en avant pour l'article
Adimeo
Pourquoi s'abonner à
notre newsletter ?
Pour recevoir tous les mois, un condensé de contenus utiles et pertinents pour votre transformation digitale !