Why Design
Systems fail?

Introduction

Le 30 avril 2019, Una Kravets présente une conférence sur les design systems. Etant Google Expert Developper, elle nous explique son expérience dans le domaine, les points forts et les points faible d'un Design System et les raisons qui nous pousse à en faire un. Par groupe de 3, nous avons rédigé un compte rendu de la conférence qui reprends ses points importants.

Una kravets sur scène qui présente sa conférence

Qu’est-ce qu’un Design System ?

1. Définition

Un Design System est un guide complet pour la conception d’un site. C’est une série de règles, principes, contraintes. L’élément clé d’un Design System est souvent une librairie de composants d'interface utilisateur. Il varie d’un projet à l’autre, le tout avec une approche modulaire. Il favorise l’organisation, l’unité (graphique, de code), la stabilité et réutilisation de code et style. Il fournit un langage commun entre les designers et les développeurs. Un Design System est unique même si il comporte souvent les même éléments.

« Code = 10%, Design = 10%, Équipe de projet = 80%. » 

Una Kravets

2. Pourquoi faut-il passer du design de pages à un Design System ?

Passer du design de pages au Design System est une nécessité dans le futur ! La modularité du code et de ses composants est nécessaire à la création d’un design résiliant, cohérent, s’adaptant. C’est à dire un graphisme qui puisse s’afficher sur tous les types de support quel qu'en soit la génération de l’appareil. Cela permet de voir le graphisme et le développement comme une manière systématique de créer un site web. C’est une méthode de travail, il est intelligent de l’adopter.

 « Nous sommes maintenant en transition d’une culture orientée objet à une culture orientée système. Ici le changement émane, pas des choses, mais de la manière dont elles sont faites. » 

Jack Burnham, 1968

3. Les éléments qui composent un Design System

3.1 Design graphique

Référence de plusieurs styles graphiques ( Couleurs, typographies, espaces, formes, iconographie, illustrations, photographies, animations, sons ) grâce aux “Style Guide” ou “Pattern Library”. Elle permet de donner une apparence aux composants.

Image pour décrire le design graphique

3.2 Composant

Les composants matériels sont des blocs de construction interactives pour créer une interface utilisateur. Des avatars, cartes et dialogues sont seulement quelques exemples de composants.

Image pour décrire les composants

3.3 Le code

Image pour décrire le code

Des méthodes et des guides

Un Design System comporte généralement aussi des guides et méthodes. La méthode BEM est un exemple de méthode que l’on utilise pour le CSS (un langage qui gère le style de la page). Celui-ci a la même philosophie qu’un Design System. Le but de celle-ci est d’éviter le plus possible les répétitions. En CSS, il arrive qu’on donne des propriétés à plusieurs éléments. Pour éviter de répéter ces propriétés on essaye de les inclure dans des groupes.

Schéma d'un design system

Ici, l’en-tête du site est un bloc appelé “head block”. A l’intérieur de celui-ci, d’autres blocs sont présent. Dans ces “blocks”, il y a des éléments.

AirBnb a mis en place un guide pour les développeurs. Hébergé sur GitHub, il est contient des consignes à suivre. Des consignes pour savoir comment coder. Ici par exemple il faut utiliser une syntaxe littéral pour la création d’objet. Traduit dans plusieurs dizaines de langue, il est aussi utilisé en dehors d’AirBnb.Mais cela ne reste qu’une partie d’un Design System.

Guide du airbnb

Il existe d’autres guides, notamment un guide d’utilisation. Celui-ci explique ce qu’y est autorisé et ce qu’il ne l’est pas. Que ce soit pour le graphisme ou pour l’aspect technique. Ce sont des consignes qu’il faut impérativement suivre.

IBM Watson a une liste exhaustive de consignes qu’il faut respecter afin de ne pas commettre d’erreurs sur un site. Par exemple, utiliser un bord de 1px pour les publicités.

Pour un Design System abouti, on peut même retrouver une partie dédié à l’animation.

Différents guides existent tel que celui de MailChimp. Il sert à guider les employeurs dans leur manière de parler, le ton à prendre avec les marques.Un guide voice & ton n’est pas impératif. Tous les Design System n’ont pas besoin de ce genre de guide.

Guide du voice_ton

“ We treat every hopeful brand seriously. We want to educate people without patronizing or confusing them “

Désavantages du Design System

Commencer un Design System rime avec une immense motivation mais ce n’est pas la même chose quand il s’agit de le garder à jour ! Les gens ont tendance à facilement perdre la motivation à le maintenir. Si les mêmes Design System sont utilisés par tous les créateurs, les sites finissent tous par se ressembler et tendre vers l’uniformité avec beaucoup de similitudes.

Un Design System n’est pas nécessaire quand il n’y a pas de bénéfice à faire. Une grande partie des designers et développeurs n’ont pas l’utilité de tous les aspects d’un framework. Malheureusement, les utilisateurs doivent toujours télécharger du CSS et du Javascripts non utilisé des frameworks, ce qui finit par être frustrant et provoque des chargements de pages plus lent.

Avantages du Design System

L’atout majeur d’un Design System est son adaptabilité à grande échelle. Souvent utilisé quand le projet est susceptible de grandir, il est simple de modifier le contenu d’un site et de ses fonctionnalités dès qu’il est en ligne.

Icone d'un livre ouvert

Guide pour réaliser un Design System

1. Comment réaliser un bon Design System ?

Investissement

Il faut des personnes entièrement dédiées au Design System qui sont en charge de leur réussite et de leur efficacité continu. Il faut un investissement régulier.

Communication

La communication est très importante, elle doit être multi-directionnelle. Le but est de communiquer entre le plus de gens possible. Plusieurs points important doivent être respectés. Il faut poser des questions, c’est la base de la communication. Ensuite, il faut écouter les réponses des personnes du milieu (développeurs, designers ) et leur faire sentir qu’ils sont entendus. Si leurs avis sont pris en compte, ils continueront à utiliser le Design System et s’investiront.

Une architecture solide

Il faut une architecture solide. Il faut penser que le système s’agrandissent comme un être vivant composé d’atomes, molécules, organismes,...

Des mises à jours fréquente

Un autre conseil est de construire son projet sur un versionnage du système pour garder l’ensemble des versions successives d’un ou plusieurs fichiers. Cela permet de revenir en arrière si besoin ainsi que de faire les mise à jours progressivement.

Une nomenclature adéquate

La nomenclature (class, id, etc ) est également importante. Lorsqu’elle est bien faite, on évite les confusions et problèmes. Elle parle de son expérience personnelle où ses trois Design System avaient les même acronymes. L’important est d’avancer. Il n’y a pas de bons ou de mauvais choix. Partir dès le début sur la simplicité est un bon conseil. Cela évitera à terme les bugs et permet aussi de les résoudre plus rapidement.

2. Différentes étapes pour la création

Conclusion

Un Design System est unique. Chaque Design system possède ses spécificités selon les besoins du projet. Il convient parfaitement pour des projets à grande ambition, qui pourraient éventuellement s’agrandir. Le succès dépend de la communication de l’équipe, somme d’un travail commun, il renforce l’esprit d’équipe.