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.

Dieser Guide enthält

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¹