Un design system est un outil incontournable pour assurer la cohérence et l’efficacité de votre site web. Mais saviez-vous que cet outil peut également contribuer à améliorer considérablement la performance de votre site web ? En utilisant une structure HTML, CSS et Javascript optimisée et des composants réutilisables, un design system bien conçu peut aider à réduire les temps de chargement et à améliorer la réactivité de votre site web. Explorons les avantages d’un design system pour la performance web pour les 3 couches Web que sont l’HTML, le CSS et le Javascript.
Définition d’un design system
Petit rappel pour commencer : un design system est un ensemble de règles, de composants, de modèles et de lignes directrices qui permettent de créer une expérience utilisateur cohérente et de qualité supérieure sur un site web ou une application. Un design system comprend généralement des éléments tels que des composants d’interface utilisateur, des couleurs, des typographies, des marges et des padding, ainsi que des règles pour la façon dont ces éléments doivent être utilisés pour créer une interface utilisateur cohérente.
Il faut bien comprendre qu’il y 2 aspects dans un design system. Cela n’est pas que conceptuel. Il ne s’agit pas que d’une maquette, ou d’un doc de référence. Il s’agit d’avoir un site web
- qui définisse à la foi la charte graphique, les règles de l’expérience utilisateur au travers de texte descriptif et de maquettes graphiques ( généralement le travail d’une agence UX comme notre partenaire l’agence Polux )
- et qu’il serve aussi de démonstrateur de chaque composant au sein du navigateur dans lequel on le consulte. C’est surtout cette partie technique qui va nous permettre d’optimiser et maintenir chaque composant.
Historiquement, c’est le framework Bootstrap qui popularisa cette méthode en présentant ses différents composants dans une interface très documentée depuis 2011.
Avantage d’un design system pour l’HTML
Un design system bien conçu peut aider à optimiser la structure HTML de votre site web en plusieurs façons. Tout d’abord, cela peut aider à définir correctement la sémantique de chaque élément HTML. En d’autres termes, un design system peut aider à garantir que chaque élément HTML est utilisé de manière appropriée et cohérente dans tout votre site web, ce qui facilite la compréhension de la structure de votre site pour les moteurs de recherche et les utilisateurs. Par exemple, le design system de Mozilla offre un guide de style pour l’utilisation de chaque élément HTML et offre des conseils pour aider les concepteurs à comprendre comment utiliser chaque élément de manière appropriée : https://acorn.firefox.com/.
De plus, un design system peut également aider à réduire la complexité du Document Object Model (DOM) de votre site web. Là, c’est plus inhérent à la conception atomique d’un design system : on travaille composant par composant de manière autonome. Dès lors, notre travail (en tout cas celui d’artwaï) consiste à réduire la complexité du DOM au niveau de chaque composant. En limitant ainsi la quantité de code HTML redondant sur votre site web, vous pouvez réduire la taille globale de votre DOM, ce qui peut améliorer les performances de votre site web. Par exemple, le design system de Booking.com a permis de réduire la quantité de code HTML redondant sur leur site web , ce qui a entraîné une réduction significative (30%) de la taille globale de leur DOM et de facto une amélioration de la web performance de leur site : https://booking.design/.
Avantage d’un design system pour le CSS
Comme pour le DOM, la conception par composant permet de peaufiner les feuilles de styles. Là, l’expertise se joue au niveau de la connaissance des propriétés et des sélecteurs CSS. Au vue de l’avancée de l’implémentation de nouveautés CSS, ce qui était écrit avec par exemple 4 ou 5 propriétés peut l’être avec une seule aujourd’hui. Si ce n’est pas le design system qui va faire ce travail, son contexte lui permet de le réaliser de façon sereine ; là encore composant par composant de manière autonome.
L’idéal étant d’avoir un process qui permette au développeur Front End de créer ses feuilles de styles en SCSS et un compilateur CSS (Gulp ou autre) va générer les CSS pour le design system et la prod. L’objectif WebPerf étant de factoriser des feuilles de styles communes et ainsi de limiter à la fois le code et le nombre de requêtes.
Un point d’attention tout de même : gaffe aux redondances CSS générées par la compilation SCSS !
Là où cela devient très intéressant c’est dans la maintenance des CSS : fini les fichiers CSS qui grossissent indéfiniment. Votre design system devient la référence de ce qui est. Ce qui n’est plus peut être supprimé car il est beaucoup plus simple de nettoyer le code au travers de composants identifiés.
Avantage d’un design system pour le JavaScript
Au final, le JavaScript dispose des mêmes avantages que l’HTML et le CSS : cohérence et réutilisation du code, amélioration de la performance bien sur mais aussi une collaboration améliorée entre développeurs mais surtout entre UX designer et développeur.
Ce qui change un peu la donne pour le développeur c’est de pouvoir tester le composant dans un environnement isolé des autres composants. Chaque composant dispose de sa propre page de démonstration accessible dans un navigateur ce qui simplifie grandement les tests.
Les outils pour mettre en place un design system
Ils en existent pléthore, mais intéressons nous à ceux qu’artwaï pratique au quotidien.
Pattern Lab
À la base, Pattern Lab est un générateur de site statique alimenté par Node qui assemble des composants d’interface utilisateur. Désormais enrichi, celui-ci permet de définir à l’instar d’un atomic design des modèles d’interface utilisateur les uns dans les autres, comme des poupées gigognes.
Il se veut agnostique de l’outil, du langage ou des bibliothèques que vous utiliserez. Dans les faits, nous l’utilisons surtout pour une infra PHP avec un langage de templating comme TWIG.
NB : Pattern Lab est un projet open source.
StoryBook
StoryBook se décrit comme étant un atelier Front-end permettant de créer des composants et des pages d’interface utilisateur de manière isolée. Il est donc très utile dans le cycle de développement d’une application avec une approche composant : c’est à dire React , Vue ou Angular !
Il est possible de l’utiliser avec d’autres framework mais il faudra alors lui torde le bras et les mises à jours ne seront pas des plus aisées.
Zeroheight
Sans doute celui qui a le plus le vent dans le dos en ce moment. Il n’est cependant pas un outil de création de design system à proprement parler mais un outil de synthèse. Conçu comme un CMS et en incluant les livrables de vos logiciels de création type XD ou Figma et un StoryBook via leurs APIs respectives, il permet de réaliser simplement le travail de documentation de votre design system afin que celui-ci soit accessible par l’ensemble de vos collaborateurs, même les moins techniques. On y retrouve les éléments classiques définissant une charte graphique et les éléments de design digital de manière exhaustive en précisant comme dans les autres outils précédents l’accessibilité, le responsive, les animations, les micro-interactions, etc…
NB : Par contre il est payant.
DIY : Do It Yourself
Certes un peu risqué, cette méthode peu convenir aux petits projets et ceux aux technos un peu originales.
Quelques exemples
Certains sont tellement fiers de leur design system qu’ils le mettent directement en ligne et accessible au public (cela permet aussi de renforcer l’image de marque). Voici quelques exemples.
Malakoff Humanis
Premier exemple, purement technique chaque composant est présenté dans canvas et documenté dans doc. On peut afficher la grille, changer de mode entre light et dark et bien sûr changer de résolution. Ce design system est réalisé avec StoryBook va à l’essentiel mais manque un peu de description introductive pour le onboarding notamment.
https://design-system.malakoffhumanis.com/
Prisme : le design system de Lucca
Réalisé avec ZeroHeight (surcouche de StoryBook plus documentée), ce design system reprend plus de 50 composants et des outils de personnalisation qui traduisent les principes Lucca ( éditeur de logiciels SaaS pour automatiser les processus administratifs et RH dont artwaï est un client satisfait). Forcément chez artwaï, on plussoie la première des 10 règles d’or énoncées :
Les temps de réponse tu vénèreras.
Une page qui s’affiche vite,
c’est une expérience plus fluide.
Que ce soit par l’optimisation d’images,
de chargement ou même d’API,
il ne faut pas faire attendre l’utilisateur.
SNCF Bootstrap
Réalisé avec une solution maison, la SNCF y présente son Bootstrap maison… Tout y est structuré en passant par layout, content, composants, et utilities. Comme quoi il est possible de faire un design system sans passer par une solution sur étagère.
https://design-bootstrap.sncf.fr/
Conclusion
Globalement, un design system prend du temps à mettre en place au démarrage mais c’est un gain de pérennité sur le long terme. Il doit intégrer le process de développement et de maintenance du site. Il permet à des experts webperf comme artwaï d’intervenir plus rapidement sur un composant en particulier. On peut résumer ces avantages en 2 points :
- Développement par composant isolé qui incite a bien les définir et simplifie les tests au travers de tout type de navigateur et viewport.
- Génération d’une documentation qui permet une meilleur communication entre l’UX designer et le développeur mais facilite aussi le onboarding d’un nouvel intervenant.
Bref notre agence web basée à Rennes ne peut que vous encourager, si votre site est un élément essentiel de l’expérience utilisateur de vos clients voire même de vos collaborateurs, à le mettre en œuvre.
Photo de Balázs Kétyi sur Unsplash
