Tester, rationaliser, factoriser et produire dans un environnement agile et évolutif sont les principes fondateurs d’un design system.
Services
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.
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 :
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.
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.
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 :
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.
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.
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 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 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 :
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.
Nous vous accueillons dans notre agence, au cœur de Paris pour parler de votre projet.
Notre équipe se fera un plaisir de vous écouter autour d’un café !