16 Beispiele für schöne Webseiten

Die Webseite Ihres Unternehmens ist Ihr digitales Schaufenster, Ihr virtueller Haupteingang, Ihre Online-Repräsentanz. Die Webseite ist der erste Kontakt zwischen Ihrer Marke und Interessentinnen und Interessenten. Beim ersten Kontakt sollten sich Besucherinnen und Besucher weder langweilen noch überfordert fühlen oder gar ratlos zurückbleiben.

In diesem Artikel haben wir Ihnen daher die wichtigsten Kriterien für die Gestaltung einer Webseite zusammengefasst und stellen Ihnen außerdem 16 Beispiele für schöne Webseiten vor.

Kriterien für eine schöne & hilfreiche Webseite

Eine ansprechende Webseite zu gestalten erfordert Zeit und ein gutes Konzept. Ein paar grundlegende Kriterien sollten jedoch branchenunabhängig erfüllt werden:

• Design-Elemente sollten optisch ansprechend, aufgeräumt und professionell platziert werden.

• Die Webseite sollte funktionell aufgebaut sein und eine gute Usability bieten.

• Inhalte sollten aussagekräftig und überzeugend gestaltet sein.

Natürlich erfüllen verschiedene Webseiten teilweise vollkommen unterschiedliche Zwecke. Zum Beispiel ist der Punkt „Optik“ für eine Discounter-Seite für Druckerzubehör viel weniger wichtig. Hier zählen der Rotstiftpreis und die Fülle günstiger Angebote. Dafür muss sie schnell laden und eine optimale Usability aufweisen.

Die Markenseite eines Modelabels wiederum lebt von hochwertigem Design, brillanten Bildern und Kreativität. Deshalb verschieben sich die Schwerpunkte je nach Angebot und Zweck der Seite.

Regeln zur Erfüllung der oben genannten drei Kriterien sind:

• Die Webseite muss schnell und klar beantworten, was Ihr Unternehmen anbietet, wer Sie sind und was Besucherinnen und Besucher auf der Seite tun können.

• Inhaltlich muss sich die Webseite auf die wichtigen Informationen und Anweisungen fokussieren. Vermeiden Sie schwülstige und zu ausführliche Texte über Ihr Corporate Image und Ihre Mission. Das „Wer“ und „Was“ ist wichtig, aber nur die Teile davon, die den Besucher oder die Besucherin auch interessieren.

• Besucherinnen und Besucher müssen erfahren, welchen Mehrwert sie hier geboten bekommen. Anders gesagt: Zeigen Sie ihnen, weshalb sie nicht weitersuchen müssen.

• Die Seite muss intuitiv und flüssig zu benutzen sein. Vermeiden Sie komplizierte Menübäume und unnötige Elemente, die die Seite langsam machen und den User verwirren.

• Call To Action (CTA): Eines der wichtigsten Elemente, wenn Ihre Webseite nicht gerade eine reine Image-Präsenz ist. Leiten Sie Besucherinnen und Besucher an und zeigen Sie ihnen so, was sie als Nächstes zu tun haben. Ohne Handlungsanweisungen ist Ihre Seite nur eine Broschüre. CTAs generieren Sales oder Leads.

• Das Design mag nicht immer kriegsentscheidend sein, doch grundsätzlich vermittelt eine ansprechend und professionell gestaltete Seite Seriosität und Qualität. Bevor Inhalte wahrgenommen werden, steht an allererster Stelle der optische Eindruck.

• Die Seite muss unbedingt „responsive“ sein. Responsive Webdesign bedeutet in diesem Fall, dass sich Ihre Seite automatisch an das Format und System des Endgeräts anpasst. Frei nach dem Credo „Mobile First“ sollte nicht nur das Design responsiv sein, sondern auch die gesamte Usability.
  Pro-Tipp: Wenn Sie einen Homepage-Baukasten wie den von HubSpot benutzen, wird Ihnen dieser Teil der Arbeit abgenommen. Unser Tool passt das Design nämlich automatisch an jedes Endgerät an.

Wir haben uns in den Weiten des Internets umgeschaut und 16 Beispiele für schöne Webseiten herausgepickt. Dabei browsen wir quer durch alle Branchen und zeigen Unternehmen jeder Größe.

1. HelloFresh - Kochboxen

• Die Vorteile der Kochbox stehen im Vordergrund – „Wir sparen dir Zeit / Geld / Stress“
• Der Blick wandert weiter zum CTA „Kochboxen ansehen”, wodurch die Neugier der Nutzerinnen und Nutzer sofort befriedigt werden kann
• Im Menü „below the fold“ kann der User sich noch einmal Informationen wie Anleitung, Vorteile oder Referenzen zu Gemüte führen

2. Dropbox – Cloudspace-Anbieter

• Design der Homepage ist klar und aufgeräumt, vermittelt Einfachheit und passt zum Technologie-Sektor
• Direkter CTA
• Zeigt sofort die Flexibilität je nach Nutzer-Anspruch
• Das ästhetische Flat-Design-Look kommt hier als verspielte, wie handgemalte Variante zum Einsatz
• Minimalistisches Design und Einsatz von Bold Typography

3. ebuero.de – Virtual Office Service

• Sagt kurz und prägnant, was angeboten wird
• Liefert Vorteilsargumentation und Handlungsaufforderung zum Product Trial
• Vermittelt Seriosität durch die nüchterne Aufmachung
• Einsatz eines proaktiven Chatbots

4. freeletics.de – Online-Fitnesskurse

• Modernes, ansprechendes Design

• Einfache Navigation durch One Pager

• Geringer Informations-Streuverlust für Nutzerinnen und Nutzer, da die verschiedenen Programme individualisiert auf den User eingestellt werden können

5. Levi’s – Premium Jeanslabel

• Auf der Startseite begrüßen Nutzerinnen und Nutzer hochwertige Bewegtbild-Produktpräsentationen, womit der Trend des Video Contents auf Websites aufgegriffen wird
• Direktes Herausstellen des USP
• Starker Branding-Fokus als Vorreiter- und Innovations-Jeanshersteller mit sozialer Verantwortung
• Das Webdesign fokussiert sich ganz auf die Bildinhalte

6. windeln.de – Onlineshop für Baby- und Kinderprodukte

• Gestaltung ist auf die (Eltern-)Zielgruppe zugeschnitten: fröhlich, kindlich und klar

• Sagt sofort, was angeboten wird
• Beantwortet alle Fragen in didaktisch gutem Aufbau beim Runterscrollen des One-Pagers: Was bekomme ich? Wie bekomme ich es?

7. myfreshfarm.de – Gemüselieferdienst vom Erzeuger

• Sympathische Gestaltung, die die richtige Stimmung vermittelt
• Informiert punktgenau und nicht zu ausführlich über das Angebot
• Danach folgt ein direkter CTA

8. mymuesli.de – individualisierbares Müsli

• Sehr am Sales orientiert: Besucherinnen und Besucher werden mit dem Kernprodukt abgeholt und beim Runterscrollen findet direkt ein Cross-Selling statt
• User finden auf der Webseite sofort Inspiration zum Einkaufen

9. Netflix – Online-Videothek

• Eine in jeder Hinsicht aufs Nötigste reduzierte Kommunikation, die auf den Punkt kommt
• FAQs nehmen Kundenkommunikation vorweg und vermitteln Transparenz

10. Uber – Mobilitäts-Unternehmen

• Übersichtlich, modern, direkt und schnörkellos: Das Design ist geradeheraus
• Im Menü findet der User direkt auf der Homepage das, wonach er oder sie sucht
• Stilvolle und sympathische Präsentation der Services und Mitwirkenden – gleichzeitig werden aktuelle Sicherheitsbedenken adressiert und beruhigt

11. ASOS – Online-Modeshop

• Direkter CTA zum passenden Shop (Damen oder Herren)
• Überzeugendes „reason why“: 850 Brands sind im Shop vertreten
• Prominente Platzierung der Premier-Lieferung direkt unter der Navigationsleiste
• Das auffällige Hintergrundbild vermittelt nicht nur ein Gefühl für den Style bei ASOS, sondern auch den Lifestyle, den die Marke vertritt – das bunt eingefärbte Favoriten-Herz weist zudem auf den LGBTQIA+-Pride-Monat hin und damit auf soziale Verantwortung

12. DAZN – Sport-Streamingplattform

• DAZN packt alles, was relevant für das Kennenlernen ihres Produktes ist, auf die One-Pager-Webseite

• Bequem kann sich der User durch die Homepage scrollen, deren Aufbau viel Inspiration vom Streaming-Angebot von Netflix erhielt

• Besonderes Highlight: Ein Programm-Kalender, den der User individuell auf seine sportlichen Präferenzen abstimmen kann

13. WordPress – Blog- und Website-Builder

• Die optische Gestaltung verbindet die kühle Welt der Technologie mit dem Menschen
• In kürzester Form wird vermittelt, was angeboten wird und warum das alles ist, was Besucherinnen und Besucher brauchen
• Übersichtliche Aufzeigung der verschiedenen Pakete, wodurch der User genau das findet, wonach er sucht
• Einsatz von trendiger Serifen-Schrift und cleanem Farbdesign

14. Google – Suchmaschine

• Die wohl bekannteste Webseite der Welt setzte schon immer auf ein Logo mit hohem Wiedererkennungswert
• Vor allem aber besticht die Webseite durch ihre Funktionen
• Im Design findet sich die perfekte Verbindung von Einfachheit und Funktionalität

15. Erlich Textil - Wäsche

• Die Webseite fokussiert sich ganz auf die Produkte, weshalb eine besonders ruhige und organische Bildsprache gewählt wurde
• Einsatz eines proaktiven Chatbots
• Direkter Hinweis auf TrustedShops-Zertifizierung, klimaneutralen Versand, kostenlose Retouren sowie Rabatt bei Newsletter-Anmeldung
• Instagram-Beispiele von Erlich-Produkten sind in das Webdesign integriert – Inspiration und direkter Transfer des Produkts in die Lebenswelt der Kundinnen und Kunden

16. True Gum - Kaugummi

• True Gum lenkt die Aufmerksamkeit auf den UPS seines Produkts und erklärt ihn anschaulich

• Gestaltung ist stilistisch an Natur angelehnt und soll Vertrauen und Identifikation schaffen
• Die CTAs „Shop“ und „Learn more“ gehen direkt auf die Nutzer-Intentionen ein
• Mit einem eingebetteten Video nutzt die Marke auch den Bewegtbild-Boom im Marketing für sich

Fazit: Setzen Sie auf klare Botschaften bei der Webseiten-Gestaltung

Unsere Auswahl an Beispielen für schöne Webseiten unterliegt natürlich einer gewissen Willkür, denn es gibt eine Menge Webseiten, die ihren Job sehr gut machen. Das liegt auch daran, dass es diverse Anbieter für erstklassige Templates auf dem Markt gibt. Diese sind häufig am Puls der Zeit und bieten aktuelle Website-Design-Trends an.

Bei aller Inspiration gilt für die Gestaltung des Web-Auftritts auf jeden Fall dieselbe Regel wie für gute Werbung: Subtrahieren Sie alles, was Sie nicht unbedingt brauchen. Und wenn Sie absolut nichts mehr weglassen können, um Ihre Botschaft zu vermitteln, dann haben Sie eine gute, klare Kommunikation geschaffen.

Titelbild: PrathanChorruangsak / iStock / Getty Images Plus