Grundlagen
Auflösungsunabhängiges Design
Wir gestalten auflösungsunabhängig, um unser Design mit seinen Proportionen konsistent auf verschiedene Auflösungen, Endgeräte und Plattformen zu adaptieren.
Density Pixel
Density Pixel (dp) als Basiseinheit ermöglichen uns, konsistent alle Bestandteile unseres Designs, von räumlichen Dimensionen bis hin zu Animationen, auflösungsunabhängig zu skalieren und auf unsere Zielplattform zu adaptieren.
Skalierung des Designs zwischen hoher (links) und niedriger Auflösung (rechts).
DB UI Grid
Das dp-Raster basiert auf der Höhe des "x" der Lesetextgröße. Die meisten Verhältnisse / Maße in unserem UI Design orientieren sich in Abstand und Größe an einem 8-dp-Raster. Für kleinere Elemente wie Typografie und Icons kannst Du auch ein 4-dp-Raster verwenden.
Layoutklassen
Wir unterscheiden in vier Layoutklassen, die uns helfen, globale Layoutveränderungen zu steuern. So schaffen wir produktübergreifend ein kohärentes Design und eine Kompatibilität zu einander. Unsere Layoutklassen dienen als Rahmen, in denen sich Komponenten mit ihren spezifischen Breakpoints ausdehnen.
Layoutsektionen
Wir unterteilen unsere Layouts in der Vertikalen in einzelne Sektionen, die Elemente und Komponenten strukturieren. Die Sektionen zentrieren sich horizontal im Layoutbereich.
Layoutraster
Wir haben durchgängig ein 12-Spalten-Raster für alle Auflösungen. Je nach Auflösung variieren die äußeren Margins in ihrer Breite.
Layoutspacing
Wir unterscheiden zwischen globalen und lokalen Abständen. Beide bauen auf dem DB UI Grid auf. Globale Abstände definieren die Layoutstruktur der Seite, das verwendete Raster und die äußeren Margins. Die lokalen Abstände sind die Abstände zwischen den einzelnen Elementen innerhalb einer Komponente.
Ausrichtung
Durch die zentrierte Ausrichtung von Inhaltsbereichen schaffen wir ausgewogene Layouts im Stile der modernen Ikone. Der Inhaltsbereich dehnt sich symmetrisch um die Mittelachse aus und hat eine maximale und minimale Größe.
Ausdehnung
Der Inhalt kann sich variabel über die verschieden Layoutklassen ausdehnen oder eine feste Breite im Viewport einnehmen. Die Größe orientiert sich an der Breite des Viewports und dem Charakter des Inhalts.
Ende des oberhalb befindlichen Videos
SymmetrieWir verwenden die zentrierte Symmetrieachse in einem symmetrischen Layout, z.B. einem rein inhaltsbasierten Layout oder einem Layout mit Tabs.
Ende des oberhalb befindlichen Videos
SymmetrieshiftWir verwenden die verschobene Symmetrieachse in einem nicht symmetrischen Layout, z.B. einem Layout mit links fest angeschlagener Navigation und Inhaltsbereich
Schutzzonen
Jede Geräteklasse verfügt über einen vordefinierten Schutzraum für das Layout. Der Schutzraum befindet sich an den Komponenten einer Sektion, um eine möglichst hohe Flexibilität der Komponenten in verschieden Geräteklassen zu ermöglichen.
Aufbau
Layoutbereiche
Layoutbereiche sind die logische Strukturierung und Anordnung von Inhalten. Es muss mit minimalen Aufwand verstanden werden, wo man sich befindet, welche Inhalte man sieht und welche weiteren Möglichkeiten man hat. Jedes Layout verfügt über einen Header-, Inhalts- und Footerbereich.
Gruppierung
Wir achten darauf, dass wir zusammengehörige Elemente, Komponenten und Sektionen so gestalten und positionieren, dass sie optisch zusammen gehören. Das heißt, dass Abstände zwischen zusammengehörigen Elemente nicht größer sein können als deren Abstand zu Elementen außerhalb der Komponente.
Die optische Zusammengehörigkeit entspricht der Gruppierung
Die optische Zusammengehörigkeit entspricht nicht der Gruppierung
Weiter