La première impression d’un site se joue dans le hero, la zone visible avant tout défilement. En trois secondes, le visiteur décide de rester ou de partir. Et pourtant, la plupart des sites suivent la même recette : un grand titre, un sous-titre, un bouton, une image à droite.

Le problème, c’est que toutes les hero sections ne devraient pas se ressembler. Le bon format dépend de ce que vous vendez, de qui vous êtes et de l’émotion que vous voulez déclencher. Voici cinq styles à connaître, avec des exemples concrets et des repères pour choisir le vôtre.

1. Cinematic Product : l’ambiance avant tout.

Le Cinematic Product est un hero qui met en scène un seul objet. Le produit occupe le centre. Le texte se réduit à quelques mots qui flottent par-dessus l’image, et l’action principale reste discrète. Le format ne cherche pas à expliquer ni à comparer : il crée une atmosphère premium et installe le désir en une seconde. Tout repose sur la qualité de la photographie ou du rendu 3D. Mal exécuté, l’effet tombe à plat.

Sur la première capture, le drone MZAK Ultra Light flotte seul sur un fond noir profond, ses arêtes soulignées par une lumière latérale. Le texte se réduit au minimum, l’objet fait tout le travail. La seconde, Evoluxe, pose un véhicule sur un plateau de montagne et fait passer une typographie géante, « Let’s try power », par-dessus l’image. Même logique, registre encore plus cinématographique.

Quand l’utiliser : marques de produits physiques haut de gamme, cosmétiques, objets design, tech, mode. Si votre différenciation tient au désir et à la qualité perçue plutôt qu’aux fonctionnalités, ce style est fait pour vous. À éviter pour un service abstrait ou un produit qui se vend par la démonstration.

2. Gallery : montrer plutôt que dire.

Le style Gallery déroule une rangée d’images en travers du hero, sous ou au-dessus du titre. La page devient un aperçu instantané : un portfolio, une collection, un corpus de travail. Le visiteur saisit la nature et la qualité de ce que vous produisez, sans lire un mot.

La première capture, une galerie d’art « Where art moves beyond the frame », éparpille des œuvres autour du titre comme des tirages posés sur une table : on comprend aussitôt qu’il s’agit d’une exposition. La seconde, le service de livraison Food House, aligne une rangée de plats sous l’accroche. Même principe, tout autre secteur, où l’image vend mieux que n’importe quel argument.

Quand l’utiliser : métiers visuels où le travail parle de lui-même, architecture, photographie, design, décoration, artisanat, agences créatives. C’est le format idéal quand votre meilleur argument commercial, ce sont vos références. Moins pertinent si votre valeur est invisible : conseil, stratégie, logiciel.

3. Bento : la grille modulaire.

Le style Bento découpe le hero en cartes distinctes. Chaque carte porte un élément : un titre, une image, un produit, un chiffre clé. L’ensemble forme une mosaïque où l’œil circule de bloc en bloc.

Sur la première capture, Molveig réunit dans une même grille une photo d’équipe, des chiffres clés (100, 500, 35) et de courts blocs de texte (Mission, Dedication, ROI) : tout le positionnement tient en un écran. La seconde, le podcast Educast, joue la couleur. Chaque vignette (épisodes, mentors, notes, abonnés) a sa teinte, et l’ensemble reste lisible parce que la grille structure le désordre apparent.

Quand l’utiliser : quand vous avez plusieurs messages à faire passer dès l’ouverture, une marque à plusieurs gammes, une offre à multiples facettes, un produit aux fonctionnalités variées. Le Bento gère bien la densité. Si vous n’avez qu’un seul message fort, il dilue l’attention : restez simple.

4. Interface Product : montrer le produit en action.

Pensé pour les logiciels, ce style place le titre à côté (ou au-dessus) d’une capture de l’interface réelle. Le visiteur voit aussitôt à quoi ressemble l’outil, ce qu’il fait, comment on l’utilise. La preuve est dans le produit.

Sur la première capture, PowerAI (« Helping brands grow through meaningful design ») laisse émerger le vrai tableau de bord Solaris en bas de l’image : clients actifs, factures, projets en cours. On voit le logiciel travailler. La seconde entoure un outil de gestion de projet de ses cartes d’intégration (Slack, Zoom, plans de projet) : ici, ce sont les composants réels de l’interface qui font le visuel.

Quand l’utiliser : SaaS, applications, plateformes, outils en ligne. Dès que votre produit est une interface, montrez-la : c’est presque toujours plus convaincant qu’une illustration abstraite. C’est le format par défaut pour la tech B2B. À écarter si votre interface n’est pas encore assez aboutie pour servir d’argument.

5. Masthead : la structure d’un journal.

Le style Masthead emprunte les codes de la presse imprimée. Le nom de la marque s’affiche tout en haut, en typographie surdimensionnée, comme la une d’un magazine. En dessous, des images s’organisent en colonnes et donnent à la page l’allure d’un journal.

La première capture, The Metropolitan Museum of Art, déploie son nom en lettres immenses sur toute la largeur, puis aligne trois œuvres numérotées comme les colonnes d’un journal : autorité et statut éditorial immédiats. La seconde, la marque de thé SoulSips, fait de son seul nom le sujet du hero, un wordmark géant suivi d’une courte promesse. Dans les deux cas, le nom prend la vedette.

Quand l’utiliser : marques qui veulent affirmer une identité forte et un positionnement éditorial, mode, médias, marques lifestyle, projets à forte personnalité. C’est un choix de posture : « nous sommes une référence ». Il demande une vraie direction artistique et un nom qui mérite la vedette. Peu adapté à une jeune marque qui doit encore expliquer ce qu’elle fait avant d’imposer son nom.

Comment choisir le bon.

Le bon réflexe n’est pas de copier le hero du dernier site à la mode, mais de partir de votre situation :

• Vous vendez un objet désirable ? Cinematic Product.
• Votre travail se voit ? Gallery.
• Vous avez plusieurs messages clés ? Bento.
• Votre produit est un logiciel ? Interface Product.
• Vous voulez imposer une marque forte ? Masthead.

La question à se poser reste la même : qu’est-ce que mon visiteur doit comprendre ou ressentir dans les trois premières secondes ? La réponse vous donne votre hero, pas l’inverse.

Et si le doute persiste, testez. Le hero est la zone la plus simple à mesurer. Un changement de format peut déplacer votre taux de conversion plus vite que n’importe quelle autre modification de la page.