Jede Webseite beginnt auf einem weissen Feld. Das fertige Erscheinungsbild ist das, was Besucher anlocken und im Ranking punkten soll. Wir begleiten dich im Entstehungsprozess bis hin zu einem vollendeten Website-Layout.
Das Layout ist mehr als der Planungsprozess
Im Grunde bezeichnet das Wort „Layout“ eigentlich die Planung an sich. Übersetzt steht es schlicht für Entwurf, Skizze oder Plan. Das Layout einer Website bleibt trotzdem der wichtigste Schritt — es bildet die Grundlage für das endgültige Werk: die fertige Webseite. Die Ausgestaltung läuft über mehrere Schritte, und es gibt verschiedene Techniken, an denen du dich orientieren kannst. Wir stellen dir einige der wirksamsten Methoden vor.
Wireframe – Visualisierung des Website Layouts
Die Planung beginnt mit dem sogenannten Wireframe — auch er steht für den rein konzeptionellen Entwurf. Ein Wireframe ist nicht mehr als eine leere, weisse Seite, auf der du die späteren Elemente platzierst: erst probeweise. Du bestimmst, in welche Bereiche der Content wandert — Textblöcke, Bilder, das Navigationsmenü.
Auf einem Wireframe präsentiert sich alles in starren Formen. Quadrate, Rechtecke oder Kreise „simulieren“, wie die mit Inhalten gefüllte Webseite später aussieht.
Best Practices für ein Website Layout
Kommen wir zu den verschiedenen Formen und Gestaltungstechniken. In den folgenden Abschnitten findest du Details zu:
- Asymmetrie/asynchrones Website Layout
- Ein-, zwei- oder dreispaltiges Design nach dem Grid-System
- „Design by Fold“
Es gibt weitere Techniken — etwa das „Lesemuster“. Das Lesemuster beschreibt, dass Besucher eine Webseite meist grob überfliegen, bevor sie länger verweilen. Die visuelle Hierarchie — also die gezielte Hervorhebung einzelner Design-Elemente zur Besucherführung — fliesst ebenso in nahezu jeden Gestaltungsprozess ein.
Asymmetrie im Website Layout
Beginnen wir mit dem „wilden“ Vertreter. Beim asymmetrischen System ist auf der Webseite alles bewusst so platziert, dass es den Anschein von Chaos erweckt — aber eben nur den Anschein. Dieses Layout orientiert sich weder an festgelegten Grössen für einzelne Inhalte noch an deren örtlicher Platzierung. Wer die Besucherführung dabei nicht vernachlässigen will, nutzt eine entsprechende visuelle Hierarchie — wichtige Elemente lassen sich z.B. über Farbe hervorheben.
Spalten und Grid-System
Website Layouts nach Spalten mit Grid-System unterliegen festgelegten Massen. Der Content verteilt sich auf eine oder mehrere Spalten. Solche Grid-Systeme wirken allerdings manchmal eintönig — sie eignen sich vor allem für Seiten, die auf einer Fläche mit strikter Unterteilung viele Informationen vermitteln wollen, etwa Webseiten mit Statistiken oder Listen. Die Spaltenaufteilung passt aber auch für Webshops mit vielen Produkten in Bild- und Textform.
Orientierung am Fold
Fold ist das englische Wort für „Falz“. Im Webdesign steht der Fold für die Bildschirmgrenze. Auch bei mobilem Design gibt es immer Bereiche, die erst nach dem Scrollen sichtbar werden. Je nach Zweck der Website fällt die Orientierung am Fold stärker oder schwächer aus. Eine Landingpage soll nach Möglichkeit „alles auf einen Blick“ enthalten — damit du nicht erst scrollen musst. Die Fold-Technik wird meist kombiniert eingesetzt, z.B. das Spalten-Design zusammen mit „by Fold“.
Das fertige Website Layout: Ein Allrounder
Es gibt unzählige Faktoren, die die letztliche Wahl des Website Layouts beeinflussen. Je nach Zielsetzung erfüllt es folgende Punkte:
- Optisch ansprechend
- Präsentation der Marke, dadurch Stärkung des Bekanntheitsgrades, Branding
- Einprägsam
- Intuitiv
- Förderung des User Engagements
- Praktischer Nutzen und effiziente Navigation
- Angenehmes Nutzererlebnis/User Experience
- Originalität
Diese Punkte hängen stark von der gewählten Zielgruppe ab. Ein professioneller Webdesigner berücksichtigt all diese Aspekte und unterstützt dich bei Design und Erstellung einer Webseite mit nachhaltigem Erfolg.