Was ist eine Hero Section?
Die Hero Section ist der wichtigste und prominenteste visuelle Bereich einer Webseite. Sie ist das erste, was ein Besucher sieht und erstreckt sich meistens über die gesamte Breite des Bildschirms, oft auch (fast) über die gesamte Höhe des “Above the Fold”-Bereichs.
Der Begriff “Hero” kommt aus dem Printbereich (“Hero Image”) und beschreibt ein besonders großes, eindrucksvolles Schlüsselbild, das eine Geschichte erzählt oder Aufmerksamkeit weckt.
Die Aufgaben der Hero Section
- Den ersten Eindruck prägen: Binnen Bruchteilen einer Sekunde (“Gefällt mir das Design? Wirkt das seriös?”).
- Die Value Proposition kommunizieren: Wer bist du, was bietest du an, und warum sollte ich hier bleiben? Ein starker, klarer Satz.
- Den Nutzer zur Aktion bewegen: Durch den prominentesten Button der Seite (den Call-to-Action).
Elemente einer starken Hero Section
- Ein großes Hintergrundbild (Hero Image), ein dynamisches Video oder aber auch einfach ein cleanes, rein typografisches Design mit viel Whitespace.
- Eine Headline (Hauptüberschrift, oft das
<h1>-Tag auf der Seite), die das wichtigste Versprechen liefert. - Eine Subheadline (Unterüberschrift), die Details liefert.
- Ein Call-to-Action (CTA) Button.
- Oftmals Social Proof (z.B. kleine Logos bekannter Kunden oder Bewertungssterne) unter dem Button, um das Vertrauen (Trust) sofort zu erhöhen.