Es ist gar nicht so einfach, eine ansprechende Landing-Page zu erstellen, die zudem auch wie gewünscht funktioniert.

Für eine erstklassige Landing-Page müssen Sie auf viele verschiedene Dinge achten. Welche das genau sind, hängt – wie so vieles andere auch – vom Ziel Ihrer Landing-Page ab. 

Nehmen wir zum Beispiel die Formularlänge: Das Formular ist nur eines von unzähligen Elementen auf der Landing-Page, das Sie optimieren müssen. Und wenn Sie sich an die Best Practices halten, werden Sie feststellen, dass es bei der Formularlänge kein „Richtig“ oder „Falsch“ gibt. Kurze und lange Formulare können gleichermaßen gut funktionieren – es hängt jeweils davon ab, ob Sie lieber viele Leads mit (potenziell) weniger Interesse oder eine kleinere Anzahl von Leads mit mehr Interesse generieren möchten.

Bevor man mit der Erstellung eigener Landing-Pages beginnt, sollte man zunächst herausfinden, was eine gute Landing-Page ausmachtund sich anhand von Beispielen ein Bild davon machen, wie diese einzelnen Elemente effektiv umgesetzt werden. Bei der Suche nach Beispielen für gelungene Landing-Page-Designs fiel uns allerdings auf, dass es kaum moderne, beeindruckende Landing-Pages gibt, die mehr bieten als nur eine Homepage mit einem Registrierungsformular. Das war dann auch der Grund, diese Liste mit Landing-Pages zusammenzustellen, die uns vom Design her überzeugen konnten.

Laden Sie unsere kostenlose Arbeitsmappe herunter, um ganz einfach die  Neugestaltung Ihrer Website zu planen.

Ein Hinweis vorab: Wir haben keinen Zugriff auf die Statistiken dieser Seiten. Deshalb können wir keine Aussagen dazu machen, wie viele Besucher, Leads und Kunden letztendlich auf diesen Landing-Pages konvertiert werden. Es handelt sich hier um Beispiele für die gelungene Kombination und Integration von einzelnen Landing-Page-Elementen. Wenn Sie eine der im folgenden Beitrag vorgestellten Taktiken selbst ausprobieren möchten, können Sie natürlich vorher nicht wissen, ob sie funktionieren. Daher lautet die Devise: Testen, testen, testen!

Erfolgreiche Landing-Pages: 16 Design-Beispiele, die man gesehen haben muss 

1) Wistia

Der erste Kandidat ist die Landing-Page von Wistia, auf der Besucher sich für ein kostenloses Konto registrieren können. Der Blick fällt sofort auf das kurze Formular zur Kontoerstellung, das sich mit seinen weißen Feldern perfekt vom blauen, minimal gemusterten Hintergrund abhebt.

Durch die Länge des Formularfelds in Kombination mit der auffälligen Platzierung weiß der Besucher sofort, worum es geht: Das Anlegen eines Kontos. Und wenn Sie noch zögern, können Sie nach unten scrollen und dort die Antworten auf häufig gestellte Fragen lesen. Da diese beiden Bereiche farblich gegensätzlich gestaltet sind, behalten Sie als Besucher leicht den Überblick und verlieren das Formular nicht aus den Augen – perfekt für die Konversionsrate!

Beispiele für ansprechendes Landing-Page-Design – Wistia

2) Unbounce

Wenig überraschend ist der nächste Platz auf unserer Liste: Unbounce! Schließlich hat uns dieses Unternehmen bereits in der Vergangenheit mit seiner Expertise zum Thema Landing-Pages und konversionsorientierter Optimierung beeindruckt. Diese Landing-Page hat zweifellos viele gelungene Elemente, von denen wir 2 besonders hervorheben möchten: 1) Der Pfeil, der aus Richtung der unterstützenden Bilder zum CTA-Button zeigt und 2) die detaillierten – aber gut verpackten – Informationen unter dem Formular. 

Punkt 1 (der Pfeil) weist Besucher sofort auf das Ziel der Seite hin: sie sollen das Formular ausfüllen! Und das Ganze funktioniert, ohne besonders aufdringlich zu sein. Es ist eine Kunst für sich, Besucher subtil durch eine Seite zu führen, und Unbounce setzt das hier perfekt um. Punkt 2 (die detaillierten Informationen) bietet für die Seite auch aus SEO-Perspektive Vorteile, denn Suchmaschinen haben so mehr Inhalte, die sie indexieren können. Gleichzeitig werden Besucher, die sich gerne erst näher informieren möchten, bevor sie ihre Kontaktdaten preisgeben, zufriedengestellt – und durch die geschickte Platzierung lenken diese Informationen nicht vom Formular ab. 

Beispiele für ansprechendes Landing-Page-Design – Unbounce

3) IMPACT Branding & Design

Direkt vorab: Ja, IMPACT ist HubSpot-Partner! Aber das ist nicht der Grund dafür, dass wir sie in unsere Liste aufgenommen haben. Die Landing-Pages von IMPACT gelten schon lange als Inspirationsquelle für gelungenes Design. Das einfache Layout der Seite, von der großen Überschrift und dem detaillierten Feature-Bild über den Rahmen, der das Formular umgibt, bis hin zu den Farben und Schriftarten, die sehr angenehm auf die Augen wirken, hier ist alles gelungen.

Vielleicht ist Ihnen auch das Kästchen aufgefallen, über das man den Blog abonnieren kann? Es ist standardmäßig angekreuzt! Bitte beachten Sie, dass ein Kästchen zum Abonnieren in einem Landing-Page-Formular zwar hervorragend geeignet ist, um neue Abonnenten zu gewinnen, wir aber empfehlen, das Kästchen nicht standardmäßig zu aktivieren, damit Benutzer selbst entscheiden können, ob sie etwas abonnieren möchten. Andernfalls riskieren Sie, dass zu viele uninteressierte Abonnenten in Ihre Kontaktdatenbank aufgenommen werden.

Beispiele für ansprechendes Landing-Page-Design – IMPACT

4) WebDAM

Die Landing-Page von WebDAM hat zweifellos viele hübsche Elemente, doch unser (unangefochtener) Favorit ist das Formular. Es fügt sich nahtlos in die Struktur der Seite ein und wirkt damit wie ein natürlicher Bestandteil, der sich aber aufgrund seiner Hintergrundfarbe dennoch visuell abhebt. Dadurch, dass das Formular neben einem Bild platziert wurde, das selbst keine essenziellen Informationen bereitstellt, werden Benutzer nicht abgelenkt und alle Aufmerksamkeit gilt dem Formular. Der Einsende-Button ist magentafarben (eine Komplementärfarbe zum Türkisblau) und sticht damit heraus und regt Besucher zum Download des Angebots an.

Unter dem Formular wird das Leistungsversprechen des Unternehmens noch einmal kurz und knapp in drei Punkten zusammengefasst. Zudem fungiert dieser Textblock als visuelle Abgrenzung vom darüberstehenden Formular. Erstklassige Arbeit, WebDAM!

Beispiele für ansprechendes Landing-Page-Design – WebDAM

5) Bills.com

Oft wird angenommen, dass es sich bei Landing-Pages um statische Seiten auf einer Website handelt. Das muss aber nicht zwingend so sein. Mit den richtigen Werkzeugen lassen sich Landing-Pages auch interaktiv gestalten und benutzerdefiniert anpassen.

Werfen Sie zum Beispiel einen Blick auf das folgende Beispiel von Bills.com. Zuerst müssen Sie drei Fragen beantworten, um zum Formular zu gelangen. Damit wird vorab geklärt, ob Sie eine Beratung überhaupt benötigen. Zunächst müssen Besucher angeben, wie hoch ihr Schuldenstand ist:

Beispiele für ansprechendes Landing-Page-Design – Bills.com 01

Daraufhin folgen zwei weitere Fragen, wie z. B. diese hier („Sind Sie mit Ihren Zahlungen im Verzug?“):

Beispiele für ansprechendes Landing-Page-Design – Bills.com 02

Und schon sind Sie beim eigentlichen Landing-Page-Formular angelangt, wo Sie gebeten werden, Ihre Daten einzugeben:

Beispiele für ansprechendes Landing-Page-Design – Bills.com 03

Unabhängig davon, wie der Algorithmus funktioniert (falls es überhaupt einen gibt), durch die Herangehensweise wird sich bei den Besuchern mitunter etwas Nervosität breit machen, dass sie nicht für eine Beratung infrage kommen könnten. Wenn Sie dann das Formular zu sehen bekommen, setzt quasi die Erleichterung ein und das Ausfüllen des Formulars geht ganz leicht von der Hand. Wir sind überzeugt davon, dass Bills.com aufgrund der Exklusivität des Angebots (sei sie nun echt oder vorgetäuscht) eine ziemlich hohe Konversionsrate hat.

6) Trulia

Trulia macht es auf seiner Landing-Page so ähnlich wie Bills.com. Dort startet man mit einem einfachen Formular, in dem nach „einer Adresse“ gefragt wird (was schon mal nicht ganz so aufdringlich wie „Ihre Adresse“ klingt, obwohl genau das gemeint ist). Unter dem einfachen Formularfeld befindet sich ein orangefarbener Button, der sich gut vom Hintergrundbild des Formulars abhebt. Der CTA-Text weist konkret darauf hin, dass eine individuelle Schätzung für Ihr Objekt vorgenommen wird.

Beispiele für ansprechendes Landing-Page-Design – Trulia 01

Natürlich reicht die Adresse nicht aus, um den Wert einer Immobilie zu bestimmen. Es werden eigentlich nur Lage und Umgebung erfasst. Aus diesem Grund folgen auf der nächsten Seite weitere Fragen über das Objekt selbst, wie die Anzahl an Schlafzimmern und Bädern. Darunter sehen Sie den Text „Tell us where to send the report“ („Sagen Sie uns, wohin wir den Bericht schicken sollen“) – mit einem Hinweis, dass Sie durch die Eingabe dieser Daten zustimmen, von einem Immobilienmakler kontaktiert zu werden. Das ist ein hervorragendes Beispiel für ein Unternehmen, das seinen Besuchern einen Mehrwert bietet und gleichzeitig darauf hinweist, was diese zu erwarten haben. 

Beispiele für ansprechendes Landing-Page-Design – Trulia 02

7) Basecamp

Basecamp hat eine umfangreiche Landing-Page mit vielen Informationen in und unter dem direkt sichtbaren Bereich. Dabei sind die Informationen jedoch größtenteils in Textform gehalten, was zugleich auch den Effekt hat, dass das einzige visuelle Element der Seite, das Formular, umso mehr hervorsticht. Auch hier ist der Registrierungsvorgang mit nur der Angabe der E-Mail-Adresse oder einem Login per Google-Account denkbar einfach gehalten.

Mit der Überschrift, die die Anzahl der Unternehmen nennt, die sich in der vorangegangenen Woche für Basecamp registriert haben, und den Kundenempfehlungen setzt Basecamp voll auf Social Proof, um die gewünschten Konversionen zu erzielen. Der Highlight-Effekt in den Kundenempfehlungen, der aussieht, als wäre hier mit einem Textmarker gearbeitet worden, sorgt für zusätzliche Betonung der Punkte, die Basecamp besonders anpreisen möchte.

Beispiele für ansprechendes Landing-Page-Design – Basecamp

8) Zendesk

Uns gefällt die Landing-Page für die kostenlose Testversion von Zendesk, denn sie ist sowohl vom Text- als auch vom Designaspekt her einfach und schlicht gehalten. Das Einzige, was sich wirklich abhebt, sind die beiden CTA-Buttons – und das Ei oben, das sich so bewegt, als würde gleich ein Küken daraus schlüpfen. Das Formular selbst ist simpel und fragt lediglich nach der beruflichen E-Mail-Adresse und einem Passwort, damit ein Konto erstellt werden kann. Sogar noch einfacher ist die Anmeldung über den Google Apps-Login. Diese Option bereitzustellen ist stets empfehlenswert, denn sie verkürzt den Konversionspfad noch weiter und hat generell eine niedrigere Hemmschwelle für Nutzer, die ohnehin über ein Google-Konto verfügen.

Beispiele für ansprechendes Landing-Page-Design – zendesk

9) Webprofits

Wie wäre es zur Abwechslung mal mit einer etwas längeren Landing-Page? Mit nur wenigen Tricks erweckt auch die längste Landing-Page den Eindruck, als wäre sie kurz. Webprofits zeigt uns, wie das geht.

Ganz oben befindet sich ein prominent platziertes Formularfeld für eine E-Mail-Adresse, das sich gut vom Hintergrund abhebt und damit per se schon einmal auffällt. Wenn Sie sofort Ihre Daten hinterlassen möchten, müssen Sie einfach nur Ihre E-Mail-Adresse eingeben, damit wie von Zauberhand der Rest des Formularfelds angezeigt wird. Dadurch, dass das komplette Formular nicht sofort angezeigt wird, wirkt die Seite nicht so komplex.

Außerdem wird auf den ersten Blick erkennbar, was Webprofits eigentlich macht. Der Rest der Seite liefert detaillierte Informationen darüber, was Sie bekommen, wenn Sie Ihre Daten eingeben. Außerdem sind überall an strategischen Stellen CTAs platziert, mit denen Besucher wieder zum Anfang der Seite gelangen.

Beispiele für ansprechendes Landing-Page-Design – webprofits

10) Inbound Emotion

Diese Landing-Page auf Spanisch stammt von einem HubSpot-Partner. Ähnlich wie bei dem Beispiel von Basecamp ist das Formular auffällig platziert und bleibt stets im sichtbaren Bereich, selbst wenn Besucher herunterscrollen. Uns gefallen auch die grafisch dargestellten Hände, die Besuchern zeigen, wo sie ihre Daten eintragen müssen oder wo sie die Seite mit anderen teilen können.

Beispiele für ansprechendes Landing-Page-Design – Inbound Emotion 

11) H.BLOOM

Manchmal möchte man eine Landing-Page einfach nur eine Weile auf sich wirken lassen, weil sie so hübsch ist. H.BLOOM schafft genau das mit einer hochauflösenden Fotografie und viel Freiraum – man möchte gar nicht mehr weggucken. 

Neben dem ansprechenden Design hat die Seite aber auch ein paar tolle Konversionselemente: ein Formular im direkt sichtbaren Bereich, eine klare und prägnante Erklärung, was nach dem Ausfüllen des Formulars passiert, und einen orangefarbenen Einsende-Button. Es gibt nur eine Sache, die wir ändern würden: Und zwar den Text des Einsende-Buttons, damit er sich konkreter auf das Angebot bezieht. 

Beispiele für ansprechendes Landing-Page-Design – H.BLOOM

12) Velaro Live Chat

Manchmal machen die kleinsten Dinge den größten Unterschied. Das ist zum Beispiel bei der Landing-Page von Velaro Live Chat der Fall.

Das kleine PDF-Symbol im Feature-Bild ist ein subtiler Hinweis darauf, in welchem Format das Angebot bereitgestellt wird. Der Pfeil vor der Unterüberschrift lenkt die Aufmerksamkeit des Besuchers auf den Text, der unbedingt gelesen werden sollte. So wie bei IMPACT gibt es auch hier ein automatisch angekreuztes Kästchen für das Newsletter-Abo, was als Opt-in-Version eine tolle Möglichkeit ist, neue Abonnenten zu gewinnen. Alle diese kleinen, auf den ersten Blick unbedeutend erscheinenden Details ergeben insgesamt ein hervorragendes, funktionierendes Landing-Page-Design.

Beispiele für ansprechendes Landing-Page-Design – Velaro Live Chat

 

13) Conversion Lab

Normalerweise würden wir eine Startseite mit einem Formular nicht als Beispiel für eine gelungene Landing-Page aufführen. Bei dieser Website machen wir aber aus gutem Grund eine Ausnahme! Die Startseite ist nämlich die komplette Website und die Navigations-Links bringen Sie lediglich zu den Informationen weiter unten auf der Seite.

Sie müssen nur auf „Get Help With Landing Pages“ (Hilfe zu Landing-Pages) klicken und schon rückt die gesamte Website zur Seite und macht damit Platz für das Formular. So sieht es vor dem Klick aus:

Beispiele für ansprechendes Landing-Page-Design – Conversion Lab 01

Nach dem Klick auf den CTA wird dann das Formular angezeigt: 

Beispiele für ansprechendes Landing-Page-Design – Conversion Lab 02

Die Tatsache, dass man die Seite nicht verlassen muss, um das Formular auszufüllen, sorgt für ein reibungsloses Nutzererlebnis. Außerdem ist das Formular ganz unaufdringlich platziert.

14) Industrial Strength Marketing

Diese Landing-Page weckt mit ihrer provozierenden Überschrift sofort das Interesse von Besuchern. Denn dort steht unübersehbar: „Don't Make Me Zoom“ (in etwa: „Schluss mit zoomen!“). Hier wird ein häufiges Problem thematisiert, das die meisten von uns haben, wenn wir mit dem Smartphone oder dem Tablet surfen – und die Aussage ist dabei bewusst in einem leicht provokanten Ton gehalten. 

Aber das ist nicht das einzige interessante Element dieser Landing-Page. Ist Ihnen aufgefallen, wie die Farbe Rot strategisch platziert wurde? Zum Beispiel über und unter dem Formular, wodurch Sie näher in Richtung Konversion geführt werden.

Beispiele für ansprechendes Landing-Page-Design – Industrial Strength Marketing 01

Außerdem hat dieses Design einen entscheidenden Vorteil: Es sieht auch auf mobilen Geräten super aus. Denn Sie sollten immer im Hinterkopf behalten, dass viele Besucher Ihre Landing-Pages mit ihren Smartphones oder Tablets aufrufen. Wenn das Design dann nicht stimmt, verlassen sie Ihre Seite womöglich schnell wieder.

Die Leute bei Industrial Strength Marketing haben die Schriftart und das Formularfeld groß genug gestaltet, damit Besucher nicht erst heranzoomen müssen, um z. B. den Text lesen oder mit Inhalten interagieren zu können. (Lesen Sie diesen Blog-Beitrag, um zu erfahren, worauf es bei Website-Design im Hinblick auf ein gutes Nutzererlebnis ankommt.)

Beispiele für ansprechendes Landing-Page-Design – Industrial Strength Marketing 02

Beispiele für ansprechendes Landing-Page-Design – Industrial Strength Marketing 03

15) Shopify

Wie viele andere Beispiele in diesem Beitrag setzt Shopify bei seiner Landing-Page für den Testlauf auf Einfachheit ohne viel Schnickschnack. Die benutzerorientierte Überschrift besteht zum Beispiel nur aus ein paar Wörtern, die Unterüberschrift („Trusted by over 325,000 businesses worldwide“, etwa: „Über 325.000 Unternehmen weltweit vertrauen auf uns“) bringt Social Proof ins Spiel und die Bilder suggerieren, dass Nutzer das Produkt auf allen Geräten nutzen können. Sie müssen lediglich ihre E-Mail-Adresse angeben, um loszulegen. So kommen Sie schnell zum eigentlichen Punkt: Online Produkte verkaufen – und zwar mit dem Werkzeug von Shopify. 

Das i-Tüpfelchen? Die Landing-Page ist für jedes Gerät optimiert, sowohl was das Design betrifft als auch die Funktionalität. Responsive Design ist das Geheimnis!

Beispiele für ansprechendes Landing-Page-Design – Shopify

Haben auch Sie inspirierende Beispiele für großartige Landing-Pages? Hinterlassen Sie uns doch einen Kommentar mit Ihren Favoriten!

New Call-to-action

Ursprünglich veröffentlicht am 19. Juni 2017, aktualisiert am 21. Dezember 2017

Themen:

Landing Pages