Since the creation of the State's design system, DSFR projects have been rolling out one after another! With an eye toward optimization, we are streamlining its use by integrating the DSFR into a Drupal starter theme.
The French government manages more than 20,000 sites, with state services (Ministries, Prefectures, Central Administrations) on one side and the organizations attached to them (EPA or EPIC) on the other. In the interest of harmonization, the Government Information Service (SIG) created a design system in 2021.
Design system for the State, what’s that?
A design system is a library of ready-to-use graphic components, available to designers and developers to achieve a common interface for all government-related sites. They are available to designers through two libraries (Sketch and Figma) and to developers through HTML-CSS packages on GIT and NPM.
More specifically, it includes:
- The fundamentals of the State’s identity (colors, use of colors, typography);
- Technical fundamentals (spacing, grid and breakpoints, media, icons, favicon, shadow and elevation system, pictograms);
- Components (search bar, button, checkbox, card, quote, footer, back to top, table of contents);
- Functional blocks (form, email address, phone number);
- Templates (account creation page, login page, error pages).
The creation of the design system has made it possible to:
- Improve the digital relationship between the State and citizens by making the interface a benchmark for quality and trust;
- Improve users’ browsing experience;
- Achieve an estimated 40% time savings when creating and managing sites;
- Ensure compliance with ergonomic and accessibility standards and good HTML-CSS practices;
- Establish the foundations of a glossary of French professional terms that previously existed only in English.
As an authority figure, the State implicitly formalizes a new way of naming components in French for all web stakeholders.
Getting started with DSFR to meet our clients’ needs
Since the design system was introduced, several government-related entities have contacted bluedrop.fr to create or redesign their sites—an opportunity for them to comply with the new standards and for us to get familiar with them.
For example, this year, we redesigned the Maritime Boundaries Portal for the Government and Shom to introduce new features and comply with the new regulations.
Site link: limitesmaritimes.gouv.fr
A first project that allowed our designers to get to grips with the design system and our developers to change the way they develop (using the library provided by DSFR).
Since then, projects have multiplied. We are currently working on:
- The creation of the ODDS website (Departmental Observatories of Social Dialogue), present in every department.
- The redesign of the Anact site, the National Agency for the Improvement of Working Conditions.
- The redesign of shom.fr, the public operator producing authoritative maritime and coastal geographic information.
Even though we can’t reveal everything just yet, we wanted to give you a sneak peek of the future ODDS site, currently in pre-production.
Pretty cool, right? To discover the other projects, stay tuned!
Combining DSFR and brand identity
Because innovation always brings its share of challenges, we have faced several issues. Especially this one: How do you redesign the interface of strong, well-established brands that rely on their current brand image?
While this question doesn’t arise for State services, it is critical for public institutions and national agencies reporting to the State (like Onisep and Anact, for example).
This was an aspect we had to integrate into the support we provide our clients. So, to combine brand and DSFR, we offered several levels of integration of the design system: full, partial, or very limited. To do this, we show three different graphic options, so they can visualize the possibilities.
Industrializing the design system with a dedicated Drupal starter theme
Given our customers’ growing demand to update their sites according to DSFR, bluedrop.fr is industrializing its way of working. Concretely, we are working on creating the bluedrop.fr DSFR kit, composed of a Figma starter theme and a Drupal starter theme.
This is a ready-to-use base theme that provides a starter structure with basic configuration, CSS styles, and preconfigured template files, such as the header, footer, navigation, etc. It is designed based on the components defined by DSFR.
This approach meets several objectives:
- An aim to simplify: the theme development process by providing a consistent foundation from which the site’s look can be customized within the DSFR framework.
- An aim for flexibility, modularity, and autonomy: for integrators regarding backend development. We aim to practice atomic integration—in other words, break down functionalities into reusable atomic elements (header, button, form, module, etc.) to allow the greatest possible content management freedom.
- An aim to optimize: save time and energy, which is significant for all other organizations dependent on the State that may need to create or redesign their websites.
If you have a project constrained by DSFR with Drupal, we’d be delighted to help! Contact us to discuss your project and answer your questions.