Gestaltung von Webseiten: Weißraum, Raster, Rhythmus

Eine harmonische Website fällt nicht durch Effekte auf, sondern dadurch, dass man sich sofort zurechtfindet. Dahinter stehen ein paar alte Regeln aus dem Buchdruck, die am Bildschirm weiter gelten.

T. 1Weißraum ist kein leerer Platz

Der Raum zwischen den Elementen einer Seite – Ränder, Abstände, Zeilenabstand – heißt in der Gestaltung Weißraum, auch wenn er nicht weiß sein muss. Er ist das wirksamste und billigste Gestaltungsmittel. Elemente, die nah beieinanderstehen, werden als zusammengehörig wahrgenommen; Abstand trennt. Eine Überschrift, die näher an ihrem Absatz steht als am vorigen, ordnet die Seite ohne jede Linie.

Viele unruhige Websites leiden nicht an zu wenig Gestaltung, sondern an zu wenig Weißraum. Jeder Bereich will auffallen, und am Ende fällt nichts mehr auf.

T. 2Ein Raster schafft Ruhe

Zeitungen und Bücher werden seit jeher auf einem Raster gesetzt: Spalten, Stege, feste Ränder. Webseiten profitieren davon genauso. Wenn Bilder, Textblöcke und Kästen an gemeinsamen Kanten ausgerichtet sind, wirkt die Seite ordentlich, auch wenn der Betrachter das Raster nicht bewusst sieht. CSS bietet dafür heute mit Grid und Flexbox gute Werkzeuge; ein Framework ist dafür nicht nötig.

T. 3Zeilenlänge und Schriftgröße

Für Fließtext gilt eine Zeilenlänge von etwa 45 bis 75 Zeichen als angenehm. Längere Zeilen ermüden, weil das Auge beim Sprung an den Zeilenanfang die Orientierung verliert. Auf großen Bildschirmen heißt das: Der Textblock braucht eine maximale Breite, auch wenn daneben Platz frei bleibt. Die Grundschrift sollte am Bildschirm nicht zu klein sein; 16 Pixel sind ein üblicher Mindestwert, viele Seiten nutzen mehr.

T. 4Wenige Schriften, klare Hierarchie

Zwei Schriften genügen fast immer: eine für Überschriften, eine für Text – oder eine einzige in verschiedenen Stärken. Die Hierarchie entsteht über Größe, Gewicht und Abstand. Wer fünf Überschriftengrößen, drei Farben und Kursivschrift gleichzeitig einsetzt, erreicht das Gegenteil von Ordnung.

T. 5Farbe sparsam einsetzen

Eine Grundfarbe, eine Textfarbe, eine Akzentfarbe – mit dieser Palette kommen viele gute Websites aus. Die Akzentfarbe markiert, was anklickbar oder wichtig ist. Wird sie überall verwendet, verliert sie diese Funktion. Farbe sollte außerdem nie das einzige Unterscheidungsmerkmal sein: Links brauchen zum Beispiel neben der Farbe eine Unterstreichung oder ein anderes Zeichen.

T. 6Rhythmus

Eine lange Seite braucht Wechsel, damit das Lesen nicht ermüdet: Textabschnitte, ein Bild, eine Tabelle, ein hervorgehobener Kasten. Dieser Rhythmus hilft auch beim Überfliegen, weil die Abschnitte unterscheidbar werden. Er sollte aber aus dem Inhalt kommen. Ein Bild, das nur die Textwand unterbrechen soll, aber nichts zeigt, ist Dekoration.

T. 7Mobil zuerst denken

Ein großer Teil der Besuche kommt heute von Smartphones. Das spricht dafür, eine Seite zuerst für den schmalen Bildschirm zu entwerfen: Eine Spalte, große Tippflächen, keine Tabellen, die seitlich aus dem Bild laufen. Die breite Fassung ergänzt dann Spalten, statt dass die schmale Fassung Elemente wegstreichen muss.

Wie die Navigation einer Website aufgebaut sein sollte, behandelt der Beitrag Menüs für Websites; die Bausteine im Quelltext stehen in der HTML-Tag-Liste. Die WCAG-Kriterien zum Kontrast erläutert das W3C.