Wir alle kennen es; man besucht eine neue Website, weiß aber auf den ersten Blick nicht genau wo man hier gelandet ist. Dann braucht man einige Augenblicke um überhaupt zu verstehen um was für ein Geschäft, Service, Produkt, etc. es sich hier handelt. Dies kann an einer fehlleitenden Überschrift, einem verwirrenden Bild oder ganz einfach an einem unpassenden Design liegen. Die meisten Internetnutzer:innen sind an diesem Punkt allerdings schon wieder in den Weiten der Suchmaschinen und stürzen sich auf den nächstbesten Treffer.
Die Hero Section – also der erste sichtbare Ausschnitt einer Website – ist hier dafür verantwortlich ob User überhaupt weiterscrollen oder sofort wieder gehen. In diesem Artikel tauchen wir in die Welt der Hero Sections ein und lernen warum sie so wichtig sind, welche Trends es gibt und wie wir sie optimal aufbauen.
Die Hero Section ist im Prinzip der erste sichtbare Bereich einer Website bzw. die oberste Section. In den meisten Fällen besteht eine Hero Section aus diesen vier Elementen:
Der Job der Hero Section ist es, die Aufmerksamkeit der Besucher:innen innerhalb von wenigen Sekunden zu fangen und das Wertversprechen zu vermitteln. Deshalb sollten alle oben genannten Elemente so formuliert und gestaltet werden, dass sie einen guten ersten Eindruck hinterlassen. Außerdem sollten die wesentlichen Inhalte einer Hero Section immer “above the fold” sein, was bedeutet, dass der Inhalt noch über dem unteren Bildschirmrand ist; dass man also nicht scrollen muss, um ihn vollständig zu sehen. Das ist im Prinzip ähnlich wie beim Zeitungsdruck wo der wichtigste Part des Titelblatts auch immer oberhalb des Falzes zu sehen ist.
Neben den oben genannten Elementen können selbstverständlich noch andere Inhalte gezeigt werden. Was genau hängt ganz von deiner Website und deinem Ziel ab. Im manchen Fällen macht es beispielsweise Sinn auf den ersten Blick bereits Social Proof wie Bewertungen oder Kundenstimmen zu zeigen. Das kann bereits im ersten Moment die Glaubwürdigkeit der Website steigern. Manchmal ist es auch passend bereits früh eine einfache Aufzählung von Dienstleistungen darzustellen um Klarheit zu schaffen.
Die erste Section deiner Website heißt nicht ohne Grund “Hero”-Section. Nicht nur für Spider Man folgt aus “großer Kraft große Verantwortung”. Wie du dir schon vorstellen kannst, ist die Hero Section der mit Abstand wichtigste Teil deiner Website. Sie bestimmt den ersten Eindruck der Nutzer*innen und hat dadurch auch maßgeblichen Einfluß darauf, ob sie weiterscrollen oder die Seite wieder verlassen (Absprungrate).
Neben dem ersten Eindruck kannst du hier auch bereits die Botschaft und die Identität deiner Marke vermitteln. Visuelle Elemente wie Farben und Schriften können bereits in den ersten Sekunden auf einer Seite eine emotionale Verbindung zu Besucher:innen aufbauen. Außerdem kannst du auch mit einem sorgfältig ausgwählten Hero Image bereits viel über deine Marke “erzählen”.
Wie genau deine Hero-Section aussehen sollte hängt ganz von dir und deinem Ziel ab. Wenn du eine Website für eine Anwaltskanzlei hast, bevorzugst du wahrscheinlich eine andere Art von Hero Section als bespielsweise ein Online Shop für Spielwaren. Wir haben einige Webdesign Trends zusammengestellt an denen du dich orientieren kannst.
Minimalistisch gestaltete Heros haben den Vorteil, dass Inhalte gezielt in den Fokus gestellt werden können. Das Bild unten zeigt die Hero Section der Hafermilch-Konzentratmarke fairmischt:
fairmischt setzt bei seiner Landing page auf ein simples und minimalistisches Design. Es werden nicht viele visuelle Elemente eingesetzt außer einem neutralen Hintergrund, einem leicht dekorierten Produktbild und dem Logo der Marke. Auch die Überschrift ist simpel, aber aussagekräftig und ist in einer passenden und leicht zu lesenden Schriftart gehalten. Außerdem dient der Minimalismus bei fairmischt als visuelles Mittel um den Wert der Marke zu unterstreichen: Weniger Verpackungsmüll.
Ein weiterer großer Trend im Webdesign sind Farbverläufe aus zwei oder mehreren Farben. Diese können einem Hero Tiefe und somit eine gewisse visuelle Anziehungskraft verleihen.
Oft bereitet dieser Schritt einiges an Kopfzerbrechen und benötigt sehr viel Zeit. Das ist auch richtig so! Denk daran, dass deine Headline das erste ist, was neue Besucher:innen auf deiner Website sehen. Sie sollte also mit Sorgfalt und Bedacht gewählt werden. Es gibt hier keine Regeln wie kreativ, zusammenfassend oder “reißerisch” deine Überschrift ausfallen sollte. Allerdings solltest du es in den meisten Fällen vermeiden, dein Unternehmen in der Überschrift ganz trocken zu beschreiben oder zu versuchen, es in einem zu langen Satz exakt zusammenzufassen.
Bei deinem Call to Action (CTA) Button solltest du klar und einheitlich bleiben damit deine User ihn auch als eindeutige Handlungsaufforderung wahrnehmen. In den meisten Fällen lässt sich das primäre Ziel einer Website auf nur einen einzigen CTA herunterbrechen wie z.B. “Jetzt beitreten”, “Angebot anfordern”, etc. Vermeide hier mehrere verschiedene CTA’s zu verwenden oder das Wording zu verändern. Dies kann zu Verwirrung führen und somit die Conversion Rate und somit deinen Umsatz verringern. Falls du doch verschiedene CTA’s nutzen möchtest solltest du sie zumindest visuell so unterscheiden, dass es immer einen klaren primären CTA gibt. Dies würde zum Beispiel der Fall sein, wenn du zwei klar abgegrenzte Zielgruppen hast.
Das Visual das du für deine Hero Section verwendest, sollte dein Produkt oder deine Dienstleistung gut darstellen oder untermalen. Im optimal Fall wählst du ein Visual welches mit deiner Headline harmoniert und die Aufmerksamkeit auf den CTA richtet, sodass es deine User neugierig macht. Das Visual muss allerdings nicht unbedingt eine perfekte Repräsentation deines Produktes oder Services sein. In vielen Fällen ist es auch passen ein ästhetisches Hintergrundbild oder ein Bild von Menschen zu nutzen welches nicht direkt etwas über dein Unternehmen aussagt. In diesem Fall solltest du aber darauf achten, dass deine Headline aussagekräftig so ist, dass sie auch alleine stehen könnte. Du brauchst also einen Eyecatcher, um die Aufmerksamkeit bereits auf der Startseite zu erlangen. Sie können auch teile der Hero Section animieren, um das zu schaffen, oder um auf den Call to action zu lenken.
Wenn du eine gute Hero Section erstellen möchtest, solltest du unbedingt darauf achten, das sie auf allen Bildschirmgrößen gut aussieht und funktioniert. Auf der mobilen Version deiner Website kann es Sinn machen deine Inhalte anders anzuordnen oder bestimmte Elemente zu entfernen. Eine responsive Seite hat nicht nur positiven Einfluss auf das Nutzererlebnis sondern kommt auch bei Suchmaschinen sehr gut an und kann somit deine Sichtbarkeit erhöhen. Mehr zum Thema Suchmaschinenoptimierung findest du in unserem Artikel zum Thema Suchmaschinenoptimierung – Was ist SEO? Apropos SEO: Auch Navigation bzw Menü sollten natürlich vorhanden sein – allerdings so, dass Suchmaschinen diese auch als solches erkennen.
Ein gutes Hero Image oder Video kann sofort die gesamte Hero Section anders aussehen lassen. Sieh dir Beispiele auf Seiten wie Dribble oder X an, um die Inspiration für das perfekte Hero Image zu holen. Auch Landing Pages haben oft Designs, von denen man sich inspirieren lassen kann.
Du kannst diesen Bereich deiner Website beliebig oft ändern und Optimierungen vornehmen. Du solltest natürlich nicht alle 2 Wochen eine Änderung vornehmen, die alles komplett verändert. Allerdings gibt es viele Unternehmen, die bereits “Above The Fold” Aktionen bewerben. Dabei nutzen Sie allerdings ein aussagekräftiges Bild und belassen sonstige Buttons und Texte an dem gleichen Ort, damit sich zwar die Texte ändern, allerdings die Conversion Rate nicht unbedingt durch das Design beeinflusst wird. Auch Apple nutzt bei neuen Produkten immer neue Bilder und Texte, Design und Ort der Buttons und Schriftgröße bleibt allerdings zum großen Teil gleich.
Eine Hero Section ist mehr, als nur ein Bild, eine Überschrift und eine Unterüberschrift. Du kannst dich in der Hero Section einer Website kreativ austoben, solang du die oben genannten Punkte beachtest. Denn dieser erste Teil, den Besucher sehen, genau der entscheidet innerhalb von Sekunden, wie viele Leads du generieren kannst. Egal welches Ziel du verfolgst: Ob Anfrage, Newsletter oder Produktkauf.
Du benötigst Hilfe beim Thema Hero Section oder möchtest dich beraten lassen? Dann kontaktiere uns!
Sende uns jetzt eine unverbindliche Anfrage und wir werden die optimale Lösung finden, um dich von deiner besten Seite zu zeigen. Wir freuen uns auf deine Anfrage.
Professionelles Webdesign, Entwicklung und Wartung. Unsere Kunden schätzen unsere persönliche Beratung und zuverlässige Betreuung.
