Landingpages können den Erfolg einer Marketingkampagne bestimmen: Sie machen aus Besuchen Verkäufe. Das ist eine Menge Druck für eine einzige Website! Deshalb ist es auch wichtig, die Mechanismen hinter dem Design einer Landingpage zu verstehen. Glücklicherweise sind wir da, um dir eine Bruchlandung zu ersparen.

Was ist eine Landingpage? Sie ist ähnlich wie eine Website, hat aber in der Regel keine Navigation oder Links. Stattdessen beinhaltet sie eine deutliche, aktionsorientierte Überschrift und wenn man nach unten scrollt, findet man einige Schlüsselpunkte, die den Wert des jeweiligen Produkts hervorheben. Die Landingpage schließt typischerweise mit einer Methode ab, die aus Besuchern Käufer und Konsumenten machen soll – oftmals mithilfe einer E-Mail-Eingabe oder einer Möglichkeit zum Kauf. Klingt einfach, oder? Aber es gibt viele Wege, eine Landingpage zu gestalten und nur einige davon werden für dein Projekt richtig sein. Wir haben die 5 größten Stile umrissen und geben dir 23 Beispiele, um dich zu inspirieren!

Minimalistische, textbasierte Landingpages

Der grundlegendste Stil eines Landingpage-Designs besteht aus reinem Text und wenigen Bildern. Diese Art Landingpage erzeugt hauptsächlich durch die Wahl der Schriftart, Schriftgröße, Farbe und dem typografischen Layout Abwechslung und ästhetisches Interesse. Dieser Designstil vermittelt eine eindeutige Botschaft und spricht Kunden an, die logisch und methodisch denken oder solche, die einfache, schnell auf den Punkt kommende Botschaften zu schätzen wissen.

Sales landing page
The Sales Effectiveness Manifesto landing page by theink3dskull
Astrology landing page
ellena-art.com landing page by MaiaPulciu

Ein tolles Beispiel für diesen Stil ist die „A Place at the Table“-Landingpage für eine Konferenz zur Umwelterziehung für Jugendliche, die nach Sponsoren und Teilnehmern sucht. Die Überschriften auf dieser Seite sind in einer großen, handgezeichneten, kursiven Schriftart gehalten, was der Seite einen jugendlichen Eindruck verleiht. Das Fehlen von Bildern unterstreicht die Einfachheit der Botschaft, die ausdrücken will, wie wir unsere Auswirkungen auf die Umwelt reduzieren und unseren Lebensstil vereinfachen können. Als Strukturelement setzt das Design auf eine simple, dreifarbige Farbpalette. Einige Seitenabschnitte haben hellgraue Hintergründe, während andere satte, türkisfarbene Hintergründe haben. Letztendlich stellt diese simple Landingpage mit seinem auf reinem Text basierenden Design sicher, dass sie die Aufmerksamkeit eines jeden potenziellen Teilnehmers hält.

Ein weiteres Design, welches auf Farben setzt, um Seitenabschnitte voneinander abzugrenzen, ist das 99designs Landingpage Template-Design. Diese dreifarbige Farbpalette ist ebenfalls mit der Typografie verflochten und nutzt Negativraum innerhalb der blauen und grünen Abschnitte. Im Gegensatz zum vorigen Beispiel nutzt dieses Design mehrere Schriftarten, was ein willkommener Anblick ist bei einem Design, das auf die Variation von handschriftlichen Lettern verzichtet. Letzten Endes wird jede Botschaft, die in dieses Design eingefügt wird, schnell auf den Punkt kommen, was viele Kunden zu schätzen wissen werden.

Landingpages im Collagen-Stil

Einige Marketingkampagnen benötigen ein Design, das sowohl visuell als auch intuitiv ist – ein Design, das Besucher anspricht, die weniger dazu geneigt sind, Texte zu lesen. Ein Weg dies zu erreichen, ist die Nutzung von Collagen oder einem bildlich zusammengesetzt wirkenden Stil. Mit anderen Worten, produktspezifische Bilder können in „surreale“ Umgebungen eingebettet werden, die maßgeschneidert für das Produkt oder Event sind. Die Gegenüberstellung dieser Bilder erzeugt eine tiefere Bedeutung.

Coconut landing page
momentum Kaffeeweißer Landingpage von eeeh_aarrh

Auf der Landingpage von Paul J Tafelski ist ein Bild des Anwalts auf einem Foto der Säulen der Justiz platziert. Die Bildsprache kommuniziert die Botschaft der Seite; sie sagt dem Besucher, dass dieser Mann für Gerechtigkeit steht und tut dies auf besonders deutliche Art (was vermutlich nicht so rüberkommen würde, wenn er einfach neben ein paar Säulen stünde). Diese Verwendung einer Collage wird Leute mit einem tiefsitzenden Bedürfnis nach Gerechtigkeit dazu anregen, eine Anfrage für eine Beratung zu stellen.

Derweil sind auf der Landingpage für das Kunden-Event von Pulse drei Elemente zu eine Collage zusammengefügt: die Golden Gate Bridge, eine lächelnde Frau und das Pulse-Logo. Hier lässt die Collage die Frau so wirken, als würde sie eine Geste in Richtung San Francisco machen und dich einladen – etwas, das schwer in einem echten Foto umzusetzen wäre. Die Chancen stehen gut, dass sich Besucher, die sich emotional mit diesen drei Bildern verbunden fühlen, registrieren werden.

Fotografische Landingpages

Fotografien erzeugen eine emotionale Bindung zum Betrachter. Das gewünschte Gefühl in einem potenziellen Käufer zu wecken, kann ihn in den richtigen Zustand zum Kauf versetzen. Manchmal braucht es nur ein einfaches Hintergrundbild, um in deinen Besuchern ein Gefühl von Vertrautheit zu erzeugen.

Meditation landing page
Satorio.org landing page by Dmitry S.
Peer to peer landing page
Pylon landing page by tale026
Firearm landing page
Tacti-Care Landingpage von CreativeDezigner

Die Seite der„Guard My Shit“-App zeigt einfach ein Foto von jemandem, der sein Telefon neben seinen Computer hält. Besucher, die ein Telefon und einen Computer besitzen, werden sich leicht damit identifizieren können. Auf der anderen Seite zeigt die Landingpage von „The Firearm Cleaning Kits“ dunkle, dreckige und schmierige Handfeuerwaffen. Es sieht gefährlich aus – schließlich ist es gefährlich, eine schmutzige Waffe zu haben. Dies erzeugt möglicherweise ein Gefühl der Sorge, was ebenfalls ein Weg ist, Menschen zum Kauf zu motivieren.

Allerdings müssen nicht alle fotografischen Landingpages so buchstäblich sein. Sieh dir die Seite für Pylon zum Peer-to-peer-Kredit an. Sie zeigt einfach zwei junge Erwachsene, die über einer Stadt stehen. Wir können die Botschaft so interpretieren, dass Pylon den Leuten das Gefühl gibt, sich obenauf zu fühlen. Das Foto erzeugt ein Gefühl von Freiheit. Es ist aufstrebend. Menschen, die auf dieser Seite landen, wollen sich so fühlen. Und dieses Gefühl ermutigt sie dazu, sich anzumelden.

Soll deine Landingpage ein Produkt zeigen, das einfach in einem Bild dargestellt werden kann? Oder brauchst du eine metaphorische Abbildung deines Produkts wie auf der Pylon Seite? Dieser Stil einer Landingpage könnte der richtige für dich sein!

Computer- und Technologie-Grafiken

Branchen, welche sich auf Computertechnik und Wissenschaft beziehen, werben um Kunden, die von den Leistungen der Technologie beeindruckt sind. Um dieses Gefühl der Begeisterung zu schüren, nutzen viele Technologieunternehmen einen Designstil, der computergenerierte Grafiken enthält. Denke nur an 3D-Renderings, Graphen, Interpretationen von Daten und die Darstellung von Computerteilen. Dieser Stil wirkt häufig beeindruckend auf den Betrachter und weckt ein Gefühl der Begeisterung über das technische Level oder die fortgeschrittenen Merkmale eines Produkts oder Services.

Nimm zum Beispiel die Landingpage für Renerald, die eine extrem digitalisierte Interpretation eines Globus zeigt. Es ist ein grafischer Stil, der mit fortschrittlicher Computersoftware erzeugt wurde. Einfach eine Grafik in diesem Stil zu verwenden, kann deinen Kunden das Gefühl vermitteln, dass du über fortschrittliche Fähigkeiten verfügst, was sie wiederum zum Kauf bewegen kann.

In einem minimalistischeren Design nutzt die Landingpage von Stratejos ein dezentes „Motherboard“-Design im Hintergrund, mit einem hellen Orange. Diese Gestaltung ist aus Designsicht weniger technisch, aber vermittelt immer noch klar die Botschaft, dass dieses Unternehmen ein Produkt anbietet, das sich auf Computerhardware und Software bezieht. Letztendlich wird es sicher immer noch Kunden zu einem Klick animieren, die weniger vertraut mit Computern sind.

Illustrierte Landingpages

Zu guter Letzt kommt der weitverbreitete, vielseitige Illustrationsstil für eine Landingpage. Diese Designs sind oftmals freundlich und bunt und nutzen fiktionale Charaktere, welche sich oftmals zugänglicher anfühlen als echte Menschen (die manchmal gestellt wirken können). Wenn deine Marke für Zugänglichkeit steht oder wenn dein Service besonders viel Freundlichkeit erfordert, ist eine illustrierte Landingpage genau das Richtige für dich.

Finance landing page
Buoy Landingpage von theink3dskull

Nimm zum Beispiel die Landingpage von Move’n’Cash, die eine fröhliche Truppe von illustrierten Umzugshelfern zeigt, die den schönsten Tag ihres Lebens haben! Sie macht einen aufgeschlossenen Eindruck und die Tatsache, dass sie illustriert sind, lässt sie scheinen, als müsstest du dich niemals mit ihnen auseinandersetzen.

Illustrationen können es Unternehmen auch ermöglichen, Punkte zu verdeutlichen, die in anderen Stilen nur schwer auszudrücken wären. Auf der Landingpage von Buoy streckt eine ertrinkende Person ihren Arm nach einem Rettungsring aus. Dieses Bild soll vermitteln, dass das Unternehmen Buoy dir hilft, dich über Wasser zu halten, wenn du finanziell untergehst. Eine Illustration ist hier eine großartige Wahl, da eine realistische Abbildung einer ertrinkenden Person hier wohl zu heftig wäre. Dieses Design wirkt hingegen definitiv unbeschwert, freundlich und hilfreich für jemanden, der tatsächlich in seinen Schulden ertrinkt.

Zusammenfassung

Da hast du es nun also: Die fünf großen Stile für Landingpages, um dich zu inspirieren. Alles was jetzt noch zu tun bleibt, ist zu fragen, was dein Startup oder Unternehmen kommunizieren will. Wenn es eine einfache Botschaft ist, entscheide dich für Typografie. Eine Fernsehwerbung? Nutze eine Collage. Du möchtest Vertrautheit erzeugen: Versuche es mit einem großen Foto. Alles dreht sich um Technologie? Warum nicht Computergrafiken verwenden? Und vergessen wir auch nicht Illustrationen für bunte und freundliche Looks. Nun ist es an der Zeit, ein paar neue Kunden zu gewinnen!

 Bist du bereit für eine großartige Landingpage für dein Unternehmen oder deine Kampagne? Starte noch heute einen Designwettbewerb!