---
boost: 0
sitemap:
  noindex: true
title: Design de la Zone d'expression visuelle
shortTitle: Design de la Zone d’expression visuelle
description: Présentation des choix graphiques, des principes visuels et des variantes disponibles du composant Zone d'expression visuelle.
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](../index.md)
- Design

:::

### Variations

La zone d’expression visuelle permet la combinaison de plusieurs éléments (texte, image, background) dans un jeu de superposition pour maximiser l’impact d’une section en lui donnant du relief. En ce sens, elle propose différentes compositions possibles.

**Composition sur fond blanc ou alternatif**

Dans cette combinaison, vous pouvez associer une image et une forme de couleur à un bloc “texte + bouton”.

- Version sur fond blanc

::::dsfr-doc-guidelines

:::dsfr-doc-guideline[✅ À faire]{col=12 valid=true}

![](../_asset/variation/do-1.png)

:::

::::

::::dsfr-doc-guidelines

:::dsfr-doc-guideline[✅ À faire]{col=12 valid=true}

![](../_asset/variation/do-2.png)

:::

::::

- Version sur fond alternatif

::::dsfr-doc-guidelines

:::dsfr-doc-guideline[✅ À faire]{col=12 valid=true}

![](../_asset/variation/do-3.png)

:::

::::

::::dsfr-doc-guidelines

:::dsfr-doc-guideline[✅ À faire]{col=12 valid=true}

![](../_asset/variation/do-4.png)

:::

::::

Dans cette combinaison, la forme de couleur qui accompagne l’image peut être remplacée par un motif.

::::dsfr-doc-guidelines

:::dsfr-doc-guideline[✅ À faire]{col=12 valid=true}

![](../_asset/variation/do-5.png)

:::

::::

**Composition sur fond de couleur ou motif**

Dans cette combinaison, vous pouvez associer un bloc de texte sur fond blanc superposé sur l’image, le tout sur un fond de couleur au choix dans la palette DSFR ou un motif, sur toute la largeur.

- Version sur fond de couleur

::::dsfr-doc-guidelines

:::dsfr-doc-guideline[✅ À faire]{col=12 valid=true}

![](../_asset/variation/do-6.png)

:::

::::

::::dsfr-doc-guidelines

:::dsfr-doc-guideline[✅ À faire]{col=12 valid=true}

![](../_asset/variation/do-7.png)

:::

::::

::::dsfr-doc-guidelines

:::dsfr-doc-guideline[❌ À ne pas faire]{col=12 valid=false}

![](../_asset/variation/dont-1.png)

Ne pas couvrir 2 bords (ou plus) de l’image avec un bloc de texte, quelque soit l’écran sur lequel il est affiché.

:::

::::

::::dsfr-doc-guidelines

:::dsfr-doc-guideline[❌ À ne pas faire]{col=12 valid=false}

![](../_asset/variation/dont-2.png)

Ne pas sortir le bloc de texte de la zone d’expression visuel ou créer de décalage visuel.

:::

::::

- Version sur motif

::::dsfr-doc-guidelines

:::dsfr-doc-guideline[✅ À faire]{col=12 valid=true}

![](../_asset/variation/do-8.png)

:::

::::

- Autre disposition possible avec image

::::dsfr-doc-guidelines

:::dsfr-doc-guideline[✅ À faire]{col=12 valid=true}

![](../_asset/variation/do-9.png)

:::

::::

::::dsfr-doc-guidelines

:::dsfr-doc-guideline[❌ À ne pas faire]{col=12 valid=false}

![](../_asset/variation/dont-3.png)

Ne pas superposer plusieurs images les unes sur les autres pour conserver la lisibilité de la composition.

:::

::::

### Tailles

La zone d’expression visuelle doit s’intégrer dans les 12 colonnes de la grille du DSFR.

### États

La zone d’expression visuelle n’est sujette à aucun changement d’état.

### Personnalisation

Le background de la zone d’expression visuelle est personnalisable et peut utiliser l’ensemble des [couleurs de la palette du DSFR](../../../../../core/_part/doc/color/index.md) (dans la limite du respect des prérogatives liées à l’accessibilité).