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 Graphiste.com, c’est bien plus qu’une photo de produit ou que votre logo. C’est une image qui correspond à l’esprit de votre marque et à votre branding tout en ayant un effet engageant.
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 dans le but 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,
- Il vaut mieux 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.
