UX CALENDAR – 12 DÉCEMBRE – Les principes de l’Atomic Design

De nos jours, nous avons une multitude de devices qui existent. Smartphone, tablette, ordinateur, télévision… La liste est longue (vraiment longue). Il faut donc créer des interfaces qui s’adaptent à tous ces devices. Les designers doivent donc faire face à ses challenges.

Sur notre jolie planète bleue, il existe des personnes vraiment incroyables, et Brad Frost en fait partie. Il ne vous dit rien ? Il est en grande partie, celui qui a inventé ce concept, et nous allons voir à travers cet article, les différents principes de l’Atomic Design.

Le commencement

Cela fait maintenant plusieurs années, que nous créons différentes choses (planche d’ambiance, guide de style), qui nous permettent de faciliter la compréhension de nos conceptions, en ce qui concerne les designers. Pareil pour les développeurs, qui ont des outils comme Bootstrap, ou encore Tailwind qui leur facilitent le travail dans le développement de produits digitaux. Cependant, le problème survient lorsque les designers et développeurs doivent travailler ensemble (que les designers transmettent les maquettes au développeur par exemple). Faire l’union entre la partie design et la partie technique.

Alors comment faire ? 🤔

Mesdames et messieurs, c’est à ce moment que l’Atomic Design entre en jeu !

Illustration – Atomic Design

Vous vous souvenez, plus en amont, nous avons parlé de Brad Frost. En effet, ce dernier à inventé ce concept de molécules (en design), un peu comme ce que l’on peut voir en Chimie. Alors, il n’y a pas de définition gravé dans le marbre pour l’Atomic Design, mais si on peut donner une définition, elle serait la suivante :

L’atomic design désigne le fait de créer un système de pièces qui peuvent s’assembler les unes avec les autres afin de créer des modèles que nous pouvons réutiliser à l’infini, pour notre projet. Grâce à cette méthode, on va réussir à créer ce que l’on appelle, un design system, qui va donc regrouper tous les éléments utilisés dans nos interfaces.

C’est pas clair ? Très bien, prenons un exemple avec les Lego. Ils sont composés de différentes pièces. Ils ont toutes des tailles différentes, et des couleurs différentes. Mais quand vous les assembler les unes avec les autres, elles peuvent former des éléments que l’on connait tous (enfin je crois), comme des maisons, des vaisseaux, des voitures, ou encore des robots. 

Un autre exemple, les poupées russes, qui sont des séries de poupées décroissantes, les unes à l’intérieur des autres.

L’ingéniosité de notre cher Brad, c’est de rassembler les éléments en 5 grandes catégories, et elles sont classées selon leur type et leur complexité.

Les 5 grandes catégories

Les 5 grandes catégories l’Atomic Design

Les atomes

C’est l’élément le plus simple. Les atomes sont les fondations de tout ce système. Les typographies, les couleurs ou encore les icônes…C’est un élément qu’on ne peut pas diviser (et oui 1 divisé par 1, ça fait encore 1, et heureusement d’ailleurs).

Illustration – Atomes

Les molécules

Ça commence à devenir intéressant. Effectivement, les molécules représentent le groupement d’atomes, qui vont nous permettre d’obtenir une première entité fonctionnelle. Les boutons, les champs textes, ou encore des liens sont considérés comme des molécules.Illustration – Molécules

Les organismes

Vous commencez peut-être à comprendre pourquoi nous avons évoqué la chimie tout à l’heure. Les organismes vont donc être représentés par un regroupement de molécules. A ce moment-là, on voit déjà se dessiner l’interface. Une carte d’article ou encore une barre de recherche. Alors attention, il peut y avoir des spécificités avec les organismes (évidemment, ce n’est pas très drôle s’il n’ y a pas d’exception). Dans certains cas de figure, un organisme peut être composé d’autres organismes.

Dans certains cas me direz vous ?

GIF – Kermit : What ?

Je comprends si vous réagissez comme Kermit, pas de panique, je vais vous l’expliquer. Par exemple, si on prend un flux d’articles, ce dernier peut comprendre à la fois des articles et des annonces publicitaires, qui vont donc eux-mêmes regrouper plusieurs molécules. Je sais, votre cerveau est en ébullition, mais ne vous inquiétez pas, cela reste une exception.

Illustration – Organismes

Les templates

Et si l’on combine les organismes…Cela nous donne des templates. En effet, ils sont la matrice de la page, car ils vont comporter un ensemble d’organismes. Le template va préciser où sont placés les différents organismes, mais leur état va dépendre du contexte de l’utilisateur, c’est-à-dire, l’endroit ou il se trouve sur les interfaces. Le template peut donc varier selon le contexte.

Les pages

Nous y sommes. La dernière catégorie sont donc les pages, et elle représente un template selon le contexte d’utilisation. Notre cher Brad, parle “d’instance de template”. Nous pouvons dire qu’elle est unique. La page d’accueil de Twitter, sur votre smartphone, sur l’application mobile, sur l’application mobile après avoir reçu une notification. Vous voyez, elle change, selon le contexte.

L’application du principe

Je l’avoue, j’ai parlé des designers et des développeurs. Mais il faut dire qu’aujourd’hui, dans les projets digitaux, nous avons un grand nombre de parties prenantes : UX Designer, UI Designer, Product Owner, Product Manager, Chef de projet, Développeur…L’idée, c’est que l’Atomic Design soit bénéfique pour toutes les parties prenantes du projet, car ce sont eux qui vont utiliser notre Design System.

De ce fait, en utilisant la méthode de l’Atomic Design, nous allons uniformiser nos interfaces, et avoir des composants qui soient cohérents les uns avec les autres, et par la même occasion, avoir un Design System bien construit. 

Gardez ces 3 étapes, illustrées sur le schéma ci-dessous, cela devrait vous aider. 

Illustration – Les 3 étapes

1 – Faites l’inventaire : Prendre connaissance avec le projet est une chose importante. En effet, nous allons pouvoir observer tous les composants, et les trier par type. Textes, icônes, boutons, Inputs…
En faisant cela, nous allons voir apparaître les 5 grandes catégories (Atomes, Molécules, Organismes, Templates et Pages).

2 – Uniformiser : 6 niveaux de tailles pour du texte courant ? Uniformisez ! Des boutons avec des marges différentes ? Uniformisez !  Vous comprenez, il faut que vos atomes soient tous uniformes, afin d’avoir des molécules cohérentes, ainsi de suite.

3 – Documenter/Communiquer : Il ne faut pas hésiter à étoffer votre bibliothèque de commentaires, expliquant les différents types d’utilisation. Plus vous documentez votre bibliothèque, mieux les parties prenantes du projets comprendront. De plus, informez des changements (par exemple des composants qui changent), et prévenez les parties prenantes des démarches que vous prenez dans le Design System.

Mes derniers mots : l’atomic design et le design system sont liés 

La complémentarité. En effet, nous l’avons vu à travers l’article. L’atomic design et le design system sont liés. En créant des éléments et des modèles moléculaires (et reproductible, je sais, ça fait beaucoup de “et”), nous accélérons notre processus de conception. Non seulement, nous accélérons le processus, mais nous le rendons efficace et cohérent.

Vous l’aurez compris, selon moi (et cela ne tient qu’à moi bien évidemment), nous devons concevoir nos interfaces à l’aide de composants, en pensant à “vivants” et “évolutifs”, et la méthode de l’Atomic Design nous aide à le faire efficacement.

Alors, vous êtes convaincue par l’Atomic Design ? Brad Frost à sorti un bouquin très intéressant sur ce principe : Atomic Design – Brad Frost. Je vous invite à le lire si vous avez envie d’en savoir plus sur le sujet.

Du confins de l’univers, je vous salue !

GIF – Au revoir

 

 

Housmane KOITA, UI-UX Designer @UX-Republic

 

Nos prochaines formations