Hero Section ist der prominente Eingangsbereich einer Website, der beim ersten Seitenaufruf sofort sichtbar ist und die Kernbotschaft, visuelle Identität und primäre Handlungsaufforderung eines Unternehmens oder Produkts kommuniziert.
Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Web Design · Niveau: Einsteiger Synonyme / Auch bekannt als: Hero Area, Hero Image, Above-the-Fold-Bereich, Opener
Was ist eine Hero Section?
Der Begriff „Hero" stammt aus dem Grafikdesign und bezeichnet das dominante visuelle Element auf einer Seite. Als „Hero Section" bezeichnet man im Webdesign den obersten sichtbaren Bereich einer Website – das, was Nutzende als erstes sehen, noch bevor sie scrollen. Sie ist die wichtigste Fläche einer Website: Innerhalb von drei bis fünf Sekunden entscheiden Besuchende, ob sie bleiben oder abspringen. Die Hero Section muss in dieser Zeit Klarheit über Nutzen, Zielgruppe und nächste Schritte schaffen.
Erklärung
Eine Hero Section besteht typischerweise aus mehreren Elementen, die zusammen eine überzeugende Einheit bilden:
Headline: Die wichtigste Aussage der gesamten Website, formuliert in einem einzigen, klaren Satz. „Dein Magazin für digitalen Journalismus." oder „Software, die deinen Workflow automatisiert." – die Headline beantwortet sofort: Was ist das? Für wen ist es?
Subheadline / Beschreibungstext: Ein kurzer Satz oder ein kurzer Absatz, der die Headline ergänzt und den Nutzen konkreter beschreibt. Oft zwei bis drei Sätze.
Call-to-Action (CTA): Die Haupthandlungsaufforderung der Seite – „Jetzt starten", „Kostenlos testen", „Demo buchen". Der CTA muss visuell dominant und im sichtbaren Bereich platziert sein.
Visuelles Element: Ein großes Bild, ein Video, eine Illustration oder eine animierte Grafik, die die Botschaft visuell unterstützt. Das visuelle Element setzt die emotionale Tonalität der Seite.
Sekundärer CTA oder Vertrauenssignal: Manchmal ergänzt durch einen sekundären Link, Kundenbewertungen, Logos bekannter Kunden oder Auszeichnungen.
Es gibt verschiedene Hero-Typen: Der Full-Screen Hero nutzt die gesamte Bildschirmhöhe; der Split Hero teilt die Fläche zwischen Text und Bild; der Video Hero setzt auf ein Hintergrundvideo; der Typographie-Hero setzt ausschließlich auf Schrift als visuelles Element.
Technisch muss die Hero Section für alle Bildschirmgrößen optimiert werden (Responsive Design). Bilder und Videos in der Hero Section haben starken Einfluss auf die Ladezeit – Optimierung ist daher essenziell.
Beispiele
- Startup-Website: Split Hero mit einem Produktscreenshot rechts, einer klaren Headline links, einer Subheadline und zwei CTAs (primär: „Kostenlos starten", sekundär: „Wie es funktioniert").
- Nachrichtenportal: Full-Screen Hero mit aktuellem Aufmacherbild, Überschrift des wichtigsten Artikels und Link zum Artikel – der Bild-Text-Kontrast muss WCAG-Anforderungen erfüllen.
- Persönliches Portfolio: Typographie-Hero mit dem Namen, einer kurzen Berufsbezeichnung und einem CTA zur Projektgalerie – minimalistisch und persönlich.
- Lernplattform: Video-Hero mit einem kurzen Erklärvideo im Hintergrund, das Lernende bei der Arbeit zeigt, kombiniert mit einem Anmeldeformular im Vordergrund.
- E-Commerce: Hero mit saisonalem Produktbild, einem klaren Angebots-Claim („Sommersale – 30 % auf alle Kurse") und einem CTA-Button in der Markenfarbe.
In der Praxis
Die Hero Section wird häufig als erster Bereich im Designprozess ausgearbeitet, weil sie die Tonalität für den Rest der Website setzt. In User-Tests wird sie besonders gründlich auf Verständlichkeit geprüft: Können Testpersonen nach fünf Sekunden sagen, was das Unternehmen anbietet? A/B-Tests verschiedener Headlines und CTAs in der Hero Section haben oft die größten messbaren Auswirkungen auf Konversionsraten. Für Medienunternehmen ist die Hero Section auch die Platzierung des wichtigsten Inhalts – der erste Eindruck entscheidet über Klickverhalten und Abo-Conversions.
Vergleich & Abgrenzung
Hero Section vs. Banner: Banner sind in der Regel kleinere, oft werbliche Elemente – häufig mit Bild und kurzem Text. Eine Hero Section ist strukturell ein integraler Bestandteil des Seitenlayouts, kein eingefügtes Werbeelement. Hero Section vs. Slider: Slider (wechselnde Bilder/Inhalte im Hero-Bereich) sind ein älteres Muster, das in UX-Studien schlecht abschneidet – Nutzende ignorieren rotierende Inhalte häufig. Statische oder sparsam animierte Hero Sections performen in der Regel besser. Hero Section vs. Landing Page: Eine Landing Page kann ganz aus einer Hero Section bestehen – sie ist aber auf Konversion optimiert und enthält keine globale Navigation.
Häufige Fragen (FAQ)
Muss die Hero Section immer ein großes Bild enthalten? Nein. Typografische Hero Sections, die nur mit Schrift und Farbe arbeiten, sind eine starke Alternative – besonders für Marken, die Klarheit und Modernität kommunizieren wollen. Wichtig ist, dass das visuelle Konzept zur Markenidentität passt.
Wie lang darf der Headline-Text in der Hero Section sein? So kurz wie möglich. Acht bis zwölf Wörter sind eine gute Orientierung. Zu lange Headlines werden nicht vollständig gelesen und verlieren ihre Schlagkraft. Der Kern der Botschaft muss sofort erfassbar sein.
Verwandte Einträge
Weiterführend
- Cao, J. / Kaminsky, B. / Flaherty, K. (2014): Web UI Design Best Practices. UXPin.
- Smith, D. (2019): The Hero Section Design Guide. Smashing Magazine (Online-Artikel).
- Hicks, J. (2010): The Icon Handbook. Five Simple Steps.
