Why Design Systems fail ?

Conference

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 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.

separator

Qu’est-ce qu’un Design System ?

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.

fromage

Code = 10%, Design = 10%, Équipe de projet = 80%

separator

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, Systems Esthestics
separator

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.

Style guide
separator

Composants

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.

Composant
separator

Le code

Code
separator

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.

Code BEM

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 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.

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.

Voice & tone

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

separator

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.

separator

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.

separator

Guide pour réaliser 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.

separator

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.

separator

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,...

separator

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.

separator

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.

separator

Différentes étapes pour la création

separator

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.

« L’itération continue, le support et la communication sont les facteurs les plus importants pour la réussite du système. »

separator

Case Study

IOLCE ou le plus long des projets !

IOLCE. est l’acronyme pour “Input Output Lire et Communiquer sur Écran”, contrairement aux autres ateliers auxquelles j’ai pu être confronté, celui-ci prend l’intégralité du quadrimestre pour se finir. L’objectif consiste, à sélectionner une vidéo d’une conférence sur un thème bien précis, la regarder, en faire un compte-rendu et finalement l’intégrer dans un site web créé par nos soins. C’est à ce moment qu’on se pose plusieurs questions du type : « Une conférence en anglais ? ! Catastrophe », « Comment retransmettre correctement les données ? », « Simple ? Mon oeil ! ».

separator

Regroupement des fidèles gueux !

Comme pour chaque projet, nous devons former un petit groupe de 4 vaillantes personnes prêtes à braver l’anglais et les résumés ! Le choix ne fût point très compliqué, mon choix se porta directement sur Elie Durieux et Jérôme Haesen avec qui j’ai l’habitude de travailler. Une 4e personne s’invita dans notre groupe, je n’ai jamais vraiment connu son prénom car elle disparut du jour au lendemain…

La première étape de notre périple fut le choix de la conférence. Celui-ci se porta sur “Why Designs Systems Fail ?” de Una Kravets. Nous décidons donc, chacun de notre côté, de regarder la vidéo et d’écrire communément un résumé depuis un google doc.

Una Kravets
separator

Le Ciel nous tombe sur la tête !

Les premières difficultés surgissent dès le début… En effet, lors de la première correction de notre résumé par Mr Marchal, les fautes furent nombreuses et ce pour diverses raisons.

La principal est le problème de compréhension et de traduction de l’anglais au français. Cela nous posa grandement problème car le thème de la conférence est très précis, les mots choisie par Una sont méticuleux et le sens des tournures de phrases complexe… Ce ne fut pas une partie de plaisir de comprendre le sens des mots dans le contexte du Design system et par la suite trouver une traduction adéquate. Sans compter le fait que certains mots n’offrent pas de solution en français.

Le second soucis de cette conférence est de comprendre de quoi on parle exactement. Una fait référence à de nombreux procédés qui, pour nous, sont complètement inconnus. Cela nous force donc à approfondir nos savoirs en nous renseignent de manières plus précises sur les thèmes secondaires, voir tertiaires évoqués dans le seul but de comprendre le sujet principal !

Resume

Le troisième accro, c’est le temps. Cela nous en demande énormément ainsi qu’une patience de moine pour concrétiser notre résumé. Qu’il s’agisse de regarder pour la sixième fois la conférence, relire pour la millième fois le même paragraphe pour confirmer la tournure de phrase ou bien encore ouvrir le troisième lien d’un sujet pour être sûr de bien comprendre de quoi il s’agit. Tout cela réunit demande beaucoup de temps  !

La quatrième contrainte est de rester concentré sur Una Kravets. Comme dit précédemment, pour bien tout comprendre dans sa conférence, nous avons dû nous renseigner ailleurs. Cela est positif car nous comprenons désormais ce qu’elle veut dire, mais il y a aussi un côté négatif. Malgré nous, on s’éloigne du point primordiale qui est la manière de penser et d’aborder le sujet de Una. À plusieurs reprises, nous supprimons des données car celles-ci ne proviennent pas de sa conférence mais de recherches extérieures.

Resume final
separator

Quelques rayons d’espoirs !

Une fois l’essentiel du résumé finit, sous les conseils de notre professeur, nous peaufinons quelques détails en ajoutant une biographie de la conférencière et en créant une banque d’images pour illustrer notre compte-rendu. Le plus dur nous semblait derrière nous, mais que nenni !

Le Markdown fit son apparition, il s’agit de la deuxième étape de notre projet. Il s’agit d’un langage de balisage qui permet de formater du texte brute de manière simple et efficace pour le rendre en HTML et autres formats. Cette tâche fût plus complexe que prévu, pour créer un bon Markdown nous avons réalisé quelques essaies le temps de comprendre comment utiliser correctement les différentes balises qui le compose. Une fois terminé, nous avons donc la structure hiérarchique de notre compte-rendu.

Markdown

Une fois maîtrisé, il s’avère être un outil fort pratique !

separator

La lumière au bout du tunnel !

La troisième étape de notre projet est la création de notre site web. Celle-ci se divise en plusieurs phases la première étant la couleur de paragraphe !

Cette méthode consiste à prendre un paragraphe quelconque et à s’amuser à tester plusieurs polices différentes, à modifier la longueurs de caractères, ainsi que les interlignages et la tailles des polices. Mon choix final se porte sur la typographie “Futura” en corps 16px avec un rapport hiérarchique de 1.414 pour finir sur un interlignage arrondi à 23px.

Couleur

Puis nous nous dirigeons doucement vers le choix du rythme vertical ! Il s’agit d’un procédé qui permet de déterminer le bon espacement entre les différents éléments textuels, qu’il s’agisse des titres, sous-titres, paragraphes, citation, conclusion et bien d’autres. Ainsi que des images et vidéos qui composent notre site.

Sur la partie “smartphone”, je décide de garder un rythme vertical classique en disposant mes éléments l’un en dessous de l’autre. C’est une fois qu’on arrive à la version “tablet” qu’on peut commencer à s’amuser ! Je dispose mes éléments de manières asymétriques afin d’obtenir un aspect dynamique à travers tout mon site. Je place mes paragraphes parfois à droite parfois à gauche, de même avec mes titres et images tout en gardant une cohérence graphique. Ce rythme restera le même pour ma partie “desktop”.

Dynamisme
separator

C’est l’heure du-dududu Code !

Une fois ces deux stades validés, je peux attaquer le code. Grâce aux cours appris en classe, j’ai plus de facilité à créer ce que je souhaites ! Je place de manière plus aisé mes différents éléments de mon site afin de créer ce qui ressemble au plus à mes maquettes. J’ai encore quelque difficulté avec ce qui touche au Javascript mais je m’accroche tant bien que mal !

Html Css
separator

Fin d’un long voyage !

Cet atelier fut le plus éprouvant réalisé à ce jour dans mon option. Un mal qui fait du bien, c’est toujours plus instructif et intéressant d’être confronté à une situation compliquée que simple. On en ressort grandi et fier de ce qu’on a réalisé ! Même si j’ai toujours ce sentiment de : « J’aurais pu faire mieux. ».

Compagnon