J'ai lu le livre « Design system handbook » par InVision

Fiches Gobelins déc. 01, 2019

Je viens juste de finir ce livre écrit par Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter, et Roy Stanfield de chez InVision. Ces experts nous donnent les bonnes pratiques à prendre quand on met en place un design system et fournissent plein de conseils pour que cette aventure pleine d'embûches, soit quand même couronné de succès.

Le constat de départ est que nous concevons les interfaces graphiques comme les développeurs concevait les logiciels dans les années 60. À chaque fois que nous travaillons sur une nouvelle fonctionnalité ou une nouvelle application, nous produisons en fait une solution sur-mesure, sans considérer le produit dans son ensemble ou même reprendre des principes généraux de la construction d'interface acquis pendants ces trente dernières années. On repart toujours d'un canevas vierge en se disant que le résultat sera qualitatif et cohérent, car c'est bien connu, l'humain est très rigoureux et sans failles...

Hors, force est de constater que la plupart des applications manquent terriblement de cohérences entre leurs pages et que cela se ressent sur l'expérience utilisateur générale. De plus, les entreprises accumulent de la dette technique et de design, car plus le temps passe, plus le code spécifique s'accumule, plus il devient impossible de maintenir facilement l'application.

La solution de plus en plus populaire et rependu, à ce problème est la mise en place de standards et de briques de base (composants) commune à tous les designers et développeurs d'une même organisation : un design system.

Le livre fait la longue liste des avantages qu'apporte la mise en place de ce dispositif comme l'accélération des processus de design, de test et d'intégration sans accumuler trop de dette technique et de design.

La dernière partie de ce livre concernait beaucoup plus mon sujet de recherche, les auteurs y critique le gros décalage qui réside entre la manière de construire des interfaces graphiques techniquement et la manière de les concevoir avec les outils des designers et propose des perspectives d'évolution de nos design systems.

Première remarque : est-ce que concevoir des interfaces, c'est dessiner des images ?

Figma, sketch, illustrator, photoshop et j'en passe, ne font, finalement, qu'exporter la représentation graphique statique d'une interface au format SVG ou PNG. Pourtant, les interfaces graphiques de nos logiciels ne sont pas statiques, bien au contraire. Elles sont interactives, fluide (elle s'adapte à la taille de l'écran ou de la fenêtre.), elles changent en fonction de l'état de l'application en affichant des données de tailles différentes, etc.

Ces limitations nous empêchent de faire une représentation fidèle du produit que nous concevons et de communiquer correctement aux développeurs nos intentions.

Deuxième remarque : un design system est toujours spécifique aux besoins de l'organisation qui le développe. À quand, une définition globale et standard du design system ?

Ici, le livre propose d'imaginer un format de fichier universel qui décrit les primitives des design system (espacements, bord arrondis, ombres, ...) de la même manière que les fichiers de police de caractères font correspondre à des glyphes, des dessins de ceux-ci.

Ce livre donne beaucoup de références à consulter et je le conseille à tous ceux qui voudrais se lancer dans la construction d'un design system.‌‌‌‌

Rémi Caillot

Je suis étudiant à Gobelins, l'école de l'image en alternance chez Mindsay. Ce blog me sert à parler de mes projets et publier des articles / podcasts