Vous avez fait toutes les étapes de l'Atomic Design — atomes, molécules, organismes, templates et pages. Mais maintenant, comment aller plus loin ? L’Atomic Design a pour but de réunir toutes les parties prenantes autour d’un produit commun : le design system.
Qu'est-ce qu'un design system ?
Le design system est l’ensemble complet des normes de conception, de documentation et des principes, ainsi que tous les outils pour respecter ces normes.
Voyez-le un peu comme un carton d’un meuble que vous venez d’acheter : il contient tous les outils, les vis, les planches, la notice et les instructions de construction.
Crédit : UX Pin : Design Systems vs. Pattern Libraries vs. Style Guides – What’s the Difference?
Mais on ne parle pas uniquement de design system : à l'intérieur de celui-ci on parle également de guidelines, style guides et autres jargon design...
Nous allons faire le tour de ces termes pour bien les définir. N’oubliez pas que ces termes sont utilisés de façon différente en fonction des équipes dans lesquelles vous travaillerez. Rien ne sert de connaître une définition toute faite, il vaut mieux pouvoir bien les distinguer.
Composant
Les composants c’est tous les éléments qui constituent l’interface. Pour la métaphore du meuble : on parle ici de chaque planche, chaque vis, etc. Quand on regroupe tous les composants, ils forment le style guide.
Crédit : Android Lollipop Material Design UI kit for Sketch
Style guide
Le style guide est un des termes utilisés le plus souvent. Il est le résultat de la conception de nos composants grâce à l’Atomic Design. C’est une documentation qui décrit à quoi doit ressembler notre interface, tout en fournissant les composants et la librairie. En reprenant notre métaphore du meuble, c’est le manuel qui montre tout ce que nous devrions avoir dans le carton pour construire le meuble.
Crédit : Sketch app sources : Style Guide Template Sketch Resource
Les styles guides sont très concrets. Partagés, ils facilitent grandement la communication et définissent un vocabulaire commun entre toutes les parties prenantes du projet pour les éléments que vous avez utilisés. En plus des composants, on y trouve également les choix de typographie, couleurs, les grilles d’espacements et les icônes.
Guidelines
La guideline définit comment utiliser notre design system. L’objectif est de rendre le design system accessible à tous pour une meilleure communication et compréhension. Pour la métaphore, c’est la notice qui décrit étape par étape comment faire pour construire le meuble, les instructions de construction.
Pour conclure, en parlant de design system on parle bien de tout ce qui englobe notre design.
Est-ce qu’on a vraiment besoin de tout ça ?
Encore une fois, cela dépend de vos objectifs et votre ambition. Voici donc une liste d’arguments pour ou contre créer un design system :
Les + :
Revendiquer son identité sur le web.
Être libre de tout changement.
Peut devenir une nouvelle référence/norme.
Prouve la maturité de l’équipe/entreprise.
Les - :
Beaucoup de travail et de temps.
Demande des ressources humaines suffisantes (beaucoup).
Difficile à mettre en place avec beaucoup de profils différents.
Très difficile à mettre en place lorsque l’entreprise a déjà beaucoup de contenus.
N’oubliez pas que le design system est un moyen de collaborer avec le développeur afin de garder une cohérence avec tout ce qui est produit en ligne.
Comment mobiliser ses livrables ?
Comme on l'a vu dans le chapitre précédent, la sélection des outils se fait en fonction de votre contexte de travail. Et sachant que vos livrables dépendent de ces logiciels, vos livrables sont également à prendre en compte dans votre organisation. D'autant plus que les pages statiques ne sont plus un livrable suffisant dans la conception d’interface, il faut donc que vous vous familiarisez avec d’autres types. En général, vos interlocuteurs s'attendent à avoir : des délais, de l’organisation, de l’information (organigramme) et des rendus de vos interfaces avec des explications, car malheureusement les interfaces ne parlent pas d’elles-mêmes...
Les développeurs s’attendent à avoir des interfaces avec des specs. Cela se résume aux données informatiques de vos interfaces :
Les couleurs : hexadécimal et pourcentage d’opacité.
Les textes : taille, type (regular, italic, bold), la police, l’alignement (droite, centre, gauche). L’espacement entre les lettres et entre les lignes.
Les espacements et grilles pour le positionnement des éléments.
Les assets, ce sont les fichiers pour les icônes (SVG, PNG, etc). Il existe de nombreuses façons d’exporter vos icônes, arrangez-vous avec les dev pour savoir ce qui est le plus pratique pour eux.
Les commentaires sur les interactions/animations (faites les animations ou bien expliquez-les à l’écrit), comme livrables vous pouvez très bien rendre des petites animations en GIF.
L'enchaînement des pages. Pensez à toujours bien nommer vos pages pour que vous puissiez facilement expliquer vos cas d’usage. Le prototypage est également une bonne façon d’illustrer cela (attention, tout le monde n’est pas à l’aise avec les prototypes surtout si vous les laissez les utiliser seuls). Pour ce rendu, vous pouvez faire ce qu’on appelle un User flow. Pour en savoir plus sur ce sujet, tournez-vous vers ce cours sur l'architecture de l'information.
Crédit : L'outil FlowMapp permet de créer des user flow
Pour l’ensemble des livrables, vous pouvez très bien utiliser un logiciel tel que InVision ou Zeplin. Vous pouvez également faire un fichier Excel avec chacune des étapes de l’Atomic Design.
De manière générale, vous gagnerez beaucoup en crédibilité si vous maîtrisez le temps de réalisation de chacun de ces livrables. C’est extrêmement important d’apporter le plus d’informations possible aux développeurs, vous gagnerez beaucoup de temps plutôt que de leur expliquer à l’oral pour chacune des interfaces. Plus vite vous aurez les interfaces développées et en ligne, plus vite vous pourrez entrer dans le détail et améliorer vos designs.
En résumé
Alors, qu’est-ce que l’on a appris dans ce chapitre :
Le design system est un produit à part entière qui donne toutes les clés du design de votre application et/ou site web. Il est long et difficile à mettre en place mais prouve une maturité.
Dans le design system, il existe de nombreux autres outils que vous pouvez réaliser individuellement. La conception des éléments d’une interface graphique par l’Atomic Design donne pour résultat le style guide.
Soyez à l’écoute de vos collaborateurs pour leur fournir le livrable qu’ils souhaitent et ainsi faciliter la communication.
