Introduction
Le 30 avril 2019, Una Kravets présente une conférence sur les design systems. Étant Google Expert Developper, elle nous explique son expérience dans le domaine, les points forts et les points faibles d'un design system et les raisons qui nous poussent à en faire un. Par groupe de 4, nous avons rédigé un compte rendu qui reprend les points importants de la conférence
Enfin, si vous êtes intéressés par le processus de ce travail. Quelles ont étés les difficultés survenus durant le travail, vous pouvez lire mon étude de cas.
Comment réaliser un bon Design System ?
Comment le faire durer ?
Quels sont les points importants à garder en tête ?
Consultez le "how-to" d'un Design System.
Notre compte rendu
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 s'il comporte souvent les mêmes é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. »
Les éléments qui composent un Design System
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.
Composant(s)
Les composants matériels sont des blocs de construction interactifs pour créer une interface utilisateur. Des avatars, cartes et dialogues sont seulement quelques exemples de composants.
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”. À 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. Ic, par exemple, il faut utiliser une syntaxe littérale pour la création d’objet. Traduit dans plusieurs dizaines de langues, 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ée à 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 lents.
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 par tous
- — Accélère la vitesse de création du site
- — Permets un dialogue entre développeurs et graphiste
- — Une meilleure expérience utilisateur
- — Un esprit d'équipe renforcé
Étude de cas
Étude de cas
Tout commence avec un tableur
La première chose que nous avons fait est choisir une conférence. Nous nous sommes tournés vers un sujet qui nous était totalement inconnu, le Design System. Le but est de s’informer sur ce qu’il se fait dans le milieu du web. Après avoir tous visionné la conférence en son intégralité, nous avons ensuite rédigé un premier résumé.
Les complications commencent.
Notre premier jour de workshop commence. Le résumé rédigé, nous décidons donc de le faire lire au professeurs chargé de nous aider. C’est ici que nous commençons à avoir quelques complications.
Même si nous avions tous vu la conférence. Beaucoup de notre résumé n’était pas correct, mal traduit ou mal reformulé.
La difficulté ici vient de la traduction d’anglais à français. Etant un domaine assez précis, son vocabulaire va avec. Il est, dès lors, difficile d’extraire du sens en français. Une simple traduction n’est pas suffisante. En plus de devoir connaître son homologue le plus proche du sens du mot, il faut comprendre le sens du mot dans le contexte d’un design system pour pouvoir le traduire adéquatement. Il ne faut aussi pas oublier que beaucoup de mots anglais, n’ont pas leur traduction en français. Il devoir alors compliqué de la formuler dans une autre langue. L’une des solutions est de s’informer ailleurs, mais j’en parlerai plus tard.
Commencer rédiger un texte en français venant d’une conférence en anglais ?
Il n’y a pas de solution miracle. Il faut faire attention aux mots utilisés, vérifier leur définition, vérifier leur sens dans ce que la conférencière souhaite dire. Ce n’est pas un travail que l’on fait d’une étape. Il faut réviser son texte à plusieurs reprises, par plusieurs personnes. Aussi, il ne faut pas négliger le visionnage dans son intégralité de la conférence. Cela permet de comprendre de quoi la conférencière parle mais surtout d’avoir le contexte. Le contexte permet de comprendre pourquoi ces mots sont employés, et donc dans quel sens nous devrions le traduire. En dernier, la chose la plus évidente, c’est d’avoir une certaine connaissance de la langue anglaise. Même si nous avions de bonnes bases, pour ce genre de conférence, ce n’est pas suffisant. Seulement une connaissance poussée est suffisante pour la compréhension sans difficulté de la conférence, ce qui n’était pas notre cas.
La curiosité n’est PAS un vilain défaut
La conférence a été une très bonne source pour commencer à s’informer sur le design system, mais ce n’est pas suffisant. Pour rédiger un résumé, il faut en savoir plus que ce que la conférence nous offre. Il est impératif de savoir de quoi nous parlons. Il est encore plus important dans notre cas de figure. Le design system est complexe, unique, demande une précision dans les termes utilisés. J’en parle car c’est l’un de nos problèmes a été de définir un design system. Il nous a fallu au moins trois reprises pour obtenir une définition complète. Pour en arriver à ce résultat, nous nous sommes chacun informés sur le sujet. Une personne a lu un e-book sur le sujet, une autre a re-visionner la conférence pour avoir plus de détail, tandis que moi, j’ai tenté de formuler une définition depuis d’autres définitions trouvées sur le web.
" A design system is a series of components that can be reused in different combinations. Design systems allow you to manage design at scale. "
Du résumé au compte rendu
Il est nécessaire de faire la différence entre un compte rendu et un résumé. On peut facilement croire que ce sont les même choses. Hors, il est très important de les différencier pour continuer son travail. La consigne était de produire un résumé de la conférence. Cependant, on se sent très vite limité dès lors qu’on comprends que cette personne parle d’un concept. On ne peut se baser que sur cette même et unique personne. Tout d’abord par honnêteté intellectuelle, mais surtout pour produire une rédaction de qualité sur le sujet. Un de nos problèmes était que nous prenions pas l’avis de la conférencière comme une manière de présenter les choses. Etant donné que nous nous sommes renseignés autre part sur le design system, il est important de délimiter les dires de la conférencière et ce qu’est un design system.
Apprendre à travailler en groupe
Dès que nous sommes plusieurs à être sur le même projet, il devient primordial d’apprendre à travailler en groupe.
Cela permet de répartir les tâches et donc ne pas se retrouver avec une personne qui fait le travail. Même si ce travail nous a demandé une certaine partie individuelle (visionnage), il ne faut pas oublier que nous sommes plusieurs. Il faut profiter de cette force pour s’accorder sur ce que nous savons, et donc avoir un travail fourni car étudié par plusieurs personnes. En travaillant à plusieurs, cela nous a aussi permis d’avoir plus de motivation et de persévérance.
Couleur de paragraphe et début du design
Commencer la partie visuelle d’un projet est toujours un peu casse tête (comme une étude de cas d’ailleurs). On ne sait pas ce qu'il faut faire en premier
Par les couleurs ? Il faut alors trouver un aspect visuel adéquat. Par l’aspect visuel ? Il faut d’abord trouver une police qui se marie bien.J’ai donc commencé par la police. La lisibilité me semble être l’un, si pas le point le plus important. Qu’est-ce qu’une police lisible ? Est-ce plus judicieux de choisir une police avec ou sans serif ? Une simple recherche Google permet de répondre à ces questions. Après la lecture du troisième article, une phrase assez clair a répondu à la question que je me posais.
" At small sizes, san-serif works better for body text and regular copy, while serif is appropriate for paragraph headers. "
Il me fallait donc une police sans serif.
C’est la qu’un travail de recherche de typographie peut réellement commencer. Je me suis basé sur quelques critères tel que
- —La lisibilité
- — Le style, l’originalité
- — Une police pas trop populaire/ utilisée
Après avoir trouvé 2 polices, je les aies comparées sur le même document pour en choisir plus qu’une.
Je me suis redirigé vers la police Assistant. J’ai pu, en même temps choisir l’interlignage de mon paragraphe. La suite logique est la mise en place d’un niveau de hiérarchie, et donc d’un titre, sous titre etc. Pour cela, je devais me poser la question suivante : Dois-je utiliser une police différente pour le titre ? Cela depend de chaque police, ce n’est qu’une question de test. Après donc quelques tests, j’ai décidé de choisir une seule et même police pour tout le contenu.
Ne pas brûler les étapes
Après avoir commencé l’intégration de mon site, je me suis rendu compte d’un problème. J’ai effectivement une seule police que ce soit pour mon menu, mon contenu, mes titres. Cependant j’ai oublié un détail qui va me reconsidérer l’idée d’autres polices. La police ne possédant pas de variation italique. Il devient compliqué d’avoir des citations sans la version italique de la police. Je dois donc penser à une autre police en version italique. En allant trop vite, on peut oublier certains détails, bruler des étapes. J’ai tout de même un avantage. Je peux directement faire les essais de typographie sur mon site.
Créer un Design System
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êmes 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.
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 feed-backs, 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.