Inhaltsbereich Navigation Navigation Fußzeile

Styles

“The first step in designing anything is not to ask how it should look, but whether it even should be.”
– Charles Eames

Ziel der Designphase ist es, die gestalterischen Vorgaben für die kommenden Entwicklungsphasen zu legen. Im Vordergrund steht die funktionale und ergonomisch zu bedienende Oberfläche, durch die Informationen und Funktionalitäten schnell vermittelt werden. Dabei lehnt sich das überarbeitete Design stark an den visuellen Stil, das Farbschema und die Typografie von zoll.de an und ergänzt dessen Style Guide.

Bei der Umsetzung neuer Fachverfahren orientieren sich das User Interface-Design und die Frontend-Entwicklung an den technischen und gestalterischen Vorgaben des Design Systems. Zudem müssen die Anwendungs-spezifischen Anforderungen beachtet werden, die von gegebenenfalls zugrunde liegenden Frameworks vorgegeben sind. Mögliche offene Punkte oder technische Konflikte werden im Team analysiert und bewertet und fließen gegebenenfalls zurück in das Design System.

Das Design ist schnörkellos und modern, die Elemente werden minimalistisch und zweidimensional gestaltet. Es wird auf Plastizität und Texturen verzichtet und Schlagschatten werden lediglich zur subtilen visuellen Unterstützung bei der Identifizierung von Zuständen eines Elements oder einer Komponente eingesetzt.

Die Typografie wird als starkes Gestaltungsmittel eingesetzt. Es gibt eine deutlich ausgeprägte Hierarchie, die durch Größen, Farben, Platzierungen und Abstände vermittelt wird und dadurch die Aufmerksamkeit der Nutzenden durch die Anwendung zum gewünschten Ziel führt. Für nicht-visuelle Ausgabeformen erreichen wir dies äquivalent durch eine sauber strukturierte und semantische Auszeichnung im Markup.

Generelle Konzepte

Die reduzierte Gestaltung bietet insbesondere auf mobilen bzw. Touch-Geräten Vorteile in der Bedienbarkeit und Usability. Außerdem werden weniger ladeintensive Grafiken und Style Sheets benötigt, um das gesamte User Interface darzustellen, was auch die Performance verbessert.

Breakpoints, Responsiveness & Orientierung

Darstellung und Bedienung der Anwendung richten sich nach den ermittelbaren Parametern der verwendeten Endgeräte. Hierzu werden Media Queries verwendet, mit denen man unter anderem Bildschirmgrößen und Orientierung der Geräte ermitteln kann, aber auch bevorzugte Farbmodūs wie beispielsweise Kontrastschemata und benutzerdefinierte Farben zur Verbesserung der Barrierefreiheit.

Hierbei gilt das Design-Prinzip, dass sich das Design an die spezifischen Bedürfnisse der Nutzenden anpasst, anstatt dass sich Nutzende der Anwendung anpassen müssen, was oftmals aus Gründen der Barrierefreiheit und Gerätekompatibilität nicht möglich ist.

Eine zulässige Ausnahme sind komplexe Tabellen: Diese können nicht sinnvoll im Responsive Design umgesetzt werden, da hierdurch die Zusammenhänge einer Datenmatrix verloren gehen würden. Hier ist es zulässig, dass Nutzende auf kleineren Bildschirmen vertikal und horizontal scrollen müssen, das Design System bietet hierfür ein entsprechendes Muster an.

Definition „Above & Below the Fold“

Ziel ist, die relevanten Inhalte möglichst unmittelbar sichtbar beim Laden einer Seite anzubieten. Da aber dieser initial sichtbare Bereich aufgrund der Vielzahl von Geräteklassen nicht bestimmbar ist kann das Ziel nur sein, die relevanten Inhalte möglichst weit nach oben in der Hierarchie eines Screens zu platzieren und auf für die konkrete selbstgestellte Aufgabe der Nutzenden irrelevantes Beiwerk zu verzichten.

Dies bedingt, dass insbesondere dann, wenn sich Nutzende bereits inmitten einer Formular-Strecke befinden auf schmückende Elemente wie z. B. Header-Bild, Teaser-Boxen, irrelevante Navigationsangebote oder ähnliche von der eigentlichen Aufgabe ablenkenden Inhalte verzichtet wird. Diese können dann nach Abschluss eines Formular-Prozesses wieder eingeführt werden, um Nutzende an dieser Stelle „abzuholen“.

Eigenarten der Betriebssysteme

Insbesondere bei Darstellung und Verhalten interaktiver Standard-Komponenten wird angestrebt, diese aus Gründen der Erlernbarkeit und Wiedererkennbarkeit möglichst nah an der großen Schnittmenge der Human Interface Guidelines der jeweiligen Betriebssystem-Hersteller zu halten.