Gestaltungsraster verstehen

Warum wirken manche Seiten sofort aufgeräumt und andere chaotisch, obwohl sie dieselben Inhalte zeigen? Sehr oft liegt der Unterschied in einer unsichtbaren Struktur: dem Gestaltungsraster. Ein Raster ist ein System aus Spalten und Abständen, an dem alle Elemente einer Seite ausgerichtet werden. Der Betrachter sieht es nicht, aber er spürt es. Elemente stehen in Beziehung zueinander, Kanten fluchten, Abstände wiederholen sich. Das erzeugt Ruhe, Ordnung und Professionalität.

Das Gestaltungsraster hat eine lange Geschichte. Schon mittelalterliche Handschriften folgten festen Proportionen für Satzspiegel und Ränder. Im 20. Jahrhundert haben Schweizer Gestalter wie Josef Müller-Brockmann das Raster zu einem umfassenden System entwickelt, dessen Prinzipien bis heute jede Website, jede App und jedes Magazin prägen. Sein Buch „Rastersysteme für die visuelle Gestaltung“ von 1981 gilt nach wie vor als Standardwerk.

1. Die Bausteine eines Rasters

Abb. 1.1Aufbau eines Gestaltungsrasters

Die Spalten sind die Flächen, auf denen Inhalte stehen. Die Stege sind die festen Abstände zwischen den Spalten; sie sorgen dafür, dass nebeneinanderliegende Elemente nie aneinanderstoßen. Die Ränder trennen den Inhalt vom Bildschirmrand. Und die maximale Breite des Inhaltsbereichs verhindert, dass Inhalte auf sehr großen Bildschirmen unendlich auseinandergezogen werden. Ein Element darf eine oder mehrere Spalten überspannen, beginnt und endet aber immer an einer Spaltenkante.

2. Warum zwölf Spalten?

Im Webdesign hat sich das Raster mit zwölf Spalten als Standard durchgesetzt. Der Grund ist einfache Mathematik: Zwölf lässt sich durch 1, 2, 3, 4 und 6 teilen. Damit sind Layouts mit einer, zwei, drei, vier oder sechs gleich breiten Spalten möglich, aber auch unsymmetrische Aufteilungen wie acht zu vier oder neun zu drei. Kaum eine andere Zahl bietet so viele Möglichkeiten. Probieren Sie es aus:

Das Raster schränkt nicht ein, sondern ermöglicht Vielfalt mit Zusammenhalt. Eine Seite kann oben ein Bild über die volle Breite, darunter drei Karten und weiter unten einen Text mit Seitenleiste zeigen – und wirkt trotzdem wie aus einem Guss, weil alle Kanten auf denselben Linien liegen. Genau das ist der Unterschied zu einer Seite, auf der jedes Element nach Gefühl platziert wurde.

3. Typische Rasterarten

In der Praxis werden diese Arten kombiniert. Die meisten Unternehmenswebsites arbeiten mit einem mehrspaltigen Raster für die Seitenstruktur und einem einspaltigen Satzspiegel für längere Texte, der in der Mitte des Rasters sitzt und etwa sechs bis acht Spalten breit ist. So bleibt die Zeilenlänge im lesefreundlichen Bereich, wie im Modul Typografie beschrieben.

4. Aus dem Raster ausbrechen

Wer das Raster beherrscht, darf es bewusst brechen. Ein Bild, das über den Inhaltsbereich hinaus bis an den Bildschirmrand reicht, ein Zitat, das in den Rand ragt, oder eine Grafik, die zwei Abschnitte überlappt, erzeugen Spannung und lenken Aufmerksamkeit. Entscheidend ist, dass der Bruch als Absicht erkennbar ist. Das gelingt nur, wenn der Rest der Seite konsequent im Raster steht. Ein einzelner, klarer Ausbruch auf einer geordneten Seite wirkt kraftvoll; viele kleine Abweichungen wirken dagegen nachlässig.

Ein häufiger, gut funktionierender Ausbruch ist das sogenannte Vollbild: Ein Foto oder eine farbige Fläche nimmt die gesamte Bildschirmbreite ein, während der Text darauf im Raster bleibt. So entsteht Großzügigkeit, ohne dass die Ordnung verloren geht. Viele moderne Websites wechseln zwischen solchen breiten Flächen und Abschnitten innerhalb des Inhaltsbereichs und erzeugen damit einen angenehmen Rhythmus beim Scrollen.

5. Raster in der Praxis

Für die Umsetzung gibt es bewährte Werte. Ein Inhaltsbereich mit einer maximalen Breite von etwa 1200 bis 1320 Pixeln, zwölf Spalten und Stegen von 24 bis 32 Pixeln deckt die meisten Anwendungen ab. Auf Tablets reduziert sich das Raster oft auf acht, auf Smartphones auf vier Spalten mit kleineren Rändern. Gestaltungsprogramme wie Figma erlauben es, Raster als Hilfslinien über jeden Entwurf zu legen, und moderne CSS-Techniken wie Grid bilden das Raster direkt im Code ab. Wer eine bestehende Website beurteilt, kann mit einer Browser-Erweiterung ein Raster über die Seite legen und sehen, ob die Elemente wirklich fluchten. Oft zeigt sich dabei, dass kleine Abweichungen von wenigen Pixeln die Ursache für einen unruhigen Gesamteindruck sind.

Wichtig ist, das Raster einmal festzulegen und dann nicht mehr für jede Seite neu zu erfinden. Es gehört in das Designsystem wie Farben und Schriften. In der Zusammenarbeit mit Agenturen lohnt es sich, das Raster ausdrücklich zu besprechen und sich zeigen zu lassen, wie verschiedene Seitentypen darin aufgebaut sind. Eine Agentur, die ihre Entwürfe auf einem klaren Raster aufbaut, liefert in aller Regel auch sauberen, gut wartbaren Code.

6. Ein Beispiel aus der Praxis

Ein Hotel ließ seine Website über mehrere Jahre von verschiedenen Dienstleistern erweitern. Jeder brachte eigene Vorlagen mit, und am Ende gab es Seiten mit 960 Pixeln Breite, Seiten mit voller Bildschirmbreite und Seiten, deren Textblöcke mal links, mal mittig standen. Besucher empfanden die Website als unübersichtlich, obwohl die Inhalte gut waren. Bei der Überarbeitung wurde zunächst kein einziger Text verändert, sondern nur ein gemeinsames Raster eingeführt: zwölf Spalten, 1280 Pixel maximale Breite, Texte immer acht Spalten breit und zentriert im Raster, Bilder und Karten an den Spaltenkanten. Schon diese Ordnung ließ die Website wie ein neues, zusammenhängendes Angebot erscheinen. Neue Seiten entstehen seitdem schneller, weil niemand mehr über Breiten und Positionen nachdenken muss. Das Raster wurde zudem als Vorlage für Präsentationen und Datenblätter übernommen, sodass auch die gedruckten Unterlagen des Unternehmens einheitlicher wirken.

Das Raster ist damit weit mehr als ein technisches Detail: Es ist die Grundlage für einen einheitlichen, wiedererkennbaren Auftritt über alle Medien und Kanäle hinweg, vom Bildschirm bis zum Papier.

Stand: September 2026. Kursmaterial der Klarwerk Akademie.