Code Guidelines
1.1 Atomic design
La méthodologie de l’Atomic design est une méthode théorisée et développée par Brad Frost consistant à concevoir des modèles de composants (Design patterns) réutilisables et modulaires pour construire des interfaces complexes s’adaptant à tout type de support.
Son constat est simple : il ne faut plus penser le design par page – le web n’est pas un livre, il n’est ni statique, ni fermé - mais avant tout penser aux fonctionnalités et à un système modulaire, tout comme Google l’a fait avec le Material Design : une bibliothèque de composants qui s’adaptent aux différents supports.
Brad Frost propose donc une méthode basée sur une métaphore biologique permettant de créer des systèmes de composants modulaires s’adaptant à tout type de support. Il définit cinq étapes de conception afin de découper une interface :
- Atoms
- Molecules
- Organisms
- Template
- Page
Atoms
Les atomes d’interface ou éléments de base - par exemple sur une page web : les balises html, animations… etc. - font ressortir l’identité de l’entreprise.
Molecules
Les molécules correspondent à des groupes d’atomes formant une unité, ce sera le formulaire de recherche comprenant label, champ texte et bouton.
Organismes
Les organismes désignent les éléments d’interface complexe et résultent surtout de groupes de molécules et/ou d’atomes. Concrètement, il pourra s’agir d’une liste de produits.
Template (Pour notre Guide de Style nous utiliserons le terme de Layout)
Les template montrent la structure générale du contenu, son squelette, la page finale sans les textes, images… etc.
Page
Les pages contiennent le contenu réel et abouti, c’est la « chair » placée sur le squelette.
En résumé, les Atomes sont la référence de chaque élément qui constitue notre interface. Les Molécules, les Organismes et les Template sont les étapes où nous créons et réutilisons nos composants UI.
Les pages sont utilisées pour vérifier que les composants UI sont capables d’intégrer différentes sortes de contenus.
Suivre cette structure oblige l’équipe à réfléchir attentivement à la composition de chaque partie d’une interface et à définir des composants de manière globale.
Quel sont les bénéfices de l’Atomic Design?
Ci-dessous les principaux avantages d’utiliser l’Atomic Design :
Partager le même vocabulaire et mieux s’entendre avec les développeurs
Un système qui permet aux équipes de mieux collaborer et de faciliter la jonction entre design (UX + UI) et développement. Plus de problèmes d’incompréhension lors de la mise à jour des éléments graphiques. On utilise le même vocabulaire pour désigner les mêmes éléments à tout moment et au sein de toutes les équipes (même logique pour la conception d’une interface jusqu’à son développement).
Une librairie centralisée
L’Atomic design permet de mettre en place les bases d’une seule librairie contenant tous les fichiers de design utilisés au sein du site. Plus de perte de temps à rechercher un élément parmi des dizaines de supports différents.
Structure de fichier plus modulaire
Comme nous divisons chaque composant en parties plus petites, notre code est plus modulaire, réutilisable et facile à comprendre.
Une facilité de mise à jour
Le fait de créer rapidement un Guide de Style et d’utiliser « l’Atomic Design » oblige à garder une vraie cohérence et à ne pas dupliquer les éléments graphiques du projet. En retournant à l’échelle d’un atome ou d’une molécule, on peut simultanément mettre à jour l’ensemble des écrans et ainsi gagner en temps et en productivité.
Une vraie cohérence globale sur les éléments d’interface créés
Ce système modulable permet de faire converger l’ensemble des objets graphiques existants. On part des atomes pour créer de nouvelles molécules, lesquels fonctionnent ensemble et sont intégrés à l’ensemble des pages.
Gagner du temps
Gagner du temps en évitant de décliner tous les écrans de nos applications ou sites web (ou tous les points de ruptures pour du responsive). Faire plus rapidement des tests en environnement réels et affiner ensuite.
Pour conclure, l’Atomic design permet d’avoir une vision de l’ensemble des éléments d’un projet quel que soit son support. Ce découpage favorise la ré-utilisation des éléments. Côté code, il pousse à une meilleure organisation. Côté rendu, il favorise la cohérence du design, met en évidence les éléments similaires et permet de s’interroger sur leur utilité. Enfin cette méthode de conception permet de basculer rapidement entre des concepts abstraits (éléments atomiques) et des exemples concrets (pages).