Ein Gestaltungsraster ist ein unsichtbares Ordnungssystem aus Spalten, Zwischenräumen und Rändern, an dem sich Texte, Bilder und Bedienelemente auf einer Seite ausrichten. Es sorgt dafür, dass Breiten und Abstände über alle Seiten gleich bleiben. Josef Müller-Brockmann hat das Arbeiten mit dem Gestaltungsraster 1981 in seinem Buch Rastersysteme für die visuelle Gestaltung beschrieben.
- Gestaltungsraster (Rastersysteme)
Ein Ordnungssystem aus Spalten, Stegen und Rändern, an dem sich alle Elemente einer Gestaltung ausrichten.
Beispiel: „Das Gestaltungsraster der Website hat zwölf Spalten, die Karten belegen jeweils vier davon.“Auch: Rastersystem, englisch grid.
Abgrenzung zum Grid-System im Webdesign: Dort geht es um die Umsetzung mit CSS und Frameworks, hier um das gestalterische Prinzip, das für Druck und Bildschirm gleich gilt.
Woraus ein Gestaltungsraster besteht
Aus Spalten, die die Inhalte tragen, den Stegen dazwischen und den Rändern zur Kante. Ein Modulraster teilt die Fläche zusätzlich in Zeilen, ein Grundlinienraster richtet die Textzeilen auf einheitliche Abstände aus.
Gestaltungsraster im Webdesign
Im Web hat sich das Raster mit zwölf Spalten durchgesetzt, weil es sich vielfach teilen lässt. Auf schmalen Bildschirmen schrumpft es an festen Breakpoints auf vier oder zwei Spalten, die Inhalte rücken untereinander.
Gebaut wird es heute meist mit CSS Grid, das das W3C als zweidimensionales Layoutsystem für Benutzeroberflächen beschreibt. Wer das Gestaltungsraster im Entwurf festlegt, muss es in der Entwicklung nur noch übertragen.
Was ein Gestaltungsraster bringt
Ruhe und Tempo. Seiten mit gemeinsamem Raster wirken verwandt, auch wenn ihre Inhalte verschieden sind, und neue Seiten lassen sich schneller bauen, weil die Entscheidungen über Breiten schon gefallen sind.