Hero-Section-Design für SaaS-Websites: Anleitung, Best Practices und Beispiele

Wir haben unser Designteam gefragt, an welchem Teil einer Seite sie am meisten arbeiten und was für sie die höchste Priorität hat. Die Antwort: das Design des Hero-Bereichs.

Ein Hero-Bereich ist der erste Bildschirmabschnitt deiner Seite. Er besteht aus einer Überschrift, einem erklärenden Untertitel, einem Call-to-Action und einem visuellen Element. Er vermittelt Besuchern sofort, was du anbietest und was sie als Nächstes tun sollen – deshalb entscheidet er darüber, ob sie weiter scrollen. Die Eye-Tracking-Studie der Nielsen Norman Group aus dem Jahr 2018 ergab, dass Nutzer etwa 57 % ihrer Zeit auf einer Seite im Bereich „above the fold“ verbringen – also genau dort, wo sich der Hero-Bereich befindet.

Als wir dasselbe Team nach ihrem Geheimnis für einen effektiven Hero-Bereich fragten, rieten sie uns, die Seiten zu analysieren, die für ihre hohen Konversionsraten bekannt sind. Diesen Rat haben wir uns zu Herzen genommen und die Hero-Bereiche bekannter SaaS-Unternehmen Schritt für Schritt unter die Lupe genommen. Dieser Leitfaden ist das Ergebnis unserer Erkenntnisse.

Er richtet sich speziell an SaaS-Marketingverantwortliche und Gründer, die ihren ersten Bildschirmbereich nutzen möchten, um Besucher zu begeistern und in Kunden zu verwandeln. Das erwartet dich in den nächsten 20 Minuten:

• Was ist ein Hero-Bereich auf einer Landingpage?
• Unterschiede im Hero-Design: normale Unternehmen vs. SaaS
• Der Aufbau eines SaaS-Hero-Bereichs
• So gestaltest du einen Hero-Bereich
• Hero-Designs nach SaaS-Typ und Stil
• Analysierte Beispiele für SaaS-Hero-Bereiche
• Häufige Fehler und wann man auf einen Hero-Bereich verzichten sollte
• So erstellst und testest du deinen Hero-Bereich in Webflow

Viel Spaß beim Lesen!

Was ist ein Hero-Bereich im Webdesign?

Im Webdesign ist der Hero-Bereich einer Website der erste Block, den ein Besucher auf einer Seite sieht. Er besteht aus einer Überschrift, einem kurzen Untertitel, einem Call-to-Action (CTA) und einem visuellen Element. Oft wird auch nach dem Begriff Website-Herogesucht, und im deutschsprachigen Raum wird er häufig als Hero-Bereich.

Der Name ist Programm, denn dieser Bereich führt die Seite an, genau wie ein Held eine Geschichte anführt. Jeder nachfolgende Abschnitt stützt das Versprechen, das der Hero-Bereich gibt. Das visuelle Element wird oft als Hero-Bild (Hero-Bild auf Deutsch) bezeichnet. Die besten Beispiele zeigen das eigentliche Produkt und nicht etwa ein Stockfoto von Kollegen, die begeistert auf einen Laptop zeigen.

Die Begriffe werden oft durcheinandergebracht, deshalb hilft diese Tabelle bei der Unterscheidung.

‍

Das Design eines SaaS-Hero-Bereichs hat fünf Sekunden Zeit, um zu überzeugen

Für den ersten Eindruck gibt es keine zweite Chance, und im SaaS-Bereich bleiben dafür gerade einmal fünf Sekunden. Besucher vergleichen oft mehrere Tools in verschiedenen Tabs. Sie bewerten jede Seite blitzschnell und schließen diejenige, bei der sie zu lange nachdenken müssen. Das macht das Design des Hero-Bereichs einer Website zu einem der kritischsten Elemente einer SaaS-Seite.

Eine Untersuchung von 28 SaaS-Websites zeigt, wie oft der erste Bildschirm sein Ziel verfehlt.

• 60,7 % hatten eine Hero-Überschrift, die innerhalb von fünf Sekunden verständlich war.
• 32,1 % benötigten zusätzliche Erklärungen.
• 7,1 % waren allein anhand der Überschrift nicht zu verstehen.

Jede unklare Überschrift gibt Besuchern einen Grund zu gehen, und jeder Besucher, der die Seite verlässt, erhöht deine Absprungrate (Absprungrate auf Deutsch). Das Problem der Unklarheit besteht, obwohl 82,14 % dieser Seiten einen klaren CTA hatten. Ein sichtbarer Button rettet also keine verwirrende Botschaft. Die Lösung ist meist nicht visueller Natur, und der Praxisteil zeigt, warum das so ist.

Best Practices für das Design von SaaS-Hero-Sections, Element für Element

Welche Teile einer Hero Section leisten die eigentliche Arbeit und welche Regel sollte für jeden einzelnen gelten? Die besten Hero-Section-Designs für SaaS basieren auf ein paar einfachen Regeln, und für jede der folgenden gibt es einen guten Grund. Diese Best Practices für das Hero-Section-Design (oder Gestaltungstipps für die Hero Section, wie man im Deutschen sagt) sind nach Elementen gruppiert. Diese Tabelle bietet eine Kurzfassung, bevor wir uns die einzelnen Teile genauer ansehen.

‍

Überschrift und Unterüberschrift

Was sollte eine SaaS-Überschrift eigentlich aussagen? Sie sollte das Ergebnis benennen, das der Besucher erhält, denn Menschen beurteilen eine Seite danach, was sie für sie tut, und nicht danach, zu welcher Kategorie sie gehört. Ein nützlicher Check ist der Vier-Fragen-Test: Für wen ist das Produkt, welches Problem löst es, wie löst es das Problem und welches Ergebnis erhält der Besucher?

Bei der Länge gehen die Meinungen auseinander; die Empfehlungen reichen von unter 8 Wörtern bis hin zu 5 bis 7 Wörtern. Ein Bereich von etwa 5 bis 10 Wörtern funktioniert gut, da kürzere Überschriften zur Präzision zwingen, während noch kürzere Formulierungen den Kontext nehmen können, den ein neuer Besucher braucht. Ein Beispiel: „Analytik der nächsten Generation für moderne Teams“ beschreibt eine Kategorie, während „Kampagnenausgaben in einem Dashboard mit der Pipeline verknüpfen“ eine konkrete Aufgabe beschreibt.

Die Unterüberschrift ergänzt ein Detail, das nicht mehr in die Überschrift passte, etwa für wen das Produkt gedacht ist oder wie es funktioniert. Halte dich auf ein oder zwei Sätze beschränkt, da ein längerer Textblock den CTA weiter nach unten schiebt. Auf dem Desktop Spell UI empfiehlt Überschriften von etwa 48 bis 72 px und Unterüberschriften von 18 bis 22 px, um einen klaren visuellen Abstand zwischen den beiden Ebenen zu wahren.

Call-to-Action

Wie viele Buttons braucht eine Hero Section? Eine primäre Aktion reicht in den meisten Fällen aus, und die Daten bestätigen das: Im Durchschnitt finden sich 1,4 CTAs pro SaaS-Hero-Section. Ein zweiter Button ist nur dann sinnvoll, wenn er eine andere Absicht verfolgt, wie zum Beispiel „So funktioniert’s“ für Besucher, die noch nicht bereit für eine Anmeldung sind.

Zwei gleichwertige Buttons zwingen den Besucher zu einer Entscheidung, und wer sich entscheiden muss, springt oft lieber ab. Gestalte den primären Button größer und kontrastreicher und halte den sekundären optisch zurückhaltender. Verwende ein Verb, das zeigt, was als Nächstes passiert, und füge bei Bedarf einen kurzen Hinweis zur Beruhigung hinzu, wie etwa „Keine Kreditkarte erforderlich“, sofern das zutrifft.

Dein Vertriebsmodell sollte die Wortwahl bestimmen. Betrachte diese Tabelle daher als Ausgangspunkt und nicht als starre Regel.

‍

Das Ziel muss zum Versprechen passen, denn ein „Kostenlos starten“-Button, der ein Vertriebsformular öffnet, zerstört das Vertrauen schon beim ersten Klick. Besucher, die ein kostenloses Konto erwarten und stattdessen eine Demo anfragen sollen, fühlen sich schnell getäuscht. Achte also darauf, dass Beschriftung und Ziel übereinstimmen.

Produktvisualisierung und Hero-Bild

Untersuchungen zeigen, dass 75 % der analysierten SaaS-Websites ein hervorgehobenes Bild im Hero-Bereich verwenden. Das Visuelle ist also der Standard – die eigentliche Frage ist, was es zeigt. Bei SaaS sollte es das Produkt sein, denn Menschen vertrauen dem, was sie sehen können. Von den Seiten mit einem solchen Bild zeigten 57,1 % die Benutzeroberfläche des Produkts, 33,3 % nutzten Illustrationen und nur 9,5 % echte Menschen.

Stell dir einen Screenshot vor, der so stark verkleinert wurde, dass die Zahlen im Dashboard nur noch wie graue Linien aussehen. Der Besucher kann nicht erkennen, was das Produkt tut, also beweist das Bild gar nichts. Wähle einen Ausschnitt, der deine Überschrift untermauert, und verwende Videos nur dann, wenn Bewegung etwas erklären kann, das ein Standbild nicht vermittelt – etwa einen Arbeitsablauf, der sich über mehrere Schritte erstreckt.

Es gibt auch andere Arten von Hero-Bildern, darunter Kundenfotos, Bilder der Gründer oder abstrakte Grafiken ohne direkten Produktbezug. Kunden- und Gründerfotos passen gut zu Dienstleistungen und kleinen Marken, während abstrakte Bilder nur funktionieren, wenn die Überschrift für sich allein stehen kann. Für ein SaaS-Produkt ist ein Hero-Bild auf der Website das einen zugeschnittenen Screenshot mit realistischen Daten zeigt, die sicherste Wahl – und es sollte auch auf Mobilgeräten noch Sinn ergeben.

Zwei optionale Extras tauchen häufig auf. Ein Karussell lässt mehrere Hero-Folien im selben Bereich rotieren, und ein Utility-Streifen vor oder nach dem Hero ist eine kleine Zeile mit Text und Symbolen, etwa zu den Tools, mit denen dein Produkt kompatibel ist, die direkt über oder unter dem Hero platziert wird. Jedes dieser Elemente bedeutet für Besucher einen zusätzlichen Verarbeitungsschritt. Füge sie also erst hinzu, wenn der Kern deines Hero-Bereichs den Fünf-Sekunden-Test besteht.

Social Proof und Navigation

Wo sollten Vertrauenssignale platziert werden? Am besten in der Nähe der Aussage, die sie stützen sollen, denn Beweise verlieren ihre Wirkung, wenn sie drei Scroll-Längen vom Versprechen entfernt stehen. Eine Studie von Tenet ergab, dass nur 46,43 % der SaaS-Hero-Bereiche irgendeine Form von Social Proof enthalten, mit durchschnittlich 1,54 Elementen. Ein oder zwei relevante Signale, wie Kundenlogos, die deine Käufer kennen, wirken besser als eine Wand aus unbekannten Marken.

Die Kopfzeile konkurriert mit deinem Hero-Bereich, halte sie also einfach. Die SaaS-Seiten in der Tenet-Studie hatten im Schnitt etwa fünf Menüpunkte. Ein aufgeräumtes Menü hilft Besuchern, sich auf die Überschrift und den Button zu konzentrieren. Tenet fand zudem durchschnittlich 2,2 CTAs in der Kopfzeile – das Menü ist also ein weiterer Ort, an dem Aktionen um Aufmerksamkeit buhlen. Ein einziger primärer CTA in der Kopfzeile, der zum Hero passt, sorgt für einen klaren Weg.

Visuelle Hierarchie und Weißraum

Weiß der Besucher, wo er zuerst hinschauen soll? Größe, Farbe und Kontrast bestimmen die Lesereihenfolge. Die Überschrift sollte das größte Element sein, der CTA den höchsten Kontrast haben und alles andere sollte sich dezent zurückhalten. Weißraum gruppiert zusammengehörige Elemente und gibt jedem Raum zum Atmen, was das Lesen erleichtert.

Hier ist ein einfacher Test von Exportarts: Entferne ein Element nach dem anderen. Wenn sich die Botschaft und die Ausrichtung kaum verändern, gehört dieses Element wahrscheinlich nicht dorthin.

Bewegung, Performance und Barrierefreiheit

Kann ein Hero-Bereich Bewegung enthalten und trotzdem schnell laden? Ja, solange das Hero-Animation hat einen Zweck, wie etwa ein kurzes Einblenden von Text oder eine Produktvorschau, die das Tool in Aktion zeigt. Eine Überschrift, deren Animation drei Sekunden dauert, strapaziert die Geduld der Besucher – halte Animationen also kurz. Kleine animierte Details, wie ein Hover-Effekt auf einem CTA-Button, nennt man Mikrointeraktionen, und sie funktionieren am besten, wenn sie eine Aktion bestätigen, anstatt die Seite nur zu schmücken.

Geschwindigkeit erfordert die gleiche Sorgfalt. Dein Hero-Bereich ist oft das größte Element auf dem Bildschirm und bestimmt daher meist deinen Largest Contentful Paint (LCP). Die web.dev-Richtlinien bewerten 2,5 Sekunden oder weniger als guten Wert. Komprimiere Bilder, setze Videos sparsam ein und lade Medien unterhalb des sichtbaren Bereichs erst bei Bedarf (Lazy Loading) – aber niemals den Hero-Bereich selbst, da eine Verzögerung hier den ersten Eindruck beeinträchtigt.

Barrierefreiheit rundet das Ganze ab.

• Textkontrast: Normaler Text sollte gemäß den WCAG-Richtlinienein Kontrastverhältnis von 4,5:1 erfüllen; bei kleinem Text über Verläufen oder Bildern ist besondere Vorsicht geboten.
• Reduzierte Bewegung: Respektiere die Einstellung „prefers-reduced-motion“, damit Besucher, die empfindlich auf Bewegungen reagieren, eine ruhigere Version zu sehen bekommen.
• Tastaturbedienung: Stelle sicher, dass der CTA auch ohne Maus erreicht und aktiviert werden kann.

Hero-Design: SaaS vs. andere Websites

Kann man einen SaaS-Hero genauso gestalten wie den für einen Shop oder ein Portfolio? Die vier Elemente sind zwar dieselben – Überschrift, Unterzeile, Call-to-Action und ein Bild –, aber ihre Aufgabe ändert sich. Ein Shop-Hero kann ein Produkt zeigen, das der Besucher sofort versteht, während ein SaaS-Hero Software erklären muss, die man weder anfassen noch anprobieren kann. Diese Tabelle zeigt, wo die Unterschiede liegen.

‍

Das Bild muss das Produkt in Aktion zeigen

Software hat keine greifbare Form, daher sagt ein Stockfoto von einem lächelnden Team wenig darüber aus, was du eigentlich verkaufst. Ein Ausschnitt der echten Benutzeroberfläche funktioniert meist besser.

Der Call-to-Action erfordert mehr Überwindung

Ein SaaS-Hero fordert meist zu einer Testversion oder Demo auf, was den Besucher Zeit und oft auch Kontaktdaten kostet. Unsere Untersuchungen zeigen, dass ein primärer Button am besten funktioniert. Wenn du also beides anbietest, solltest du einen davon deutlich hervorheben.

Social Proof hat mehr Gewicht

Da Besucher die Software vor dem Klick nicht testen können, muss Vertrauen durch Kundenlogos oder Nutzungszahlen aufgebaut werden. Es hat sich gezeigt, dass nur 46,43 % der untersuchten SaaS-Seiten Social Proof im Hero-Bereich nutzen, im Schnitt 1,54 Elemente. Ein oder zwei gut gewählte Vertrauensbeweise in der Nähe der Überschrift reichen also völlig aus.

Was gleich bleibt

Die Grundlagen ändern sich nicht: eine klare Überschrift, eine Hauptaktion, ein unterstützendes Bild und ein Layout, das auch auf dem Smartphone funktioniert. Genau hier hilft der fünfstufige Prozess im nächsten Abschnitt, da er bei deiner Zielgruppe und deiner Botschaft ansetzt und nicht beim Layout.

So gestaltest du einen SaaS-Hero-Bereich – Schritt für Schritt

Hier ist der Schritt, den die meisten Teams zuletzt machen, der aber an den Anfang gehört: die Botschaft formulieren, bevor man sich für ein Layout entscheidet. Ein Layout, das auf einer schwachen Botschaft aufbaut, lässt sich auch durch gute Typografie nicht retten, während eine klare Botschaft selbst ein durchschnittliches Layout überlebt. Deshalb beginnen die folgenden fünf Schritte mit dem Text und enden mit der Umsetzung.

Schritt 1: Zielgruppe und Absicht definieren

Besucher kommen mit unterschiedlichen Erwartungen, und ihre Absicht lässt sich in vier Typen unterteilen:

1. Informationell
2. Bildungsorientiert
3. Kommerziell
4. Transaktional.

Wer nach „Was ist Datenmanagement“ sucht, braucht eine informative Seite, während jemand, der nach der „besten Datenmanagement-Lösung“ sucht, vielleicht schon bereit für einen „Jetzt starten“-Button ist. Ein Hero, der dem ersten Besucher sofort eine Testversion aufdrängt, führt oft dazu, dass er die Seite sofort wieder verlässt.

Schritt 2: Schreibe die Botschaft vor dem Layout

Beantworte sechs Fragen mit jeweils ein oder zwei Sätzen. Es geht um die Zielgruppe, die aktuelle Alternative, das Problem, deine Lösung, die dazugehörigen Funktionen und den Nutzen. Deine Antworten ergeben zusammen dein Wertversprechen, also den Grund, warum ein Besucher dein Produkt dem Tool vorziehen sollte, das er heute verwendet.

Orbix Studio beschreibt zwei Copywriting-Formeln, die daraus ein Paar aus Überschrift und Unterüberschrift machen. PAS (Problem, Agitate, Solution) benennt das Problem, zeigt die Kosten des Ignorierens auf und präsentiert dann dein Produkt als Lösung. BAB (Before, After, Bridge) beschreibt den aktuellen Zustand, dann den besseren Zustand und positioniert dein Produkt als Brücke dazwischen. Das eignet sich gut für Unterüberschriften, da dort nur Platz für einen kontrastreichen Satz ist. Entwirf anschließend drei bis fünf Richtungen für die Überschrift basierend auf dieser Tabelle, wobei die Beispiele nur Illustrationen und keine fertigen Texte sind.

‍

Schritt 3: Wähle den Beweis und das visuelle Element

Entscheide, was dein Versprechen glaubwürdig macht, bevor du irgendetwas zeichnest. Das kann ein Produkt-Screenshot, eine kurze Demo, eine Leiste mit Kundenlogos oder ein quantifiziertes Ergebnis mit Kontext sein. Ein visuelles Element, das nach der Botschaft gewählt wird, kann die Überschrift stützen, während ein zuerst gewähltes Bild oft mit ihr konkurriert.

Schritt 4: Wähle ein Layout

Die meisten SaaS-Hero-Bereiche basieren auf einem der fünf unten genannten Layouts, wobei keines davon garantiert besser konvertiert als die anderen.

‍

Für eine klassische B2B-SaaS-Seite sind das geteilte und das zentrierte Layout die üblichen Ausgangspunkte, da sie die Botschaft gut mit dem Produktbeweis in Einklang bringen.

Schritt 5: Designe Desktop und Mobile zusammen, dann baue es

Entwirf beide Größen in derselben Sitzung, denn ein Hero-Bereich, der bei 1440 px scharf aussieht, kann bei 375 px auseinanderfallen. Baue das Layout in einem Tool, das dein Team bearbeiten kann – meistens zuerst in Figma und dann in Webflow –, damit spätere Tests der Überschriften keinen Entwickler erfordern. Hier hilft ein Design- und Webflow-Abonnement, da dasselbe Team, das den Hero entwirft, ihn auch bauen und anpassen kann, ohne dass Informationen bei der Übergabe verloren gehen.

Designbeispiele für SaaS-Hero-Bereiche und was du von jedem lernen kannst

Diese neun Hero-Bereiche zeigen jeweils eine klare Idee, die du für dein eigenes Produkt adaptieren kannst. Die „Was zu vermeiden“-Hinweise basieren auf unserer Einschätzung der Screenshots und nicht auf Testergebnissen (außer bei Fluum, plancraft und bakedwith, da dies unsere eigenen Kunden sind und wir deren Performance kennen). Da sich Live-Seiten oft ändern, öffne jede Seite, um die aktuelle Version zu sehen.

‍

Navia

Hero-Typ: Vollflächiges Lifestyle-Foto als Hero-Element

Was du übernehmen solltest:

• Eine Überschrift, die die Zielgruppe und das Problem direkt anspricht, wie etwa „Unternehmer, die bis über beide Ohren in Arbeit stecken“
• Ein Untertitel, der das Ergebnis klar benennt: ein täglicher Marketingplan und mehr Zeit für die schönen Dinge im Leben
• Ein starker primärer Button für die kostenlose Option, ergänzt durch „Demo buchen“ als dezentere Alternative

Was du vermeiden solltest: ein dunkles Lifestyle-Foto ohne sichtbares Produkt zu verwenden, da Besucher so nicht erkennen können, wie das Tool aussieht.

Wispr Flow

Hero-Typ: Zentrierter Hero-Bereich mit animierter Sprachvisualisierung

Was du übernehmen solltest:

• Eine kurze, zweiteilige Überschrift, die den Nutzen auf den Punkt bringt: „Nicht tippen, einfach sprechen“
• Ein Untertitel, der die Kategorie in einer Zeile definiert: eine Voice-to-Text-KI, die gesprochene Worte in ausgefeilte Texte verwandelt
• Ein einzelner Button, direkt darunter gefolgt von den unterstützten Plattformen

Was du vermeiden solltest: einen macOS-spezifischen Button mit einer Zeile für mehrere Plattformen zu kombinieren, was Besucher auf anderen Geräten verunsichern kann, was der Button bewirkt.

Capsule

Hero-Typ: Geteilter Hero-Bereich mit Produkt-UI-Karte und Vertrauenssiegeln

Was du übernehmen solltest:

• Eine G2-Bewertung direkt über der Überschrift, damit der soziale Beweis als Erstes ins Auge fällt
• Eine Produktkarte neben dem Text, die einen echten Kontaktdatensatz und ein Projekt zeigt, damit Besucher die Software in Aktion sehen
• Eine Integrationsleiste unterhalb des sichtbaren Bereichs, die die Frage „Funktioniert es mit meinen Tools?“ beantwortet

Was du vermeiden solltest: eine Bewertung, drei Review-Badges, eine Ankündigungsleiste, einen Chat-Button und einen Feedback-Tab um einen einzigen primären Button herum zu stapeln.

plancraft

Hero-Typ: Foto-Hero mit dem Porträt eines Handwerkers, der ein Tablet hält

Was du übernehmen solltest:

• Eine Überschrift, die die Zielgruppe direkt anspricht: „Software für Handwerker“
• Vertrauensbildende Hinweise unter den Buttons: „In 5 Minuten startklar“, „Jederzeit kündbar“ und „Keine Zahlungsdaten erforderlich“
• Social Proof in zweifacher Ausführung: eine Google-Bewertung von 4,9 bei 709 Rezensionen und eine Leiste mit TV-Logos

Was du vermeiden solltest: heller, dünner grauer Fließtext über einem unruhigen Foto, was auf dem Smartphone schwer zu lesen sein kann.

bakedwith

Hero-Typ: Hero-Bereich mit linksbündigem Text und Demo-Video

Was du übernehmen solltest:

• Eine Überschrift, die klar sagt, was sie tun und für wen, wobei der Schlüsselbegriff „GTM-Workflows“ hervorgehoben ist
• Ein einziger Button, „Erstgespräch buchen“, der sowohl im Header als auch im Hero-Bereich wiederholt wird
• Ein Video-Mockup mit Benachrichtigungen von Salesforce und LinkedIn, das einen abstrakten Dienst greifbar macht

Was du vermeiden solltest: eine 38 Wörter lange Subline in einem Block, die den Besucher bittet, mehr zu lesen, als für einen Hero-Bereich nötig ist.

Fluum

Hero-Typ: Zentrierter Hero-Bereich mit E-Mail-Eingabefeld

Was du übernehmen solltest:

• Eine Zeile zur Zielgruppe über der Überschrift: „Für B2B-Teams im Enterprise-Vertrieb“
• Eine Subline, die das Angebot Schritt für Schritt erklärt: Unternehmen finden, Entscheider identifizieren und das Meeting buchen
• Eine Logo-Leiste der Käufer, die für Kunden erreicht werden, direkt unter den Handlungsaufforderungen platziert

Was du vermeiden solltest: bietet vier Wege gleichzeitig an: ein E-Mail-Feld, „Gespräch buchen“, „Was wir tun“ und eine Überschrift „Strategiegespräch buchen“.

time.fyi

Hero-Typ: Hero-Bereich mit interaktiver Produktdemo

Was du übernehmen solltest:

• Eine Überschrift, die die drei Produktbereiche Kalender, Aufgaben und Meetings auflistet, ergänzt durch kleine Icons für eine schnelle Übersicht.
• Eine Unterzeile, die das unterstützte Tool nennt: Google Kalender.
• Eine Live-Demo unter den Buttons mit einer „Ausprobieren“-Aufforderung, damit Besucher das Produkt schon vor der Registrierung testen können.

Was du vermeiden solltest: Icons direkt in den Überschriftentext einzubauen, da dies auf schmalen Smartphone-Displays zu unschönen Zeilenumbrüchen führen kann.

Weave

Hero-Typ: Zentrierter Hero-Bereich mit einer 3D-Maskottchen-Illustration.

Was du übernehmen kannst:

• Ein prägnantes Ein-Zeilen-Versprechen: „Verwandle dein Software-Team in eine Software-Fabrik“.
• Eine zweizeilige Unterzeile, die das Prinzip erklärt: Modelle, die die Arbeit in der Softwareentwicklung messen und anschließend Menschen sowie Agenten optimieren.
• Zwei Buttons mit klarer Priorisierung: die kostenlose Option in der auffälligeren Farbe und die Demo-Option in Grau.

Was du vermeiden solltest: nur ein Maskottchen zu zeigen, sodass Besucher erst scrollen müssen, um zu verstehen, was die Software eigentlich macht.

pen.dev

Hero-Typ: Minimalistischer Hero-Bereich mit einem vollständigen Produkt-Screenshot.

Was du übernehmen kannst:

• Ein einzelner Button mit der Aufschrift „Für macOS herunterladen“, ohne ablenkende Navigationsleiste.
• Ein großer Produkt-Screenshot, auf dem das Agenten-Panel und Vorschläge für Prompts zu sehen sind, damit Besucher sofort verstehen, wie es funktioniert.
• Ein Ein-Zeilen-Statement, das die Kategorie benennt: eine „agentische Arbeitsfläche“.

Was du vermeiden solltest: mit dem Markennamen und einem unbekannten Fachbegriff zu starten, ohne zu erklären, für wen das Produkt gedacht ist – das funktioniert eher bei bekannten Marken als bei neuen.

Diese neun Beispiele sind nur ein Anfang; in deinem eigenen Markt gibt es sicher noch weitere starke Vorbilder. Nutze diese Quellen zum Lernen und achte dabei immer auf die vier Punkte, die wir oben besprochen haben: die Überschrift, das visuelle Element, den Button und den Vertrauensbeweis. Eine Galerie zeigt dir, wie eine Seite aussieht, während deine Analysedaten zeigen, wie sich deine Besucher verhalten – kombiniere am besten beides.

Hier sind ein paar kostenlose Galerien zum Stöbern:

• Land-book (land-book.com): eine kostenlose Galerie mit Landingpages aus verschiedenen Branchen, darunter SaaS – ideal, um verschiedene visuelle Richtungen zu vergleichen.
• Lapa Ninja (lapa.ninja): eine kostenlose Landingpage-Galerie mit Kategorien und tausenden Designs.
• SaaSFrame (saasframe.io): eine auf SaaS spezialisierte Bibliothek für Marketing-Seiten und Hero-Bereiche, wobei für das umfangreichste Archiv ein kostenpflichtiges Abo nötig ist.
• Saaspo: eine Galerie speziell für SaaS-Websites, sortiert nach Branche und Seitenbereich.
• Landingfolio (landingfolio.com): Inspiration auf Sektionsebene, damit du dir Hero-Bereiche gezielt einzeln ansehen kannst.
• One Page Love (onepagelove.com): ein Archiv für Single-Page-Websites und Landingpages, das bis ins Jahr 2008 zurückreicht.
• Godly (godly.website): eine Galerie mit Fokus auf Animationen und Interaktionen – hilfreich, wenn du über einen bewegungsreichen Hero-Bereich nachdenkst.

Hero-Design nach SaaS-Typ und Stil

Sollten ein Entwicklertool und eine HR-Plattform denselben Hero-Bereich nutzen? Meistens nicht, denn unterschiedliche Käufer brauchen unterschiedliche Argumente. Diese Tabelle bietet eine erste Orientierung für jeden Typ – sie ist ein Ausgangspunkt, keine starre Vorlage.

‍

Ein Entwicklertool kann durchaus ein leichtes, redaktionelles Layout verwenden, und ein Analyse-Produkt kann auf einen workflow-orientierten Hero setzen, wenn das den Mehrwert besser erklärt. Betrachte jede Zeile als Richtschnur und teste sie daran, wie deine Zielgruppe Entscheidungen trifft.

Andere Website-Typen

Die gleichen Grundsätze gelten auch außerhalb von SaaS, mit ein paar Anpassungen. Ein minimalistisches Hero-Design funktioniert, wenn das Wertversprechen leicht zu erfassen ist, da der Text mehr Gewicht bekommt, wenn weniger drumherum ist. Ein E-Commerce-Hero-Design zeigt meist direkt ein Produktbild, da Kunden sehen wollen, was sie kaufen. Ein Portfolio-Hero-Design zeigt oft die Person oder die Arbeit, was dem Namen ein Gesicht gibt, und ein Raster-Hero-Design zeigt mehrere Elemente gleichzeitig, was Besuchern entgegenkommt, die zwischen Kategorien wählen möchten.

Empfohlene Größe und mobiles Design für Hero-Bereiche

Was ist die empfohlene Größe für einen Hero-Bereich? Es gibt keine feste Pixelgröße, die auf jeden Bildschirm passt, da sich der Bereich „above the fold“ je nach Gerät, Bildschirmgröße und Browser-Oberfläche ändert. Ein besserer Ansatz ist es, den Hero an den Viewport anzupassen. Orbix Studio empfiehlt, etwa 60 bis 100 % des Desktop-Viewports und 50 bis 70 % auf Mobilgeräten auszufüllen.

Hero-Größe auf dem Desktop

Gestalte den Bereich um drei Textebenen herum: Überschrift, Unterüberschrift und CTA-Button. Nutze die zuvor genannten Schriftgrößen als Ausgangsskala und prüfe dann, ob der CTA und der erste Teil des visuellen Bereichs bei gängigen Laptop-Höhen sichtbar sind. Ich konnte keinen verifizierten Standard für Hero-Pixelmaße finden, also betrachte jede feste Zahl, die du anderswo siehst, als Faustregel, die du an deiner eigenen Zielgruppe testen musst.

Mobiles Hero-Design

Stell dir eine Überschrift vor, die auf dem Handy in drei Zeilen umbricht und den CTA unter den sichtbaren Bereich schiebt. In diesem Moment könnte der Button genauso gut gar nicht da sein. Mobiles Hero-Design bedeutet, zu entscheiden, was auf dem Handy zuerst und in welcher Reihenfolge erscheint, anstatt einfach das Desktop-Layout zu verkleinern.

‍

Teste bei schmalen Breiten, größeren Texteinstellungen und an den Breakpoints an denen sich dein Layout ändert, denn Besucher nutzen viele verschiedene Bildschirme. Webflow ermöglicht es dir, jeden Breakpoint in der Vorschau zu sehen – prüfe also bei jedem Einzelnen die Position des CTA.

Häufige Designfehler im Hero-Bereich und wie du sie behebst

Der häufigste Fehler passiert, noch bevor ein Design-Tool geöffnet wird: Man beginnt mit der Optik und schreibt die Botschaft erst danach. Diese Reihenfolge lässt das Layout bestimmen, wie viel Platz die Überschrift bekommt, anstatt dass die Botschaft vorgibt, was das Layout unterstützen soll.

Und seien wir ehrlich: Die meisten Teams fangen mit dem Visuellen an, weil es einfacher ist, auf ein Layout zu reagieren als auf ein leeres Überschriftenfeld. Diese Gewohnheit ist verständlich, auch wenn sie dich Scroll-Tiefe kostet. Die folgende Tabelle zeigt diesen und neun weitere Fehler sowie deren Lösung.

‍

Ein Stockfoto von Händen, die auf einem Laptop tippen, sagt Besuchern nur, dass dein Unternehmen einen Laptop besitzt. Vielleicht denkst du auch, dass Animationen einen schwachen Hero-Bereich retten können. Animationen ziehen zwar den Blick auf sich, können aber eine unklare Botschaft nicht retten und die Seite verlangsamen. Kläre also zuerst die Überschrift, den Social Proof und den CTA.

Wann du auf einen Hero-Bereich verzichten solltest

Braucht jede Seite einen? Nein. Zu wissen, wann man ihn weglassen kann, spart dem Besucher Zeit. Die Empfehlungen von LogRocket zeigen vier Fälle auf, in denen ein Hero-Bereich im Marketing-Stil eher im Weg steht.

• Produkte, bei denen das Stöbern im Vordergrund steht: E-Commerce, Nachrichtenportale und Foren funktionieren besser, wenn das Stöbern die erste Aktion ist – ein Hero-Bereich fügt hier nur einen unnötigen Schritt hinzu.
• Dashboards mit mehreren wichtigen Aktionen: Ein Hero-Bereich mit eigenem CTA kann die Aufmerksamkeit von anderen wichtigen Widgets ablenken.
• Tools für einfache Aufgaben: Ein Bildkonverter oder Chatbot sollte die Nutzer sofort starten lassen, da ein Hero-Bereich den Prozess nur verzögert.
• Wiederkehrende Nutzer: Häufige Besucher wollen das Produkt nutzen, nicht eine Einführung, die sie bereits kennen.

Deinen SaaS-Hero-Bereich in Webflow erstellen

Was ändert sich, wenn der Hero-Bereich von Figma live geht? Ein Design, das in der Datei gut aussieht, kann im Browser trotzdem schwächeln, da sich Bewegung, Mediengröße und responsives Verhalten erst dort zeigen. Tools wie Webflow und Framer erlauben es Marketing-Teams, eine Live-Seite zu bearbeiten, ohne sie neu bauen zu müssen. So muss ein Test für eine Überschrift nicht auf einen Entwicklungs-Sprint warten. Ein paar Checks halten den Aufbau schnell.

• GSAP-Animationen: Verknüpfe jede Animation mit einem Zweck, wie etwa einem Texteinblendung oder einer Produktvorschau, und halte sie kurz.
• Medienhandhabung: Komprimiere Bilder, achte auf die Videogröße und vermeide es, große Dateien vor der Überschrift zu laden.
• Reduzierte Bewegung: Berücksichtige die Bewegungseinstellungen der Besucher, damit der Hero-Bereich für alle angenehm bleibt, die das benötigen.
• Responsive-Tests: Teste schmale Breiten, größere Schriftgrößen und die Position des CTA auf dem Smartphone.
• Staging und Live-Schaltung: Überprüfe alles in einer Staging-Umgebung und veröffentliche die Seite erst, wenn der Hero-Bereich alle oben genannten Tests bestanden hat.
• Figma-zu-Webflow-Übergabe: Achte auf einheitliche Schriftgrößen, Abstände und Hierarchien, damit die Umsetzung exakt dem Design entspricht.

Vielleicht fragst du dich, ob Animationen deine Seite verlangsamen. Das tun sie nicht, wenn sie auf die Überschrift und ein visuelles Element beschränkt bleiben und die Medien komprimiert sind, da der Haupttext und der Button trotzdem zuerst laden können. Und seien wir ehrlich: Die meisten SaaS-Teams haben keinen Entwickler auf Abruf, der jedes Mal eine Überschrift ändert, wenn ein Test endet. Einen Senior-Entwickler für solche Anpassungen zu bezahlen, ist, als würde man einen Sternekoch Reste aufwärmen lassen. Eine gute Umsetzung ermöglicht es deinem Team, die Texte selbst zu ändern.

Hier kommt magier ins Spiel. Das Team von magier besteht aus Designern und Webflow-Experten, die unter einem Abo zusammenarbeiten – inklusive festem Projektmanager und einer Bearbeitungszeit von 48 Stunden pro Aufgabe. Bei Jupus sorgte eine neu gestaltete Landingpage für über 40 Demo-Anfragen in den ersten zwei Tagen, und bei plancraft führte die Kombination aus Design und Webflow-Umsetzung zu einer Steigerung der Conversion-Rate um 20 %. Erfahre, wie magier Webflow-Entwicklung angeht.

So testest du deinen Hero-Bereich vor und nach dem Launch

Versteht jemand außerhalb deines Teams innerhalb von fünf Sekunden, worum es im Hero-Bereich geht? Führe diesen kurzen Test vor dem Launch durch, denn er deckt Missverständnisse auf, für die dein Team längst betriebsblind geworden ist.

1. Zeige jemandem, der dein Produkt noch nie gesehen hat, den Hero-Bereich für fünf Sekunden und blende ihn dann aus.
2. Frage, was das Produkt macht.
3. Frage, für wen es ihrer Meinung nach gedacht ist.
4. Frage, was der Hauptnutzen ist.
5. Frage, worauf sie als Nächstes klicken würden und was sie dazu bringt, dem Versprechen zu glauben.

Wenn sie die ersten drei Fragen nicht beantworten können, überarbeite die Botschaft, bevor du am visuellen Feinschliff arbeitest. Wenn sie das Angebot verstehen, aber zögern zu handeln, schau dir den CTA, die Vertrauenselemente und mögliche Hürden in der Nähe des Buttons an.

Tracke nach dem Launch die Klicks auf den CTA, die Anmeldungen oder Demo-Anfragen sowie die Lead-Qualität. Führe A/B-Tests immer nur für ein Element gleichzeitig durch – meistens die Überschrift oder den CTA – und nutze Heatmap-Tools, um zu sehen, wo Besucher klicken oder abspringen. Eine spezifischere Überschrift bringt vielleicht weniger Klicks, aber dafür bessere Leads. Bewerte jeden Test also immer im Hinblick auf dein eigentliches Geschäftsziel.

‍

Fazit

Ein starkes Design für den Hero-Bereich basiert auf einer klaren Botschaft, glaubwürdigen Beweisen und einem Layout, das beides unterstützt. Der Schritt, den die meisten Teams überspringen, ist das Schreiben der Botschaft vor dem Design – dabei entscheidet genau das darüber, ob Besucher weiter scrollen. Die Umsetzung erfordert trotzdem Arbeit, da Design, technischer Aufbau und Tests sowohl auf Desktop als auch auf Mobilgeräten sorgfältig abgestimmt werden müssen.

Vielleicht denkst du, dass externe Hilfe teuer klingt. Der Webflow-Service von magier beginnt bei 890 € pro Monat zum Festpreis, Design-Leistungen starten bei 2.750 € pro Monat – und du kannst jederzeit kündigen oder pausieren. Sieh dir an, wie magier Design und Webflow verbindet.

Such dir den Bereich aus, der am besten zu deiner aktuellen Situation passt, egal ob es der Fünf-Sekunden-Test oder die Tabelle für die Überschriften ist. Wenn du das Ganze einmal persönlich durchsprechen möchtest, buche eine kostenlose Demo mit magier,.

‍