Startseite » Web-Design » Schöne Landing Pages Tipps und Beispiele

    Schöne Landing Pages Tipps und Beispiele

    Hunderte witzige Artikel wurden rund um das Thema Landing Pages geschrieben. Wir alle kennen die grundlegenden Fakten - dass dies die Seiten sind, auf die ein Besucher durch Klicken auf eine Bannerwerbung oder einen Werbelink gelangt, und dass diese eine entscheidende Marketingrolle spielen, indem sie Leads in Kunden für das Unternehmen konvertieren. Wenn Sie jedoch selbst eine Landing Page entwerfen, scheint die Angelegenheit viel heikler zu sein, als Sie es nach der Dokumentation der Anleitungen erwartet hätten. Aus diesem Grund haben wir uns heute dazu entschlossen, eine Sammlung aktueller Landing-Page-Beispiele zur Inspiration zu teilen.

    Laut einer ziemlich wissenschaftlichen Klassifizierung, die Sie in Wikipedia finden, werden Landing-Pages in zwei Hauptkategorien unterteilt: Referenz- und Transaktionskategorie. Wenn sie als Referenz bezeichnet werden sollen, müssen Seiten Informationen anzeigen, die für den Besucher ansprechend und relevant sind (Text, Multimedia). "Transaktionsbezogene" Zielseiten zielen auf einen sofortigen Verkauf oder zumindest auf das Erzielen starker Umsatz-Leads ab.

    Wie Sie wahrscheinlich mit mir übereinstimmen werden, erfüllen alle Landing-Pages beide Kriterien: Sie informieren den Besucher über das Angebot und veranlassen seine Handlungen. Andernfalls würden wir keine Handlungsaufforderungen für absolut jede Landing Page benötigen, würden wir?

    Was vor dem Start einer Landing Page im WWW klar sein muss, ist die Art der gewünschten Besucheraktion. Ist die Erhöhung der Newsletter-Anmeldungen Ihr Ziel? Dann entwerfen Sie ein CTA mit der Nachricht "Jetzt für unseren Newsletter anmelden". Möchten Sie Probekäufe von Besuchern erhalten? Sag es so. Grundsätzlich gilt, dass das Ziel Ihrer Landing Page so klar und verlockend wie möglich ist.

    Tipps zum Entwerfen einer Zielseite

    Einige schnelle Tipps zum Erstellen einer Landing Page:

    1. Verwenden Sie das AIDA-Prinzip

    Dies ist eine Kette von Ereignissen, die wir erreichen möchten, sobald ein Lead die Plattform erreicht, auf der das beworbene Produkt oder der angebotene Service angezeigt wird. Die Schritte sind hauptsächlich:

    1. Bewusstsein - Aufmerksamkeit vom Besucher erregen
    2. Interesse - was durch die Hervorhebung der Vorteile für den Kunden geweckt werden kann
    3. Verlangen - bei den Kunden die Idee herbeiführen, dass sie wollen das Produkt oder die Dienstleistung
    4. Aktion - Kunden, die den Kaufprozess durchführen

    2. Nicht zu viele Ablenkungen; lasse einen Ausweg

    Die Idee ist einfach. Wenn die Landing Page mit Ausnahme der CTA-Schaltfläche praktisch keine Navigationsoption hat, erzwingen Besucher das Verlassen. Denken Sie nicht, wenn Sie keine Navigation anbieten, werden sie keinen Weg finden, um zu gehen - sie werden vielleicht sogar den Browser herunterfahren. Und diese Besucher werden es tun nicht Komm zurück.

    3. Lassen Sie den Blinktest bestehen

    In der Regel muss eine Landing Page die Aufmerksamkeit des Besuchers in den ersten 3 Sekunden des Eintritts auf sich ziehen. Wenn der Gast blinkt und nicht klar sieht, was er auf der Seite finden soll oder nicht interessiert, was er gesehen hat, wird er höchstwahrscheinlich mit leeren Händen davonhüpfen.

    4. Erstellen Sie keine falschen Erwartungen

    Die Zielseite muss mit den Hinweisen der ursprünglichen Anzeige übereinstimmen oder umgekehrt. Besucher müssen auf der Landingpage das finden, was ihnen in der angekündigten Anzeige zuerst versprochen wurde.

    Wie versprochen, lassen Sie uns einige schön gestaltete und effektive Landing-Pages von B2B und B2C besuchen. Wir werden ihre Stärken und unvermeidlichen Schwächen ausloten. Achten Sie in der folgenden Galerie auf Folgendes: visuelle Kommunikation, Marken- und Vertrauensindikatoren, Wirksamkeit von Inhalten, Handlungsaufforderungen.

    Schaukasten: Schöne Landing Pages

    99Designs

    Dies ist die Version einer Landing Page, die sich an Designer und Studenten richtet. 99Designs hat auch eine Zielseite für die andere Seite: Unternehmen, die Designs benötigen. Was dieses betrifft, ist es in Bezug auf die Bestätigung sehr effektiv (siehe die mutigen Testimonials) und spricht die Sprache des Publikums mit Zahlen und Vertrauensindikatoren (Anzahl der Mitglieder der Community, Geldbetrag). Beachten Sie den leuchtend roten Farbton der einzelnen CTA-Taste. Dies ist in der Regel etwas zu vermeiden, aber in diesem Fall ist sie nicht störend, da sie der Farbe des Logos entspricht.

    123RF

    123RF macht auf dieser Zielseite mit dem Bildschieberegler und den vier Medianfeldern eine klare Aussage über den Zweck. Sie verstehen sofort, was der Service ist und wie Sie ihn nutzen können (Suchen, Registrieren, Pay-As-You-Go, Abonnement kaufen). Der hellgraue Hintergrund ist unauffällig und betont das Wesentliche, das Bild. Was ich persönlich glaube, dass sie sich verbessern können, ist die Liste der Stock-Fotografie-Kategorien. Und der CTA ist für die anklickbaren Kästchen etwas zu subtil.

    Favomatic

    Ich liebe das Design dieser Landingpage. Im Gegensatz dazu gibt es in jedem Abschnitt gute Slogans, die viele Informationen enthalten, ohne dass Sie dazu gezwungen werden, alles zu lesen (die kleine Schrift macht alles). Es hat eine Navigation, aber eine vertikale, durch Scrollen, was die Absprungraten erheblich reduziert.

    BiznessApps

    Starke Handlungsaufforderungen, ein betonter Slogan und eine beeindruckende Liste von Vermerken - dies ist die richtige Kombination für eine Landing Page, und diese Seite hat sie. Außerdem enthält es ein Minimum an Text und verwendet ein Demo-Video, da bekannt ist, dass die Leute lieber einen Kurzfilm sehen als lesen. Das Formular ist ein Element, das sie leicht verbessern können. Normalerweise sollten Sie zuerst geben, bevor Sie erhalten können. Wenn also gegen das Formular "Formular" gesendet werden kann, erhalten die Besucher kostenlose Leckereien. Dann kann der Button "Nachricht senden" etwas wie "Holen Sie sich jetzt Ihr kostenloses Zeug!"

    Brusheezy

    Ein weiterer Beweis weniger ist mehr. Diese Landing Page sieht mit einem einzigen Symbol und einer hervorgehobenen Kopfzeile sehr ordentlich aus. Beachten Sie die beiden Handlungsaufrufe oben und unten - dies ist eine narrensichere Methode, um die Nachricht dauerhaft zu machen, ohne die Seite zu überfüllen. Ein weiterer Gewinner ist die Hervorhebung der Vorteile für die Kunden anstelle der Produktmerkmale.

    JailBreak

    Diese Seite ist vielleicht etwas zu voll, aber es ist eine Tradition von Zielseiten für Apps. Die Entscheidung, die Seite in Segmente zu unterteilen, erleichtert jedoch die Navigation durch alle Elemente. Sie finden alles, wonach Sie suchen: Funktionen, Vorteile, Erfahrungsberichte und sogar eine Garantie für die Rückerstattung, wenn Sie mit dem Ergebnis nicht zufrieden sind. Der letzte ist ziemlich riskant, da er möglicherweise Fragen zur Qualität des Services aufwirft, und es war eine gute Idee, ihn ganz nach unten zu stellen

    Seitenzeilen

    Minimalismus ist hier das Schlüsselkonzept. Mir persönlich gefällt, dass diese Seite Ihnen nicht gleich alles erzählt, sondern Sie zum Entdecken einlädt. Was ich nicht so genießer finde, ist ein Video, das automatisch startet (eine Funktion, die ich generell meide) - selbst wenn Andrew Powers nicht nur geschickt, sondern auch schön ist! Auch die Tatsache, dass es keine unmittelbare CTA gibt, kann für die Website nachteilig sein.

    Pico

    Diese Landingpage ist einfach und dennoch leistungsstark. Das "größer als" rote Zeichen ist Salz und Pfeffer für das Gesamterscheinungsbild. Die Absatzanordnung ähnelt einem Zeitungslayout und ist für die Zwecke des CMS durchaus aufschlussreich. Die CTA-Buttons sind jedoch etwas zu schwach und die Dame in der rechten unteren Ecke verursacht eine leichte Ablenkung. Mit zu viel Überraschung im Gesicht sieht sie so aus, als könnte sie eine geschäftliche Angelegenheit verhandeln?

    Schuhkarton

    Die beschreibenden Zeilen für jeden Abschnitt sind Beispiele für die Verwendung der beschreibenden Sprache. Sie verstehen die Nachricht im Bruchteil einer Sekunde, da Ihre Sichtlinie schnell die erste Zeile durchsucht und den CTA-Button erreicht. Wenn Sie immer noch zögern, gibt es ein Zeugnis, das Ihnen zusammen mit starken Befürwortern helfen kann. Werden Sie nicht einem Unternehmen von Forbes und Tech Crunch vertrauen? Ich würde.

    SquareSpace

    Dies ist eine professionell aussehende Landingpage. Ein kühner Slogan, CTA-Buttons, denen Sie nicht widerstehen können, und eine sehr gute Bestätigung. Dies ist die Kombination zum Erfolg. Ich mag es auch, dass sie ihren Nutzungszusammenhang in die Mitte der Seite stellen, mit einem Screenshot der Art und Weise, wie ihre Seiten aussehen und Infografik-ähnlichen Angaben. Die 3-Element-Struktur der Seite ist ein weiterer wichtiger Punkt.

    Anmerkung des Herausgebers: Dieser Beitrag wird von geschrieben Laura Moisei für Hongkiat.com. Laura hat einen Bachelor-Abschluss in Kommunikationswissenschaft und verbringt die meiste Zeit damit, ihrer Leidenschaft für Design und Schreiben nachzugehen. Sie arbeitet für 123ContactForm, einem Online-Formular- und Umfrage-Builder, mit dem Benutzer schöne Formulare für jede Webseite erstellen können.