Conversion Optimierung: 5 Landingpage Design Trends

Deine Landingpage wird mit einem attraktiven Design zur Conversion-Rakete. Wir zeigen euch fünf Trends, die die Richtung vorgeben, und dazu beitragen, eure Absatzzahlen nach oben zu treiben. Am Schluss zeigen wir euch, welche Fortschritte zukünftig zu erwarten sind.

Auf der Suche nach Produkten wie Adidas-Sneaker über Erdnussbutter bis hin zu Dienstleistungen einer Reinigungskraft, findet man schnell eine geeignete Landingpage. Websites, die speziell an ihre Zielgruppe angepasst wurden, gibt es schon seit Anfang 2000 und sind fester Bestandteil des Internets. Über die Jahre haben die Websitebetreiber ihre Seiten ausgebaut und an die Bedürfnisse der Verbraucher angepasst. Nach fast 20 Jahren, kann man innehalten, und einen Blick auf die gegenwärtigen Trends werfen und einen Ausblick in die Zukunft wagen.

Den Anfang machte das Unternehmen Microsoft im Jahr 2003. Microsoft suchte nach einer effektiven Möglichkeit, Office-Anwendungen an den Mann zu bringen und den Absatz zu erhöhen. Es ist nicht viel Zeit vergangen, als Dave Chaffey (eine bekannte Größe auf dem internationalen Markt für Marketing) als Blogger aktiv wurde und über den Einsatz des neuen Tools schrieb. An visueller Aufbereitung der Angebotsseite war offensichtlich allerdings noch nicht zu denken. Die dominierende Farbe der Website war Weiß, bestückt mit tristen grauen Buttons, die zur Action (Klick und Kauf) animieren sollten. Kennzeichnend der Seiten war auch jede Menge Text. Aus heutiger Sicht ein absolutes No-Go. Wer sich heute aktuelle Websites ansieht, kann etwas völlig anderes feststellen …

Links: Move’n’Cash Landingpage von Prismonline ; Rechts: Buoy Landingpage von theink3dskull

Links: Move’n’Cash Landingpage von Prismonline ; Rechts: Buoy Landingpage von theink3dskull

Illustrierte Landingpages

Worum geht’s?

Graphische Darstellungen, (wie zum Beispiel auch Infografiken) sind bei Website-Besucher immer gern gesehen. Online Marketing geht vor allem über visuelle Effekte, die den Kunden berühren und ansprechen. Für Formen, Farben und Figuren steht die Tür weit offen. Sei es eine Karikatur, ein Maskottchen oder eine eigen entworfene Charakterwelt, alles ist machbar und realisierbar. Gerade wenn visuelle Darstellungen die Gefühle des Verbrauchers ansprechen, ist die Chance höher, den Websitebesucher zum Käufer zu machen. Online Marketingunternehmen versuchen mit vertrauten bzw. familiären Objekten und Effekten ihre Produkte und Dienstleistungen dem Kunden emotional nahe zu legen. Ist das Herz einmal erreicht, ist der Klick auf den Kauf-Button nicht mehr weit.

Beispiel Illustrierte Landingpages

Move’n’Cash bietet Umzugsdienstleistungen an. Dargestellt wird ein lebhaftes, kräftiges Team, das mit seiner Arbeit absolut Spaß verbindet. Damit wird im ersten Schritt ein angenehmes Image vermittelt und des Weiteren der Eindruck gemacht, dass Möbelpacken und Umziehen zum Kinderspiel wird. “Wir stellen frohes Schaffen dar, mit Leichtigkeit übernehmen wir ihren Umzug.” – könnte das Motto der Firma sein.

Doch in einer Illustration steckt noch mehr als nur freundlich den Websitebesucher anzusprechen. An dieser Stelle sei das Beispiel von “Buoy” genannt. Eine ertrinkende Person streckt den Arm in Richtung Himmel, jetzt ist Hilfe in Sicht: der Rettungsring. Die Message ist klar: Mit uns kannst du dich bei Schwierigkeiten mit Sicherheit über Wasser halten.

Links: A Place at the Table Landingpage von NXCA™; Rechts: 99designs Landingpage von Prismonline

Links: A Place at the Table Landingpage von NXCA™; Rechts: 99designs Landingpage von Prismonline

Minimalistische Landingpages

Worum geht’s?

Ohne Text auf der Landingpage geht es natürlich nicht, auch nicht bei modernen Websites. Doch hier ist die Schriftart des Textes der Schlüssel. Mittels Font-Type (definiert aus Schriftart, Farbe, Größe und typografischem Layout) bekommt der Websitebesucher eine überzeugende und unmissverständliche Aussage. Personen, die eher Wert auf Information als Emotion legen, werden damit gezielt angesprochen.

Beispiel Minimalistische Landingpages

Die Website “A Place at the Table” zeigt die praktische Umsetzung des minimalistischen Stils. Es handelt sich hierbei um die Konferenz zur Umwelterziehung von Jugendlichen. Mit verschiedenen Mitteln wird Jugendlichkeit impliziert. Dazu gehören klare Farben, vereinzelt Bilder und große Überschriften, die kursiv gedruckt sind. Die Kombination dieser Elemente behält die Seriosität der Veranstaltung bei.

Ein anderes Beispiel mit annähernd gleicher Methode: 99designs. Hier findet man ein Zusammenspiel von klaren Farben und die Trennung von Seitenabschnitten. Negativräume verknüpfen Farbpalette und Typographie.

Links: GuardMyShit.com Landingpage von Dmitry S.; Rechts: Pylon Landingpage von tale026

Links: GuardMyShit.com Landingpage von Dmitry S.; Rechts: Pylon Landingpage von tale026

Fotografische Landingpages

Worum geht’s?

Fotografische Darstellungen können die Kauflaune des Kunden stark beeinflussen. Doch hier sollte der Website-Betreiber im Hinterkopf behalten, dass ein und dieselbe Darstellung unterschiedliche Assoziationen in den Köpfen der Menschen hervorrufen können. Das Foto kann positive oder negative Erinnerungen wecken und auf die Stimmung des Konsumenten dementsprechend Einfluss nehmen.

Beispiel Fotografische Landingpages

Ein klassische fotografische Landingpage findet der Anwender im Web bei der “Guard my Shit”-App. Fotos von unterschiedlichen Alltagsgegenständen sollen klar machen, welcher “Shit” gemeint ist und wie die App Abhilfe herbeiführen kann.

Manche Fotos auf den Landingpages sollen im übertragenen Sinne verstanden werden. “Peer-to-peer-Kredit” ist hierzu ein Beispiel. Von einem Hügel aus sehen zwei junge Menschen auf eine Stadt herunter. Dazu kann man einiges hineininterpretieren. Die Szene soll höchstwahrscheinlich die Hoffnung auf eine unbeschwerte Zukunft vermitteln, die erst durch den Kredit ermöglicht wird.

Links Renerald Landingpage von galinka Independent Rechts Reserve von WebBox

Links Renerald Landingpage von galinka Independent Rechts Reserve von WebBox

Technologie- und Computer-Grafiken

Worum geht’s?

Technische Abbildungen und Computergrafiken erzeugen beim Besucher ein Gefühl von Fortschritt, Verwendbarkeit und Brauchbarkeit. Produkte können mit diesen Effekten in den Fokus gesetzt werden. Hersteller aus der Smartphone- und Computerbranche machen es plastisch vor, denkt man an die Produktabbildungen von Apple und Samsung. Die Grafiken sprechen für die Leitsätze der Unternehmen und faszinieren die Käufer. Auch wenn es sich um Software handelt, die ja eigenlicht nur als immaterielles Objekt zu sehen ist, erzeugen passende Computergrafiken einen Eindruck über die Leistung und Stärke der Software.

Beispiel Technologie- und Computer-Grafiken

Das Image des Unternehmens zusammen mit der Dienstleistung wird auf der Landingpage von “Reneald” hervorgehoben. Zu sehen ist ein grafisch bearbeiteter Globus mit animierten Elementen, der zunächst den Großteil des Bildschirms einnimmt. Der auf der Website kontinuierlich verfolgte grafische Stil soll die Innovation, Effizienz und Präzision des Unternehmens in den Vordergrund rücken. Hier steht der Globus auch metaphorisch für die Globalität des Unternehmens (siehe Fotografische Landingpages).

Technologische Abbildungen bzw. Computergrafiken und Minimalismus schließen sich aber nicht gegenseitig aus. “Independent Reserve” zeigt es. Die klein gehaltene Grafik links oben, deren Teile auch im Logo wieder zu finden sind, erzeugt beim Betrachter Seriosität und macht schnell deutlich, dass es sich um datenbasierte Dienstleistungen handelt.

Links: Paul J. Tafelski P.C. Landingpage von Iconic Graphics; Rechts: Made Moments Landingpage von Dmitry S. für MadeMoments

Links: Paul J. Tafelski P.C. Landingpage von Iconic Graphics; Rechts: Made Moments Landingpage von Dmitry S. für MadeMoments

Landingpages im Collagen-Stil

Worum geht’s?

Der Collagen Stil soll zweierlei bewirken: die intuitive und visuelle Weitergabe von Informationen. Angesprochen mit dem Collagen Stil werden Leute, die Inhalte lieber visuell erfassen wollen.

Beispiel Landingpages im Collagen-Stil

Auf der Website des Rechtsanwalts “Paul J. Tafelski” findet der Besucher seine Person als Portrait im Vordergrund abgebildet. Den Hintergrund bildet der Anblick eines Gerichtsgebäudes mit einer Säule von unten. Die Kombination beider visuellen Elemente erzeugt das Vertrauen in seine Fähigkeiten die Klienten ohne überflüssigen Firlefanz bestens zu vertreten.

Eine ausdrucksvolle Darstellung mehrere einzelner visueller Einheiten findet man auf der Website des Geschenkboxen-Service von “Made Moment”. Die edle Flasche Champagner, dabei zwei glänzende Gläser mit prickelndem Inhalt, die dezent dunkel gehaltene Verpackungsbox – diese Collage kreiert ein edles Flair und einen Hauch an Luxus.

Landingpages der Zukunft: Und was kommt als nächstes?

Beim Blick in die Zukunft denkt man sicherlich zunächst daran, all die Möglichkeiten zu nutzen, die eine Fotobearbeitungssoftware bietet. Die Erstellung von Websites wird immer einfacher gemacht, so dass kaum mehr Programmierer notwendig sind. Einfache CMS, wie WordPress und Drupal, ermöglichen professionelles Webdesign und machen es auch für Einsteiger möglich, Ideen gleich online umzusetzen. Auch animierte Elemente in Kombination mit hochauflösenden Grafiken können Zukunftsmusik sein. Die Entwicklungen in diesen Bereichen nehmen rasant zu und damit ergeben sich mehr Ideen für die Gestaltung der Landingpage. Dennoch müssen auch zukünftig, das Unternehmen und dessen Klienten im Vordergrund stehen. Das heißt, das Angebot und die Zielgruppe sind beim Kreieren der Landingpage primär zu berücksichtigen. Dabei wird sich manches auch als nutzlos herausstellen und sich nicht für die Praxis eignen. Einige Entwicklungen aber werden den Durchbruch schaffen und tatsächlich Teilbereiche im Internet revolutionieren.

Ganzseitige Hintergründe

Der erste Blick beim Öffnen vieler zeitgemäß gestalteter Websites fällt auf eine hochauflösende Grafik, die sich über die komplette Seite erstreckt. In Kombination mit animierten Effekten und Sound werden die Emotionen des Besuchers angesprochen. Der weite Blick auf das Meer, ein Sonnenuntergang in den Bergen oder lachende fröhliche Mensche erzeugen Gefühle, haben aber zunächst mal gar nichts mit dem Produkt zu tun. Auffällig ist dieser Trend besonders bei Lifestyle-Websites. In der weiteren Entwicklung könnten ganzseitige Videohintergründe den Verbraucher in eine eigene Welt versetzen.

Inside-the-Product

Marketing-Unternehmen beschäftigen sich mehr und mehr mit der User-Experience. Mit dem Inside-the-Product-Design lassen sich für den Käufer Einblicke generieren, die ihm den täglichen Umgang mit dem Produkt vorstellen und das direkt auf der Website. Die Hemmschwelle zum Kauf ist hier schnell überbrückt.

Im Web findet ein harter Kampf für Angebot und Nachfrage am digitalen Markt statt. Das Angebot im Internet an Produkten und Dienstleistungen ist äußerst komplex geworden. Wer nicht bei Google auf den ersten drei Ergebnisseiten erscheint, wird kaum beachtet. Online- und Offlinemaßnahmen (wie zum Beispiel SEO) müssen dazu führen, dass der Kunde überzeugt vom Produkt und motiviert zum Kauf ist.