Raster, Abstände und Komponenten

Wireframes wirken oft unruhig, ohne dass jemand sagen kann, warum. Die Ursache ist fast immer dieselbe: Elemente stehen an beliebigen Stellen und in beliebigen Abständen. Raster und Abstandsskala beseitigen das – sie sind keine Gestaltungsfragen, sondern Werkzeuge der Ordnung und gehören deshalb schon ins Wireframe.

1. Das Spaltenraster

Ein Raster legt fest, wo Inhalte beginnen und enden dürfen. Das klingt einschränkend und ist eine Erleichterung: Statt bei jedem Element neu zu entscheiden, wählt man aus wenigen erlaubten Breiten. Das Ergebnis wirkt ruhiger, und die Umsetzung wird billiger, weil dieselben Aufteilungen mehrfach vorkommen.

Verbreitet sind zwölf Spalten, weil sich zwölf durch zwei, drei, vier und sechs teilen lässt. Damit sind Halbierungen, Drittel und Viertel möglich, ohne das Raster zu verlassen. Auf schmalen Bildschirmen bleibt davon meist eine einzige Spalte übrig – deshalb muss beim Entwerfen von Anfang an klar sein, in welcher Reihenfolge die Blöcke untereinander erscheinen.

2. Abstände sind Bedeutung

Abstände sind kein Weißraum, den man füllen müsste, sondern Aussagen über Zusammengehörigkeit. Eine Beschriftung, die dicht am Feld steht, gehört sichtbar dazu; steht sie gleich weit von zwei Feldern entfernt, muss der Leser raten. Das gilt für Formulare ebenso wie für Überschriften: Eine Zwischenüberschrift mit gleichem Abstand nach oben und unten wirkt zusammenhanglos – sie gehört zum folgenden Text und muss näher an ihm stehen.

3. Eine Abstandsskala festlegen

Statt frei zu wählen, legen Sie eine kurze Liste erlaubter Abstände fest und verwenden nur diese. Bewährt hat sich eine Skala, die sich verdoppelt: 4, 8, 16, 24, 32, 48, 64 Pixel. Jeder Abstand im Entwurf stammt aus dieser Liste, ohne Ausnahme.

Der Gewinn ist doppelt. Entwürfe wirken einheitlich, ohne dass jemand darauf achten müsste. Und die Umsetzung wird eindeutig: Aus „etwa 25 Pixel“ wird „24“, und die Frage, ob ein Abstand irgendwo absichtlich anders ist, stellt sich nicht mehr. Dieselbe Skala trägt später in das Designsystem hinein.

4. Bausteine erkennen

Beim zweiten oder dritten Wireframe fällt auf, dass sich Dinge wiederholen: ein Block mit Bild, Überschrift und Knopf; eine Liste mit Symbol und zwei Zeilen; eine Karte für eine Referenz. Das sind Komponenten – und sie zu benennen ist einer der wirksamsten Schritte im ganzen Konzept.

Sobald ein Muster benannt ist, wird es einmal entworfen und überall verwendet. Das spart nicht nur Zeit, sondern verhindert den häufigsten Grund für uneinheitliche Websites: dass dieselbe Sache auf fünf Seiten fünfmal leicht anders gebaut wurde, weil niemand gemerkt hat, dass es dieselbe Sache ist.

5. Was ins Wireframe gehört und was nicht

Hinein gehören: Raster, Abstände, Hierarchie, echte Überschriften, Beschriftungen von Knöpfen, die Reihenfolge auf schmalen Bildschirmen. Nicht hinein gehören: Farben außer Graustufen, echte Fotos, Schriftwahl, Symbole mit Bedeutung. Die Trennung ist nicht dogmatisch, sondern praktisch – alles aus der zweiten Liste zieht die Aufmerksamkeit auf sich und verhindert Rückmeldungen zur ersten.

6. Häufige Fragen

Muss ich das Raster im Wireframe sichtbar machen? In der Arbeitsfassung ja, beim Zeigen nein. Sichtbare Rasterlinien helfen beim Bauen und verwirren beim Betrachten.

Wie viele Komponenten sind normal? Eine mittelständische Website kommt mit 12 bis 20 aus. Deutlich mehr ist ein Hinweis darauf, dass Ähnliches nicht als ähnlich erkannt wurde.

Gilt die Abstandsskala auch für Schriftgrößen? Das Prinzip ja: wenige feste Stufen statt freier Wahl. Die konkreten Werte folgen anderen Regeln – dazu mehr im Modul zur Oberfläche.

7. Übung zum Selbermachen

Nehmen Sie einen Ausdruck einer Seite und messen Sie mit einem Lineal zehn Abstände nach. Notieren Sie die Werte. Wenn dabei mehr als fünf verschiedene Zahlen herauskommen, hat die Seite keine Skala. Legen Sie dann eine Skala mit sechs Werten fest und ordnen Sie jeden gemessenen Abstand dem nächstliegenden Wert zu – das ist in den meisten Fällen bereits die halbe Überarbeitung.

Stand: September 2026. Kursmaterial der Klarwerk Akademie. Methoden und Werkzeuge der Konzeption entwickeln sich weiter – die Grundprinzipien nutzerzentrierter Gestaltung bleiben.