Die perfekte Startseite: Was drauf muss und was nicht

Die Startseite ist der erste Eindruck. Und meistens auch der letzte, wenn sie nicht funktioniert. Rund 57 % der Verweildauer entfallen auf den sichtbaren Bereich vor dem Scrollen (laut Nielsen Norman Group, 2018). Wer hier nicht überzeugt, verliert den Besucher, bevor er auch nur eine Zeile gelesen hat.

Trotzdem sehen viele Firmenwebseiten so aus, als hätte jemand einfach alles draufgepackt, was ihm eingefallen ist. Slider mit fünf Bildern, ein “Herzlich willkommen”, drei verschiedene Menüs und irgendwo ganz unten ein Kontaktformular. Am Ende versteht der Besucher nicht, was das Unternehmen macht, und klickt weg.

In diesem Artikel zeigen wir dir, wie eine Startseite aufgebaut sein sollte, die tatsächlich funktioniert. Von oben nach unten, Abschnitt für Abschnitt.

Der erste Viewport: Was sofort sichtbar sein muss

Der Bereich “above the fold” (alles, was ohne Scrollen sichtbar ist) entscheidet darüber, ob jemand bleibt oder geht. Hier geht es nicht um Schönheit, sondern um Klarheit. Der Besucher muss innerhalb von 3 Sekunden drei Fragen beantworten können: Was bietest du an? Für wen? Und was soll ich als Nächstes tun?

Klare Überschrift

Kein “Herzlich willkommen”. Stattdessen ein konkreter Satz, der dein Angebot auf den Punkt bringt. Zum Beispiel: “Webseiten für Handwerksbetriebe, die Kunden bringen.”

Ein einziger Call-to-Action

Nicht drei Buttons, nicht fünf Links. Ein klarer CTA, der zum nächsten Schritt führt. “Kostenloses Erstgespräch buchen” funktioniert besser als “Mehr erfahren”.

Visueller Beweis

Ein relevantes Bild oder eine Referenz direkt im Hero-Bereich. Keine austauschbare Stock-Fotografie, sondern etwas, das deine Arbeit zeigt.

Viele Marken packen gleich mehrere CTAs in den Hero-Bereich. Das klingt nach mehr Auswahl, führt aber oft zu Entscheidungslähmung. Wer mehrere gleichwertige Aktionen sieht, zögert und klickt im Zweifel gar nichts an. Ein einziger, klarer Call-to-Action nimmt dem Besucher diese Entscheidung ab und führt ihn direkt zum nächsten Schritt.

Die Hero-Section richtig aufbauen

Die Hero-Section ist der prominenteste Bereich deiner Startseite. Sie besteht im Kern aus vier Elementen: einer Hauptüberschrift (H1), einer kurzen Unterzeile, einem Call-to-Action-Button und einem visuellen Element.

Die Überschrift sollte dein Angebot beschreiben und nicht dein Unternehmen. “Seit 1998 Ihr Partner für Lösungen” sagt niemandem etwas. “Wir bauen Webseiten, die Anfragen bringen” ist konkret und verständlich.

Die Unterzeile ergänzt die Überschrift um ein bis zwei Sätze. Hier kannst du die Zielgruppe nennen, den Nutzen verdeutlichen oder einen Unterschied zu anderen Anbietern setzen. Halte sie kurz.

Der CTA-Button sollte farblich hervorstechen und eine handlungsorientierte Formulierung haben. Personalisierte CTAs, die zur Absicht des Besuchers passen, konvertieren 202 % besser als generische Varianten (laut HubSpot, Auswertung von über 330.000 CTAs). Statt “Absenden” funktioniert also “Mein kostenloses Angebot anfordern” besser.

Das visuelle Element kann ein Foto, eine Illustration oder ein Screenshot sein. Wichtig ist, dass es relevant ist und nicht nur Platz füllt. Minderwertige Stockfotos schaden der Glaubwürdigkeit mehr, als gar kein Bild zu haben.

Schnelles Hero-Bild, mehr Anfragen

Das Hero-Bild ist meistens das Largest Contentful Paint (LCP) Element deiner Seite. Google misst, wie schnell dieses Element lädt, und der Zielwert liegt unter 2,5 Sekunden. Verwende komprimierte WebP-Bilder und lade sie mit hoher Priorität. Jede Sekunde Verzögerung kostet dich messbar Conversions. Seiten, die innerhalb von 1 Sekunde laden, konvertieren rund 2,5 bis 3 mal besser als Seiten mit 5 Sekunden Ladezeit (laut Portent, 2022).

Leistungen und Nutzen klar darstellen

Direkt nach dem Hero-Bereich will der Besucher verstehen, was du konkret anbietest. Hier gehören deine wichtigsten Leistungen hin, aber nicht als Aufzählung von 20 Punkten, sondern als drei bis vier klar strukturierte Bereiche.

Ein bewährtes Format sind Karten oder Kacheln mit jeweils einem Titel, einem kurzen Text (zwei bis drei Sätze) und optional einem Link zur Detailseite. Dieses modulare Layout funktioniert auf Desktop und Mobil gleich gut.

Viele Firmen machen denselben Fehler und beschreiben ihre Leistungen aus ihrer eigenen Perspektive. “Wir bieten umfassende Lösungen im Bereich der digitalen Transformation.” Was soll ein Besucher damit anfangen? Beschreibe stattdessen, welches Problem du löst. “Deine Webseite bringt keine Anfragen? Wir ändern das.” Das versteht jeder. Welche Leistungen sich gut als Karten darstellen lassen, siehst du auf unserer Leistungsübersicht.

Aktuelle Webdesign-Trends setzen hier auf Bento-Grid-Layouts, also modulare, asymmetrische Karten-Systeme, die visuell interessant wirken und gleichzeitig Informationen strukturiert darstellen. Sie funktionieren auf verschiedenen Bildschirmgrößen und helfen dabei, viele Informationen übersichtlich zu präsentieren.

Social Proof: Warum Vertrauenselemente unverzichtbar sind

Rund 92 % der Verbraucher lesen Online-Bewertungen, bevor sie sich für ein lokales Unternehmen entscheiden (laut BrightLocal, Local Consumer Review Survey). Viele vertrauen diesen Bewertungen ähnlich stark wie einer persönlichen Empfehlung. Vertrauenselemente sind damit kein nettes Extra, sondern Pflicht.

Kundenstimmen mit echten Namen

Ein Zitat mit vollem Namen, Firmenname und optimalerweise einem Foto. Anonyme Bewertungen wie “Super Service! - M.K.” wirken unglaubwürdig. Je konkreter die Aussage, desto besser: “Seit der neuen Webseite bekommen wir 40 % mehr Anfragen” überzeugt mehr als “Tolle Zusammenarbeit”.

Logos und Kennzahlen

Kundenlogos zeigen auf einen Blick, mit wem du arbeitest. Konkrete Zahlen verstärken den Effekt: “127 umgesetzte Projekte” oder “4,9 von 5 Sternen bei Google” sind greifbarer als allgemeine Aussagen über Qualität.

Zertifikate und Siegel

Branchenzertifikate, TÜV-Siegel, Partner-Logos oder Auszeichnungen gehören sichtbar auf die Startseite. Sie signalisieren Kompetenz, ohne dass du sie selbst behaupten musst.

Fallstudien und Ergebnisse

Ein kurzer Teaser zu einem Kundenprojekt mit messbarem Ergebnis. Das zeigt, dass du nicht nur redest, sondern lieferst. Ein Link zur vollständigen Fallstudie gibt Besuchern die Möglichkeit, tiefer einzusteigen.

Viele Webseiten zeigen Social Proof erst weit unten auf der Seite. Da ein großer Teil der Besucher nie bis dorthin scrollt, erreichen diese Vertrauenselemente genau die Menschen nicht, die noch zögern. Platziere mindestens ein starkes Signal früh, idealerweise schon nahe am Hero-Bereich.

Call-to-Actions richtig platzieren

Viele Startseiten haben nur einen einzigen CTA, ganz am Ende der Seite. Das Problem dabei ist, dass ein Großteil der Besucher gar nicht bis dorthin scrollt.

Besser funktionieren CTAs an mehreren Stellen, aber immer mit derselben Handlungsaufforderung. Setze nicht fünf verschiedene Buttons mit fünf verschiedenen Zielen, sondern ein konsistentes Ziel wie “Kontakt aufnehmen”, das an drei bis vier Stellen auf der Seite auftaucht.

Sinnvolle Positionen sind der Hero-Bereich oberhalb der Falz, der Abschnitt nach den Leistungen, der Bereich nach den Vertrauenselementen und das Seitenende vor dem Footer.

Gut funktioniert dabei eine handlungsorientierte Formulierung wie “Jetzt Angebot anfordern” statt “Kontakt”. Der Button sollte sich farblich vom Rest der Seite abheben, und ein dezenter Hover-Effekt mit etwa 150 bis 300 Millisekunden Übergangszeit macht ihn spürbar klickbarer.

Mobil mitdenken

Rund 60 % des weltweiten Website-Traffics kommen inzwischen von Mobilgeräten (laut StatCounter, 2025). Auf langen Scroll-Seiten kann ein Sticky-CTA sinnvoll sein, also ein Button, der beim Scrollen sichtbar bleibt. Er sorgt dafür, dass der Besucher jederzeit handeln kann, ohne zurückscrollen zu müssen. Achte aber darauf, dass er nicht zu viel Platz einnimmt und den Inhalt nicht verdeckt.

Was NICHT auf die Startseite gehört

Genauso wichtig wie die richtigen Elemente ist das Weglassen der falschen. Viele Startseiten scheitern nicht daran, dass etwas fehlt, sondern daran, dass zu viel drauf ist.

Automatische Bild-Slider sehen schick aus, aber kaum jemand klickt auf Slide 3 oder 4. Sie lenken ab, verlangsamen die Seite und verwässern die Kernbotschaft. Eine klare, statische Hero-Section mit einer einzigen Aussage funktioniert besser.

Auch eine Überschrift wie “Herzlich willkommen auf unserer Webseite” verschwendet den wertvollsten Platz deiner gesamten Seite. Der Besucher weiß, dass er auf deiner Webseite ist. Nutze die H1 lieber für deine Kernaussage.

Die komplette Firmengeschichte gehört ebenfalls nicht auf die Startseite. “Gegründet 1987, sind wir heute ein führender Anbieter…” interessiert dort niemanden. Dafür gibt es die “Über uns”-Seite. Die Startseite soll verkaufen und nicht erzählen.

Mehr als sieben Navigationspunkte erhöhen die kognitive Last. Wenn dein Menü zwölf Einträge hat, findet niemand schnell, was er sucht. Reduziere auf fünf bis sieben Hauptpunkte.

Generische Stockfotos schaden mehr, als sie helfen. Lächelnde Menschen mit Headsets, Handschläge vor Glasfassaden, Teams, die auf Post-its zeigen: Diese Bilder sagen nichts über dein Unternehmen aus und untergraben deine Glaubwürdigkeit. Echte Fotos von echten Projekten sind immer die bessere Wahl.

Musik oder Auto-Play-Videos vertreiben Besucher besonders schnell, weil unerwarteter Sound stört. Videos sind grundsätzlich gut, aber immer ohne Auto-Play und mit Untertiteln.

Der vollständige Aufbau von oben nach unten

Hier ist die Struktur einer Startseite, die funktioniert. Nicht jede Firmenwebseite braucht alle Elemente, aber diese Reihenfolge hat sich bewährt:

1. Hero-Section

Überschrift, Unterzeile, CTA-Button, visuelles Element. Optional: ein kurzer Social-Proof-Hinweis wie “4,9 Sterne bei Google” oder eine Kundenzahl.

2. Vertrauensleiste

Eine schmale Zeile mit Kundenlogos, Zertifikaten oder einer Kennzahl. Kurz, visuell, ohne viel Text. Direkt unter dem Hero-Bereich.

3. Leistungen / Angebot

Drei bis vier Karten mit deinen wichtigsten Leistungen. Jede Karte: Titel, kurzer Text, optional ein Icon und ein Link zur Detailseite.

4. Social Proof

Kundenstimmen, Bewertungen, Fallstudien-Teaser. Mit echten Namen, konkreten Ergebnissen und Fotos.

5. Über uns (kurz)

Zwei bis drei Sätze und ein Foto des Teams oder der Gründer. Menschen kaufen von Menschen. Ein Gesicht schafft Vertrauen. Link zur vollständigen “Über uns”-Seite.

6. CTA-Bereich

Ein abgesetzter Bereich mit klarer Handlungsaufforderung. “Bereit für deine neue Webseite? Lass uns sprechen.” Plus Button zum Kontaktformular oder zur Terminbuchung.

7. Footer

Kontaktdaten, Links zu Impressum und Datenschutz, Social-Media-Links, optional eine Kurznavigation. Der Footer ist kein Abstellplatz, sondern die letzte Chance auf eine Aktion.

Weniger ist fast immer mehr

Die durchschnittliche Conversion-Rate von Landingpages liegt branchenübergreifend bei rund 2,35 %, während die besten 25 % auf über 5 % kommen (laut WordStream, 2024). Der Unterschied liegt selten an ausgefallenen Animationen oder dem neuesten Design-Trend, sondern an Klarheit, Geschwindigkeit und Vertrauen.

Eine Startseite, die in unter 2 Sekunden lädt, eine klare Aussage im Hero-Bereich hat, Vertrauen durch echte Referenzen aufbaut und den Besucher an mehreren Stellen zum Handeln einlädt, ist keine Raketenwissenschaft. Sie erfordert aber den Mut, Dinge wegzulassen, die unwichtig sind. Wenn deine Seite zusätzlich gut bei Google ranken soll, lohnt sich ein Blick auf unsere SEO-Websites, und wenn du verkaufst, hilft dir ein durchdachter Shopify-Shop weiter.

Denn das größte Problem der meisten Startseiten ist nicht, dass etwas fehlt. Sondern dass zu viel drauf ist.

Du willst eine Startseite, die tatsächlich Anfragen bringt?

Lass uns darüber sprechen, wie das für dein Unternehmen konkret aussehen kann. Wir schauen uns gemeinsam an, was deine Webseite braucht.

Schreib uns