Wenn ein Interface „irgendwie wackelig“ wirkt, liegt es selten an Farben oder Schrift. Häufig sind es Abstände: mal 12, mal 14, mal 18 Pixel – ohne erkennbares Muster. Nutzer merken das nicht bewusst, aber sie spüren die Unruhe. Für Teams wird es zusätzlich teuer: Jede neue Seite erfindet Abstände neu, Entwickler müssen raten, Reviews drehen sich um Kleinigkeiten.
Ein einfaches System für Abstände schafft Konsistenz. Es definiert wenige, wiederkehrende Werte für Innenabstände (Padding), Außenabstände (Margin) und vertikale Rhythmik. Das Ergebnis: schnelleres Layouten, klarere Komponenten und weniger „Pi-mal-Daumen“-Entscheidungen.
Warum konsistente Abstände mehr sind als „Optik“
Lesefluss, Orientierung und Hierarchie
Abstände steuern, was zusammengehört. Steht eine Überschrift zu nah an einem vorherigen Abschnitt, wirkt der Inhalt wie ein Block. Ist der Abstand zwischen Label und Eingabefeld zu groß, verliert das Formular Zusammenhang. Gute Abstände bauen Hierarchie auf: Kleine Abstände verbinden, größere trennen Bereiche.
Tempo im Team: weniger Sonderfälle, weniger Rückfragen
Ohne System entstehen ständig Einzelfälle: „Hier 22, dort 26, weil es besser aussieht.“ Das kostet Zeit in Design und Entwicklung. Mit einem klaren Raster aus wenigen Werten entsteht eine gemeinsame Sprache: „Nimm 16 zwischen Elementen, 24 zwischen Gruppen.“ Das reduziert Abstimmungsbedarf und macht Entscheidungen nachvollziehbar.
Skalierbarkeit: von einer Seite zur Produktoberfläche
Je größer ein Produkt wird, desto stärker zeigt sich Spacing-Chaos. Einzelne „schöne“ Screens lassen sich noch per Hand optimieren. Spätestens bei vielen Komponenten, Breakpoints und neuen Teammitgliedern lohnt sich ein System, das wiederverwendbar ist.
Spacing-Systeme verstehen: Skala, Rhythmus und Bausteine
Skala (Spacing-Scale): wenige Werte, oft genutzt
Ein Spacing-System ist eine Liste definierter Abstände, aus denen sich Layouts zusammensetzen. Ziel ist nicht, jeden denkbaren Abstand abzudecken, sondern mit einer kleinen Auswahl die meisten Situationen abzubilden. Dadurch entsteht Wiedererkennung und das Design wirkt „wie aus einem Guss“.
Zentral ist eine Spacing-Skala: zum Beispiel 4/8/12/16/24/32/48 (nur als anschauliches Muster, nicht als Regel). Wichtig ist die Konsequenz: Je weniger Werte, desto leichter bleibt das System.
Vertikaler Rhythmus: Absätze, Listen, Überschriften
Der vertikale Rhythmus beschreibt, wie Inhalte untereinander gestaffelt sind. Praktisch heißt das: Textblöcke, Listen, Überschriften und Module folgen wiederkehrenden Abständen. So entstehen Seiten, die schneller zu scannen sind. Hier lohnt es sich, typische Content-Fälle zu definieren: Abstand nach H2, Abstand nach H3, Abstand zwischen Absätzen, Abstand zwischen Abschnitten.
Innen vs. außen: Padding, Margin und „Gaps“
Viele Inkonsistenzen passieren, weil Innen- und Außenabstände vermischt werden. Ein einfacher Grundsatz hilft: Komponenten definieren ihren Innenraum (Padding) selbst, die Seite steuert den Abstand zwischen Komponenten. Wo möglich, ist ein „Gap“ zwischen Elementen oft robuster als einzelne Margins, weil er einheitlich wirkt.
Abstände festlegen: ein praktikabler Weg ohne Overengineering
Startpunkt: reale Screens statt Theorie
Am zuverlässigsten entsteht ein System aus echten Layouts. Dazu 3–5 repräsentative Screens nehmen (z. B. Startseite, Formular, Liste/Übersicht, Detailseite) und alle verwendeten Abstände sammeln. Danach werden ähnliche Werte zusammengeführt. Aus 14/15/16 wird zum Beispiel 16. Aus 23/24 wird 24. Das Ziel ist eine klare Reduktion.
Regeln formulieren, die im Alltag helfen
Ein System braucht ein paar einfache Regeln, die Entscheidungen abnehmen, etwa:
- Zwischen Elementen innerhalb einer Gruppe: kleiner Abstand (z. B. „S“).
- Zwischen Gruppen innerhalb eines Moduls: mittlerer Abstand (z. B. „M“).
- Zwischen Modulen auf einer Seite: großer Abstand (z. B. „L“/„XL“).
Damit kann im Team schnell entschieden werden, ohne jedes Mal optisch „neu zu fühlen“.
Was tun bei Sonderfällen?
Sonderfälle passieren: ein sehr dichtes Table-Layout, ein Hero-Bereich mit viel Luft, ein Onboarding-Screen. Statt die Skala sofort zu erweitern, hilft eine Frage: Ist der Sonderfall ein neues, wiederkehrendes Muster? Wenn nein, bleibt es besser bei bestehenden Werten und es wird über Layout-Umstellung gelöst (z. B. andere Gruppierung) statt neue Abstände zu erfinden.
Figma-Setup: so wird das System wirklich nutzbar
Abstände benennen: S/M/L ist oft besser als Zahlenchaos
Zahlen sind präzise, aber in Meetings oft sperrig. Verständliche Namen („XS, S, M, L, XL“) sind leichter zu kommunizieren. Hinter den Namen stehen feste Werte. Das Team spricht dann über Bedeutung (z. B. „Gruppenabstand“), nicht über Pixel.
Wer mit Komponenten arbeitet, profitiert stark von Auto Layout: Abstände zwischen Elementen werden als „Gap“ geführt, Padding liegt in der Komponente. So bleiben Karten, Listen oder Formularzeilen auch bei Textlängen stabil.
Komponenten so bauen, dass Abstände nicht „festkleben“
Typischer Fehler: Abstände werden mit Einzelobjekten oder manuellen Margins „gebaut“, statt sie als Teil der Layoutlogik zu definieren. Besser: Komponenten so konstruieren, dass sie mit ihrer Umgebung arbeiten. Beispiele:
- Buttons erhalten konsistentes Padding und definierte Mindesthöhe.
- Formularfelder haben gleiche vertikale Abstände zwischen Label, Input und Hilfe-Text.
- Cards steuern Innenabstände selbst; die Seite steuert den Abstand zwischen Cards.
Passend dazu kann der Einstieg in Figma Auto Layout helfen, wenn Layouts aktuell oft „kaputtgehen“, sobald Text oder Inhalte wechseln.
Designsystem-Notiz: Abstände sichtbar dokumentieren
Damit das System nicht nur im Kopf existiert, braucht es eine kleine, klare Dokumentation: Skala, 3–5 Regeln und Beispiele (z. B. Karten, Formular, Listen). Das muss keine riesige Wiki-Seite sein. Wichtig ist, dass neue Teammitglieder schnell verstehen, welche Abstände wofür gedacht sind. Für die Struktur von UI-Regeln ist eine saubere Designsystem-Dokumentation eine gute Referenz.
Umsetzung im Frontend: Übergabe ohne Interpretationsspielraum
Benennung als gemeinsame Sprache zwischen Design und Code
Ein Spacing-System funktioniert am besten, wenn Namen und Werte im Code genauso existieren wie im Design. Dann wird aus „24 Pixel Abstand“ ein wiederverwendbarer Token wie „space-m“. Das reduziert Missverständnisse: Entwickler müssen nicht raten, ob 20 „auch okay“ wäre.
Wichtig: Wenn es bereits ein Token-System gibt, sollten Abstände daran ausgerichtet werden. Das verhindert doppelte Systeme. Wer den Transfer von Design zu CSS strukturieren will, findet praktische Ansätze in Design Tokens von Figma bis CSS.
Typische Stolperfallen bei responsive Layouts
Spacing wirkt je nach Bildschirmgröße unterschiedlich. Große Abstände auf Desktop können mobil zu „endlosen“ Seiten führen. Statt mobil überall neue Werte zu erfinden, hilft ein klares Prinzip: Die Skala bleibt gleich, aber die Kombinationen ändern sich. Beispielsweise weniger große Abstände hintereinander, dafür mehr Verdichtung durch Gruppierung.
Bei Komponenten, die in unterschiedlichen Containern stecken, lohnt außerdem ein Blick auf Container Queries (Komponenten reagieren auf die Breite ihres Containers statt nur auf den Viewport). So bleibt Spacing modular, ohne unzählige Breakpoints zu pflegen.
Praktische Schritte für den nächsten Sprint
Diese Reihenfolge bringt schnell Ordnung, ohne das komplette Design umzuwerfen:
- 3–5 repräsentative Screens auswählen und alle verwendeten Abstände notieren.
- Werte clustern und auf eine kurze Skala reduzieren (Dopplungen entfernen).
- 3 Regeln festlegen: innerhalb einer Gruppe, zwischen Gruppen, zwischen Modulen.
- In Figma die wichtigsten Komponenten auf konsistentes Padding/Gap umstellen.
- In der Übergabe klare Namen verwenden (z. B. XS–XL) statt ad hoc Pixelwerte.
- Im Review gezielt nur Spacing prüfen: Was gehört zusammen, was nicht?
Entscheidungshilfe: wann die Skala erweitert werden sollte
- Kommt der neue Abstand in mindestens zwei Komponentenarten vor?
- Ja: Erweiterung prüfen, aber zuerst schauen, ob ein vorhandener Wert passt.
- Nein: besser Layout umstellen, nicht die Skala aufblasen.
- Entsteht der Sonderwert nur wegen „Gefühl“?
- Ja: an Regeln orientieren (Elemente, Gruppen, Module) und bestehenden Wert wählen.
- Nein, es gibt einen klaren Zweck (z. B. visuelle Trennung zweier Zonen): als Muster dokumentieren.
- Verursacht der neue Wert zusätzliche Komplexität im Code?
- Ja: sehr kritisch sein; lieber Kombinationen bestehender Werte nutzen.
- Nein: kann sinnvoll sein, wenn er wirklich wiederkehrend ist.
Häufige Fehler bei Abständen – und wie sie vermieden werden
„Fast gleich“ ist nicht gleich
12 und 14 wirken ähnlich, machen aber Systeme kaputt. Sobald mehrere fast-gleiche Werte existieren, entstehen unbewusst neue Varianten. Besser: konsequent runden und vereinheitlichen.
Komponenten mit Außenabständen ausstatten
Wenn eine Komponente selbst Außenabstände „mitbringt“, lässt sie sich schlechter wiederverwenden. Auf einer Seite passt es vielleicht, in einer anderen steht sie plötzlich zu weit weg. Solider: Komponenten definieren Innenabstände, das Layout außen.
Spacing ohne Typografie denken
Abstände wirken zusammen mit Schriftgröße und Zeilenhöhe. Wenn Text sehr dicht gesetzt ist, brauchen Elemente oft mehr Luft – und umgekehrt. Deshalb lohnt es sich, Spacing-Entscheidungen immer an echten Texten zu prüfen, nicht an Lorem Ipsum.
Unklare Reviews: alles auf einmal kritisieren
Wenn in Reviews Farbe, Typo, Copy und Spacing gleichzeitig diskutiert werden, geht Spacing unter. Besser: eigene Review-Runde für Layoutstruktur oder ein kurzer Block im Review, der nur Abstände/Grouping bewertet. Für eine strukturierte Vorgehensweise ist Design Review im Webdesign ein guter Anknüpfungspunkt.
Mini-Fallbeispiel: vom „Pixel-Salat“ zur klaren UI
In einem typischen Dashboard-Screen entstehen schnell 20+ unterschiedliche Abstände: zwischen Karten, in Karten, zwischen Tabellenzeilen, in Filtern, rund um Buttons. Nach dem Clustering bleiben oft 6–8 Werte übrig, die 90% der Fälle abdecken. Das Team merkt den Effekt besonders im Alltag: Neue Filter-Zeilen, neue Cards und neue Detailseiten sehen automatisch passend aus, weil die Bausteine dieselbe Logik nutzen.
Der größte Gewinn ist selten „mehr Schönheit“, sondern weniger Reibung: weniger Diskussionen, weniger Nacharbeiten, weniger Layout-Bugs durch uneinheitliche Margins.
