Dans un marché digital en constante évolution, les attentes en matière de design sont toujours plus élevées : fluidité, accessibilité et éco-responsabilité. Pour y répondre efficacement, nous avons développé et industrialisé notre propre Starter theme Drupal qui repose sur un système de design maison, le BDS (bluedrop.fr Design System). Il nous permet d'offrir à nos clients un service de conception ultra-optimisé. Découvrez notre design system, son starter theme et les nombreux avantages qu’il représente pour vos projets digitaux.
Qu'est-ce qu'un Design System ?
Un Design System est une bibliothèque d'éléments de conception réutilisables tels que des composants, des styles, des règles et principes qui permettent, dans le cadre d’un projet numérique, de créer et maintenir une cohérence visuelle ainsi qu’une expérience utilisateur harmonieuse. Concrètement, il comprend tout ce qui est nécessaire pour créer des interfaces : couleurs, typographies, boutons, formulaires, logos, textes, médias, blocs et bien plus encore.
L’approche Atomic Design
Lorsque nous concevons un design system chez bluedrop.fr, nous adoptons l’approche Atomic Design. Cette méthode, développée par Brad Frost, consiste à construire des interfaces de manière modulaire et progressive, en décomposant les éléments visuels en cinq niveaux : atomes, molécules, organismes, templates et pages. Autrement dit, nous commençons par définir les plus petites unités de conception, comme les couleurs, les typographies ou les boutons (les atomes), puis nous les combinons pour créer des composants plus complexes (les molécules et organismes). Cette structuration permet non seulement d’assurer une grande flexibilité et modularité, mais aussi de garantir une cohérence visuelle parfaite sur l’ensemble des interfaces.
L'Industrialisation de notre Design System
Chez bluedrop.fr, nous avons franchi un cap décisif dans l’utilisation des design systems. Nous n’avons pas simplement conçu un design system : nous l’avons industrialisé, pour l’utiliser sur tous nos projets web.
Conçu avec les meilleures pratiques du web et de l’expérience utilisateur, il agit comme base universelle qui accélère considérablement le processus de conception. Ne reste plus qu’à le personnaliser pour refléter l’identité visuelle spécifique de chaque marque.
Plus simplement, avec le BDS (bluedrop.fr design system), nos clients capitalisent sur notre expertise et profitent d’un processus de création optimisé, rapide et économique. Au lieu de consacrer du temps à recréer des éléments standards tels que des boutons, blocs de texte ou cases à cocher, nous pouvons nous focaliser sur ce qui apporte le plus de valeur :
- La personnalisation des composants pour renforcer l’identité visuelle.
- La définition d’une direction artistique attrayante qui valorise la marque.
- L’amélioration de l’expérience utilisateur, en cohérence avec les attentes du public cible.
Le procédé de conception avec le BDS (bluedrop.fr design system)
1 - Personnalisation du design system avec Figma
Nos designers ont utilisé Figma pour concevoir tous les composants et les règles de notre design system. Avec Figma, nous pouvons collaborer en temps réel, ajuster les composants et les organiser dans une bibliothèque centralisée accessible à l’ensemble de notre équipe.
Lorsqu'une organisation nous confie son projet web, nos designeurs personnalisent le design system (le BDS) en s'appuyant sur leur identité visuelle.
2 - Déploiement dans Storybook
Nos développeurs intègrent les composants graphiques avec TailwindCSS et les stockent sur Storybook. Ils utilisent pour cela le plug-in Figma Storybook Connect, une extension de Figma qui permet d’intégrer les composants.
Storybook est un outil open source conçu pour développer, tester et documenter des composants d’interface utilisateur (UI) de manière isolée. Il permet notamment de :
- Créer des composants basés sur du code, utilisables sur différentes plateformes et appareils.
- Visualiser en temps réel les composants dans leur environnement final, assurant une parfaite coordination entre le design et le développement.
- Présenter les composants dans un environnement de développement interactif.
- Montrer différents cas d’usage et exemples d’implémentation des composants.
3 - Intégration de Storybook à Drupal
En intégrant Storybook à notre profil d'installation Drupal, chaque composant codé est immédiatement disponible dans l’environnement Drupal, prêt à être utilisé dans les pages et interfaces.
Combiné au Layout Builder, ce module Drupal qui permet de créer, personnaliser et agencer des pages web en glissant-déposant des blocs, les composants du BDS (boutons, carrousels, listes, etc.) deviennent des blocs prêts à être utilisés. Les équipes éditoriales peuvent alors facilement organiser les contenus et personnaliser les mises en page en utilisant ces composants sans toucher au code.
Les bénéfices d'un starter theme Drupal pour nos clients
- Réduction du travail de développement : Étant donné que nous commençons avec des composants préexistants, le design et le développement avancent plus vite. Pour le client, cela signifie que la durée de leur projet est réduite, accélérant la mise en ligne de leur site.
- Coût réduit : Le temps économisé dans la création de composants permet de baisser les coûts du projet.
- Qualité éprouvée : Le fait que ces composants aient été testés, réutilisés et optimisés au fil de plusieurs projets signifie que les clients bénéficient d’éléments fiables, accessibles et éco-conçus. Cela réduit les risques de bugs ou de problèmes de performance, ce qui est un avantage majeur en termes de fiabilité.
- Personnalisation facilitée : Bien que chaque client ait ses propres besoins visuels, le BDS permet des adaptations rapides, car les composants sont conçus pour être modulables. Par exemple, des changements de couleurs, de typographie ou d’animations peuvent être intégrés facilement tout en conservant les fondations techniques et ergonomiques du BDS.
Et pour notre équipe :
- Diminution des tâches répétitives, communes à tous les projets, sans grande valeur ajoutée.
- Concentration de l'énergie de l'équipe sur les développements complexes, qui apportent de la valeur aux projets, et du sens au travail.
- Participation à l'amélioration continue de notre starter theme, dans l'intérêt de tous !
Une solution concrète pour des projets digitaux optimisés
En conclusion, l’industrialisation de notre design system, le BDS, représente une avancée majeure pour optimiser la conception et le développement de vos projets Drupal. Grâce à notre approche modulaire, nous offrons à nos clients des solutions qui allient personnalisation et qualité, tout en réduisant les coûts et les délais de mise en ligne.
Prêts à découvrir comment le BDS peut transformer votre projet ? Contactez-nous dès aujourd’hui pour en discuter !
