So erstellen Sie ein effektives Website-Layout

Das Website-Layout bildet den strukturellen Aufbau einer Website. Damit Ihre Website Besucher konvertiert und Nutzer an Ihre Marke bindet, müssen die einzelnen Bausteine des Layouts effektiv zusammengesetzt werden. 

Im Folgenden stellen wir Ihnen die wichtigsten Begriffe kurz vor und zeigen Ihnen, wie Sie ein überzeugendes Website-Layout erstellen.

Elemente im Website-Layout

1. Header: Der obere Bereich einzelner Webseiten, der auf allen Seiten einer Website identisch bleibt.
2. Headerbild: Lässt sich als zentraler Bestandteil des Headers auf der Startseite nutzen.
3. Hauptnavigation: Befindet sich unter dem Header oder Headerbild und bildet die einzelnen Hauptbereiche einer Website ab.
4. Logo: Das Logo steht im Headerbereich und ist mit der Startseite verlinkt.
5. Inhaltsbereich: Der mittlere Teil einer Seite, der Inhalte in Form von Texten, Videos oder Bildern abbildet.
6. Topbar: Ein abgetrennter Bereich am oberen Ende des Headers, der Links zu den Social-Media-Kanälen, dem Login-Bereich oder dem Warenkorb abbildet.
7. Footer: Der abschließende Teil einer Website, der üblicherweise Links zum Unternehmen, Kategorien oder Kontaktinformationen angibt.
8. Sidebar: Bildet einen abgetrennten Abschnitt, der im rechten oder linken Inhaltsbereich einzelner Unterseiten zu finden ist.
9. Gestaltungsraster: Raster aus vertikalen Spalten, welche die Anordnung der Website-Inhalte bestimmen.
10. Whitespace: Informationsfreie, helle Flächen als Teil des Designs, welche die Auffälligkeit der Website-Elemente hervorheben.

Anforderungen an ein effektives Website-Layout

Das Website-Layout hat einen großen Einfluss auf die Nutzererfahrung und die Konversionsrate. Der folgende Abschnitt zeigt Ihnen, welche Anforderungen Websites erfüllen müssen:

Intuitive Bedienung

Ein funktionierendes Website-Layout zeichnet sich in erster Linie durch eine intuitive und einfache Bedienung aus. Die Funktion der Website sollte bereits auf der Homepage ersichtlich sein und die Besucher schnell an die gewünschten Informationen heranführen.

Übersichtliche Navigation

Die Website sollte über eine übersichtliche und leicht auffindbare Hauptnavigation verfügen, die den Besuchern einen sinnvollen Pfad zu weiteren Unterseiten bietet.

Responsives Layout

Damit die Nutzererfahrung auf unterschiedlichen Endgeräten identisch bleibt, ist ein responsives Website-Layout wichtig. In diesem Fall lässt sich eine Website problemlos auf einem Smartphone oder Tablet darstellen.

Anordnung

Die Anordnung der Website-Elemente spielt eine große Rolle bei einem effektiven Layout. Viele Webdesigner setzen bei der Anordnung daher auf ein Gestaltungsraster, um eine einheitliche Struktur zu ermöglichen.

Quelle: Red Stapler

Ein Website-Layout erstellen: Die Grundelemente

Header

Der Kopfbereich einer Website ist meist der erste Aspekt, der Ihren digitalen Besuchern ins Auge fällt. Dementsprechend sollten hier die wichtigsten Elemente für Ihr individuelles Unternehmen Platz finden, häufig auch in Form von Calls-to-Action. Gastronomen können hier zum Beispiel ein „Tisch reservieren”-Icon platzieren, wohltätige Organisationen können zum Spenden aufrufen, Onlinehändler auf Ihren Shop verweisen.

Verwenden Sie gut lesbare, klare Schriften. Bei ansonsten sehr minimalistisch gehaltenen Websites macht sich hier auch ein eindrucksvolles Headerbild gut, das die Aufmerksamkeit einfängt. Ist Ihre Website allerdings sehr bildgewaltig, eignet sich ein transparenter Header unter Umständen besser.

Ein Tipp: Nutzen Sie einen Header, der sich beim Scrollen verkleinert, damit die wichtigsten Informationen sichtbar bleiben, gleichzeitig aber der Inhaltsbereich nicht gut einsehbar ist.

Hauptnavigation

Die Einträge der Hauptnavigation unter dem Header führen zu den Hauptbereichen der Website und sind dementsprechend der wichtigste Anker für die Orientierung. Dementsprechend sollten die Einträge so klar und überschneidungsfrei wie möglich formuliert werden, damit Nutzer sofort wissen, wo sie welche Informationen finden können. Die Hauptnavigation sollte immer sichtbar sein, sich beim Scrollen also mitbewegen, und hierarchisch angeordnet sein: Die wichtigsten Bereiche werden zuerst genannt.

Unterpunkte der Hauptnavigation werden als Unternavigation bezeichnet und bieten dem Nutzer einen noch umfassenderen Einblick in die Seitenstruktur. Von mehr als zwei Navigationsebenen sollte allerdings abgesehen werden, da zu verschachtelte Strukturen schnell irritieren.

Logo

In der oberen linken Ecke der Website erwarten Nutzer das Unternehmenslogo. Dahinter versteckt sich in der Regel ein Link zur Startseite, damit User jederzeit wieder zum Ausgangspunkt zurückkehren können. Beim Design des Logos sollten Sie drei wesentliche Punkte beachten:

• Damit sich das Logo gut in den Header und die allgemeinen Sehgewohnheiten einfügt, sollte es im Querformat gehalten sein.
• Beachten Sie außerdem, dass das Logo auch auf dem kleinen Bildschirm von mobilen Endgeräten noch funktionieren muss – halten Sie es also klar und simpel, damit es auch stark verkleinert noch deutlich zu erkennen ist.
• Aus dem gleichen Grund sollten Sie darauf verzichten, Claims unter dem Logo einzufügen. Dieser Text ist nicht nur auf Smartphones kaum zu lesen, sondern wird auch von Google nicht als Text erkannt und zahlt sich somit nicht für SEO-Zwecke aus.

Inhaltsbereich

Hierbei handelt es sich um den eigentlichen Kern der Website, in dem Sie Ihren Content veröffentlichen. Achten Sie auf Übersichtlichkeit, gute Lesbarkeit und Struktur. Letztere erreichen Sie neben Überschriften auch durch Bilder, diese sollten allerdings nicht zu exzessiv eingesetzt werden. Das Gleiche gilt für bunte, grelle Farben. Lassen Sie das Design nicht vom Inhalt ablenken, sondern setzen Sie es gezielt ein, um Ihre Botschaft in Szene zu setzen.

Footer

Der Footer bildet die Fußzeile der Website und umfasst Links zu den wichtigsten unternehmensbezogenen Seiten (zum Beispiel „Über uns” oder „Kontakt”), rechtliche Hinweise (Datenschutzerklärung, AGB) und Social Media Buttons.

Dabei bietet der Footer nicht nur eine Navigation zu den wichtigen Unterseiten, sondern weist auch auf das Ende der Website hin. Daher sollte er sich visuell vom Inhaltsbereich absetzen, zum Beispiel durch eine eher dunkle Hintergrundgestaltung.

Gestaltungsraster

Am Gestaltungsraster lassen sich sämtliche Inhalte der Website anordnen. Es ist für den Nutzer unsichtbar, entscheidet aber wesentlich über das allgemeine Layout der Website.

Der Klassiker ist hier das Gitter-Layout, bei dem auf einen großen Bereich für eine Grafik ein in viele kleine Blöcke untergliederter Bereich für die unterschiedlichsten Inhalte folgt – Textfelder, Bilder oder Videos.

Das Power-Gitter ist dessen komplexere Form, die Quadrate, Rechtecke sowie freie Bereiche beinhaltet, in denen alle erdenklichen Arten von Content untergebracht werden können.

Whitespace

Whitespace bezeichnet die inhaltsleeren Bereiche einer Website und ist meist hell gehalten. Es handelt sich also quasi um den leeren Hintergrund. Dieser ist allerdings essentiell für eine gut designte Website und kann daher ebenfalls als wichtiges Website-Element bezeichnet werden.

Denn diese Bereiche frei von Inhalt sind es, die die Übersichtlichkeit der Website gewährleisten und dafür sorgen, dass die wichtigen Content- und Layout-Elemente herausstechen. Eine Website ohne Whitespace ist daher undenkbar.

Calls-to-Action

Eine Website als Marketing-Instrument besteht nicht zum Selbstzweck, sondern will Nutzer zu einer bestimmten Handlung animieren. Daher sind CTAs unerlässlich. Sie können zum Beispiel der Lead-Generierung dienen, indem ein Inhalt gegen Kontaktdaten getauscht wird, zum Teilen in sozialen Netzwerken aufrufen oder den Kaufabschluss fördern.

Wichtig: CTAs müssen klar formuliert sein und auffallen. Schließlich soll der Nutzer sie auf keinen Fall übersehen. So bietet sich eine Platzierung im Header oder in der Mitte eines spannenden Blog-Artikels an. Unübersehbar sind CTAs in Pop-up-Form, die im nächsten Abschnitt erläutert werden.

Quelle: Michael Filipp

Diese effektiven Elemente eignen sich je nach Anwendungsfall

Topbar

Die Topbar befindet sich am oberen Ende des Headers und umfasst zum Beispiel die Links zu Social-Media-Kanälen, eine Login-Funktion oder auch eine Suche. Dementsprechend eignet sich diese Erweiterung des Headers vor allem für komplexere Websites, die umfangreiche Inhalte oder einen Mitgliederbereich aufweisen.

Sidebar

Die Sidebar ergänzt die Hauptnavigation am linken oder rechten Rand der Seite. Hier sind meist auch niedrigere Navigationsebenen abgebildet, damit der Nutzer sich problemlos in allen Bereichen der Seite orientieren kann. Daher bietet sie sich vor allem für Websites an, die eine komplexe Seitenstruktur mit zahlreichen Unterseiten aufweisen – beispielsweise Online-Shops mit den unterschiedlichsten Produktkategorien.

Pop-ups

Pop-ups können zum Beispiel erscheinen, wenn Nutzer dabei sind, Ihre Website zu verlassen. Sie weisen die Besucher auf alternative Inhalte hin oder fordern sie zum Abonnieren des Newsletters auf. Entsprechend handelt es sich hierbei um einen effektiven Lead-Generator.

Wann Pop-ups erscheinen, kann frei festgelegt werden. Zeitlich festgelegte Pop-ups erscheinen in einem bestimmten Zeitintervall, Scroll-Pop-ups hingegen, sobald der Nutzer an einem bestimmten Punkt der Seite vorbei gescrollt ist und Klick-Pop-ups beim Klick auf einen bestimmten Seitenbereich.

Aber: Pop-ups können Nutzer auch schnell nerven. Daher sollten sie gezielt und nicht zu exzessiv eingesetzt werden. Pop-ups zur Lead-Generierung sind beispielsweise vor allem in Bereichen der Website sinnvoll, die der Nutzer mit hoher Wahrscheinlichkeit erst betritt, wenn er in seiner Buyer’s Journey bereits etwas weiter fortgeschritten ist.

Welche Arten von Website-Layout-Vorlagen gibt es?

Bei dem strukturellen Aufbau Ihrer Website haben Sie die Möglichkeit, auf vorgefertigte Website-Layouts zurückzugreifen. Mit einer professionellen Vorlage ersparen Sie sich so die manuelle Erstellung eines Layouts. Wir stellen Ihnen hierzu zwei unterschiedliche Methoden vor, um mit einer Website-Layout-Vorlage zu arbeiten: 

Vorlagen für Bildbearbeitungsprogramme

Die Layout-Vorlagen für Bildbearbeitungsprogramme bieten eine professionelle Grundlage für die visuelle Ausgestaltung einer Website. Sie können ein passendes Layout auswählen und dieses anschließend in Ihrem Grafikprogramm überarbeiten. Die Vorlagen nehmen Ihnen daher die Entscheidung über Struktur und Anordnung der Elemente ab.

HTML und CSS Layout-Vorlagen

Sie sind auf der Suche nach einem Code für eine effektive Layout-Vorlage? In diesem Fall eignen sich vorgefertigte HTML und CSS Layouts, die Sie etwa bei TemplateMonster finden. Diese Vorlagen stellen Ihnen das technische Fundament für Ihr Layout und Ihre Website zur Verfügung und sie lassen sich entsprechend nach Belieben verändern.

Quelle: Webflow

Eine funktionierende Website basiert unter anderem auf einem klar strukturierten Layout. Bei der Erstellung eines Website-Layouts haben Sie die Chance, den möglichen Pfad Ihrer Kunden aktiv zu bestimmen. Damit die eigene Website zu einem effektiven Kommunikations- und Vertriebskanal wird, sollte das Layout entsprechend detailliert geplant werden und im engen Austausch mit Marketing- und Vertriebsverantwortlichen entstehen.

Titelbild: Hal Gatewood / Unsplash