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.
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%. »
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. »
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.
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.
3.3 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.
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.
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.
“ 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.
- - Unifie les styles graphiques
- - Unifie les composants entre-eux
- - Réduis le code inutile ou mal foutu
- - Le code est uniforme et compréhensible
- - Accélère la vitesse de création du site
- - Permet un dialogue entre tous les membres du projet (pont entre développeurs et graphiste)
- - Une meilleure expérience utilisateur
- - Un esprit d’équipe renforcé
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
- - Quelle est l’utilité du Design System ?
- - Il faut fédérer, écouter les avis et en intégrer les feedbacks, cela donnera de l’engouement au projet.
- - Penser à avoir un code simple, lisible et efficace. Le web est désormais utilisé sur tv, tablette et smartphone. Il faut donc penser des composants qui s’adapteront à ces supports.
- - Faut-il intégrer/ obliger l’utilisation d’une grille dans le Design System ?
- - Il faut toujours penser aux interactions et à l’accessibilité.
- - Avoir des guides visuels, des supports ainsi que des documents sur quoi se référer.
- - Les personnes concernées doit encore une fois être mis au courant de tout. L’avancement des mises à jours, si tout va bien.
- - Une communication interne constante. Poser des questions est probablement ce qui constitue le plus le projet.
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.