#ui #ux #brandexperience
Voici une expression que l’on voit rebondir un peu partout dans le microcosme design, l’Atomic Design…
De quoi s’agit-il ?
Il était une fois un livre, écrit par Brad Frost sobrement appelé « Atomic Design » où il expose la chose. Le constat: nos supports digitaux sont protéiformes, ça fait déjà longtemps grâce au responsive, mais cette tendance n’a fait que s’accentuer : le design (ux & ui) d’une solution doit être cohérent entre une app, un site, un objet connecté. La direction artistique doit également être en phase entre l’interactif et les supports statiques comme le film, print, signalétique, etc. : soit toutes les incarnations d’une marque ou d’un service, au sens large.
La page (web) est morte, vive la page !
L’idée maîtresse est de penser les éléments hors contexte, plus précisément hors support, grâce à un système à 5 niveaux : l’atome, les molécules, les organismes, les templates, puis enfin les pages :
1.L’atome :
Irréductible, sous peine de réaction en chaine incontrôlée, c’est la base qui impactera tout l’aspect visuel de l’expérience. On parle ici de couleurs, de typographies, de style de pictogrammes, etc.
2.La molécule :
Comme en vrai, c’est un ensemble d’atomes qui constitue un élément simple.
Il peut s’agir d’un menu, d’un diaporama. De quoi mettre en place un StyleGuide un peu poussé en somme.
Chose primordiale, on commence à penser responsive dès cette étape, et tout au long du process jusqu’à la création des pages.
3.Un organisme :
Il s’agit d’un groupe de molécules, une espèce d’être vivant, plus complexe que les simples molécules, et qui a sa propre logique. Par exemple, il s’agit d’un bloc header comportant un menu et un diaporama, ou d’un module de connexion-inscription, etc.
4.Les templates :
Ni plus ni moins qu’une logique classique de gabarits, préfigurant l’assemblage de ces organismes en projetant bien les différences de comportements entre chaque support (desktop, smartphone…). C’est là que les choses se concrétisent, on peut alors tester les partis-pris fonctionnels, visuels.
5.Les pages (boum, les voici enfin !) :
Les pages sont le résultat final, intégrées avec le contenu et tous les éléments d’interface. Et c’est bien là qu’est la vraie différence entre une méthode classique qui ferait débuter la conception via un contexte, soit… une page par exemple.
Ces pages sont à prévisualiser en maquette pour les pages importantes, laissant les pages secondaires être générées directement en code.
Mon avis
Très intéressant, l’Atomic Design, digne successeur du Modular Design , est un process qui synthétise des pratiques que l’on avait tous plus ou moins expérimenté depuis un moment, mais le fait de le théoriser le rend visible, palpable. Il est ainsi compréhensible non seulement pour les designers, mais aussi pour les clients, dans une logique pédagogique, ces derniers pouvant être effrayés par ce type d’approche.
Pour moi le danger de cette méthode, si on se l’approprie de façon un peu trop brutale, est d’être trop concentré sur chaque étape, sans avoir en tête la big picture ; le résultat final sera alors une espèce de surprise… pour le meilleur ou le pire.
Avec ce process, la notion d’aller-retour entre le détail -l’atome donc- et la vue d’ensemble -qui se construit progressivement- est absolument capitale. Il ne faut pas y voir un process linéaire mais bien une trame sur laquelle on itère gaiement.
Exactement comme quand on dessine en somme.
En savoir plus :
Create atomic design systems with Pattern Lab
Slideshare
Modular Design: The Complete Primer for Beginners
