Eine für Smartphones optmierte Version wird in Kürze verfügbar sein
2.0.Stilelemente    2.5.Layout

2.5.Layout

Die Verwendung eines Layout-Rasters hilft Ihnen beim Design einer responsiven und modularen Webanwendung. Das Design von daimler.com beruht auf dem Prinzip des Bootstrap-Rastersystem, einem der populärsten HTML-Frameworks der Welt.

Mit diesem Framework haben Designer und Entwickler nützliche Tools an der Hand, um das Komponentenverhalten für verschiedene Bildschirmgrößen zu definieren.

Zum einen gehören fest definierte Breakpoints, von kleinen Smartphone-Displays bis zu großen Desktop-Displays, zu einem bestimmten Layout. Das Layout einer Komponente wird passend für jeden dieser Breakpoints definiert.

Zum anderen bietet das Bootstrap-Layout Klassen, mit denen Entwickler die Breite eines Elements über verschiedene Breakpoints hinweg definieren können.

Some Image
    2.0.Stilelemente      2.5.Layout      2.5.1.Breakpoints

    2.5.1.Breakpoints

    Das Daimler-Rastersystem nutzt vier feste Bildschirmbreiten als Layout-Breakpoints: extra-klein (XS), mittel (M), groß (L) und extra-groß (XL). In der folgenden Tabelle sehen Sie, wie diese Breakpoints definiert sind:

    Some Image

      Bei der Konzeption einer digitalen Anwendung für Daimler empfehlen wir, dass Sie für jeden dieser Breakpoints ein Layout anlegen, um alle während der Entwicklung möglicherweise aufkommenden Eventualitäten abzudecken. Hier können die Sketch-Bibliotheken helfen, die ab August 2019 verfügbar sind.

      2.0.Stilelemente      2.5.Layout      2.5.2.Raster

      2.5.2.Raster

      Bootstrap nutzt ein 12-Spalten-Raster. Die Zahl der Spalten verändert sich nicht mit der Zahl der Breakpoints – ein Mobildisplay und ein besonders großes Desktop-Display nutzen beide ein 12-Spalten-Layout. Mit zunehmender Bildschirmgröße vergrößert sich auch die Breite der Spalten, um die verfügbare Fläche zu füllen. Der Spaltenabstand beträgt 30 Pixel bei allen Breiten.

      Das Raster kann nicht unendlich wachsen – die maximale Breite beträgt 1.200 Pixel. Key Visuals können diese Breite mit 1368 überschreiten und das Raster als „Eyecatcher“ durchbrechen.

      Some Image
        2.0.Stilelemente      2.5.Layout      2.5.3.Zeichenflächen-Vorlagen

        2.5.3.Zeichenflächen-Vorlagen

        Für Sketch gibt es Zeichenflächen-Vorlagen. Sie finden für jeden Layout-Breakpoint eine Zeichenfläche mit bereits vordefinierten Rasterlinien. Diese Vorlagen sind der perfekte Ausgangspunkt für Ihr Design. Die Sketch-Dateien sind ab August 2019 verfügbar.

        Sketch Design Kit

        Some Image