L’atomic design, c’est quoi ?

La comparaison entre web et livre a perdu tout son sens avec la multitude de tailles d’écrans, ainsi que les différents types de devices (TV, montres, écrans tactiles etc.).

Les méthodes de design ont dues alors évoluer pour faire place à l’atomic design, une méthode qui permet de créer des design systems modulaires à partir de 5 niveaux de composants : les atomes, les molécules, les organismes, les templates et les pages (focus ci-dessous).

Depuis longtemps les développeurs procèdent ainsi, en découpant les interfaces en unités dynamiques afin de pouvoir mettre à jour chaque composant tout le long d’un projet. Il était temps que les deux métiers accordent leurs violons.

Cette nouvelle approche est donc aussi une manière de mieux travailler en équipe en permettant aux designers et aux développeurs de concevoir main dans la main des interfaces cohérentes et mieux adaptées aux usages actuels sur tous les environnements.

Les 5 niveaux de composants

Pas assez imagé ?

De la même manière, les légos ont leurs briques (atomes) avec lesquelles nous pourrons construire un toit (molécules) qui servira à construire une maison et une école (organisme) pour à la fin construire toutes sortes de quartiers (pages). Tous ces quartiers ensemble formeront notre ville connectée (site).

Cela comprend alors deux livrables

1 - Une bibliothèque complète de tous les composants

2 - La mise en situation de leur adaptabilité sur plusieurs tailles d’écran

Les avantages

• Ne plus passer à la loupe chaque page pour s’assurer de ne pas oublier un élément

• Une conception évolutive & homogénéisée

• Gagner un temps considérable aux développeurs avec la librairie de composants

• Impliquer le développeur avant qu’un écran soit terminé.

• Créer une interface avec des composants déjà validés.

• Gagner du temps sur le responsive car chaque composant a été pensé flexible dès le départ

Les inconvénients

• Contrairement à la méthode traditionnelle, nous n’avons pas de résultats rapides sur ce que pourrait donner l’interface finale.

• Le client peut donc ne pas réussir à se projeter, et de fait, être dans l’incapacité de valider les composants au stade d’atomes et molécules.

• Cette méthodologie est plus longue car elle implique de décrire et organiser chaque composant et interaction.

• Il n'y a pas de directives strictes sur la manière de classifier les atomes / molécules / organismes, il est donc possible que d’un designer à un autre l’organisation ne soit pas la même.

En bref

La différence entre un fonctionnement « traditionnel » et l’atomic design se trouve donc dans l’ordre de conception de l’interface :

Dans une méthode traditionnelle l’interface était d’abord conçue dans son ensemble pour ensuite en sortir les éléments récurrents. Aujourd’hui, nous commençons par les éléments clés pour ensuite définir l’intégralité de l’interface.

Cette succession d’étapes n’est évidemment pas linéaire ni rédhibitoire, nous pouvons facilement retourner à l’étape d’atome ou de molécule lors de la mise en place d’une interface.