Die perfekte Startseite: Was drauf muss und was nicht

Die Startseite ist der erste Eindruck. Und meistens auch der letzte, wenn sie nicht funktioniert. Studien zeigen: 57 % der Verweildauer entfallen auf den sichtbaren Bereich vor dem Scrollen. 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. Das Ergebnis: Der Besucher versteht 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.

68 % aller Marken packen mehrere CTAs in den Hero-Bereich. Das klingt nach mehr Auswahl, führt aber nachweislich zu Entscheidungslähmung. Tests zeigen: Ein einzelner CTA steigert die Conversion-Rate um bis zu 266 % im Vergleich zu mehreren Optionen.

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, 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 Differenzierungspunkt setzen. Halte sie kurz.

Der CTA-Button sollte farblich hervorstechen und eine handlungsorientierte Formulierung haben. Personalisierte CTAs performen laut aktuellen Studien 202 % besser als generische Varianten. Statt „Absenden” also lieber „Mein kostenloses Angebot anfordern”.

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.

Tipp zur Performance:

Das Hero-Bild ist meistens das Largest Contentful Paint (LCP) Element deiner Seite. Google misst, wie schnell dieses Element lädt. Ziel: 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 2,5 bis 5 mal besser als Seiten mit 5 Sekunden Ladezeit.

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.

Der Fehler, den viele machen: Sie beschreiben ihre Leistungen aus ihrer eigenen Perspektive. „Wir bieten ganzheitliche 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.

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

92 % der Konsumenten lesen Bewertungen, bevor sie eine Kaufentscheidung treffen. 88 % vertrauen diesen Bewertungen genauso wie persönlichen Empfehlungen. Und 57 % ziehen ein Unternehmen mit weniger als 4 Sternen gar nicht erst in Betracht. Diese Zahlen zeigen: Vertrauenselemente sind 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.

Nur 60 % der Webseiten zeigen Social Proof im ersten sichtbaren Bereich. Dabei liegt der Abbruch zwischen dem ersten und zweiten Viewport bei 30 bis 50 %. Wer Vertrauenselemente erst ganz unten platziert, erreicht damit einen großen Teil der Besucher gar nicht.

Call-to-Actions richtig platzieren

Ein häufiger Fehler: Die gesamte Startseite hat nur einen einzigen CTA, ganz am Ende der Seite. Das Problem dabei ist, dass ein Großteil der Besucher gar nicht bis dorthin scrollt.

Die bessere Strategie: CTAs an mehreren Stellen, aber immer mit derselben Handlungsaufforderung. Nicht fünf verschiedene Buttons mit fünf verschiedenen Zielen, sondern ein konsistentes Ziel (zum Beispiel „Kontakt aufnehmen”), das an drei bis vier Stellen auf der Seite auftaucht.

Wo CTAs stehen sollten:

Im Hero-Bereich (above the fold)
Nach dem Leistungsbereich
Nach den Vertrauenselemente
Am Ende der Seite, vor dem Footer

Was gut funktioniert:

Handlungsorientierte Formulierungen: „Jetzt Angebot anfordern” statt „Kontakt”
Farblich abgesetzte Buttons, die sich vom Rest der Seite abheben
Hover-Effekte mit 150 bis 300 Millisekunden Übergangszeit erhöhen die Klickrate um bis zu 30 %
Zentrierte CTAs erhalten laut Studien 682 % mehr Klicks als linksbündige Varianten

Wichtig bei mobilen Seiten:

72 % des gesamten Website-Traffics kommen von Mobilgeräten. Auf langen Scroll-Seiten kann ein Sticky-CTA (ein Button, der beim Scrollen sichtbar bleibt) sinnvoll sein. 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: Sie sehen schick aus, aber kaum jemand klickt auf Slide 3 oder 4. Slider lenken ab, verlangsamen die Seite und verwässern die Kernbotschaft. Eine klare, statische Hero-Section mit einer einzigen Aussage funktioniert besser.

„Herzlich willkommen auf unserer Webseite”: Diese Überschrift verschwendet den wertvollsten Platz deiner gesamten Webseite. Der Besucher weiß, dass er auf deiner Webseite ist. Nutze die H1 für deine Kernaussage.

Die komplette Firmengeschichte: „Gegründet 1987, sind wir heute ein führender Anbieter…” Keinen Besucher interessiert das auf der Startseite. Dafür gibt es die „Über uns”-Seite. Die Startseite muss verkaufen, nicht erzählen.

Mehr als 7 Navigationspunkte: Jede zusätzliche Auswahl erhöht die kognitive Last. Wenn dein Menü 12 Einträge hat, findet niemand schnell, was er sucht. Reduziere auf 5 bis 7 Hauptpunkte.

Generische Stockfotos: 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: Nichts vertreibt Besucher schneller als unerwarteter Sound. 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 liegt branchenübergreifend bei 2,35 %. Die besten Seiten schaffen das Fünffache. Der Unterschied liegt selten an ausgefallenen Animationen oder dem neuesten Design-Trend. Er liegt 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: Das ist keine Raketenwissenschaft. Aber es erfordert den Mut, Dinge wegzulassen, die unwichtig sind.

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