Jede Webseite beginnt auf einem weissen Feld. Das fertige Erscheinungsbild ist das, was Besucher anlocken und im Ranking punkten soll. Folgen Sie uns 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. Denn übersetzt steht es einfach nur für Entwurf, Skizze oder Plan. Das Layout einer Website bleibt trotzdem der wichtigste Schritt überhaupt. Es bildet die Grundlage für das endgültige Werk – die fertige Webseite. Die Ausgestaltung des Layouts erfolgt über mehrere Schritte, zudem gibt es verschiedene Techniken, an denen man sich orientieren kann. Wir stellen Ihnen heute einige der wirksamsten Methoden vor.
Wireframe – Visualisierung des Website Layouts
Die Planung des späteren Website Layouts beginnt mit dem sogenannten Wireframe. Erneut steht dieser Begriff für den rein konzeptionellen Entwurf. Ein Wireframe ist nicht viel mehr als eine leere, weisse Seite, auf der Sie dann die später enthaltenen Elemente platzieren – erstmal rein probeweise. Sie bestimmten jene Bereiche, in die der Content wandert, seien es Textblöcke, Bilder oder das Menü für die Navigation.
Auf einem Wireframe präsentiert sich alles in starren Formen. Quadrate, Rechtecke oder auch Kreise “simulieren” dabei, wie die mit Inhalten gefüllte Webseite später aussieht.
Best Practices für ein Website Layout
Kommen wir nun zu all den verschiedenen Formen und Gestaltungstechniken für ein Website Layout. In den folgenden Kapiteln finden Sie Details zu:
- Asymmetrie/asynchrones Website Layout
- Ein-, zwei- oder dreispaltiges Design nach dem Grid-System
- “Design by Fold”
Darüber hinaus gibt es noch weitere Techniken, an denen sich die Ausgestaltung orientieren kann, wie zum Beispiel das “Lesemuster”. Das Lesemuster steht für den Umstand, dass Besucher eine Webseite meist grob überfliegen, ehe sie länger darauf verweilen (Stichwort Verweildauer). Die visuelle Hierarchie, also Hervorhebung einzelner Design-Elemente zur bewussten Besucherführung, fliesst ebenso in nahezu jeden Gestaltungsprozess mit ein.
Asymmetrie im Website Layout
Beginnen wir mit dem “wilden” Vertreter unter den Website Layouts. 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 Führung des Besuchers damit nicht vernachlässigen möchte, nutzt eine entsprechende visuelle Hierarchie, um wichtige Elemente z.B. anhand von Farbe hervorzuheben.
Spalten und Grid-System
Website Layouts nach Spalten mit Grid-System unterliegen festgelegten Massen. In nur einer bis hin zu mehreren Spalten erfolgt die Platzierung des Contents. Derartige Grid-Systeme wirken allerdings manchmal eintönig. Diese Form des Website Layouts ist demnach vor allem für Seiten geeignet, die auf einer Fläche mit strikter Unterteilung (und meist viele) Informationen vermitteln wollen. Beispiel: Webseiten mit vielen Statistiken oder Listen. Die Aufteilung in Spalten eignet sich darüber hinaus aber auch für Webshops, die viele Produkte mit einzelnem Content in Bild- und Textform enthalten.
Orientierung am Fold
Fold ist das englische Wort für “Falz”. Im Webdesign steht das Fold für die Grenze des Bildschirms. Selbst bei mobil-responsivem Design gibt es immer Bereiche, die für den Besucher nur nach Scrollen sichtbar sind. Je nachdem, welchen Zweck die Website erfüllt, erfolgt eine stärkere oder eben schwächere Orientierung am Fold. Eine Landingpage zum Beispiel soll nach Möglichkeit “alles auf einen Blick” enthalten, sodass der Besucher nicht erst scrollen muss. Im Grunde ist die Fold-Technik eine Methode, die meist in Kombination mit einer anderen erfolgt – z.B. das Design in Spaltenform kombiniert mit “by Fold”.
Das fertige Website Layout: Ein Allrounder
Es gibt unzählige Faktoren, welche die letztliche Wahl des Website Layouts beeinflussen. Je nach Zielsetzung der eigenen Webseite 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
Und diese Punkte sind wiederum stark von der gewählten Zielgruppe abhängig. Ein professioneller Webdesigner berücksichtigt all diese Aspekte und unterstützt Sie bei Design und Erstellung einer Webseite mit nachhaltigem Erfolg.