Design atomique

La création de systèmes de design a été au coeur de nombreux débats passionnés. Brad Frost propose ici sa vision, basée sur une comparaison avec les atomes et les molécules.

Par

Avec l'évolution du design web, il devient chaque jour plus nécessaire de mettre au point des systèmes de design bien pensés, au lieu d'accumuler des pages web.

La création de systèmes de design a été au centre de nombreuses discussions. La plupart se focalisent sur l'établissement de fondations pour la couleur, la typographie, les grilles, la texture, etc. Cette façon de penser est certes importante, mais je suis moins attiré par ces aspects du design parce qu'au final ils sont et seront toujours subjectifs. Dernièrement, j'ai été plus intéressé par ce dont nos interfaces sont faites et comment nous pouvons construire des systèmes de design d'une façon plus méthodique.

À la recherche de l'inspiration et de possibles parallèles, je suis revenu à chaque fois à la chimie. L'idée est que toute matière (qu'elle soit solide, liquide, gazeuse, simple, complexe, etc.) est constituée d'atomes. Ces unités atomiques forment des molécules qui à leur tour se combinent en organismes plus complexes pour donner forme à tout ce qui existe dans notre univers.

De façon similaire, les interfaces sont constituées de composants plus réduits. Cela signifie que nous pouvons décomposer des interfaces entières en blocs fondamentaux et construire à partir de ceux-ci. C'est l'essentiel du design atomique, qu'illustre bien à sa façon le tableau périodique des éléments HTML de Josh Duck.

Qu'est-ce que le design atomique ?

Le design atomique est une méthodologie permettant de créer des systèmes de design. Il comprend cinq niveaux distincts :

  1. Atomes
  2. Molécules
  3. Organismes
  4. Templates
  5. Pages

Icônes des cinq niveaux

Explorons chacune de ces étapes plus en détail.

Atomes

Les atomes sont les blocs élémentaires de la matière. S'agissant de nos interfaces web, les atomes sont nos balises HTML, par exemple un label, un input, un bouton.

exemples d'atomes pour la fonctionnalité recherche

Les atomes peuvent aussi comprendre des éléments plus abstraits, comme des palettes de couleurs, des polices de caractères, et même des aspects invisibles d'une interface comme les animations.

Tels les atomes dans la nature, ils sont relativement abstraits et pas vraiment utiles en eux-mêmes. Toutefois, ils peuvent servir de références dans une bibliothèque de modèles (patterns).

Molécules

Les choses commencent à devenir intéressantes et tangibles lorsque nous combinons les atomes. Les molécules sont des groupes d'atomes reliés les uns aux autres, ils forment la plus petite unité d'un élément composé. Ces molécules ont leurs propriétés spécifiques et servent de colonne vertébrale à nos systèmes de design.

Par exemple, un label de formulaire, un input, un bouton ne sont pas très utiles mais la combinaison des trois donne un formulaire qui fonctionne.

Les atomes combinés pour une molécule 'recherche'

Construire une molécule à partir d'atomes nous encourage à “faire une chose et à la faire bien”. Les molécules peuvent être complexes, mais en règle générale elles sont formées de combinaisons relativement simples d'atomes.

Organismes

Les molécules nous fournissent les briques avec lesquelles construire, nous pouvons maintenant les combiner pour former des organismes. Les organismes sont des groupes de molécules que l'on associe pour former une section distincte, et qui peut être complexe, d'une interface.

un header

un header sur une page

Nous sommes de plus en plus dans le concret. Il est probable qu'un client ne sera pas très intéressé par les molécules de notre système de design, mais avec les organismes nous commençons à voir le résultat final de notre interface. Dan Mall, avec qui je travaille sur plusieurs projets, utilise des collages qui articulent des idées à partir de quelques organismes-clés, afin de faciliter les discussions avec les clients en donnant à voir les grandes orientations visuelles - sans avoir à construire de maquette complète.

Les organismes peuvent être constitués de types de molécules similaires ou différents. Par exemple, une barre de titre peut être constituée de divers éléments comme un logo, une navigation principale, une barre de recherche, une liste de media sociaux. Une “table de produits” peut être composée de la même molécule (par exemple l'image du produit, son nom et son prix) répétée encore et encore.

Construire des organismes à partir de molécules nous amène à créer des composants autonomes, transposables et réutilisables.

Templates

Arrivés à cette étape des templates (gabarits), nous allons laisser de côté notre analogie avec la chimie pour reprendre un langage qui aura plus de sens dans nos échanges avec nos clients. Les templates sont constitués principalement de groupes d'organismes soudés ensembles pour former des pages. C'est ici que nous voyons le design prendre forme et notre mise en page entrer vraiment en action.

exemple de gabarit

Les templates sont très concrets et permettent de visualiser nos organismes et molécules abstraits. C'est ici que nos clients commencent à voir le design final se mettre en place. Dans mon expérience, les templates commencent comme des structures HTML et deviennent de plus en plus réalistes jusqu'à devenir le produit final. Bearded Studio à Pittsburgh suit le même process où le design commence avec une première mise en page et gagne lentement en précision jusqu'au résultat final.

Pages

Les pages sont des instances spécifiques des templates. Ici, le contenu devient réel, pour avoir un rendu réaliste de ce que l'utilisateur verra.

le gabarit devenu une page

Les pages représentent le plus haut niveau de fidélité, le plus tangible. C'est à ce niveau que l'on passera le plus de temps dans le process.

L'étape de la page est essentielle car c'est ici que nous testons l'efficacité de notre système de design. Tout voir dans son contexte nous permet, si besoin, de revenir en arrière pour modifier nos molécules, organismes et templates afin de mieux répondre au contexte réel.

Les pages sont également le meilleur endroit pour tester des variations de templates. Par exemple, vous pourriez avoir envie de montrer ce à quoi ressemble un titre de 40 caractères, ou bien ce que donnent 340 caractères. Que se passe-t-il lorsqu'un utilisateur a un seul achat dans son caddie ou quand il en a dix avec un bon de réduction ? Là encore, ces exemples concrets influencent la façon dont nous allons itérer notre construction.

Pourquoi le design atomique

À bien des points de vue, on peut dire que c'est ainsi que nous avons procédé depuis longtemps, sans en être toujours conscients.

Le design atomique fournit une méthologie claire pour construire des systèmes de design. Les clients et nos collaborateurs peuvent mieux évaluer le concept de système de design en voyant le déroulement des étapes.

Le design atomique nous permet de passer de l'abstrait au concret. Nous pouvons ainsi mettre en oeuvre des systèmes qui privilégient la cohérence et l'adaptabilité tout en montrant les choses dans leur contexte final. Et en assemblant plutôt qu'en déconstruisant, nous bâtissons un système dès l'origine au lieu d'ajouter des rustines sur un projet.

Pattern Lab

Pour appliquer cette méthodologie dans mon travail, j'ai créé avec l'aide de Dave Olsen un outil appelé Pattern Lab, permettant de créer ces systèmes de design atomique. Vous pouvez jeter un coup d'oeil à ce que ça donne sur Github.


Lectures complémentaires

Andy Clarke a préparé la voie à ce genre de conversation depuis un moment. En fait, il a écrit un chapitre du Smashing Book 3 intitulé “devenir fabuleusement flexible : atomes et éléments pour le design”. Je n'avais pas idée que cela existait, je vous encourage vivement à lire ce texte, mais aussi à essayer un outil créé par Andy, appelé Rock Hammer, une superbe manière de construire une bibliothèque de patterns en utilisant beaucoup de principes que nous avons vus. Les composants web s'accordent bien avec le concept de design atomique, comme le montre cette vidéo (en anglais). ...et la vidéo de ma présentation (en anglais) sur le sujet à Beyond Tellerand en Allemagne.


original paru le dans le blog de Brad Frost.

Sur l’auteur : Brad Frost est designer web, auteur, consultant, musicien, artiste à Pittsburgh, PA. Vous pouvez lire ses réflexions sur son site personnel et sur Twitter.

Traduit avec l'aimable permission de l'auteur.
Copyright Brad Frost © 2013.