Design System
publié par

Frédéric Pineau
Directeur Technique

Tendance
Lecture 8 minutes

De l’intérêt d’un design system pour la web performance

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 HTML (HyperText Markup Language) est le langage standard utilisé pour structurer et afficher le contenu sur le web. Il définit des éléments comme les titres, paragraphes, liens, images, et autres composants d'une page web. , le CSS Le CSS (Cascading Style Sheets) est un langage utilisé pour décrire l'apparence et la mise en page des documents HTML, en définissant des styles comme les couleurs, polices, marges, et positionnements des éléments sur une page web. et le Javascript JavaScript est un langage de programmation dynamique principalement utilisé pour ajouter des fonctionnalités interactives aux pages web. Il permet de manipuler le DOM, de gérer des événements, et d'effectuer des requêtes asynchrones. .

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 L'expérience utilisateur (UX) désigne la qualité de l'interaction d'un utilisateur avec un produit ou service, en termes de satisfaction, facilité d'utilisation et efficacité. 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

  1. 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 )
  2. 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 Un framework est un ensemble d'outils et de bibliothèques qui fournit une structure et des fonctionnalités préétablies pour développer des applications, simplifiant ainsi le travail des développeurs en offrant des solutions prêtes à l'emploi. Bootstrap Bootstrap est un framework CSS populaire qui facilite la création de sites web réactifs et mobiles. Il offre des composants prédéfinis comme des grilles, des boutons et des formulaires pour accélérer le développement front-end. 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 La sémantique web concerne l'utilisation de balises et de structures HTML appropriées pour donner un sens clair et compréhensible au contenu, facilitant ainsi son interprétation par les moteurs de recherche et les utilisateurs. 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 Le DOM (Document Object Model) est une représentation en structure d'arbre d'un document HTML ou XML, permettant aux développeurs d'accéder et de manipuler dynamiquement les éléments d'une page web via des langages de programmation comme JavaScript. ) 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 La Webperf désigne l'optimisation des performances d'un site web pour accélérer son chargement et améliorer l'expérience utilisateur, grâce à des techniques comme le caching, la compression, et la réduction des fichiers. é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 PHP est un langage de programmation côté serveur utilisé pour créer des pages web dynamiques. Il est largement utilisé pour gérer les bases de données, traiter des formulaires, et générer du contenu HTML. avec un langage de templating Le templating est une technique de développement web permettant de générer dynamiquement des pages HTML en utilisant des modèles préconçus qui sont remplis avec des données lors de l'exécution. comme TWIG.

NB : Pattern Lab est un projet open source.

https://patternlab.io/

StoryBook

StoryBook se décrit comme étant un atelier Front-end Le front-end désigne la partie visible d'un site web ou d'une application avec laquelle l'utilisateur interagit directement. Il englobe l'interface utilisateur, le design, et les éléments interactifs, généralement créés avec HTML, CSS, et JavaScript. 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.

https://storybook.js.org/

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é L'accessibilité numérique garantit que les sites et applications sont utilisables par tous, y compris les personnes handicapées, via des pratiques comme l'utilisation de texte alternatif et la navigation au clavier. , le responsive Le responsive design est une approche de conception web qui permet à un site de s'adapter automatiquement à différentes tailles d'écran (ordinateurs, tablettes, smartphones), offrant ainsi une expérience utilisateur optimale sur tous les appareils. , les animations, les micro-interactions, etc…

NB : Par contre il est payant.

https://zeroheight.com/

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 Une API (Application Programming Interface) est un ensemble de règles permettant à différents logiciels de communiquer entre eux. Elle simplifie l'intégration et l'échange de données entre systèmes. ,
il ne faut pas faire attendre l’utilisateur.

Explorer Prisme

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 :

  1. 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 Le viewport est la zone visible d'une page web dans un navigateur. Il définit la partie du site qui est affichée à l'écran et s'adapte en fonction de la taille de l'appareil, comme un ordinateur, une tablette ou un smartphone. .
  2. 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

Articles similaires