User Interface

Raster und Abstände

Raster und Abstände helfen Ihnen dabei, Seiten systematisch aufzubauen. In diesem Guide erfahren Sie, wie Raster eingesetzt werden und wie Sie flexible Abstände zwischen Elementen berechnen.

Raster und Abstände
  • Raster
  • Abstände
  • Flexible Skalierungen

Raster

Raster helfen Ihnen bei der Strukturierung Ihrer Inhalte. Es gibt jedoch kein Standard-Raster, das auf alle digitalen Medien und Formate passt. Für jedes Kommunikationsmittel und für jeden Touchpoint gelten eigene Raster-Anforderungen. Indem Sie die Elemente vertikal und horizontal jeweils bündig ausrichten, erzielen Sie ein ausgewogenes Gesamtbild. Klare Bezugsachsen erleichtern die Nutzerorientierung.

Abstände

Klare Abstände helfen dabei, einzelne Elemente ganz unterbewusst voneinander zu unterscheiden. Verwenden Sie größere Abstände, um Elemente deutlich abzutrennen. Nutzen Sie kleinere Abstände, um sie in Gruppen zusammenzufassen.

Flexible Skalierungen

Je nach Anwendung können unterschiedliche Abstandsskalierungen verwendet werden. Interface-Anwendungen mit vielen Funktionen erfordern kleinere Abstände. Für Magazin-Inhalte sind größere Abstände erforderlich, die ein offenes Layout schaffen. Die Größe wird anhand der Base Unit sowie des jeweiligen Breakpoints skaliert. Die Abstandsskalierungen 2xl, 3xl und 4xl (siehe nachfolgende Tabelle) variieren je nach Bildschirmgröße.

Empfohlene Skalierungen

Name

Berechnung

Breakpoint Mobilgeräte

Breakpoint Desktop-PC

$dhl-spacing-xxs

Base unit * 0.25

4px

4px

$dhl-spacing-xs

Base unit * 0.5

8px

8px

$dhl-spacing-s

Base unit * 0.75

12px

12px

$dhl-spacing-m

Base unit

16px

16px

$dhl-spacing-l

Base unit * 1.5

24px

24px

$dhl-spacing-xl

Base unit * 2

32px

32px

$dhl-spacing-2xl

Exponentiell

40px¹

42px¹

$dhl-spacing-3xl

Exponentiell

50px¹

56px¹

$dhl-spacing-4xl

Exponentiell

64px¹

72px¹

¹ Größe abhängig von Viewport-Breite

Großzügige Skalierungen

Name

Berechnung

Breakpoint Mobilgeräte

Breakpoint Desktop-PC

$dhl-spacing-xxs

Base unit * 0.25

4px

6px

$dhl-spacing-xs

Base unit * 0.5

8px

12px

$dhl-spacing-s

Base unit * 0.75

12px

18px

$dhl-spacing-m

Base unit

16px

24px

$dhl-spacing-l

Base unit * 1.5

24px

36px

$dhl-spacing-xl

Base unit * 2

32px

48px

$dhl-spacing-2xl

Exponentiell

40px¹

66px¹

$dhl-spacing-3xl

Exponentiell

52px¹

90px¹

$dhl-spacing-4xl

Exponentiell

66px¹

126px¹

¹ Größe abhängig von Viewport-Breite