L’essentiel en bref
- 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.
Sur cette page
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.
Ce que contient une section hero
Rôle
Longueur typique
Longueur typique
Rôle
Longueur typique
Rôle
Longueur typique
Rôle
Longueur typique
Longueur typique
É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.
Précis
Précis
Précis
Précis
Précis
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 et la hiérarchie visuelle 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.
Centré : les mots portent le message, le fond installe l’ambiance.
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 à 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é et le texte sur un dégradé.
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
.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.
Le hero ouvre la page ; le reste de la page doit tenir la promesse. Le design de landing page couvre les sections qui suivent.
Les questions qu’on nous pose
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.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil