Loading

Fin 2016, Brad Frost a autopublié son premier livre sur le concept qu’il a créé quelques années auparavant, l’Atomic Design, et qui très vite est devenu une référence dans le développement d’interfaces utilisateur.

À travers cet ouvrage, il revient sur l’analogie faite à la table de Mendeleïev – la classification périodique des éléments – nous renvoyant tout droit à nos cours de sciences physiques lycéens.

Le livre est aussi l’occasion pour l’auteur de parler processus de conception d’interfaces utilisateur, de dresser un état des lieux du métier de développeur Front-End et de présenter les Pattern Libraries.

Atomic Design : le livre Cliquez pour tweeter

Créer des systèmes de design et non des pages

« On ne conçoit pas des pages mais des systèmes de composants » semble être le motto qui a insufflé à Brad Frost l’envie de créer Atomic Design : au revoir les pages, pensez composants !

Rien de bien nouveau, certains de ces prédécesseurs ayant emboîté le pas avant lui, mais son analyse est intéressante avec ce qu’il appelle la Métaphore de la page (the page metaphor) : « La métaphore de la page est profondément ancrée dans la manière dont nous ciblons et réalisons nos projets ». Cela même se répercute jusqu’à notre langage : « Combien de temps faudra-t-il pour construire la page d’accueil ? », « Nous souhaitons lancer un site Web de cinq pages … », etc.

L’auteur expose avec force arguments l’impasse de cette approche et lui préfère une approche axée composants : « Le niveau d’effort d’un projet est bien mieux déterminé par les fonctionnalités et les composants contenus dans ces pages, que par le nombre de pages. »

La méthodologie Atomic Design

Il s’agit d’un « modèle mental nous aidant à penser l’UI comme un tout cohérent et une collection de pièces. » Chaque partie de l’interface est découpée en éléments (les atomes), lesquels interagissent et s’adjoignent pour former l’UI.

Ce modèle implique, pendant les phases de conception, des itérations et allers-retours éléments-UI – chacun ayant la même importance : le bouton du moteur de recherche recevra la même attention que l’interface finale – et met en évidence assez naturellement la nécessité de cohérence d’un élément envers l’UI et vice versa. Brad Frost fait un parallèle avec le peintre qui se rapproche de sa toile pour travailler un élément et immédiatement s’en éloigne pour regarder le résultat dans un contexte plus large.

Concrètement la méthodologie découpe l’interface en plusieurs éléments et permet, avec la syntaxe suivante, de créer un système complet :

  1. Atoms (atomes)
  2. Molecules (Molécules)
  3. Organisms (Organismes)
  4. Templates
  5. Pages

Les cinq découpages de l’Atomic Design

Atomes ? Molécules ? Enfilez vos blouses blanches, on vous explique. Un organisme est composé de plusieurs molécules, elles-mêmes composées de plusieurs atomes. La molécule d’eau, H20, est ainsi composée de deux atomes d’hydrogène et d’un atome d’oxygène.

Passionnant, n’est-ce pas, mais pourquoi avoir voulu derechef créer de nouveaux termes alors que d’autres – modules, components ou elements – sont déjà largement établis et répandus ? Parce que les termes cités précédemment sont parfois abscons : les modules forment des composants, les composants composent les modulesAtomic Design implique une hiérarchie évidente : des atomes forment une molécule, des molécules forment un composant… pas de confusion possible.

La « molécule » moteur de recherche

Le concept est facile à comprendre, il tient en quelques lignes et deux illustrations et on peut légitimement se demander pourquoi y consacrer un ouvrage complet ? Parce que la vraie force d’Atomic Design réside dans son application au quotidien. L’auteur y consacre un chapitre, Atomic Workflow aidant à sa mise en oeuvre ; lequel est précédé d’un chapitre plus technique – qui tranche un peu avec l’approche théorique voire créative du début – consacré à Pattern Lab, un générateur de site statique open source utilisant les principes d’Atomic Design. Chapitre intéressant toutefois que l’on survolera probablement à la première lecture mais sur lequel on aura envie de revenir par la suite.

Développeurs Front-End au bord de la crise de nerfs

L’auteur nous livre une tribune intéressante dans laquelle beaucoup se retrouverons quant au métier de développeur Front-End :

« Parce que le HTML et le CSS sont des codes, le développement Front-End est souvent mis dans le même panier que d’autres langages de programmation comme Python, Java, PHP, Ruby, C++, etc. Ce malentendu tend à donner à de nombreux développeurs Front-End, y compris moi-même, une grave crise d’identité. »

Il ajoute : « Le HTML, le CSS et le JavaScript de présentation (presentational JavaScript) servant à construire l’UI, il est crucial de considérer le développement Front-End comme partie intégrante de la phase de conception du design. »

Effectivement, à l’heure du Responsive – s’il convient encore d’utiliser le terme – la nécessité de tester et d’itérer un design en temps réel dans différents navigateurs nous a propulsé à une aire « post-PSD » où les développeurs Front-End ont un rôle essentiel à jouer dès les phases de conception.

Conclusion

À travers son livre, Atomic Design, Brad Frost explique la méthodologie éponyme qu’il a créée quelques années auparavant. Parfois militant, le livre défend l’importance des pattern libraries, difficiles à mettre en place et qui nécessitent une organisation à long terme des équipes en charge.

Enfin, l’auteur invite à changer les process de conception en sortant des modèles ancestraux – design puis développement : modèles encore trop vendus par des agences créées à l’aire du « Print » et reconverties par la force des choses au « digital » – mais en privilégiant une approche transversale, interdisciplinaire et itérative.

Brad Frost nous livre un ouvrage de qualité et fait graviter autour du « modèle mental » qu’est Atomic Design, plusieurs thèmes qui lui tiennent à coeur. Un ouvrage qui s’inscrit dans un courant plus global qui tente d’abandonner quelques reliquats encombrants du « Print ».

Découvrir Atomic Design  

https://www.aastudio.fr
Do you like Aurélien Aries's articles? Follow on social!
People reacted to this story.
Comments to: Atomic Design : le livre
Write a response
Inscription obligatoire et gratuite

Suivez toutes nos actualités

Ne manquez pas un article ! Toutes les nouveautés directement dans vos emails.

ARTICLES LES PLUS APPRÉCIÉS

Articles des membres

Devenir un community manager n’est pas une tâche facile. Cela demande beaucoup de travail, de dévouement et, surtout, de bonnes compétences. Un community manager doit posséder des compétences exceptionnelles en matière de communication, être capable de gérer des situations difficiles et de réfléchir rapidement. Ils doivent également avoir une connaissance approfondie des produits ou services […]

LES NOUVEAUX ARTICLES

  1. Actualités
Cela n’est plus nouveau, la cybersécurité est un enjeu crucial pour toutes les entreprises et organisations qui utilisent des systèmes informatiques. Mais, en même temps, l’expérience utilisateur (UX) est également devenue un facteur clé pour la bonne utilisation des systèmes. Malheureusement, ces deux objectifs ne vont pas toujours de pair. En effet, sécuriser quelque chose […]
  1. Articles des membres
Devenir un community manager n’est pas une tâche facile. Cela demande beaucoup de travail, de dévouement et, surtout, de bonnes compétences. Un community manager doit posséder des compétences exceptionnelles en matière de communication, être capable de gérer des situations difficiles et de réfléchir rapidement. Ils doivent également avoir une connaissance approfondie des produits ou services […]