Hero-Bereich gestalten: der erste Bildschirm deiner Website

Ein guter Hero-Bereich beantwortet drei Fragen, bevor jemand scrollt: Was ist das, ist es für mich, und was mache ich als Nächstes? Der Hero ist der erste Bildschirm deiner Website, meist eine Headline, ein erklärender Satz, ein einziger Hauptbutton und ein Bild. Alles andere (Logos, Badges, ein zweiter Button, ein Karussell) muss den Platz rechtfertigen, den es diesen vier wegnimmt. Dieser Leitfaden behandelt Text, Layout und Umsetzung; nur zum Hintergrund siehe Hintergründe für den Website-Hero.

Was in einen Hero-Bereich gehört

Die Hero-Headline schreiben

Die Headline ist der schwierigste Satz deiner Website. Clevere Slogans scheitern, weil sie zu jedem passen könnten. Eine gute nennt, für wen etwas ist, was man bekommt oder welches Problem verschwindet, in Worten, die deine Kunden wirklich benutzen. Lies sie laut neben der Startseite eines Wettbewerbers: Könntest du beide tauschen, ohne dass es jemand merkt, ist sie nicht konkret genug.

Nutze die erklärende Zeile für das Wie oder den Beleg, nicht für eine Wiederholung. Mehr zur Formulierung findest du unter Texte für Visuals schreiben und visuelle Hierarchie.

Drei Hero-Layouts, die funktionieren

• Zentriert. Headline, Zeile und Button übereinander in der Mitte, auf einem Hintergrund. Stark für Marken, Launches und Produkte, die eher ein Gefühl als ein Bildschirm sind.
• Geteilt. Text links, Produktbild oder Screenshot rechts. Am besten, wenn das Produkt zu sehen das Argument ist: Apps, physische Waren, Essen.
• Randloses Bild oder Video. Ein Foto oder Loop füllt den Bildschirm, der Text steht auf einer ruhigen Fläche. Passt zu Hotels, Restaurants, Events und Portfolios, sofern die Lesbarkeit sauber gelöst ist.

Der Call to Action

Ein primärer Button, nach der Headline das visuell stärkste Element. Beschrifte ihn mit dem, was als Nächstes passiert, nicht mit einem allgemeinen Verb: „Kostenlos testen“, „Tisch reservieren“, „Speisekarte ansehen“. Wenn du eine zweite Option ergänzt, mach sie zu einem leiseren Textlink, damit die beiden nie konkurrieren.

Hero-Hintergründe und Lesbarkeit

Der Hintergrund macht den halben Eindruck aus und ist der häufigste Grund, warum ein Hero scheitert. Unruhige Fotos und grelle Verläufe kämpfen mit der Headline, und ein dunkles Overlay über allem macht die Stimmung platt. Plane eine ruhige Fläche hinter dem Text, halte die unruhigsten Details davon fern und prüfe den Kontrast bei jeder Bildschirmbreite, denn der Bereich hinter dem Text verschiebt sich, wenn sich das Layout neu anordnet.

Hier ist ein Mark von Gradiently nützlich: Sein ruhigster, kontrastreichster Bereich wandert hinter deine Wörter, und die Schriftfarbe wird aus seiner eigenen Palette gewählt, sodass die Headline in 1920×1080 und auf dem Handy lesbar ist, ohne Kasten oder Schatten. Für CSS-Ansätze siehe Verlaufs-Overlay und Text auf einem Farbverlauf.

Den Hero fürs Handy gestalten

Auf dem Handy ist der Hero schmal und hoch, also stapeln sich geteilte Layouts, und randlose Bilder werden stark beschnitten. Entscheide, was das Handy zeigt, statt es dem Zufall zu überlassen: Headline und Button sollten ohne Scrollen sichtbar sein, das Bild kann nach unten wandern oder kleiner werden.

.hero {
  min-height: min(100svh, 56rem);
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  text-align: center;
}

.hero h1 {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.05;
  max-width: 18ch;
  text-wrap: balance;
}

.hero p {
  max-width: 40ch;
  margin-inline: auto;
}

Checkliste für den Hero-Bereich

1. 1

   Schreib zuerst die Headline

   Bevor du Bilder wählst, schreib fünf Headlines und nimm die konkreteste. Das Layout folgt dem Text.

2. 2

   Reduziere auf eine Aktion

   Wähle den einen nächsten Schritt, den die meisten Besucher gehen sollen, und mach ihn zum einzigen Button.

3. 3

   Wähle ein Bild, das belegt oder Stimmung setzt

   Ein Screenshot, ein Produktfoto oder ein Hintergrund, der die Marke trägt. Kein Stockfoto von Leuten, die auf Laptops zeigen.

4. 4

   Prüfe die Lesbarkeit überall

   Zieh das Browserfenster von breit nach schmal und beobachte den Text vor dem Hintergrund auf dem ganzen Weg.

5. 5

   Halte ihn schnell

   Das Hero-Bild ist oft das Größte auf der Seite. Gib ihm die richtige Größe und liefere WebP oder AVIF aus.

Der Hero eröffnet die Seite; der Rest der Seite muss das Versprechen halten. Landingpage-Design behandelt die folgenden Abschnitte.