Die Grundlagen des Website-Layouts - 99designs (2024)

Mit einem guten Website-Layout ist das so eine Sache: Oftmals ist es am besten, wenn man es überhaupt nicht bemerkt. Das bedeutet, wenn die Designerin ihren Job gut gemacht hat, wird der Nutzer die Produkteigenschaften, den Warenkorb, die Werbeangebote und – am wichtigsten – den Kauf-Button finden, ohne darüber nachdenken zu müssen. Schließlich kann man in der Zeit, in der man versucht herauszufinden, wie man eine Seite bedient, nicht auf ihren eigentlichen Inhalt achten.

Beim Website-Layout geht es darum, eine Balance zwischen Ästhetik und praktischen Nutzen zu finden. Die Seite sollte definitiv gut aussehen, aber noch wichtiger ist es, dass sie Nutzern so effizient wie möglich das bietet, wofür sie gekommen sind. Nutzer haben wenig Geduld für komplizierte Webseiten, weshalb die ersten zehn Sekunden eines Seitenbesuchs die höchste Absprungrate aufweisen. Es stimmt, ein gutes Website-Layout wird nicht immer dafür sorgen, dass ein Besucher auf der Seite bleibt (besonders wenn der Content enttäuschend ist), aber du willst mit Sicherheit nicht, dass es der Grund dafür ist, dass jemand deine Seite verlässt.

Damit du eine Seite erhältst, der deine Besucher nicht gleich wieder den Rücken kehren, haben wir diesen Guide zu den Grundlagen des Website-Layouts geschrieben. Wir erläutern, was gutes Design erreichen sollte, die wichtigsten Techniken für ein wirkungsvolles Website-Layout und die häufigsten Arten des Website-Layouts.

Die Ziele eines Website-Layouts
—

Es mag einfach klingen, aber das einzige Ziel eines Website-Layouts besteht darin, die Ziele der Website zu unterstützen, seien es Conversions, Markenbekanntheit, Unterhaltung oder ein anderes Ziel. Die Ziele einer Website werden durch Content zum Ausdruck gebracht und ein Layout-Design beschreibt, wie man diesen Content wirkungsvoll liefert. Daher sind hier die häufigsten Funktionen, die ein Website-Layout zu bieten hat:

• Darstellung von Informationen:Ein gutes Website-Layout ordnet Informationen in logischer Reihenfolge, ist übersichtlich, betont die wichtigsten Elemente und sorgt dafür, dass sich alles intuitiv und einfach finden und nutzen lässt.

• User Engagement:Ein gutes Website-Layout macht die Seite optisch ansprechend, führt den Blick des Nutzers zu einem bestimmten Punkt und ermutigt ihn, die Seite weiter zu nutzen.
• Branding: Ein gutes Website-Layout spielt auch beim Branding eine Rolle und nutzt Laufweite, Ausrichtung und Skalierung auf eine Weise, die mit der Marke eines Unternehmens übereinstimmt.

Diese Ziele steuern ein Website-Layout, aber bevor wir uns konkrete Website-Layouts ansehen, lass uns kurz genauer darüber reden, wie du diese Ziele realisierst.

Der Designprozess des Website-Layouts
—

Der Entwurf eines Website-Layouts sollte im frühen Stadium der Website-Entwicklung stattfinden – also kurz nachdem du die Strategie für deine Website festgelegt hast, aber noch bevor du dich in ein Grafikprogramm stürzt, um die Benutzeroberfläche zu erstellen.

Ein Website-Layout wird mithilfe eines Wireframes visualisiert, welches im Grunde eine skelettartige Karte ist, die zeigt, wie der Content zusammenpasst. Es ist wichtig die Erstellung des Wireframes vom Webdesign zu unterscheiden. Webdesign ist der gesamte Prozess, bei dem die Front-End Grafiken und andere visuelle Bestandteile der Website kreiert werden. Das Design des Website-Layouts ist ein großer Teil des Webdesigns und beginnt mit Wireframing. Idealerweise sollte das visuelle Design dem Wireframe-Layout folgen, damit die grafischen Elemente gezielt positioniert werden, statt auf vergänglichen ästhetischen Vorlieben zu basieren.

Da das nun geklärt ist, sind hier die nötigen Schritte, um ein Website-Layout zu entwerfen:

1. Bestimme alle Contentbereiche.Wireframes repräsentieren Content in der Regel mit einfachen Quadraten und Rechtecken, sei es ein Bild oder ein Textblock. Es ist wichtig im Vorhinein zu wissen, wie viel Content du hast und wie viel Platz jedes Element ungefähr einnehmen wird, damit du sie sorgfältig zusammen platzieren kannst.
2. Erstelle eine Reihe von Wireframes und Prototypen.Ein Layout kann auch nur mit Papier und Stift angefertigt werden, aber es gibt viele Programme (z. B. Whimsical), die den Prozess optimieren. Da Wireframes nicht besonders detailliert sein sollen, kannst du direkt mehrere gleichzeitig anfertigen. Selbst wenn du dich in deine erste Idee verliebst, solltest du mehrere Wireframes designen, um deine Fantasie zu erweitern und dir Optionen zu geben. Ohne schicke Grafiken, die dich ablenken, kannst du dich auf die User Experience konzentrieren und herausfinden, welche Anordnung für sie am intuitivsten ist. Denke an alle Bildschirmgrößen. Es ist empfehlenswert, mit dem Layout für Mobilgeräte zu beginnen und dich dann vorzuarbeiten.

>>Hier ist ein Guide zu den Regeln des User Experience Designs

3. Teste, sammle Feedback, überarbeite.Sammle Feedback von deinen Kollegen, sobald du mehrere Optionen hast. Programme wie Invision und Figma ermöglichen es dir, interaktive Prototypen zu erstellen, damit du Buttons und die Navigation problemlos testen kannst, ohne eine richtige Website erstellen zu müssen. Wenn die Testnutzer eine Bildschirmaufnahme machen, während sie den Prototypen navigieren, kannst du herausfinden, welche Probleme es mit dem UX Design gibt. Sobald du ein paar Notizen hast, gehe zurück zum zweiten Schritt und überarbeite alles, bis es perfekt ist.

Auch wenn dies die exakten Schritte sind, um ein Website-Layout zu erstellen, kann es schwer sein zu wissen, was ein Layout wirkungsvoll macht und was nicht, wenn du gerade noch am Anfang stehst. Im nächsten Abschnitt besprechen wir die speziellen Techniken, die du nutzen kannst, um deine Designentscheidungen zu leiten.

Die wichtigsten Techniken für ein wirkungsvolles Website-Layout
—

Website-Layoutdesign ist eine Jahrzehnte alte Praxis und das bedeutet, dass sich im Laufe der Jahre eine Reihe von Gepflogenheiten und Regeln herausgebildet haben, die Designer in ihrem Handwerk leiten. Im Folgenden findest du einige der hilfreichsten dieser Techniken:

Visuelle Hierarchie

Visuelle Hierarchie ist eine Art der Gestaltung, bei der den sechs Designelementen mehr Kontrast verliehen wird, um bestimmte Inhalte hervorzuheben. Zu diesem Zweck sind die wichtigsten Teile des Layouts die, die der Nutzer abhängig vom Ziel der Seite sofort erkennen muss. Diese beinhalten in der Regel Überschriften, Wertversprechen, Calls-to-Action und Nutzertools wie Navigation.

Visuelle Hierarchie kann sich auf verschiedene Arten zeigen, beispielsweise durch die Schriftart (Größe, Gewicht und sogar unterschiedliche Schriftpaarungen), das Anordnen wichtiger Elemente weiter oben auf der Seite oder durch die Verwendung von Komplementärfarben, um Elemente hervorzuheben.

>>Schau dir diesen Guide zu den sechs Regeln der visuellen Hierarchie an

Lesemuster

Lesemuster beschreiben, wie Nutzer üblicherweise Seiten überfliegen, und werden als Richtungslinien dargestellt (Vektoren, für die Mathe-Nerds unter euch). Da Studien zeigen, dass 79 % der Seitenbesucher eine Seite nur überfliegen, ist es wichtig, dies so einfach wie möglich zu machen. Dein Website-Layout mit einem bestimmten Lesemuster im Sinn zu designen ist ein effektiver Weg, dies zu erreichen.

Beim Einarbeiten der Lesemuster in deine Layouts musst du Elemente gezielt entlang der Blickrichtung des Betrachters platzieren. Die häufigsten Muster sind das Z-Muster (ein Zickzack-Vektor; nützlich für bildlastige Layouts) und das F-Muster (ein zeilenweiser Vektor; nützlich für textlastige Layouts).

>>Schau dir diesen Guide dazu an, wie man Lesemuster im Webdesign nutzt

„Above the Fold“ oder „Below the Fold“

Im Webdesign ist die „Fold“ die Linie, an der eine Website aufgrund der begrenzten Bildschirmgröße abgeschnitten ist. Content, der sichtbar ist, wenn die Seite lädt, wird als „Above the Fold“ bezeichnet und Content, bei dem der Nutzer runterscrollen muss, um ihn zu sehen, wird „Below the Fold“ genannt.

Beim Website-Layout sollte der wichtigste und/oder überzeugendste Content (z. B. Wertversprechen und CTA) oberhalb der Fold platziert werden, damit Nutzer nicht danach suchen müssen. Dieser Bereich ist bei den meisten Bildschirmgrößen ungefähr 1000 x 600px groß. Designer können die Fold auch nutzen, um interessante Grafiken und Texte abzuschneiden, um Nutzer dazu zu verlocken, herunterzuscrollen, und sie so weiterhin auf der Website zu halten.

Grid-Systeme

Ein Grid-System ist ein Layout basierend auf festen Maßen und Richtlinien. Das Grid besteht aus Spalten (festgelegte Bereiche zur Platzierung des Contents) und Zwischenräumen (leere Bereiche zwischen den Spalten).

Obwohl Grid-Systeme ursprünglich aus Printmagazinen und Zeitungen stammen, sind sie aufgrund der von ihnen erzeugten mathematischen Ordnung und Einheitlichkeit bei großen Mengen an Content im Webdesign allgegenwärtig. Gleichzeitig müssen Designer sich aber vor Eintönigkeit im Grid-System in Acht nehmen und diese Einschränkungen nutzen, um überraschende Arrangements innerhalb des Grids zu kreieren.

>>Schau dir hier die Geschichte und einen Guide zu Grid-Systemen an

Weißraum

Weißraum, manchmal auch Negativraum genannt, ist schlicht der Bereich eines Designs, der keinen Content enthält – als leerer Raum. Obwohl man ihn leicht übersehen kann und es oftmals verlockend erscheint, ihn mit Content zu füllen, kann Weißraum der wichtigste Teil eines Website-Layouts sein.

Überlege, wie eine Textzeile deinen Blick auf einer ansonsten leeren Seiten viel effektiver lenkt als auf einer Seite, die mit Content überladen ist. Viel Weißraum schafft einen Schwerpunkt und sorgt gleichzeitig dafür, dass die gesamte Komposition leichter lesbar ist. Im Gegensatz zu Druckseiten hat die Länge einer Website kein Limit, wodurch Designer sehr viel mehr Möglichkeiten haben, den Weißraum gezielt und großzügig zu nutzen.

>>Schau dir hier die 10 Wege an, Weißraum besser zu nutzen

Die häufigsten Arten des Website-Layouts
—

Website-Layouts werden selten von Grund auf entworfen; tatsächlich wird sogar oft empfohlen, dies nicht zu tun. Die meisten modernen Webseiten basieren auf üblichen Layout-Schemata, die immer und immer wieder mit kleinen Variationen verwendet werden.

Obwohl eine gewisse Originalität in jedem Design wichtig ist, sollen Webseiten sofort verstanden und genutzt werden. Wenn ein Nutzer sich also im Laufe der Jahre an eine bestimmte Art Layout-Design gewöhnt hat, ist es für Designer sinnvoll, bei diesen zu bleiben. Vergiss nicht, dass ein Layout letzten Endes praktisch sein muss und je weniger Zeit Nutzer damit verbringen müssen, ein neues Layout kennenzulernen, umso mehr Zeit widmen sie der eigentlichen Nutzung der Seite. Daher sind hier einige der üblichsten Arten des Website-Layouts:

Einspaltiges Layout

Ein einspaltiges Layout ist eines, dessen Content der Reihe nach in einer Spalte angeordnet ist, häufig in zentrierter Ausrichtung.

Viele Website-Layouts fangen hier an, da es empfehlenswert ist, Designs immer zuerst für Mobilgeräte zu gestalten und Webseiten aufgrund eingeschränkter Größe häufig in einzelnen Spalten angeordnet sind. Dieses Layout ist am nützlichsten für Landingpages oder Feed-basierten Content wie Social-Media und Blogs, da es die Menge der Seitenelemente reduziert und zum Scrollen ermuntert.

Zweispaltiges Layout

Das zweispaltige Layout, manchmal in einer Split-Screen-Anordnung, stellt Content nebeneinander dar.

Dieses ist nützlich, um die Gegensätzlichkeit zweier Elemente hervorzuheben (verschiedene Zielgruppen auf einer Bekleidungs-Website, eine Vorher-Nachher-Darstellung einer Dienstleistung oder zwei Zahlungsoptionen zum Beispiel). Es eignet sich auch, um Grafiken mit Texten auszubalancieren, und unterstützt gleichzeitig das Z-Lesemuster.

Mehrspaltiges Layout

Ein mehrspaltiges Layout wird häufig auch Zeitungs- oder Magazin-Layout genannt. Es eignet sich bei viel Content auf ein und derselben Seite.

Es ist üblich, ein Grid zu nutzen, um Ordnung und Hierarchie aufrechtzuerhalten und so den wichtigeren Elementen wie Body Content mehr Raum zu geben, wohingegen weniger wichtige Elemente wie ein Navigationsmenü, eine Sidebar oder ein Werbebanner weniger Platz erhalten. Es eignet sich für Unternehmenswebseiten, bild- oder textlastige Seiten, Onlinemagazine, User Dashboards und Shoppingseiten – also Webseiten mit viel Content und Kategorien, zu denen Nutzer geführt werden sollen.

Asymmetrisches Layout

Bei einem asymmetrischen Layout werden die Elemente in unterschiedlicher Größe und ungleichem Abstand zueinander arrangiert – alsonichtsymmetrisch. Doch obwohl es der Gegensatz zu einem Grid-System ist, bedeutet Asymmetrie nicht Chaos.

Balance ist in jedem Design wichtig und ein asymmetrisches Layout erreicht dies schlicht auf unerwartete Weise, beispielsweise durch die Kombination großer Bilder auf der einen Seite mit vielen kleineren Elementen auf der anderen. Es ist nützlich für eine stärkere Betonung, indem einige Elemente (entweder durch Größe, Farbe oder Platzierung) gegenüber anderen stark hervorgehoben werden. Außerdem kann es individuelle Lesemuster unterstützen (im Gegensatz zu denen, die wir zuvor erwähnt haben).

Marken, die sich unkonventionelle Designs leisten können, werden diesen Layout-Stil ideal finden – also Webseiten, die mit Kunst zu tun haben, abenteuerlustige Zielgruppen ansprechen oder ein innovatives Produkt hervorheben wollen.

Die ganze Welt der Website-Layouts
—

Ein tolles Website-Layout lässt deine Website nicht nur gut aussehen, sondern macht sie intuitiv. Es ist der erste Schritt in Richtung eines guten ersten Eindrucks und ermutigt Nutzer, auf der Seite zu bleiben und sich den gesamten Content anzuschauen, den eine Seite zu bieten hat.

Während diese Grundlagen des Website-Layouts dir einen guten Ausgangspunkt bieten können, solltest du alles daran setzen, ein außergewöhnliches Erlebnis für deine Seitenbesucher zu kreieren. Und der beste Weg zu einem innovativen Website-Layout besteht darin, mit einem professionellem Designer zu arbeiten.