Nouveau Design de l’État : DSFR

Mis à jour le lundi 4 mars 2024 , par Equipe WEBTICE

Qu’est-ce que le Système de Design de l’État (DSFR) ?

Ce projet est le volet numérique de la marque de l’État, qui permet pour les citoyens d’avoir une cohérence graphique et une meilleure expérience à travers l’ensemble des sites de l’État. Le Système de Design de l’État regroupe un ensemble de composants réutilisables, répondant à des standards et à une gouvernance, pouvant être assemblés pour créer des sites Internet accessibles et ergonomiques

 

Le squelette DSFR pour SPIP

Le plugin SPIP réalisé par l’Académie de Versailles permet de mettre en place rapidement et facilement la charte de l’état sur votre site web d’établissement, disciplinaire, ou institutionnel.

Simple surcharge du squelette natif de SPIP, ce plugin ne nécessite que les plugins Agenda, Saisie pour formulaires, Critère mots et Sélection d’articles.

La mise en page de la page d’accueil est configurable et personnalisable par l’utilisation de mots clés.

 

 

Les mots clés du nouveau squelette

DSFR_Menu :
permet d’afficher une rubrique dans le menu de navigation

DSFR_Bandeau :
permet de créer un bandeau. Le document (image) qui a le mot clé, va apparaitre en fond. L’article et son logo vont venir se positionner par dessus. La taille idéale de l’image pour le bandeau est 1920x640.

DSFR_CallOut :
met en avant 1 article avec logo, titre et descriptif

DSFR_Carousel :
permet de créer un diaporama de 1 à 3 articles. L’image de fond est le logo de l’article. On affiche aussi le titre et une description ou introduction. La taille idéale des logos est 1200x500.

DSFR_A_la_une :
affiche jusqu’à 4 articles sous forme de carte horizontale avec logo, titre, surtitre et sous-titre. Le descriptif du mot clé est utilisé comme titre de la section sur la page d’accueil

L’actualité, les derniers articles sont par page de 4 sur une ligne si l’on n’affiche pas l’agenda. Si l’agenda est affiché, on affiche alors 6 articles sur 2 lignes.

DSFR_LienRapide :
permet d’afficher jusqu’à 6 articles sous forme de tuile verticale. On affiche le logo (carré) le titre et le sous-titre.

DSFR_Site_institutionnel :
en pied de page, on affiche le titre (en lien) des sites références

DSFR_Partenaire_Gauche :
permet d’affiche le logo d’un seul site dans la partie gauche partenaires.

DSFR_Partenaire_Droite :
permet d’afficher plusieurs logos de sites dans la partie droite partenaires

Nouveau Design DSFR

Dans la même rubrique