6 Webdesign-Prinzipien, die Sie auf Ihre Landing Pages anwenden sollten
Veröffentlicht: 2019-08-29Unabhängig davon, welches Produkt oder welche Dienstleistung Sie verkaufen, hat eine Landing Page oft nur einen einzigen Zweck – Nutzer zum Abonnieren oder Kaufen zu bewegen. Dies bedeutet natürlich, dass eine gut optimierte Landingpage Ihnen einen stetigen Strom an Leads und Verkäufen bringen kann.
Es ist kein Geheimnis, dass die Erstellung effektiver Zielseiten eine Herausforderung sein kann. Durch die Implementierung der besten Webdesign-Praktiken in Ihre Landingpage-Designs können Sie jedoch Ihre Konversionsraten erheblich steigern.
In diesem Leitfaden besprechen wir sechs Designprinzipien, die hauptsächlich im Website-Design verwendet werden und nicht übersehen werden sollten, wenn Sie versuchen, effektive und funktionale Landing Pages zu erstellen.
1. Die Macht des Weißraums
Wenn möglich, ist es eine gute Idee, das Layout der Zielseite sauber und minimalistisch zu halten, damit die Leute nicht von zu vielen visuellen Elementen abgelenkt werden. Die Verwendung von Leerräumen ermöglicht es den Besuchern, sich auf Ihr Produkt zu konzentrieren und zum Handeln aufzufordern.
Schöne Nutzung des Leerraums von Love Hair
Viele Marketer bleiben in der Denkweise stecken, dass sie eine Menge Social Proofs und andere Texte einfügen müssen, die die Leute davon überzeugen, die gewünschten Maßnahmen zu ergreifen. Aber wenn die Leute eine Seite voller Text sehen, klicken sie wahrscheinlich einfach weg.
Beachten Sie, dass dies nicht bedeutet, dass Sie nicht mehr Text hinzufügen oder ein oder zwei Erfahrungsberichte verwenden können. Stellen Sie einfach sicher, dass Ihre Zwischenüberschriften, Aufzählungspunkte und anderen hinzugefügten Inhalte genügend Platz zum Atmen haben. Manchmal ist es sogar vorzuziehen, eines dieser Elemente hinzuzufügen. Copyblogger hat beispielsweise herausgefunden, dass Zwischenüberschriften die Leute dazu ermutigen, Ihren Inhalt zu lesen, anstatt ihn schnell zu scannen.
Ansprechende Zwischenüberschriften auf der Landingpage von Taboola
2. Verwenden Sie das F-Muster
Wissen Sie, dass unterschiedliche Layouts das Nutzerverhalten beeinflussen können? Ihr Layout kann die Benutzererfahrung beeinflussen oder beeinträchtigen. Eine effektive Designstrategie, die Sie bei der Gestaltung Ihrer Landingpages berücksichtigen sollten, ist das F-Layout.
Umfangreiche Eye-Tracking-Studien haben gezeigt, dass Benutzer Webseiten und mobile Bildschirme in verschiedenen Formen scannen, und einer davon hat die Form des Buchstabens F. Dies bedeutet, dass die Leute zuerst den oberen Rand der Seite betrachten, dann die obere linke Ecke und auf der linken Seite des Bildschirms (und nur gelegentlich auf die rechte Seite des Bildschirms blicken).
Wenn Sie wissen, welche Bereiche auf dem Bildschirm am häufigsten angezeigt werden, können Sie wichtige Elemente wie ein Logo, eine CTA-Schaltfläche oder ein Angebot im oberen linken Quadranten des Designs platzieren.
Schauen Sie sich diese Heatmap für Guardian Unlimited an:
Suchmaschinenjournal
Die roten und orangen Hotspots zeigen, wo die Aufmerksamkeit der Menschen am längsten verweilt.
Beachten Sie, dass das Durchsuchen einer Webseite genauso erfolgt wie das Lesen von Büchern – von links nach rechts, von oben nach unten. Eine Sidebar fällt meist kurz auf. Markenzeichen, Bilder und Zwischenüberschriften ziehen die meiste Aufmerksamkeit auf sich.
Wenn Sie also sicherstellen möchten, dass der wichtigste Teil Ihrer Landingpage-Nachricht gesehen wird, versuchen Sie, ihn oben auf der Seite zu platzieren, da nicht alle Benutzer alles auf der Seite Zeile für Zeile lesen.
3. Wenden Sie Kontrast und Farbe an
Wenn Nutzer auf Ihrer Webseite landen, sind sie nur noch ein oder zwei Klicks von einer Conversion entfernt. Hier möchte man auf keinen Fall stolpern, nur weil man nicht an Kontrast und Farben gedacht hat. Ihr Website-Design sollte ein Farbschema enthalten, das für Ihre Marke sinnvoll ist, in keiner Weise ablenkt und niemals die Lesbarkeit des Textes auf Ihrer Landingpage behindert.
Neil Patel sagt: „Es ist wichtig zu bedenken, dass die Verbraucher beim Einkaufen das optische Erscheinungsbild und die Farbe über andere Faktoren stellen.“
Er bietet auch an, dass Sie je nach Art Ihrer Landingpage Farben auswählen sollten: Zielimpuls-Conversions mit Rot, Orange, Schwarz und Königsblau
- Erreichen Sie Käufer mit kleinem Budget mit Marineblau
- Ziehen Sie Frauen für Bekleidungsmarken mit sanften Farben wie Pink und Hellblau an
- Verwenden Sie Grün, um Benutzern zu helfen, sich zu entspannen
- Verwenden Sie Schwarz für Luxusprodukt-Websites
Forever 21 verwendet sanfte Farben in ihrem Farbschema
Es scheint, dass die amerikanische Bekleidungsmarke Forever 21 diese Regel sehr gut kennt – sie haben zarte lila und rosa Farben für Verkaufspopups verwendet.
Farbe und Kontrast können auch verwendet werden, um die wichtigsten Teile Ihrer Landingpage hervorzuheben, z. B. Ihre CTA-Buttons. Zahlreiche Studien haben gezeigt, dass ein roter Knopf besser konvertiert als ein blauer. Aber es geht nicht nur um die rote Farbe.
Sie können beispielsweise eine separate Farbe für einen CTA-Button verwenden, der zuvor nirgendwo auf der Seite verwendet wurde, wie es Airbnb tut. Sie werden es hervorheben und Aufmerksamkeit erregen.
Der rote CTA-Button von Airbnb ist kaum zu übersehen
Der Kontrast zwischen Text und Hintergrund sollte ebenfalls sehr hoch sein. Ein Hintergrund mit Bildern, Grafiken oder Illustrationen kann die Lesbarkeit von Text erschweren. Stellen Sie sicher, dass dies bei Ihren Zielseiten nicht der Fall ist. Schließlich sind diese wenigen Textzeilen normalerweise der entscheidende Teil, um diese Konvertierung zu erzielen. Das Airbnb-Beispiel zeigt, dass ein komplexer Hintergrund die Lesbarkeit Ihres Lead-Magnet-Angebots nicht beeinträchtigt.
4. Vergessen Sie nicht das Mobile-First-Design
Die Menschen nutzen täglich mehr und mehr mobile Geräte. Im Jahr 2019 werden 62 % des Internetverkehrs über Mobiltelefone abgewickelt. Sofern Sie nicht bezahlte Werbeaktionen verwenden, um Desktop-Benutzer gezielt anzusprechen, wird ein großer Teil Ihrer Besucher Ihre Landingpage mit ihren Smartphones aufrufen.
Der Grund, warum wir das erwähnen, ist, dass viele Landingpage-Builder, insbesondere die billigeren, nicht so zuverlässig sind, wie die Leute denken. Sie alle bieten Ihnen Vorlagen und ermutigen Sie, bestimmte Bausteine zu verwenden, um diese Vorlagen zu ändern, um sicherzustellen, dass die Software die Ansicht für alle Bildschirmgrößen optimiert. In vielen Fällen führt jedoch eine größere Änderung der ausgewählten Vorlage dazu, dass einige Elemente für andere Bildschirmgrößen nicht mehr ausgerichtet sind.
Welche Tools Sie auch immer verwenden, testen Sie Ihre Landing Page beim Go-Live mit mehreren Geräten gründlich, um sicherzustellen, dass Sie eine reaktionsschnelle Landing Page haben.

Die Desktop- und Mobilversion von Moz.com sind responsiv
Wenn Sie eine komplexere Zielseite haben, sollten Sie auch in Betracht ziehen, verschiedene Versionen für verschiedene Geräte zu erstellen. Es gibt keine Regel, dass auf jedem Gerät die gleichen Elemente sichtbar sein müssen!
5. Verwenden Sie persönliche Fotos, um Vertrauen aufzubauen
Wenn eine Person erwägt, online zu kaufen, ist Vertrauen das Hauptproblem. Woher wissen sie, dass diese Website vertrauenswürdig ist? Aktuelle Studien zeigen, dass Verbraucher Fotos von Personen mit dem Produkt in Verbindung bringen.
Dies ist einer der Hauptgründe, warum viele Influencer aus allen Branchen einen schönen Headshot für ihre Homepage verwenden.
Aleyda Solis (Marketing-Influencerin)
Medalia Art ist ein Online-Kunstshop, der auf seiner Homepage Gemälde berühmter Künstler präsentiert. Sie beschlossen, einen A/B-Test durchzuführen, um zu sehen, was passieren würde, wenn die Gemälde durch die Fotos der Künstler ersetzt würden.
Screenshot mit den Bildern von Künstlern
Sie erfuhren, dass die Konversionsrate für die Gemälde 8,8 % betrug, während sich die Konversionsrate mit persönlichen Fotos auf 17,2 % verdoppelte.
Ähnliche Untersuchungen von MarketingExperiments zeigten, dass die Konversionsraten zu steigen begannen, als sie ein normales Stockfotos durch ein Bild ihres Gründers ersetzten. Sie verzeichneten einen Anstieg der Anmeldungen um 35 %.
Gestalten Sie mit einem Archivfoto
Gestalten Sie mit einer echten Person
Fotos von Personen können sich also definitiv positiv auf Ihre Conversions und die Vertrauenswürdigkeit Ihrer Website auswirken. Versuchen Sie, echte Bilder anstelle von Archivfotos zu verwenden. Darüber hinaus haben Bilder von Menschen mit einem Fokus auf ihrem Gesicht eine viel stärkere emotionale Bindung.
6. Halte es einfach
Inzwischen sollten Sie sich bewusst sein, dass ein perfektes Landingpage-Design ein sauberes Layout und viel Weißraum beinhaltet.
Die Anwendung des KISS-Prinzips (keep it simple, dumm) wird Sie ermutigen, Ihre Seite minimalistisch zu halten. Was bedeutet das in der Praxis?
Es bedeutet:
- Wählen Sie eine Schriftart aus, die Sie auf der Zielseite verwenden werden, und konzentrieren Sie sich auf Variationen dieser Schriftart, wenn Sie etwas Abwechslung benötigen
- Wählen Sie zwei oder drei Farben, die Sie für Ihre Designelemente verwenden (zB Formulare, Text, CTA); Ihre Markenfarben sind oft eine gute Wahl
- Verwenden Sie so wenig Text wie nötig
- ein oder zwei Designformate einhalten (zB Rechtecke, Quadrate, Kreise, Ellipsen)
- Verwenden Sie einen einzigen CTA
Schauen Sie sich einfach dieses Website-Design an, das all diese Regeln bricht:
Beispiel für ein schlechtes Website-Design
Obwohl dies ein extremes Beispiel ist, können Sie verstehen, wie Besucher die Site sofort verlassen möchten. In diesem Leitfaden finden Sie weitere nervige Website-Design-Trends, von denen Sie sich bei der Gestaltung Ihrer Zielseite (oder einer anderen Seite Ihrer Website) fernhalten sollten.
Auf die gleiche Weise ist hier ein Beispiel für eine Seite, die mehrere CTAs verwendet, die den Besucher nur verwirren und die Gesamtkonversionsrate sicherlich zerstören.
Es ist wichtig, Ihre Landing Pages zu bereinigen
Der Fokus Ihrer Landing Page sollte darauf gerichtet sein, Ihnen eines zu verkaufen – Ihr Produkt oder Ihre Dienstleistung – deshalb sollte und KANN es auch einfach gehalten werden.
Zum Abschluss noch ein hervorragendes Beispiel für eine Landingpage mit minimalistischer Ästhetik, einem kontrastierenden CTA-Button und viel Weißraum:
Ein einfaches, aber schönes Landingpage-Beispiel vom Dollar Shave Club
Abschluss
Zweifellos sind die oben genannten Prinzipien wichtig, die Sie bei der Gestaltung Ihrer nächsten Zielseite beachten sollten. Halten Sie das Layout sauber und einfach, achten Sie auf die Platzierung, recherchieren Sie bei der Farbauswahl, verwenden Sie nach Möglichkeit echte Bilder anstelle von Archivfotos und testen Sie Ihre Website auf mehreren Geräten.
Erstelle jetzt deine erste Landingpage
Fangen Sie noch heute anEs ist kostenlos und wir benötigen Ihre Kreditkarte nicht.