Hero-Layout
Ein Hero-Layout ist der große, auffällige Bereich ganz oben auf einer Webseite, den man ohne Scrollen sofort sieht. Er kombiniert meist ein großes Bild oder Video mit einer kurzen Überschrift und einem Klick-Button.
Öffnest du eine Webseite, siehst du zuerst nur den oberen Teil des Bildschirms. Erst wenn du mit dem Finger oder der Maus nach unten schiebst, erscheint der Rest. Genau diesen ersten sichtbaren Bereich gestalten viele Seiten besonders groß und auffällig. Man nennt ihn Hero-Layout, also sinngemäß den „Heldenbereich“ der Seite. Typisch dafür sind ein bildschirmfüllendes Foto, ein kurzer Satz in sehr großer Schrift und eine Schaltfläche wie „Jetzt testen“. Der Name kommt aus der Werbebranche und meint das eine Motiv, das die Hauptrolle spielt.
Die ersten Sekunden entscheiden
Untersuchungen zum Nutzerverhalten zeigen immer wieder dasselbe Muster. Menschen entscheiden binnen weniger Sekunden, ob sie auf einer Seite bleiben. In dieser Zeit lesen sie keine Absätze, sondern überfliegen nur das Größte und Farbigste. Das Hero-Layout ist deshalb die einzige Botschaft, die praktisch jeder Besucher wahrnimmt.
Für Firmen hat dieser Bereich handfesten Geldwert. Ein Online-Shop platziert dort das Angebot, das er verkaufen will. Ein Software-Anbieter erklärt in einem Satz, wofür sein Produkt gut ist. Wird der Text unklar formuliert, springen mehr Besucher sofort wieder ab. Diese Abbruchquote lässt sich messen, weshalb Hero-Bereiche oft in Varianten getestet werden.
Es gibt aber auch Kritik an dem Muster. Ein riesiges Bild schiebt alle nützlichen Informationen nach unten. Wer eine Telefonnummer oder einen Preis sucht, muss erst scrollen. Manche Seiten verzichten deshalb bewusst auf ein Hero-Layout und beginnen direkt mit Inhalt.
Woraus so ein Bereich zusammengesetzt ist
Technisch ist ein Hero-Layout ein Kasten, dessen Höhe sich am Bildschirm orientiert. Webseiten werden mit HTML beschrieben, das den Inhalt festlegt, und mit CSS, das das Aussehen bestimmt. In CSS gibt man dem Kasten oft eine Höhe von hundert Prozent der Bildschirmhöhe. Dadurch füllt er auf einem Handy genauso den sichtbaren Bereich wie auf einem großen Monitor.
Im Inneren liegen meist vier Elemente übereinander gestapelt. Ganz hinten das Hintergrundbild oder ein stumm laufendes Video. Darüber eine halbdurchsichtige dunkle Fläche, damit die Schrift lesbar bleibt. Dann die Hauptüberschrift, ein erklärender Nebensatz und schließlich der Button. Diesen Button nennt man Call to Action, also die Handlungsaufforderung an den Besucher.
Die größte Schwierigkeit ist die Ladezeit. Ein hochauflösendes Foto kann mehrere Megabyte groß sein und blockiert den Seitenaufbau. Entwickler liefern deshalb je nach Gerät verschieden große Bildversionen aus. Ein Handy bekommt eine kleinere Datei als ein Desktop-Rechner. Suchmaschinen messen inzwischen, wie schnell dieses erste große Element erscheint, und bewerten langsame Seiten schlechter.
Von Startup-Seiten bis zum KI-Chatbot
Am deutlichsten begegnet dir das Muster auf den Seiten von Technologiefirmen. Fast jede Startseite eines KI-Anbieters folgt demselben Aufbau: ein kurzer Anspruch in Riesenschrift, darunter ein Feld zum Ausprobieren. Auch Streamingdienste, Autohersteller und Reiseportale arbeiten so. Wenn dir viele Seiten seltsam ähnlich vorkommen, liegt das an dieser weit verbreiteten Vorlage.
In Fachtexten und Design-Diskussionen taucht der Begriff regelmäßig auf. Dort wird etwa gestritten, ob ein Hero-Bereich mit wechselnden Bildern sinnvoll ist. Solche automatisch weiterlaufenden Bilderfolgen heißen Slider und gelten heute als eher nachteilig. Nutzer übersehen sie oder haben nicht genug Zeit zum Lesen.
Ein häufiger Irrtum ist, Hero-Layout und Banner gleichzusetzen. Ein Banner ist ein schmaler Werbestreifen, oft von einer fremden Firma bezahlt. Das Hero-Layout dagegen gehört fest zur Seite und trägt deren eigene Kernbotschaft. Auch Baukastensysteme wie Website-Builder bieten es als fertigen Baustein an, meist unter genau diesem Namen.