Skip to main content

Brad Frost, le conception de la définition de l’Atomic Design est une méthodologie qui permet d’accélérer la conception d’une interface digitale par des éléments de design modulaires. Brad Frost introduit cette notion d’Atomic Design dans les années 2015.

As the craft of web design continues to evolve, We’re recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages. Atomic design is a methodology for creating design systems.

— Brad Frost —

Brad Frost and Dave Olsen, les gars derrière le site patternlab.io, appellent cela : “Build systems, not pages.”

Mais du coup, qu’est ce que ça veut dire ?

Construire des systèmes plutôt que des pages signifie que l’on ne va pas designer ou développer directement la page mais d’abord les éléments visuels qui l’a composent. Ça veut dire qu’on aura d’abord une bibliothèque d’éléments visuel (icône, couleur, typographie, etc.), puis en les combinants, on aura des unités plus grandes. L’interface finale correspond donc à une combinaison de toutes ces unités.

On rentre dans la notion principale de l’Atomic Design avec les atomes, de molécules, d’organismes, des template et de pages. Cette méthodology est donc composée de 5 niveaux :

  • atome
  • molécule
  • organisme
  • template
  • page

L’atome

Ce que l’on peut définir comme un atome sera les plus petits éléments ou blocs de l’interface. On aura donc les couleurs, icônes, charte typographique, etc.

Les molécules

Au même titre que la nature, les molécules vont regroupées plusieurs atomes pour commencer à composer des premiers éléments visuels. Par exemple, on aura les premiers inputs pour les formulaires, les boutons et les différents états de celui-ci.

Conception des organismes

Comme pour les étapes précédentes, on va capitaliser sur les molécules pour créer les premiers organismes de l’interface. Ces derniers sont donc des groupes de molécules qui forment des sections plus ou moins complexe de l’interface.

À l’image des boutons, ces organismes ont différents Etats que le designer devra prendre le soin de bien définir (survol, actif, inactif, désactivé, etc.)

C’est à partir de là que l’on commence à introduire la notion d’expérience utilisateur (en vulgarisant beaucoup, attention). Pour donner un exemple d’organisme, on aura le header, le menu de navigation, ou encore le formulaire d’inscription ou de connexion.

Ce sont des ensembles composés de plusieurs molécules. En plus de la notion d’expérience utilisateur, c’est à partir de cette étape que l’on commence à intégrer la notion de responsive. C’est à dire, le fait qu’une interface s’adapte entre l’ordinateur et le mobile.

Templates

Les templates regroupent les organismes. Sur une même interface, on va réunir plusieurs organismes. C’est à ce stade que l’on commence à voir apparaître le design et les premières pages de notre interface.

Cette méthodologie permet au designer d’avoir une vue à la fois globale et précise de son design. Cela lui permet de bien découper ses interfaces, d’être consciencieux dans sa production et mieux interagir avec chaque éléments individuellement s’ils veut faire des modifications. Il peut intervenir plus facilement sur chacun d’eux.

D’un point de vue plus « empirique », l’Atomic Design permet au designer de mieux s’approprier l’interface.

Pages

On atteint enfin le dernier niveau de l’Atomic design. Le niveau de la page. C’est ici que l’on va incorporer tous les templates et que l’on va y injecter le contenu visuel, vidéo et rédactionnel que l’on souhaite.

Si votre designer a bien configurer son document de production, il peut venir interagir sur chacun des éléments sans détérioré la structure même de la page. Cette méthodologie permet donc de gagner en productivité pour le designer et le client. Dans le cadre de la conception d’un design system, je trouve la méthodologie de l’atomic design particulièrement efficace.

Et voila, dans cet article on a vu toutes les étapes de l’atomic design. Vous avez une rapide animation en fin d’article. La combinaison de ces 5 étapes permet de produire une interface efficiente et stable.

En résumé, l’atomic design est :

  • Atomes sont les éléments UI bruts les plus petits et simple, qui vont constituer la base de tout le système. Ils vont permettre de composer les molécules et peuvent être « décomposer ».
  • Les molécules sont un regroupement d’atome pour venir constituer des éléments UI plus grands et complexe.
  • Les organismes deviennent des éléments relativement complexe car ils regroupent plusieurs molécules et forment des sections entières de l’interface.
  • Les templates réunissent plusieurs organismes sur une interface et commencent la structuration des pages.
  • Les Pages présentent l’aspect final de l’interface avec le contenu visuel et rédactionnel de la future interface. Elles permettent de tester et mettre à l’épreuve le design system pour d’éventuelle modifications.

Conclusion

Comme on peut le voir dans cet article, l’Atomic Design permet d’apporter une méthodologie claire et intuitive dans la conception de design system et d’interface au sens plus large. L’Atomic design nous permet de nous concentrer sur l’essentiel et être plus productif sur la conception de notre interface.

Il permet aussi au designer d’avoir une vue plus globale et de pouvoir intervenir sur chaque éléments individuellement sans devoir remettre en cause tout le design system ou l’interface. In fine, cela permet de mettre à l’épreuve l’expérience utilisateur, faire une interface plus facile à gérer et ainsi la rendre plus consistante.

Et vous, comment vous implémentez votre design dans vos interfaces ?

The atomic design gives us the ability to traverse from abstract to concrete. Because of this, we can create systems that promote consistency and scalability while simultaneously showing things in their final context. And by assembling rather than deconstructing, we’re crafting a system right out of the gate instead of cherry picking patterns after the fact.”— Brad Frost —

Brad Frost

 

Guigz

Guigz

Hello, je m'appelle Guillem. Je suis designer d'interface depuis 2018 en freelance. Je suis aussi Entrepreneur et Mentor sur la conception web.

Laisser un commentaire