In a constantly evolving digital market, design expectations are higher than ever: seamless experience, accessibility, and eco-responsibility. To meet these effectively, we have developed and industrialized our own Drupal Starter theme based on our in-house design system, the BDS (bluedrop.fr Design System). This enables us to offer our clients an ultra-optimized design service. Discover our design system, its starter theme, and the many advantages it brings to your digital projects.
What is a Design System?
A Design System is a library of reusable design elements such as components, styles, rules, and principles that, within the context of a digital project, make it possible to create and maintain visual consistency as well as a harmonious user experience. In practical terms, it includes everything necessary to create interfaces: colors, typography, buttons, forms, logos, text, media, blocks, and much more.
The Atomic Design approach
When we design a design system at bluedrop.fr, we adopt the Atomic Design approach. This method, developed by Brad Frost, consists of building interfaces in a modular and progressive way by breaking down visual elements into five levels: atoms, molecules, organisms, templates, and pages. In other words, we start by defining the smallest design units, such as colors, typography, or buttons (the atoms), then combine them to create more complex components (molecules and organisms). This structure not only ensures great flexibility and modularity, but also guarantees perfect visual consistency across all interfaces.
The Industrialization of Our Design System
At bluedrop.fr, we have reached a major milestone in the use of design systems. We didn't just create a design system: we industrialized it to use it across all our web projects.
Designed with the best web and user experience practices, it serves as a universal foundation that greatly speeds up the design process. All that's left is to customize it to reflect each brand's unique visual identity.
Put simply, with the BDS (bluedrop.fr design system), our clients leverage our expertise and benefit from an optimized, fast, and cost-effective creation process. Rather than spending time recreating standard elements such as buttons, text blocks, or checkboxes, we can focus on what brings the most value:
- Customizing components to strengthen visual identity.
- Defining an appealing artistic direction that enhances the brand.
- Improving the user experience, consistent with the target audience's expectations.
The design process with the BDS (bluedrop.fr design system)
1 - Customizing the design system with Figma
Our designers used Figma to create all the components and rules of our design system. With Figma, we can collaborate in real time, adjust components, and organize them in a centralized library accessible to our entire team.
When an organization entrusts us with its web project, our designers customize the design system (the BDS) based on their visual identity.
2 - Deployment in Storybook
Our developers integrate graphic components with TailwindCSS and store them on Storybook. They use the Figma plug-in Storybook Connect, a Figma extension that allows them to integrate components.
Storybook is an open source tool designed to develop, test, and document user interface (UI) components in isolation. In particular, it allows you to:
- Create code-based components that can be used on different platforms and devices.
- View components in real time in their final environment, ensuring perfect coordination between design and development.
- Showcase components in an interactive development environment.
- Demonstrate different use cases and examples of component implementation.
3 - Integrating Storybook with Drupal
By integrating Storybook into our installation profile Drupal, each coded component is immediately available in the Drupal environment, ready to be used in pages and interfaces.
Combined with the Layout Builder, this Drupal module that allows you to create, customize, and arrange web pages by dragging and dropping blocks, the BDS components (buttons, carousels, lists, etc.) become ready-to-use blocks. Editorial teams can then easily organize content and customize layouts using these components without touching the code.
The benefits of a Drupal starter theme for our clients
- Reduced development work: Since we start with pre-existing components, design and development progress faster. For the client, this means their project duration is shortened, speeding up their website’s launch.
- Lower cost: The time saved in creating components allows project costs to be reduced.
- Proven quality: The fact that these components have been tested, reused, and optimized over several projects means that clients benefit from reliable, accessible, and eco-designed elements. This reduces the risk of bugs or performance issues, which is a major advantage in terms of reliability.
- Easier customization: Although each client has their own visual needs, the BDS enables quick adaptations, as the components are designed to be modular. For example, changes in colors, typography, or animations can be easily integrated while keeping the technical and ergonomic foundations of the BDS.
And for our team:
- Reduced repetitive tasks, common to all projects, that provide little added value.
- Focus the team’s energy on complex developments, which add value to projects and meaning to the work.
- Participation in the continuous improvement of our starter theme, for everyone’s benefit!
A concrete solution for optimized digital projects
In conclusion, the industrialization of our design system, the BDS, represents a major step forward in optimizing the design and development of your Drupal projects. Thanks to our modular approach, we offer our clients solutions that combine customization and quality, while reducing costs and timeframes for getting online.
Ready to find out how BDS can transform your project? Contact us today to discuss it!
