Blog

UI Design

Atomic Design, une méthode de co-création prometteuse

Atomic Design

Chez Backelite, nous questionnons sans arrêt notre flux de travail et nos techniques de co-création pour être toujours plus efficace sans pour autant risquer la qualité et la cohérence d’un projet.

Avec l’augmentation du nombre de sites en responsive web design et les nouveaux principes des applications universelles, notre façon de designer les interfaces évolue. Il existe des écrans de toutes tailles et résolutions, ainsi que des interfaces qui vont au-delà du marché des écrans classiques (cf. HoloLens, Oculus Rift, etc.).
Nous nous sommes donc penchés sur l’Atomic Design, une méthode qui semble correspondre au contexte actuel et futur. Les développeurs travaillent déjà avec des composants, il était donc grand temps que les méthodes d’interfaçage et de développement se rencontrent.

Atomic Design: What is it?

L’Atomic Design est une méthode qui consiste à designer des composants, elle est expliquée en détail par Brad Frost (https://bradfrost.com/).

Atomic Design

 

Cette méthode est née d’un simple fait : une page est un concept tiré des livres et transposé au web. Mais aujourd’hui, designer une page n’est plus d’actualité. On ne peut plus designer une page, en revanche, les éléments d’une interface utilisateur doivent trouver leur place dans un environnement où les tailles varient d’énorme (projeté sur un mur) à tout petit (les écrans des montres connectées).

Votre contenu doit s’adapter partout, car il va partout. — Pour un futur facile pour le web.

Nous devons arrêter de penser en termes d’écrans ou de pages, mais plutôt en termes de composants et de systèmes modulaires. Et c’est ce que fait Google avec le Material Design : une librairie de composants adaptés à des médias variés.

Nous ne designons pas des pages, nous designons des systèmes de composants. – Stephen Hay

L’Atomic Design en détail

L’atome

C’est un élément qui, seul, n’a pas de but fonctionnel. Il est « irréductible », il ne peut pas être divisé et c’est la base de n’importe quel élément d’une interface graphique. Par exemple : un logo, une couleur, un style typographique, un bloc d’image, une icône, un champ de saisie.

Atomic Design

Les molécules

Ce sont des collections d’atomes formant des composants simples d’interface. Les molécules doivent être designées pour être responsives. Il faut définir si elles sont fixes ou fluides et à quelle taille d’appareil elles sont destinées ou non. Par exemple : un label + un champ de saisie + un pictogramme = une molécule de recherche.

 

Atomic Design

Les organismes

Ce sont des combinaisons plus complexes de molécules ou de molécules et d’atomes. Ils permettent d’aider à concevoir l’interface finale. Par exemple : un champ de recherche + une navigation + un logo = un header.

Atomic Design

 

Les templates

L’analogie scientifique s’arrête là. Tous ces organismes seront utilisés pour concevoir des interfaces sur différents médias.

Dans l’Atomic Design de Brad, les templates sont déjà développés en code. Ils peuvent être faux ou réels (par exemple, du lorem ipsum au lieu du texte et des espaces vides dédiés pour les photos ou les icônes). Ils sont là pour vérifier l’organisation et la hiérarchisation des différents organismes créés et tester leur comportement responsive.

Atomic Design

Les pages

Certains templates ont évolué pour devenir l’écran dans la version finale. Tous les espaces dédiés ont été remplacés par du vrai contenu (texte, images, couleurs, pictogrammes, organismes et les molécules finalisées, etc.).

Atomic Design

 

Les itérations entre les atomes, molécules et organismes composant la librairie, les templates et les pages peuvent être nombreuses avant d’atteindre le résultat final (en phase de test et d’apprentissage). C’est pourquoi les équipes de design et d’implémentation doivent travailler en étroite collaboration.

Ce n’est pas « contenu puis design », ou « contenu ou design ». C’est « contenu et design ».

Et la créativité dans tout ça ?

Pour moi, ce système de design n’empêche pas la créativité, bien au contraire…

Nous avons tous le même squelette et la même chair, et pourtant les combinaisons sont infinies et chaque personne est unique.

C’est le travail du designer de définir la bonne typographie, couleur, le rapport hiérarchique et les composants graphiques afin que tous ces éléments s’assemblent parfaitement et aient un but.

Il peut également réfléchir sur l’animation de ces atomes et molécules (comme Google le fait si bien, encore une fois). Et bien sûr, suit le développement (puisqu’il s’agit d’un projet en continu) afin de s’assurer que le résultat final corresponde à la vision partagée par l’équipe.

L’Atomic Design chez Backelite

En tant que concepteurs d’interfaces, nous avons déjà commencé à travailler avec des composants graphiques depuis un moment. Mais généralement, nous les concevons à la fin du projet, pendant la phase de spécifications ou juste avant d’aborder la phase de déclinaison des écrans.

L’idée derrière cette nouvelle méthode est de ne plus attendre qu’un projet se termine pour concevoir une librairie de composants, mais plutôt de commencer par cette étape. C’est encore ce que suggère Brad dans son laboratoire de modèle. Cela permet de mettre en place un cadre commun à tous les nouveaux projets pour que ce cadre évolue avec le design.

Nous avons commencé à tester ces méthodes lors du redesign des formulaires d’inscription pour ING Direct. Nous avons designé les composants indépendamment les uns des autres et les avons rapidement intégrés à la charte graphique afin de les tester dans un environnement général.

Nous allons, bien sûr, partager cette expérience avec vous dans un prochain article.