Bild: Mit KI generiert

Manchmal ist es schwer zu sagen, warum ein Design nicht ganz überzeugt. Die Farben passen, die Typografie auch – und trotzdem wirkt alles ein wenig unruhig.

Das Problem ist fast immer dasselbe: Es fehlt ein Spacing-System.

Ein Spacing-System ist eine der wichtigsten Grundlagen im Webdesign — und gleichzeitig eine der am häufigsten übersprungenen. In diesem Artikel erfährst du, was ein Spacing-System genau ist, warum sich 4px und 8px als Standard durchgesetzt haben und wie du dein erstes eigenes System aufbaust.

Was ist ein Spacing-System überhaupt?

Ein Spacing-System ist eine feste Liste von Abstandswerten, die du für dein gesamtes Design verwendest. Statt jeden Abstand frei zu wählen, wie 13px hier und 22px dort, arbeitest du nur mit Werten aus dieser Liste.

Ein einfaches Beispiel für ein 8px-System sieht so aus:

4px, 8px, 16px, 24px, 32px, 48px, 64px

Der Eindruck, dass es eine Einschränkung ist, ist berechtigt, weil es eine ist - aber genau deshalb funktioniert es.

Wenn du jeden Abstand frei wählst, triffst du bei jedem Element eine neue Entscheidung. Bei zwanzig Elementen sind das zwanzig kleine Entscheidungen, die alle leicht unterschiedlich ausfallen. Das Ergebnis wirkt unruhig, auch wenn jede einzelne Entscheidung für sich genommen okay war.

Mit einem Spacing-System triffst du die Entscheidung einmal, am Anfang. Danach wählst du nur noch aus, welcher der vordefinierten Werte passt. Das beschleunigt deine Arbeit und sorgt gleichzeitig für visuelle Konsistenz, ganz automatisch.

Warum gerade 4px oder 8px?

Die Zahlen 4 und 8 sind nicht willkürlich gewählt. Drei Gründe haben sie zum Industriestandard gemacht:

Sie sind durch 2 teilbar. Bildschirme arbeiten mit Pixeln, und gerade Zahlen lassen sich ohne Rundungsfehler auf verschiedene Bildschirmauflösungen übertragen. Ungerade oder krumme Werte wie 13px oder 17px können auf manchen Bildschirmen leicht unscharf wirken.

Sie skalieren einfach. Wenn deine kleinste Einheit 8px ist, ergeben sich daraus logische nächste Schritte: 8, 16, 24, 32, 40. Jeder Wert ist ein Vielfaches der Basis. Das macht es einfach, neue Abstände zu finden, die zum System passen, ohne lange nachzudenken.

Große Designsysteme nutzen es. Material Design von Google basiert auf einem 8px-Grid, ebenso viele andere etablierte Systeme. Wenn du dieses Prinzip lernst, verstehst du nicht nur dein eigenes Design besser, sondern auch, wie professionelle Designsysteme aufgebaut sind, denen du in deiner Karriere noch oft begegnen wirst.

Manche Designer:innen nutzen 4px als Basis statt 8px, vor allem für sehr kleine Abstände wie zwischen Icon und Text. Beides ist richtig. Wichtig ist nur, dass du dich für eines entscheidest und konsequent dabei bleibst.

Dein erstes Spacing-System aufbauen

Du brauchst keine komplizierte Tabelle, um zu starten. Eine kleine, überschaubare Liste reicht völlig aus.

Schritt 1: Wähle deine Basis. Entscheide dich für 4px oder 8px als kleinste Einheit. Für den Einstieg empfiehlt sich 8px, weil es weniger Werte ergibt und dadurch leichter im Kopf zu behalten ist.

Schritt 2: Definiere eine Skala. Eine typische Skala auf Basis von 8px sieht so aus:

8px – 16px – 24px – 32px – 48px – 64px – 96px

Du musst nicht alle Werte sofort nutzen. Wichtig ist, dass diese Liste existiert und du dich daran hältst.

Schritt 3: Ordne Werte konkreten Zwecken zu. Statt bei jedem Element neu zu überlegen, welcher Wert passt, hilft es, Werten feste Bedeutungen zu geben:

• 8px für sehr enge Abstände, etwa zwischen Icon und Label
• 16px für Abstände innerhalb einer Komponente, etwa zwischen Textzeilen in einer Card
• 24px oder 32px für Abstände zwischen verschiedenen Komponenten
• 48px oder 64px für Abstände zwischen ganzen Abschnitten einer Seite

Schritt 4: Richte es in Figma ein. In Figma kannst du diese Werte als sogenannte Variablen speichern. Das bedeutet, du legst sie einmal an und kannst sie danach bei jedem Element auswählen, ähnlich wie eine Farbpalette. Wenn du später einen Wert änderst, passt sich dein gesamtes Design automatisch an.

Die häufigsten Fehler beim Einstieg

Zu viele Werte definieren. Ein System mit fünfzehn verschiedenen Abstandswerten ist kein System mehr, es ist nur eine längere Liste freier Wahlmöglichkeiten. Weniger Werte zwingen dich zu bewussteren Entscheidungen, und das ist der eigentliche Vorteil.

Inkonsistenz zwischen ähnlichen Elementen. Wenn zwei Cards auf derselben Seite leicht unterschiedliche Innenabstände haben, fällt das vielleicht nicht sofort auf, summiert sich aber zu einem insgesamt unruhigen Eindruck. Nutze für gleiche Elemente immer denselben Wert.

Das System nur für Außenabstände nutzen. Spacing bedeutet nicht nur, wie weit Elemente voneinander entfernt sind, sondern auch, wie viel Innenabstand ein Element selbst hat, das sogenannte Padding. Beides sollte aus demselben System kommen.

Mitten im Projekt das System wechseln. Wenn du auf halbem Weg merkst, dass dein 8px-System zu grob ist, ist das in Ordnung, aber ändere es bewusst und konsequent für das gesamte Design, nicht nur für einzelne Elemente.

Warum das jetzt zu lernen einen Unterschied macht

Ein Spacing-System ist eine der Grundlagen, die du am Anfang lernst und für den Rest deiner Designkarriere nutzt. Es ist auch die Grundlage für komplexere Konzepte wie Grid-Systeme und Atomic Design, denen du begegnest, sobald du an größeren Projekten arbeitest.

Der Unterschied zwischen einem Design, das wie aus einem Guss wirkt, und einem, das zusammengewürfelt aussieht, liegt selten an mangelndem Talent. Er liegt fast immer an genau dieser einen, oft übersehenen Grundlage.

Take Away Message

Ein Spacing-System ist keine Einschränkung, sondern eine Abkürzung. Statt bei jedem Abstand neu zu entscheiden, triffst du die wichtigste Entscheidung einmal am Anfang und profitierst danach bei jedem einzelnen Element davon. 4px oder 8px als Basis, eine kurze Skala, feste Bedeutungen für jeden Wert, ist alles, was du am Anfang brauchst. Wenn du das verinnerlichst, wird dein nächstes Design nicht nur schneller fertig, sondern wirkt auch von Anfang an aufgeräumter, ohne dass du dafür mehr Zeit investierst.