Was sind Layouts? Kurz gesagt: die räumliche Anordnung der Elemente einer Seite, also die Entscheidung, wo Text, Bilder, Navigation und Schaltflächen stehen, wie breit sie werden und welche Abstände sie trennen. Getragen wird ein Layout von einem Raster, und das 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.
Die gängigen Layout-Typen mit Beispielen
Fast jede Website setzt sich aus einer Handvoll wiederkehrender Layout-Typen zusammen:
Das einspaltige Layout. Eine zentrierte Inhaltsspalte, alles untereinander. Der Typ für Artikel, Ratgeber und Landingpages, weil er die Lesereihenfolge eindeutig macht und auf jeder Bildschirmbreite funktioniert. Diese Seite hier ist ein Beispiel.
Das Layout mit Seitenleiste. Inhalt plus schmalere Spalte für Navigation, Filter oder Zusatzinformationen. Sinnvoll bei Dokumentationen, Shops (Filter) und Portalen; auf dem Telefon wandert die Leiste unter den Inhalt oder in ein Panel.
Das Kartenraster. Gleichartige Inhalte als Kacheln in zwei bis vier Spalten: Leistungen, Blogbeiträge, Produkte, Teammitglieder. Der Typ lebt von der Gleichbehandlung, gleiche Kartenhöhen, gleiche Bildverhältnisse, gleiche Abstände.
Das geteilte Layout. Bildschirm halbiert, links Aussage, rechts Bild oder Formular. Beliebt für Einstiegsbereiche und Anmeldeseiten; braucht eine klare Regel, welche Hälfte auf schmalen Breiten zuerst kommt.
Das Magazin-Layout. Gemischte Blöcke unterschiedlicher Größe, große Aufmacher neben kleinen Meldungen. Der anspruchsvollste Typ, weil er ein starkes Raster braucht, um nicht in Unordnung zu kippen.
Eine normale Firmenwebsite kommt mit den ersten drei Typen aus, und sie darf sie mischen: einspaltig für Text, Kartenraster für Leistungen, geteiltes Layout für den Einstieg. Entscheidend ist, dass alle auf demselben Container und demselben Abstandssystem sitzen.
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.
Das 12-Spalten-Raster praktisch
Das klassische Werkzeug dahinter ist das 12-Spalten-Raster: Der Container wird in zwölf gleich breite Spalten mit festen Zwischenräumen geteilt, und jedes Element belegt eine Anzahl davon. Der Wert der Zwölf liegt in ihrer Teilbarkeit, sie ergibt saubere Halbierungen (6+6), Drittelungen (4+4+4), Viertelungen (3+3+3+3) und asymmetrische Teilungen wie 8+4 für Inhalt mit Seitenleiste.
So sieht die Anwendung bei den häufigsten Mustern aus:
| Muster | Spaltenbelegung |
|---|---|
| Textseite | 8 Spalten Inhalt, mittig, Rest Rand |
| Inhalt mit Seitenleiste | 8 + 4 |
| Geteilter Einstiegsbereich | 6 + 6 |
| Drei Leistungskarten | 4 + 4 + 4 |
| Vier Logos oder Kennzahlen | 3 + 3 + 3 + 3 |
| Aufmacher mit zwei Meldungen | 6 + 3 + 3 |
Zwei Praxisregeln dazu. Erstens: Das Raster ist ein Angebot, kein Zwang; ein Element darf aus dem Raster ausbrechen, etwa ein volles Hintergrundbild, aber der Ausbruch muss eine Entscheidung sein und kein Versehen. Zweitens: Auf schmalen Breiten kollabieren die zwölf Spalten schrittweise, aus 4+4+4 wird erst 6+6 mit Umbruch, dann eine Spalte. Diese Kollaps-Reihenfolge legt man pro Muster einmal fest und behält sie bei, das ist die halbe Breakpoint-Strategie: Die Umbruchpunkte richten sich danach, wann ein Muster zu eng wird, nicht nach Gerätemodellen. Die andere Hälfte, Bilder, Navigation und Tests, steht in Responsive Design.
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.