Atomic Design – Le design d’interface vu par Brad Frost

0
36
vues
Atomic Design by Brad Frost
 

Brad Frost est un Webdesigner américain aux multiples casquettes. En tant que Webdesigner il s’intéresse énormément à l’interface utilisateur, au design, à l’expérience web mais aussi aux méthodes de travail liés à ces derniers. Il a d’ailleurs participé à des tas de projets comme This is Responsive ou encore styleguides.io.
Mais à ce jour le projet que je retiendrais se nomme Atomic Design. C’est aussi parce que le livre est enfin sortie et qu’après avoir félicité Brad pour son travail je me devais d’en parler.

Ayant précommandé le e-book je l’ai reçu à la fin du mois dernier et je l’ai trouvé vraiment génial. Il reprend en grande partie les principes de l’Atomic Design, son origine, son utilisation dans la pratique avec des exemples très complets. Il y a aussi des tas de références et des pensées qui font vraiment réfléchir sur le design en général.
En voici un exemple :

« Content needs to be structured and structuring alters your content, designing alters content. It’s not ‘content then design’, or ‘content or design’. It’s ‘content and design’. » – Mark Boulton

Traduction : Le contenu a besoin d’être structuré et structurer altère votre contenu, designer altère le contenu. Ce n’est pas ‘Contenu puis Design’, ou ‘Contenu ou Design’. Il s’agit de ‘Contenu et Design’.

Pour commander ou lire le livre dès à présent vous pouvez vous rendre sur ce lien. Brad Frost a même créé un partenariat avec Smashing Magazine pour obtenir son livre ainsi que le Smashing Book 5 a un prix abordable.

Qu’est-ce que l’Atomic Design ?

Ce projet a pour but d’offrir une méthodologie qui permet de créer des interfaces en se basant sur 5 éléments hiérarchiques :

  • 1. Les Atomes
  • 2. Les Molécules
  • 3. Les Organismes
  • 4. Les Templates
  • 5. Les Pages
atomic design process
Les 5 éléments de la méthodologie de l’Atomic Design. Source : atomicdesign.bradfrost.com

Le système est simple, même sans avoir suivi les cours de physique nous pouvons le comprendre.

  • L’atome est la plus petite unité fonctionnelle et ne peut être divisé sans perdre sa signification.
  • La molécule est créée à partir de plusieurs atomes. Elle a ses propres propriétés.
  • L’organisme est la combinaison de plusieurs molécules différentes pouvant créer des structures complexes (Brad Frost prend l’être humain comme exemple).
  • Le Template est le premier élément de ce système que tous Webdesigners et Développeurs connaissent. C’est en gros la structure établie pour une interface. Les organismes sont utilisés dans un contexte.
  • La Page pour finir c’est l’utilisation de notre Template mais avec des informations réelles. Par exemple dans le Template le texte sera du Lorem Ipsum, tandis que dans la page le texte est le texte définitif.

Grâce à ces 5 éléments il est possible de créer des interfaces de tous types. La méthode est applicable à d’autres domaines que le web. Étant issu du PRINT je peux affirmer qu’une mise en page peut être traité grâce à cette méthode.

Pour donner un exemple, Brad Frost a décortiqué l’interface de l’application Instagram :

instagram atomic
L’interface d’Instagram décomposée pour comprendre l’atomic Design. Source : Atomic Design chap 2

L’intérêt de l’Atomic Design

Selon les entreprises les méthodologies changent sans arrêt et sont souvent bien plus imposantes et quelque fois vieille de plusieurs années. Quelque fois même les entreprises ne suivent aucun système particulier et se perdent avec les termes (components, elements, layout, templates, modules…).
Avec l’Atomic Design, vous avez 5 éléments que tout le monde peut comprendre, du commercial au développeur en passant par le chef de projet et le webdesigner (dans une agence web par exemple). Ce qui élimine déjà une bonne part d’incompréhension que l’on peut vivre au sein d’une boîte avec des tas d’intervenants.
De plus la compréhension de chaque éléments d’une interface devient beaucoup plus évidente et permet de gagner du temps lors de Mise à jour voire de refonte de design.

Ce qui est important de souligner avec l’Atomic Design, c’est la hiérarchie dans la méthode.
Il s’agit d’une hiérarchie beaucoup plus proche de ce que nous trouvons dans la nature. Après tout quoi de mieux que des choses de la nature pour créer des interfaces plus humaines ?

BradFrost a aussi créer un outil nommé Pattern Lab qui permet de créer vos interfaces en utilisant les principes de l’Atomic Design. Vous pouvez même avoir accès à la démo en vous rendant sur ce lien. Cet outil est facultatif dans le process de l’Atomic Design, mais peut être très utile pour en comprendre le principe.

Si vous n’êtes pas réellement convaincu vous pouvez faire des essais en prenant des interfaces existantes (comme l’exemple avec Instagram) pour comprendre le fonctionnement de la méthode et pouvoir l’appliquer sur de futurs projets.

L’Atomic Design n’est pas une norme

Bien évidemment, si votre méthode fonctionne déjà très bien vous n’êtes pas dans l’obligation d’en changer. L’Atomic Design n’est pas une norme du web Brad Frost le dit lui-même :

« atomic design is not rigid dogma. Ultimately, whatever taxonomy you choose to work with should help you and your organization communicate more effectively in order to craft an amazing UI design system. » – Brad Frost

Traduction : L’Atomic Design n’est pas un dogme rigide. En fin de compte, quelle que soit la Taxonomie avec laquelle vous choisissez de travailler, elle doit vous aider vous et votre entreprise à communiquer plus efficacement afin d’élaborer un système de conception d’interface utilisateur incroyable.

L’Atomic Design comprit comme tel nous fait tout de même réfléchir sur une méthode de travail simple, efficace, que tout le monde peut comprendre et qui permet de maintenir un projet dans le temps sans perdre un degré de compréhension.
Les Design Thinkers font évoluer les choses et c’est un peu grâce à eux que l’on fait évoluer ce qui nous entoure. Pour moi Brad Frost en est un parfait exemple. Je vous recommande de lire son livre ou même d’aller faire un tour sur son site.