Réduire la complexité grâce aux composants Web et à Storybook

Les exigences imposées à un site web moderne sont élevées. Il doit être accessible et compatible avec les lecteurs d'écran, fonctionner de manière fiable sur des centaines de tailles d'écran différentes dans cinq navigateurs, et proposer des contenus en plusieurs langues.

Souvent, le travail est réparti entre plusieurs équipes. Imaginez que trois équipes développent en parallèle le même site web et que chacune crée ses propres boutons, formulaires et éléments de navigation. Même de légères différences au niveau des couleurs, des espacements ou du comportement seront remarquées par vos visiteurs.

Dans le même temps, la charge de travail augmente, car un même composant doit être développé, testé et mis à jour à plusieurs reprises. Un système de conception commun résout précisément ce problème : votre site web donne une impression d’harmonie, sans que l’efficacité n’en pâtisse. 

Les jetons de conception constituent les variables de conception essentielles de votre site web. Les couleurs, les polices et les espacements sont définis en un seul endroit, et toute modification se répercute automatiquement sur tous les composants. Pour créer un nouveau thème, il vous suffit de définir un nouvel ensemble de jetons ; les composants restent inchangés. 

Nous implémentons ces composants sous forme de composants Web. Grâce à la bibliothèque Stencil, ils peuvent être utilisés indépendamment du framework et de la technologie, et s'intègrent parfaitement dans les applications web ou Intégrer un CMS. Qu'il s'agisse de Magnolia, d'une autre plateforme ou d'une application autonome : les composants fonctionnent de la même manière partout. 

Ainsi, toutes les équipes utilisent les mêmes composants, au lieu de les développer plusieurs fois. Chaque équipe se concentre sur ses compétences clés, tandis que l'interface utilisateur est développée de manière centralisée. 

Storybook est un environnement interactif dans lequel tous les composants, avec leurs variantes et leurs états, sont visibles. Vous pouvez y tester les composants et leur comportement sans avoir besoin de connaissances particulières sur Magnolia et sans devoir saisir de contenu au préalable.

Vous pouvez ainsi donner rapidement votre avis sur la mise en œuvre du design, bien avant qu’un composant ne soit mis en ligne. Le contenu et le design sont clairement séparés : le design est validé dans Storybook, puis nous l’intégrons dans votre CMS.

Une seule « story » présente un composant dans tous les thèmes, et il est également possible de simuler directement différentes tailles d'écran. Parallèlement, Storybook sert de documentation permettant à d'autres équipes de comprendre les composants et de les intégrer dans leurs propres projets.

Votre avantage : vous détectez rapidement les divergences, vous réduisez les efforts de coordination et vous disposez d’une documentation toujours à jour. 

Les Design Tokens, les composants Web et Storybook permettent de créer une base commune pour votre site web. Vos équipes travaillent avec les mêmes éléments de base, les modifications sont effectuées de manière centralisée et le résultat présente une grande cohérence. Cette approche s'avère particulièrement payante lorsque plusieurs marques, langues et équipes sont impliquées.