Gestaltungsraster und Hierarchien

Geschätzte Lektüre: 13 Minuten 177 Ansichten

Grundlagen und Begriffsbestimmung

Was ist ein Gestaltungsraster?

Ein Gestaltungsraster ist ein unsichtbares Ordnungssystem, das Flächen in proportionale und funktionale Bereiche unterteilt. Es dient als Gerüst für die Anordnung von Text, Bildern und grafischen Elementen. Die primäre Funktion besteht darin, Konsistenz über verschiedene Seiten, Formate oder Medien hinweg zu gewährleisten.

Ein Raster ist kein starres Korsett, sondern ein flexibles Hilfsmittel. Es schafft eine klare Struktur, die dem Betrachter Orientierung bietet und die Wahrnehmung von Informationen erleichtert. Durch die wiederkehrende Anwendung gleicher Rastermaße entsteht ein erkennbarer visueller Rhythmus.

Visuelle Hierarchie als Ordnungsprinzip

Während das Raster die räumliche Anordnung definiert, bestimmt die visuelle Hierarchie die Gewichtung der Elemente. Hierarchie bedeutet, dass nicht alle Informationen gleichwertig behandelt werden. Durch gezielte gestalterische Mittel entsteht eine Rangfolge der Botschaften.

Die Hierarchie lenkt den Blick des Betrachters: zuerst auf das Wesentliche, dann auf ergänzende Informationen. Sie beantwortet die Frage: Was soll der Betrachter zuerst sehen, was danach, und was kann er lesen, wenn er vertiefen möchte?

Die historische Entwicklung des Gestaltungsrasters

Mittelalterliche Proportionslehren

Die Idee, Flächen nach mathematischen Prinzipien zu teilen, ist nicht neu. Bereits im 13. Jahrhundert dokumentierte der französische Baumeister Villard de Honnecourt in seinem Skizzenbuch Konstruktionsmethoden für Architektur und Buchgestaltung. Seine Aufzeichnungen zeigen, dass Proportionen und geometrische Teilungen als Grundlage harmonischer Gestaltung dienten – lange bevor der Begriff des Rasters geprägt wurde.

Die mittelalterlichen Buchmaler arbeiteten mit festen Satzspiegelkonstruktionen. Sie verwendeten geometrische Verfahren, um Schriftblöcke auf der Buchseite zu positionieren und harmonische Seitenverhältnisse zu erzeugen.

Die Rationalisierung im 20. Jahrhundert

Der Schweizer Grafikdesigner Josef Müller-Brockmann systematisierte die Rastertheorie in der Mitte des 20. Jahrhunderts grundlegend. Sein 1961 erstmals erschienenes Werk „Gestaltungsraster“ wurde zum Standardwerk. Müller-Brockmann übertrug die konstruktiven Prinzipien der Moderne auf die Flächengestaltung.

Die Schweizer Typografie, auch Internationaler Typografischer Stil genannt, etablierte das Raster als verbindliches Gestaltungsinstrument. Vertreter dieser Richtung suchten nach objektiven, nachvollziehbaren Gestaltungsprinzipien, die subjektive Willkür ersetzen sollten. Das Raster bot die Möglichkeit, Gestaltung regelbasiert und lehrbar zu machen.

Vom Print zum Digitalen

Mit der Entwicklung digitaler Medien verlor das Raster nicht an Bedeutung, sondern gewann hinzu. Bildschirme erforderten flexible Systeme, die auf unterschiedlichen Ausgabegeräten funktionieren. Das responsive Webdesign führte zu einer Wiederentdeckung und Weiterentwicklung der Rastertheorie.

Anatomie eines Rasters: Die Grundelemente

Ein Raster besteht aus mehreren definierten Bestandteilen, die in ihrer Gesamtheit das System bilden:

Margin (Außenrand)
Der Margin bezeichnet den unbedruckten Rand um den Satzspiegel. Er fasst die Inhalte ein und schafft einen Ruheraum zur Blattkante hin. Die Breite des Margins beeinflusst maßgeblich die Wirkung der Seite: Schmale Ränder wirken dicht und raumgreifend, breite Ränder elegant und zurückhaltend.

Column (Spalte)
Die Spalte ist die vertikale Einheit, die primär für fortlaufenden Text vorgesehen ist. Die Anzahl der Spalten bestimmt die Flexibilität des Rasters. Tageszeitungen arbeiten oft mit 5 bis 7 Spalten, während wissenschaftliche Publikationen häufig zweispaltig gesetzt werden.

Gutter (Steg)
Der Gutter bezeichnet den Zwischenraum zwischen den Spalten. Er verhindert, dass nebeneinanderliegende Texte oder Bilder optisch verschmelzen. Die Breite des Gutters sollte deutlich geringer sein als die Spaltenbreite selbst.

Field (Zeilenfeld)
Das Zeilenfeld entsteht durch die horizontale Unterteilung der Seite. In Kombination mit den Spalten bilden sich rechteckige Felder, die als Platzierungszonen für Bilder oder Grafiken dienen.

Flowline (Grundlinie)
Die horizontale Führungslinie, auf der der Text ausgerichtet wird. Sie gewährleistet, dass Texte auf gegenüberliegenden Seiten oder in nebeneinanderliegenden Spalten auf gleicher Höhe stehen.

Die vier grundlegenden Rastertypen

Spaltenraster

Das Spaltenraster ist die einfachste Form des Gestaltungsrasters. Die Seite wird in mehrere vertikale Spalten unterteilt, die durch Stege getrennt sind. Texte und Bilder können entweder eine einzelne Spalte füllen oder sich über mehrere Spalten erstrecken.

Anwendung: Besonders geeignet für fortlaufenden Text wie in Büchern, Broschüren oder Zeitungen. Ein zweispaltiges Raster eignet sich für Sachbücher, ein dreispaltiges für Magazine.

Blockraster (Manuskriptraster)

Das Blockraster besteht aus einem einzigen, zusammenhängenden Satzspiegel. Es gibt keine Unterteilung in Spalten. Diese einfache Struktur eignet sich für fortlaufende Texte ohne komplexe Bildintegration.

Anwendung: Romane, Essays, wissenschaftliche Arbeiten mit wenig Bildmaterial.

Modulares Raster

Das modulare Raster entsteht durch die Kombination von vertikalen Spalten und horizontalen Zeilen. Es bildet ein Raster aus gleichförmigen Zellen, den Modulen. Diese Module können einzeln genutzt oder zu größeren Feldern zusammengefasst werden.

Das modulare Raster bietet maximale Flexibilität bei gleichzeitiger strenger Ordnung. Es ermöglicht komplexe Layouts mit vielen unterschiedlichen Elementen, die dennoch als zusammengehörig wahrgenommen werden.

Anwendung: Komplexe Informationsmaterialien, Geschäftsberichte, Zeitschriften mit hohem Bildanteil, Formulare, Datenblätter.

Hierarchisches Raster

Das hierarchische Raster folgt keiner gleichmäßigen Unterteilung, sondern passt sich den inhaltlichen Anforderungen an. Die Proportionen der Zellen variieren je nach Funktion und Bedeutung der Inhalte.

Dieser Rastertyp reagiert auf die spezifischen Anforderungen des Materials. Er wird häufig für Webseiten oder Plakate verwendet, wo die Aufmerksamkeit gezielt gelenkt werden muss.

Anwendung: Plakate, Webseiten, Titelblätter, komplexe Informationsgrafiken.

Raster in der medienübergreifenden Anwendung

Printmedien

In Printprodukten arbeitet das Raster mit festen, unveränderlichen Formaten. Die Proportionen sind absolut und werden in Millimetern oder Punkten definiert. Ein einmal entwickeltes Raster gilt für die gesamte Publikation und sorgt für Wiedererkennbarkeit über alle Seiten hinweg.

Die Herausforderung besteht darin, das Raster so zu wählen, dass es unterschiedliche Inhaltstypen aufnehmen kann: von reinen Textseiten über Bildstrecken bis zu komplexen Infografiken.

Bildschirmmedien

Digitale Medien erfordern flexible Rastersysteme. Die Darstellungsfläche variiert je nach Endgerät. Responsive Raster passen sich durch prozentuale Breiten und definierte Umbruchpunkte (Breakpoints) an unterschiedliche Bildschirmgrößen an.

Ein digitales Raster wird typischerweise in 12 Spalten unterteilt, da 12 durch 2, 3, 4 und 6 teilbar ist und somit maximale Flexibilität bietet. Auf mobilen Geräten wird dieses Raster häufig auf 4 oder 6 Spalten reduziert.

Environmental Design

Im räumlichen Kontext (Leitsysteme, Messestände, Beschilderungen) wird das Raster dreidimensional. Es definiert nicht nur Flächen, sondern auch Abstände und Positionierungen im Raum. Die Rasterlogik eines Leitsystems muss aus verschiedenen Perspektiven und Entfernungen funktionieren.

Die Herausforderung liegt in der Übertragung der zweidimensionalen Rasterlogik auf räumliche Situationen. Höhen, Blickwinkel und Lichtverhältnisse müssen berücksichtigt werden.

Hierarchie als Gestaltungswerkzeug

Prinzipien der Hierarchiebildung

Die visuelle Hierarchie entsteht durch das Zusammenspiel mehrerer Gestaltungsparameter:

Größe: Größere Elemente werden zuerst wahrgenommen. Eine große Überschrift dominiert den kleineren Fließtext.

Position: Elemente im oberen Bereich einer Seite oder eines Bildschirms werden früher erfasst als solche im unteren Bereich. Zentrale Positionen betonen Wichtigkeit.

Kontrast: Starke Kontraste in Farbe, Helligkeit oder Form lenken die Aufmerksamkeit. Ein roter Akzent in sonst schwarzer Typografie wird sofort wahrgenommen.

Farbe: Helle, gesättigte Farben wirken näher und wichtiger als gedämpfte Töne.

Schriftstärke und -lage: Fette Schnitte, Kapitälchen oder Kursivierungen erzeugen innerhalb von Textkörpern Hierarchieebenen.

Weißraum: Der Raum um ein Element herum betont dessen Bedeutung. Ein isoliertes Element wirkt wichtiger als ein von anderen Elementen umgebenes.

Die Wechselwirkung von Raster und Hierarchie

Raster und Hierarchie bedingen einander. Das Raster schafft die Plätze, auf denen die Elemente ihre Hierarchie entfalten können. Ein gut gewähltes Raster bietet Platz für dominante Elemente ebenso wie für zurückhaltende.

Die Hierarchie kann innerhalb des Rasters das Prinzip der Achsenbrechung nutzen: Ein Element, das bewusst die Rastergrenzen überschreitet, erhält besondere Aufmerksamkeit. Diese Technik muss jedoch sparsam eingesetzt werden, um ihre Wirkung nicht zu verlieren.

Praxis der Rasterentwicklung

Ausgangspunkt Inhalt

Die Entwicklung eines Rasters beginnt nicht mit mathematischen Überlegungen, sondern mit der Analyse der Inhalte. Welche Elemente müssen platziert werden? In welchen Größenverhältnissen stehen sie zueinander? Gibt es wiederkehrende Formate (beispielsweise feste Bildformate)?

Die Beantwortung dieser Fragen liefert die Anforderungen an das Raster. Es muss alle vorgesehenen Inhaltstypen aufnehmen können und gleichzeitig genügend Flexibilität für unvorhergesehene Kombinationen bieten.

Formatermittlung

Das Seiten- oder Bildschirmformat bestimmt die Grundproportionen des Rasters. Ein quadratisches Format erfordert andere Teilungen als ein Hoch- oder Querformat. Die klassische Satzspiegelkonstruktion nach kanonischen Proportionen (beispielsweise 2:3) kann als Ausgangspunkt dienen.

Feinjustierung

Nach der Festlegung der Grundstruktur folgt die Feinjustierung anhand von Beispielinhalten. Erst die konkrete Anwendung zeigt, ob die Stegbreiten ausreichend bemessen sind, ob die Spaltenanzahl sinnvoll ist und ob das Raster die gewünschte Flexibilität bietet.

Dieser Schritt erfordert Geduld und Experimentierbereitschaft. Ein gutes Raster entsteht selten beim ersten Entwurf.

Analyse bestehender Corporate-Design-Systeme

Fallbeispiel 1: Das Erscheinungsbild einer Tageszeitung

Die Neue Zürcher Zeitung (NZZ) arbeitet seit ihrer Neugestaltung 2006 mit einem strengen, sechsspaltigen Raster. Dieses Raster ermöglicht eine klare Trennung zwischen Nachrichten, Kommentaren und Anzeigen. Die Grundlinienausrichtung sorgt dafür, dass Texte auf gegenüberliegenden Seiten exakt auf gleicher Höhe stehen – ein Qualitätsmerkmal anspruchsvoller Typografie.

Das Raster schafft Vertrauen durch Verlässlichkeit. Der Leser findet sich schnell zurecht, weil die Anordnung der Elemente einem wiederkehrenden Muster folgt. Gleichzeitig erlaubt das Raster durch Spaltenzusammenlegungen flexible Gestaltungen für Sonderseiten.

Fallbeispiel 2: Ein internationaler Konzern

Das Erscheinungsbild der BMW Group basiert auf einem modularen Rastersystem, das über alle Medien hinweg angewendet wird. Vom Geschäftsbericht über die Website bis zur Messepräsentation gilt die gleiche Rasterlogik.

Im Printbereich arbeitet das System mit einem zwölfspaltigen Raster auf einem Format im Goldenen Schnitt. Für digitale Anwendungen wird dieses Raster in ein flexibles Zwölf-Spalten-Raster übersetzt, das auf unterschiedlichen Bildschirmgrößen funktioniert. Die Proportionen der Stege und Ränder bleiben dabei möglichst konstant.

Die Strenge des Rasters wird an wenigen, strategisch wichtigen Stellen durchbrochen – beispielsweise bei der Inszenierung neuer Fahrzeuge. Diese bewussten Regelverstöße erhalten durch ihre Seltenheit besondere Aufmerksamkeit.

Fallbeispiel 3: Kulturelle Institution

Das Erscheinungsbild des Museums für Gestaltung Zürich nutzt ein hierarchisches Raster, das auf die besonderen Anforderungen einer Kultureinrichtung reagiert. Wechselnde Ausstellungsformate, Plakate und Programme erfordern ein flexibles System.

Das Raster definiert weniger feste Spalten als vielmehr proportionale Beziehungen zwischen den Elementen. Es legt fest, wie sich Formate zueinander verhalten und welche Abstände einzuhalten sind, ohne jede einzelne Platzierung vorzugeben.

Diese Herangehensweise ermöglicht große gestalterische Freiheit bei gleichzeitiger Wahrung der Wiedererkennbarkeit. Die Institution erkennt man nicht an immer gleichen Layouts, sondern an der konsistenten Anwendung von Proportionen und Abständen.

Praktische Umsetzung: Ein Raster entwickeln

Arbeitsschritte im Überblick

Analyse: Welche Inhalte müssen platziert werden? Welche Formate sind fest vorgegeben?
Formatevaluation: Auf welchem Seiten- oder Bildschirmformat wird gearbeitet?
Rastertyp wählen: Spalten-, Block-, Modular- oder hierarchisches Raster?
Grobeinteilung: Anzahl der Spalten und Zeilen festlegen
Feinjustierung: Stegbreiten, Ränder und Grundlinienabstand definieren
Test: Reale Inhalte einfügen und auf Funktionalität prüfen
Optimierung: Das Raster anhand der Testergebnisse anpassen
Dokumentation: Das Raster mit allen Maßen und Anwendungsregeln festhalten

Glossar der wichtigsten Begriffe

Blockraster: Einfachste Rasterform mit einem zusammenhängenden Satzspiegel, vor allem für fortlaufenden Text geeignet

Column: Vertikale Spalte eines Rasters, primär für Text vorgesehen

Field: Rechteckiges Feld, das durch die Kombination von Spalten und Zeilen entsteht

Flowline: Horizontale Führungslinie für die Textausrichtung

Grundlinienraster: System horizontaler Linien, auf denen die Schrift ausgerichtet wird

Gutter: Zwischenraum zwischen den Spalten oder Modulen

Hierarchisches Raster: Rastertyp, der sich den inhaltlichen Anforderungen anpasst und ungleichmäßige Teilungen aufweist

Margin: Außenrand um den Satzspiegel

Modulares Raster: Raster aus gleichförmigen Zellen, das maximale Flexibilität bietet

Responsives Raster: Rastersystem für digitale Medien, das sich an unterschiedliche Bildschirmgrößen anpasst

Satzspiegel: Die von Text und Bildern bedeckte Fläche einer Seite

Spaltenraster: Raster mit vertikaler Unterteilung in mehrere Spalten

Literatur und weiterführende Quellen

Müller-Brockmann, J. (2015). Rastersysteme für die visuelle Gestaltung. Niggli. (Originalarbeit erschienen 1961)

Samara, T. (2014). Gestaltungsraster: Grundlagen und Anwendungen. Stiebner.

Elam, K. (2011). Typografie und Raster. Niggli.

Kordic, M. (2019). Raster im Webdesign: Grundlagen und Praxis. Rheinwerk.

Bringhurst, R. (2016). The Elements of Typographic Style. Hartley & Marks.