Ausrichtung und Raster

Prinzip // Ordnen

Jedes Element richtet sich an etwas aus.

Und ein gemeinsames Raster verbindet alles, was darauf steht.

Die Regel in zwei Teilen. Ausrichtung: Kein Element steht für sich, jedes bezieht sich auf eine Kante, eine Achse oder eine Linie, an der auch andere stehen. Raster: Viele solcher Bezüge zusammen ergeben ein System. Was auf demselben Raster steht, gehört sichtbar zu einem Ganzen, auch wenn das Raster selbst unsichtbar bleibt.

Warum wir unsichtbare Linien überhaupt sehen, erklärt das Gesetz der guten Fortsetzung: Elemente, die auf einer Linie liegen, werden als Verlauf gelesen.

Hintergrund

Lidwell, Holden & Butler, Universal Principles of Design (Alignment): Ausgerichtete Elemente wirken geordneter, zusammengehöriger und leichter zu erfassen. Das Gestaltungsraster hat seine Wurzeln im Buchdruck (Satzspiegel) und wurde in der Schweizer Typografie der 1950er und 1960er Jahre zum System ausgebaut, u. a. von Josef Müller-Brockmann (»Rastersysteme für die visuelle Gestaltung«, 1981), Emil Ruder und Karl Gerstner. Im Web ist es mit CSS Grid seit 2017 in allen großen Browsern direkt im Code verfügbar.

Reduziert man die Zahl der visuellen Elemente und integriert sie in ein Rastersystem, entstehen klare Designs, die sich durch eine spezifische Ordnung auszeichnen. Diese Ordnung verleiht den Informationen Glaubwürdigkeit und schafft Vertrauen.
Josef Müller-Brockmann, Grafiker
Müller-Brockmann, J. (1981): Rastersysteme für die visuelle Gestaltung. Niggli, Teufen

Frei verteilt: Jede Form steht für sich

An einer Kante ausgerichtet: eine Gruppe

Die Kante, die man sieht, obwohl sie nicht da ist

An der Mittelachse

Auf einer Grundlinie (Baseline)

Fünf Formen, verschieden groß, verschieden in der Form. Erst frei verteilt: Jede steht für sich, das Ganze wirkt zufällig. Dann richten sie sich an einer Kante aus, und plötzlich ist es eine Gruppe. Die lila Linie zeigt die Kante einmal, danach verschwindet sie wieder. Gesehen wird sie trotzdem.

Dann die anderen Möglichkeiten: Mittelachse und Grundlinie (Baseline). Fragen: Welche Fassung wirkt am ruhigsten? Welche am festesten? Meist: die linke Kante am ruhigsten (sie ist am leichtesten zu verfolgen, weil sie gerade ist), die Grundlinie am festesten (alles steht, siehe Kräfte). Die Mittelachse erzeugt einen unruhigen, gezackten Rand auf beiden Seiten.

Kreise und Quadrate an derselben Kante wirken nicht ganz bündig. Das ist ein Fall für die optische Korrektur (siehe Phänomen Optische Korrektur).

Nach Augenmaß

Ein Raster (Grid) aus sechs Spalten (Columns)

Die Elemente rasten ein

Das Raster verschwindet. Die Ordnung bleibt

Spalte (Column)

Rinne (Gutter)

Rand (Margin)

Modul (Module): Spalten (Columns) und Zeilen (Rows) ergeben Rasterzellen

24 Spalten (Columns), 32 Zeilen (Rows), quadratische Zellen

Darauf gruppieren: Nähe, Ähnlichkeit, ein Ausreißer

Ein strenges Modulraster für ein Tablet im Hochformat: 990 × 1310 Pixel, 24 Spalten (Columns) und 32 Zeilen (Rows), Rand (Margin) 20, Rinne (Gutter) 10. Daraus ergeben sich quadratische Zellen von 30 × 30 Pixeln: (990 − 2 × 20 − 23 × 10) ÷ 24 = 30 und (1310 − 2 × 20 − 31 × 10) ÷ 32 = 30.

Auf so einem Raster lässt sich jedes Gestaltgesetz durchspielen: Nähe, Ähnlichkeit, gemeinsame Ausrichtung, Störung. Auf der zweiten Folie: eine Gruppe durch Nähe, eine durch Ähnlichkeit, eine Reihe mit einem Ausreißer.

In Figma: Frame auswählen, unter »Layout guide« (früher »Layout grid«) zwei Raster anlegen: Columns mit Count 24, Margin 20, Gutter 10 und Rows mit Count 32, Margin 20, Gutter 10. Mit Shift und Pfeiltaste springt eine Form 10 Pixel weit. Stellt man den großen Schritt in den Einstellungen (Nudge amount) auf 40, springt sie genau von Zelle zu Zelle.

Eine Startseite

Zwölf Spalten (Columns) dahinter

Bewusst gebrochen: Das Bild läuft aus dem Format

Dasselbe Raster im Code

.seite {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px; /* Rinne, Gutter */
  padding: 0 60px; /* Rand, Margin */
}
.karte { grid-column: span 4; }
.text { grid-column: 1 / 7; }

Wie viele Spalten hat Ihre meistgenutzte App?

Legen Sie gedanklich ein Raster darüber. Woran richten sich die Elemente aus?

Eine Startseite als Wireframe. Navigation, Überschrift mit Text und Button, ein Bild, drei Karten. Dann das Raster dahinter: zwölf Spalten. Jedes Element beginnt und endet an einer Spaltenkante. Die Karten belegen je vier Spalten, der Text sechs, das Bild fünf.

Zwölf Spalten sind im Web so verbreitet, weil sich zwölf durch zwei, drei, vier und sechs teilen lässt. Auf dem Handy sind vier Spalten üblich, auf dem Tablet acht (so etwa im Raster von Material Design, aus dem Gedächtnis, bitte prüfen).

Die dritte Fassung bricht das Raster bewusst: Das Bild läuft rechts aus dem Format. Ein Rasterbruch wirkt nur, weil alles andere im Raster steht.

Danach dasselbe im Code. CSS Grid beschreibt genau diese Struktur: Spalten (Columns), Rinne (Gutter, in CSS: gap), Spannweite eines Elements. Wer in Figma mit einem Raster entwirft, kann es eins zu eins übergeben.

Wann trägt das Raster nicht?

Wenn es zum Käfig wird: Manche Elemente brauchen eine feste Breite statt einer Spaltenbreite.

Wenn die Rechnung stimmt, aber das Auge nicht: Dann optisch korrigieren.

Wenn alles gebrochen wird: Ein Bruch wirkt nur vor einer Ordnung.

Verweise

Dahinter: Fortsetzung und Schicksal und Eindeutigkeit. Weiter: Nähe und Abstand, Weißraum und Optische Korrektur. Konstruieren: Gestaltungsraster und Spacing-System. Ausprobieren: Permutation.

Danke für's Mitmachen

https://christiannoss.de