J'aimerais partager avec vous « Pourquoi j'ai décidé de travailler avec des Design System chez Inovae » et comment ils sont devenus un élément central dans mon processus créatif.

Design System, quésaqo ?

Un Design Sytem est une bibliothèque de composants visuels qui, mis ensemble, vont permettre l'élaboration d'interfaces digitales. Son élaboration s'envisage sur toute la durée d'un projet en fonction des problématiques à résoudre ou des besoins du client. Cette solution va servir de référence tant pour les designers que pour les développeurs et permettre de réduire le temps de maquettage et d'implémentation.

Un Design System propose une approche modulaire du design qui ne se focalise pas sur la page en tant que telle, mais plutôt sur ses éléments qui la composent. La tâche du designer n'est plus alors de simplement produire des "Pages" mais bien des "composants de page". L'arrivée de nouveaux outils comme Sketch vont permettre aux designers de goûter pleinement à tous les avantages qu'offre la création d'un Design System.

 

Design system D8molow
Un aperçu du projet D8mo créé avec un Design System

 

Atouts et avantages

Automatiser des processus de création pour se concentrer sur l'essentiel

Gérer les états

Travailler par élément et non plus par page va permettre un travail plus abouti au niveau de l'interactivité. En effet, une approche modulaire permet de mieux prévoir les états des boutons (hover, disable etc.) mais aussi les messages d'erreur, les toasts ainsi que de nombreux éléments de contexte qui ne sont que rarement affichés de base sur une maquette.

Button states
Différents états prévus sur les toast et les boutons

Ne designer que les exceptions

L'utilisation d'un Design System va réduire le temps de design et d'implémentation tout au long du projet. Le graphiste conçoit une seule fois chaque élément, qui sera ensuite réutilisé tout au long des pages. Le gain en productivité est énorme et cela offre une flexibilité très appréciable pour répondre aux demandes de modification. En effet, chacun des changements sur un élément se répercutera sur l'ensemble des pages où cet élément apparaît, éliminant de fait le fastidieux travail de mise à jour individuelle de chaque maquette.

En cela, un Design System est à l'opposé du system "Page par page" qui force le designer à travailler de manière linéaire chaque maquette.

Exemple: il est demandé de mettre à jour le logo dans le header d'un site qui comprend 60 pages finalisées.

Avec le page par page → Remplacer le logo autant de fois qu'il est présent sur les maquettes ( = 60 fois)
Avec le Design System → Remplacer le logo sur l'élément "Header" ( = 1 fois)

Symbols and pages

Designer dans une logique de dev

Le design, s'il est adapté aux besoins du client, ne doit jamais l'être au détriment de l'implémentation. Les développeurs doivent être impliqués dès le commencement de l'élaboration du Design System pour apporter leur expertise sur la faisabilité de certaines combinaisons de modules. Un Design System conçu en équipe et en bonne intelligence apporte cet environnement sécurisant au designer qui peut créer dans une logique proche de celle des développeurs. L'implémentation s'en trouve, de fait, grandement facilitée.

La construction du Design System

Se lancer

Concevoir un projet avec un Design System, c'est faire le choix du modulaire. C'est aussi une décision qui implique la participation de l'ensemble de l'équipe. En effet, un Design System se conçoit par tous et nécessite la participation de chacun pour bien fonctionner.

Il n'est pas toujours facile de savoir par où commencer mais voici quelques clés pour vous lancer.

Les composants

Un bon début peut consister à lister tous les composants qui vous sont familiers et qui feront partie de votre Design System (boutons et états, carte, banner, carousel, key numbers, quote, etc). Cette liste vous servira de pense-bête et sera alimentée tout au long du processus de production.

Les pages

La phase de conception va permettre ensuite d'élaborer les grands templates du projet : homepage, landing page, page de details, search...

Au fur et à mesure que ces templates se construisent, les composants vont se mettre en place. Chacun doit avoir une fonction précise et ne doit pas varier d'un template à l'autre. Dans ce but, il est tout à fait normal d'effectuer de nombreux réglages entre les composants et les templates. C'est même le signe que votre Design System va dans la bonne direction !

Template page

L'atomic design

Pour apporter de la structure à notre System, l'Atomic Design est là pour nous aider.

Design System

Conçu par Brad Frost, L'Atomic Design est une méthode basée sur la modularité. Elle permet de créer des Design Systems à partir de composants: atomes, molécules, organismes, templates et pages.

Atomic Design

Le but est d'attribuer une fonctionnalité par composants pour obtenir une design hautement consistant sur l'ensemble des pages.

Dans Sketch, la maîtrise des symbols est clé pour rendre le Design System performant.

Un symbol est un élément qui va pouvoir être utilisé simultanément sur plusieurs pages de manière dynamique.

-> Sketch 💎- utilisation des symbols – découvrez les détails en vidéo !

Récolter du feedback

Tout au long de la réalisation des maquettes, il faut régulièrement récolter les feedbacks des développeurs back et front. Une documentation à jour permet à chacun de pouvoir comprendre l'utilisation de chaque composant du système.

Documenter est essentiel pour bien maintenir le système à jour car il a vocation à évoluer dans le temps. InVision est un outil en ligne qui permet de partager des prototypes. Il est d'une grande aide pour permettre à une équipe d'interagir autour de wireframes ou de maquettes. Parfaitement synchronisé avec Sketch, il offre un gain de temps certain au moment de partager un Design System.

Plugin Craft

Craft PLugin

Ce plugin est proposé par l'InVision Lab. Il permet de classer et stocker les éléments du Design System dans une bibliothèque personnelle ou partagée. Il est alors facile de les utiliser pour construire les maquettes un peu comme on utiliserait des Légo pour construire une maison.

Design System Window

Vous l'aurez compris, un Design System va au-delà de la simple bibliothèque de composants. Il demande au designer qui le conçoit de sortir de sa zone de confort et de prendre mieux en considération les aspects techniques. Un bon Design System se conçoit en harmonie avec les développeurs car il doit être une référence pour l'équipe durant toute la durée du projet.

Chez Inovae, nous avons à coeur d’innover, de progresser, et de viser la qualité dans nos processus de développement.

La réalisation de notre Design System nous apporte, au quotidien, de nombreux avantages et gains :

👉🏼 Une productivité accrue
👉🏼  Une grande réactivité sur les demandes de modifications 
👉🏼  Une réduction du temps d’implémentation 
👉🏼  Un temps de maquettage accéléré 
👉🏼  Une meilleure vision technique sur toute la chaîne de production web 
👉🏼  L’alignement des équipes internes 
👉🏼  Un surplus de motivation et la baisse des tâches récurrentes 
👉🏼  Une grande cohérence dans nos processus
👏🏼  La satisfaction de nos clients