Landingpage-Design: der Aufbau von Seiten, die konvertieren

Gutes Landingpage-Design ist ein Ziel, der Reihe nach begründet. Anders als eine Startseite, die allen dient, existiert eine Landingpage für einen Besucher, der von einem Ort kommt, um eine Aktion auszuführen: die Probestunde buchen, sich auf die Warteliste setzen, das Angebot einlösen. Der Aufbau, der immer wieder funktioniert, ist ein klarer Hero, das Problem in den Worten des Lesers, so funktioniert es, Belege, die Details des Angebots, Antworten auf Einwände und derselbe Call to Action am Ende. Aufgabe des Designs ist es, dieser Reihenfolge mühelos folgen zu lassen.

Eine Seite, ein Ziel

Schreib das Ziel in einem Satz auf, bevor du irgendetwas gestaltest: „Erstbesucher aus unserer Instagram-Anzeige sollen eine kostenlose Einführungsstunde buchen.“ Jeder Abschnitt hat dann einen Test. Hilft er dieser Person bei diesem Schritt? Wenn nicht, streich ihn oder verschieb ihn auf die Hauptseite.

Der Aufbau einer Landingpage, Abschnitt für Abschnitt

1. 1

   Hero

   Überschrift mit dem Versprechen, eine unterstützende Zeile, ein Button, ein Bild. Hero-Bereich gestalten behandelt diesen Bildschirm im Detail.

2. 2

   Das Problem

   Zwei oder drei Sätze über die Situation, in der der Besucher steckt, in seinen Worten. Sie zeigen, dass du verstehst, bevor du verkaufst.

3. 3

   So funktioniert es

   Drei Schritte, jeder mit kurzem Titel und einem Satz. Leute sagen leichter zu, wenn sie sich den Ablauf vorstellen können.

4. 4

   Belege

   Echte Erfahrungsberichte mit Namen, Fotos echter Arbeiten, Logos echter Kunden oder eine kurze Demo. Niemals erfunden.

5. 5

   Das Angebot im Detail

   Was genau man bekommt, wann, und was es kostet oder nicht kostet. Klare Bedingungen nehmen das Zögern.

6. 6

   Einwände

   Ein kurzes FAQ, das die Gründe beantwortet, warum Leute nicht handeln: Zeit, Preis, Eignung, Kündigung, was als Nächstes passiert.

7. 7

   Abschließender Call to Action

   Wiederhole das Versprechen der Überschrift und denselben Button. Wer bis zum Ende liest, ist bereit; lass ihn nicht wieder nach oben scrollen.

Nicht jede Seite braucht jeden Abschnitt. Eine Warteliste für einen Launch kann nur aus einem Hero, drei Zeilen zum Ablauf und einem E-Mail-Feld bestehen. Ein Angebot mit hoher Verbindlichkeit, etwa ein Kurs oder eine Beratung, braucht meist alle sieben und mehr Belege.

Ein ausgearbeitetes Beispiel: das Einstiegsangebot eines Yogastudios

Lass die Seite zur Anzeige passen, von der sie kommen

Die meisten Besucher einer Landingpage kommen von irgendwoher: von einer Instagram-Anzeige, einer LinkedIn-Anzeige, einer E-Mail, einem QR-Code auf einem Flyer. Sobald sie ankommen, prüfen sie, ob sie richtig sind. Wiederhole das genaue Angebot aus der Anzeige in der Überschrift und übernimm ihren Look: denselben Hintergrund, dieselben Farben und dieselbe Schrift. Eine Seite, die nichts mit der Anzeige zu tun zu haben scheint, wirkt wie ein Lockangebot, selbst wenn sie keines ist.

Gestaltest du beides aus einer Quelle, passiert das automatisch. In Gradiently lässt sich ein Design mit Pro in einem Schritt auf jede Größe bringen, sodass Post, Story, E-Mail-Header und Seiten-Hero einen Mark und eine Überschrift teilen. Ein Look, jede Größe zeigt den Ablauf, und Markenkonsistenz erklärt, warum das über eine Kampagne hinaus zählt.

Designentscheidungen, die Leute weiterscrollen lassen

• Eine Akzentfarbe für jeden Button, sonst nirgends verwendet. Das Auge lernt, wo es klicken soll. Die 60-30-10-Regel ist ein guter Weg, die Balance festzulegen.
• Großzügiger Abstand zwischen Abschnitten, damit jeder als eine Idee gelesen wird. Volle Seiten fühlen sich nach Arbeit an.
• Überschriften, die für sich allein Sinn ergeben. Viele überfliegen nur die Überschriften; sie sollten die ganze Geschichte erzählen.
• Echte Fotos statt Stockbilder. Dein echter Raum, dein Produkt, dein Team oder deine Ergebnisse.
• Kurze Formulare. Frag nur, was du jetzt brauchst. Eine E-Mail-Adresse gibt man leichter her als eine Telefonnummer.
• Kein Navigationsmenü oder nur ein Logo, damit es keinen Ausweg gibt.

Erst mobil, dann testen

Traffic aus Social-Media-Posts kommt größtenteils auf dem Handy an, also gestalte zuerst die Version mit 390 Pixeln Breite. Halte Überschrift und Button auf dem ersten Bildschirm, mach Buttons mindestens 44 Pixel hoch und nutze einen fixierten Button nur, wenn er keinen Inhalt verdeckt.

Es gibt keine allgemeingültige gute Conversion-Rate; sie hängt von Angebot, Preis und Traffic ab. Was du immer tun kannst: die nächste Version klarer machen als die letzte. Für die Farben hinter allem siehe Farbschemata für Websites.