Plongée dans le Design Modulaire, ou Atomic Design, tel que défini par Brad Frost en 2013. Pourquoi cette méthode pourrait-elle bien devenir la norme dans un avenir (très) proche ? 

Atomic Design : que se cache-t-il derrière un nom aussi badass que mystérieux ? 

Si l’on devait traduire Atomic Design en français, nous nous laisserions sans peine tenter par Design Modulaire, ou Design Moléculaire, tant l’expression traduit bien la pensée qui réside derrière ce système : 

Penser la conception d’interfaces comme la vie. C’est-à-dire ? Un enchevêtrement d’atomes extrêmement simples qui mis bout-à-bout composent des interfaces de plus en plus complexes et précises. 

Tout démarre en 2013 (quasiment 10 ans déjà !) lorsque Brad Frost publie un billet sur son blog, présentant sa conception unique des interfaces. Comment ? En Substituant aux frameworks, venant trop souvent formater et cadrer la conception d’interfaces, un système évolutif et personnalisable ! Afin de préserver la diversité et le style graphique de son utilisateur ! 

Pourquoi donc ? Pour s’affranchir d’un problème qui est plus que central dans la création d’interface : la multiplication des tailles d’écrans ! 

Auparavant, 1 ou 2 modèles standards définissaient les normes pour quelques années. Dorénavant, chaque nouveau produit se différencie par des tailles d’écrans et des résolutions qui lui sont propres ! Les montres connectées et les smartphones pliants vont accentuer cette tendance. 

Fini d’implémenter un à un les éléments en Responsive Design pour avoir une interface adaptée et optimisée ! Le gain de temps est colossal.

C’est un des intérêts majeurs du Design Modulaire ! En partant du plus petit au plus grand composant, le design reste clair et pertinent. Le tout en s’adaptant à une charte graphique existante ! Une fois votre charte actuelle décomposées en éléments modulaires, vous pouvez la modifier sans dégrader sa cohérence ou son particularisme.

Certains CMS possèdent déjà cette particularité, il ne s’agit donc pas d’une révolution.

Et concrètement ? Penchons-nous sur les atomes d’interfaces.

Si nous avons vu la théorie précédemment, penchons-nous sur la pratique ! Comment s’articule l’Atomic Design ? 

Comme dit précédemment, l’Atomic Design part de l’Atome, un des plus minuscules composants de la matière connue. Les Atomes s’assemblent pour former des molécules. Elles-mêmes s’assemblent pour former des organismes de plus en plus complexes. 

Un atome input Rechercher. combiné avec un atome Champs texte -Rechercher sur le site-. et enfin un bouton Recherche. avec un pictogramme de loupe vous donnera la molécule Champs de recherche. commune à beaucoup de sites internet. 

Combinez cette molécule bien connue avec des atomes “Champs texte Menu” et un atome “image” et vous obtenez ainsi… Un header ! 

Et vous voyez donc la suite : l’assemblage de divers atomes, organismes et molécules va  constituer les structures de pages de vos futures interfaces ! 

Mais quelle est donc l’utilité des Templates ? Chaînon intermédiaire situé entre les organismes et la page, les templates sont une notion bien utile en UI Design. Il s’agit de pages “Fil de fer” sans aucun habillage, de simples blocs pour représenter les images. Ainsi que du lorem ipsum en guise de texte.

Ce template va servir à tester la page, et vérifier que les différents organismes, molécules et atomes sont cohérents ensemble, et respectent les bonnes pratiques du design d’interfaces. 

Alors maintenant que nous avons expliqué en quoi consiste l’Atomic Design et comment il s’articule, attardons-nous sur ses forces et faiblesses ! 

Avantages / Inconvénients

Alors, quel est l’intérêt de découper les éléments de ses interfaces en autant de modules personnalisables et combinables ? 

Atomic Design : Les +

C’est plus rapide ! Eh oui, les organismes créés le sont grâce à des atomes basés sur votre charte ! Les pages composées d’organismes sont donc directement adaptées à votre image. 

La rapidité avec laquelle on compose et décompose des organismes est également un atout majeur dans la vitesse de création ou de modification de vos futures interfaces. 

Cette rapidité est aussi due à une grande adaptabilité ! En effet, l’Atomic Design permet de concevoir avec une seule résolution puisque chaque élément interchangeable s’adapte automatiquement aux autres. Une molécule s’adapte à tout type d’écran, il est donc possible de changer de résolution en un claquement de doigts !

Enfin, en plus d’être adaptable, l’Atomic Design est complètement réutilisable ! Rien de plus facile que de combiner des boutons pour aboutir à des éléments totalement nouveaux et qui respecteront également votre charte graphique. Idéal si vous menez plusieurs projets de front ! 

Ce gain de temps a des effets vertueux. Ainsi, il est plus facile et rapide d’aboutir à une structure de site optimisée.

La décomposition des pages en organismes permet bien plus vite d’enlever les champs superflus et de parvenir à une architecture d’un site ou d’une application sans surcharges et pages ou interfaces inutiles.

Cela maintient une cohérence graphique ! C’est un point à ne surtout pas négliger, mais utiliser l’Atomic Design c’est conserver des composants communs (de l’atome aux organismes), et cela assure de conserver une grande homogénéité graphique entre différents projets !

Atomic Design : Les –

Tout ne peut pas être rose, et l’Atomic Design possède un défaut majeur : Il est long et coûteux à mettre en place ! 

Même si ce retard sera rattrapé lorsque l’Atomic Design aura été implémenté, la phase de lancement ne se fera pas en un claquement de doigts !

Il faut s’accorder sur la définition de ce que comprend la classification Atome, Molécule et Organisme. Ces définitions peuvent varier selon la nature de l’activité de l’entreprise ou simplement du projet pour lequel les interfaces sont créées. 

L’occasion de rappeler que la phase de définition du besoin est un préalable crucial à tout projet réussi ! (L’occasion également de vous partager notre infographie sur la méthode agile made in Amiltone) 

Si nous avons mis en exergue les bienfaits d’un KIT UI, il faut insister sur le côté chronophage de créer un tel kit ! A l’instar de l’Atomic Design, il faut un certain temps pour concevoir toutes les manières dont sera utilisé un bouton, et ainsi l’adapter à tous les supports ! D’autant plus qu’agir dans la précipitation conduirait à des erreurs de définition des composants, et ces erreurs pourraient impacter tous les projets futurs et donc ruiner tous les bienfaits initiaux du Design Modulaire. 

Finalement L’Atomic Design, c’est pas mal non ? 

Si l’on fait le bilan, calmement, en se remémorant chaque partie développée ci-dessus, force est de constater que l’Atomic Design possède d’indéniables qualités intrinsèques qui dévoilent pleinement leurs potentiels sur le long terme. 

S’il est difficile d’avoir des normes partagées avec l’Atomic Design et que sa mise en place est chronophage, les bienfaits de flexibilité et de rapidité à terme en font l’allié numéro 1 des interfaces d’écrans !

N’hésitez pas à nous contacter pour nous faire part de votre point du vue sur l’Atomic Design, ou bien à consulter nos pages sur le Design UX/UI et la réalisation d’interfaces !