Atomic Design : la mort programmée des pages web

Brand Content, Technique, User Experience

2 nov, 2017

Au risque de vous décevoir, nous n’allons pas parler de Kim Jong Un qui clashe Donald Trump sur fond de qui a la plus grosse (arme nucléaire) mais plutôt d’une autre guerre, livrée dans les tréfonds de l’internet visant à éradiquer le design de pages/écrans…

Avant de faire appel à vos anciens (nous n’avons pas dit horribles) souvenirs de cours de physique-chimie du lycée, un petit état des lieux s’impose. Avec l’évolution constante des canaux de communication digitaux et des usages quotidiens, force est de constater que la conception d’interface évolue elle aussi avec la même célérité. Le responsive design qui était encore hier une option pour les annonceurs est devenu aujourd’hui le nerf de la guerre digitale où les équipes tactiques (composées de designers) doivent concevoir des interfaces scalables pouvant être consommées aussi bien sur une Apple Watch que sur un mur interactif de 4 mètres par 8 présent en store éphémère lors d’un évènement.

Ces changements majeurs impliquent des remises en question cycliques des solutions à apporter à ces nouvelles contraintes, ainsi qu’une évolution des méthodes de design. C’est précisément sur ces deux points que l’éminent Brad Frost a apporté une solution : Atomic Design.

Cette méthode de design par composants part d’un constat simple : le format page – remontant à des temps immémoriaux – est hérité des livres et a tout simplement été transposé au web. Le design par page n’étant plus adapté à nos besoins ni à nos usages, il est grand temps pour les designers de “tuer” les pages web.

Il s’agit donc de concevoir des éléments d’interface pouvant répondre à toutes les problématiques responsive et non plus des pages à proprement parler. La résultante de ce schéma de pensée inversé nous amène à imaginer un système de composants avec des éléments modulaires pouvant être utilisés dans différents environnements et différentes interfaces, tout en conservant une homogénéité visuelle ainsi qu’une cohérence en terme d’expérience utilisateur.

ATOMIC DESIGN PROCESS 1024x328 Atomic Design : la mort programmée des pages web

Définition

Il est l’heure pour nous d’entrer dans le détail de l’Atomic Design et de réveiller quelques vieux démons gravés à la craie sur le tableau noir de la salle 201 sous forme de schémas, impliquant électrons, protons et neutrons (non, pas Jimmy). Pas d’inquiétude, on ne vous parlera pas de physique quantique ou du chat de Schrödinger, promis on va y aller en douceur !

L’Atomic Design tire son nom du même principe que la composition de la matière. Les atomes composent les molécules qui composent elles même des organismes qui, regroupés, forment un ensemble de matière.

Les atomes

L’atome est un élément irréductible de l’interface et ne peut être divisé. Il n’a aucun but fonctionnel mais il compose cependant la base de tous les éléments graphiques de l’interface. Un atome peut être un style typographique, une couleur, une icône, un champ de saisie, etc.

ATOMS 1024x992 Atomic Design : la mort programmée des pages web

Les molécules

La molécule est composée d’un ensemble fini d’atomes et représente un composant d’interface simple. La molécule étant un composant d’interface, elle doit être pensée pour fonctionner en responsive et doit s’accompagner de règle de gestion spécifiques pour définir l’affichage des éléments en fonction des supports.

Les molécules peuvent représenter un champ de liste déroulante : un label + un champ de sélection + un picto de flèche descendante.

MOLECULES 1024x963 Atomic Design : la mort programmée des pages web

Les organismes

L’organisme est un ensemble de plusieurs molécules et représente les composants les plus complexes. Ces différentes parties de l’interface finale doivent former un ensemble cohérent, fonctionnel et responsive.

Les organismes pourraient représenté notamment un module d’inscription à une newsletter : un champ de saisie + un CTA + du contenu édito (titre et texte).

ORGANISMS 1024x655 Atomic Design : la mort programmée des pages web

Les templates

On quitte l’univers d’Einstein pour revenir sur le terrain du digital. Les templates selon Brad Frost permettent d’organiser l’ensemble des organismes afin de vérifier que les informations sont bien hiérarchisées et que le comportement responsive est bien respecté sur tous les supports.

Les pages

La page est un template dans sa version finalisée avec les vrais contenus. Elle permet de visualiser la maquette juste avant intégration par les développeurs.

Atomic Page 1024x728 Atomic Design : la mort programmée des pages web

Ces 5 étapes représentent la moelle épinière de la méthodologie Atomic Design. Si elles ne sont pas linéaires et immuables, elles définissent un schéma de réflexion diamétralement opposé aux méthodes traditionnelles de design les plus utilisées.

 

Procédé

Quand les méthodes plus traditionnelles s’appliquent à concevoir l’interface dans son entièreté pour en dégager par la suite des éléments redondants sur lesquels il est possible de capitaliser, nous appliquons ici l’exacte démarche inverse en démarrant par la conception des éléments clés à partir desquels pourra être définie l’intégralité de l’interface.

Il est ainsi possible de garder une cohérence certaine sur l’ensemble des composants du site, ne pas créer de doublons ayant la même fonctionnalité et surtout gagner en agilité en terme de Design Thinking. Il s’agit donc de commencer par construire le styleguide de l’interface et de créer les écrans à partir de ce dernier et non l’inverse.

Gain de temps, rationalisation des interfaces, logique de design similaire de la conception au développement et entièrement adapté pour le test & learn, l’Atomic Design possède d’infinis avantages que vous pourrez découvrir rapidement en embrassant cette méthode.

 

L’évolution des outils de design comme Sketch, Studio by Invision ou Adobe XD permettent d’implémenter facilement les préconisations de Brad tout en laissant une créativité absolue aux designers. En crucifiant les saintes “pages web” sur l’autel du design, l’Atomic Design offre des perspectives presque illimitées en terme de conception d’interfaces vivantes et évolutives.

Maintenant, on s’en va convaincre Donald et Kim que la seule guerre qui vaille la peine d’être menée est celle du design… BOUM !

 

 

Sources :

https://atomicdesign.bradfrost.com/

https://uxdesign.cc/atomic-design-how-to-design-systems-of-components-ab41f24f260e

https://blog.link-value.fr/latomic-design-9611d51b3143

Laisser un commentaire.