13 Arten von Website-Layouts mit Ideen und Beispielen

Um etwas Erfolgreiches zu bauen, benötigen Sie einen Plan und ein Fundament.

Wenn Sie ein Haus bauen, beginnen Sie mit einem Grundriss, um die Lage der Räume, ihre Größen und die endgültige Struktur des Hauses zu zeigen. Das Gleiche gilt für den Aufbau einer Website.

Während Elemente wie Bilder, Videos und Texte für den Erfolg einer Website wichtig sind, kann ihr Layout über Erfolg oder Misserfolg entscheiden. Es macht keinen Sinn, brillante Texte und ein wunderschönes Bild auf einer überladenen und schlecht gestalteten Seite zu platzieren, oder?

Heute werden wir uns 13 Beispiele der besten Website-Layouts, einige bewährte Methoden und die Bedeutung der mobilen Reaktionsfähigkeit ansehen.

1. Ausgewähltes Bild

Eines der häufigsten und einfach zu implementierenden Website-Layouts ist das Layout mit ausgewähltem Bild.

Dieses Layout ermöglicht es Ihnen, ein großes Bild einzubauen, das als Anker für die Aufmerksamkeit Ihres Lesers auf Ihrer Startseite dient. Das Bild ist in der Regel ausdrucksstark und vermittelt die Botschaft Ihrer Marke/Ihres Unternehmens.

Dieses Layout funktioniert besonders gut für personenzentrierte Websites wie Freiberufler oder Einzelunternehmer.

Helen Gebre, eine Werbetexterin zum Mieten, macht das mit einem ausgezeichneten Hauptbild auf ihrer Website gut (Bild oben). Das Bild ist warm und einladend und macht neugierig auf mehr über sie. Außerdem gibt es großzügig viel Weißraum auf ihrer Seite, sodass sie nicht überladen wirkt. Die Navigationsleiste ist einfach und sichtbar.

Layouts mit ausgewählten Bildern funktionieren für fast jede Plattform hervorragend. Worauf Sie achten sollten, ist die Auswahl des bestmöglichen Bildes, um Besucher zu fesseln und sie zum Verweilen zu bewegen.

2. Vollbild-Foto

Das Vollbild-Foto-Layout verwendet ein Bild/Foto, das den gesamten Bildschirm ausfüllt, mit Text und Menüs darüber.

Es dient dazu, eine kraftvolle Botschaft zu vermitteln, die Ihr Produkt/Ihre Dienstleistung dem Betrachter nahebringt. Der zusätzliche Text und die Verwendung eines Handlungsaufrufs können das Bild hervorheben oder zum Leben erwecken.

Ein Nachteil dieses Layouts ist jedoch, dass einige Benutzer möglicherweise nicht erkennen, dass beim Scrollen nach unten weitere Inhalte auf der Seite vorhanden sind. Daher ist es wichtig, eine Möglichkeit einzubauen, wie sie mit der Seite interagieren können und nicht wegklicken.

Sie sollten auch bedenken, wie diese Bilder sowohl auf mobilen Geräten als auch auf Desktop-Computern aussehen.

Prometheus Fuels (Bild oben) ist ein großartiges Beispiel für die Verwendung eines Vollbild-Fotos (oder in ihrem Fall eines GIFs) auf Ihrer Website. Das Foto passt perfekt zum Unternehmen und dessen Tätigkeit, und der Text, der das Bild begleitet, füllt die Lücken.

Die versteckte Navigationsleiste in der oberen rechten Ecke bietet einen einfachen Zugang, wenn Sie sie jemals benötigen. Es gibt auch einen Pfeil, der zeigt, dass es mehr zu sehen gibt, wenn ich auf der Webseite nach unten scrolle.

3. Split-Screen-Layout

Das Split-Screen-Layout zeigt Ihrem Leser das Beste aus beiden Welten oder wie 2 Dinge zusammenarbeiten können. Dies kann sich entweder auf eine vertikale/horizontale Teilung auf Ihrer Webseite beziehen. Es ermöglicht dem Leser, schnelle Entscheidungen zu treffen und hilft, das Engagement von Anfang an zu sichern.

Split-Screen-Layouts eignen sich gut für E-Commerce-Shops mit verschiedenen Bereichen wie Männer oder Frauen, sowie für Portfolio-Websites, Geschäftswebsites und mehr.

Adam Dannaway hat das Split-Screen-Layout auf seiner Website gut eingesetzt (Bild oben). Er ist Designer und Programmierer und nutzt das Split-Screen-Layout, um eine Vorschau beider Fertigkeiten gleichzeitig anzuzeigen, was Ihnen, dem Benutzer, die Möglichkeit gibt, zu entscheiden, wofür Sie sich entscheiden möchten. Es übersetzt sich auch gut auf mobile Geräte und lädt Sie ein, sich zu engagieren, während es Sie zu dem führt, was Sie brauchen.

Eine wichtige Erinnerung ist jedoch, dass Sie, wenn Sie das Split-Screen-Layout verwenden, nicht zu viele Informationen auf jeder Seite unterbringen sollten.

Sie müssen nur die richtige Menge hinzufügen, damit sie eine Auswahl treffen können.

4. Asymmetrisches Layout

Während das Split-Screen-Layout gleichen Platz zwischen beiden Seiten des Bildschirms bietet, nutzt das asymmetrische Layout ein Ungleichgewicht, um einen bestimmten Bereich der Seite hervorzuheben.

Der Abschnitt mit mehr Bildschirmfläche wird mehr Aufmerksamkeit auf sich ziehen, und Sie können dies zu Ihrem Vorteil nutzen, wenn Sie Ihre Informationen Ihren neuen und wiederkehrenden Benutzern präsentieren.

Diese Website-Layouts sind vielseitig und eignen sich gut für eine Vielzahl von Website-Typen wie Unternehmen, Freiberufler und in einigen Fällen E-Commerce-Websites.

NewFlight (Bild oben) ist eine Film- und Digitalagentur mit Sitz in London, die das Asymmetrie-Layout auf ihrer gesamten Website verwendet (vertikale Asymmetrie auf der Startseite und diagonale auf den anderen), um Ihre Aufmerksamkeit zu fesseln, während sie Sie durch die Website führt, damit Sie genau das bekommen, was Sie brauchen.

Asymmetrie kann auf mobilen Geräten verwendet werden, jedoch ist ihre Wirkung nicht dieselbe wie bei der Verwendung auf Computerbildschirmen. Es ist wichtig, sie für mobile Benutzer anzupassen.

5. Radialsymmetrisches Layout

Das radialsymmetrische Layout ist ziemlich ungewöhnlich, kann jedoch bei richtiger Anwendung eine blendende Wirkung haben.

Es hat einen Brennpunkt in der Mitte der Seite, von dem aus verwandte Elemente in einer kreisförmigen Formation ausstrahlen.

Die Vlog.it-Startseite verwendet das radialsymmetrische Layout, um die verschiedenen Videos anzuzeigen, die der Ersteller, Marco Rosella, gesammelt hat.

Das Layout fällt zwar ins Auge, ist jedoch für viele Unternehmen nicht weit verbreitet anwendbar, und seine Anpassung an mobile Plattformen ist ebenfalls begrenzt. Es scheint am besten für Websites zu funktionieren, die Informationen ohne Handlungsaufforderung präsentieren.

6. Raster-Layout

Einfaches Browsen ist eines der besten Dinge an einer gut gestalteten Website, und das Raster-Layout bietet dies in Hülle und Fülle. Es ermöglicht Ihnen, mehrere Interessen auf einer Seite mit einer gleichmäßigen Verteilung von Text, Bildern und Videos anzuzeigen, um die verschiedenen Arten von Inhalten zu zeigen.

Sie sehen das Raster-Layout auf Video-Sharing-Websites wie YouTube. Es funktioniert auch gut für mobile Geräte und ermöglicht die gleiche Browsing-Leichtigkeit wie auf einem Desktop.

Als Tipp: Stellen Sie sicher, dass Sie die besten Bilder für jede Kachel in Ihrem Raster auswählen und den begrenzten Textraum optimal nutzen, da dies als Vorschau für Benutzer dient.

M.A.P. (Bild oben) nutzt das Raster-Layout, um Künstlerarbeiten anzuzeigen. Jedes Bild erhält den gleichen Raum und die notwendigen Informationen, um Sie einzuladen, mehr anzusehen.

7. Karten-Layout/Block-Layout

Karten-Layouts werden im Web weit verbreitet eingesetzt. Die Karten dienen als Mini-Container für Informationen wie Text und Bilder und haben manchmal sogar zusätzliche Optionen wie eine Funktion zum späteren Speichern.

Sie ermöglichen es Ihnen, Benutzern gerade genug Informationen zu präsentieren, um ihnen bei ihrer Wahl zu helfen oder durchzuklicken, um mehr anzusehen. Eines der besten Dinge am Karten-Layout ist, dass es dynamisch ist und Sie den Stil, die Größe und die Reihenfolge der Karten an Ihre Website anpassen können.

Dies macht das Karten-Layout auch für mobile Bildschirme großartig, da sie sich entsprechend anpassen. Das Karten-Layout wird oft auf E-Commerce-Seiten verwendet, da es eine großartige Möglichkeit ist, Informationen zu verschiedenen Artikeln zum Kauf zu präsentieren.

Pinterest (Bild oben) ist ein großartiges Beispiel für die Verwendung des Karten-Layouts. Es ordnet die Beiträge perfekt an und die unterschiedlichen Größen passen entsprechend zum Beitragstyp, sei es ein Bild, ein Video oder eine Infografik.

8. Das F-Layout

Das F-Layout ist ein Website-Layout, das einem weiteren üblichen Scan-Muster der Augenbewegung von Menschen folgt.

Wir scannen viele Seiten in einem F-Muster: Unsere Augen beginnen in der oberen rechten Ecke der Seite, gehen zur nächsten Zeile und machen dasselbe wieder – der Zyklus geht weiter, bis wir etwas finden, das unsere Aufmerksamkeit erregt.

Um fair zu sein, kann dieses Muster auch der Form eines E folgen.

Nordstrom (Bild oben) verwendet, wie viele andere E-Commerce-Websites, das F-Layout, damit Benutzer verfügbare Artikel leicht scannen und entsprechend auswählen können.

9. Das Zickzack/Z-Form-Layout

Das Zickzack-Layout ist das, das der Art und Weise entspricht, wie Menschen (typischerweise aus westlichen Kulturen) natürlicherweise eine Webseite scannen: in einer Z-Formation!

Denken Sie darüber nach, Ihre Augen gehen von links nach rechts, dann nach unten links und dann wieder nach rechts.

Diese Gewohnheit macht das Zickzack-Layout großartig für eine Vielzahl von Websites.

Evernote (Bild oben) verwendet das Z-Form-Layout auf seiner Startseite. Wenn Sie es betrachten, gibt es zwei Handlungsaufforderungen direkt auf der Startseite, die Sie aufgrund der Art und Weise, wie Sie die Seite natürlicherweise scannen würden, nicht übersehen können.

Das Z-Form-Layout funktioniert am besten für Computer aufgrund der Größe ihrer Bildschirme. Sie müssten Ihre Website für mobile Geräte anpassen, um Ergebnisse zu sehen.

10. Ein/Einzelspalten-Layout

Ein häufiges und einfaches Layout, das Einzelspalten-Layout ordnet die Website-Informationen in einer Spalte an. Es ermöglicht einfaches Browsen und Navigation, da alles genau dort ist, wo Sie es finden müssen.

Es funktioniert gut für Blogbeiträge, lange Artikel, Forschungsarbeiten, kann aber für E-Commerce-Seiten weniger effektiv sein als die Karten- oder F-Layouts.

Das Design dieses Layouts macht es auch großartig für kleinere Bildschirme wie die auf Ihrem Telefon oder Tablet. Medium (Bild oben) verwendet das Einzelspalten-Layout für seine Artikel, was sie auf jedem Gerät einfach zu lesen macht.

11. Magazin-Layout

The Washington Post verwendet das Magazin-Layout für seine Website.

Das Magazin-Layout ist oft eine Fusion verschiedener Layouts, die entwickelt wurden, um Lesern ein einzigartiges Erlebnis zu bieten. Es ist vom traditionellen Print-Layout inspiriert und ermöglicht Überschriften, Bilder und manchmal einen Teil des Haupttextes für jeden Beitrag.

Während dieses Layout gut für Magazin-/Nachrichtenwebsites funktioniert, kann es schwierig sein, es für mobile Bildschirme anzupassen.

Eine Lösung dafür ist, einige Geschichten größer als andere zu machen und eine einfache Navigation zu ermöglichen. Mobile Navigation kann nicht ignoriert werden, besonders für Websites, die Magazin-Layouts verwenden, da etwa 57% der Erwachsenen ihre Nachrichten über mobile Geräte beziehen.

12. Einzelseiten-Layout

Ein weiteres ungewöhnliches Layout ist das Einzelseiten-Layout. Dieses ist ziemlich einzigartig, weil es mehrere Aktionen in eine Seite integriert und der Inhalt dynamisch mit JavaScript geladen wird. Ein Einzelseiten-Layout, mit dem die meisten Menschen vertraut sind, ist Gmail.

Einzelseiten-Layouts funktionieren gut für sowohl Desktop- als auch mobile Geräte.

Dieses Layout eignet sich am besten für einfache Portfolios und Event-Seiten, wie The Dockyard Social (Bild oben), die Website für ein „Street Food Warehouse“. Alles wird auf einmal geladen, was eine einfache Navigation und Nutzung ermöglicht. Es ist auch auf mobilen Geräten sehr reaktionsschnell, was großartig ist, weil viele Menschen ihre Telefone benutzen würden, um ein Event/einen Ort zum Essen zu recherchieren.

Während das Einzelseiten-Layout jedoch großartig für ein Portfolio oder ein Event ist, kann seine Einfachheit im Design dieses Layout für eine Nachrichten- oder E-Commerce-Seite ungeeignet machen.

13. Fixierte Seitenleiste (oder fixierte Navigation)

Wie wir bereits erwähnt haben, spielt das Layout einer Website eine entscheidende Rolle nicht nur bei der Präsentation von Informationen, sondern auch dabei, wie der Benutzer durch die Website navigiert.

Das Layout mit fixierter Seitenleiste hat (Überraschung, Überraschung) eine fixierte Seitenleiste entweder auf der linken oder rechten Seite der Seite. Dies hält die Seitenleiste im Blick und zugänglich, während Benutzer die Seite nach unten scrollen.

Nice Cream (Bild oben), eine Website für handgemachtes Eis (klingt übrigens köstlich), verwendet die fixierte Seitenleiste gut. Die Seitenleiste ist einfach und niedlich, sie passt perfekt zur Ästhetik der Website, wobei jede Kategorie in einem abgerundeten Rechteck ist.

Wenn Sie ein Layout mit fixierter Seitenleiste verwenden, stellen Sie sicher, dass es sich für Benutzer auf mobilen Geräten und für diejenigen, die minimierte Fenster verwenden, anpasst, um nicht zu viel Bildschirmfläche zu beanspruchen.

Was ist ein Website-Layout?

Das Layout einer Website ist das Gerüst, das die Struktur und das Design der Website bestimmt. Es legt fest, wie Text und Bilder auf der Seite präsentiert werden, und spielt eine Rolle bei der Benutzererfahrung (UX).

Ein Layout kann den Unterschied ausmachen, ob jemand Ihrem Aufruf zum Handeln folgt oder von Ihrer Website wegklickt. Schließlich wird niemand darum kämpfen, zu abonnieren oder Ihnen Geld zu geben! Ihre Website muss diesen Prozess mühelos gestalten.

Bewährte Methoden für ein großartiges Layout

Nachdem Sie sich für das Layout Ihrer Website entschieden haben, sind hier die zwei besten Methoden für die Gestaltung Ihrer Website.

1. Über dem Falz

Wenn Sie Ihre Website gestalten, ist es entscheidend, alle wichtigen Informationen über dem Falz zu platzieren, d.h. sie werden angezeigt, bevor Ihre Benutzer nach unten scrollen. Das bedeutet, dass Besucher alles haben, was sie brauchen, sobald sie auf Ihrer Seite landen. Dinge, die Sie sich merken sollten, sind:

All diese Dinge über dem Falz zu haben, kann helfen, mehr Benutzer schneller zu konvertieren.

2. Navigationsleiste

Eine Navigationsleiste fungiert als Karte Ihrer Website und ermöglicht es Benutzern, leicht zu finden, was sie brauchen, und die Aktion auszuführen, die Sie von ihnen benötigen.

Wie wir gesagt haben, wird niemand darum kämpfen, Ihnen Geld zu geben. Wenn die Navigation auf Ihrer Website verwirrend ist, werden sie gehen und zu einer Website wechseln, die ihnen keine Kopfschmerzen bereitet.

Daher möchten Sie eine Navigationsleiste, die einfach ist, mit genügend Kategorien für eine einfache Durchquerung.

Überfüllen Sie die Leiste auch nicht mit jeder einzelnen Kategorie! Setzen Sie Unterkategorien und eine Suchleiste ein, um Besuchern zu helfen, besser durch Ihre Website zu navigieren.

Was ist mobile Reaktionsfähigkeit & warum ist sie wichtig?

Da Smartphones für unser tägliches Leben immer wichtiger geworden sind, surfen, schauen und kaufen viele Menschen auf ihren Telefonen ein.

Da Sie das Gerät, auf dem Ihre Besucher Ihre Website überprüfen werden, nicht kontrollieren können, muss Ihre Website die bestmögliche Erfahrung bieten, unabhängig vom Gerät.

‚Reaktionsfähigkeit‘ bedeutet, dass sich das Layout und der Inhalt einer Website je nach Größe des Bildschirms, den der Besucher verwendet, ändern. Eine reaktionsfähige Website passt sich automatisch an das Gerät an, auf dem Sie sie besuchen.

Wenn Sie Ihre Website gestalten, überlegen Sie, wie sie auf den 4 Hauptbildschirmtypen aussehen wird:

Der einfachste Weg, dies zu tun, ist die Verwendung eines guten Website-Builders, der dies berücksichtigt. Unsere erste Wahl ist immer Zyro, da alle ihre Web-Vorlagen vollständig reaktionsfähig sind.

Mobile Reaktionsfähigkeit ist besonders wichtig angesichts der Statistiken bezüglich mobilen Browsens und E-Commerce.

Laut Oberlo stammen 48,67% aller Web-Besuche in den USA von mobilen Geräten – das ist fast die Hälfte! Was E-Commerce betrifft, so liegt der aktuelle Marktanteil des mobilen E-Commerce-Verkaufs bei 72,9%.

Das ist zu viel, um es für jedes Unternehmen zu verpassen!

Zusammenfassung: Wie man das richtige Layout für Ihre Seite auswählt

Eine Website ist wie das digitale Zuhause Ihres Unternehmens.

So wie Sie möchten, dass Ihr stationäres Geschäft wunderschön, funktional und gastfreundlich ist – so sollte auch Ihre Website sein.

Das Layout Ihrer Website ist entscheidend für die Erfahrung Ihrer Besucher, und wir hoffen, dass diese Liste Ihnen geholfen hat, das beste Layout für IHRE Seite zu finden.

Wenn Sie ein Freiberufler sind und etwas Einfaches, aber Effektives benötigen, dann könnte ein Layout mit Hauptbild oder ein Einzelseiten-Layout für Sie passen. Wenn Sie Ihre Kreationen online verkaufen möchten, dann sind vielleicht die Raster- oder Karten-Layouts die, nach denen Sie suchen.

Sobald Sie das Layout kennen, das Sie auf Ihrer Website verwenden möchten, schauen Sie sich unseren vollständigen Leitfaden an, wie man eine Website gestaltet.