UX & UI Design

02 / Raster, Abstände & Responsive

|

Kernfrage

Wo steht was, auf jedem Bildschirm?

Layout bestimmt, wie Inhalte auf einer Fläche verteilt sind. Im Web ist diese Fläche nicht fest: Sie reicht von 320 Pixeln am kleinen Handy bis über 2000 Pixel am grossen Bildschirm. Ein Raster, ein klares Abstandssystem und wenige Umbruchpunkte machen das beherrschbar.

Lernziel: Du kannst ein Spaltenraster und ein Abstandssystem aufbauen und ein Layout für Handy, Tablet und Desktop planen.

Ordnung entsteht aus wenigen, wiederholten Massen.

2.1 / Das Spaltenraster

Spalten, Stege, Ränder.

Ein Raster teilt die Fläche in Spalten. Drei Masse bestimmen es:

01

Spalten

Meist 12 am Desktop, 8 am Tablet, 4 am Handy.

02

Stege

Der Abstand zwischen den Spalten, zum Beispiel 24 px.

03

Ränder

Der Abstand zum Bildschirmrand, am Handy mindestens 16 px.

Für Lesetext gilt zusätzlich eine maximale Breite von etwa 65 bis 75 Zeichen. Darum sitzt Text auf grossen Bildschirmen in einer schmaleren Spalte, auch wenn das Raster breiter ist.

Das Raster ist das unsichtbare Geländer.

2.2 / Abstände als System

Eine Skala statt Zufall.

Statt jeden Abstand neu zu wählen, nutzt man eine Skala, zum Beispiel 4, 8, 12, 16, 24, 32, 48 und 64 Pixel. Kleine Abstände halten zusammen, was zusammengehört, grosse trennen Abschnitte. Das Gesetz der Nähe macht diese Gruppen sichtbar.

In Figma und im Code werden die Werte als Tokens gespeichert, etwa space-4 für 16 Pixel. So sind die Abstände in Entwurf und Umsetzung gleich.

Nähe zeigt, was zusammengehört.

Ausprobieren
Web-Raster-Generator

Stell Spalten, Stege und Ränder pro Breakpoint ein, sieh das Raster am Beispiel Velowerk und übernimm es als CSS oder für Figma.

1 · Ausgangslage

Wähle eine Vorlage und passe sie an. Jeder Breakpoint hat sein eigenes Raster.

2 · Breakpoint

Abstands-Skala:
VelowerkSERVICE · VELOS · KONTAKT
Dein Velo läuft wieder.
Service, Reparatur und Beratung in Basel. Termin online buchen, Velo bringen, am Abend wieder abholen.
TERMIN BUCHEN
Service
Kurzer Text zum Angebot.
Reparatur
Kurzer Text zum Angebot.
Occasionen
Kurzer Text zum Angebot.

1440 px breit, verkleinert auf 42 % · Rosa: Spalten · Gelb: Ränder

Spaltenbreite

78 px

Inhaltsbreite

1’200 px

Begrenzt, Rand wächst auf 120 px

Teilbar durch

2, 3, 4, 6

So viele gleich breite Elemente passen nebeneinander.

Lesetext

6 Spalten

ca. 69 Zeichen pro Zeile bei 17 px. Über die ganze Breite wären es 141.

Das Raster ist stimmig: Stege und Ränder liegen auf der 8er-Skala.

3 · Übernehmen

/* Web-Raster, erzeugt mit kost.studio */

:root {
  --grid-cols: 4;
  --grid-gutter: 16px;
  --grid-margin: 16px;
  --grid-max: 1200px;
}

@media (min-width: 768px) {
  :root {
    --grid-cols: 8;
    --grid-gutter: 24px;
    --grid-margin: 24px;
  }
}

@media (min-width: 1200px) {
  :root {
    --grid-cols: 12;
    --grid-gutter: 24px;
    --grid-margin: 48px;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  padding-inline: var(--grid-margin);
  max-width: calc(var(--grid-max) + 2 * var(--grid-margin));
  margin-inline: auto;
  box-sizing: border-box;
}

/* Beispiel: Element über 6 Spalten */
.span-6 { grid-column: span 6; }
.full { grid-column: 1 / -1; }

Alle drei Breakpoints in einer Datei. Elemente legst du mit grid-column auf das Raster, zum Beispiel span 6.

2.3 / Responsive Design

Mobile first, dann breiter.

Mobile first heisst: Man gestaltet zuerst die schmalste Ansicht. Dort zeigt sich, was wirklich wichtig ist. Für breitere Bildschirme kommt Platz dazu, aber selten neuer Inhalt. Umbruchpunkte setzt man dort, wo das Layout bricht, nicht bei bestimmten Geräten.

Typische Muster: Spalten stapeln sich am Handy, die Navigation wandert in eine Tab Bar oder ein Menü, Bilder werden beschnitten statt verkleinert, Tabellen werden zu Karten.

Am Handy zeigt sich, was wichtig ist.

Übung

Ein Layout in drei Breiten

Aufgabe: Gestalte die Startseite von Velowerk für drei Breiten.

SCHRITT 1

Leg ein Raster fest: Spalten, Stege und Ränder für Handy, Tablet und Desktop.

SCHRITT 2

Definiere eine Abstandsskala mit fünf bis acht Werten.

SCHRITT 3

Gestalte zuerst die Handy-Ansicht, dann Tablet und Desktop.

SCHRITT 4

Prüfe jede Ansicht: Wo sitzt die Hauptaktion, ist der Text gut lesbar?

Auswertung: Was hast du am Handy weggelassen, und fehlt es am Desktop wirklich?

← 01 / Grundlagen

← 01 / Grundlagen

03 / Schrift im Interface →

03 / Schrift im Interface →

ÜBERSICHT

GLOSSAR