D’après vous, comment s’appelle le visuel que les internautes voient en premier lorsqu’ils arrivent sur un site Web ?

Aucune idée ?

La réponse est simple : un Hero header !

Selon Laurent :

Le Hero header désigne le bandeau large situé en haut de la page d’accueil qui a pour rôle de capter l’attention des visiteurs.

Mon mentor m’a montré plusieurs exemples de bannières d’en-tête ce matin. Il y en a qui sont vraiment top !

Pour de plus amples informations sur ce terme, poursuivez votre lecture !

Ma définition du Hero header

Bien plus qu’une photo de produit ou un logo, le Hero header doit être choisi avec soin, que ce soit sur un blog ou un site e-commerce.

En plus, c’est la première image que ceux-ci voient sur un site Web ou un blog.

Dans le domaine du Web design, on l’appelle également “section en-tête”, “carrousel” ou “bannière Web”.

Le Hero peut être :

  • Un GIF,
  • Une illustration,
  • Une vidéo,
  • Un patchwork de photos,
  • Une image vectorielle…

À quoi ça sert le Hero header ?

Le Hero header peut entre autres vous aider à :

  • Capter rapidement l’attention des visiteurs,
  • Susciter leur curiosité et les inciter à parcourir vos pages,
  • Apporter une réponse immédiate aux recherches effectuées par les internautes,
  • Faciliter la compréhension de la proposition de valeur et de vos contenus,
  • Favoriser votre taux de conversion

Selon Skribix, que ce soit pour un blog ou pour un site e-commerce, le Hero header a une fonction d’accroche cruciale (effet WOW), tout en favorisant le travail de branding.

Comment créer une bonne section d’en-tête ?

Pour créer un bon Hero, voici quelques astuces à mettre en pratique :

  • Optez pour un visuel pleine largeur qui, notons-le, procure toujours un effet visuel percutant,
  • Choisissez un visuel statique afin de ne pas perturber la lecture du call-to-action, de la proposition de valeur…,
  • Proposez un visuel qui allie le rationnel et l’émotionnel afin de renforcer l’implication des visiteurs. En outre, il ne doit pas être trop chargé,
  • N’hésitez pas à placer logo dans un coin du Hero,
  • Mieux vaut ne pas utiliser les mêmes couleurs de votre logo ou de votre marque,
  • Évitez d’inscrire directement le texte dans la bannière, dans la mesure où il faut également séduire les algorithmes de Google et des autres moteurs de recherche,
  • Bien entendu, le texte doit être court, avec une police facilement lisible et ne doit pas cacher les parties essentielles de l’image,
  • Assurez-vous que votre Hero header s’adapte à tous les formats d’écran et qu’il ne gêne pas la navigation sur le site…

Note : n’hésitez pas non plus à intégrer le CTA (demander un devis, en savoir plus, ouvrir un compte…) dans le header.