Sie erhalten nie eine zweite Chance, einen ersten Eindruck zu hinterlassen — 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 blah?, Nun, es braucht mehr als nur Aussehen – es muss auch gut funktionieren. Deshalb punkten die brillantesten Homepages auf dieser Liste nicht nur in der Schönheit, sondern auch im Gehirn.

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

Was macht ein gutes Website-Homepage-Design aus

Alle hier gezeigten Homepage-Designs verwenden eine Kombination der folgenden Elemente., Nicht jede Seite ist perfekt, aber die besten Homepage-Designs machen viele davon richtig:

1) Es beantwortet 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 (z.B. Coca Cola), die Sie möglicherweise in der Lage sein, um Weg mit nicht zu beschreiben, wer Sie sind und was Sie tun werden; aber die Realität ist, dass die meisten Unternehmen immer noch benötigen, um diese Fragen zu beantworten, so dass jeder Besucher weiß, Sie sind in der „richtigen Ort.,“

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.

2) Es schwingt mit der Zielgruppe.

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

3) Es 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.

4) Es 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 von ihnen sind auch mobil optimiert, was in der heutigen mobilen Welt ein unglaublich wichtiges Must-Have ist.,

5) Es enthält 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.“(Hier sind 30 Beispiele für großartige CTAs für mehr Inspiration.)

Denken Sie daran, das Ziel der Homepage ist es, Besucher zu zwingen, tiefer in Ihre Website zu graben und sie weiter in den Trichter zu bewegen. 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 in Broschürenverschleiß.

6) Es ändert sich immer.

Die besten homepages sind nicht immer statisch. Einige von ihnen, wie Whitehouse.gov, ä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.

7) es beschäftigt große insgesamt design.

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 16 realen Beispiele zu lernen.

Inspiration für Website-Design: 16 der besten Homepage-Designs

1) FreshBooks

GESAMTE HOMEPAGE ANZEIGEN

Warum es brillant ist

  • 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 in den Handlungsaufrufen verwendete Kopie „Probier es 30 Tage lang kostenlos aus“ ist sehr überzeugend.
  • Die Unterzeile ist auch großartig: „Schließen Sie sich 5 Millionen Menschen an, die FreshBooks verwenden, um Rechnungen schmerzlos zu senden, Zeit zu verfolgen und Ausgaben zu erfassen.,“Es Nullen in auf einem gemeinsamen Schmerzpunkt für Freiberufler und kleine Unternehmen (FreshBooks Zielgruppe) — in der Regel Buchhaltungssoftware ist oft „schmerzhaft komplex.,“

2) Airbnb

GESAMTE HOMEPAGE ANZEIGEN

Warum es brillant ist

  • Die Homepage ist wunderschön für sich: Es begrüßt Sie mit einem Vollbild-Video von schönen, hochauflösenden aufnahmen von Reisenden, die Aktivitäten machen, als wären sie Einheimische, vom Kochen in der Küche über den Kauf von lokalem Käse bis hin zum Mopedfahren durch die Straßen. Es ist sehr menschlich und authentisch.,
  • Es enthält das Suchformular für Ziel und Datum, nach dem die meisten Besucher suchen, und führt die Besucher 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.,

3)

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 Sicherheitsnachricht erneut nach Hause.,

4) Dropbox (Consumer)

Warum es brillant ist

  • Dropbox-Homepage und Website ist das ultimative Beispiel für Einfachheit. Es begrenzt die Verwendung von Kopien und Grafiken und umfasst Leerzeichen.
  • Es ist schwierig, aus dem statischen Screenshot oben zu sagen, aber diese Seite fängt Ihre Aufmerksamkeit mit seiner subtilen Verwendung von skurrilen Animationen in dieser Grafik.
  • Ihre Unterüberschrift ist einfach und dennoch leistungsstark: „Rufen Sie alle Ihre Dateien von überall und auf jedem Gerät auf und teilen Sie sie mit jedem.,“Keine Notwendigkeit, Jargon zu dekodieren, um herauszufinden, was Dropbox wirklich tut.
  • Es hat einen Fokus auf eine primäre Call-to-action, “ Kostenlos anmelden.“Die Google-fähige Anmeldefunktion verringert jedoch die Reibung für Besucher, die es hassen, lange Registrierungsformulare auszufüllen.

5) Dropbox (Business)

GESAMTE HOMEPAGE ANZEIGEN

Warum ist es Briliant

  • Es ist ein großartiges Beispiel für die Bereitstellung eine andere Website-Erfahrung für ein anderes Publikum., Im Gegensatz zu ihrer Haupthomepage, die ursprünglich für die Consumer-Seite (oben) erstellt wurde, benötigen ihre Geschäftsbenutzer mehr Informationen und zusätzliche Beweise dafür, dass Dropbox for Business eine sichere und skalierbare Lösung für Unternehmen ist (ein Wahrnehmungsproblem, das Dropbox direkt auf ihrer Homepage anspricht).
  • Dropbox trägt weiterhin sein einfaches Design und Branding. Es enthält nur das, was wichtig ist: Ein großes, relevantes Bild mit unterstützender Kopie und eine Call-to-Action-Schaltfläche „30 Tage kostenlos ausprobieren“

6) Whitehouse.,gov

Warum es brillant ist

  • Eine Website zu erstellen, die eine ganze Nation unterstützt, ist keine leichte Aufgabe. Whitehouse.gov ist eine ständig wechselnde Top-Anliegen und Prioritäten zu reflektieren-die Homepage allein hat durch Hunderte von Revisionen gegangen. Testen und Optimieren ist eine Schlüsselkomponente für ein brillantes Homepage-Design.
  • Was ist besonders toll an Whitehouse.gov ist, dass es komplett anders als die meisten Regierung-websites. Es hat ein sauberes design und fördert eine Gemeinschaft.,
  • Es ist ziemlich einfach zu finden, wonach Sie suchen, wenn Sie hier landen. Und wenn Sie es nicht sofort finden können, gibt es sogar ein praktisches Suchfeld.

7) 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.,
  • Das Parallax Scrolling führt Sie auf eine Tour durch ihre Dienste, Menüs und Menschen, die eine tolle Zeit haben — eine großartige Nutzung dieses beliebten Designtrends.
  • Das nur negativ? Ich wohne nicht nah genug an diesem Ort. Buh.

8) Cobb Pediatric Therapy Services

GESAMTE HOMEPAGE ANZEIGEN

Warum es brillant ist

  • Die Überschrift und Unterzeile sprechen die emotionale Seite der Besucher an: „Arbeiten Sie mit 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.
  • Aus dem obigen Screenshot ist schwer zu erkennen, aber die Überschrift befindet sich auf einem rotierenden Karussell, das sich an bestimmte Personen richtet, von Bewerbern bis hin zu Personen, die einen Therapeuten für ihre Schulen suchen.
  • 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.,

9) 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, die wichtig ist, ihre Glaubwürdigkeit als Keynote Speaker zu etablieren.,
  • Es ist einfach, den Newsletter zu abonnieren und in Kontakt zu treten — zwei ihrer primären Aufrufe zum Handeln.
  • Es enthält news outlet Logos und Testimonials als sozialen Beweis.

10) Evernote

Warum es brillant ist

  • Evernote hat sich im Laufe der Jahre von einer einfachen notizsparenden App zu einer Suite von Geschäftsprodukten entwickelt. 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 ihren charakteristischen hellgrünen und weißen Highlights, um Konvertierungspfade hervorzuheben.
  • Nach einer einfachen Überschrift („Erinnere dich an alles“) führt dich der Augenpfad dann zu ihrem Aufruf zum Handeln: „Melde dich kostenlos an.“

11) 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 ihre 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 den einfachen, übersichtlichen Überblick zu ihren sechs Produktangeboten. 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 einfach zu Lesen. Sie sprechen die Sprache Ihrer Kunden.,

12) Boxbee

GESAMTE HOMEPAGE ANZEIGEN

Warum es brillant ist

  • Die Überschrift ist ein Call-to-Action direkt für ihre Zielgruppe gerichtet: Unternehmer in der Speicherindustrie.
  • Es hat ein sehr sauberes und einfaches design. Das Design hebt die Überschrift hervor und zeigt dann sofort den primären Aufruf zum Handeln-sonst nicht viel.
  • Dieser primäre Aufruf zum Handeln ist in einer stark kontrastierenden Farbe, wodurch er auffällt.,

13) 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 Hochzeitswebsite. Die Homepage ist nicht überladen und enthält nur die notwendigen Elemente, um die Leute dazu zu bringen, ihre Websites zu erstellen.
  • Die Sub-Überschrift “ Über 750.000 Hochzeit Websites gebaut!“ist ein großer sozialer Beweis.,
  • Sie haben eine hervorragende Produktvisualität, eine großartige Überschrift und einen Aufruf zur Aktion enthalten, der die Reibung mit der Kopie „Start“ verringert Website.“

14) Basecamp

Warum es brillant ist

  • Basecamp hatte lange Zeit brillante Homepages, und hier können Sie sehen warum. Sie bieten 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.

15) 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.
  • Die animierte Überschrift ist eine großartige Möglichkeit, mehrere Nachrichten in einer Zeile zu erfassen.,
  • Großer Einsatz von Video und Fotografie, insbesondere bei der Erfassung von Emotionen, die Aktion verursacht.

16) TechValidate

Warum Es ist Genial

  • Diese homepage ist sehr schön gestaltet. Ich liebe besonders die Verwendung von Weißraum, 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.