# Design de section hero : le premier écran de votre site

[Canonical HTML page](https://gradiently.design/fr/guide/hero-section-design)

Les visiteurs décident de rester avant de faire défiler. C’est dans le hero qu’ils décident : chaque mot et chaque pixel doit y mériter sa place.

## The short version

- Une section hero est le premier écran complet d’un site, et elle doit dire ce qu’est le produit, à qui il s’adresse et quoi faire ensuite.
- Ses éléments essentiels sont un titre, une phrase d’appui, un appel à l’action principal et un visuel qui montre le produit ou installe l’ambiance.
- Des titres précis qui nomment un résultat fonctionnent mieux que des slogans qui pourraient appartenir à n’importe quelle entreprise.
- Un hero a besoin d’une seule action principale ; un second lien plus discret convient, mais davantage de choix la diluent.
- Concevez volontairement la version téléphone, car beaucoup de visiteurs découvrent le hero sur un écran étroit.

Un bon **design de section hero** répond à trois questions avant tout défilement : qu’est-ce que c’est, est-ce pour moi, et que dois-je faire ensuite. Le hero est le premier écran de votre site, en général un titre, une phrase d’appui, un seul bouton principal et un visuel. Tout le reste (logos, badges, un second bouton, un carrousel) doit justifier la place qu’il prend à ces quatre éléments. Ce guide couvre les mots, la mise en page et l’intégration ; pour le fond seul, voir [les arrière-plans de hero](https://gradiently.design/fr/guide/website-hero-background).

## Ce que contient une section hero

| Élément | Rôle | Longueur typique |
| --- | --- | --- |
| Surtitre (facultatif) | Un contexte ou une catégorie : « Pour les cafés indépendants » | 2 à 5 mots |
| Titre | La promesse, avec les mots du lecteur | 4 à 10 mots |
| Phrase d’appui | Comment ça marche ou ce qui fait la différence | Une phrase, 15 à 25 mots |
| Bouton principal | La prochaine étape, unique | 2 à 4 mots |
| Lien secondaire (facultatif) | Un chemin moins engageant : « Voir comment ça marche » | 2 à 4 mots |
| Visuel | Montrer le produit, le résultat ou l’émotion | Une image, une vidéo en boucle ou un fond |

Si un élément n’aide pas le visiteur à décider de rester, sa place est plus bas dans la page.

## Écrire le titre du hero

Le titre est la phrase la plus difficile de votre site. Les slogans astucieux échouent parce qu’ils pourraient appartenir à n’importe qui. Un bon titre nomme à qui il s’adresse, ce qu’on obtient ou le problème qu’il supprime, avec les mots qu’utilisent vraiment vos clients. Lisez-le à voix haute à côté de la page d’accueil d’un concurrent : si vous pouviez les échanger sans que personne ne le remarque, il n’est pas assez précis.

| Vague | Précis |
| --- | --- |
| Propulser votre croissance | La comptabilité des freelances, faite chaque vendredi |
| L’avenir du café | Des grains d’origine unique, torréfiés le lundi, chez vous le jeudi |
| Le design simplifié | Des publications à l’image de votre marque, dans toutes les tailles |
| Votre parcours bien-être commence ici | Pilates en petit groupe à Leeds, six personnes par cours |
| Des solutions innovantes pour les équipes modernes | Des agendas partagés pour les cabinets qui détestent les doubles réservations |

Les versions précises sont plus longues, et c’est très bien. Dans un titre, la clarté l’emporte sur la brièveté.

Réservez la phrase d’appui au comment ou à la preuve, pas à une reformulation. Pour aller plus loin sur les mots, [écrire des textes pour les visuels](https://gradiently.design/fr/guide/writing-copy-for-visuals) et [la hiérarchie visuelle](https://gradiently.design/fr/guide/visual-hierarchy) vous aideront.

## Trois mises en page de hero qui fonctionnent

- **Centré.** Titre, phrase et bouton empilés au milieu sur un fond. Efficace pour les marques, les lancements et les produits qui sont davantage une émotion qu’un écran.
- **Partagé.** Les mots à gauche, l’image ou la capture du produit à droite. Idéal quand voir le produit est l’argument : applis, objets physiques, cuisine.
- **Image ou vidéo plein écran.** Une photo ou une boucle remplit l’écran, avec les mots sur une zone calme. Convient aux hôtels, restaurants, événements et portfolios, si la lisibilité est bien gérée.

Un hero de site centré pour un torréfacteur, avec titre et phrase d’appui sur un dégradé chaud

Centré : les mots portent le message, le fond installe l’ambiance.

Un hero de site partagé pour un logiciel d’agenda de cabinet, texte à gauche et espace pour une image du produit

Partagé : les mots d’un côté, de la place de l’autre pour une capture du produit.

## L’appel à l’action

Un seul bouton principal, visuellement l’élément le plus fort après le titre. Libellez-le avec ce qui se passe ensuite, pas avec un verbe générique : « Commencer l’essai gratuit », « Réserver une table », « Voir la carte ». Si vous ajoutez une option secondaire, faites-en un lien texte plus discret, pour que les deux ne se concurrencent jamais.

### À éviter

- Trois boutons de même poids
- « Envoyer », « En savoir plus » ou « Cliquez ici »
- Un bouton de la même couleur que le fond
- Le bouton sous la ligne de flottaison sur téléphone
- Un carrousel automatique de messages différents

### À faire

- Un bouton, un lien plus discret
- Un libellé qui dit ce qui se passe ensuite
- Une couleur de bouton utilisée nulle part ailleurs à l’écran
- Titre et bouton visibles sur un téléphone de 390 px de large
- Un seul message, bien dit

## Fonds de hero et lisibilité

Le fond fait la moitié de l’impression et c’est la raison la plus fréquente d’un hero raté. Les photos chargées et les dégradés vifs se battent avec le titre, et un voile sombre sur tout écrase l’ambiance. Prévoyez une zone calme derrière les mots, éloignez-en les détails les plus chargés et vérifiez [le contraste](https://gradiently.design/fr/guide/color-contrast-accessibility) à chaque largeur d’écran, car la zone derrière le texte bouge quand la mise en page se recompose.

C’est là qu’un Mark Gradiently est utile : sa zone la plus calme et la plus contrastée se place derrière vos mots et la couleur du texte est choisie dans sa propre palette, si bien que le titre se lit en 1920×1080 comme sur téléphone, sans encadré ni ombre. Pour les approches CSS, voir [le voile en dégradé](https://gradiently.design/fr/guide/gradient-overlay) et [le texte sur un dégradé](https://gradiently.design/fr/guide/text-on-gradient).

## Concevoir le hero pour téléphone

Sur téléphone, le hero est étroit et haut : les mises en page partagées s’empilent et les images plein écran sont fortement recadrées. Décidez de ce que montre le téléphone plutôt que de le subir : le titre et le bouton doivent être visibles sans défilement, le visuel peut passer dessous ou rétrécir.

- Ordinateur 1920×1080: 1920 × 1080
- Portable 1440×900: 1440 × 900
- Téléphone 390×844: 390 × 844

Le même hero à trois tailles d’écran courantes. Ce qui tient à côté du titre sur ordinateur doit passer au-dessus ou en dessous sur téléphone.

```css
.hero {
  min-height: min(100svh, 56rem);
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  text-align: center;
}

.hero h1 {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.05;
  max-width: 18ch;
  text-wrap: balance;
}

.hero p {
  max-width: 40ch;
  margin-inline: auto;
}
```

`svh` s’adapte à l’écran visible du téléphone, `clamp()` fait varier le texte entre téléphone et ordinateur, et `text-wrap: balance` équilibre les lignes du titre.

## Checklist de la section hero

1. **Écrivez d’abord le titre** Avant de choisir des images, écrivez cinq titres et gardez le plus précis. La mise en page suit les mots.
2. **Réduisez à une action** Choisissez la seule étape que vous voulez voir franchir par la plupart des visiteurs, et faites-en le seul bouton.
3. **Choisissez un visuel qui prouve ou installe l’ambiance** Une capture, une photo produit ou un fond qui porte la marque. Pas une photo de banque d’images de gens qui pointent un ordinateur.
4. **Vérifiez la lisibilité partout** Redimensionnez le navigateur du plus large au plus étroit et surveillez le texte sur le fond tout du long.
5. **Gardez-le rapide** L’image du hero est souvent l’élément le plus lourd de la page. Dimensionnez-la correctement et servez-la en [WebP ou AVIF](https://gradiently.design/fr/guide/webp-images).

Le hero ouvre la page ; le reste de la page doit tenir la promesse. [Le design de landing page](https://gradiently.design/fr/guide/landing-page-design) couvre les sections qui suivent.

## FAQ

### Qu’est-ce qu’une section hero sur un site web ?

Le premier écran complet d’une page, au-dessus de la ligne de flottaison. Il contient en général un titre, une phrase d’appui, un bouton principal et un visuel.

### Que doit dire le titre d’une section hero ?

Ce que fait le produit et pour qui, avec les mots du client. Des résultats précis valent mieux que de grands slogans.

### Combien de boutons dans une section hero ?

Un bouton principal. Un second lien texte plus discret pour une option moins engageante convient, mais davantage de choix affaiblissent le principal.

### Quelle taille pour une image de hero ?

Concevez en 1920×1080 pour ordinateur et fournissez des versions plus petites pour téléphone via `srcset`, pour que les visiteurs mobiles téléchargent un fichier plus léger.

### Une section hero doit-elle remplir tout l’écran ?

Pas forcément. Un hero plein écran convient aux sites portés par la marque ; les sites produit gagnent souvent à un hero plus court qui laisse deviner le contenu en dessous.