{"id":4555,"date":"2017-09-28T10:30:06","date_gmt":"2017-09-28T08:30:06","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=4555"},"modified":"2025-08-20T17:22:41","modified_gmt":"2025-08-20T15:22:41","slug":"hero-header-webdesign","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/hero-header-webdesign\/","title":{"rendered":"Le Hero Header : un \u00e9l\u00e9ment indispensable pour votre site web"},"content":{"rendered":"

Avoir du trafic sur son site, c’est un bon d\u00e9but, mais comment faire forte impression aux internaute qui atterrissent par hasard sur votre page d’accueil ?\u00a0Le Hero Header<\/a> est un proc\u00e9d\u00e9 de webdesign qui vous permet d’accomplir cet exploit.<\/strong><\/p>\n

Qu’est-ce qu’un Hero Header ? Comment gagner en puissance en l\u2019int\u00e9grant \u00e0 votre page d\u2019accueil ? Voici tout ce qu’il y a \u00e0 savoir.<\/p>\n

Le Hero Header est le personnage central de votre page<\/h2>\n

Un Hero Header<\/a>, c\u2019est un bandeau de dimensions variables\u2026 mais en tout cas plus grand que les autres. Il s\u2019\u00e9tend horizontalement sur l\u2019\u00e9cran (pensez responsive design<\/a> au moment de le construire), dans sa partie haute, et il peut occuper toute la page ou laisser appara\u00eetre du contenu sous l\u2019image.<\/p>\n

Certains utilisent d\u2019ailleurs le hero header comme arri\u00e8re-plan de toutes leurs pages, notamment avec un effet parallax. D\u2019autres en int\u00e8grent un diff\u00e9rent en haut de leurs pages principales.<\/p>\n

C\u2019est lui qui raconte votre histoire, et qui va donner envie aux internautes d\u2019aller plus loin. Son choix est donc essentiel.<\/p>\n

Tous les visuels ne sont pas des h\u00e9ros<\/h2>\n
\"Hero
Un Hero Header sous forme de cin\u00e9magraphe.<\/figcaption><\/figure>\n

Un Hero Header, c\u2019est bien plus qu\u2019une photo de produit ou que votre logo. C\u2019est une image qui correspond \u00e0 l\u2019esprit de votre marque, \u00e0 votre branding, et qui doit avoir un effet engageant.<\/p>\n

Elle doit cr\u00e9er une \u00e9motion, voire r\u00e9sumer votre \u00e9tat d\u2019esprit ou votre offre.<\/p>\n

Comme ce visuel est destin\u00e9 \u00e0 appara\u00eetre en gros plan sur les \u00e9crans les plus larges, vous ne pouvez pas vous contenter d\u2019un clich\u00e9 basse d\u00e9finition. Vous devez n\u00e9cessairement opter pour une image de qualit\u00e9.<\/p>\n

Mais un Hero Header peut aussi inclure un GIF<\/a>, une vid\u00e9o ou, bien s\u00fbr, une illustration.<\/p>\n

Ins\u00e9rez votre call-to-action dans votre header<\/h2>\n

\"\"Ce type de header est souvent int\u00e9gr\u00e9 dans des pages d\u2019accueil ou des landing pages. Et toute landing page qui se respecte<\/a> comprend un CTA (Call to Action ou appel \u00e0 l\u2019action).<\/p>\n

Ce message peut parfois se r\u00e9sumer \u00e0 \u00ab\u00a0pour en savoir plus\u00a0\u00bb, inscrit dans un bouton. L\u2019une des tendances actuelles est d\u2019ailleurs le \u00ab\u00a0ghost button\u00a0\u00bb, un simple cadre transparent et cliquable, pr\u00e9f\u00e9r\u00e9 aux boutons color\u00e9s. Les super h\u00e9ros sont presque invisibles dans la vie courante…<\/p>\n

Cette option vous \u00e9vite les probl\u00e9matiques de couleur\u00a0: trop de teintes diff\u00e9rentes sur une m\u00eame page saturent l\u2019\u0153il.<\/p>\n

Lire aussi : Les conseils pour r\u00e9ussir le header de votre site<\/a><\/p><\/blockquote>\n

Les secrets d\u2019un bon Hero Header<\/h2>\n

Si chaque Hero Header est personnalis\u00e9, quelques astuces sont communes aux meilleurs d\u2019entre eux\u00a0:<\/p>\n