Good Mood

Sie erhalten nie eine zweite Chance, einen ersten Eindruck zu machen-deshalb ist Ihre Homepage zweifellos eine der wichtigsten Webseiten auf Ihrer Website.

Für jedes Unternehmen ist die Homepage die virtuelle Haustür. Wenn ein neuer Besucher nicht mag, was sie sehen, ihre Knie-Ruck-Reaktion ist es, die „Zurück“ – Taste zu drücken.

Das stimmt – leider beurteilen viele Leute ein Buch immer noch nach seinem Einband.

Was macht das Homepage-Design einer Website brillant statt langweilig?, Es braucht mehr als nur Aussehen – es muss auch gut funktionieren. Deshalb punkten die brillantesten Homepages auf dieser Liste nicht nur mit Schönheit, sondern auch mit Verstand und Kreativität.

Aber bevor wir in die Beispiele eintauchen, lassen Sie uns einige der Best Practices des Homepage-Designs sezieren.

Alle hier gezeigten Homepage-Designs verwenden eine Kombination der folgenden Elemente.

Nicht jede Seite ist perfekt, aber die besten Homepage-Designs bekommen viele davon richtig.,

Das Design antwortet eindeutig „Wer ich bin,“ „Was ich tue“ und/oder „Was können Sie (der Besucher) hier tun.“

Wenn Sie eine bekannte Marke oder ein Unternehmen (d.h.,, Coca-Cola) Möglicherweise müssen Sie nicht beschreiben, wer Sie sind und was Sie tun.aber die Realität ist, dass die meisten Unternehmen diese Fragen immer noch beantworten müssen, damit jeder Besucher weiß, dass er sich am „richtigen Ort“ befindet.“

Steven Krugg fasst es am besten in seinem meistverkauften Buch zusammen, Lass mich nicht denken: Wenn Besucher nicht innerhalb von Sekunden erkennen können, was Sie tun, bleiben sie nicht lange stehen.

Das Design schwingt mit der Zielgruppe mit.

Eine homepage werden muss, um eng fokussierten — sprechen mit den richtigen Leuten in Ihrer Sprache., Die besten Homepages vermeiden „Corporate Gobbledygook“ und beseitigen den Flaum.

Das Design vermittelt ein überzeugendes Wertversprechen.

Wenn ein Besucher kommt auf Ihre homepage, es Bedürfnisse Sie zu zwingen, stick around. Die Homepage ist der beste Ort, um Ihr Wertversprechen festzuhalten, damit Interessenten auf Ihrer Website bleiben und nicht zu den Mitbewerbern navigieren.

Das Design ist für mehrere Geräte optimiert.,

Alle homepages sind hier gut verwendbar, das heißt, Sie sind leicht zu navigieren und es gibt nicht „Auffällig“ Objekte, die im Weg des browsing, wie flash-Banner, Animationen, pop-ups oder übermäßig komplizierte und unnötige Elemente. Viele sind auch mobil optimiert, was in der heutigen mobilen Welt ein unglaublich wichtiges Must-Have ist.

Das design umfasst calls-to-action (CTAs).

Jede hier aufgeführte Homepage verwendet effektiv primäre und sekundäre Calls-to-Action, um Besucher zum nächsten logischen Schritt zu leiten., Beispiele sind „Kostenlose Testversion“, „Demo planen“, „Jetzt kaufen“ oder “ Erfahren Sie mehr.“

Denken Sie daran, das Ziel der Homepage ist es, Besucher zu zwingen, tiefer in Ihre Website einzudringen und sie weiter in den Trichter zu verschieben. CTAs sagen ihnen, was sie als nächstes tun sollen, damit sie nicht überwältigt oder verloren gehen. Noch wichtiger ist, dass CTAs Ihre Homepage in eine Vertriebs-oder Lead-Generation-Engine verwandeln und nicht nur Broschürenverschleiß.

Das Design ändert sich ständig.

Die besten homepages sind nicht immer statisch. Einige von ihnen ändern sich ständig, um die Bedürfnisse, Probleme und Fragen ihrer Besucher widerzuspiegeln., Einige Homepages ändern sich auch von A / B-Tests oder dynamischen Inhalten.

Das Design ist effektiv.

Eine gut gestaltete Seite ist wichtig, um Vertrauen zu schaffen, die Kommunikation Wert, und die Navigation der Besucher zum nächsten Schritt. Daher verwenden diese Homepages effektiv Layout, CTA-Platzierung, Leerzeichen, Farben, Schriftarten und andere unterstützende Elemente.

Jetzt machen Sie sich bereit, über ausgezeichnete Homepage-Design durch die folgenden 23 realen Beispiele zu lernen.,

Dropbox (Business)

4-Flüsse-Räucherei

Cobb Pediatric Therapy Services

Melyssa Griffin

Jill Konrath

Evernote

Telerik by Progress

eWedding

Basecamp

charity: Wasser

TechValidate

Chipotle

Medium

Digiday

ART Snacks

Ahrefs

A24-Filme

Ellevest

HubSpot

FreshBooks

ANSICHT der GESAMTEN HOMEPAGE

Warum Es ist Genial

• Es ist einfach zu konsumieren., Es wird viel darüber diskutiert, ob kurze oder lange Homepages besser funktionieren. Wenn Sie sich für letzteres entscheiden, müssen Sie das Scrollen und Lesen vereinfachen-und genau das tut diese Site. Es wirkt fast wie eine Geschichte.
• Es gibt große Verwendung von Kontrast und Positionierung mit den primären Calls-to-action – es ist klar, was das Unternehmen will, dass Sie auf konvertieren, wenn Sie ankommen.
• Die Kopie, die in den Handlungsaufrufen „Get Started for Free“ verwendet wird, ist sehr überzeugend.
• FreshBooks verwendet Kundenreferenzen auf der Homepage, um reale Geschichten darüber zu erzählen, warum das Produkt verwendet wird.,
• Die Unterüberschrift ist auch großartig: „Schließen Sie sich über 10 Millionen Kleinunternehmern mit FreshBooks an.“FreshBooks setzt fachmännisch soziale Beweise ein-10 Millionen sind eine große Zahl -, um seine Zielgruppe zu zwingen, sich ihren Kollegen anzuschließen und das Tool auszuprobieren.

Airbnb

Gesamte Homepage anzeigen

Warum es brillant ist

• Es enthält das Suchformular für Ziel und Datum, nach dem die meisten Besucher suchen, und führt die Besucher direkt zum logischen nächsten Schritt.,
• Das Suchformular ist „smart“, was bedeutet, dass es die letzte Suche des Benutzers automatisch ausfüllt, wenn er angemeldet ist.
• Der primäre Aufruf zur Aktion („Suche“) steht im Kontrast zum Hintergrund und fällt auf; Der sekundäre Aufruf zur Aktion für Hosts ist jedoch auch über der Falte sichtbar.
• Es bietet Vorschläge für Ausflüge und Kurzurlaube Airbnb-Benutzer können auf derselben Website wie ihre Unterkünfte buchen, um die Besucher für die Buchung ihrer Reise auf der Website zu begeistern. Es zeigt auch, welche dieser Angebote bei anderen Benutzern am beliebtesten sind.,

Pixelgrade

Warum Es ist Genial

• – Sie wissen auf Anhieb, was Sie alles über: WordPress-Themes. Der große Titel, gefolgt von einem beschreibenden Untertitel, lässt die Besucher wissen, was sie erwartet.
• Das Design ist einfach und die Farbkombination macht einen tollen Job, um den Aufruf zum Handeln hervorzuheben.
• Die rechte Seite hilft, einen Blick darauf zu werfen, wie ihre WordPress-Themes aussehen, ohne tiefer scrollen oder graben zu müssen.,

Gesamte Homepage anzeigen

Warum es brillant ist

• Es ist ein super einfaches Design mit einer starken Schlagzeile und Unterüberschrift ohne Jargon.
• Die Homepage vermittelt eine sichere, aber lockere Atmosphäre, die für ein Produkt wichtig ist, das Finanzinformationen verarbeitet.
• Es enthält auch eine einfache, direkte und überzeugende Call-to-Action-Kopie: „Melden Sie sich kostenlos an.“Das CTA-Design ist auch brillant – das Secured Lock-Symbol trifft die Sicherheitsmeldung erneut nach Hause.,

Dropbox (Business)

Ansicht der gesamten homepage

Warum Es ist Genial

• Dropbox trägt über seinem schlichten design und branding. Es enthält nur das, was wichtig ist: Ein großes, relevantes Bild mit unterstützender Kopie, und eine“ Try free for 30 days “ Call-to-Action-Taste
• Dropbox-Homepage und Website ist das ultimative Beispiel für Einfachheit. Es begrenzt die Verwendung von Copy und Visuals und umfasst Leerzeichen.,
• Die Unterüberschrift ist einfach und dennoch leistungsstark: „Die sichere Dateifreigabe-und Speicherlösung, der Mitarbeiter und IT-Administratoren vertrauen.“Keine Notwendigkeit, Jargon zu dekodieren, um herauszufinden, was Dropbox wirklich tut.

4 Rivers Smokehouse

Warum Es ist Genial

• Sabbern. Das denke ich, wenn ich auf der Website für 4 Rivers Smokehouse ankomme. Kombiniert mit großer Fotografie, die Überschrift “ Brisket. 18 Jahre zu meistern. Ihre zu genießen.“klingt nach einer Erfahrung, die es wert ist, ausprobiert zu werden.,
• Die Parallaxe Scrollen führt Sie auf einer Tour durch die Dienste, Menü und Menschen, die eine tolle Zeit – eine große Nutzung dieser beliebten Design-Trend.
• Das einzig Negative? Ich wohne nicht nah genug an diesem Ort. Buh.

Cobb Pediatric Therapy Services

Gesamte Homepage anzeigen

Warum es brillant ist

• Die Überschrift und Unterüberschrift sprechen die emotionale Seite der Besucher an:“ Arbeiten Sie mit einem Unternehmen, das es bekommt“; “ Vertrauen Sie uns. Wir waren auch dort! Wir finden Jobs, wo Sie gedeihen können.,“Dieses Wertversprechen ist einzigartig und überzeugend.
• Es ist schwer, aus dem Screenshot oben zu sagen, aber die Überschrift ist auf einem rotierenden Karussell, das auf bestimmte Personas richtet, von Bewerbern für die Suche nach einem Therapeuten für ihre Schulen.
• Es gibt mehrere Wege, die Besucher gehen können, wenn sie auf der Seite ankommen, aber die Aufrufe zum Handeln sind gut positioniert, einfach formuliert und kontrastieren mit dem Rest der Seite.,

Melyssa Griffin

Gesamte Homepage anzeigen

Warum es brillant ist

• Melyssa demonstriert sofort soziale Beweise “ Schließen Sie sich über 200,000 anderen an…“
• Sie qualifiziert den Grund eines Besuchers für den Besuch ihrer Website mit einer schnellen Umfrage, und jede Option verlinkt auf ein anderes Inhaltsangebot.
• Sie verleiht ihrer Marke ein Gesicht. Sie ist nicht nur eine zufällige Website; Sie macht deutlich, dass sie ein Mensch ist, mit dem sich Menschen verbinden können.,
• Die Seite verwendet helle Farben, ohne überwältigend zu sein, und macht es leicht zu verstehen, was Melyssas zentrale Geschäftsangebote sind.

Jill Konrath

Gesamte Homepage anzeigen

Warum es brillant ist

• Es ist einfach und kommt direkt auf den Punkt. Aus der Überschrift und Unterüberschrift geht hervor, was Jill Konrath genau tut (und wie sie Ihrem Unternehmen helfen kann).
• Es gibt auch einfachen Zugang zu Jills Thought Leadership-Materialien, was wichtig ist, um ihre Glaubwürdigkeit als Hauptredner zu etablieren.,
• Es ist einfach, den Newsletter zu abonnieren und in Kontakt zu treten-zwei ihrer Hauptanrufe zum Handeln.
• Das Pop-up-Abonnement CTA verwendet soziale Beweise, um Sie dazu zu bringen, sich ihren Tausenden anderer Fans anzuschließen.
• Es enthält News Outlet Logos und Testimonials als sozialen Beweis.

Evernote

Warum es brillant ist

• Im Laufe der Jahre hat sich Evernote von einer einfachen notizsparenden App in eine Suite von Geschäftsprodukten verwandelt., Dies ist nicht immer einfach auf einer Homepage zu vermitteln, aber Evernote macht einen guten Job Verpackung viele potenzielle Nachrichten in ein paar wichtige Vorteile.
• Diese Homepage verwendet eine Kombination aus satten, gedämpften Farben im Video und seinen charakteristischen hellen grünen und weißen Highlights, um Konvertierungspfade hervorzuheben.
• Nach einer einfachen Überschrift („Erinnere dich an alles“) führt dich der Eye Path dann zu seinem Aufruf zum Handeln: „Melde dich kostenlos an.“
• Evernote bietet auch einen Ein-Klick-Anmeldeprozess über Google, um Besuchern zu helfen, noch mehr Zeit zu sparen.,

Telerik by Progress

Warum Es ist Genial

• „Muffig enterprise“ ist das nicht das Gefühl erhalten Sie, wenn Sie kommen an der Telerik-website. Für ein Unternehmen, das viele Technologieprodukte anbietet, geben seine kräftigen Farben, lustigen Designs und Videografie eine Google-ähnliche Atmosphäre ab. Nur ein wichtiger Aspekt, damit sich Besucher willkommen fühlen und sie wissen lassen, dass es sich um echte Menschen handelt.
• Ich liebe die einfache, übersichtliche Übersicht der sechs Produktangebote., Es ist eine sehr klare Art zu kommunizieren, was das Unternehmen tut und wie die Leute mehr lernen können.
• Die Kopie ist leicht und leicht zu lesen. Es spricht die Sprache seiner Kunden.

eWedding

Warum es brillant ist

• Für diejenigen, die Vögel lieben, die ihren großen Tag planen, ist eWedding ein großartiges Ziel für den Aufbau einer benutzerdefinierten Hochzeits-Website. Die Homepage ist nicht überladen und enthält nur die notwendigen Elemente, um die Leute dazu zu bringen, ihre Websites zu erstellen.
• Die Sub-Schlagzeile “ Über 800.000 Hochzeit Websites gebaut!,“ist ein großer sozialer Beweis.
• Es enthält hervorragende Produktvisuals, eine großartige Überschrift und einen Aufruf zum Handeln, der die Reibung mit der Kopie verringert, „Start website.“

Basecamp

Warum Es ist Genial

• Für eine lange Zeit, Basecamp war, hat die brilliant homepages und hier können Sie sehen, warum. Es bietet oft tolle Schlagzeilen und clevere Cartoons.
• Der Aufruf zur Aktion ist fett und über der Falte.,
• In diesem Beispiel wählte das Unternehmen eine Blog-ähnliche Homepage (oder Single Page Site-Ansatz), die viel mehr Informationen über das Produkt bietet.
• Das Kundenangebot ist ein mutiges und nachdrückliches Zeugnis, das über die Vorteile und Ergebnisse der Verwendung des Produkts spricht.

charity: water

Warum Es ist Genial

• Dies ist nicht Ihre typische non-profit-website. Viele Visuals, kreative Kopien und die Verwendung von interaktivem Webdesign zeichnen dies aus.
• Das animierte Header-Bild ist eine großartige Möglichkeit, Aufmerksamkeit zu erregen.,
• Es nutzt Video und Fotografie hervorragend, insbesondere bei der Erfassung von Emotionen, die Aktion verursachen.

TechValidate

Warum Es ist Genial

• Diese homepage ist sehr schön gestaltet. Ich liebe besonders die Verwendung von Leerzeichen, kontrastierenden Farben und kundenorientiertem Design.
• Die Überschrift ist klar und überzeugend, ebenso wie die Aufrufe zum Handeln.
• Es gibt auch eine großartige Informationshierarchie, die es einfach macht, die Seite schnell zu scannen und zu verstehen.,

Chipotle

Gesamte Homepage anzeigen

Warum es brillant ist

• Die Homepage ist ein großartiges Beispiel für Agilität und ständigen Wandel. Auf der aktuellen Homepage von Chipotle dreht sich alles um den bevorstehenden Urlaub, der als einzigartiges Wertversprechen verwendet wird, damit Sie mit dem Klicken auf Ihre Website beginnen können. Wenn ich an Chipotle denke, denke ich nicht unbedingt an Catering, aber die Seite ist eine großartige Erinnerung daran, verschiedene Verwendungen für die Burritos zu berücksichtigen, die Sie bereits kennen und lieben.,
• Die Food-Fotografie ist detailliert und schön, und es macht mich tatsächlich hungrig, es anzusehen. Nun, das ist eine effektive Verwendung von Visuals.

Medium

Gesamte Homepage anzeigen

Warum es brillant ist

• Dies ist vielleicht eine der besten Verwendungen von Leerzeichen, die ich gesehen habe. Es ermöglicht Medium App Tagline und Foto im Mittelpunkt zu nehmen, während immer noch Ihr Auge auf die dunkleren Abschnitt Titel auf der Website zeichnen.
• Medium macht es einfach, sich anzumelden – auf der Website oder mit einer einfachen Textnachricht an Ihr Mobiltelefon., Ich reagiere viel besser auf einen Text als auf eine E-Mail, Daher ist dies eine großartige Strategie, um die Benutzer am Anmeldeprozess zu beteiligen.
• Die Homepage verwendet Social Proof, um Besucher dazu zu bringen, sich umzusehen: Die Abschnitte“ Beliebt auf Medium „und“ Personalauswahl “ lassen mich wissen, wo ich qualitativ hochwertige Inhalte finden kann.,

Digiday

Gesamte Homepage anzeigen

Warum es brillant ist

• Im Gegensatz zu anderen Online-Nachrichtenpublikationen, die Homepages mit so vielen Schlagzeilen und Bildern wie möglich überschwemmen, zeigt Digidays erster Abschnitt nur einen Artikel. Das vorgestellte Bild (in diesem Fall ein beängstigendes) ist auffällig, und die Überschrift fordert nur noch dazu auf, angeklickt zu werden, nachdem der Besucher eine Vorstellung davon hat, was er lesen wird.,
• Oben auf der Homepage, auf der Websites normalerweise eine Menge verschiedener Abschnitte und Optionen zum Durchklicken zeigen, muss nur auf ein Symbol geklickt werden-was Sie zu einer Abonnementseite führt.

KIND >

Gesamte Homepage anzeigen

Warum es brillant ist

• Die kräftigen Farben erzeugen Kontrast, wodurch die Wörter und Bilder auf der Seite hervorstechen.
• Der CTA – „Shop-TYP“ – ist clever. Es fordert den Besucher auf, mehr zu erfahren, während er ein Spiel mit dem Wort „Art“ macht-was bedeutet, dass es eine gute Wahl ist, dort einzukaufen.,
• Der Slogan von KIND Snacks ist gerade brillant – als ich ihn las, klang die Nachricht sofort mit und ließ mich das Etikett der Snackbar lesen.

Ahrefs

Gesamte Homepage anzeigen

Warum es brillant ist

• Der Farbkontrast zwischen den Farben Blau, Weiß und Orange ist auffällig und macht die Überschrift und CTA pop.
• Die Sub-Headline und CTA sind ein überzeugendes Paar: Es ist ein großartiges Angebot, Konkurrenten kostenlos verfolgen und übertreffen zu können.,
• Die Homepage bietet dem Besucher eine Vielzahl von Möglichkeiten, ist aber dank des soliden Hintergrunds und der einfachen Typografie nicht überladen.

A24 Films

Gesamte Homepage anzeigen

Warum es brillant ist

• Die Homepage der Filmgesellschaft besteht nur aus Trailern für ihre neuen Filme. Wir wissen, dass Videoinhalte ein Format sind, von dem das Publikum mehr sehen möchte, und dies ist eine großartige Strategie, um die Arbeit von A24 auf sehr ansprechende Weise zu präsentieren.,
• Am oberen Rand der Homepage bietet A24 sofort eine Vielzahl von Möglichkeiten, über soziale Medien und E-Mail in Kontakt zu treten – etwas, das ich als Besucher schätze, wenn so viele andere Websites Kontaktinformationen am Ende der Seite vergraben.

Ellevest

Gesamte Homepage anzeigen

Warum es brillant ist

• „Investiere wie eine Frau: Weil Geld Macht ist.“Diese Schlagzeilen sind mächtig und lassen mich mehr über das Produkt erfahren-sowohl als Frau als auch als jemand, der daran interessiert ist, kluge finanzielle Entscheidungen zu treffen.,
• Die Bilder zeigen, anstatt zu sagen, eines der Wertversprechen des Unternehmens: eine Desktop-Website und mobile App, die mit Ihnen bewegen.
• „Get Started“ ist ein guter CTA-in der Tat verwenden wir es uns hier bei HubSpot. Wenn Sie darauf klicken, führt der Besucher einige einfache Schritte durch, um ein Profil einzurichten und mit der Investition zu beginnen.,

HubSpot

Gesamte Homepage anzeigen

Warum es brillant ist (wenn wir es selbst sagen)

• Die LEGO-Charaktere erregen Ihre Aufmerksamkeit (weil sie süß sind), dann illustrieren und verstärken sie geschickt die Nachrichten in der Überschrift und Unterüberschrift.
• Es trägt einen weiteren Blickfang“ Get Started “ CTA – mit Bonus microcopy Detaillierung unserer kostenlosen Versionen Benutzer können wählen, um in der Zukunft zu aktualisieren.,
• Auf der gesamten Homepage kehren unsere leuchtend blauen und orangefarbenen Farbthemen immer wieder zurück, um Ihr Auge auf Links und CTAs zu richten.

auf der Suche nach mehr inspiration? Schauen Sie sich diese unglaublichen Seiten über uns an.