Landingpages können den Erfolg einer Marketingkampagne bestimmen: Sie machen aus Besuchern Käufer. Das ist eine Menge Druck für eine einzige Website! Deshalb ist es wichtig, die Mechanismen hinter dem Design einer Landingpage zu verstehen, über die wir in diesem Artikel reden wollen. Starten wir zunächst mit der Begriffsklärung: 

Was ist eine Landingpage?

Eine Landingpage ähnelt einer Website, hat aber in der Regel keine Navigation oder Links. Stattdessen beinhaltet sie eine deutliche, aktionsorientierte Überschrift und einige Schlüsselpunkte, die den Wert eines Produkts oder Services hervorheben. Die Landingpage schließt typischerweise mit einer Aktion 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? Ist es auch, aber es gibt viele Wege, eine Landingpage zu gestalten und nur einige davon werden für dein Projekt geeignet sein. 

Wir haben einige der beliebtesten Stile zusammengetragen inklusive eindrucksvoller Landingpage-Designs, um dich zu inspirieren!

Minimalistische, textbasierte Landingpages

Der einfachste 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 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, pointierte Botschaften zu schätzen wissen.

The Sales Effectiveness Manifesto Landingpage von theink3dskull
ellena-art.com Landingpage von MaiaPulciu

Ein tolles Beispiel für diesen Stil ist die „A Place at the Table“-Landingpage für eine Konferenz zur Umwelterziehung von Jugendlichen, 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, während andere satte, türkisfarbene Hintergründe haben. Letztendlich stellt diese simple Landingpage mit dem auf reinem Text basierenden Design sicher, dass sie die Aufmerksamkeit eines jeden potenziellen Teilnehmers hält.

Ein weiteres Design, das 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.

Neonfarbene Landingpage-Designs

Es gibt keinen besseren Weg, deine Landingpage auffallen zu lassen, als mithilfe von Neonfarben. Die leuchtenden, hellen Farben der Landingpages weiter unten lassen sie förmlich vom Bildschirm springen.

Doch du musst es in Sachen Farben nicht komplett übertreiben. Manchmal können Neonfarben als Akzentfarbe für wichtige Elemente der Seite genauso effektiv sein. Schau dir diese aufsehenerregenden Neon-Landingpages an:

neon landing page design
Landingpage-Design von Skalak
neon landing page design
Landingpage-Design von FaTiH™
neon landing page design
Landingpage-Design von anDyrv
neon landing page design
Landingpage-Design von Prismonline
neon landing page design
Landingpage-Design von Ananya Roy
neon landing page design
Landingpage-Design von masiko

Landingpage-Designs im Dark Mode

Viele Landingpage-Designs setzen auf helle und leuchtende Farben, aber es kann sich lohnen, in die andere Richtung zu denken. Landingpages im Dark Mode mit grauen und schwarzen Hintergründen, die nur hin und wieder ein wenig Farbe haben, können einen mysteriösen und doch eleganten Effekt haben. Ihre auffällige Verwegenheit macht sie perfekt für Marken, die sich von allen anderen absetzen wollen.

Schau dir an, wie diese dunklen Landingpages einen bleibenden Eindruck bei Besuchern hinterlassen:

dark landing page design
Landingpage-Design von Joe B.
dark landing page design
Landingpage-Design von Potato Studios
dark coffee landing page design
Landingpage-Design von akorn.creative
dark landing page design
Landingpage-Design von Designer-X
dark watch landing page design
Landingpage-Design von Aneley

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 für das Kunden-Event von Pulse sind 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.

Landingpages mit flachen Illustrationen

Flache Illustrationen sind momentan sehr beliebt bei Landingpages und das liegt daran, dass sie extrem vielseitig sind. Flat Design kann deiner Landingpage einen modernen Look verpassen, der sowohl simpel als auch farbenfroh ist. Außerdem passt es zu so ziemlich jeder Branche. Hier sind ein paar Landingpage-Designs, die Illustrationen im Flat Design und Semi-Flat Design nutzen:

flat illustration landing page design
Landingpage-Design von DreamMaster
flat illustration landing page design
Design von Coincept
flat illustration landing page design
Landingpage-Design von Ink’d
flat illustration landing page design
Landingpage-Design von FaTiH™
flat illustration landing page design
Landingpage-Design von felipe_charria
flat illustration landing page design
Landingpage-Design von BespokeDesign

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 versetzen, um einen Kauf zu tätigen. Manchmal braucht es nur ein einfaches Hintergrundbild, um in deinen Besuchern ein Gefühl von Vertrautheit zu erzeugen.

Satorio.org Landingpage von Dmitry S.
Pylon Landingpage von tale026
photo based landing page design
von 2ché
photographic landing page design
von Prismonline

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.

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 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 belebend. 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? Dann könnte dieser Stil einer Landingpage der richtige für dich sein!

Landingpage-Designs mit Farbverläufen

Farbverläufe sind ein wunderschöner Weg, um Farbe, Energie und Bewegung in deine Landingpage zu bringen, ohne dein Design zu überladen oder die Aufmerksamkeit von deinem CTA zu lenken. Der Farbverlauf-Trend ist extrem vielseitig, abhängig von deiner verwendeten Farbe. Schau dir die Ideen für diese Landingpages an, die Farbverläufe auf verschiedene Weise verwenden.

blue and green neon gradient landing page design
Landingpage-Design von iva
blue and purple gradient landing page design
Landingpage-Design von MailDesigner
green, gray and purple gradient landing page design
Landingpage-Design von Roberto Criado
pink and orange gradient landing page design
Landingpage-Design von Adam Muflihun.
pink and purple gradient landing page design
Landingpage-Design von thecreatv
blue and purple gradient landing page design
Landingpage-Design von webDAE
green gradient landing page design
Landingpage-Design von Spillo (Luigi Burrelli)

Landingpages mit isometrischen Designs

Isometrisches Design ist ein toller Weg, um komplexe Ideen mithilfe von Grafiken auf deiner Landingpage zu erklären. Isometrische Designs bieten dir mehr Perspektiven auf ein Thema. In der Lage zu sein, ein Design auf deiner Landingpage von der Seite und von oben zu sehen, macht die Besucher neugierig. Landingpages mit isometrischen Designs ermöglichen es dir auch, mehr Details zu zeigen, wodurch sie perfekt für Marken sind, die zeigen wollen, dass sie aufgeschlossen, transparent und vertrauenswürdig sind. Schau dir ein paar großartige Beispiele für Landingpages mit isometrischen Designs an:

isometric landing page
Landingpage-Design von iva
isometric landing page
Landingpage-Design von hamamzai
isometric landing page design
Landingpage-Design von Random Designer
isometric landing page design
Landingpage-Design von KisaDesign

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 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. 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 auch 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. Wir reden hier über Illustration im Allgemeinen, daher funktioniert jeder Stil. Du kannst alles von 3D-Illustrationen oder Lineart bis hin zu handgezeichneten Designs nutzen. Wähle einfach den Stil, der deine Markenpersönlichkeit am besten repräsentiert. 

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. In diesem Artikel findest du noch mehr Informationen zu Website-Illustrationen.

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 machen 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 fehl am Platz wäre. Dieses Design wirkt hingegen definitiv unbeschwert, freundlich und hilfreich für jemanden, der tatsächlich in seinen Schulden ertrinkt.

Zeit, deine eigene einzigartige Landingpage zu designen

Du siehst, es gibt viele verschiedene Stile für Landingpages. Hast du deine Inspiration gefunden? 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 simple 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 Illustrationen für bunte und freundliche Looks nicht. Nun ist es an der Zeit, ein paar neue Kunden zu gewinnen!

Auf der Suche nach dem perfekten Landingpage-Design?
Dann arbeite mit unseren talentierten Designern.

Dieser Artikel wurde ursprünglich im Februar 2017 verfasst und um neue Bilder und Informationen ergänzt.