Landing Page Design: Conversion-optimierte Layouts

Landing Pages sind Einzelseiten mit einem klar definierten Konversionsziel, auf die Besucher über Werbeanzeigen, E-Mail-Kampagnen oder Suchmaschinen geleitet werden und die durch gezieltes Design zur gewünschten Handlung motivieren.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Web-Grundlagen · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Conversion Page, Campaign Landing Page, Squeeze Page

Was ist Landing Page Design?

Eine Landing Page ist keine gewöhnliche Website-Unterseite. Sie ist ein scharf fokussiertes Instrument mit einem einzigen Ziel: den Besucher zur Handlung zu bewegen – sei es ein Kauf, eine Anmeldung, ein Download oder ein Kontaktformular.

Das Besondere am Landing Page Design ist die Messbarkeit: Jede Design-Entscheidung kann durch A/B-Tests validiert werden. Kein anderes Design-Format bietet mehr direkte Rückkopplung zwischen Gestaltung und messbarer Wirkung.

Laut einer Studie von HubSpot (2020) haben Websites mit 10–15 Landing Pages 55 % mehr Leads als Websites mit unter 10 Landing Pages. Design-Qualität ist dabei entscheidend: Eine optimierte Landing Page kann die Conversion Rate um Faktoren verbessern.

Erklärung

Anatomie einer Landing Page

1. Hero-Section (Above the Fold) Der erste Eindruck. Besucher entscheiden in Sekunden, ob sie bleiben. Above the Fold: Was Besucher zuerst sehen beschreibt diesen Bereich im Detail. Kernelemente:

• Headline: Klarer Nutzenversprechen, nicht Produktbeschreibung
• Subheadline: Ergänzt die Headline mit Details
• Hero-Bild oder -Video: Zeigt Produkt oder Ergebnis
• Primärer CTA (Call to Action): Der wichtigste Button der Seite

2. Value Proposition Was bekommt der Nutzer? Warum ist das einzigartig? Typisch: 3–4 Icons mit kurzen Erklärtexten. Vermeide generische Versprechen ("Qualität und Service") und sei spezifisch ("Lieferung in 24 Stunden").

3. Social Proof Vertrauen aufbauen: Kundenbewertungen, Logos bekannter Kunden, Fallstudien, Zahlen ("Über 50.000 zufriedene Kunden"). Menschen folgen dem Verhalten anderer Menschen – Social Proof nutzt diesen Mechanismus.

4. Problem-Lösung-Struktur Erst das Problem des Nutzers benennen (empathisch, nicht dramatisierend), dann die Lösung präsentieren. Diese Struktur erzeugt emotionale Resonanz.

5. Features / Benefits Details für Nutzer, die weiter lesen. Wichtig: immer Benefits kommunizieren, nicht nur Features. "16 GB RAM" ist ein Feature – "Läuft alle Programme gleichzeitig, ohne zu ruckeln" ist der Benefit.

6. Sekundärer CTA Am Ende der Seite nochmals der Call to Action. Nutzer, die bis hier gelesen haben, sind warm – der zweite CTA konvertiert oft besser als der erste.

7. Footer (minimal) Landing Pages haben oft einen stark reduzierten Footer: nur rechtlich Notwendiges (Impressum, Datenschutz), keine ablenkende Navigation.

Navigation: Weniger ist mehr

Eine der wichtigsten Landing-Page-Regeln: Keine Standard-Navigation. Jeder externe Link ist eine potenzielle Ablenkung, die den Nutzer von der Conversion wegführt. Viele Landing Pages entfernen die Navigation komplett oder zeigen nur den Brand-Logo-Link.

Der CTA-Button

Der wichtigste Design-Element einer Landing Page:

• Farbe: Soll aus dem restlichen Design hervorstechen (nicht unbedingt die Primärfarbe)
• Text: Aktionsorientiert und spezifisch – nicht "Absenden", sondern "Kostenlos anmelden", "Guide herunterladen"
• Größe: Groß genug zum Auffinden, aber nicht aufdringlich
• Umgebung: Weißraum um den CTA erhöht die Klickrate

Visuelle Hierarchie

Landing Pages nutzen intensive visuelle Hierarchie, um Blickführung zu erzwingen:

• Der Blick soll zuerst zur Headline, dann zum Heldenbild, dann zum CTA wandern
• Kontrast und Größe dirigieren die Aufmerksamkeit
• Heatmaps und Scrollmaps: Design datengestützt verbessern zeigt, wie reale Blickpfade von Nutzern aussehen

Ablenkungen minimieren

"Attention ratio" beschreibt das Verhältnis von interaktiven Links zu Konversionszielen. Eine Landing Page hat idealerweise ein Verhältnis von 1:1 – ein Link, ein Ziel (der CTA). Jeder zusätzliche Link reduziert statistisch die Conversion Rate.

Beispiele

SaaS Landing Page: Headline erklärt in einem Satz, was die Software macht. Hero zeigt einen Screenshot oder kurzes Demo-Video. Drei Icons beschreiben Hauptvorteile. Kundenlogos. Preistabelle. FAQ. CTA.

E-Book Download: Einfache, vertikale Landing Page. Headline erklärt, welches Problem das E-Book löst. Bullet Points für Inhalte. Formular (nur E-Mail, kein Vorname nötig). CTA "Jetzt kostenlos herunterladen".

Webinar-Anmeldung: Klarer Nutzen des Webinars, Datum/Uhrzeit prominent, Foto des Speakers, Countdown-Timer, Anmeldeformular mit max. 3 Feldern.

In der Praxis

Tools für Landing Pages

• Webflow: Vollständige Designkontrolle, kein Code nötig (CMS für Designer: WordPress, Webflow, Kirby, Contentful)
• Unbounce / Instapage: Dedizierte Landing-Page-Builder mit A/B-Test-Features
• Framer: Figma-import, animationsfreudig
• WordPress + Elementor: Für WordPress-Projekte

A/B-Testing

Landing Pages sind ideal für A/B-Tests, weil das Ziel (Conversion) messbar ist. Typische Tests:

• Headline-Varianten: Welche Formulierung überzeugt mehr?
• CTA-Text: "Kostenlos testen" vs. "Jetzt starten"
• CTA-Farbe: Grün vs. Orange
• Seitenlänge: Kurze vs. lange Version
• Social Proof Position: Vor oder nach den Features?

Heatmaps und Scrollmaps: Design datengestützt verbessern erklärt, wie Heatmaps den Designprozess von Landing Pages informieren.

Ladezeit ist Conversion-Faktor

Lange Ladezeiten töten Landing Pages. Jede Sekunde Verzögerung reduziert die Conversion Rate um ca. 7 % (Akamai, 2018). Page Speed und Core Web Vitals: Was Designer wissen müssen und Bildoptimierung für Web: WebP, AVIF, Lazy Loading sind daher direkt relevant.

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Wie lang soll eine Landing Page sein? So lang wie nötig, um alle Fragen zu beantworten, die ein Nutzer vor der Conversion haben könnte. Es gibt keine universelle Antwort – kurze Seiten funktionieren bei einfachen, günstigen Angeboten; lange Seiten bei komplexen, teuren Produkten.

Muss eine Landing Page responsive sein? Unbedingt. Viele Werbeanzeigen werden auf Mobilgeräten geklickt. Eine nicht-mobile Landing Page verliert die meisten dieser Nutzer sofort.

Was ist ein guter Conversion-Wert? Das ist branchenabhängig. Im Durchschnitt konvertieren Landing Pages zu ca. 2–5 %. Sehr gut optimierte Seiten erreichen 10–15 % und mehr.

Verwandte Einträge

• Above the Fold: Was Besucher zuerst sehen – Der erste sichtbare Bereich
• Heatmaps und Scrollmaps: Design datengestützt verbessern – Datengestütztes Optimieren von Landing Pages
• Page Speed und Core Web Vitals: Was Designer wissen müssen – Ladezeit und Conversion
• Bildoptimierung für Web: WebP, AVIF, Lazy Loading – Schnelle Bilder für Landing Pages
• Responsive Design: Grundlagen und Breakpoints – Mobile Landing Pages
• CMS für Designer: WordPress, Webflow, Kirby, Contentful – CMS-Tools für Landing Pages
• Micro-Interactions im Web: Hover, Click, Load – CTA-Interaktionen

Weiterführend

• Eisenberg, B. & Quarto-vonTivadar, J. (2008). Always Be Testing. Sybex.
• Ash, T. et al. (2012). Landing Page Optimization. 2. Aufl. Sybex.
• HubSpot (2020). The Anatomy of a Landing Page.
• Nielsen Norman Group (2022). Visual Hierarchy in Landing Page Design.
• Akamai Technologies (2018). Performance and E-Commerce Conversion Rates. Research Report.