what is unbounce
KATEGORIE

Digital Marketing Kickoff 2016

6 herausragende Artikel, die dir beim Landing Page Design helfen

Landing Page Design: Nicht nur hübsche Bilder
Bei gutem Landing Page Design geht’s nicht nur um hübsche Bilder, sondern eine Struktur, die Conversions bringt. Foto: Pixabay.

Manche unter uns genießen den Luxus, talentierte Grafikdesigner im Team zu haben.

Aber für all diejenigen unter uns, für die das nicht gilt, kann das Entwerfen einer Landing Page, die sich nicht als Conversion-Bremse entpuppt, ein steiniger Weg sein.

Gemeint ist hiermit nicht einfach nur eine hübsche Seite. Vielmehr geht es hierbei um alles, was zu einem effektiven Landing Page Design beiträgt: leitende Hinweise, Wegweiser, Erfolg versprechende Verwendung von Schrifttypen, Farbtheorie, Layout-Tricks und so weiter.

Sollte Designen nicht zu deinen Stärken zählen, bist du bei diesem Artikel genau richtig. Wir haben das Web nach den besten Blog Posts über bewusste Designentscheidungen, die sich auf die Performance Deiner Landing Page auswirken, für dich durchkämmt – die Inhalte reichen von Farbpsychologie über Typographie bis hin zu weniger offensichtlichen visuellen Tricks.

Los geht’s!

1. Die Psychologie der Farben von Quick Sprout

Landing Page Design: Die Psychologie der Farben von Quicksprout

Dieser Post stellt das vierte Kapitel von Quick Sprouts “Konsumentenpsychologie verstehen – Eine umfassende Anleitung”. Das Kapitel beginnt zunächst mit einer Betrachtung der Farbtheorie,  bespricht dann verschiedene emotionale Auswirkungen, die durch satte Farben, Schattierungen und Abmischungen sowie der Lehre der Farbtonabstimmung entstehen.

Farben sind sozial und kulturell besetzt. Die Anleitung beinhaltet eine graphische Darstellung, die erklärt, wie die Bedeutung einer Farbe von einer sozialen Gruppierung zur nächsten variieren kann, z.B. werden in Nordamerika andere Farben als ansprechend empfunden als in Indien.

Die Anleitung beschäftigt sich außerdem mit:

  • Der Beziehung zwischen Geschlecht und Farbpräferenzen
  • Studien, die aufzeigen wie Farben sich auf Conversions auswirken
  • Der Erstellung von Designs, die Menschen mit Behinderungen den Zugang erleichtern

Wichtigste Erkenntnis

Ein verbreiteter Fehler unter Designern ist der Einsatz zu vieler Farben auf einer Seite.

Eine Farbüberflutung kann dazu führen, dass zu viele Emotionen oder Botschaften auf einmal vermittelt werden. Dadurch entsteht das Risiko, den Betrachter des Designs zu verwirren.

Stattdessen sollte man sein Design unter Einsatz einer hervorstechenden Farbe, die sich von einer neutralen Farbgebung mit Weiß, Grau oder Schwarz absetzt, testen.

2. Optimierung der Benutzerfreundlichkeit durch Farbgebung: Die Physiologie der Farbwahrnehmung für mehr Conversions nutzen

Landing Page Design: Farb-Theorien von Angie Schotmuller

Die meisten Quellen zur Beziehung von Farben und Conversions konzentrieren sich auf die Psychologie der Farben; also auf die Emotionen und Eigenschaften, die bestimmten Farben zugeschrieben werden.

Angie Schottmuller von Three Deep Marketing hat hingegen ein System entwickelt, das auf der physiologischen Verarbeitung von Farben durch den Menschen basiert, um Conversions anzukurbeln. Anders gesagt, welche Rolle das menschliche Auge bei der Wahrnehmung von Farben spielt und welche Auswirkungen dies auf das Verhalten eines Nutzers beim Besuch einer Seite hat.

In diesem detailierten Post lernst du alles über:

  • Angie Schottmullers “Clockwork Conversion Color Model,” welches sich auf den strategischen Einsatz von Komplementärfarben zur Conversion-Steigerung konzentriert
  • die vier auf wissenschaftlichen Erkenntnissen basierenden Farbprinzipien, die dem Modell zugrunde liegen, und wie man sich jedes einzelne beim Design seiner Landing Page zunutze machen kann

Wichtigste Erkenntnis

Verwende satte Farben für den vordergründigen CTA und gestalte die restliche Seite durch Abtönen mit Weiß, Grau und Schwarz farblich neutral.

Dadurch wird die übertriebene Verwendung von satten Farben vermieden, die das Auge ablenken und zu Erschöpfung führen.

3. Den richtigen Schrifttyp wählen: Ein Leitfaden zur Typographie und UX

Landing Page Design: Leitfaden zur Typographie und UX
Choosing the Right Font: A Guide to Typography and UX von Hannah Alvarez von UserTesting.

Es existieren zahlreiche gegensätzliche Meinungen zu der Frage, welcher Schrifttyp optimal für die Verwendung im Internet ist. Tatsächlich hängt es einzig und allein von dem Kontext ab, für den man designt.

Allerdings bieten die Empfehlungen von UserTesting alle Information, die man benötigt, um eine fundierte und wohl überlegte Entscheidung über den Einsatz von Schrifttypen auf deiner Landing Page zu treffen.

Hier erfährst du:

Wichtigste Erkenntnis

Der Zweck eines jeden Stückchen Text auf deiner Seite ist, den Nutzern dabei behilflich zu sein, ihre Ziele zu erreichen. Dieses Motto solltest du bei der Auswahl eines Schrifttyps für deine Landing Page immer im Hinterkopf behalten.

Stelle dir dazu folgende Fragen:

  • Welche Nutzererfahrung erwartet jemand, der auf meiner Seite landet?
  • Welche Endgeräte verwenden meine Nutzer?
  • Was wollen sie mit dem Besuch meiner Landing Page erreichen (einkaufen, etwas lernen, unterhalten werden)?

Die Antworten auf diese Fragen helfen bei der Auswahl eines passenden Stils und der richtigen Farben für den Schrifttyp auf deiner Webseite. Verlasse dich außerdem nicht auf dein Bauchgefühl, sondern verhalte dich wie jeder andere gute Landing Page Designer und teste, teste, teste.

4. Das passende Layout zum Schrifttyp – Anleitung für Nicht-Designer

Landing Page Design: Layout in Kombination mit dem Schrifttyp
A Non-Designer’s Guide to Typefaces and Layout von Adam Dachis für Lifehacker.com.

Wenn man sich erstmal für die besten Farben und passende Schriftart entschieden hat, muss alles nur noch auf der Seite so arrangiert werden, dass es ‘genau richtig’ aussieht. Aber wie geht das?

Dieser Post von Adam Dachis auf Lifehacker dröselt das Ganze auf und gibt Tipps zu Schriftarten und Layout:

  • Wie man verschiedene Elemente seiner Seite durch passende Größenverhältnisse, Farben und Abstände zueinander hervorheben kann
  • Warum man nicht mehr als zwei Schriftarten verwenden sollte (und wann man getrost mit dieser Regel brechen darf)
  • Wie man seine Texte und Bilder formatiert, um die intendierte Botschaft besser zu kommunizieren und einen überzeugenden visuellen (Conversion steigernden) Eindruck zu erzeugen

Wichtigste Erkenntnis

Durch schlecht gewählte Farbkombinationen kann eine Seite unübersichtlich wirken und potenzielle Kontakte abtörnen. Was kann ein farbenblinder Marketer also tun?

Dachis verweist auf dieses super coole Tool: Adobe Kuler hilft dir dabei Farbkombinationen zu finden, die garantiert und nicht nur per Bauchgefühl funktionieren.

5. 8 wirkungsvolle Webdesign-Prinzipien, die man kennen sollte

Landing Page Design: 8 Web-Design-Prinzipien von Peep-Laja
8 Effective Web Design Principles You Should Know von Peep Laja von ConversionXL.

Wie CRO (Conversion Rate Optimization) – Experte  Peep Laja es in seinem Artikel so schön ausdrückt:

Design ist nicht einfach nur etwas, womit sich Designer beschäftigen. Design ist Marketing.

Diese Aussage kann furchteinflößend wirken, wenn man selber Marketer ist, aber kein Auge für Design hat. Dem wirkt Peep entgegen, indem er acht Web Design Prinzipien aufzeigt, die dir dabei helfen sollen, den Besuch deiner Landing Page zu einem positiven Erlebnis zu machen.

Obwohl viele der Beispiele, die Peep einflechtet, für Webseiten und nicht Landing Pages gelten, muss man diesen Post gelesen haben.

Du lernst:

  • Wie man mathematische Verhältnisse und Folgen zum Zweck eines eines attraktiven Webdesigns anwendet
  • Was man sich von der Fotografie abgucken kann, nämlich die Zwei-Drittel-Regel bei der Auswahl (und Anpassung) von geeigneten Bildern für deine Landing Pages
  • Dutzende weiterer psychologischer und wissenschaftlich erwiesener Tricks, die sich unterschwellig auf die Wahrnehmung der Landing Page durch den potenziellen Kunden auswirken.

Wichtigste Erkenntnis

Das Gesetz der Nähe: Es besagt, dass Elemente mit geringen Abständen zueinander auf einer Landing Page vom Betrachter als zusammengehörig wahrgenommen werden.

Platziere Elemente, die thematisch nicht zusammen gehören, nicht in unmittelbarer Nähe zueinander. Umgekehrt kann man sich diese Regel aber zu Nutze machen, wenn man andeuten möchte, dass bestimmte Elemente tatsächlich zusammen gehören!

6. Warum diese hässlichen Landing Page Designs schöne Ergebnisse erzielen

Hässliche Landing Page Designs, die Conversions generieren
Why These Ugly Designs Convert Beautifully von Mattias Guilotte für Unbounce.

Nachdem wir uns ein gutes Stück Wissen über Design und wie man Dinge gut aussehen lässt angeeignet haben, lassen wir die Theorie mal bei Seite und wenden uns einem Artikel zu, der aufzeigt, dass der äußere Schein trügen kann.

In seinem Post mit Beispielen von Landing Pages, stellt Mattias Guilotte mit einem Augenzwinkern drei nicht-ganz-so-schöne Landing Pages vor, die alle erstaunlich gute Conversion Rates haben. Er gibt Einblicke in die überraschende Conversion-Statistik dieser Seiten und stellt zu jeder eigene Vermutungen an, warum diese Seite so gut funktioniert, obwohl sie nicht schön anzusehen ist.

Dieser Post ist ein Wink mit dem Zaunpfahl, warum man seine Seite immer testen sollte, anstatt blindlings eine Reihe von “Designregeln” zu befolgen.

…Wie zum Beispiel solche, über die dich dieser Artikel soeben informiert hat.

Landing Page Design: Das Fazit

Alle vorgestellten Artikel bieten richtig viele gute Infos, die einen ein Weilchen beschäftigt halten können. Beim Durchlesen finden sich immer wieder Hinweise darauf, in welchem Punkt es bei der eigenen Landing Page hapern könnte.

Und dann testen, testen, testen, um deine Annahmen zu überprüfen.

Und zu guter Letzt denke immer daran, dass überzeugende Texte die Basis für ein schönes und umfassendes Landing Page Design sind.

P.S.: Kennst du irgendwelche lesenswerten Blogposts über Design, die wir hier nicht erwähnt haben? Unser deutscher Unbouncer Ben Harmanus freut sich über deinen Kommentar!


angie-schotmuller-color-theory

Über Chloe Mason Grey
Chloe Mason Gray ist auf Digital Marketing und Wachstums-Strategien für kleinere Unternehmen und furchtlose Solopreneure spezialisiert. Schick ihr doch mal ein freundliches "Hello" auf Twitter und verbinde dich mit ihr auf Google+.
» Mehr Blog Posts von