Kuratierte Linksammlung für Webdesigner und -entwickler.
Tipps für ideale Landing-Pages

10 Design-Tipps für die perfekte Landing-Page

Eine Landing-Page ist die erste Erfahrung, die dein Kunde (oder potenzieller Kunde) mit deiner Marke macht. Sie muss Informationen vermitteln, zu einem Aufruf zum Handeln anregen und die Persönlichkeit deines Produktes widerspiegeln. Es ist schwierig! Heute teilt Carrie Cousins zehn Tipps zur Gestaltung von Landing Pages mit uns.

Solltest du nur dein Logo und Produktbild auf eine Seite kleben, wird es offensichtlich. Die Seite bietet nicht die Erfahrung oder Informationen, die dein Kunde erwartet. Ob die Seite schwer zu navigieren, schwer zu lesen oder ein Durcheinander an Visuals ist – Planung einer Landing-Page erfordert Präzision. Werfen wir einen Blick auf zehn Tipps, wie man es besser machen kann.

Anzeige

1. Hab ein klares Ziel für die Landing Page

Landing-Page Design von barkbox.com

Beim Erstellen oder Vornehmen von Designanpassungen für eine Landingpage ist das allererste Ziel der Seite: Was möchten Benutzer tun, wenn sie dorthin gelangen?

  • Auf einen Link klicken
  • Ein Video angucken
  • Informationen in ein Formular eingeben
  • Einen Kauf tätigen
  • In sozialen Netzwerken teilen
  • Ein Spiel spielen
  • Lesen oder anderweitig mit Inhalten interagieren

Dann sollte alles auf deiner Landingpage so gestaltet und ausgerichtet sein, dass Nutzer diesem Ziel näher kommen. BarkBox verkauft Hundespielzeug und Abo-Boxen. Die oben genannte Landing Page ist für die Valentinstags-Promotion gedacht, die zwar thematisch ist, aber Nutzer dazu bringt, etwas zu kaufen. (Beachte, dass auf jeder Schaltfläche „Get Started“ angezeigt wird.)

2. Design für deine Zielgruppe

Landing-Page Design von interfacelovers.com

Landing Pages müssen für die Benutzer erstellt werden, die sie verwenden. Es klingt ziemlich selbsterklärend, aber zu oft passiert das nicht.

Die Personen und Bilder im Design sollten für die Benutzer zugänglich sein. Text und Blöcke sollten in einer Weise kommunizieren, den die Benutzer schätzen.

Verschaffe dir dazu einen tieferen Einblick in deine Analysen, um zu verstehen, wer deine Hauptzielgruppe ist.

  • Sind sie Frauen oder Männer?
  • Jüngere oder ältere Menschen?
  • Leben sie in einem bestimmten Gebiet?

Erstelle ein Design, das die Zielgruppe, mit der du dich verbindest, anspricht, um die Interaktion und Nutzer-Conversions steigern zu könne.

3. Verwende starke Bilder

Landing-Page Design von couleecreative.com

Ein starkes Bild, ein interessantes Foto oder ein ansprechendes Video machen einen starken ersten Eindruck und tragen wesentlich dazu bei, die Nutzer zu begeistern.

Coulee Creative verfolgt einen interessanten Ansatz. Das Design ändert sich nicht, aber die Überschrift ändert sich entsprechend zum Gesichtsausdruck des Mannes im Bild.

Es ist ein Element der Überraschung, das Spaß macht, und sicherlich bist du schon neugierig auf das, was er als nächstes tun wird.

4. Fertige überzeugende Texte

Landing-Page Design von pinestreet.org

Die meisten Zielseiten enthalten mehrere Textbereiche. Jede dieser Ebenen muss überzeugend sein und darauf abzielen, Nutzer zu den gewünschten Maßnahmen zu führen, die sich aus den Zielen deiner Website ergeben.

Die meisten Zielseiten verwenden die folgenden Arten von Layout-Blöcken:

  • Überschrift: Es sollte ein paar Worte sein, die die Aufmerksamkeit der Nutzer erregen.
  • Body-Text: Dies ist deine Hauptbotschaft. Es sollte kurz und direkt sein.
  • Call to action: Oft in Form eines Buttons oder eines Links teilt dies den Benutzern mit, was als nächstes geschehen soll. Was ist der nächste Schritt in diesem Prozess und wie kommst du dorthin? eine klare und unmissverständliche Kommunikation ist wichtig.
  • Fußzeile: Standardinformationen wie Branding, Kontaktinformationen und Social-Media-Links können dazu beitragen, Glaubwürdigkeit zu gewährleisten und wichtige Ressourcen für Benutzer bereitzustellen.

5. Erstelle Keywords über die Navigation

Landing-Page Design von baublebar.com

Mithilfe von Navigationselementen auf deiner Landing-Page können Nutzer erfahren, worum es auf der gesamten Website geht. Stelle dir Navigationselemente als zusätzliche Schlüsselwörter vor, die Benutzerinformationen liefern und eine Richtung vorgeben.

Baublebar macht das auf seiner Puppy Bowl Landingpage ziemlich gut. Das Unternehmen, das vor allem Schmuck für Frauen vertreibt, nutzt die Navigationsleiste, um auf dieser Landing-Page „Haustierflitter“ zu präsentieren.

Weiter unten konzentriert sich die Seite auf Schmuck für Frauen mit Bildern, die Produkte zeigen, die nicht für Hunde sind. Alle diese Navigationshinweise helfen Benutzern, die auf der Website für Haustierprodukte gekommen sind, zu sehen, dass das Hauptgeschäft viel mehr ist.

6. Mache den CTA klar

Landing-Page Design von jonathanpatterson.com

Jeder Nutzer sollte genau wissen, was er tun soll, wenn er auf deine Landingpage gelangt. Klare Handlungsaufforderungen sind unerlässlich. Gehe nicht davon aus, dass Benutzer das tun, was du möchtest.

Gute Handlungsaufforderungen können in Form von Buttons, auszufüllenden Formularen, Benutzeranweisungen (z. B. Scrollen für mehr) und sogar aus Animationen bestehen.

Jonathan Pattersons Portfolio nutzt das Letztere, um Benutzeraktionen zu erstellen – jeder der hell gefärbten Blöcke enthält einen dunklen Hover-Status, der den Benutzern anzeigt, dass jeder Block angeklickt werden kann, um weitere Informationen zu erhalten.

7. Passe Inhalte an, wenn du kannst

Landing-Page Design von trulia.com

Landing-Pages sind von Natur aus so angelegt, dass sie etwas Spezifisches und Besonderes darstellen. Oft haben sie einen Zweck oder ein Ziel, das ein wenig konzentrierter ist als deine Homepage. Passe den Inhalt der Landingpage an, um das Beste aus diesem Konzept zu machen.

Trulia leitet Nutzer zu einer Startseite/Landing-Page weiter, die Geolocation-Tools verwendet, so dass jeder Nutzer von Anfang an spezifische Informationen zu seinem Standort erhält.

Diese einfache Benutzererfahrung sorgt dafür, dass sich die Website benutzerdefiniert anfühlt, und Nutzer werden sich eher mit Inhalten befassen, die sich auf sie beziehen.

8. Füge eindeutiges und relevantes Branding hinzu

Landing-Page Design von nike.com

Ein häufiges Problem bei Landingpages ist, dass sie oft nicht so aussehen oder visuelle Hinweise enthalten, die eine Verbindung zur Hauptwebsite herstellen.

Zielseiten sollten ein klares und relevantes Branding enthalten, damit die Nutzer genau wissen, mit wem sie sich beschäftigen.

Nike macht einen tollen Job mit der Schuhanpassungsseite auf ihrer Website. Es enthält den gleichen Header und das gleiche Logo wie jede andere Seite, aber der Hauptinhalt ist anders – und die Benutzer wissen, dass es wegen des funky Designs am Schuh besonders ist. Es ist kein Bild eines Produkts zum Verkauf; Es ist ein bewegtes Bild mit benutzerdefinierten Konzepten, die Benutzer erstellen können.

Aber die Nutzer werden sich nie fragen, ob sie immer noch mit der Marke Nike interagieren. Es ist immer relevant im Design.

9. Betrachte die Quelle

Landing-Page Design von debt.bills.com

Wenn ein Nutzer auf einen Link von einem anderen Ort im Web klickt und auf einer Landing Page ankommt, erwartet er etwas von dem, was er finden wird.

Die Zielseite sollte so gestaltet sein, dass der Inhalt für diesen Traffic spezifisch ist.

Bills.com verfügt über eine Landing Page mit einem einfachen Formular, mit dem Nutzer herausfinden können, wie sie Schulden konsolidieren und verwalten können. Es gibt kein weiteres Durcheinander auf der Landingpage und die Nutzer werden erst dann andere Informationen sehen, wenn sie den oben gezeigten Vorscreening-Prozess abgeschlossen haben.

Dieses Design stützt sich stark auf die Quelle des Links, um den Nutzern zu sagen, was als nächstes passieren wird.

10. Stelle Hierarchie und Fluss her

Landing-Page Design von lsproductions.com

Eine gute Landing-Page macht die Benutzerfreundlichkeit offensichtlich. Wohin sollen Nutzer schauen und was sollen sie auf der Seite tun?

Das Entwerfen mithilfe von allgemeinen Benutzermodellen und Verhaltensweisen kann einen großen Beitrag zur Etablierung dieses Flusses leisten. Füge Ebenen von Bildern, Branding und Typografie hinzu, um eine klare Hierarchie zu erstellen, und die Benutzer werden sofort wissen, wie sie mit der Seite interagieren können.

Fazit

Ein wichtiger Punkt ist, dass wenn du über eine Landing-Page nachdenkst, dies nicht unbedingt deine Startseite ist. Landing-Pages sind die häufigsten ersten Stops für Website-Besucher. (Du kannst dies herausfinden, indem du deine Website-Analysen untersuchst.)

Einige dieser Top-Landing-Pages könnten auf deine Marketingbemühungen und darauf zurückzuführen sein, wie du den Traffic steigerst. Aber andere Seiten können wegen der darin enthaltenen Inhalte, Links aus anderen Quellen und Suche beliebt sein. Zu wissen, wo dieser Traffic entsteht und wonach Nutzer suchen, ist ein Schlüsselfaktor, wenn es darum geht, Ziele zu setzen und eine Landingpage zu gestalten, die nicht am Ziel vorbeischießt.

Quelle

https://designshack.net/articles/layouts/landing-page-design-tips

Frischer Input für Designer. Jeder Abonnent erhält das kostenlose Bundle aus 50 Photoshop Device-Mockups und 40 Responsive WordPress-Themes.

1x pro Woche. Kein Spam. Jederzeit kündbar.
Jonathan Torke
Jonathan Torke

Auf pixeltuner.de teile ich aktuelle Ressourcen für Webdesigner und -entwickler. Du findest mich auch auf deviantART. PayPal-Kaffeespende.

Eine Antwort auf "10 Design-Tipps für die perfekte Landing-Page"
  • Landingpages sind ein spannendes Thema. Vor allem die Handhabung zwischen deutschsprachigen und englischsprachigen Zielgruppen fällt mir dabei auf. Auch wenn ich gerne etwas anderes sagen würde – meine Seiten konvertierten bisher nicht wie gewünscht. Künftig versuche ichs wohl mal mit vorgefertigten Styles

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Verpasse keine News!

Du erhältst ein kostenloses Bundle aus 50+ WordPress-Themes und PSD Device-Mockups.

1x pro Woche. Jederzeit kündbar.
Anzeige