Me voila de retour aujourd’hui pour te parler d’une méthode de création particulière : l’atomic design.

Tu en as peut-être déjà entendu parler ici ou là, je vais essayer de t’expliquer de façon concrète ce qu’est l’atomic design ainsi que ses avantages.

Penser Atomic Design, le concept

Cette notion de design atomique, introduite par Brad Frost, ne date pas d’hier, pourtant, elle est plus que jamais à l’ordre du jour.

Avec le large panel de tailles d’écran et de résolutions différentes que nous propose le marché d’aujourd’hui, les principes de créations d’interfaces web sont vivement en train d’évoluer.

Depuis toujours, nous pensons et construisons nos interfaces web par pages pour ensuite découper ces dernières et en créer des composants. Or à l’heure actuelle, il est beaucoup plus judicieux de réaliser son design non pas par page mais en éléments d’interfaces qui vont s’adapter au support d’affichage.

Je m’explique. Lorsque tu te lances dans un projet de webdesign, au lieu de te lancer directement dans le design de telle ou telle page, il est préférable, dans un premier temps, de créer tes éléments graphiques primaires ainsi que tes groupes d’éléments, et leur comportement responsive, qui seront ainsi tes composants d’interfaces. Tous tes composants réunis formeront alors ton interface complète, qui pourra être entièrement modulable et que tu pourra donc adapter facilement à tous les types de supports.

Je te propose une illustration d’Audrey Hacq, qui définit très bien ce système et la différence entre les deux méthodes.

La création d'interface web avant l'atomic design

Pour y voir encore plus clair, je te propose un exemple concret où tu peux suivre avec moi la création d’une interface simple en utilisant ce principe d’atomic design.

Comment se structure le design atomique ?

Les atomes

On commence d’abord par les atomes, qui sont les plus petits éléments. Ils sont irréductibles et composent la base de tous les autres éléments graphiques qui constitueront ton interface web ; c’est une couleur, un style typographique, une image, une icône …

Exemples d’atomes

Les molécules

Au dessus des atomes, tu vas retrouver les molécules. C’est ce qui forme des composants simples comme des boutons d’appel à action (CTA), un champ de recherche …

C’est à partir des molécules que l’on va avoir cette notion de responsive design. Il faut donc veiller à penser au comportement de celles-ci en fonction des supports d’affichages.

Exemple de molécules

Les organismes

On continue notre ascension vers la création d’une interface complète. On retrouve maintenant les organismes. Ce sont des combinaisons plus complexes d’ensembles de molécules qui forment une partie de l’interface web, comme par exemple le header, le footer, un article …

Exemple d’organismes

Les templates

Avant d’avoir une page complète de son design, on va avoir des templates. En atomic design, les templates sont là pour structurer les organismes et donner du sens à son interface. C’est en fait une première ébauche de ce à quoi va ressembler ton interface finale, mais sans contenu réel, pour que tu puisses organiser et hiérarchiser tes organismes.

Exemple de template

Les pages

Pour finir, on va (enfin) avoir nos pages. Après avoir mis les contenus réels au sein de nos templates, les pages sont là pour se faire une idée de ce que sera l’écran dans sa version finale. Concrètement, c’est la finalisation de ton webdesign.

Exemple de page

Les avantages de l’Atomic Design

Maintenant qu’on a créé une interface d’application mobile avec ce principe d’atomic design, je t’entends déjà dire : « mais c’est quoi les avantages en fait ? ».

Gain de temps considérable

Le premier avantage de cette pratique c’est le gain de temps. En effet, au début de ton projet, tu définis les éléments graphiques dont tu vas avoir besoin pour créer ton interface, donc tes atomes. Si a un moment du projet, tu veux changer une couleur ou une icône ou tout autre atome, tu as juste à modifier ce dernier, et le changement se répercute de fait sur tous les composants du site où cet atome est utilisé. Tu n’a donc pas besoin de modifier cet élément autant de fois qu’il apparaît dans ton design, une seule fois suffit.

Facilité de co-création indéniable

Un autre avantage de l’atomic design c’est d’avoir une certaine cohérence entre les équipes de conception et de réalisation du projet. Les développeurs utilisent déjà cette méthode de composants depuis bien longtemps, créer son design en atomic oblige donc à avoir la même logique qu’eux. De plus, tu aura juste à leur partager ton fichier et ils pourront facilement retrouver tous les éléments graphiques dont ils ont besoin, sans pour autant passer par l’étape de découpe de ta maquette.

Flexibilité de conception accrue

Encore un autre avantage c’est la flexibilité sur la conception d’un site web. Grâce à l’atomic design, tu vas avoir une harmonie parfaite sur toutes les pages de ton site et une ergonomie adaptée sur tous les supports. En effet, avec l’atomic, lorsque tu définis tes molécules, tu pense aussi à leur comportement responsive, donc quelque soit le support d’affichage final, ce dernier disposera toujours d’une interface adaptée et tu n’aura pas de problème d’ergonomie ou d’affichage.

L’atomic design et les Legos

Une métaphore qui fonctionne généralement assez bien pour expliquer le système d’atomic design est la métaphore des légos.

Prends une boite de légos : c’est la charte graphique de ton projet, qui contient tous les éléments graphiques avec lesquels tu vas composer ton interface.

Dans cette boite tu vas trouver tes atomes, qui sont les éléments insécables, des briques de formes, de tailles et de couleurs différentes.

Si tu assembles ces atomes, tu vas commencer à avoir des petits ensembles d’éléments représentants quelque chose de concret ; ce sont des molécules.

En assemblant ces molécules entre elles, tu vas obtenir des organismes avec lesquels tu vas pouvoir créer différentes histoires qui seront en fait différents templates. Tu pourra facilement moduler ces templates selon la surface de jeu, qui sera en fait la taille de l’écran sur lequel notre interface sera affichée.

L’atomic design en légo

Enfin, si tu es désireux d’en savoir plus sur l’atomic design, cette métaphore des légos, les limites de cette méthode, son application, etc, je te conseille d’aller voir la vidéo de Basti UI juste ici, de lire cet article sur l’atomic design et la créativité, ou encore celui-ci sur la conception d’un système de composants en atomic design.

#AtomicDesign : Repenser les interfaces utilisateur comme des Legos #UI #designClick to Tweet

A toi maintenant de t’approprier cette méthode selon tes projets !

Atomic Design : Construire ses interfaces utilisateur comme des Legos
5 (100%) 7 vote[s]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Je veux Contribuer

C'est parti

Je suis un Professionnel

Voyons voir