Depuis la création du système de design de l’Etat, les projets DSFR s’enchaînent ! Dans une logique d’optimisation, nous industrialisons son usage par l’intégration du DSFR au sein d’un starter theme Drupal.
L’Etat français gère plus de 20 000 sites, avec d’un côté les services de l’Etat (Ministères, Préfectures, Administrations centrales) et de l’autre les organisations qui y sont rattachées (EPA ou EPIC). Dans un souci d'harmonisation, le Service d'Information du Gouvernement (SIG) a créé en 2021 un système de design.
Système de design pour l'État, kézako ?
Un système de design est une bibliothèque de composants graphiques prêts à l’emploi, à disposition des designers et des développeurs afin d’aboutir à une interface commune pour tous les sites rattachés à l’Etat. Ils sont à disposition des designers via 2 librairies (Sketch et Figma) et des développeurs via des packages HTML-CSS sur GIT et NPM.
Plus précisément, on y retrouve :
- Les fondamentaux de l’identité de l’Etat (couleurs, utilisation des couleurs, typographies) ;
- Les fondamentaux techniques (espacement, grille et points de rupture, médias, icônes, favicon, système d’ombres et d’élévation, pictogrammes) ;
- Les composants (barre de recherche, bouton, case à cocher, carte, citation, footer, back to top, sommaire) ;
- Les blocs fonctionnels (formulaire, adresse électronique, numéro de téléphone) ;
- Des modèles (page de création de compte, page de connexion, page d’erreurs).
La création du système de design a permis :
- D’améliorer la relation numérique Etat/citoyen en faisant de l’interface une référence de qualité et de confiance ;
- D’améliorer l’expérience de navigation des utilisateurs ;
- Un gain de temps estimé à 40 % lors de la création et l’administration des sites ;
- De garantir le respect des normes d'ergonomie, d’accessibilité et les bonnes pratiques HTML-CSS ;
- D’instaurer les bases d’un lexique de termes professionnels francophones qui jusque-là n'existaient qu’en anglais.
Figure d’autorité, l’Etat officialise implicitement une nouvelle manière de nommer les composants en français pour tous les acteurs du web.
Prise en main du DSFR pour répondre aux besoins de nos clients
Depuis l’instauration du système de design, plusieurs entités rattachées à l’Etat ont sollicité bluedrop.fr pour la création ou la refonte de leur site, l’occasion pour eux de se conformer à la nouvelle charte et pour nous, de l’apprivoiser.
Par exemple, cette année, nous avons réalisé la refonte du Portail des limites maritimes portée par le Gouvernement et le Shom afin de mettre en place de nouvelles fonctionnalités et se mettre en conformité avec la nouvelle réglementation.
Lien du site : limitesmaritimes.gouv.fr
Un premier projet qui a permis à nos designers de prendre en main le système de design et à nos développeurs de modifier leur manière de développer (en s’appuyant sur la bibliothèque fournie par le DSFR).
Depuis, les projets se sont multipliés. Nous travaillons actuellement sur :
- La création du site de l’ODDS (les Observatoires Départementaux du Dialogue Social), présent dans chaque département.
- La refonte du site de l’Anact, l’Agence nationale pour l'amélioration des conditions de travail.
- La refonte du site shom.fr, l’opérateur public qui produit l’information géographique maritime et littorale de référence.
Même si on ne peut pas tout vous révéler pour le moment, on tenait à vous donner un petit avant-goût du futur site de l’ODDS actuellement en préproduction.
Sympa, non ? Pour découvrir les autres projets, restez connectés !
Conjuguer DSFR et identité de marque
Parce que la nouveauté entraîne toujours son lot de défis, nous nous sommes heurtés à plusieurs problématiques. Notamment la suivante : comment refondre l’interface de marques fortes, déjà installées et qui capitalisent sur leur image de marque actuelle ?
Si la question ne se pose pas pour les services de l’Etat, elle est centrale pour les établissements publics et les agences nationales sous tutelle de l'Etat (comme l’Onisep et l’Anact par exemple).
Une réflexion qu’il a fallu intégrer à l’accompagnement que nous proposons à nos clients. Ainsi, pour conjuguer marque et DSFR, nous avons proposé plusieurs niveaux d’intégration du système de design : intégration totale, moyenne ou très partielle. Pour cela, nous leur montrons 3 pistes graphiques différentes afin qu’ils puissent se projeter.
Industrialisation du système de design au sein d’un starter theme Drupal dédié
Face à la demande croissante de nos clients de mettre à jour leur site vis-à-vis du DSFR, bluedrop.fr industrialise sa manière de travailler. Concrètement, nous travaillons sur la création du bluedrop.fr DSFR kit, composé d’un starter theme Figma et d’un starter theme Drupal.
Il s’agit d’un thème de base, prêt à l'emploi, qui fournit une structure de départ avec une configuration de base, des styles CSS et des fichiers de modèles (templates) préconfigurés tels que le header, le footer, la navigation… Il est conçu sur la base des composants définis par le DSFR.
Cette démarche répond à plusieurs objectifs :
- Un objectif de simplification : du processus de développement des thèmes en fournissant une base cohérente à partir de laquelle on peut personnaliser l'apparence du site dans le cadre du DSFR.
- Un objectif de flexibilité, de modularité et d’autonomie : des intégrateurs vis-à-vis du développement backend. Nous souhaitons pratiquer l'intégration atomique. C’est-à-dire décomposer les fonctionnalités en éléments atomiques réutilisables (en-tête, bouton, formulaire, module…) afin de permettre une gestion de contenu la plus libre possible.
- Un objectif d’optimisation : gain de temps et d’énergie, non négligeable pour tous les autres organismes qui dépendent de l’Etat et seraient amenés à créer ou refondre leur site internet.
Si justement vous disposez d’un projet contraint par le DSFR avec Drupal, nous serions ravis de vous accompagner ! Contactez-nous pour échanger sur votre projet et répondre à vos questions.
