Retour aux articles

Un Design System pour des Sites Accessibles et Éco-Conçus avec Kirby CMS

31 juillet 2024

En 2019, lorsque j'ai entamé mon activité de designer et développeur, j'ai découvert Kirby CMS en cherchant un outil sobre, personnalisable et agréable à utiliser pour mes clients et moi-même. Depuis, j'ai créé une dizaine de sites web, affiné mes pratiques de design et de développement, et développé des plugins. J'ai également conçu un kit d'interface Kirby sur Figma, destiné à prototyper une administration Kirby depuis Figma (voir l'article)

Plus récemment, les notions d'éco-conception et d'accessibilité ont pris une place centrale dans les communautés du design, développement et de la communication. Les institutions se sont aussi saisies de ces enjeux en élaborant des référentiels comme le RGESN et le RGAA.

☝ Comment rassembler tous ces éléments (outils, professionnels, normes) pour créer des sites internet éco-conçus et accessibles avec Kirby ?

Un Design System

Un design system est une notice qui prescrit des pratiques et donne des règles pour permettre à un ensemble de personnes de créer de manière cohérente. C'est un objet vivant qui s'adapte aux outils, aux personnes et à leurs usages. Je vous renvoie vers mon article dans lequel je vous donne un exemple avec la conception de repas 🙂

Concrètement

Ce design system prendrait la forme d'un site internet contenant :

  1. Des composants et des mises en page prêts à l'emploi pour une intégration dans Kirby CMS (templates, snippets, blueprints…)
  2. Des bonnes pratiques sur le SEO, le traitement des images, icônes, vidéos, et l'accessibilité.
  3. Des conseils sur les hébergeurs, les outils d'analytics, et des plugins.
  4. Un fichier Figma rassemblant l'ensemble des composants et mises en page, servant de base pour la conception de sites.

Voici quelques exemples :

Conclusion

Pour le moment, je travaille seul, mais j'ai la volonté d'en faire un outil communautaire.

Petite todo pour la suite :

  • Documenter mes pratiques existantes

  • Explorer d'autre design systems

  • Échanger avec d'autre professionnel pour identifier les besoins