Ein erfolgreiches Landingpage-Design macht aus neugierigen Interessenten Käufer. Doch wie designt man eine Landingpage, die deinem Unternehmen hilft, seine Ziele zu erreichen? Der Schlüssel ist das Zusammenspiel aus digitaler Strategie und visuellem Design. Und wenn du alles richtig machst, kann aus einem einmaligen Käufer ein Stammkunde werden.

Flat Design Illustration eines Designers, der an einem Laptop arbeitet
Landingpage-Design ist keine Zauberei: Es braucht sowohl digitale Strategie als auch visuelles Design. Von OrangeCrush.

Obwohl gut designte Landingpages die Wahrscheinlichkeit eines Verkaufs erhöhen, werden sie stark unterschätzt: 44 % der Unternehmen leiten ihren Traffic auf ihre Homepage statt auf eine gezielte Landingpage. Es erfordert so viel Werbung, SEO und Marketing, um Interesse für ein Produkt zu wecken, dass Unternehmen es sich nicht leisten können, beim letzten Schritt zu scheitern. Doch so viel Potenzial Landingpages auch haben, sie sind immer nur so effektiv wie ihr Design. Um sicherzustellen, dass dein Design eine gute Performance hinlegt, werden wir uns anschauen, wie Landingpages funktionieren, aus welchen Teilen eine Landingpage besteht, und Tipps dazu geben, wie man eine tolle Landingpage designt. Auch wenn du dich beim Designen einer Landingpage unsicher fühlst, werden wir dir den nötigen Halt geben.

Wie Landingpage-Design funktioniert und weshalb es wichtig ist

Eine Landingpage, manchmal auch Produktseite genannt, hat den Zweck, ein bestimmtes Produkt oder einen bestimmten Service zu vermarkten oder den Betrachter dazu zu bringen, etwas Bestimmtes zu tun. Auf eine Landingpage werden Nutzer häufig geführt, wenn sie einen Werbelink anklicken oder nach Produkten auf Google suchen.

Landingpage arthur
Landingpages sollen bestimmte Produkte vermarkten. Design von 2ché.

Eine Unternehmenswebsite ist die zentrale Anlaufstelle für all seine Produkte und Dienstleistungen und bietet allgemeine Infos zum Unternehmen. Während Landingpages zwar Teil der Unternehmenswebsite sind, besteht ihr Ziel im direkten Verkauf. Eine Landingpage konzentriert sich auf ein Produkt, der Text konzentriert sich auf die Beschreibung und den Verkauf des Produkts und das Design konzentriert sich darauf, dass dieser Text gut lesbar ist, das Produkt in einem guten Licht erscheint und der Betrachter angesprochen wird. Daher sind Landingpages (besonders mehrere Landingpages) weitaus effektiver, um Leads zu generieren, als die Homepage eines Unternehmens. Da Landingpages Marketing-Tools sind, wird der Erfolg ihres Designs häufig in Zahlen gemessen: nämlich in Conversions und Traffic. Conversions sind sie Anzahl der Seitenbesucher, die das Produkt gekauft haben (sie konvertieren von Nicht-Käufern zu Käufern). Egal wie gut die Landingpage aussieht, wenn die Conversion Rate gering ist (um die 2 % werden als Durchschnitt betrachtet), erfüllt dein Design nicht seinen Zweck.

Flat design landingpage für ein unternehmen für produktmanagement
Landingpages konzentrieren sich darauf, Nutzer zu einer bestimmten Handlung zu aufzurufen. Design von FaTiH™.

Der Traffic enthält Informationen darüber, wer deine Seite besucht, einschließlich der Anzahl der Besucher und wie lang sie bleiben. Wenn Besucher eine Seite ohne etwas zu kaufen verlassen, sagt man, sie sind „abgesprungen“. Auch wenn die Traffic-Zahlen nicht so wichtig wie die Conversions sind (eine Landingpage mit viel Traffic und einer geringen Absprungrate nützt nicht viel, wenn niemand etwas kauft), kann dir die Anzahl der Leute, die sich deine komplette Landingpage ansehen, viel darüber verraten, wie ansprechend dein Design ist. Die gute Nachricht ist, dass bei Nutzern, die länger als zehn Sekunden auf deiner Seite bleiben, die Wahrscheinlichkeit signifikant höher ist, dass sie sich deine komplette Seite durchlesen. Tolles Design in Kombination mit klaren und überzeugenden Informationen ist dein bestes Werkzeug, um das Interesse der Nutzer während dieses kritischen Zeitfensters aufrechtzuerhalten. Du bist auf der Suche nach Inspiration für eine Landingpage? Dann schau dir diesen Artikel voller fantastischer Landingpage-Designs an.

Die Anatomie des Landingpage-Designs

Es gibt nicht nur den einen Weg, eine Landingpage zu designen. Schließlich ist das Wichtigste, dass deine Landingpage Betrachter effektiv informiert und überzeugt. In den vielen Jahren, in denen es Landingpages bereits gibt, haben sich Konventionen entwickelt, an die Nutzer gewöhnt sind, und diese können als Fundament dienen, auf das du aufbauen kannst. Im Folgenden haben wir die häufigsten Elemente eines Landingpage-Designs aufgelistet.

Header

Der Header ist der erste Abschnitt einer Landinpage – eine rechteckige Fläche, die in der Regel den Großteil der ersten Seite einnimmt. Obwohl die Größe variieren kann, besteht er meist aus diesen Teilen:

Landingpage design für eine video sales app
Der Header soll die Aufmerksamkeit des Nutzers erregen und kurz und prägnant das Produkt vorstellen. Design von thecreatv.
  • Branding: Das Unternehmenslogo und das Produktlogo (falls vorhanden).
  • Hero Image: Das wichtigste und überzeugendste Bild, das mit dem Produkt assoziiert wird, in der Regel in Form eines Banners. Es kann sich um das Produkt selbst handeln oder eine illustrierte oder fotografierte Szene sein, die zeigt, wie es ist, das Produkt zu verwenden.
  • Überschrift: Der Begleittext zum Hero Image, der das Produkt kurz vorstellt.
  • Teilüberschrift: Diese beschreibt das Produkt und fasst dessen Vorteile genauer zusammen (auch Wertversprechen genannt)
  • Call-to-Action: Auch bekannt als CTA. Dies ist der Button (mit dem Text „Jetzt kaufen!“), den Nutzer anklicken, um zum Kauf geführt zu werden. CTAs sind wichtig, aber hüte dich davor, sie zu häufig zu verwenden, denn dadurch kann die Seite unübersichtlich werden und der Eindruck entstehen, du willst den Leuten etwas aufzwingen. Ziehe stattdessen eine feste Leiste in Erwägung, die dafür sorgt, dass der CTA immer am oberen Rand der Seite bleibt, während der Nutzer scrollt. (Anmerkung: CTAs können auch andere Zwecke haben, beispielsweise Abonnenten oder Downloads zu gewinnen, aber der Einfachheit halber werden wir uns in diesem Artikel größtenteils auf den Verkauf beziehen).
Landingpage design für cheezinos
Der Header sollte überzeugende Bilder und eine fesselnde Überschrift enthalten, um den Nutzer auf der Seite zu halten. Design von Janki14.

Ein häufiges Element von Headern, das du vermeiden solltest, ist die Navigation. Auch wenn die meisten Webseiten ein Navigationsmenü haben, handelt es sich bei einer Landingpage nicht um eine „normale“ Website. Sie ist designt, um Betrachter so lange auf der Seite zu halten, bis sie bereit sind, etwas zu kaufen, wohingegen eine Navigationsleiste mit vielen Optionen sie dazu ermuntert, sich woanders hin zu bewegen.

Content

Der Content ist das Hauptelement deiner Landingpage. Während der Header dein Produkt vorstellen und die Aufmerksamkeit des Nutzers erregen soll, sollte sich der Fließtext darauf konzentrieren, das Wertversprechen genau zu beschreiben und ein überzeugendes Argument für die Conversion zu liefern. Der Content einer Landingpage enthält häufig:

Landingpage design für fahrradmarke
Unterstützende Grafiken und Produkteigenschaften helfen bei der Erstellung des Contents einer Landingpage. Design von Prismonline ⭐️⭐️
  • Unterstützende Grafiken: Sekundäre Produktbilder (aus anderen Perspektiven oder von Kunden, die das Produkt verwenden), Symbole, die Stichpunkte vereinfacht zusammenfassen, und Farben oder abstrakte Formen, die den Blick des Betrachters auf der Seite führen.
  • Produkteigenschaften: Text, der in klaren Schritten erklärt, wie das Produkt funktioniert. Zusätzliche Links (z.B „Erfahre mehr“) können hilfreich sein, um Zweifel zu beseitigen, doch auch hier musst du wieder vorsichtig sein, die Nutzer nicht von der Landingpage wegzuführen.
  • Vergleich der Vorteile: Dieser zeigt, inwiefern das Produkt die Leben der Kunden verbessert, manchmal indem man das Produkt mit dem eines Mitbewerbers vergleicht oder indem man Probleme der Kunden aufzeigt und löst.
  • Empfehlungen: Bewertungen vergangener Kunden, Rezensionen und/oder Testimonials, die das Vertrauen des Betrachters in das Produkt steigern.

Footer

Der Footer befindet sich am Ende deiner Landingpage, wo Nutzer ihre Entscheidung treffen müssen. Er enthält in der Regel Folgendes:

zweifarbiges landingpage design für einen Kurs über LinkedIn
Der Footer enthält abschließende Informationen wie Kontaktinfos und rechtliche Hinweise. Design von Adam Muflihun.
  • Links zu anderen Seiten: Du möchtest vielleicht andere wichtige Seiten verlinken, beispielsweise deine FAQ-Seite.
  • Social-Media-Links: Dies kann umstritten sein (wie bereits erwähnt, solltest du Nutzer nicht dazu ermutigen, etwas zu tun, das nichts mit dem CTA zu tun hat). Es kann aber den Traffic verbessern, Nutzern Links zur Verfügung zu stellen, mit denen sie deine Landingpage mit ihren Followern in den sozialen Medien teilen können.
  • Kontaktinformationen: Eine Telefonnummer oder E-Mail-Adresse bietet Kunden eine Möglichkeit, sich bei Fragen an dich zu wenden.
  • Rechtliche Hinweise: Copyright von Website und Produkt und weitere juristische Details. Diese befinden sich in der Regel in einer dunklen Leiste am unteren Ende der Seite, um sie vom Rest des Contents zu trennen.

6 Tipps zum Designen einer Landingpage

Es ist eine Sache, die Bestandteile und Ziele einer Landingpage zu kennen, doch wie überträgt man diese nun auf das Design? Auch wenn das Aussehen einer Landingpage vom Designer und der Marke abhängt, haben wir im Folgenden ein paar grundlegende Richtlinien und Tipps für ein wirkungsvolles Landingpage-Design für dich zusammengefasst.

1. Halte es minimalistisch

Minimalismus bedeutet, die Designelemente deiner Seite (Farbe, Typografie, Bilder etc.) auf das Notwendigste zu beschränken. Hinterfrage während des Designens jede deiner Entscheidungen. Wenn ein Designelement nicht dazu beiträgt, dass der Nutzer das Produkt besser versteht, oder als Kaufargument dient, verzichte darauf.

farbenfrohes landingpage design für eine Kinder GPS Tech Marke
Dieses Design nutzt wenige Elemente pro Abschnitt (ein wenig Text, ein Bild und CTA-Buttons) mit jeder Menge Weißraum, um den Schwerpunkt der Landingpage verständlicher zu machen. Außerdem sind die Abschnitte in unterschiedlichen Farben dargestellt, um sie leichter unterscheiden zu können. Design von Skalak.

Es gibt zwei gute Gründe, weshalb das wichtig ist. Erstens sollte man davon ausgehen, dass obwohl sie sich entschieden haben, die Seite zu besuchen, sie nur ein wenig neugierig auf das Produkt sind und jede Ablenkung das Risiko birgt, ihre ohnehin schwankende Aufmerksamkeit zu verlieren. Dem Text durch viel Weißraum alternativ mehr Raum zum Atmen zu lassen, hebt die Informationen hervor und lässt ihn weniger einschüchternd wirken.

minimalistisches Landingpage design mit viel weißraum
Dieses Design verwendet eine zentrierte Ausrichtung und jede Menge Weißraum, um ein minimalistisches Gefühl zu erzeugen. Design von RAZS.

Zweitens bedeuten mehr grafische Elemente längere Ladezeiten. Angesichts der Tatsache, dass die Absprungrate sich mit jeder Sekunde, die eine Seite lädt, exponentiell erhöht und Suchmaschinen sogar langsame Seiten bestrafen, sollte deine Landingpage eine schnelle Ladezeit auffälligen Grafiken vorziehen.

2. Nutze „die Fold“

Auch wenn du durch den Ansatz „weniger ist mehr“ vielleicht denkst, dass kurze Seiten, auf denen man nicht scrollen muss, besser sind, sind längere Landingpages effektiver darin, den Betrachter zu halten. Eine längere Seite ermöglicht einen größeren Abstand zwischen den Elementen, wohingegen sich dasselbe Design auf einer kurzen Seite überladen und chaotisch anfühlen kann. Und Scrollen ist ein kleiner Touch, durch den sich eine Seite interaktiver als beispielsweise eine Reklametafel anfühlt.

Unterwasser landingpage design
Die Grafiken dieser Landingpage sind so beschnitten, dass sie den Besucher dazu animieren, tiefer einzutauchen – ganz wie die Meerestiere selbst. Design von set4net.

Der beste Weg, vom Scrollen zu profitieren, besteht darin, um die sogenannte „Fold“ herum zu designen. Dabei handelt es sich um die Linie, an der eine Website aufgrund der Bildschirmauflösung abgeschnitten wird und der Nutzer gezwungen ist zu scrollen, um zu sehen, was sich darunter verbirgt. Obwohl es unterschiedliche Bildschirmgrößen gibt, sind die meisten „Above the fold“-Auflösungen 1000 x 600px. Mit halbversteckten Bildern oder Texten, die Neugier wecken und nur knapp über die Fold schauen, kannst du den Nutzer dazu verleiten, runter zu scrollen und weiter mit deiner Seite zu interagieren.

3. Optimiere das Lesemuster

Lesemuster beschreiben, wie Nutzer in der Regel Webseiten überfliegen (basierend auf Eye-Tracking) und Designer können Ausrichtung und Laufweite nutzen, um Texte so anzuordnen, dies zu erleichtern. Da die meisten Nutzer Webseiten überfliegen, bevor sie sich den Text durchlesen (von denen 79 % es beim Überfliegen belassen), ist es in deinem Interesse, dein Design für das Überfliegen zu optimieren. Teile Texte und Grafiken so auf, dass Textzeilen leicht aus der Entfernung zu lesen sind, sie aber auch den Nutzer subtil die Seite hinunter Richtung CTA führen.

Landingpage design mit Farbverlauf
Eine Ausrichtung in einem Z-Muster hilft Nutzern dabei, die Seite schnell zu überfliegen. Design von iva.

Das sind die beiden häufigsten Lesemuster, die bei der Gestaltung von Landingpages berücksichtigt werden:

  • Z-Muster: Nutzer folgen einem unsichtbaren „Z“ mit ihren Augen, während sie die Seite von links nach rechts überfliegen. Dies ist nützlich für Designs mit vielen Bildern und kann einem Seitenlayout ein dynamischeres Gefühl verleihen, indem man Elemente in einem Zickzack verteilt und Nutzer dazu bringt, schnell von einer Seite zur anderen zu schauen.
  • F-Muster: Nutzer folgen einem unsichtbaren „F“ mit ihren Augen, während sie die Seite von links nach rechts überfliegen. Dies ist nützlicher für textlastige Seiten, da die Form zuträglicher für zeilenweises Lesen ist.

4. Designe für Interaktion

Interaktive Elemente sind der größte Vorteil, den das Web gegenüber Printmedien zu bieten hat. Landingpage-Designer können Interaktion nutzen, um Nutzer zum Mitmachen einzuladen, statt passiv Werbematerialien zu lesen. Dadurch kann es sich mehr wie ein Spiel und weniger wie eine Werbung anfühlen.

Animiertes gif auf einer landingpage
Animationen, die durch Scrollen ausgelöst werden, können einer Landingpage ein lebendiges und interaktives Gefühl verleihen. Design von Adam Muflihun.

Normales Scrollen ist eine offensichtliche Form der Interaktion, doch Designer können dies durch Animationen wie vertikale oder horizontale Wischübergänge aufpeppen. Animationen können eine Seite mit Grafiken zum Leben erwecken, die sich entweder bewegen, ein- oder ausblenden oder ihre Farbe ändern. Wenn du ein physisches Produkt verkaufst, kannst du es den Nutzer virtuell testen lassen, indem du ihm die Möglichkeit gibst, sich ein 3D-Modell des Produkts anzusehen. Der CTA-Button ist deine wichtigste Form der Interaktion. Es sollte sich daher positiv und zufriedenstellend anfühlen, ihn anzuklicken. Obwohl diese Animationen dezent sein sollten, um Ablenkungen und lange Ladezeiten zu vermeiden, tragen sie viel dazu bei, den Nutzer zu unterhalten und bei Laune zu halten.

5. Designe einheitliche Landingpage-Schemata

Wenn dein Unternehmen verschiedene Produkte oder Dienstleistungen anbietet, solltest du separate Landingpages erstellen, um die Conversions für das jeweilige Produkt zu maximieren. Doch je mehr Landingpages zu erstellst, umso schwerer kann es werden, den Designprozess im Rahmen zu halten. Was du dagegen tun kannst? Nutze dieselben Layouts.

Landing page design for a cheese brand
Eine zweite Version einer Landingpage mit einem ähnlichen Layoutschema. Design von eeeh_aarrh .
Landing page design for a cheese brand
Eine Version einer Landingpage kann den visuellen Stil anderer festlegen. Design von eeeh_aarrh .

Obwohl eine Landingpage auf das jeweilige Produkt zugeschnitten sein sollte, ist sie auch Teil deiner Marke. Einheitlichkeit zwischen ihnen zu wahren ist wichtig, um einen Wiedererkennungswert zu schaffen (dies hilft Nutzern dabei, deiner Marke zu vertrauen), erleichtert aber auch das Designen und die finanzielle Planung mehrerer Landingpages. Beginne mit einer Landingpage und teste ausgiebig ihre Performance (mehr dazu im nächsten Abschnitt). Sobald du ein funktionierendes Design hast, nutze dieses Layout als Blaupause für deine restlichen Landingpages. Verschiedene Produkte haben verschiedene Zielgruppen, also stelle sicher, jede dieser Seiten zu testen, und passe ihr Design wenn nötig an.

6. Teste jedes Designelement

Die traurige Wahrheit ist, dass deine Landingpage möglicherweise nicht zu so vielen Verkäufen führt wie erhofft, obwohl du all diese Tipps befolgt hast. Landingpage-Design ist mehr so etwas wie eine Wissenschaft, bei der Fakten mehr zählen als ästhetische Vorlieben. Die wichtigste Variable in deiner Designrechnung ist die Zielgruppe. Jede Zielgruppe ist einzigartig und nur durch Testen und Anpassen deines Designs wirst du erfahren, ob dein Landingpage-Design bei ihr ankommt.

Ein Bild mehrerer Versionen einer landingpage
Teste mehrere Versionen jedes Elements einer Landingpage, bis du ein Design gefunden hast, das funktioniert. Design von Ian Douglas.

Split Test, manchmal auch A/B-Test genannt, in denen zwei verschiedene Versionen eines Designs bei zwei unterschiedlichen Kundengruppen getestet werden, sind ein üblicher Weg, um Designern und Vermarktern bei der Entscheidung zu helfen, welches Design die besten Ergebnisse liefert. Nutze diese Methode, um jedes Element deiner Landingpage zu testen, vom Header über den Werbetext bis hin zu den Bildern und der Form der Buttons. Auf diese Weise kannst du sicher sein, dass dein Landingpage-Design nicht nur gut aussieht, sondern deinen Nutzern auch gefällt.

Zeit, deine eigene Landingpage zu erstellen

Zu Beginn deines Landingpage-Designs musst du davon ausgehen, dass deine Nutzer nach einem Grund suchen, die Seite wieder zu verlassen. Es liegt an deinem Design, sie zu halten. Auch wenn es viele Faktoren gibt, die zu einer hohen Absprungrate beitragen – undeutliche Beschreibungen, zu hoher Preis oder einfach ein enttäuschendes Produkt, ein gutes Design ist einer der besten Faktoren, sie zu verringern. Während dieser Guide dir einen guten Ausgangspunkt für dein Landingpage-Design bieten soll, ist die Arbeit mit einem professionellen Designer immer noch der zuverlässigste Weg zu einem tollen Landingpage-Design. Du möchtest mehr über Webdesign erfahren? Dann haben wir hier einen Artikel, der Schritt für Schritt erklärt, wie man eine Website kreiert.

Erhalte dein individuelles Landingpage-Design!
Unsere talentierten Designer können dir helfen, die ideale Landingpage für dein Produkt zu kreieren.