In der Welt des Webdesigns gibt es ein mächtiges Werkzeug, das oft im Verborgenen wirkt, aber dennoch maßgeblichen Einfluss auf die Gestaltung und Funktionalität von Websites hat: das Webraster. Doch was genau ist ein Webraster und wie kann es dazu beitragen, Websites übersichtlich, ästhetisch ansprechend und benutzerfreundlich zu gestalten?
Definition & Funktion
Webraster sind in der Definition „ein Ordnungssystem in der visuellen Kommunikation, das als Hilfsmittel die Organisation von grafischen Elementen auf einer Fläche (…) erleichtert.“ Doch was heißt das jetzt genau und wozu sind Raster im Webdesign nötig?
Sie bilden eine Grundstruktur bzw. das Grundgerüst einer Webseite. Sie helfen dem Designer beim Ausrichten und Ordnen von Seitenkomponenten – somit bilden sie einen modularen Ansatz für die Gestaltung. Wiederholende Raster auf verschiedenen Seiten oder Internetpräsenzen schaffen einen Wiedererkennungswert und wirken professionell. Hierbei ist zu beachten, dass eine ungerade Anzahl an Spalten eher bewegt wirkt, eine gerade Anzahl hingegen strahlt Ruhe, Strenge und Statik aus.
Arten von Rastern
Webraster gibt es in den verschiedensten Zusammenstellungen. Die bekanntesten sind: Block-Grid, Column-Grid, Modular-Grid und Hierarchical-Grid.
Das Block-Grid ist ein Einspaltenraster und wird häufig für Blogbeiträge bzw- Blogartikel verwendet. Es ist sehr gut geeignet für umfangreiche oder fortlaufende Textblöcke.
Beim Clumn-Grid haben wir mehrere, vertikal angeordnete Spalten. Diese haben alle eine proportionale Größe und immer den gleichen Abstand zueinander. Die Spalten können symmetrisch oder asymmetrisch angeordnet werden. Diese Art von Raster wird sieht man häufig bei Preisseiten oder Abonnements.
Schauen wir auf unseren Home-Screen auf dem Handy, finden wir einen Modular-Grid. Es besteht aus Spalten und Zeilen, welche ebenfalls in der Größe proportional sind und einen gleichen Abstand zueinander haben. Diese Art von Raster bietet die Möglichkeit, viele Elemente geordnet und gleichzeitig darstellen zu können. Eben, wie auf einem Home-Screen oder in Online-Shops.
Das Hierarchical-Grid besteht, wie das Modular-Grid aus Spalten und Zeilen. Diese können jedoch in der Breite und Höhe variieren. Somit kann der Blick gezielt auf bestimmte Elemente gelenkt werden. Nachrichten-Seiten oder Fotografen verwenden dieses Raster häufig.
Aufbau
Jetzt wissen wir, welche Raster es gibt. Doch woraus bestehen all diese Raster-Arten? Da wir im Webdesign oft nur im englischen kommunizieren, haben all diese Bestandteile englische Bezeichnungen. Ein Raster besteht aus Columns (Spalten) und manchmal auch aus Rows (Zeilen bzw. Reihen). Aus den Spalten und Zeilen entstehen Inhaltsmodule – in diesen einzelnen Modulen können Elemente angeordnet werden. Diese können über ein oder mehr Module gestreckt werden. Alle Module werden von einem Gutter, dem Freiraum, voneinander getrennt. Dieser hat im gesamten Raster eine festgelegte Breite. Vier kleine Module zusammen erben eine Spatial Zone. Um das Raster befindet sich ein Rahmen, welcher im Fachjargon auch Margin genannt wird; er ist nötig, um den Inhalt im Raster von der Außenkante des Bildschirms abzugrenzen.
Sobald Inhalt in einem Raster angeordnet ist, kann man sich bewusst dazu entscheiden, einige Elemente daraus ausbrechen zu lassen – diese werden dann Störer genannt und erlange maximale Aufmerksamkeit durch Stören des harmonischen Gesamteindrucks. Diese Methode wird häufig genutzt, um den Betrachter auf gewisse Aktionen aufmerksam zu machen.
Web- vs. Printdesign
Hören wir den Begriff „Raster“ wäre der erste Gedanke sicherlich im Print- und Layout-Bereich. Wo sind hier die Unterschiede und was gibt es für Hürden in beiden Bereichen zu überwinden?
Webdesign soll schlicht, einfach und nützlich sein. Nutzer suchen hier oft gezielt und müssen die wichtigsten Informationen schnell und unkompliziert rausfiltern können. Kleine Bilddateien sorgen für eine kurze Ladezeit. Jedoch besteht hier die Möglichkeit, interaktive und dynamische Elemente einzubauen.
Printdesign ist kreativ, informativ und inspirativ. Eine Broschüre beispielsweise wird öfter und mit mehr Aufmerksamkeit durchgelesen als eine Webseite. Tiefgründiger Content und hochauflösende Bilder sind hier genau richtig. Jedoch ist ein Print-Produkt nach dem Druck unveränderlich und für alle Exemplare gleich. Print-Produkte sind nur für eine kurze Zeit aktuell und werden schon nach einigen Tagen bzw. Wochen von neuen Informationen überholt.
Fazit
Zusammenfassend zeigt sich, wie nützlich und vielseitig ein Webraster sein kann. Es ermöglicht nicht nur eine strukturierte und ästhetisch ansprechende Webgestaltung, sondern auch eine effektive Organisation von Inhalten. Die klare Ausrichtung und Aufteilung erleichtert die Navigation für Besucher und verleiht der Website ein professionelles Erscheinungsbild. Diese Vorteile machen das Webraster zu einem unverzichtbaren Werkzeug für Webdesigner und Entwickler, die Websites von hoher Qualität erstellen möchten.