15 großartige Landingpage-Designs

Das richtige Zielseiten-Design kann eine Website erstellen oder beschädigen - dies ist das erste, was Ihre Besucher sehen werden. Wenn Sie es falsch verstehen, werden die meisten Leute nicht herumhängen.

Zielseiten-Designs sollten das Alleinstellungsmerkmal (USP) für das Produkt oder die Dienstleistung klar vermitteln und sich auf einen Aufruf zum Handeln (Call to Action, CTA) konzentrieren, z. B. den Besucher dazu zu bringen, seine Daten zu registrieren oder einen Kauf zu tätigen. Was auch immer das Ziel ist, es liegt an der Gestaltung der Seite, den Benutzer darauf zu lenken, sei es durch Verwendung von Leerzeichen, kontrastierenden Farben oder expliziteren Richtungshinweisen. (Und mit dem beste Webdesign-Tools zur Hand wird Ihnen dabei helfen.)

Klare, prägnante Kopf- und Unterüberschriften sowie druckvolle, leicht zu scannende Aufzählungszeichen sind an der Tagesordnung. Die Zielseite sollte prominent gekennzeichnet sein, häufig ein Heldenbild enthalten, um das Produkt oder die Dienstleistung auf einen Blick zu kommunizieren, und direkt auf den Punkt geschnitten werden, um zu vermeiden, dass die Aufmerksamkeit der Benutzer nachlässt.



Vor diesem Hintergrund haben wir einige besonders effektive Beispiele für das Design von Zielseiten aus dem gesamten Web zusammengestellt.

Suchen Sie nach mehr Design-Inspiration? Schauen Sie sich unsere Auswahl an beste 404 Fehlerseiten .

01. Winkel2

(Bildnachweis: Angle2)

Winkel2 ist eine ukrainische Agentur für digitales Design mit einem Team, das von ganzem Herzen an die Kraft der Marke glaubt. Anscheinend reizt sie nichts mehr, als einzigartige, maßgeschneiderte Erlebnisse zu schaffen, die 'die DNA Ihrer Marke ausstrahlen', während Sie den UI-Umschlag drücken.

Dieses neue Online-Heim für seine Dienste stützt diesen Anspruch zweifellos und führt nicht nur einige herausragende Arbeiten, sondern auch zwei großartige Effekte ein. Wenn wir uns einigen massiven Montserrat-Schriften öffnen, die in # 2AF8EB getränkt sind - oder für Menschen türkis -, erhalten wir ein typografisches Training, das es wert ist, genossen zu werden. Der Trick wird durchweg zu einem Merkmal und vermittelt das 'eckige' Gefühl mit einer großartigen schrägen Textillusion.

Hierbei werden im Wesentlichen linke und rechte Elemente verwendet, um eine 50/50-Aufteilung in der Mitte des Ansichtsfensters zu bilden. Von hier aus wird eine Reihe von geneigten Textzeilen eingewickeltTags haben CS3-Funktionen von translate3d angewendet und beim Schweben mit TweenMax animiert. Durch Aufbringen von Kontrastfarben auf jede Seite wird eine um 45 Grad gefaltete Ästhetik erzielt, die das Gesamtdesign definiert.

Das Einfügen der lebendigen blauen Akzentfarbe in eine weitgehend schwarz-weiße Palette zeigt auch eine geschmackvolle Ausführung, wobei der weitere Spaß dem Abschnitt 'The Team' der Smiley-Porträts vorbehalten ist. Während Sie zwischen den einzelnen Fotos wechseln, sehen Sie hier einen fabelhaften fragmentierten Filter, der eine Wohltat darstellt.

02. MADCLEM

Landingpage-Design - MADCLEM

Die Seite von Clément Chenebault macht Spaß und ist flüssig

Seit den Anfängen des Webs haben Entwickler und Designer an den äußeren Rändern des Möglichen Druck gemacht und versucht, etwas Neues oder Interessantes zu tun und die Erwartungen an das, was eine Website ist und wie sie funktioniert, zurückzudrängen. Dieses freigeistige Experimentieren ist ein Markenzeichen des seltsamen, wilden Netzes.

Die Portfolio-Site von Clément Chenebault, MADCLEM folgt dieser geschichtsträchtigen Tradition, Grenzen zu überschreiten und ein einfaches Gitter aus bunten Quadraten in eine flüssige, formbare Masse aus flüssigem Klecks zu verwandeln. Die gesamte Site biegt und wölbt sich bei jeder Bewegung, die Sie ausführen, und dehnt sich aus, um kleine Einblicke in Portfolio-Teile zu erhalten, während Sie Ihren Weg durch die gallertartige Masse finden. Die Site ist eine lustige, wellige Insel inmitten eines oft eintönigen Meeres von gleich aussehenden Designer- und Entwicklerportfolios.

03. IBM Plex

Landingpage-Design - IBM Plex

Der Single-Pager für IBMs Plex wurde entwickelt, um die neue Schriftart optimal zur Geltung zu bringen

IBM hat kürzlich eine eigene benutzerdefinierte Schriftart veröffentlicht. IBM Plex ;; Dies ist die erste Aktualisierung der Unternehmensschrift seit 1956, es ist also eine große Sache. Um die Schrift der Welt näher zu bringen, bat IBM Studio XXIX, eine Website zu entwerfen und zu erstellen, um sie zu präsentieren. Der Gedanke hinter dem Design war, Bilder, Animationen und Fotografie zu verwenden, um Plex 'Geschichte zu erzählen und gleichzeitig die Schrift auf aufregende Weise zu präsentieren.

Was großartig ist, ist, dass ein Großteil der Website dazu dient, die Schriftart zu testen und die verschiedenen verfügbaren Stile zu erkunden. Sie können es also wirklich im Kontext sehen, bevor Sie sich entscheiden, es in Projekten zu verwenden. Die Seite ist definitiv eine für Grafikdesigner und erinnert ein wenig an eine Portfolio-Seite. Vor allem, weil Sie trotz der dichten Informationen kontinuierlich durch die verschiedenen Abschnitte scrollen können, während Sie von einer erfinderischen, durch Scrollen ausgelösten Animation begrüßt werden.

04. Cowboy

Landingpage Design - Cowboy

So duplizieren Sie eine Zeile im Illustrator
Reite sie! Auf der Cowboy-Website bleibt Ihre Aufmerksamkeit auf das Wesentliche gerichtet: die Fahrräder

Cowboy ist eine neue Generation von Elektrofahrrädern, die sich an Stadtbewohner in den USA richtet. Infolgedessen musste die Website schick sein, um den Wert eines Produkts zu kommunizieren, das einen Markt revolutionieren soll, der dafür bekannt ist, unattraktive, klobige Fahrräder zu produzieren.

Die von Ueno erstellte Website verwendet kühne Typografie, kräftige Farben und großartige Fotografie. Sie ist sehr gut aufgebaut und bietet Benutzern ein erstklassiges Erlebnis. Das Fahrrad selbst steht im Mittelpunkt und zieht sofort die Augen des Benutzers auf sich.

Die Übergänge und Vergrößerungen der Fahrradfunktionen werden beim Scrollen nach unten subtil gehalten, sodass das Fahrrad zentral bleibt. Der Fokus auf Inhalte und nicht das Überentwickeln der Erfahrung bedeutet auch, dass die Site schnell auf allen Geräten geladen wird und sehr reaktionsschnell ist. Die App für das Fahrrad hat eine eigene Seite und Parallaxen zwischen Funktionen und den angebotenen Leistungsdaten zeigen die Verbundenheit des Produkts und die Parallaxe innerhalb der Grenzen des Geräts auf wundervolle Weise.

05. Schnittstellenliebhaber

Landing Page Design - Interface Lovers

Die Landing Page von Interface Lovers hält die Dinge unkompliziert und sauber

Entwerfen einer Zielseite für eine Website, die ' Schnittstellenliebhaber 'ist keine leichte Aufgabe, aber Timothy Achumba - ein Designer für Facebook - hat es hier geschafft. Die Seite soll Menschen inspirieren und praktische Ratschläge zum Handwerk von geben UI-Design und feiern die einzigartigen Erfahrungen verschiedener Designer.

Das Design legt den Fokus fest auf den Inhalt und verwendet a ausgewogenes Layout inspiriert von Achumbas erster Liebe: Druck. „Das Design für Interface Lovers basiert auf einem einfachen dreispaltigen Raster aus einem Zeitungslayout und ist unkompliziert und sauber“, sagt er. Schöne Porträtfotografie zieht Besucher an und unterstreicht das Interesse der Website an einzelnen Geschichten.

Für die Erstellung der Website nutzte Entwickler Iheanyi Ekechukwu Tachyons, ein funktionales CSS-Framework, das eine detaillierte Kontrolle über das Design ermöglicht. Das Ergebnis ist ein wunderschönes, minimalistisches Design, ohne dass Schnickschnack im Weg steht.

06. Google Fonts

Landingpage-Design - Google Fonts

Google leitet Sie ohne großen Aufwand direkt zu den Schriftarten

Ursprünglich im Jahr 2010 gestartet, werden Google-Schriftarten heute mehr als 15 Milliarden Mal täglich in über 135 Sprachen weltweit im Internet angezeigt. Das Google Fonts Website ist sauber und voll ansprechbar, mit Material Design für sein Raster und Styling.

Im ihr Blogbeitrag Über das Projekt erklärt Designer Yuin Chien: 'Indem wir die Fähigkeit einbauen, mit Skalierungs-, Farb- und Schriftpaarungen zu spielen, laden wir alle ein, Schriften in ihren Projekten zu entdecken und nahtlos zu verwenden.' Und sie hat recht; Die Oberfläche ist einladend und schön. Es ist auch intuitiv und macht Spaß zu erkunden.

Entscheidend ist, dass Sie nicht gezwungen sind, durch die Reifen zu springen, um zu den Schriftarten zu gelangen. Sie befinden sich ganz oben auf der Zielseite und stehen zum Spielen bereit. Sie können direkt in die Textfelder der Seite eingeben, um sie zu testen. Und wenn Sie von der Auswahl überwältigt sind, macht es Google einfach, die Auswahl mit Kontrollkästchen für Schriftkategorien und praktischen Schiebereglern für Anzahl der Stile, Dicke, Neigung und Breite einzugrenzen.

07. MIT Technology Review

Landingpage-Design - MIT Technology Review

MIT Tech Review macht es einfach

So viele Websites geben sich alle Mühe, diese Seitenaufrufe mit ausgefallenen Tricks wiederzugeben. Es ist eine Erleichterung, eine Website zu finden, die die Dinge schön und einfach hält. MITs Technology Review Das Ende des 18. Jahrhunderts erstmals veröffentlichte Buch hat ein langes und stolzes Erbe. Der Standort wurde so zugeschnitten, dass er exzellente Kunst präsentiert und eine Freude beim Lesen bietet.

Die Landing Page ist eine Freude zu sehen und beginnt mit einer kühnen Titelgeschichte, drei sekundären Geschichten und einer Zusammenfassung der Top-Geschichten des Tages mit dem Titel 'The Download'. Auf diese Weise können Besucher schnell und sachlich auf das Wesentliche zugreifen.

Ein großer roter Abonnement-CTA oben rechts zieht ebenfalls sofort Ihre Aufmerksamkeit auf sich und leitet Besucher zu den kostenpflichtigen Website-Optionen, ohne dass sie die verfügbaren kostenlosen Inhalte genießen können.

08. Resn

Landingpage Design - Resn

Der mysteriöse 'Drop' verstößt gegen die meisten Regeln des herkömmlichen Landingpage-Designs

Schauen wir uns nun eine Seite an, die die meisten Regeln für das Design von Zielseiten missachtet, aber trotzdem erfolgreich ist. Niemals in eine Reihe fallen und ein Standard-UI-Muster verwenden, Designagentur Resn hat eine Landingpage rund um 'The Drop' erstellt, ein rätselhaftes, schimmerndes tropfenförmiges Polygon, das als Portal in die Resn-Psyche fungiert.

So entfernen Sie Sonnenlicht vom Gesicht in Photoshop

Klicken und halten Sie die Maus und Sie werden auf verschiedene Weise zu einem Graustufen-Kaleidoskop mit Apfelmotiv. eine Fledermaus mit einem Ouija-Brett, das mit seinen Röntgenlaserstrahlen das Fleisch von Menschen in alten Gemälden entfernt; eine lustige Röhre; ein psychedelischer Yakult, der bizarre Cliparts abgibt; und meine Güte weiß was noch.

Resn hat gegen viele der üblichen Regeln zum Erstellen einer Landing Page verstoßen, aber das Ergebnis ist überzeugend genug, dass Sie wahrscheinlich weiter herumgraben, wenn so etwas auf Ihrem Boot schwimmt, und keine Zeit verschwenden, wenn nicht. 'The Drop' ist wahrscheinlich ein perfekter Filter, um die Arten von Kunden anzulocken, mit denen das Unternehmen zusammenarbeiten möchte, und es ist eine wirklich großartige Zielseite, die Sie wahrscheinlich nie vergessen werden.

09. Präsentieren & Korrigieren

Landingpage-Design - Präsentieren & Korrigieren

Jedes Panel ist eine Versuchung

Mit seinem übersichtlichen Gitter aus herrlichen Bildern bietet das Präsentieren & Korrigieren Die Website richtet sich an das, was sicherlich ihr Kernpublikum ist: Menschen, die Schreibwaren fetischisieren.

Ein Millimeterpapierhintergrund, eine hellgraue Färbung und ein klassischer Schriftkanal sorgen für eine Schulheftstimmung und jedes Panel zeigt ein wunderschönes Produkt. Der Lagerbestand ist sorgfältig in Kategorien unterteilt, die in der oberen Menüleiste angezeigt werden, und es ist verlockend, durch das gesamte Los zu klicken, beginnend mit dem faszinierend betitelten Abschnitt 'Ephemera'.

10. Monotyp

Landing Page Design - Monotypie

Wie das Unternehmen selbst handelt auch die Zielseite von Monotype von der Kraft der Typografie

'Wir sind das Unternehmen hinter Typ', heißt es Die Landingpage von Monotype und sein zurückhaltendes und dennoch intelligentes Design geht Hand in Hand mit dieser selbstbewussten Aussage. Die gesamte linke Hälfte des Zielseiten-Designs ist dem Unternehmensleitbild gewidmet, und es gibt eine clevere Wendung: Über ein Dropdown-Menü können Sie den Text in einer Reihe von Schriftarten sowie in verschiedenen Gewichten und Stilen anzeigen, um einen Eindruck davon zu bekommen Monotype tut es.

Auf der rechten Seite der Seite befindet sich ein Link zur Monotype-Bibliothek, zur Unternehmenslizenz und zu Unternehmensnachrichten mit großen M-Symbolen in verschiedenen Schriftarten, die wie Drop Caps wirken. Eine gedämpfte Sepia-Farbpalette hält den Fokus fest auf den Schriftarten.

11. LS Productions

Landingpage-Design - LS Productions

Der Shotcut kann der Timeline kein Video hinzufügen
LS Productions lockt Sie mit einer Kavallerie wunderschöner schottischer Schauplätze

LS Productions - eine in Schottland ansässige Produktionsfirma für Standbilder und Bewegungsdienste - weiß, was ihr größtes Kapital ist, und das wird Ihnen präsentiert, wenn Sie zu ihrem Standort gehen. Ein fensterfüllendes Looping-Video zeigt eine Auswahl der Arbeiten des Unternehmens an wunderschönen Orten. Scrollen Sie nach unten und Sie werden die drei Hauptdienste kennenlernen: Bewegung, Standbilder und Standorte.

Zu diesem Zeitpunkt hat die Zielseite bereits ihre Arbeit erledigt. Alles unten - der wunderschöne Ort der Woche, der Bereich „Meet the Team“ - ist nur eine Schaufensterdekoration. Wenn Sie LS Productions einstellen möchten, sind Sie bereits zu einer der Hauptserviceseiten übergegangen, auf denen Sie eine Fülle relevanter, gut präsentierter Informationen finden, die Sie von der Eignung des Unternehmens überzeugen.

12. O'Neill

Landingpage-Design - O.

O'Neills fotolastige Seite verkauft den Surf- und Schneetraum perfekt

Amerikanische Lifestyle-Marke O'Neill konzentriert sich hauptsächlich auf zwei Dinge: Surfen und Schnee. Und die US-Site macht dies mit einer bildgesteuerten Landingpage deutlich, auf der Sie Ihre Bekleidungssortimente und Sportausrüstung durch atemberaubende Fotografie von großen Wellen und schneebedeckten Bergen verkaufen können.

Eine Reihe von Dropdown-Links oben auf der Zielseite kann Sie direkt zu dem führen, was Sie möchten, wenn Sie wissen, wonach Sie suchen. Darunter verführt Sie die Zielseite mit mehreren großen, bildgesteuerten Seiten Abschnittslinks und Instagram-Galerien. Es ist alles genug, um Sie zum Strand - oder zur Spitze des nächsten Berges - zu bringen, aber nicht, bevor Sie sich zuerst mit O'Neill-Ausrüstung eindecken.

13. Hipstamatic

Landing Page Design - Hipstamatic

Die Landingpage von Hipstamatic zeigt, was die App zu bieten hat

Für Retro analoge Fotografie App Hipstamatic Es geht darum, die coolen Funktionen sowie das Erscheinungsbild und die intuitive Navigation der App auf eine möglichst ansprechende Weise zu demonstrieren, um Benutzer anzulocken.

Oben auf der Seite zeigt ein scrollender Galeriestreifen die 'Hipstamatic-Ästhetik' in der Praxis, während ein riesiges iPhone die neueste Version der App mit dem ClassicMode der alten Schule und dem neuen ProMode mit aktuelleren Funktionen zeigt . Darunter fasst eine neue Werbebotschaft zusammen, worum es bei Hipstamatic jetzt geht: 'Machen Sie schöne Fotografie', mit einem großen CTA, der Sie zum App Store führt.

14. Apple

Apfel

Die Zielseite von Apple konzentriert sich auf wunderschön aufgenommene Produktfotografien

Es ist keine Überraschung, dass die unbestrittenen Meister des Industriedesigns eine anständige Website und die mühelose Einfachheit von zusammenschlagen können Apple.com hat sogar einen D & AD Black Pencil gewonnen.

Die Homepage schneidet durch die umfangreiche Produktpalette des Unternehmens und zeigt nur ein aktuelles Produkt. Neben der einfachen Navigationsleiste oben ist es einfach wunderschön aufgenommene Produktfotografie, der Produktname und sein Slogan. Hier gibt es nicht einmal einen CTA - Apple ging vernünftigerweise davon aus, dass sein technisch versiertes Publikum weiß, dass das Bild und der Text mit weiteren Informationen verlinkt sind. Es ist eine wahre Meisterklasse in Zurückhaltung.

15. Pinterest

Landingpage-Design: Pinterest

Pinterest ist so bekannt, dass seine Zielseite nicht hart arbeiten muss, um sich selbst zu verkaufen

Pinterest weiß, was es will, und ist nicht in der Stimmung, um den heißen Brei herumzureden: Es ist Anmeldung oder nichts. Das beliebte Online-Sammelalbum ist von seiner Marke und seinem aufkeimenden Ruf überzeugt genug, um sich nicht zu sehr um den Verkauf zu sorgen oder den Benutzern die Möglichkeit zu geben, in einigen Boards zu stöbern und sich ablenken zu lassen.

Hinter der Anmeldekarte rollt eines von Pinterest 'Sammelalben mit herrlicher Fotografie verlockend nach oben und gibt einen Vorgeschmack auf das, was den Nutzern geboten wird. Dies ist eine abgespeckte und verschönerte Version dessen, was Sie tatsächlich erhalten - keine wortreichen Beschreibungen, Anzeigen oder Repin-Informationen stören diese Version der Homepage.

CSS generieren

CSS generieren (26. September) ist eine Londoner Konferenz, die sich allen CSS-Themen widmet - buchen Sie jetzt Ihr Ticket! Verwenden Sie den Code WEBDESIGNER2 für 10% Rabatt auf Tickets(Bildnachweis: Getty / Future)

Zum Thema passende Artikel: