Ein Raster ist kein Gestaltungsmittel, das man sieht, sondern eines, dessen Fehlen man spürt. Es erzeugt Ruhe durch Wiederholung: gleiche Kanten, gleiche Abstände, gleiche Proportionen. Der Betrachter kann nicht benennen, warum eine Seite geordnet wirkt, aber er merkt es sofort, wenn sie es nicht tut.
Zwei Ebenen: Container und Raster
Der Container legt fest, wie breit Inhalte maximal werden. Ohne ihn läuft Fließtext auf großen Bildschirmen über 150 Zeichen pro Zeile, und das Auge findet den Zeilenanfang nicht zuverlässig.
Bewährt ist eine Kombination: ein äußerer Container um 1.280 Pixel für Raster und Karten, darin eine Textspalte um 700 Pixel für Fließtext. Damit bleiben Tabellen und Bildergalerien breit, während Text lesbar bleibt.
Das Raster teilt den Container in Spalten. Für die meisten Websites genügen drei Varianten: eine Spalte für Text, zwei für Vergleiche und Bildpaare, drei für Karten. Vier Spalten funktionieren nur bei kurzen Inhalten und brechen auf mittleren Breiten früh um.
Abstände: das eigentliche System
Der wirksamste Schritt ist, Abstände nicht einzeln zu wählen, sondern aus einer festen Reihe. Eine Reihe, die sich bewährt hat, basiert auf einem Grundwert von 4 oder 8 Pixel:
| Rolle | Wert |
|---|---|
| innerhalb einer Zeile, etwa Icon zu Text | 8 bis 12 Pixel |
| zwischen Absätzen | 16 bis 20 Pixel |
| innerhalb einer Karte | 24 Pixel |
| zwischen Karten in einem Raster | 24 bis 32 Pixel |
| zwischen Überschrift und Abschnitt | 16 Pixel darunter, 40 darüber |
| zwischen Abschnitten einer Seite | 64 bis 96 Pixel |
Zwei Regeln machen aus dieser Liste ein System:
1. Nur Werte aus der Reihe verwenden. Kein 27, kein 53. Wer bei jedem Element frei wählt, erzeugt genau die Unruhe, die niemand benennen kann.
2. Nähe bedeutet Zusammengehörigkeit. Der Abstand über einer Überschrift muss größer sein als der darunter, sonst wirkt sie, als gehöre sie zum vorherigen Abschnitt. Das ist der häufigste Abstandsfehler überhaupt.
Ausrichtung
Wenige Kanten sind besser als viele. Wenn alle Elemente einer Seite an derselben linken Kante beginnen, entsteht Ordnung, ohne dass man etwas tun muss. Jede zusätzliche Kante, etwa ein zentrierter Abschnitt zwischen linksbündigen, muss einen Grund haben.
Zentrierter Text funktioniert für kurze Elemente: Abschnittsüberschriften, Kurzbeschreibungen unter einer Überschrift, Schaltflächenzeilen. Für Fließtext über drei Zeilen ist er schlecht lesbar, weil jede Zeile an einer anderen Stelle beginnt.
Weißraum ist nicht leerer Raum
Abstand ist das billigste Gestaltungsmittel und das wirksamste. Eine Seite mit wenigen Elementen und großzügigem Raum wirkt hochwertiger als eine dicht gefüllte, unabhängig von der Qualität der einzelnen Elemente.
Der praktische Hebel: die Abstände zwischen Abschnitten großzügiger setzen als es zunächst richtig erscheint. 64 bis 96 Pixel zwischen den Hauptabschnitten einer Seite ist normal, nicht viel. Was auf einem Entwurf am großen Bildschirm luftig wirkt, ist auf dem Telefon meist noch zu eng.
Karten und wiederkehrende Muster
Für gleichartige Inhalte ein Muster, und dabei bleiben. Zwei Kartenmuster für eine Website genügen fast immer: eines für Leistungen oder Themenbereiche, eines für Beiträge.
Eine gute Karte hat: gleiche Innenabstände auf allen Seiten, ein festes Seitenverhältnis für das Bild, eine begrenzte Textlänge, und eine gleiche Höhe wie ihre Nachbarn. Der letzte Punkt bedeutet in der Praxis, dass Beschreibungstexte in der Länge begrenzt werden müssen, damit die Karten nicht unterschiedlich hoch stehen.
Die häufigsten Layoutfehler
- Kein Container. Fließtext über die gesamte Bildschirmbreite.
- Uneinheitliche Abstände zwischen gleichartigen Elementen.
- Überschriften näher am folgenden Absatz als am vorherigen, oder umgekehrt.
- Zu viele Kanten, weil einzelne Abschnitte anders ausgerichtet sind.
- Vier oder mehr Spalten bei Inhalten, die dafür zu lang sind.
- Feste Höhen, die Inhalt abschneiden, sobald der Text länger wird.
- Volle Bildschirmhöhe für den Einstiegsbereich, sodass der eigentliche Inhalt komplett unsichtbar bleibt.
Punkt 7 ist ein Muster, das gestalterisch attraktiv wirkt und praktisch schadet: Ein Besucher, der nach dem ersten Bildschirm nicht erkennt, dass es weitergeht, scrollt nicht. Ein angeschnittener nächster Abschnitt am unteren Rand löst das.
Wie das Raster auf schmalen Breiten umgebaut wird, steht in Responsive Design.