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
-
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