Gute Inspiration f\u00fcr eine Landing Page zu finden ist eine gro\u00dfe Herausforderung, daher haben wir in diesem Artikel f\u00fcr Sie eine Auswahl der modernsten und erfolgreichsten Landing Page Designs f\u00fcr 2018 zusammengestellt.<\/p>\n
Wenn Sie Fragen zum Thema Landing Page haben oder vorab mehr dazu erfahren m\u00f6chten, haben wir in diesem Artikel ein paar allgemeine Informationen und Tipps zur Verringerung der Bounce-Rate gesammelt<\/a>.<\/p>\n Die Beispiele, die Sie weiter unten finden, stammen von echten Websites. Stellen Sie f\u00fcr Ihre Website nicht die Anforderung an sich selbst, von Anfang an perfekt zu sein. Wir empfehlen, verschiedene Designs in einem A\/B Test gegeneinander zu testen<\/a>.<\/p>\n Schluss mit dem Bauchgef\u00fchl! F\u00fcr sichere, datenbasierte Entscheidungsfindung hier entlang.<\/a><\/strong><\/p>\n LeadQuizzes<\/a> hat sich auf Quizze und R\u00e4tsel zur Leadgenerierung spezialisiert.Was direkt auff\u00e4llt, ist das (wirklich gut designte) Erkl\u00e4rvideo auf der Seite, das sofort alle wichtigen Fragen beantwortet:<\/p>\n Der gelbe Call To Action Button hebt sich vom Rest der Seite deutlich hervor. Das Wording „Try it Free“ („Kostenlos testen“) versichert dem User, dass der Klick auch wirklich keine Kosten mit sich bringt. Mehr zur Optimierung von Call-To-Actions<\/a> finden Sie hier.<\/p>\n Sogenannter Social Proof ist klar vorhanden und gut eingesetzt: Referenzen bekannter Kunden finden sich auf der Seite wieder genauso wie die Information, dass der Service LeadQuizzes bereits mehr als 3 Millionen Leads f\u00fcr seine Kunden generieren konnte.<\/p>\n Auch der Rest der Landing Page entt\u00e4uscht nicht: Die Seite zielt darauf ab, den User \u00fcber den cleveren Einsatz des Produktes aufzukl\u00e4ren. Das Ziel: eine Landing Page, die ganzheitlich zur \u00dcberzeugung des Users beitr\u00e4gt, dass LeadQuizzes DAS Tool ist, was er zur Leadgenerierung ben\u00f6tigt.<\/p>\n Der Social Proof, mit dem LeadQuizzes hier arbeitet, zeigt dem Website-Besucher auf einen Blick:<\/p>\n GrowthHackers<\/a>\u00a0vertreibt eine Software f\u00fcr das Marketing, die sich – wie der Name bereits sagt – voll und ganz dem „Growth Hacking“ widmet: Mehr Leads generieren, das Gesch\u00e4ft voran bringen.<\/p>\n Wie auch bei LeadQuizzes, sticht der gelbe Call To Action deutlich hervor und regt zu einer klaren Handlung an. Auch die Option „Learn more“ steht bereit, um jene User anzusprechen, die nicht sofort \u00fcberzeugt sind und noch weitere Informationen einholen m\u00f6chten.<\/p>\n Dar\u00fcber hinaus setzt die Landingpage ein Drop Down Men\u00fc ein, das auf die wichtigsten Fragen der User eingeht:<\/p>\n In einem Chat-Fenster kann man zudem weitere Fragen stellen.<\/p>\n Der Social Proof wird hier auf zwei Weisen eingesetzt:<\/p>\n Ein einziger Kritikpunkt k\u00f6nnte darin bestehen, dass die Zahl der User nicht gut sichtbar ist.<\/p>\n ElegantThemes<\/a> bietet seinen Usern exklusive WordPress Vorlagen und „Themes“. Zum Angebot z\u00e4hlt auch ein „Builder“ namens Divi, mit dem man ganz eigene Seiten in WordPress bauen kann.<\/p>\n Der Social Proof f\u00e4llt sofort ins Auge: mehr als 400.000 User nutzen den Anbieter.<\/p>\n Das Leistungsversprechen ist zweigeteilt, dazu greift die Seite auf zwei unterschiedliche Call To Actions zur\u00fcck: ein Teil hebt die vorgefertigten Vorlagen hervor und ein anderer weist auf das Plugin des Anbieters hin (den „Builder“).<\/p>\n Auch interessant: in der unteren H\u00e4lfte finden wir eine Sprechblase, die Fragen der User beantwortet.<\/p>\n Der Chat hat die Besonderheit, dass User hier auch Anh\u00e4nge, Emojis und GIFs senden k\u00f6nnen, was die Interaktion zus\u00e4tzlich intensiviert.<\/p>\n Wer auf der Seite surft, dem wird eine „Live“ Demo des\u00a0Divi Builders<\/a>\u00a0vorgeschlagen. F\u00fcr die Conversion Rate der Seite ist das besonders wichtig, da User hier das Produkt direkt, ganze ohne Hindernisse und Vorabzahlungen, kennenlernen k\u00f6nnen.<\/p>\n Weiter unten auf der Website wird noch einmal mit Social Proof gespielt, indem der User auf das 30-t\u00e4gige Umtauschrecht hingewiesen wird.<\/p>\n Zudem hebt sich der pinke CTA vom blauen Hintergrund deutlich hervor. Starke Kontraste erregen besonders die Aufmerksamkeit des menschlichen Auges. Warum also nicht klicken?<\/p>\n Mit dem CSM Shopify<\/a>\u00a0k\u00f6nnen Sie schnell und einfach Ihre eigene E-Commerce Seite erstellen, ganz ohne technische Kenntnisse. Shopify sticht durch das umfangreiche Angebot an Zusatzinformationen (Guides, Videos, Podcasts, Foren) hervor sowie durch komplement\u00e4re Serviceangebote: eine Auswahl fertiger Vorlagen, eine Auswahl kostenfreier Stock-Fotos etc.<\/p>\n Die Landing Page fasst das Angebot in einem Satz f\u00fcr den User zusammen: „the e-commerce platform made for you“ (Die f\u00fcr Sie gemachte E-Commerce Plattform). Mit dieser Aussage wird eine gro\u00dfe, oft unabh\u00e4ngige Kundengruppe angesprochen. Die Idee wird durch das verwendete Bild noch einmal aufgegriffen.<\/p>\n Das Besondere an dieser Landingpage ist, dass der Call-To-Action direkt im ersten Schritt mit der Eingabe einer E-Mail-Adresse arbeitet. Wer das Tool 14 Tage lang kostenlos testen m\u00f6chte, muss diese hinterlassen. Eine erfolgreiche Conversion wird erm\u00f6glicht, indem der User direkt darauf hingewiesen wird, dass f\u00fcr den Probezeitraum keine Kreditkartenangaben notwendig sind. Die Aussage dahinter: Klick auf den Button, es gibt keine versteckten Kosten!<\/p>\n Der Rest der Seite fokussiert sich auf die Features des Shopify Services.<\/p>\n Spezielle Illustrationen und kurze Textabschnitte heben die Funktionen und Vorz\u00fcge des Tools hervor und zielen darauf ab, den User von dem Anbieter zu \u00fcberzeugen.<\/p>\n Ein unschlagbares Verkaufsargument im CMS-Sektor, der erfolgreiche Einsatz des Tools durch viele viele andere User, wird auf der Seite mit zwei Elementen dargestellt:<\/p>\n Diese Elemente sollten eine klare Aussage im Kopf des Website-Besuchers kreieren: „Wenn bereits 1.000.000 User mit Shopify richtige Shops ohne Programmieren erstellen, dann kann ich das doch auch!“<\/p>\n Salesforce<\/a> bedarf fast keiner Erkl\u00e4rung. Als „K\u00f6nig des CRM“ (Customer Relationship Management), setzte der Amerikanische Anbieter schon lange einige sehr gelungene Landing Pages ein.<\/p>\n Zun\u00e4chst f\u00e4llt uns das bunte Design auf. Zwei Call To Actions bilden zudem – „above the fold“ – das Herzst\u00fcck der Landing Page: „Produktdemo ansehen“ und „Kostenlos testen“.<\/p>\n Salesforce bietet auch eine L\u00f6sung f\u00fcr gro\u00dfe Unternehmen an. Der entsprechende Call To Action wurde rechts des „Free Trials“ im Bild platziert: eine gute Gelegenheit, um potenzielle Leads gr\u00f6\u00dferer Konzerne zu generieren.<\/p>\n Wenn User auf einen der Call-To-Actions klicken, werden Sie auf eine Landing Page weitergeleitet, die speziell darauf ausgerichtet ist, m\u00f6glichst viele Conversions zu erzielen – also so viele Besucher, wie m\u00f6glich, in Leads zu verwandeln.<\/p>\n Zu den verwendeten Elementen z\u00e4hlen:<\/p>\n Neil Patel<\/a>\u00a0ist ein bekannter Digital Marketing Consultant in den USA, aber auch weltweit in der Branche bekannt. Seine Website verzeichnet dank cleverer Content-Strategie und beliebter Ressourcen f\u00fcr Online-User (Blogartikel, Youtube Videos, praktische Guides etc.) jeden Monat mehrere Millionen Aufrufe.<\/p>\n An dieser Seite gef\u00e4llt uns besonders die direkte Ansprache des Users, die klarer nicht sein k\u00f6nnte: M\u00f6chten Sie mehr Traffic?<\/p>\n Das allgemeine Farbdesign ist simpel gestaltet und spielt mit den Kontrastfarben Wei\u00df und Orange. Die Idee: dem User eine einfache, direkte Frage stellen, die niemand verneinen kann – das macht die Seite sofort f\u00fcr jeden relevant – und das Engagement so hoch.<\/p>\n Auf der Landing Page finden wir ein Formular. Hier k\u00f6nnen User ihre Website-URL eingeben und eine Echtzeit-Analyse ihrer Seite erhalten. Ganz unverbindlich kann so jeder ein Feedback zu seiner Website erhalten.<\/p>\n Jede Seite auf Neil Patels Homepage ist als eigene Landing Page designt. Dabei verfolgt jede das gleiche Ziel: m\u00f6glichst viele Besucher in Kunden verwandeln.<\/p>\n Die Service-Seite zum Beispiel (siehe oben) besteht aus einem recht langen Textblock, der den User zus\u00e4tzlich versichern soll. Er beschreibt, was Neil f\u00fcr seine Kunden tun kann, was er bereits geleistet hat (siehe unten) und mit welchen namhaften Kunden er zusammenarbeitet.<\/p>\n Der Ansatz ist dabei stets sehr direkt und unterstreicht die Vorteile und St\u00e4rken des SEO-Services.<\/p>\n Auf derselben Seite ist der Call-To-Action erst ganz unten platziert. Hier fragt man sich: Ist das eine gute Idee? Die Folgeschritte sind in verschiedene Zwischenschritte unterteilt, in denen User ihre Informationen eingeben, um im Nachgang kontaktiert werden zu k\u00f6nnen.<\/p>\n UpWork<\/a>\u00a0ist eine weltbekannte Freelancer-Plattform. Hier k\u00f6nnen Unternehmen geeignete Freelancer finden und Selbstst\u00e4ndige k\u00f6nnen ihre Dienste anbieten.<\/p>\n Auf der Homepage sieht man, dass das Design klar und simpel gehalten ist und der „professionelle“ Aspekt hervorgehoben wird. Interessant ist, dass der Slogan Unternehmen anspricht und nicht auf Freelancer zugeschnitten ist.<\/p>\n Der Ton ist direkt, effektiv und deutlich. Das Leistungsversprechen ist sofort verst\u00e4ndlich: mit Freelancern gut und effektiv arbeiten.<\/p>\n Der CTA ist oben links „above the fold“, also im sofort sichtbaren Teil der Landingpage, platziert. Die gr\u00fcne Farbe hebt sich vom Rest der Seite ab und besteht aus einem Suchfeld, in das die Art des gescuhten Freelancers, eingegeben werden kann.<\/p>\n Der Rest der Landing Page ist klassisch gehalten: Er zeigt die angebotenen Serviceleistungen und die bezahlten Services f\u00fcr User.<\/p>\n CodeCombat<\/a> ist ein besonderes Beispiel. Es ist ein spielerisches Tool, mit dem sowohl Erwachsene als auch Kinder das Programmieren erlernen k\u00f6nnen. Das Konzept ist simpel: Man programmiert, um im Spiel weiter zu kommen.<\/p>\n Der erste interessante Aspekt der Landing Page von CodeCombat ist, dass das Publikum zweigeteilt ist: die Seite richtet sich an Lehrer (die das Spiel im Unterricht nutzen m\u00f6chten) und an Kinder (die durch Word of Mouth darauf aufmerksam wurden).<\/p>\n Der Fokus der Landing Page liegt also sowohl auf dem Unterrichten als auch auf der leichten Handhabung des Programms. Daher sehen wir zwei Call to Action: einen f\u00fcr Lehrer und einen f\u00fcr Kinder bzw. Sch\u00fcler.<\/p>\n Ein weiterer Teil der Landing Page zeigt die Vorteile von CodeCombat und Screenshots um das Angebot anschaulich zu machen.<\/p>\n Auf eine recht traditionelle Art und Weise werden auf der Seite au\u00dferdem St\u00e4rken des Services bekr\u00e4ftigt und ein Kunden-Testimonial eingesetzt, nat\u00fcrlich – passend zur Zielgruppe – ein Schuldirektor.<\/p>\n Plated<\/a>\u00a0 ist eine Firma, die sich auf die Lieferung von Rezeptzutaten spezialisiert hat: man w\u00e4hlt aus verschiedenen Rezeptvorschl\u00e4gen aus und das Unternehmen liefert alle Zutaten, die man zum Kochen des Gerichts ben\u00f6tigt.<\/p>\n Das Erste, was einem bei der Plated Landingpage auff\u00e4llt, ist das Grafikdesign. Die Farben sind perfekt abgestimmt und die Firma hat eine echte Visual Identity. Die Fotos der Gerichte stechen heraus und die Illustrationen sind gut ausgesucht.<\/p>\n Ebenso wie die Worte gut gew\u00e4hlt und sehr passend f\u00fcr die Zielgruppe „Food Lovers“ sind – da macht schon das Anschauen der Seite hungrig.<\/p>\n Der CTA ist klar und im oberen, sofort sichtbaren Teil der Landing Page platziert; die gr\u00fcne Farbe sticht hervor und setzt ihn deutlich vom Hintergrund ab.<\/p>\n Die Landing Page von Plated ist zwar recht lang und man muss eine Weile scrollen, um das Ende zu erreichen, aber jeder Paragraph der Homepage versteht sich als Argument oder Vorteil, der \u00fcberzeugt:<\/p>\n Au\u00dferdem sehen Sie einen besonders attraktiven Rabatt-Coupon im Header, dessen Farbe stark heraussticht. Plated ermutigt die Unentschlossenen mit einer Verg\u00fcnstigung von 50% bei der ersten Bestellung dazu, aktiv zu werden.<\/p>\n Der Social Proof ist am Ende der Seite hervorgehoben. Auch wenn er h\u00f6her h\u00e4tte platziert werden k\u00f6nnen, ist er dennoch gut sichtbar und relevant.<\/p>\n Plated bietet einen Chat-Service an, so wie es inzwischen auf immer mehr Landingpages zu finden ist. Durch dieses Angebot k\u00f6nnen Betreiber von Online-Shops die fehlende menschliche Interaktion ersetzen, die unentschlossenen Besuchern sonst in einem Filialgesch\u00e4ft zur Verf\u00fcgung steht.<\/p>\n Schlichte und ruhige Bilder heben die St\u00e4rken von Plated hervor. Sie vermitteln den Eindruck von Simplizit\u00e4t und Gelassenheit und zeigen so, dass Plated das Leben einfacher macht.<\/p>\n MailChimp<\/a> ist ein sehr beliebtes Tool f\u00fcr automatisiertes Marketing und E-Mail-Marketing. Der Service findet Anwendung in E-Mail-, Marketing- und Newsletter-Kampagnen zahlreicher E-Commerce-Seiten.<\/p>\n Wie auch die Landing Page von Neil Patel, ist diese Landing Page einfach und direkt gehalten. User werden direkt angesprochen: „Bauen Sie Ihre Marke auf. Verkaufen Sie mehr.“<\/p>\n So spricht MailChimp eine breite Masse an Usern an.<\/p>\n Das Leistungsversprechen ist leicht verst\u00e4ndlich: mit dem Tool kann man das eigene Unternehmen voran bringen und mehr Umsatz generieren.<\/p>\n F\u00fcr SaaS-L\u00f6sungen ist ein solcher Ansatz besonders empfehlenswert. Er spricht Entscheider direkt an und kommt direkt auf den Punkt.<\/p>\n Der Call To Action ist gut sichtbar: Er wurde zentral „above the fold“ platziert und bietet kostenloses Testen des Tools an.<\/p>\n Wie auch bei Plated, ziert die restliche Landing Page das Leistungsversprechen und die angebotenen Serviceleistungen. So k\u00f6nnen User den Nutzen durch das Angebot visualisieren und eine Antwort auf die Frage finden: „Ist dieses Produkt etwas f\u00fcr mich?“<\/p>\n Wenn Sie eine lange Landing Page einsetzen, k\u00f6nnen Ihre User entscheiden, wie weit sie herunterscrollen m\u00f6chten: es ist als w\u00fcrden sie „durch eine digitale Brosch\u00fcre bl\u00e4ttern“ und damit so viele Fragen beantworten, wie f\u00fcr sie n\u00f6tig. Die wichtigsten Informationen sollter daher aber auch gleich zu Beginn gelistet werden.<\/p>\n Screenshots werden eingesetzt, um dem User anhand von Praxisbeispielen aufzuzeigen, wie sich das Tool einsetzen l\u00e4sst. So k\u00f6nnen diese das Produkt besser verstehen. Dieser Ansatz kann auch durch ein Produktvideo mit Kundenbeispielen oder einer Webdemo aufgegriffen werden, so wie ElegantThemes es macht.<\/p>\n Egal, wo man sich auf der Seite befindet, f\u00fcr maximale Conversions ist der zentrale Call To Action zu jeder Zeit im Bild.<\/p>\n User, die den\u00a0Conversion Funnel<\/a>\u00a0betreten haben, werden auf das Registrierungsformular geleitet. Um die Conversion zu maximieren, ist das Formular bewusst:<\/p>\nErfolgreiche Landing Page gestalten: Die besten Design-Beispiele f\u00fcr mehr Leads<\/h2>\n
LeadQuizzes<\/h3>\n
\n
![\"Beispiel](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/design-landing-page-lead-quizzes.jpg\")
<\/p>\n![\"Design](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/design-landing-page-lead-quizzes-2.jpg\")
<\/p>\n![\"Design](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/design-landing-page-lead-quizzes-3.jpg\")
<\/p>\n\n
GrowthHackers<\/h3>\n
![\"Beispiel](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/design-landing-page-growth-hackers.jpg\")
<\/p>\n\n
![\"Landing](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/design-landing-page-growth-hackers-2.png\")
<\/p>\n\n
![\"Beispiel](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/design-landing-page-growth-hackers-3.png\")
<\/p>\n<\/h3>\n
ElegantThemes<\/h3>\n
![\"Landing](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/design-landing-page-elegant-themes.jpg\")
<\/p>\n![\"Design](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/design-landing-page-divi-builder.jpg\")
<\/p>\n![\"Beispiel](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/design-landing-page-elegant-themes-social-proof.jpg\")
<\/p>\nShopify<\/h3>\n
\n
Salesforce<\/h3>\n
![\"Beispiel](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/salesforce-design-landing-page.jpg\")
<\/p>\n![\"Registrierungs-Formular](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/salesforce-design-lead-generation-form.png\")
<\/p>\n\n
<\/h3>\n
Neil Patel<\/h3>\n
![\"Neil](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/neil-patel-design-landing-page.png\")
<\/p>\n![\"Beispiel](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/neil-patel-design-landing-page-value-proposition.png\")
<\/p>\n![\"Design](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/neil-patel-design-landing-page-benefits.png\")
<\/p>\n![\"Neil](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/neil-patel-design-landing-page-call-to-action.png\")
<\/p>\n<\/h3>\n
UpWork<\/h3>\n
![\"Beispiel](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/upwork-design-landing-page.jpg\")
<\/p>\n![\"Beispiel](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/upwork-design-landing-page-2.png\")
<\/p>\n<\/h3>\n
CodeCombat<\/h3>\n
![\"Code](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/code-combat-landing-page-design.jpg\")
<\/p>\n![\"Beispiel](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/code-combat-landing-page-design-2.jpg\")
<\/p>\n![\"Testimonial](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/code-combat-landing-page-design-3.png\")
<\/p>\n<\/h3>\n
Plated<\/h3>\n
![\"Plated](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/plated-design-landing-page.jpg\")
<\/p>\n![\"Call](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/plated-design-landing-page-2.jpg\")
<\/p>\n\n
![\"Beispiel](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/plated-design-landing-page-3.jpg\")
<\/p>\n![\"Live](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/plated-design-landing-page-4.jpg\")
<\/p>\nMailChimp<\/h3>\n