---
title: Zone d'expression visuelle
shortTitle: Zone d’expression visuelle
titleId: Composition
description: Présentation du composant Zone d’expression visuelle, section de page permettant des compositions créatives pour maximiser l’impact d’un message ou d’une action sur certaines pages clés.
shortDescription: Une section riche et impactante pour mettre en avant un message ou une action.
keywords: zone d’expression, composition, composition visuelle, design, landing page, page d’accueil, campagne, impact, interface, DSFR, accessibilité
cover: ./_asset/cover/cover.png
excerpt: La zone d’expression visuelle permet de construire des sections fortes et distinctives pour mettre en avant un message ou une action dans des pages stratégiques.
summary: Ce composant permet de composer des sections visuelles riches pour les pages d’accueil, de campagne ou de démarrage d’un parcours. Il autorise des mises en page plus expressives que le reste du DSFR tout en respectant des règles strictes de lisibilité et de cohérence. La zone d’expression visuelle combine textes, images et arrière-plans personnalisables pour générer de l’impact sans nuire à l’accessibilité ni à la simplicité des interfaces de l’État.
badge: beta
mesh:
  - core/color
  - core/media
---

## Zone d'expression visuelle

La zone d’expression visuelle est une section de page à l’intérieur de laquelle il est possible de faire des compositions créativement plus riches que généralement autorisé par le DSFR.

:::dsfr-doc-tab-navigation

- Présentation
- [Design](./design/index.md)

:::

### Quand utiliser ce composant ?

Intégrer une zone d’expression visuelle sur les pages où il est nécessaire d’avoir un impact fort et d’initier un parcours **en mettant en avant une action** (bouton, moteur de recherche, lien) :

- Page d’accueil
- Page d’atterrissage de campagne
- Toute page marquant le début d’un parcours

> [!NOTE]
> Cette zone d’expression visuelle permet de véhiculer un message clé ou de mettre en avant des contenus, dans le but d’en maximiser l’impact. **Toutefois, elle doit suivre des règles bien définies pour préserver la simplicité et la bonne lisibilité des interfaces.**

### Comment utiliser ce composant ?

- **Utiliser la zone d’expression visuelle avec parcimonie,** la simplicité de vos interfaces et la cohérence avec le reste des sites de l’État restant la priorité.
- **Garder en tête que les compositions complexes peuvent très vite devenir difficiles à comprendre** pour des personnes éloignées du numérique, et complexes à développer de surcroît. Ainsi, la zone d’expression visuelle ne doit pas être utilisée uniquement pour créer du rythme dans une page, par exemple.
- **Conserver les pages intérieures de votre site (pages articles, pages de résultats de recherche, formulaires etc.) vierges de toutes zones d’expression visuelle** afin d’éviter de détourner l’attention de l’usager du contenu à consommer.
- **Penser à développer une iconographie audacieuse et propriétaire** pour tous les médias peuplant vos produits numériques, la zone d’expression visuelle n’ayant pas vocation à être utilisée à des fins illustratives.

### Règles éditoriales

La zone d’expression visuelle n’est régie par aucune règle éditoriale spécifique.