L’Atomic design est une méthode de conception modulaire. Pour faire simple, lorsque l’on conçoit des interfaces avec cette méthode, on part du plus petit des éléments pour construire un ensemble. De l’atome à la page…​ Si comme pour moi les cours de Physiques/Chimie ne sont qu’un vague souvenir ou que vous ne voyez pas le rapport entre les atomes et les interfaces…​ne bougez pas, nous allons détailler l’ensemble.

D’après Brad Frost, l’esprit ingénieux qui se cache derrière cette méthode, elle se compose de cinq phases, qui sont :

Les Atomes, sur lesquels on s’attarde dans la première phase, sont des éléments qui sont irréductibles et qui n’ont aucun but fonctionnel à eux seuls. Ils serviront de base à tous les éléments graphiques qui composeront notre interface. Par exemple : un logo, un bouton, une couleur, une icône ou un label…​

Les Molécules, qui constituent la deuxième phase, sont des groupes d’atomes relativement simples qui forment des composants d’interfaces. Elles doivent être pensées "responsive" pour encourager la réutilisation des composants et favoriser la cohérence dans notre interface. Par exemple : un label + une icône loupe + un champ de saisie = Un champ de recherche.

Pour la troisième phase, Les Organismes se composent à leur tour de molécules et d’atomes. Ce sont des combinaisons de composants un peu plus complexes, qui forment des sections de 2 l’interface finale. Par exemple : Un champ de recherche + Logo + Nav = Un Header.

Selon Brad Frost, l’analogie qui a permis d’établir la hiérarchie des éléments s’arrête ici, pour redonner place à un langage plus approprié et éviter de perdre davantage les parties prenantes.

Maintenant, en fonction de nos différents supports, on se servira des Organismes pour constituer Les templates, on entre ainsi dans la quatrième phase. C’est le moment d’apporter un peu de contexte aux éléments jusqu’ici abstraits et de réfléchir à la mise en page, en tenant compte de la structure du contenu. Par exemple : Un Header + Image + Un Bloc texte + CTA + Footer = Une page d’accueil.

Enfin, la cinquième et dernière phase, nous permettra de mettre le contenu en action. C’est l’occasion, d’ajouter du contenu réel sans pour autant aller jusqu’à la réalisation de maquettes. Par exemple : On ajoutera à notre page d’accueil du texte, des images ou médias représentatifs de notre contenu.

C’est bien tout ça, mais que nous apporte la mise en application de cette méthode ?

C’est une démarche utile si l’on souhaite remettre en question son workflow en tant que designer UI/UX, gagner en efficacité et rapidité sans pour autant devoir sacrifier à la cohérence et la qualité du projet. (Ndlr : Parce que c’est notre projet !!!) On gagne du temps et ça, ça n’a pas de prix.

C’est aussi un moyen d’évoluer au même rythme que nos interfaces qui changent elles aussi pour s’adapter aux nouveaux supports qui sortent du cadre habituel (Hololens, Oculus Rift). Ces supports peuvent être aussi petits (montres connectées…​) que gigantesques (projections murales, salles immersives…​).

Ainsi le design par page n’a plus lieu d’être, car quand on y pense la page est un concept datant du livre et que l’on a transposé au web, (Ndlr : …​mais ça c’est un autre sujet ). Enfin, les développeurs utilisent cette méthode depuis assez longtemps, cela permet donc d’accorder notre manière de concevoir une interface à la manière de la développer et par la même occasion, de parler le même langage que nos chers développeurs. Une des manières pour rétablir nos atomes crochus (Ndlr : Envoyer un don à l’association devs et designers sans frontières).

(Beaucoup d’avantages mais pas seulement…​) Mais alors, si tout est si parfait, me direz-vous, pourquoi tout le monde n’applique pas cette méthode ?

Pour beaucoup, cette méthode soulève la question de l’uniformisation au détriment de la singularité de chaque projet. Quand on parle de “factorisation” et de “réutilisation”, malheureusement beaucoup comprennent “uniformisation”,"censure des idées" et “castration créative”. Il faut savoir identifier les parties du projet pour lesquelles on recherche avant tout un sursaut créatif dans le but de créer une émotion particulière et celles où on souhaite une forte cohérence et beaucoup de réutilisation. On privilégiera les composants plus aboutis et concrets comme les templates et organismes si on souhaite de la réutilisation alors que l’on se tournera plus vers les molécules qui favoriseront notre liberté d’interprétation et de ce fait, notre créativité.

En lisant différents articles à ce sujet et en appliquant cette méthode, on se rend compte que la méthode en elle-même n’est pas applicable à tous les projets et ne convient pas à toutes les structures. Notamment les plus grosses, ayant plusieurs équipes de design/développement qui appliquent généralement la même méthode de conception pour donner l’impression que leurs produits viennent d’une seule et même équipe. Donc proposer aux 4 équipes une méthode qui va miser d’abord sur la liberté créative pour ensuite essayer d’uniformiser les patterns, amènerait beaucoup trop de divergences parmi les différentes propositions des équipes de design, ce qui aurait pour effet d’empêcher ou de ralentir le process de conception.

Et puis, soyons honnêtes, certains termes peuvent créer de la confusion. J’ai par exemple eu du mal à savoir ce que doivent être concrètement les templates versus les pages, d’autres établissent mal la différence entre les molécules et les organismes. Que l’on prenne un angle scientifique avec l’analogie des atomes et molécules ou l’exemple des LEGOS, l’intérêt est de réellement comprendre les principes derrière cette méthode pour l’adapter en fonction de son projet et de la taille de son équipe.

Alors on achète ? Cette approche nous permet de mieux comprendre ce que l’on souhaite créer et surtout comment on va le créer. Cela incite enfin à réfléchir autant au détail, qu’à l’ensemble. La méthodologie aide aussi à avoir donc une vision globale du produit ou de la marque. Enfin, cela permet aux designers de se rapprocher de la façon de travailler des développeurs. On doit se rappeler que comme pour toutes les méthodes de design, il faut se l’approprier et l’adapter au contexte de travail. Au final, instaurer ce type de méthodologie de travail au sein de son équipe doit servir à gagner du temps sur des tâches répétitives et ingrates pour lesquelles nous n’avons aucune valeur ajoutée en tant que designer, telles que répercuter la même modification sur 20 écrans différents, remplacer des millions de fois le même wording, refaire le même composant un nombre incalculable de fois… Gagner du temps oui mais si cela permet de travailler sur d’autres éléments beaucoup plus intéressants pour notre utilisateur final et/ou notre client. On pourra alors se concentrer sur ce qui nous importe le plus, à savoir le plaisir d’usage et l’émotion !

Sources :