SaaS-Website: ein Hero, der komplexe Software sofort erklärt

Bei komplexer Software entscheidet der erste sichtbare Bereich deiner Website, ob jemand bleibt oder abspringt. Ohne Login, ohne Demo, in ein paar Sekunden. Für unseren Kunden syte haben wir einen Hero gebaut, der genau das schaffen soll. In diesem Ratgeber zeigen wir dir, wie wir dabei vorgegangen sind, von der Idee in Figma bis zur fertigen Umsetzung in Webflow. Das komplette Video mit allen Schritten findest du weiter unten.

Das Problem bei SaaS-Websites

Viele SaaS-Startseiten folgen demselben Muster: eine Headline, drei Icons, ein Screenshot vom Dashboard. Das Problem: Ein Screenshot einer komplexen Software ist für Außenstehende erst einmal nur ein Bildschirm voller Zahlen. Wer das Produkt noch nicht kennt, versteht nicht, was dort passiert und warum es ihm hilft.

Text, Icons und Screenshot zeigen also, wie die Software aussieht. Sie erklären aber nicht, was sie tut. Besucher müssen sich das selbst zusammenreimen, und genau an dieser Stelle springen viele ab. Bei einer Software, die viel kann, wird das Problem größer, nicht kleiner.

Die Ausgangslage bei syte

syte ist eine KI-Plattform für Grundstücke aus Münster. Projektentwickler, Wohnungswirtschaft, Banken, Makler und Planer sehen damit für eine Adresse, was auf einem Grundstück möglich ist: Bebauung, Sanierung, Energie und Wirtschaftlichkeit. Dahinter stehen mehrere Produkte, von der Grundstückssuche über Potenzialanalysen und Wirtschaftlichkeitsberechnungen bis zum 3D-Entwurf direkt auf dem realen Grundstück. 2023 hat syte den KI-Start-up-Preis beim Deutschen KI-Preis der WELT gewonnen.

Viel Leistung also, und genau das macht es schwer. Wer alle Funktionen gleichzeitig zeigen will, zeigt am Ende keine richtig. Im Video stellen wir die alte Startseite von syte direkt neben die neue, damit du den Unterschied selbst siehst.

Die Idee: ein Moment statt aller Features

Statt alle Funktionen aufzuzählen, haben wir nach dem einen Moment gesucht, in dem Besucher die Software verstehen. Bei syte ist das der Weg von einer Adresse zu einer Entscheidung. Genau das sagt die Headline auf der Website von syte: „Für jede Adresse in Sekunden wissen, was wirklich geht“.

Der Hero zeigt diesen Weg in drei Schritten: Bewerten, Entwerfen, Skalieren. Eine Adresse wird gesucht, das Grundstück erscheint auf der Karte, das Ergebnis wird sichtbar. Wer ein paar Sekunden hinschaut, hat verstanden, worum es geht, ohne einen einzigen Absatz lesen zu müssen.

Diese Frage kannst du dir für deine eigene Software stellen: Was ist der kürzeste Weg vom Problem deines Kunden zu seinem Ergebnis? Genau dieser Weg gehört in den Hero. Alles andere hat weiter unten auf der Seite Platz.

Erst der Ablauf, dann die Animation

Der wichtigste Schritt passiert, bevor irgendetwas animiert wird. Wir haben den Hero zuerst in Figma geplant: welcher Zustand nach welchem kommt, was sich bewegt und was stehen bleibt. Erst als die Geschichte stand, ging es an die Bewegung.

Das spart Schleifen. Wer direkt animiert, merkt oft erst am Ende, dass die Reihenfolge nicht trägt, und dann kostet jede Änderung ein Vielfaches. In Figma verschiebst du einen Zustand in Sekunden. Mehr dazu, wie wir Interfaces planen, findest du auf unserer Seite zu UX/UI Design.

Der Hero in Webflow: Ebene für Ebene

Die Umsetzung folgt dem Client-First-Prinzip: Section, Container, Wrapper. Jede Ebene hat eine klare Aufgabe, und die Klassen sind so benannt, dass sie später jeder im Team wiederfindet. Das ist kein Selbstzweck. Ein Hero, den nur sein Erbauer versteht, wird beim nächsten Update zum Problem.

Für das Suchfeld und die Karte setzen wir Lottie ein, jeweils in einer Variante für Desktop und für Mobil. So bleibt die Animation scharf und leicht, und sie sieht auf jedem Gerät so aus, wie sie in Figma geplant war.

Page-Load-Interaction ohne Custom Code

Damit der Hero beim Laden von selbst abläuft, steuert eine Page-Load-Interaction in Webflow die Schritte: mit Delay zwischen den Zuständen, mit den Tabs Bewerten, Entwerfen und Skalieren und mit einem Loop, damit die Geschichte immer wieder von vorne beginnt. Eigener Code ist dafür nicht nötig.

Das hat einen praktischen Vorteil: Wer die Seite später pflegt, passt Timing und Schritte direkt im Designer an, ohne ein Skript anfassen zu müssen. Wie wir solche Abläufe technisch umsetzen, liest du auf unserer Seite zur Webentwicklung. Und wenn deine Software eine eigene Animation braucht, hilft dir unser Motion Design.

So prüfst du deinen eigenen SaaS-Hero

Du musst nicht gleich alles neu bauen, um herauszufinden, ob dein Hero funktioniert. Ein paar einfache Tests reichen für den Anfang:

• Der Fünf-Sekunden-Test: Zeig deine Startseite jemandem, der dein Produkt nicht kennt, fünf Sekunden lang. Kann die Person danach sagen, was deine Software macht und für wen?
• Der Ohne-Text-Test: Halt die Headline zu. Erzählt das Bild darunter trotzdem, worum es geht, oder ist es austauschbar?
• Der Handy-Test: Öffne die Seite auf dem Smartphone. Bleibt der wichtigste Moment sichtbar, oder verschwindet er unter Text und Buttons?
• Der Vertriebs-Test: Frag dein Sales-Team, welchen Satz und welche Ansicht es in jeder Demo zuerst zeigt. Genau das gehört oft in den Hero.

Wenn du bei einem dieser Tests zögerst, lohnt sich ein genauer Blick auf den ersten Bildschirm deiner Website.

Was du aus dem Case mitnehmen kannst

Im Video fassen wir alles am Ende in vier Regeln für einen guten SaaS-Hero zusammen (ab Minute 10:33). Kurz gesagt, das sind die Punkte, die du aus dem syte-Case mitnehmen kannst:

1. Erklär nicht alle Features. Zeig den einen Moment, in dem es klick macht.
2. Plane den Ablauf in Figma, bevor du animierst.
3. Bau sauber strukturiert nach Client-First, damit der Hero wartbar bleibt.
4. Halte die Animation schlank: Lottie und eine Page-Load-Interaction reichen.

Das Video zur Case Study

Im Video siehst du die alte und die neue Startseite, die Planung in Figma und den Aufbau in Webflow Schritt für Schritt.

12:10

Du baust eine SaaS-Website und willst, dass Besucher dein Produkt sofort verstehen? Schau dir an, wie wir für IT- und SaaS-Unternehmen arbeiten, oder frag dein Projekt direkt an. Wie wir syte auf der Expo Real besucht haben, liest du übrigens in unserem Blog. Und wie man mit Scroll-Animationen eine Geschichte erzählt, zeigen wir im Ratgeber zur Weltkarten-Animation.

FAQ

Warum reicht ein Screenshot im SaaS-Hero nicht?

Weil ein Screenshot einer komplexen Software für Außenstehende nur ein Bildschirm voller Daten ist. Er zeigt, wie die Software aussieht, aber nicht, was sie für den Besucher löst.

Was ist der „eine Moment“ im Hero?

Der Augenblick, in dem Besucher verstehen, was die Software für sie tut. Bei syte ist das der Weg von einer Adresse zu einer Entscheidung, gezeigt in den drei Schritten Bewerten, Entwerfen und Skalieren.

Braucht man für so einen Hero Custom Code?

Nein. Der syte-Hero läuft mit Lottie-Animationen und einer Page-Load-Interaction in Webflow, mit Delay, Tabs und Loop, ohne eigenen Code.

Warum erst in Figma planen?

Weil sich die Reihenfolge der Zustände in Figma schnell ändern lässt. In der fertigen Animation kostet jede Änderung deutlich mehr Zeit.

Funktioniert der Hero auch auf dem Handy?

Ja. Für Suchfeld und Karte gibt es eigene Lottie-Varianten für Desktop und Mobil.