Das Design einer Homepage (oder Homepage) ist das visuelle und strukturelle Design der ersten Seite einer Website, die Besucher sehen, wenn sie die Website zum ersten Mal besuchen. Die Homepage spielt eine Schlüsselrolle bei der Schaffung des ersten Eindrucks der Website und hilft Besuchern, die benötigten Informationen zu finden oder weiter durch die Ressource zu navigieren.
1. Shopify-Homepage-Design
Wie viele der anderen Landingpages in diesem Beitrag auch die Beispiel-Landingpage Shopify macht es einfach. Beispielsweise besteht die benutzerorientierte Überschrift nur aus wenigen Wörtern und die Seite basiert auf einfachen Aufzählungszeichen anstelle von Absätzen, um die Details und Vorteile der Testversion zu vermitteln. Es müssen nur wenige Felder ausgefüllt werden, bevor Sie beginnen. All dies erleichtert Ihnen den Online-Verkauf mit Ihrem Tool.
2. Muzzle-Homepage-Design
Landingpages helfen Benutzern bei der Entscheidung, ob Ihr Produkt oder Ihre Dienstleistung ihre wertvolle Zeit und Energie wert ist. Gibt es einen besseren Weg, Ihr Wertversprechen klar und direkt zu kommunizieren, als Ihre Besucher genau dem Problem zuzuordnen, das Ihre App löst?
Instagram-Kommentare bekommen mehr
MaulkorbEine Mac-App, die Bildschirmbenachrichtigungen stummschaltet, deckt dies vollständig ab zeigen, ohne es zu sagen Mentalität auf ihrer minimalen Landingpage. Besucher dieser Seite werden von einer Flut unangenehmer Benachrichtigungen in der oberen linken Ecke des Bildschirms begrüßt. Die Animation macht nicht nur Spaß, sondern vermittelt auch ohne lange Beschreibungen überzeugend den Nutzen der Anwendung.
3. Design der TransferWise-Homepage
TransferWise ermöglicht Ihnen das Senden und Empfangen von Geld in mehreren Währungen. Auf der unten gezeigten Landingpage ist jede einzelne Aktion aufgeschlüsselt, sodass Sie nicht durch Optionen abgelenkt werden, die nicht auf Sie zutreffen.
Wenn Sie Geld senden möchten, können Sie das Überweisungsformular ausfüllen. Um Geld zu erhalten, gehen Sie einfach auf die mittlere Registerkarte und um sich mit Ihrer Debitkarte bei TransferWise anzumelden, gehen Sie auf die Registerkarte ganz rechts.
Jede Registerkarte auf dieser Landingpage erstellt eine eigene Aufruf zum Handeln Je nachdem, wofür Sie sich anmelden – jeweils mit einem leuchtend grünen Rahmen, um Ihren nächsten Schritt nach drei möglichen Startpunkten hervorzuheben.
4. Airbnb-Homepage-Design
Um Besucher in Gastgeber zu verwandeln, Airbnb bietet eine verlockende Personalisierung: eine grobe Schätzung des durchschnittlichen Verdienstes basierend auf Ihrem Standort. Um eine noch persönlichere Einschätzung zu erhalten, können Sie in die Felder zusätzliche Informationen zu Ihrer möglichen Platzierung eintragen.
Wenn Sie bereits eine Seite besucht haben, von der Sie überzeugt sind, erleichtert ein klarer Call-to-Action oben auf der Seite eine sofortige Konvertierung.
5.Teambit
schrullig ist normalerweise nicht das erste Wort, das einem in den Sinn kommt, wenn man an HR-Software denkt, aber die visuelle Landingpage von Teambit ist genau das. Ein einfaches Formular mit einem Feld wird von einem bezaubernden Büro voller Tierfiguren begleitet – und zwar alle sehr Gerne mit Teambit, wenn Sie interessiert sind. Neben jedem Informationsabschnitt der Landingpage erscheint ein Cartoon-Tier, das Besucher dazu verleitet, nach unten zu scrollen, um mehr zu erfahren. Homepage-Design
Landing Page Teambit ist ein großartiger Beweis dafür, dass Sie kein „lustiges“ Produkt oder eine „lustige“ Dienstleistung haben müssen, um eine lustige Landingpage zu erstellen.
6. Wistia-Homepage-Design
Zunächst einmal ist dies die Landingpage Wistia für ihr kostenloses Wistia-Konto. Sofort fällt Ihnen das Formular mit einem Feld zum Erstellen eines Kontos auf – der blaue Hintergrund mit minimalistischem Design bildet einen schönen Kontrast zum hellen weißen Formularfeld.
Die Länge des Formularfelds in Kombination mit der prominenten Platzierung beseitigt nahezu jede Reibung beim Erstellen eines Kontos. Wenn Sie jedoch Zweifel haben, können Sie jederzeit nach unten scrollen, um die häufig gestellten Fragen zu lesen. Durch die Trennung der beiden durch einen starken Farbkontrast erleichtert Wistia den Konvertierungsprozess erheblich.
7. Webflow. Homepage-Design
Webfluss, ein Designtool für Webentwickler, packt viele Informationen in ein GIF und drei Formularfelder. Es wäre schön, das gesamte Registrierungsformular in einer Zeile zu haben – dadurch wird die Seite nicht nur kürzer, sondern das Ausfüllen aller Felder von links nach rechts zeigt den Benutzern auch, wie nahe sie daran sind, auf die vierte blaue Schaltfläche zu klicken und kostenlos loszulegen.
Das animierte GIF unter dem Formular wird im selben Frame auf der Website angezeigt, sodass Benutzer sehen können, wie das Produkt funktioniert. и Registrieren Sie sich, ohne zu scrollen oder eine neue Seite aufzurufen.
Design der E-Book-Homepage
8. Nauto-Homepage-Design
Nauto, eine Datenplattform für selbstfahrende Autos, trägt dazu bei, autonomes Fahren für Unternehmen, die Flotten verwalten, sicherer zu machen. Selbstverständlich benötigen seine Kunden alle Informationen, um auf dieser Plattform verkaufen zu können. Nauto macht es supereinfach E-Book, dessen Zielseite Ihnen ein kurzes Kontaktformular und Vorschaustatistiken bietet, um zu beweisen, warum diese Ressource so wichtig ist.
Der grüne „Jetzt herunterladen“-Button ist möglicherweise sogar absichtlich angebracht (grün bedeutet schließlich „Los“).
Scrollen Sie nach unten und Sie sehen einen weiteren CTA „Get eBook“, um Benutzer daran zu erinnern, was sie erwartet. Sie sehen außerdem drei verblüffende Statistiken zu Autounfällen, um die Benutzer zu ermutigen, mehr zu erfahren. Schauen Sie es sich unten an.
9. Industrielles starkes Marketing-Homepage-Design
Diese Landingpage zieht mich sofort mit ihrer unwiderstehlichen, prägnanten Überschrift in ihren Bann: „Don’t Make Me Zoom.“ Das spiegelt direkt das allgemeine Erlebnis wider, das die meisten von uns haben, wenn wir durch unsere Telefone oder Tablets scrollen – und es ist auch ein wenig frech.
Aber das ist nicht das Einzige, was mein Interesse an dieser Landingpage geweckt hat. Beachten Sie, dass die rote Farbe strategisch oben und unten im Formular platziert ist und Sie so noch näher an das Conversion-Ereignis heranführt.
Darüber hinaus ist dieses Design ein Meta-Design: Es sieht großartig aus und passt hervorragend dazu mobile Geräte. Bedenken Sie, dass viele Besucher über ihre Smartphones oder Tablets auf Ihre Zielseiten zugreifen Gestaltung Ihrer Website nicht zu ihnen passt, geben sie möglicherweise auf und verlassen Ihre Seite.
Spezialisten für Industrial Strength Marketing haben das Feld erobert Schriftarten und so groß, dass Besucher beispielsweise nicht zoomen müssen, um den Inhalt zu lesen und mit ihm zu interagieren.
10. Velaro Live-Chat
Manchmal machen die kleinsten Details den größten Unterschied. Sie sind zum Beispiel diejenigen, die die Landingpage erstellen Velaro Live-Chat toll.
Das kleine PDF-Symbol über dem Artikelbild hilft dabei, das Format des Downloads zu bestimmen. Ein Pfeil vor der Unterüberschrift hilft dabei, den wichtigen Text, den Besucher lesen möchten, noch besser hervorzuheben. Wie IMPACT verfügen sie auch über ein automatisch aktiviertes Kontrollkästchen Abonnements Melden Sie sich in ihrem Formular zum Newsletter an. Wenn Sie dies in ein zusätzliches Kontrollkästchen umwandeln, können Sie Ihre Abonnentenzahl hervorragend erhöhen. All diese kleinen, scheinbar unbedeutenden Details tragen zu einem soliden, erstaunlichen Landingpage-Design bei. Homepage-Design
11. IMPACT Branding und Design / Homepage-Design
Startseite AUSWIRKUNG sind seit langem eine Inspirationsquelle für Designer. Ich liebe das einfache Seitenlayout, vom großen Titeltext und dem detaillierten Bild über die Kontur, die die Form umgibt, bis hin zu den Farben und Schriftarten, die sehr angenehm für das Auge sind.
Auch das kostenlose Handbuch, das IMPACT hier zum Download anbietet, markiert den Download selbst nicht in der blauen Schaltfläche, über die Sie das ausgefüllte Formular absenden können. IMPACT lädt Sie vielmehr dazu ein, „mehr Conversions zu generieren“, indem Sie sich auf das konzentrieren, was Sie durch das Lesen des Leitfadens gewinnen können.
Landingpages, um mehr zu erfahren
12. Aufspringen
Es überrascht nicht, das Unbounce steht ganz oben auf dieser Liste – sie haben wirklich das Buch über die Erstellung hochkonvertierender Landingpages geschrieben. Obwohl es viele tolle Dinge an dieser Landingpage gibt, gefallen mir zwei wirklich gut: 1) die Verwendung einer Chatbox anstelle eines klassischen Formulars und 2) die detaillierten – aber gut verpackten – Informationen unter dem Formular/der Startseite Seitendesign
Die erste Möglichkeit hilft, die Aufmerksamkeit auf den Zweck der Seite zu lenken – das Ausfüllen eines Formulars – und zwar auf eine Art und Weise, die unaufdringlich ist und sich nicht wie eine lästige Pflicht anfühlt. Die zweite Möglichkeit gibt dieser Seite einen SEO-Boost (Suchmaschinen haben mehr Inhalte zum Crawlen) und nimmt den Leuten die Angst, mehr über einen Inhalt zu wissen, bevor sie ihre Informationen übermitteln, ohne die Leute vom Chat-Fenster abzulenken.
13. Bills.com. Homepage-Design
Bei Landingpages handelt es sich oft um statische Seiten auf Ihrer Website. Aber mit den richtigen Tools können Sie sie interaktiv und personalisiert gestalten.
Nehmen Sie das Beispiel unten mit Bills.com. Um herauszufinden, ob Sie von der Beratung profitieren würden, beantworten Sie drei Fragen, bevor Ihnen das Formular angezeigt wird. Es beginnt damit:
Dann beantworten Sie zwei weitere Fragen wie die folgende:
Und hier ist das endgültige Landingpage-Formular, in das Sie Ihre Informationen eingeben:
Ich bin mir nicht sicher, wie der Algorithmus funktioniert (oder ob es überhaupt einen gibt), aber während ich ihn ausfüllte, hatte ich einige Bedenken nicht Qualifikationen. Nachdem ich herausgefunden hatte, was ich getan habe, war ich gespannt darauf, das Formular auszufüllen, was sicher die meisten Leute tun, die Schulden haben und dieses Tool nutzen. Indem Bills.com dieses Angebot exklusiver macht, bevor das Formular auf der Landingpage erscheint, wird Bills.com bestimmt einen deutlichen Erfolg erzielen erhöhte Conversion.
14. Trulia-Homepage-Design
Trulia hat mit seiner Landingpage etwas ganz Ähnliches wie Bills.com gemacht. Es beginnt mit einem einfachen Formular, in dem nach „Adresse“ gefragt wird (was weniger gruselig klingt als „Ihre Adresse“, obwohl es genau das bedeutet). Unter diesem einfachen Formularfeld befindet sich eine leuchtend orangefarbene Schaltfläche, die einen guten Kontrast zum Zeichenbild hinter dem Formular bildet und betont, dass der Kostenvoranschlag auf Ihr Zuhause zugeschnitten ist.
Natürlich reicht die Adresse allein nicht aus, um den Wert des Hauses abzuschätzen. Es bezeichnet lediglich die Umgebung des Hauses. Deshalb finden Sie auf der nächsten Seite weitere Fragen zum Objekt selbst, etwa zur Anzahl der Betten und Bäder. Unten sehen Sie eine Kopie von „Sagen Sie uns, wohin Sie den Bericht senden sollen“ – mit dem Haftungsausschluss, dass Sie mit der Eingabe dieser Informationen der Kontaktaufnahme mit dem Immobilienmakler zustimmen. Dies ist ein großartiges Beispiel dafür, wie ein Unternehmen seine Besucher von Anfang an schätzt und gleichzeitig die Erwartungen der Besucher an das, was als Ergebnis passieren wird, festlegt.
15. Landbot-Homepage-Design
Landbot, ein Dienst, der Chatbot-basierte Landingpages erstellt, stellt sein eigenes Produkt in den Mittelpunkt seiner chatbasierten Landingpage. Besucher werden von einem freundlichen Bot – komplett mit Emojis und GIFs – begrüßt, der sie dazu ermutigt, Informationen in einem Konversationsformat statt in der traditionellen Form bereitzustellen.
16. Webprofits
Als kleinen Kontrast: Wie wäre es mit langen Landingpages? Mit ein paar Tricks können Sie selbst die längste Landingpage kurz aussehen lassen. Die Webprofits-Landingpage unten zeigt, wie das geht. Homepage-Design
Oben rechts gibt es eine auffällige CTA-Schaltfläche, um mehr zu erfahren – mit gutem Kontrast im Hintergrund, um ihn hervorzuheben, und einem Abwärtspfeil, der zum Scrollen anregt. Indem sie das Formularfeld nicht im Vordergrund platzieren, tragen sie dazu bei, Reibungsverluste zu reduzieren und Besuchern die Möglichkeit zu geben, mehr zu erfahren, bevor ihnen eine Konvertierungsoption angezeigt wird.
Sie ermöglichen es Ihnen auch zu verstehen, was wirklich ist Marken Webprofite . Der Rest der Seite enthält Einzelheiten darüber, was Sie erhalten, wenn Sie Ihre Informationen übermitteln. Darüber hinaus enthält es strategische CTAs, die Ihnen helfen, zum Ausfüllen des Formulars zurück nach oben zu navigieren, z. B. „Lass uns reden“.
17. H. BLOOM
Manchmal muss man einfach innehalten und eine Landingpage bewundern, weil sie so schön ist. Bei Verwendung eines hochauflösenden Fotos und viel Leerraum auf der Landingpage H. BLOOM schön anzusehen.
Abgesehen von ihrer Schönheit verfügt die Seite über einige großartige Konvertierungselemente: ein Overhead-Formular, eine klare und prägnante Beschreibung dessen, was passiert, wenn Sie das Formular ausfüllen, und sogar eine leuchtend orangefarbene Schaltfläche „Senden“. Das Einzige, was wir ändern werden? Kopieren Sie auf die Schaltfläche „Senden“ – Dies ist möglicherweise spezifischer für das angebotene Angebot. Gestaltung der Homepage
18. Conversionlab
Obwohl ich in einem Beitrag über Landingpages keinen Beispielformularbeitrag einfügen würde, ist diese Website etwas Besonderes. Startseite ist die gesamte Website – die Navigationslinks führen Sie einfach zu den untenstehenden Informationen. Homepage-Design
Wenn Sie auf „Hilfe zu Landing Pages anfordern“ klicken, wird die gesamte Website verschoben, um Platz für das Formular zu schaffen. So sieht es aus, bevor Sie klicken:
Und wenn Sie auf diesen CTA klicken, sehen Sie sich an, wie das Formular aussieht:
Mir gefällt, dass Sie die Seite nicht verlassen müssen, um das Formular auszufüllen, aber das Formular wird für gelegentliche Website-Besucher nicht aufdringlich sein.
Ideen/Homepage-Design
Eine gut optimierte Homepage kann Kunden in Leads verwandeln, indem sie Informationen erfasst, die Ihnen helfen, Ihre Besucher besser zu verstehen, zu vermarkten und zu begeistern. Da Landingpages für Conversions von entscheidender Bedeutung sind, ist es wichtig, sicherzustellen, dass sie gut geplant, gestaltet und ausgeführt werden. Hier sind einige Dinge, die Sie bei der Erstellung beachten sollten gezielt Seiten: Attraktive Ästhetik: Nur die Farbe Ihrer Landingpage und eine saubere Benutzeroberfläche können helfen. Besucher möchten mehr über Ihre Produkte erfahren und Beweise für den Wert sehen, den Sie bieten. Werfen Sie einen Blick auf Platz 10 unserer Liste, Inbound Emotion, für ein großartiges Beispiel einer großartigen Webseite.
Weniger ist mehr: Lassen Sie den Satz oder die Bilder den größten Teil für sich sprechen, aber achten Sie darauf, alle beschreibenden Überschriften und unterstützenden Texte einzuschließen, um Ihre Zielseite klar und überzeugend zu gestalten. Dies gilt für fast jede Komponente auf der Seite: Leerraum, einfache Kopie und kürzere Formulare.
Homepage-Design
Halten Sie Besucher auf der Seite: Durch das Entfernen der Hauptnavigation oder aller störenden Backlinks ist es weniger wahrscheinlich, dass es zu Reibungsverlusten bei der Lead-Generierung kommt, die dazu führen könnten, dass Besucher Ihre Seite verlassen.
Teilen in sozialen Netzwerken. Eine einfache Möglichkeit, Besucher auf Ihre Zielseite zu locken, ist die Verwendung von Teilen-Buttonssoziale Netzwerke, damit sie Ihre Inhalte an ihre Social-Media-Follower verteilen können. Schließlich stehen die Kunden im Mittelpunkt Ihres Marketing-Schwungrades.
A/B-Tests: Zielseiten sind wichtig, um richtig zu funktionieren, und da die Verbraucherpsychologie manchmal überraschend sein kann, ist es immer am besten, mit verschiedenen Versionen Ihrer Seiten zu experimentieren, um herauszufinden, welche die höchste Conversion-Rate (CVR) aufweist. Überprüfen Sie die Positionierung des Angebots, die Art der CTAs oder sogar das Farbschema.
Call-to-Action: CTA, wo das Wesentliche auf der Landingpage ist, oder der Wendepunkt, wo die Aussicht auf Kontaktaufnahme besteht. CTAs können Besucher zum Abonnieren, Herunterladen, Ausfüllen eines Formulars und Teilen auffordern soziale Netzwerke usw., aber im Allgemeinen sind CTAs notwendig, um Ihr Publikum aktiver mit Ihrem Angebot anzusprechen. Um Leads zu generieren, müssen CTAs mutig und ansprechend sein, aber vor allem müssen sie effektiv einen Mehrwert vermitteln.
Hinterlassen Sie einen Kommentar