Design system & atomic design

Le design system est le fruit d’une problématique qui caractérise notre système économique : la productivité. Produire toujours plus vite et à moindre coût. Il en résulte un besoin d’industrialiser les différents processus de production.

Dans le design d’interface, l’amélioration de la productivité se traduit par la création de nouvelles méthodologies de conception : entre autres, l’atomic design et le design system.

Le design system est l’évolution de la charte graphique. Un document de référence constituant une interface et/ou un produit. Dans un environnement agile, les modifications et les évolutions sont nombreuses et la nécessité de créer un design system “vivant” est devenu primordial. L’atomic design est né de ces différentes problématiques : l’amélioration de la productivité et la création d’un écosystème agile. L’atomic design est une méthodologie et une organisation qui permet, entre autres, la création d’un design system évolutif.

Tester, rationaliser, factoriser et produire dans un environnement agile et évolutif sont les principes fondateurs d’un design system.

Tester, rationaliser, factoriser et produire dans un environnement agile et évolutif sont les principes fondateurs d’un design system.

Design system

Le design system est un guide et une bibliothèque permettant la création de tout type d’interface et produit digital. Ce type de système se fabrique en composant un ensemble d’éléments formant des fonctionnalités. La librairie rassemble l’intégralité de ses composants et permet aux différents services d’un produit de piocher et de concevoir composant par composant. 

Un design system doit parfaitement retranscrire l’identité d’une marque et/ou d’une entreprise. Un design system est généralement composé de :

• Guidelines ergonomiques, fonctionnelles et visuelles
• Composants 
• Identité, typographie, iconographie, couleurs 
• Grilles de mise en page
• Guidelines ton et langage

Un design system est conçu et maintenu par l’équipe produit, son développement est long et fastidieux. Afin de concevoir ce document il faut avoir une vision globale sur l’entreprise et non pas sur un produit. De plus, tout comme un site en ligne, un design system se maintient et évolue en suivant les tendances. De ce fait, ce type de système se veut être évolutif voire organique. Pour répondre à ces critères de conception, il y a l’atomic design.

Atomic design

L’atomic design est une méthode de design par composants, elle a été créé par Brad Frost.  

Ce dernier part du constat que les supports ont évolués, nous sommes passés du livre à l’interface mais que nos méthodologies n’ont pas évolués. Un produit digital fait parti d’un écosystème dans lequel se trouve de multiples composants pour de multiples supports. 

Avec l’atomic design nous devons réfléchir de façon macro à un produit. 

Cette méthode de conception par composant est celle que les développeurs utilisent. Ainsi, la passation entre le développement et le design devient évidente. 

Un atomic design est un ensemble d’atomes composant des molécules qui elles-mêmes forment des pages.

Un atome est un élément graphique, qui dans un logiciel de conception fait référence à un style (typographie, couleurs, iconographies etc). 

Une molécule est un ensemble d’éléments graphique, par exemple un bouton (fond et texte).

Ces molécules, une fois assemblées, permettent la création d’une fonctionnalité : un organisme. 

Ces organismes sont déployés dans des templates afin de normer la mise en page. Ces templates sont utilisables dans des pages.

Concrètement, travailler en atomic design permet de créer, modifier et faire évoluer très rapidement des maquettes. De plus, concevoir de façon macroscopique un ensemble de composants permet de réfléchir à un produit dans son intégralité, cela correspond à une méthodologie orientée produit. Concevoir un produit en atomic design peut s’avérer être complexe et demande une très bonne compréhension des outils. Dans ce cas, la technicité peut freiner la créativité et augmenter la charge de travail.

Pour résumer, l’atomic design permet de créer un document organique avec une vision macro.

La méthodologie TKT

Chez TKT, pour chaque projet nous concevons des design system avec la méthodologie de l’atomic design. Cependant pour garder notre esprit critique et créatif, nous ne travaillons pas immédiatement en atome. Nous esquissons et réfléchissons par page. Lorsque nous sommes fixés, nous transposons nos éléments en atome et en molécule afin de créer notre design system. Cela permet de :

• Décliner et modifier rapidement le projet même en cas d’absence d’un designer
• Être créatif
• Communiquer les éléments graphiques et fonctionnels par composant aux développeurs
• Garder une cohérence graphique dans la déclinaison de nos éléments
• Avoir une vision produit et respecter le cadrage
• Maintenir facilement nos documents

Pour résumer, le design system est un kit comprenant une panoplie d’outils adaptatifs permettant la création ou l’amélioration d’un produit d’une même entreprise.

Les outils pour concevoir un design system organique

Une fois les objectifs et la méthodologie fixés, réaliser un design reste assez accessible. Il faut être méthodique, rigoureux et connaître un tant soit peu les deux principaux logiciels phares de conception : Sketch & Figma. 

Adobe XD

Nous ne plaçons pas Adobe XD dans ce cadre car selon nous, c’est un logiciel d’esquisse qui permet de prototyper et de produire très rapidement. Mais dès lors que nous devons mettre en place un document complexe tel qu’un design system, XD a des lacunes. En revanche pour le prototypage il domine largement le secteur. 

Sketch

Sketch est un logiciel de conception orienté atomic design, son workflow se rapproche de celui d’un développeur. En effet, ce logiciel nous pousse très fortement à créer des symboles, qui sont en réalité des composants (un assemblage d’atomes et de molécules). 

C’est un outil accessible et facile d’utilisation  mais il peut devenir très complexe à utiliser avec notamment l’imbrication de symboles. Malheureusement, Sketch a pris des directives qui ne facilitent pas la création et la maintenabilité d’un design system, la gestion des styles est laborieuse, notamment celle des styles typographiques. Monter un design system propre et rapidement c’est possible mais cela demande une charge de travail conséquente. 

Figma

Figma c’est le logiciel phare de cette année, il se positionne entre sketch et XD. Il permet à la fois de prototyper rapidement et également de créer des design system complexes. 

Chez TKT nous sommes complètement conquis par ce logiciel et nous avons délaissé Sketch pour plusieurs raisons : 

• Il répond aux différents problèmes que nous rencontrons sur Sketch, la gestion des styles est parfaitement maîtrisé
• Le système de composant est suffisant 
• Les développeurs peuvent accéder au fichier par une URL dynamique en tant que viewer
• Le prototypage / animation est largement suffisant pour notre secteur d’activité
• Les plugins facilitent le workflow
• La gestion des erreurs est tout bonnement une pépite. Il n’est plus possible de créer 100 nuances de gris dont 67 ne sont pas référencés comme un style. Figma pousse les utilisateurs à utiliser les styles. Les déclinaisons sont donc beaucoup plus “propres”.

Résumé

Pour réaliser un design system évolutif et organique, il est important de définir les objectifs et les enjeux dès la phase d’idéation du projet. Cette dernière permettra de définir les méthodologies et le logiciel à employer. Un design system accessible par toute une entreprise devra être très strict, explicatif et peu flexible contrairement à un design system pour des designers. Le mieux est de vous faire accompagner par une agence experte en design system.