Startseite gestalten: Welche Elemente braucht die Homepage?

Wie sollten Sie Ihre Startseite gestalten?

Eine gute Startseite beantwortet in wenigen Sekunden drei Fragen: Was bieten Sie an, warum sollte man Ihnen vertrauen und was ist der nächste Schritt? Dafür braucht sie ein klares Nutzenversprechen, eine sichtbare Hierarchie, einen primären Call to Action, Vertrauenselemente und eine schnelle mobile Ansicht. Schönheit allein reicht also nicht, die Seite muss führen.

Viele Teams stellen die falsche Frage: "Wie wirkt die Seite moderner?" Besser fragen Sie: "Was möchte der Besucher hier erledigen, und wie führen wir ihn dorthin?"

Deshalb stellt unser Team diese Frage zu Beginn jedes Projekts. Zunächst teilen wir die Seite in Abschnitte auf. Dann geben wir jedem Abschnitt genau eine Aufgabe. Wenn Sie Ihre Startseite gestalten, hilft Ihnen dieselbe Methode. Außerdem finden Sie den größeren Rahmen in unserem Webdesign Leitfaden.

Welche Aufgabe hat die Startseite für Besucher?

Ihre Startseite ist also ein Schaufenster, aber auch ein Verteiler. Viele Besucher landen über Google direkt auf Unterseiten. Allerdings prüfen Menschen, die nach Ihrer Marke suchen, von einer Anzeige zurückkehren oder eine Empfehlung erhalten, meist zuerst die Startseite.

Diese Besucher prüfen typischerweise drei Dinge:

• Bietet die Seite, was ich suche?
• Kann ich diesem Unternehmen vertrauen?
• Wohin gehe ich als Nächstes?

Antwortet die Startseite nicht schnell, verlassen Besucher die Seite sonst sofort. Deshalb sollten Sie Designentscheidungen danach treffen, wie schnell diese drei Fragen beantwortet werden, und nicht nach Geschmack.

Zudem verteilt die Startseite den Verkehr auf Ihre Leistungsseiten. Daher lohnt es sich, dort die wichtigsten Wege direkt zu verlinken. Allerdings blockiert eine schlecht aufgebaute Startseite diesen Weg. Sehen Sie jeden Abschnitt also als Wegweiser, nicht als Dekoration.

Welche Elemente brauchen Sie, wenn Sie Ihre Startseite gestalten?

Die Details hängen zwar von der Branche ab. Trotzdem teilen die meisten erfolgreichen Startseiten dieselben Kernelemente. Zunächst zeigt die Tabelle sie mit ihrer Aufgabe.

Verstehen Sie diese Liste als Ausgangspunkt, nicht als Vorlage. Erfüllt ein Element keine klare Aufgabe, streichen Sie es daher. Denn mehr Abschnitte bringen nicht automatisch mehr Anfragen.

Was gehört auf den ersten Bildschirm?

Der erste Bildschirm ist der Bereich, den Besucher ohne Scrollen sehen. Vier Dinge gehören dorthin: eine klare Überschrift, eine ergänzende Unterzeile, ein primärer CTA und ein Bild, das den Kontext zeigt. Logo und Menü stehen dann daneben, ohne sie zu überdecken.

Die Überschrift beschreibt das Ergebnis für den Kunden, nicht Ihren Slogan. Ein Satz wie "innovative Lösungen" sagt also nichts aus. Dagegen nennt "Zahnarzttermin in Berlin online buchen" sofort Zielgruppe und Angebot.

Auch die Bildwahl zählt, denn Besucher beurteilen Glaubwürdigkeit innerhalb von Sekunden. Konkret sollten Bilder zu Ihrer Zielgruppe passen und den Nutzen zeigen, nicht nur Stimmung erzeugen. Nutzen Sie echte Fotos von Team, Produkt oder Räumen statt Stockfotos. Somit schaffen Sie Vertrauen und heben sich von Wettbewerbern ab.

Die Regel ist einfach: Der erste Bildschirm antwortet, die weiteren Abschnitte belegen. Deshalb gehört Ihre stärkste Aussage nach oben, und der Beweis folgt direkt darunter. Außerdem sparen sich Besucher so das lange Suchen nach dem Kern Ihres Angebots. Vermischen Sie beide Aufgaben nicht.

Wie formulieren Sie ein Nutzenversprechen?

Ein Nutzenversprechen erklärt in einem Satz, warum Kunden Sie wählen sollten. Konkret lautet die Formel: Wen bedienen Sie, welches Ergebnis liefern Sie und auf welchem Weg? Zum Beispiel enthält "SEO Beratung, die lokale Unternehmen bei Google sichtbarer macht" alle drei Teile.

Prüfen Sie beim Schreiben Folgendes:

• Der Satz hat zwischen 12 und 20 Wörtern.
• Sie meiden Fachjargon und nutzen die Worte Ihrer Kunden.
• Zahlen nennen Sie nur, wenn Sie sie belegen können.
• Unbelegte Superlative wie "der Beste" lassen Sie weg.

Außerdem hilft eine zusätzliche Information in der Unterzeile, etwa Ihr Ablauf oder Ihr Einsatzgebiet. Somit fragt der Besucher nach der Überschrift nicht "Und wie?".

Testen Sie die Botschaft zunächst, indem Sie die Seite einem Bekannten fünf Sekunden zeigen. Fragen Sie danach, was Sie anbieten. Kommt eine falsche Antwort, erfüllt die Überschrift daher ihren Zweck nicht.

Wie bauen Sie visuelle Hierarchie auf der Startseite auf?

Die visuelle Hierarchie steuert, in welcher Reihenfolge das Auge über die Seite wandert. Größe, Farbe, Kontrast und Abstand bestimmen also diese Reihenfolge. Das größte Element mit dem höchsten Kontrast sehen Besucher zuerst.

Machen Sie zunächst die Überschrift zum größten Text. Dann halten Sie den CTA Button als einzige leuchtende Farbfläche. Sekundäre Links bleiben dagegen leiser. Wird alles betont, fällt also nichts mehr auf.

Auch Lesemuster helfen. Unser Beitrag zu Scrolling im Webdesign zeigt, wie Besucher sich durch eine Seite bewegen. Prüfen Sie dennoch immer Ihre eigenen Daten.

Weißraum ist ebenfalls ein Gestaltungsmittel. Genug Abstand zwischen Abschnitten macht Inhalte daher besser lesbar. Zu viel Abstand erzwingt dagegen unnötiges Scrollen. Kontrollieren Sie die Balance getrennt für Mobilgeräte und Desktop.

Zur Farbwahl lesen Sie unseren Beitrag zur Farbpsychologie im Webdesign. Messen Sie den Kontrast dann mit unserem Kontrastrechner.

Wie vereinfachen Sie Menü und Navigation?

Das Hauptmenü ist die Landkarte Ihrer Website. Menüs mit mehr als sieben Punkten erschweren die Auswahl. Diese Zahl ist allerdings eine praktische Startgrenze, keine feste Regel. Entscheidend ist, dass jeder Punkt die Sprache Ihrer Besucher spricht.

Schreiben Sie "SEO Beratung" oder "Webdesign" statt "Unsere Lösungen". Somit wissen Menschen vor dem Klick, wohin er führt. Zeigen Sie außerdem die wichtigste Aktion als eigenen Button, etwa "Angebot anfordern". Dann erkennen Besucher sofort, wo sie handeln können. Das gilt besonders mobil, wo jeder Tipp zählt.

Megamenüs helfen großen Websites. Für kleine Unternehmen erzeugen sie jedoch unnötige Komplexität. Mobil ist das Hamburger Menü Standard. Dennoch sollte die wichtigste Aktion sichtbar außerhalb des Menüs bleiben.

Bei der Planung helfen unser Leitfaden zum Navigationsmenü und der Beitrag zur Informationsarchitektur. Beide zeigen außerdem, wie Sie Ihre Seiten gruppieren.

Wie funktioniert der CTA auf der Startseite?

Ein CTA sagt dem Besucher, was er als Nächstes tun soll. Eine Startseite braucht meist mindestens zwei: die primäre Aktion auf dem ersten Bildschirm und eine abschließende Aktion weiter unten. Dazwischen können sekundäre Links stehen.

Der Text des primären CTA beschreibt also das Ergebnis. Zum Beispiel ist "Kostenloses Erstgespräch vereinbaren" klarer als "Absenden". Weil Menschen wissen, was nach dem Klick passiert, handeln sie häufiger. Beispiele finden Sie in unserem Beitrag zu CTA Buttons.

Zwei Regeln stechen hervor:

• Zeigen Sie pro Bildschirm einen primären CTA.
• Gestalten Sie sekundäre CTAs optisch zurückhaltender.

Andernfalls müssen Besucher wählen, und viele wählen nichts. Öffnet der CTA ein Formular, halten Sie daher die Felder knapp. Wie das geht, erklärt unser Beitrag zum Formular optimieren.

Platzieren Sie schließlich Telefon und WhatsApp mobil so, dass sie erreichbar bleiben, aber keine Inhalte verdecken.

Wo gehören Vertrauenselemente auf die Startseite?

Vertrauenselemente sind Belege, die das Risiko des Besuchers senken. Dazu zählen Kundenlogos, Bewertungen, Zertifikate, Auszeichnungen, Presseberichte und echte Teamfotos. Stapeln Sie sie daher nicht in einem Abschnitt.

Die Regel lautet: Platzieren Sie den Beleg direkt neben der Behauptung. Steht in der Überschrift zum Beispiel "schnelle Lieferung", zeigen Sie darunter die Lieferzeit. Steht im Leistungsbereich "erfahrenes Team", verlinken Sie die Teamseite.

Bei Kundenstimmen nennen Sie echten Namen, Branche und wenn möglich das Datum. Erfundene Bewertungen sind nämlich unethisch und rechtlich riskant. Ebenso zeigen Sie keine Kundenlogos ohne Erlaubnis. Ebenso wichtig: Belege müssen aktuell sein. Veraltete Zahlen schaden mehr, als sie nutzen, also prüfen Sie sie regelmäßig.

Eine längere Liste finden Sie in unserem Beitrag zu Vertrauenselementen auf der Website. Zudem schaffen Basics wie SSL, klare Kontaktdaten und eine Datenschutzseite Vertrauen. Halten Sie diese vollständig.

Wie können Sie die Startseite gestalten, damit sie mobil funktioniert?

Mobile Besucher surfen auf kleinem Bildschirm, oft einhändig und abgelenkt. Daher darf die mobile Startseite keine verkleinerte Desktopseite sein. Bauen Sie zuerst das mobile Layout und erweitern Sie es dann. Mehr dazu lesen Sie im Beitrag Was ist Mobile First Design.

Auch Google nutzt die mobile Version. Laut Google Search Central verwendet Google die mobile Version Ihrer Website für Indexierung und Ranking und empfiehlt, dass sie dieselben Inhalte wie die Desktopversion enthält (Google Search Central: Mobile First Indexierung).

Prüfen Sie mobil diese Punkte:

• Tippflächen sind groß genug für bequemes Antippen.
• Text lässt sich ohne Zoomen lesen.
• Popups verdecken keine Inhalte.
• Formularfelder öffnen die passende Tastatur.
• Die Seite hat kein horizontales Scrollen.

Einen schnellen Check bietet unser Mobile Friendly Test.

Wie beeinflusst die Ladezeit die Gestaltung der Startseite?

Eine langsame Startseite macht daher selbst das beste Design nutzlos. Google beschreibt die Seitenerfahrung mit den Core Web Vitals. Laut web.dev gelten folgende Werte als gut: LCP innerhalb von 2,5 Sekunden, INP von 200 Millisekunden oder weniger und CLS von 0,1 oder weniger, gemessen am 75. Perzentil der Seitenaufrufe (web.dev: Web Vitals).

Auf Startseiten belasten diese Faktoren die Werte am stärksten:

• Große, unkomprimierte Hero Bilder.
• Automatisch startende Hintergrundvideos.
• Viele Schriften und externe Skripte.
• Werbe- oder Chat Widgets ohne reservierten Platz.

Konkret gilt: Liefern Sie das Hauptbild in passender Größe und einem modernen Format aus, verbessert sich der LCP. Vergeben Sie feste Breiten und Höhen für Bilder, sinkt der CLS. Details erklärt unser Leitfaden zu Core Web Vitals.

Welches Layout hilft, wenn Sie die Startseite gestalten?

Nicht jede Startseite folgt derselben Reihenfolge. Zielgruppe und Verkaufsprozess bestimmen die Abschnittsfolge. Die Tabelle vergleicht drei häufige Fälle.

Ein lokales Unternehmen bedient nämlich oft dringende Bedürfnisse. Deshalb müssen Telefonnummer und Anfahrt auf dem ersten Bildschirm stehen. Im B2B Bereich dauern Entscheidungen länger. Daher ist ein kleiner Schritt wie ein Leitfaden Download oder ein Erstgespräch realistischer.

Im E-Commerce wirkt die Startseite dagegen wie ein Ladeneingang. Kategorieauswahl und Suchfeld stehen im Vordergrund. Bewertungen stützen den sozialen Beweis. Für einen dienstleistungsorientierten Ansatz lesen Sie mehr zu unserem Webdesign Angebot.

Wie schreiben Sie die Texte für die Startseite?

Startseitentexte sollten kurz, scannbar und kundenorientiert sein. Geben Sie jedem Abschnitt eine Überschrift, zwei bis drei Sätze und bei Bedarf einen Link. Lange Absätze gehen auf der Startseite also unter.

Wandeln Sie "Wir" Sprache in "Sie" Sprache um. Aus "Wir betreuen Sie mit 25 Jahren Erfahrung" wird "Seien Sie auf Seite eins sichtbar und erhalten Sie mehr Anrufe". Die zweite Version beschreibt nämlich den Nutzen des Lesers. Erfahrung dürfen Sie trotzdem nennen, nur an zweiter Stelle.

Auch Mikrotexte zählen. Button Beschriftungen, Formularhinweise und Fehlermeldungen prägen das Erlebnis. Unser Beitrag zu UX Writing ist ein guter Einstieg.

Nutzen Sie für SEO Ihre Marke und Hauptleistungen natürlich. Verzichten Sie stattdessen auf Keyword Stuffing und formulieren Sie Überschriften klar. Setzen Sie genau eine H1 und gliedern Sie Abschnitte mit H2.

Wie verbessern Barrierefreiheit und Kontrast die Startseite?

Eine barrierefreie Startseite funktioniert für mehr Menschen. Das ist also nicht nur ein rechtliches Thema, sondern auch ein praktisches Conversion Thema. Text mit schwachem Kontrast, winzige Buttons oder ein Menü ohne Tastaturbedienung kosten Sie Interessenten.

Die WCAG Richtlinien verlangen für normalen Text ein Kontrastverhältnis von mindestens 4,5 zu 1 (Stufe AA). Messen Sie das konkret bei grauem Text und Buttonfarben. Zudem sollte jedes Bild einen sinnvollen Alternativtext haben, der Fokus sichtbar bleiben und die Überschriftenstruktur sauber sein.

Mehr Details finden Sie im Beitrag zur barrierefreien Website und WCAG. Barrierefreiheit verbessert außerdem meist die allgemeine Bedienbarkeit. Somit ist der Einbau von Anfang an günstiger. Außerdem vermeiden Sie spätere Umbauten, die das Design aufwendig verändern würden.

Wie wählen Sie Bilder, Video und Schrift für die Startseite?

Bilder sollen belegen, was der Text behauptet. Schreiben Sie "erfahrenes Team", zeigen Sie ein echtes Teamfoto. Stockfotos hinterlassen oft einen unechten Eindruck, denn Besucher bemerken das schnell.

Setzen Sie Video ein, wählen Sie ein kurzes Format, das stumm beginnt und auf Wunsch startet. Automatisch abspielende Videos mit Ton schaden Tempo und Barrierefreiheit. Zeigen Sie stattdessen zuerst ein klares Vorschaubild und starten Sie das Video nach dem Klick. Hilfreich sind unsere Beiträge zur Bildoptimierung und zu Video und Conversion Rate.

Wie viele Schriften braucht die Startseite?

Nutzen Sie höchstens zwei Schriftfamilien: eine für Überschriften, eine für Fließtext. Zu viele Schriften wirken nämlich unruhig und bremsen die Seite. Für Fließtext sind 16 bis 18 Pixel am Desktop ein guter Start. Wählen Sie dann den Zeilenabstand großzügig, damit das Lesen leichtfällt. Auswahlkriterien finden Sie im Beitrag zur Web Typografie. Lesbarkeit geht also vor Stil.

Wie gestalten Sie den Ablauf der Abschnitte?

Besucher lesen eine Seite nämlich wie eine Geschichte. Daher sollte die Abschnittsfolge einer logischen Ordnung folgen: Problem, Lösung, Beleg, Ablauf, Aktion. Schließen Sie jeden Abschnitt mit einem natürlichen Übergang zum nächsten. Konkret hilft eine kurze Zwischenüberschrift oder ein Satz, der den nächsten Abschnitt ankündigt. Außerdem behalten Besucher so die Orientierung, auch wenn die Seite lang ist.

Lange Seiten sind nicht schlecht. Wiederholung ist dagegen schlecht. Sagen Sie also dieselbe Botschaft nicht an drei Stellen. Schaffen Sie außerdem visuellen Rhythmus: Gleichen Sie textlastige Bereiche mit Bild oder Zahlenabschnitten aus.

Zudem hält ein fester CTA oder ein fixiertes Menü die Aktion beim Scrollen in Reichweite. Verdeckt dieses Element jedoch große Teile des mobilen Bildschirms, schadet es.

Was gehört in den Footer?

Der Footer richtet sich an Besucher, die bis zum Ende lesen und noch zögern. Nehmen Sie Telefon, E-Mail und Adresse, Links zu den Hauptleistungen, Datenschutz und Cookie Seiten, Social Profile und einen kurzen Abschluss CTA auf. Somit schafft der Footer Vertrauen und stärkt die interne Verlinkung. Ein überfüllter Footer lenkt allerdings ab, deshalb wählen Sie die zwanzig wichtigsten Links.

Welche Fehler treten bei der Startseite am häufigsten auf?

In Audits sehen wir immer wieder dieselben Fehler. Sie sind zwar günstig zu beheben, aber teuer in der Wirkung.

• Die Überschrift enthält einen Slogan statt eines Angebots.
• Mehrere CTAs konkurrieren auf dem ersten Bildschirm.
• Automatische Slider verstecken die Kernbotschaft.
• Belege stehen ganz unten, wo niemand hinscrollt.
• Mobile Besucher sehen andere Inhalte als Desktop Besucher.
• Ein schweres Hero Bild bremst die Seite.
• Im Menü stehen Unterseiten ungeordnet.

Die meisten entstehen, weil vor dem Design niemand Inhalt und Ziel festgelegt hat. Schreiben Sie daher zuerst den Zweck der Seite auf und gehen Sie dann zur Optik über. Zur Wirkung solcher Fehler auf den Umsatz lesen Sie UX Fehler, die Umsatz kosten.

Wie lässt sich die Startseite gestalten, Schritt für Schritt?

Beginnen Sie bei null, folgen Sie daher dieser Reihenfolge. Sie ist eine vereinfachte Version des Rahmens, den unser Team in Projekten nutzt.

1. Formulieren Sie das Ziel: Was ist die eine Hauptaktion?
2. Definieren Sie Zielgruppe und die drei häufigsten Fragen.
3. Schreiben Sie das Nutzenversprechen in einem Satz.
4. Skizzieren Sie die Abschnittsfolge auf Papier und geben Sie jedem eine Aufgabe.
5. Schreiben Sie die Texte vor dem Design.
6. Erstellen Sie zuerst den mobilen Entwurf.
7. Platzieren Sie Belege neben den zugehörigen Aussagen.
8. Prüfen Sie Ladezeit und Barrierefreiheit.
9. Veröffentlichen Sie und messen Sie.

Wer diese Reihenfolge überspringt, zahlt also später mit teuren Korrekturen. Wenn Sie Ihre Startseite gestalten und dabei alle neun Schritte durchgehen, sparen Sie Abstimmungsrunden. Zudem wissen alle Beteiligten, wofür jeder Abschnitt da ist und woran Sie den Erfolg messen. Den Prozess vertieft unser Beitrag zur Conversion Optimierung für Firmenwebsites.

Wie starten Sie die Gestaltung mit einem Briefing?

Gutes Design beginnt mit einem guten Briefing. Ohne Briefing rät der Designer nämlich, und Sie korrigieren Entwürfe, die Ihnen nicht gefallen, immer wieder. Erstellen Sie daher zunächst ein kurzes Dokument. Wer seine Startseite gestalten will, braucht dieses Dokument als gemeinsame Grundlage für Texte, Design und Technik.

Darin stehen Zielgruppe, Hauptziel, Wettbewerbsbeispiele, Tonalität, Pflichtinhalte und Erfolgskennzahlen. Ergänzen Sie drei Websites, die Ihnen gefallen, und drei, die Ihnen nicht gefallen, jeweils mit Begründung.

Teilen Sie das Dokument dann mit dem Team und holen Sie die Freigabe ein. Konkret wird "Hauptziel: mehr Angebotsanfragen pro Monat" zum Kompass für jede Designentscheidung. Die Schritte erklärt unser Beitrag zum Webdesign Briefing.

Wie schützen Sie beim Relaunch der Startseite Ihr SEO?

Ein Relaunch der Startseite birgt ein Ranking Risiko. Ändern sich Titel, Inhalt und Linkstruktur, bewertet Google die Seite nämlich neu. Halten Sie daher den Ist Zustand fest, bevor Sie beginnen.

Gehen Sie so vor:

1. Sichern Sie Titel, Meta Beschreibung und H1.
2. Listen Sie rankende Begriffe und interne Links auf.
3. Behalten Sie URLs bei; ändern Sie sie nur mit 301 Weiterleitung.
4. Prüfen Sie nach dem Start Crawling und Indexierung in der Search Console.
5. Beobachten Sie Rankings und Klicks in den ersten Wochen.

Vergleichen Sie außerdem Ladezeit und mobile Ergebnisse des neuen Designs mit dem alten. Mehr dazu lesen Sie im Beitrag SEO beim Website Relaunch schützen.

Wie testen und messen Sie die Startseite?

Nach dem Launch ist die Arbeit allerdings nicht getan. Wählen Sie zunächst wenige Kernkennzahlen: Klickrate des primären CTA, Absprungverhalten, Scrolltiefe und Conversion Rate. Trennen Sie die Daten dann nach Mobilgerät und Desktop.

Bilden Sie anschließend eine Hypothese. Zum Beispiel: "Formulieren wir die Überschrift ergebnisorientiert, steigen die CTA Klicks." Ändern Sie jeweils nur eine Sache, damit Sie die Ursache kennen. Fehlt Traffic für Tests, nutzen Sie stattdessen qualitative Daten wie Heatmaps und Sitzungsaufzeichnungen.

Ihre Rate berechnen Sie mit unserem Conversion Rate Rechner. Für eine breitere Prüfung lesen Sie UX Audit durchführen.

Hier eine Beispielrechnung, keine echten Kundendaten: Eine Seite mit 4.000 Besuchern pro Monat und 1 % Conversion Rate erzielt 40 Abschlüsse. Steigt die Rate also auf 1,5 %, sind es 20 mehr. Reale Ergebnisse hängen allerdings von Branche und Angebot ab. Deshalb lohnt es sich, die Startseite gestalten zu lassen wie ein Experiment: Hypothese, Änderung, Messung und dann die nächste Runde.

Wann lohnt sich professionelle Hilfe bei der Startseite?

Manchmal ist der Alleingang schneller. Holen Sie sich jedoch einen Blick von außen, wenn Sie Traffic ohne Anfragen sehen, sehr schwache mobile Werte haben, die Seite langsam ist oder Ihre Marke wie jeder Wettbewerber wirkt.

In diesen Fällen prüft unser Team zunächst die bestehende Seite. Dann erstellen wir einen datenbasierten Verbesserungsplan für Design, Texte, Ladezeit und Messung. Ist kein kompletter Neubau nötig, kann dann schon die Korrektur von erstem Bildschirm und CTA viel bewirken.

Fragen Sie bei Angeboten, was der Umfang enthält: Sind Texte dabei, gehört mobiles Design dazu, werden Tempo und Barrierefreiheit geprüft? Hilfreich ist unsere Checkliste zum Vergleich von Webdesign Angeboten. Mehr zu unserem Vorgehen lesen Sie auf der Seite Webdesign.