Hero Section gestalten: fünf Schritte zur klaren Startseite

Die Hero Section ist der Bereich, den Besucher sehen, bevor sie auch nur einen Millimeter scrollen. Dort entscheidet sich in wenigen Sekunden, ob jemand merkt, was du anbietest, und ob er weiterliest. In dieser Anleitung gehe ich fünf Schritte durch, mit denen du eine Hero Section gestaltest, die klar ist, schnell lädt und auf dem Smartphone genauso funktioniert wie am Rechner. Am Ende steht ein kurzer Test, mit dem du deine eigene Startseite prüfen kannst.

Was eine Hero Section leisten muss

Mit Hero Section ist der oberste Bereich einer Seite gemeint, meist mit großer Überschrift, einer kurzen Unterzeile, einem Button und einem Bild. Du kennst den Begriff vielleicht auch als Hero Bereich oder als „Above the Fold“. Das stammt aus der Zeitung: Was oben auf der ungefalteten Seite steht, sieht man im Kiosk zuerst. Im Netz ist die Falz der untere Rand des Bildschirms, bevor man scrollt.

Diese Fläche hat genau drei Aufgaben. Sie sagt, worum es geht. Sie zeigt, für wen das Angebot gedacht ist. Und sie nennt den nächsten Schritt. Alles andere ist Dekoration, und Dekoration darf mitspielen, aber nie die drei Aufgaben verdecken.

Ein Beispiel aus dem Alltag: Stell dir einen Schreinerbetrieb in Trier vor, der Küchen nach Maß baut. Der Besucher kommt über Google auf die Startseite. Wenn er dort ein Foto von einem Hobel und die Überschrift „Willkommen auf unserer Website“ sieht, muss er raten. Steht dort stattdessen „Küchen nach Maß aus der Region Trier“ mit einem Foto einer fertigen Küche und einem Button „Beratungstermin anfragen“, weiß er nach zwei Sekunden Bescheid.

Die folgenden fünf Schritte bauen aufeinander auf. Arbeite sie in dieser Reihenfolge ab, denn Bild und Farbe kommen bewusst zuletzt. Wer mit dem Bild beginnt, richtet den Text nach dem Foto aus und nicht umgekehrt.

Schritt 1: Das Versprechen in einem Satz

Bevor du irgendetwas gestaltest, schreib auf, was dein Besucher hier bekommt. Ein Satz, ohne Fachwörter, so dass ihn auch jemand versteht, der dein Geschäft nicht kennt. Hilfreich ist diese Vorlage: „Wir helfen [wem] dabei, [was zu erreichen].“

Der Satz ist noch nicht die Überschrift. Er ist das Fundament, aus dem Überschrift und Unterzeile entstehen. Zwei Prüffragen helfen dir dabei:

• Wer genau? „Unternehmen“ ist keine Zielgruppe. „Handwerksbetriebe in der Region Trier“ ist eine.
• Welches Ergebnis? Nicht „bieten Lösungen an“, sondern etwas, das man sich vorstellen kann: „mehr Anfragen über die Website“, „eine Küche, die in den Raum passt“.

Fällt dir der Satz schwer, liegt das selten am Schreiben. Meistens ist dann das Angebot selbst noch unscharf. Das ist eine nützliche Erkenntnis, denn eine Hero Section kann nichts klar machen, was dahinter nicht klar ist.

Schritt 2: Überschrift und Unterzeile aufbauen

Die Überschrift trägt das Versprechen, die Unterzeile liefert den Beleg oder die Erklärung. Beide zusammen sollten auf dem Smartphone ohne Scrollen lesbar sein.

Für die Überschrift gelten ein paar einfache Regeln:

• Kurz bleiben. Sieben bis zehn Wörter sind ein guter Richtwert. Alles darüber wird auf dem Handy schnell zu einem Textblock.
• Das Angebot nennen. Wer nach „Webdesign Trier“ sucht und auf einer Seite landet, sollte das Thema in der Überschrift wiederfinden. Das hilft auch der Suchmaschine, denn die Hero-Überschrift ist in der Regel die H1 der Seite, und die gibt es pro Seite nur einmal.
• Ein Gedanke pro Überschrift. Wer zwei Versprechen in einen Satz packt, schwächt beide.
• Keine Floskeln. „Willkommen“, „Ihr Partner für alles“ und „Qualität seit Jahren“ passen auf jede Firma und sagen damit über keine etwas.

Die Unterzeile ist der Platz für eine Konkretisierung. Sie darf zwei Sätze lang sein und etwas liefern, das die Überschrift nicht schafft: den Ort, den Zeitrahmen, eine Besonderheit. „Küchen nach Maß aus der Region Trier“ als Überschrift, darunter „Von der Planung bis zum Einbau aus einer Hand, mit persönlicher Beratung vor Ort“. Das ist fachlich ruhig, ehrlich und prüfbar.

Beim Thema Lesbarkeit kommt ein Punkt oft zu kurz: der Kontrast. Die Web Content Accessibility Guidelines, kurz WCAG, verlangen für normalen Text ein Kontrastverhältnis von mindestens 4,5 zu 1 und für großen Text mindestens 3 zu 1. Das klingt technisch, lässt sich aber mit kostenlosen Kontrastprüfern in Sekunden messen. Besonders kritisch ist Text direkt auf einem Foto. Ist das Motiv zu unruhig, lege eine halbtransparente dunkle Fläche zwischen Bild und Text, oder setze den Text in eine eigene Fläche neben das Bild. Wie sich solche Anforderungen in die Praxis übersetzen, habe ich im Beitrag zur Barrierefreiheit nach BFSG zusammengefasst.

Schritt 3: Einen klaren Button setzen

Ein Besucher, der verstanden hat, worum es geht, braucht einen nächsten Schritt. Das ist der Button. Er ist die Brücke zwischen Interesse und Anfrage, und deshalb gehört er in die Hero Section und nicht erst weiter unten.

Worauf es ankommt:

1. Ein Hauptbutton. Der wichtigste nächste Schritt bekommt die auffälligste Farbe. Ein zweiter, ruhigerer Button für alle, die noch nicht so weit sind, ist in Ordnung, zum Beispiel „Referenzen ansehen“. Drei oder vier gleich laute Buttons nehmen sich gegenseitig die Wirkung.
2. Beschriftung mit Verb und Ergebnis. „Beratungstermin anfragen“ oder „Angebot einholen“ sagt, was passiert. „Mehr erfahren“ und „Weiter“ sagen es nicht.
3. Zur Zielgruppe passend. Wer ein kleines Budget hat und zum ersten Mal mit einer Agentur spricht, scheut oft eine verbindliche Anfrage. „Unverbindlich besprechen“ senkt die Hürde, ohne etwas zu versprechen, was du nicht halten willst.
4. Ausreichend groß. Als Faustregel für Touch-Flächen gelten rund 44 mal 44 Pixel. Alles darunter wird auf dem Handy zur Fummelei.

Welche Buttons bei dir tatsächlich Anfragen bringen, zeigt sich in der Praxis. Wie du das systematisch auswertest und Stück für Stück verbesserst, steht im Beitrag über Conversion Optimierung für KMU.

Schritt 4: Bild oder Video bewusst wählen

Jetzt, wo Text und Button feststehen, kommt das Bild. Es soll die Aussage unterstützen und nicht gegen sie arbeiten. Vier Fragen helfen bei der Wahl:

• Zeigt es dein Angebot oder deinen Betrieb? Ein eigenes Foto von deiner Arbeit, von deinem Team oder von einem echten Ergebnis wirkt glaubwürdiger als Bildmaterial, das jede Konkurrenz auch nutzen könnte. Gerade bei lokalen Betrieben ist das ein Vorteil, den große Anbieter nicht haben.
• Lässt es Platz für Text? Ein Bild mit ruhigen Flächen trägt Überschrift und Button, ein unruhiges Motiv nicht.
• Beschneidet es sich gut? Auf dem Handy wird das Bild anders zugeschnitten als am Rechner. Das Motiv muss in beiden Formaten funktionieren.
• Ist es schnell genug? Das ist die Frage, die am häufigsten übersehen wird.

Das Bild der Hero Section ist meist das größte sichtbare Element der Seite. Genau dieses Element misst Google beim Largest Contentful Paint, kurz LCP. Als gut gilt ein Wert von höchstens 2,5 Sekunden. Ein riesiges Foto direkt von der Kamera kann diesen Wert allein sprengen. Deshalb gelten für das Hero-Bild ein paar feste Regeln:

• Komprimiere es und nutze ein modernes Format wie WebP oder AVIF.
• Liefere es in der passenden Größe aus, nicht in 4000 Pixeln Breite für einen Bildschirm, der 400 anzeigt.
• Gib Breite und Höhe an, damit die Seite beim Laden nicht springt.
• Lade das Hero-Bild nicht verzögert. Das „Lazy Loading“ ist für Bilder weiter unten gedacht und verlangsamt hier den ersten Eindruck.

Die vollständige Checkliste zu Ladezeiten findest du im Beitrag Ladezeit optimieren.

Und das Video im Hintergrund? Es sieht beeindruckend aus, hat aber einen Preis. Es lädt deutlich mehr Daten, startet auf dem Smartphone nur dann von allein, wenn es stumm geschaltet ist, und es lenkt schnell vom Text ab. Für die meisten kleinen und mittleren Firmenseiten ist ein gutes Standbild die bessere Wahl. Wenn du doch Video einsetzen willst, dann kurz, stumm, mit einem Standbild als Platzhalter und mit einer ruhigen Fläche für den Text.

Gleiches gilt für Karussells, also Bildfolgen, die sich automatisch weiterschieben. Sie verstecken Inhalte hinter dem ersten Bild, und wer gerade liest, wird vom nächsten Bild unterbrochen. Mein Rat für Firmenseiten: ein Bild, eine Aussage.

Schritt 5: Zuerst das Smartphone prüfen

Viele Seiten werden am Rechner entworfen und erst am Ende auf dem Handy getestet. Besser ist die Gegenrichtung. Wer mit der Handyansicht beginnt, muss sich auf das Wesentliche beschränken, und der Rest wächst für den großen Bildschirm dazu. Warum dieser Ansatz sich bewährt hat, erkläre ich im Beitrag zu Mobile First Webdesign.

Für die Hero Section heißt das konkret:

• Überschrift, Unterzeile und Button passen in den ersten Bildschirm. Teste mit einem kleinen Gerät, nicht nur mit einem aktuellen Großformat-Handy.
• Die Höhe ist begrenzt. Eine Hero Section, die auf dem Handy drei Bildschirmhöhen einnimmt, ist keine mehr. Auch am Rechner muss sie nicht den ganzen Bildschirm füllen. Ein Stück vom nächsten Abschnitt am unteren Rand zeigt, dass es weitergeht.
• Die Navigation ist klein und klar. Ein aufgeklapptes Menü, das den halben Bildschirm belegt, zerstört jede Startansicht.
• Der Cookie-Hinweis sitzt unten. Ein Banner, das Überschrift und Button verdeckt, kostet dich genau die Aufmerksamkeit, die du gerade aufgebaut hast. Er darf nicht verschwinden, aber er sollte dem Inhalt nicht im Weg stehen.
• Der Text bleibt echter Text. Schreib Überschrift und Unterzeile nicht in das Bild. Als Text sind sie skalierbar, durchsuchbar und für Screenreader lesbar.

Schnelltest und nächster Schritt

Mit diesem Test prüfst du deine Hero Section in unter fünf Minuten. Öffne deine Startseite auf dem Smartphone, ohne zu scrollen, und beantworte diese Fragen:

1. Weiß ein Fremder nach drei Sekunden, was du anbietest?
2. Steht dort, für wen es gedacht ist oder wo du tätig bist?
3. Gibt es genau einen auffälligen Button, und sagt seine Beschriftung, was danach passiert?
4. Ist der Text gut lesbar, auch bei Sonnenlicht und auf dem Bild?
5. Lädt die Seite spürbar schnell, und springt beim Laden nichts?
6. Zeigt das Bild etwas Echtes aus deinem Betrieb und nicht nur Atmosphäre?

Der Drei-Sekunden-Test lässt sich gut mit einer fremden Person durchführen. Zeig ihr die Seite für drei Sekunden, nimm sie weg und frag, was sie gesehen hat. Was zurückkommt, ist deine tatsächliche Botschaft, unabhängig davon, was du dir beim Gestalten gedacht hast.

Zum Mitnehmen, die fünf Schritte noch einmal in Kürze:

1. Das Versprechen in einem Satz aufschreiben.
2. Überschrift und Unterzeile daraus bauen, lesbar und mit Kontrast.
3. Einen Hauptbutton mit klarer Beschriftung setzen.
4. Ein schnelles Bild wählen, das etwas Echtes zeigt.
5. Alles zuerst auf dem Smartphone prüfen.

Lass uns gemeinsam deine Startansicht klarer machen. Schreib mir über das Kontaktformular, welche Seite du verbessern willst und was dort bisher passiert. Wir schauen zusammen, ob Versprechen, Button und Bild zusammenpassen und ob eine kleine Korrektur reicht oder ein Neuaufbau sinnvoller ist. Wie ich bei Webdesign in Trier vorgehe, steht auf der Leistungsseite.