Landingpage-Design: Ultimativer Leitfaden mit 20 Beispielen

Der erste Eindruck hängt zu 94 % vom Design ab. Das bedeutet, wenn potenzielle Kund:innen zum ersten Mal mit deiner Marke über eine unübersichtliche Landingpage in Kontakt kommen, könnten sie schnell abspringen. Tatsächlich sehen 48 % der Nutzer:innen das Webdesign eines Unternehmens als den wichtigsten Faktor für die Glaubwürdigkeit einer Marke an – und sie treffen dieses Urteil in nur 50 Millisekunden.

Die Wahrheit ist: Selbst einige der größten Marken der Welt haben ineffektiv gestaltete Landingpages. Das ist ein häufiges Problem – aber du kannst es mit einem Webdesign lösen, das auf einem tieferen Verständnis deiner Zielgruppe basiert.

Im Folgenden erfährst du von Expert:innen, wie du bessere Landingpages gestalten kannst, die Interessent:innen in Kund:innen verwandeln, inklusive 20 inspirierender Beispiele von Marken, die das Landingpage-Design bereits perfekt umsetzen.

Was macht eine Landingpage effektiv?

Eine Landingpage folgt normalerweise immer einer ähnlichen Struktur, aber es gibt bestimmte Elemente, auf die besonders erfolgreiche Seiten besonderen Wert legen.

„Above the fold“-Content

Der Begriff "fold" bezeichnet den Bereich einer Webseite, der ohne Scrollen sichtbar ist. Er variiert je nach Gerät – sei es ein Desktop, Tablet oder Smartphone, die alle unterschiedliche Bildschirmgrößen haben. Allgemein liegt der "fold" etwa 600 Pixel von der Oberkante des Browserfensters entfernt.

Nicht alle Besucher:innen deiner Landingpage werden über den "fold" hinaus scrollen – weder auf dem Desktop noch auf mobilen Geräten. Tatsächlich wird die Mehrheit der Nutzer:innen wahrscheinlich gar nicht erst nach unten scrollen.

Konzentriere dich auf den Informationsfluss über die gesamte Seite, anstatt nur für den Bereich oberhalb und unterhalb des "folds" zu designen – also alles, was Nutzer:innen auf deiner Landingpage sehen können, ohne scrollen zu müssen.

Landingpage-Text

Ein guter Landingpage-Text umfasst alles, was auf der Seite zu sehen ist – inklusive Produktbeschreibungen, Handlungsaufforderungen (Call to Actions), Überschriften und deinem Meta-Titel und -Beschreibung. Beginne deine Landingpage mit einer mutigen, problemorientierten Überschrift.

Berücksichtige die Stimme deiner Kund:innen, wenn du den Text schreibst. Nutze Rezensionen und Social Media, um Wörter und Phrasen zu finden, die deine Zielgruppe verwendet, und integriere diese in den Text deiner Landingpage.

Denk daran, Vorteile statt nur Funktionen zu betonen. Zum Beispiel, wenn deine Landingpage für eine wasserdichte Handyhülle wirbt, sprich darüber, wie man beim Schwimmen Fotos machen kann, wenn du auf das IP-Rating hinweist.

Überzeugender Text wird immer mit der Markenstimme geschrieben. Konsistenz ist der Schlüssel, auch bei gezielten Aktionen und Kampagnen.

Bildmaterial und Farbschema

Dein Landingpage-Design sollte Farben und Schriftarten berücksichtigen und Platz für gut Bilder bieten. Viele starten mit dem Text und entwickeln dann die visuellen Elemente, um eine Synergie zwischen beiden sicherzustellen. Denk daran, dass Bilder auch Illustrationen und Videos neben Produktfotos umfassen können.

Lesetipp: Du bist unsicher, welche Bildgröße für deine Website geeignet ist? Wir zeigen dir, was du beachten solltest.

Kundenbewertungen

Eine der kleinsten, aber wirkungsvollsten Anpassungen, die Ezra Firestone, Gründer von Smart Marketer und Mitgründer und CEO von BOOM! by Cindy Joseph, an den Produktseiten seines eigenen Shopify-Stores vorgenommen hat, war das Hinzufügen von Kundenbewertungen an den Beginn der Seite, anstelle des Artikelnamens.

So könnte das aussehen:

Ein Zitat ganz oben auf der Seite schafft Vertrauen, erspart Nutzer:innen die Suche nach Bewertungen, und lässt deine Kundschaft für dich sprechen. Achte darauf, Zitate auszuwählen, die direkt auf einen Nutzen oder ein Problem eingehen, das das jeweilige Produkt löst.

Zusätzlich könntest du einen ganzen Abschnitt der Website deinen Kundenbewertungen widmen, damit potenzielle Käufer:innen die Perspektiven echter Menschen lesen können, die deine Produkte tatsächlich gekauft haben. Zeige dabei ruhig auch ein paar negative oder mittelmäßige Bewertungen, damit Besucher:innen ein umfassendes und realistisches Bild davon bekommen, was Menschen an deinen Produkten schätzen und was vielleicht nicht so gut ankommt.

Handlungsaufforderung (Call to Action)

Jede Landingpage braucht eine klare Handlungsaufforderung (CTA), um effektiv zu sein. Dein CTA sollte Besucher:innen dazu bringen, genau die Aktion auszuführen, die du dir wünschst. Je nach Ziel deiner Landingpage könnte das etwas sein wie „Mehr erfahren“, „Jetzt kaufen“ oder „Abonnieren“. Wenn es relevant ist, kannst du hier auch Preisinformationen einfügen.

Was die Platzierung des CTAs betrifft, hängt das ebenfalls von den Bedürfnissen deiner Zielgruppe ab. Das findest du durch Tests heraus, bei denen du die Positionierung des CTA überprüfst, um die Conversion-Rate zu optimieren. Im Allgemeinen ist es sinnvoll, einen CTA „above the fold“ zu platzieren und gegebenenfalls an mehreren Stellen auf der Landingpage, je nachdem, wie lang die Seite ist.

Lesetipp: Wir zeigen dir, wie du effektive Call-to-Actions integrieren kannst.

20 Landingpage-Design Beispiele

1. Brightland
2. Olipop
3. Path
4. LUSH Cosmetics
5. Netflix
6. Grind
7. Creatorpreneur Academy
8. Jolie
9. Ahrefs
10. Tabs
11. Peepers
12. ConvertKit
13. Jones Road Beauty
14. BEAM Content
15. Basecamp
16. Maev
17. Money with Katie
18. Creator Wizard
19. Descript
20. Shopify POS

1. Brightland

Wurdest du jemals von einem Nachrichtendienst erwähnt? Das Platzieren dieser Logos auf deinen Landingpages, zusammen mit Zitaten aus den Artikeln, ist das, was Nik Sharma, CEO von Sharma Brands, als „Brag Bar“ (brag = angeben) bezeichnet. Diese Veröffentlichungen verleihen deiner Marke Glaubwürdigkeit, und deren Erwähnung kann bei Käufer:innen, die nach mehr Informationen suchen, einen guten Eindruck hinterlassen.

Ein Beispiel dafür ist Brightland, ein Unternehmen, das natives Olivenöl aus Kalifornien verkauft. Brightland hat positive Bewertungen von Publikationen wie der New York Times und dem Wall Street Journal erhalten, und nutzt diese Anerkennung geschickt im Design seiner Landingpages, um das Vertrauen der Kund:innen zu stärken.

2. Olipop

Olipop verkauft gesündere Limonaden, die mit pflanzlichen Zutaten und Präbiotika gefüllt sind, um ein gesundes Mikrobiom zu unterstützen. Die Marke nutzt vorteilsorientierten Text, um mögliche Einwände direkt anzusprechen (zum Beispiel: „Wie viel Zucker hat die Limonade?“) und positioniert das Getränk als Lösung für all jene, die nach einer Möglichkeit suchen, ihre Lust auf Limonade zu befriedigen und gleichzeitig auf eine gesündere Alternative umzusteigen.

Du kannst andere Landingpage-Ideen übernehmen, wie zum Beispiel klaren, auffälligen Text, ausführliche Produktinformationen (beim Scrollen), Sternebewertungen mit einer tatsächlichen Anzahl an Rezensionen für Glaubwürdigkeit, einen kleinen Header, der nicht die Seite dominiert, ein intuitives und einfach zu navigierendes Layout und großartige Produktfotografie.

Lesetipp: Du willst deine Produktbilder selbst erstellen? Wir zeigen dir, wie du deine Produkte fotografieren kannst.

3. Path

Path ist ein virtuelles Fotobearbeitungsstudio mit einem Shopify-Store. Das Kerngeschäft sind Dienstleistungen zur Bearbeitung von Produktfotos. Eines der Kanäle, die Path nutzt, um potenzielle Kunden zu erreichen und mit ihnen in Kontakt zu treten, ist E-Mail-Marketing. Path hat eine eigene Landingpage, die speziell darauf ausgelegt ist, Anmeldungen für den E-Mail-Newsletter zu fördern.

Du siehst, dass die Seite klar auf ein Ziel fokussiert ist – Abonnent:innen zu gewinnen – und kaum Ablenkungen bietet, die dieses Ziel beeinträchtigen könnten. Die Seite ist nicht direkt über die Website des Unternehmens zugänglich, kann aber für gezielte Kampagnen genutzt werden, um Anmeldungen für den Newsletter zu fördern.

4. LUSH Cosmetics

Zertifizierungen spielen eine große Rolle für viele Käufer:innen, und manche werden ohne sie keinen Kauf tätigen. Beispiele dafür sind Zertifizierungen wie Leaping Bunny, Non-GMO oder Certified B Corp. Wenn dein Unternehmen zertifiziert ist, solltest du das unbedingt auf deiner Landingpage hervorheben.

LUSH Cosmetics nutzt diesen Ansatz in seinem Landingpage-Design. Am unteren Rand der Seite zur „Unverpackt“-Kampagne werden die Kernwerte der Marke angezeigt – darunter die Tatsache, dass alle Produkte zu 100 % vegetarisch, handgemacht und tierversuchsfrei sind.

5. Netflix

Netflix gilt als Pionier in der Abonnementbranche. Mit mehr als 260 Millionen zahlenden Abonnent:innen in über 190 Ländern weiß das Unternehmen genau, wie man Landingpages gestaltet, die Menschen zum Abonnieren bewegen.

Ein gutes Beispiel ist die Gestaltung der Landingpage für Geschenkkarten. Es gibt nur drei einfache Handlungsaufforderungen (ob man die Karte über Netflix, Amazon oder becharge kaufen möchte) sowie eine kurze Erklärung, wie die Geschenkkarte funktioniert. Die Seite ist kurz und prägnant, liefert aber alle Informationen, die Kund:innen vor dem Kauf benötigen.

6. Grind

Grind ist eine Kaffeemarke, die sowohl über ihren Onlineshop als auch in Coffeeshops verkauft. Auf einer speziellen Landingpage widmet sich die Marke ausführlich dem Thema Nachhaltigkeit – einem ihrer zentralen Werte und Alleinstellungsmerkmale.

Was an diesem Landingpage-Design besonders auffällt, ist der Einsatz visueller Elemente. Es gibt eine Scroll-Leiste direkt oberhalb des „folds“, farbcodierte Buttons, die Nutzer:innen helfen, schnell zu den Abschnitten zu gelangen, die sie am meisten interessieren, und einprägsame Untertitel, die die Sprache der Zielgruppe perfekt widerspiegeln – wie zum Beispiel „We take coffee seriously“ (Wir nehmen Kaffee ernst).

7. Creatorpreneur Academy

Digitale Produkte können hochpreisig sein, weshalb potenzielle Kund:innen oft viele Informationen benötigen, bevor sie sich zu einem größeren Kauf entschließen. Ali Abdaal hat dafür die ideale Landingpage gestaltet, die alle wichtigen Informationen liefert, ohne Besucher:innen zu überfordern.

Das erste, was jemand auf dieser Landingpage sieht, ist die Überschrift: „Scale up your creative side-hustle to the next level.“ Diese spricht eine Herausforderung und ein Ziel an, das bei der Zielgruppe auf Resonanz stößt. Wer lieber mehr über den Kurs erfahren möchte, ohne den gesamten Text zu lesen, kann einfach auf den Link klicken, der zu einem YouTube-Video führt, das die Inhalte des Kurses detailliert erklärt.

8. Jolie

Das Hauptziel einer Landingpage ist es, jemanden dazu zu bringen, eine bestimmte Aktion auszuführen. Im E-Commerce muss das nicht immer bedeuten, dass das Design der Landingpage ausschließlich um die Funktionen und Vorteile des Produkts kreisen sollte.

Ein gutes Beispiel dafür ist Jolie, eine Direct-to-Consumer-Marke, die Duschfiltersysteme verkauft. Sie hat eine Landingpage für ihren Wasserbericht erstellt – ein Tool, mit dem Menschen herausfinden können, welche Chemikalien sich in ihrem Wasser befinden.

Die Seite thematisiert die Gefahren bestimmter Chemikalien und deren Auswirkungen auf Haut und Haare. Sobald Besucher:innen diese Informationen haben, wird das Thema dringlicher und relevanter, was die Wahrscheinlichkeit erhöht, dass sie den Bericht abschließen und sich über eines der integrierten E-Mail-Anmeldeformulare registrieren.

9. Ahrefs

Du brauchst keine speziellen Designfähigkeiten, um eine hoch konvertierende Landingpage zu erstellen. Ein gutes Beispiel ist Ahrefs, ein SEO-Tool, das für jede seiner Hauptfunktionen und Anwendungsfälle eigene Landingpages hat.

Das Design der Landingpage für die Keyword-Recherche-Funktion nutzt kleine Grafiken, um wichtige Punkte in überschaubare Textblöcke zu unterteilen. Zusätzlich befindet sich ein kleines Ahrefs-Logo in den Zeilenumbrüchen – eine clevere Methode, um die Markenidentität und die Wiedererkennung des Logos zu stärken, ohne die volle Version des Logos aufdringlich zu platzieren.

Die Inhaltsstoffseite von Tabs ist ein sehr gutes Beispiel dafür, wie man Social Proof-Elemente in das Design einer Landingpage integriert. Eine pinkfarbene Ankündigungsleiste, die sich vom ansonsten monochromen Design abhebt, hebt hervor, dass das Unternehmen eine Geld-zurück-Garantie bietet, tausende Fünf-Sterne-Bewertungen hat und mehr als 200.000 zufriedene Kund:innen zählt.

Zusätzlich befindet sich unter dem Haupt-CTA-Button ein Fünf-Sterne-Bewertungsabschnitt. Dieser verstärkt das Vertrauen, dass man in guter Gesellschaft ist, wenn man die Schokolade kauft. Diese Platzierung ist strategisch – es ist wahrscheinlich das Letzte, was Besucher:innen sehen, bevor sie auf den CTA-Button klicken.

11. Peepers

Die Produktbeschreibung, die du in das Design deiner Landingpage integrierst, sollte prägnant sein und sofort vermitteln, worum es bei deinem Produkt geht. Du hast viel mehr Platz weiter unten auf der Seite, um Details bereitzustellen, die direkt auf mögliche Einwände eingehen, die Kund:innen daran hindern könnten, einen Kauf abzuschließen.

Das Brillenunternehmen Peepers nutzt diese Taktik. Oberhalb des „folds“ gibt es eine Vielzahl von Produktbildern, und weiter unten findest du detaillierte Informationen und eine Beschreibung, die alle Vorteile der Wahl eines Peepers-Glases auflistet.

12. ConvertKit

Obwohl es als Best Practice gilt, eine kleine Anzahl komplementärer Farben auf deiner Landingpage zu verwenden, zeigt ConvertKit, wie du Farben und Schattierungen nutzen kannst, um mehr Variabilität zu schaffen, ohne dabei zu sehr von deinen Style Guides abzuweichen.

Was an diesem Landingpage-Design besonders gut ist, ist der Einsatz von weißer Fläche. Anstatt den Bereich über der Unterüberschrift leer zu lassen, hat der Designer von ConvertKit handgeschriebene Notizen für die Besucher:innen hinzugefügt. Das ist eine clevere Nutzung von Mikrocopy und eine Inspirationsquelle für das Design, die den Besuchern der Landingpage ein Gefühl für die Persönlichkeit der Marke vermittelt.

Einige Beauty-Marken haben Schwierigkeiten mit Rücksendungen, wenn sie Kosmetikprodukte online verkaufen. Farben sehen auf einem Computerbildschirm anders aus als in der Realität. Jones Road Beauty löst dieses Problem mit Quizfragen, die den Menschen helfen, den richtigen Farbton zu finden.

Das Design der Landingpage für die Quizzes von Jones Road Beauty ist einfach und direkt. Obwohl es gegen die Best Practice verstößt, nur eine Handlungsaufforderung (CTA) einzuschließen, erklärt es sehr gut, welche Quizzes verfügbar sind, wie sie genutzt werden und wie man sie absolvieren kann. Unter der Unterüberschrift des Quizzes befindet sich sogar eine kleine Sternebewertung, die unterstreicht, dass das Quiz dabei hilft, das Problem der Farbabweichung zu lösen.

14. BEAM Content

So wie dein Text zur Marke passen sollte, sollten auch Bilder, Schriftarten und Farben konsistent sein. Obwohl du beim Design deiner Landingpage mehr Spielraum für Kreativität hast, ist es dennoch wichtig, ein einheitliches Markenerlebnis über alle Touchpoints hinweg zu bieten.

BEAM Content ist ein großartiges Beispiel für eine Landingpage, die du als Inspiration nutzen kannst. Die Agentur verwendet eine raffinierte Farbpalette mit grafischen Elementen, die dazu passen. Die Schriftwahl ist einfach und elegant, wobei handgezeichnete Schriftarten für Mikrocopy verwendet werden, die wichtige Inhalte hervorheben – wie „brand social“, das Hauptangebot auf dieser Landingpage.

15. Basecamp

Testimonials sind ein entscheidender Bestandteil jedes Landingpage-Designs. Eine Studie hat gezeigt, dass die Conversion-Rates um bis zu 380 % steigen können, wenn eine Seite Bewertungen für ein teures Produkt anzeigt.

Das Problem mit Testimonials ist, dass du nicht ändern kannst, was jemand gesagt hat. Es ist unethisch, die Worte einer anderen Person zu kürzen oder zu ändern. Basecamp zeigt jedoch, wie du die eindrucksvollsten Teile eines Testimonials hervorheben kannst, um sie hervorstechen zu lassen.

16. Maev

Maev ist ein hervorragendes Beispiel für eine Landingpage, wenn du viele Informationen ansprechend präsentieren möchtest.

Anstatt einfach die Zutaten seines Hundefutters aufzulisten, hat der Einzelhändler Bilder verwendet. Besucher:innen erkennen sofort eine Heidelbeere oder Grünkohl, was ihnen hilft, ein häufiges Problem beim Kauf von Tiernahrung online zu überwinden: sich vorzustellen, zu wissen, was ihr Hund tatsächlich frisst.

17. Money with Katie

Newsletter-Landingpages haben ein klares Ziel: jemanden dazu zu bringen, sich in deine E-Mail-Liste einzutragen. Money with Katie, ein Newsletter der Marke Morning Brew, hat dies perfektioniert, ohne in ein umfassendes Landingpage-Design zu investieren.

Die gesamte Landingpage von Money with Katie besteht nur aus dem, was oberhalb des „folds“ sichtbar ist. Es gibt keinen Grund zu scrollen und Besucher:innen mit zu vielen Informationen zu überfordern. Die Überschrift verspricht genau das, was sie bekommen; das Foto zeigt, wofür sie sich anmelden. Das Einzige, was sie tun müssen, ist, das Anmeldeformular auszufüllen.

18. Creator Wizard

Justin Moore ist ein Sponsoring-Coach, der digitale Produkte verkauft. Gifted to Paid ist sein hochwertiger Online-Kurs, der Kreativen zeigt, wie sie Sponsoring-Deals sichern und mit ihren Online-Inhalten Geld verdienen können.

Lesetipp: In diesem Beitrag zeigen wir dir, wie du deinen eigenen Onlinekurs erstellen kannst.

 Der Kurs Gifted to Paid behandelt beide Ziele während der gesamten Landingpage. Dieser Abschnitt gibt den Besuchern Informationen über das Tutorial des Kurses. Da es sich um viele Informationen handelt, hat Justin kluge Designentscheidungen getroffen – wie das Hervorheben wichtiger Texte und den Einsatz von GIFs –, um das Verständnis zu erleichtern.

19. Descript

Überschriften benötigen mehr Platz auf deiner Landingpage und sind daher ein wichtiges Element, auf das du beim Design besonders achten solltest. Auf der Landingpage von Descript beispielsweise sind die Überschriften clever formuliert und sprechen subtil die Fragen an, die jemand möglicherweise hat, bevor er konvertiert: Wie viel kostet es? Und was ist wirklich im „kostenlosen“ Plan enthalten?

Angesichts der vielen Preismodellen gibt es zudem einen interaktiven Preiskalkulator, der Nutzer:innen hilft, herauszufinden, wie viel die Videobearbeitungssoftware kostet. Das ist viel ansprechender als statische Inhalte und hilft der Marke, personalisiert in großem Maßstab zu agieren.

20. Shopify POS

Die Designer:innen von Shopify, die die Landingpage für das Point-of-Sale (POS)-System erstellt haben, standen vor der Herausforderung, drei verschiedene CTAs zu bedienen:

• Einen kostenlosen Test starten
• Mit Vertriebsteams sprechen
• Sich in ein bestehendes Shopify POS-Konto einloggen

Die Farben der Buttons spielen hierbei eine entscheidende Rolle. Buttons mit hohem Kontrast (weißer Text auf dunklem Hintergrund) stechen am stärksten gegen das neutrale Design hervor, weshalb dies die Wahl für die bevorzugte und wichtigste CTA wurde: kostenlos testen.

Der Button für die Kontaktaufnahme mit dem Vertrieb erhielt das gleiche Format, aber mit umgekehrten Farben. Der dritte und am wenigsten wichtige CTA ist lediglich ein kleiner verlinkter Text unter jedem Button.

7 Best Practices für das Landingpage-Design

Du hast die Aufmerksamkeit potenzieller Kundschaft gewonnen, und nun hast du nur wenige Sekunden Zeit, um zu vermitteln, was deine Marke und deine Produkte einzigartig macht. Es ist eine große Herausforderung, das in wenigen Worten oder Bildern zu schaffen, und noch schwieriger, wenn Interessent:innen wenig Kontext zu deiner Marke hat.

Auch wenn die Leistung von vielen Faktoren abhängt, kann ein einfach gehaltenes Landingpage-Design helfen, die Aufmerksamkeit auf die Informationen zu lenken, die du am wichtigsten findest. Wenn sie nichts anderes mitnehmen, was ist die eine Sache, die im Gedächtnis bleiben sollte?

1. Informationsfluss berücksichtigen
2. Buy Box für Conversions optimieren
3. Visuelle Elemente in den Fokus rücken
4. Responsives Design verwenden
5. Traffic- und Gerätequellen analysieren
6. Landingpage-Designs testen
7. UX-Research priorisieren

1. Informationsfluss berücksichtigen

Unabhängig davon, was für deine Kund:innen am besten funktioniert, solltest du stets darauf achten, welche Art von Texten und Inhalten du an den Anfang einer Landingpage stellst. Es kann jedoch schief gehen, wenn du versuchst, zu viele Inhalte auf den ersten Bildschirm zu packen, was zu einem überladenen Erlebnis für Nutzer:innen führt.

„Marketer:innen sollten weniger über den Bereich ‚over the fold‘ nachdenken und sich viel mehr mit der gesamten Informationshierarchie und dem Fluss der Inhalte auf der Landingpage beschäftigen“, sagt CRO Consultant Michael Aagaard.

Überlege dir bei der Gestaltung deiner Landingpages die folgenden Fragen. Die Antworten hängen von deinem Verständnis der gesamten Nutzerreise deiner Zielgruppe und der Rolle ab, die die Landingpage spielen soll.

• Beantwortest du die richtigen Fragen und gehst auf die richtigen Barrieren ein?
• Erwartungsmanagement: Gehst du den in der Anzeige gemachten „Versprechen“ nach?
• Präsentierst du die Inhalte in der richtigen Reihenfolge und baust du Schwung in Richtung des Conversionziels auf?

2. Buy Box für Conversions optimieren

Die Buy Box ist ein kleiner Bereich jeder Landingpage, der jedoch einen großen Einfluss haben muss. Ezra bezeichnet sie als den wichtigsten Teil deiner Produkt-Landingpages. Es handelt sich um ein tatsächliches Kästchen auf der Seite, das eine stark optimierte Reihe von Conversion-Elementen enthält, darunter ein Kauf-Button.

In der Regel umfasst die Buy Box auf einem Desktop eine Bildkarussell mit Produktfotos links und eine Zusammenfassung, Verkaufstext, Preisangaben, Bewertungssterne, den Kauf-Button oder den Shop-Pay-Button sowie ein Alleinstellungsmerkmal unter dem Button rechts.

„Die meisten Unternehmen haben keinen Verkaufstext in der Buy Box, sie haben keine Social Proof-Elemente in der Box, sie haben keine Alleinstellungsmerkmale oder Bildformate unter dem ‚In den Warenkorb‘-Button, und das Produktkarussell zeigt Bilder, die nicht gut aussehen“, sagt Ezra. „Die Buy Box ist alles.“

Es gibt ein paar vorgefertigte Elemente, die Raum für deinen Text und deine Bilder schaffen, damit diese wirklich zur Geltung kommen. Eine stark optimierte Buy Box enthält das, was Ezra als „Conversion Asset Stacking“ bezeichnet. So könnte das auf einem Desktop aussehen:

3. Fokus auf visuelle Elemente

Die Bilder deiner Produkte sind wahrscheinlich das Einzige, worauf potenzielle Käufer:innen zurückgreifen können, wenn sie darüber nachdenken, die gewünschte Aktion auszuführen. Brich die Informationen auf deiner Landingpage mit anderen Elementen auf, wie zum Beispiel:

• Aufzählungspunkte oder nummerierte Listen
• Logos oder Grafiken
• Bilder
• CTA-Buttons
• Bewertungen
• Videotestimonials

Im E-Commerce sind Bilder entscheidend dafür, dass sich Käufer:innen ein Produkt vorstellen können, ohne es selbst in den Händen zu halten. Wenn deine Fotos nicht vollständig erfassen, wie großartig deine Produkte sind, wird es für die Kundschaft sehr schwierig, dies selbst zu tun.

In diesem Video (auf Englisch) zeigen wir dir, wie du deine Produktfotos ganz einfach selbst machen kannst:

4. Verwende ein responsives Design

Du gestaltest deine Landingpage wahrscheinlich auf einem Laptop oder Computerbildschirm, aber die Realität ist: Nicht jeder greift auf Landingpages über einen Desktop zu. Ungefähr die Hälfte des gesamten Internetverkehrs erfolgt über mobile Geräte. Ein responsives Design passt sich an, um deine Landingpage für jedes Gerät geeignet zu machen.

Nutze deinen Website-Builder, um zu überprüfen, wie Bildkarusselle und CTAs sowohl auf dem Desktop als auch auf mobilen Geräten dargestellt werden, um sicherzustellen, dass sie für beide optimiert sind. Weitere Tipps für ein responsives Webdesign sind:

• Verwende zusammenklappbare Menüs
• Achte auf kleinere Details für eine reibungslosere Benutzererfahrung
• Nutze einen Bildkompressor wie TinyPNG, um die Bildgröße zu verringern und die Ladezeit zu verkürzen
• Vermeide automatische Video-Wiedergaben
• Verwende große, fingerfreundliche Buttons

Lesetipp: KI-Website-Builder können dir bei der Erstellung deiner Website eine große Hilfe sein. Wir stellen dir die besten Anbieter:innen vor.

5. Analysiere den Traffic und die Gerätequellen

Das Design deiner Landingpage basierend auf dem Gerät, das jemand zum Einkaufen nutzt, ist eine Möglichkeit, mit deiner Conversion-Recherche zu beginnen.

Wenn die meisten deiner Kund:innen über mobile Geräte auf deine Website zugreifen, solltest du deine Landingpages für eine großartige mobile Erfahrung optimieren. Wenn du feststellst, dass deine Kund:innen den Desktop bevorzugen, bist du besser gerüstet, um eine Landingpage zu erstellen, die die Desktop-Erfahrung verbessert.

Nik Sharma von Sharma Brands empfiehlt, noch tiefer in diese Traffic-Daten einzutauchen, um zu verstehen, von welcher Plattform die Leute kommen – sei es TikTok, Facebook, ein Blogbeitrag oder ein anderer Kanal.

„Wenn du deine Seiten nicht auf die Plattform anpasst, von der Besucher:innen kommen, wird deine Absprungrate in die Höhe schnellen und dein gesamter ROAS [Return on Ad Spend] niedrig bleiben“, sagt er. Diese Art von kontextuellem Zuhören sorgt für eine bessere Kundenerfahrung insgesamt.

6. Teste deine Landingpage-Designs

Sobald deine Landingpages online sind und ein signifikanter Traffic auf deine Seite kommt, kannst du beginnen, verschiedene Teile des Designs per A/B-Test zu überprüfen, um sicherzustellen, dass sie mit der höchstmöglichen Rate konvertieren.

A/B-Tests gehen jedoch über die Suche nach der besten Überschrift oder CTA-Platzierung hinaus. Ben Labay, Geschäftsführer von Speero by CXL, merkt an: „Wenn du testest, solltest du nicht testen, um Meinungen zu bestätigen, sondern um Strategien herauszufordern oder Hypothesen zu testen, die direkt mit Kundenproblemen oder Geschäftsmöglichkeiten verbunden sind.“

Ben sagt, dass Tests direkt proportional zu den Faktoren sein sollten, die mit dem Wachstumsmodell deines Unternehmens zusammenhängen. Wenn du mehr Kund:innen gewinnen, Instagram monetarisieren oder bestehende Kund:innen binden möchtest, müssen die Landingpage-Erfahrung und die Testhypothesen entsprechend angepasst werden.

7. Priorisiere UX-Research

Die in diesem Artikel vorgestellten Landingpage-Design-Tipps waren für die Expert:innen, die sie getestet und weiterentwickelt haben, erfolgreich. Aber sei vorsichtig, diese Designelemente umzusetzen, ohne zu verstehen, wie sie sich mit deinen Gesamtzielen verbinden.

Das Verständnis dafür, was deine Zielgruppe braucht, ist die Grundlage für den Aufbau von Landingpages mit hoher Conversion-Rate.

„Je besser du deine Zielgruppe verstehst, desto bessere Landingpages kannst du erstellen. Lass dich nicht von den neuesten Designtrends blenden“, sagt Michael. „Stattdessen solltest du sicherstellen, dass du alle Grundlagen im Griff hast und eine eingehende Nutzerforschung durchführst, damit du fundierte Entscheidungen triffst, die das Verhalten beeinflussen, anstatt nur Layouts zu ändern.“

Erstelle ansprechende Landingpage-Designs mit Shopify

Shopify bietet dir alle Tools, Apps, Integrationen und Themes, die du benötigst, um mit deinen Landingpage-Designs zu beginnen. Starte von Grund auf oder mit einer Vorlage, passe sie an deine einzigartige Marke an und verwalte alles von überall.

Du kannst auch Tausende von Shopify-Apps durchsuchen, um Funktionen und Elemente für Landingpages hinzuzufügen, die dir helfen, Conversions zu steigern und das Beste aus deiner Investition herauszuholen.

Dieser Beitrag erschien ursprünglich im Shopify.com-Blog und wurde übersetzt.