Ein Grid-System ist ein Gerüst, das im Design verwendet wird, um Elemente strukturiert und konsistent anzuordnen. Es besteht aus einer Reihe horizontaler und/oder vertikaler Linien, die die Seite in Abschnitte gliedern und Designern dabei helfen, Elemente wie Text, Bilder und Grafiken so zu platzieren, dass Übersichtlichkeit und ästhetischer Eindruck verbessert werden. Die Anzahl und Breite der Spalten und Zwischenräume folgen oft festgelegten strukturellen Richtlinien oder einem Designsystem. Dabei spielen insbesondere wahrnehmungspsychologische Aspekte eine entscheidende Rolle.

Die Berücksichtigung von Faktoren wie dem visuellen Wahrnehmungsablauf*1, der Millerschen-Zahl*2 sowie relevanter Gestaltgesetze*3 unterstützt den Wahrnehmungsprozess und bildet die Grundlage für eine leichte Zugänglichkeit.

Eine wahrnehmungspsychologische Auseinandersetzung beim Grid-Entwurf ist sehr wichtig, da ein Grid das unsichtbare Grundgerüst des Designs darstellt und – auch wenn es später für die Nutzer nicht mehr sichtbar ist – für die kompositorische Harmonie und Konsistenz des gesamten Designs verantwortlich ist. Darüber hinaus kann ein konsistent angewendetes Grid-System selbst ein prägendes Gestaltungselement sein, welches dem gesamten Design wiedererkennbar, von anderen unterscheidbar und ästhetisch macht.

 

Grid vs. Layout-Grid

Ein «Grid-System» besteht grundsätzlich aus einem «Grid» und einem «Layout-Grid». Dabei besteht das «Grid» aus einer bestimmten Anzahl gleich grosser Einheiten und bildet das zugrundliegende Rastersystem (in der nachfolgenden Abbildung rot gekennzeichnet). Durch die Kombination dieser kleinsten Zellen entsteht ein übergeordnetes «Layout-Grid» (blau gekennzeichnet), an dem sich die Seitenelemente im Design ausrichten.

Ein Gridsystem weist verschiedene Ebenen auf, die unterste ist das Grid, welches aus gleichgrossen Einheiten besteht.

In der Regel gibt es für ein Design nur ein seitenübergreifendes «Grid», aber je nach Seitentyp eine Reihe von «Layout-Grids». Hier sehen Sie ein asymmetrisches dreispaltiges Layout-Grid für eine Inhaltsseite aus einen meiner letzten Projekte. In der linken Spalte befindet sich eine sticky Inpage-Navigation, in der mittleren Spalte der Seiteninhalt und in der rechten Spalte eine Reihe von Funktions-Buttons.

 

Keyfacts

Begriff: Der Begriff «Grid» stammt aus dem Englischen und bedeutet «Gitter» oder «Netzwerk».

Synonyme: Auch Bezeichnungen wie «Gestaltungsraster» und «Rastersystem» werden verwendet.

Ursprung: Grids haben ihren Ursprung im Buchdruck des 15. Jahrhunderts und wurden später von Designern wie Jan Tschichold, Josef Müller-Brockmann und der Schweizer Schule*4 in den Designprozess integriert.

 

Welche Arten von Grids gibt es?

Neben horizontal und vertikal gliedernden Grids gibt es auch sogenannte «Modulare Grids», die eine Fläche sowohl horizontal als auch vertikal in Einheiten unterteilen. Diese Grid-Systeme sind besonders vielseitig und eignen sich für komplexere Layouts.

Horizontalels, vertikales und modulares Grid-System

Im westlichen Sprachraum, wo man in horizontaler Ausrichtung schreibt, spielen Raster, die eine Fläche in vertikale Abschnitte gliedern, im responsiven Webdesign eine geringe Rolle, da die Höhe der Textspalten durch die responsive Anpassung nicht vorhersehbar ist. Vertikale Dimensionen können im Webdesign daher nur dann zuverlässig geplant werden, wenn ausreichend Freiraum bzw. Pufferzonen berücksichtigt werden. Dies erschwert eine konsistente vertikale Gliederung im responsiven Kontext erheblich und macht vertikal gliedernde Grids in der Praxis oft unpraktikabel.

 

Nutzen eines Grids

Struktur trifft Ästhetik: Grids schaffen eine klare Struktur und ein einheitliches Erscheinungsbild.

Effizientes Arbeiten: Die Anwendung eines Grid-Systems unterstützt und vereinfacht den Gestaltungsprozess visueller Anwendungen und Systeme, wie Websites oder Printmedien.

Zugänglichkeit: Studien*5 zeigen, dass Designs mit einem strukturierten Layout die Verständlichkeit für den Benutzer um bis zu 50 % verbessern können, was Rastersysteme zu einem wirksamen Faktor für effektive Kommunikation macht.

 

Responsive Grid-Systeme

Im Print-Bereich bilden Grid-Systeme seit langem die Grundlage der meisten Designs. Aber auch bei der Gestaltung interaktiver Benutzeroberflächen spielen Grids eine wichtige Rolle.

Während im Print-Bereich vor allem kompositorische Aspekte und Anforderungen an die Lesbarkeit im Vordergrund stehen, stellt im Web-Design die Notwendigkeit der Entwicklung responsiver Raster eine zentrale Herausforderung dar. Responsivität in diesem Kontext bedeutet, dass sich das Design optimal an die Grösse des Ausgabemediums anpasst.

Responsive Grids dürfen daher nicht ausschliesslich fixe Dimensionen aufweisen, sondern müssen zumindest teilweise flexible Einheiten verwenden. Dazu gibt es zwei grundlegenden Methoden:

  1. für die Grid-Dimensionen prozentuale Werte benutzen (fluide Vorgehensweise)
  2. über sogenannte «Media Queries»*6 Anpassungen der Grid-Dimensionen vornehmen (adaptive Vorgehensweise)

Adaptiv vs. Fluid

Nachfolgend zwei unterschiedliche Grids, die ich mit dem «Ultimate Grid Generator» erstellt habe. Oben ein adaptives Grid-System, das über eine Reihe von Media Queries, wie z.B. @media (max-width: 768px) { … } angepasst wird; und darunter ein vollständig fluides Grid, das ganz ohne Media Queries auskommt und für die responsive Anpassung ausshliesslich prozentuale Berechnungen verwendet. Verkleinern Sie doch die beiden iframes mit der Handle-Bar (jeweils unten rechts) und beobachten, was passiert.

Adaptives Grid

Adaptive Anpassung über mehrere Media Queries:

@media (max-width: 768px) { margin: 0 30px }

@media (max-width: 640px) { gap: 15px }
@media (max-width: 480px) { margin: 0 20px; gap: 12px }

Fluides Grid

Fluide Anpassung des Grids mit der relativen CSS-Einheit vw:
margin: 0 max(15px, 4vw) und gap: min(30px, 4vw);

 

Herausforderungen beim Grid-Entwurf

Viele Designer empfinden die Erstellung und Planung responsiver Grids als extrem mühsam. Insbesondere die Berechnung der notwendigen Parameter stellt sich nicht so trivial dar, da alle Grid-Parameter miteinander in Beziehung stehen. Siehe dazu nachfolgende Gleichungen.

Gleichung zur Berechnung der Grid-Weiten.

Gleichung zur Berechnung der Grid-Weiten: oben ist die Gleichung so umgestellt, dass man damit die Spaltenbreite (cw) und unten die Gutterbreite (gw) errechnen kann.

 

Für die gleichmässige Verteilung der Spalten gibt es im CSS drei Möglichkeiten:

  • «space-between» verteilt den Freiraum zwischen den Spalten, so dass die erste und letzte Spalte direkt an den Rändern des Grids ausgerichtet sind.
  • Bei «space-around» wird jeweils 50% des Freiraumes um jede Spalte rechts und links angefügt.
  • Bei «space-evenly» wird der Freiraum sowohl zwischen den Spalten als auch ausserhalb der Spalten gleichmässig verteilt.

Distributionsmöglichkeiten der Spalten in einem Grid

 

Gestalterische Grundlagen

Auch sind vielen Designern die gestalterischen Gesetzmässigkeiten, die später die Effizienz bei der Platzierung von Elementen erhöhen und sich positiv auf das Layout auswirken, nicht im Detail bekannt. Daher ist es sehr wichtig die Grundlagen, also die Gestaltgesetze selbst zu verstehen, um nicht nur unreflektiert Best-Practice-Beispielen zu folgen, sondern auch «kreativ» mit einem Grid-System arbeiten zu können. So werden zum Beispiel von vielen Designern unreflektiert Grid-Systeme mit 12 Spalten erstellt. Die wenigsten kennen die Gründe dafür, sie folgen einfach bestimmten Standards, ohne zu wissen, wann es durchaus sinnvoll sein kann, davon abzuweichen.

Der Grund für die Verwendung eines 12er-Grids liegt darin begründet, dass die Zahl 12 eine sogenannte «hochzusammengesetzte Zahl»*7 ist. Dies ist eine Zahl, die durch mehr ganze Zahlen teilbar ist als jede andere kleinere Zahl.

Abgesehen davon, dass jede Zahl durch 1 und sich selbst teilbar ist, kann die «12» durch 2, 3, 4, 6, eine «10» hingegen nur durch eine 5 geteilt werden, so dass ein 12er Raster eine vierfach flexiblere Aufteilung des Layout-Grids in verschiedene Spaltenkombinationen ermöglicht als ein 10er Raster.

 

Häufige Missverständisse

Grid-Systeme sind nur für grosse Projekte sinnvoll. Falsch, auch kleine Projekte profitieren von einer klaren Struktur.

Grids schränken die Kreativität ein. Im Gegenteil, sie bieten einen Rahmen, innerhalb dessen kreative Lösungen entstehen können.

 

Empfehlungen für Grid-Newbies

Ich empfehle daher den Grid-Newbies nachfolgende Beiträge, um sich umfassend mit den Grundlagen von Grid-Systemen vertraut zu machen:

Geschichtlicher Rückblick und guter Überblick
Grid-System Guides
Design-Grundlagen / Gestaltgesetze
Technische Aspekte (CSS)

Wenn Sie die gestalterischen Grundlagen eines Grids verstehen, wird es Ihnen leicht fallen, Grid-Systeme zu entwerfen, die eine gute Zugänglichkeit und zugleich eine hohe Flexibilität besitzen. Damit schaffen Sie eine wesentliche Grundlage für ein kohärentes Benutzererlebnis.

 

Ultimate Grid Generator

Für Designer, die sich vor allem mit der Berechnung und Evaluierung der Grid-Dimensionen schwer tun, habe ich andere Hilfe im Angebot; und zwar habe ich eine kleine, aber sehr hilfreiche Anwendung programmiert: einen «Grid-Generator», der Sie dabei unterstützt, ein Grid-System zu entwerfen und in Echtzeit «responsive» zu evaluieren. Probieren Sie ihn doch einfach mal aus!

Hier geht´s zum «Ultimate Grid Generator»

 

 

Die Anwendung ist kostenlos und die erstellten Grid-Systeme lassen sich bequem als SVG, PNG oder HTML exportieren, um sie in anderen Anwendungen wie z.B. figma zu verwenden. Ich bin überzeugt, dass Ihnen mit diesem Tool der Entwurf eines responsiven Grids leicht von der Hand gehen wird.

 

Verweise:

*1: https://www.nngroup.com/articles/how-people-read-online/

*2: https://www.userbrain.com/blog/millers-law-important-rule-ux-design-everyone-breaks

*3: https://www.damteq.co.uk/articles/what-are-gestalt-principles-and-how-do-they-influence-ux/

*4: Schweizer Schule

*5: Studien zur Wirksamkeit von Grid-Systemen

*6: Media Queries stellen eine CSS-Technik dar, die es ermöglichen, gewisse Parameter einer Webseite basierend auf den Eigenschaften des Geräts oder des Anzeigefensters des Benutzers anzupassen. Dadurch kann sich ein Design optimal an unterschiedliche Bildschirmgrössen ausrichten.

*7: https://de.wikipedia.org/wiki/Hochzusammengesetzte_Zahl