Skip to content Skip to footer

Le design atomique par Brad Frost

B

Beaucoup de choses ont été dites sur la création de systèmes de conception, et une grande partie se concentre sur l’établissement de bases pour les couleurs, la typographie, les grilles, les textures et autres. Ce type de réflexion est certainement important, mais je m’intéresse moins à ces aspects du design car ils sont finalement subjectifs. Récemment, je me suis davantage intéressé à la composition de nos interfaces et à la manière dont nous pouvons construire des systèmes de conception de manière plus méthodique.

« Nous ne concevons pas des pages, nous concevons des systèmes de composants. »

Stephen Hay

En cherchant de l’inspiration et des parallèles, je revenais sans cesse à la chimie. L’idée est que toute matière (qu’elle soit solide, liquide, gazeuse, simple, complexe, etc.) est composée d’atomes. Ces unités atomiques se lient pour former des molécules, qui à leur tour se combinent en organismes plus complexes pour finalement créer toute matière dans notre univers.

De même, les interfaces sont constituées de composants plus petits. Cela signifie que nous pouvons décomposer les interfaces entières en blocs de construction fondamentaux et travailler à partir de là. C’est l’essentiel de l’Atomic Design.

Qu’est-ce que l’Atomic Design?

L’Atomic Design est une méthodologie pour créer des systèmes de conception. Il y a cinq niveaux distincts dans l’Atomic Design :

  • Atomes
  • Molécules
  • Organismes
  • Modèles
  • Pages

Explorons chaque étape en détail

Atomes

Les atomes sont les blocs de construction de base de la matière. Appliqués aux interfaces web, les atomes sont nos balises HTML, comme une étiquette de formulaire, un champ de saisie ou un bouton.

Tableau périodique des balises HTML

Molécules

Les choses deviennent plus intéressantes et tangibles lorsque nous commençons à combiner des atomes. Les molécules sont des groupes d’atomes liés ensemble et sont les plus petites unités fondamentales d’un composé. Ces molécules prennent leurs propres propriétés et servent de colonne vertébrale à nos systèmes de conception.

Organismes

Les molécules nous donnent des blocs de construction avec lesquels travailler, et nous pouvons maintenant les combiner pour former des organismes. Les organismes sont des groupes de molécules réunies pour former une section relativement complexe et distincte d’une interface.

Modèles

À l’étape du modèle, nous abandonnons notre analogie chimique pour utiliser un langage qui a plus de sens pour nos clients et notre résultat final. Les modèles sont principalement constitués de groupes d’organismes assemblés pour former des pages. C’est ici que nous commençons à voir le design se concrétiser et à observer des éléments comme la mise en page en action.

Pages

Les pages sont des instances spécifiques de modèles. Ici, le contenu de remplacement est remplacé par du contenu représentatif réel pour donner une représentation précise de ce que l’utilisateur verra finalement.

Pourquoi l’Atomic Design?

L’Atomic Design fournit une méthodologie claire pour créer des systèmes de conception. Les clients et les membres de l’équipe peuvent mieux comprendre le concept des systèmes de conception en voyant les étapes devant eux.

Lectures complémentaires

Andy Clarke a longtemps préparé le terrain pour ce type de conversations. En fait, il a écrit un chapitre pour le livre Smashing Book 3 intitulé “Becoming Fabulously Flexible: Designing Atoms and Elements.” Je vous encourage vivement à le consulter. Je vous encourage également à jeter un œil à son outil appelé Rock Hammer, qui est un excellent moyen de construire une bibliothèque de motifs en utilisant beaucoup de ces principes.

Conclusion

Je suis vraiment enthousiaste à l’idée d’approfondir ces concepts et de développer plus d’outils et de réflexions autour de ces idées. Sachez que depuis la rédaction de cet article original, Brad a écrit un livre intitulé Atomic Design qui explore ce sujet en détail, que vous pouvez acheter en ebook.

Publié par Brad Frost le 10 juin 2013

Abonnez-vous à notre infolettre !