Das Zoll Design System – DESY definiert die gestalterischen Prinzipien und die Komponenten-Bibliothek für ein einheitliches Erscheinungsbild aller online angebotenen Leistungen des Zolls. Es dient als zentrale Referenz für Fachseiten, Konzepter, Designer und Entwickler, um eine konsistente Benutzererfahrung und effiziente Entwicklungsprozesse zu gewährleisten.
Der folgende Leitfaden fasst die wichtigsten Informationen über die wesentlichen Bestandteile und deren Verwendung zusammen, um den angeschlossenen Fachverfahren die Umsetzung zu erleichtern.
Grundsätzlicher Seitenaufbau
Der einheitlich aufgebaute Seitenrahmen vereinfacht die Entwicklung neuer Dienstleistungen und sorgt für konsistente User Interfaces für die Endanwender. Gleichzeitig wird die Pflege zentraler Bausteine und ihrer Inhalte und Funktionen vereinheitlicht und erspart somit Mehrfachaufwände.
Der Seitenrahmen beginnt zwingend immer aus dem Header mit den darin enthaltenen Inhalten wie Zoll-Logo, Navigation, sowie Funktionen wie zum Beispiel dem Session Timer. Den Abschluss aller Seiten bildet der Footer, der Spielraum für individuelle Bedarfe der Fachverfahren bei den dort abzubildenden Inhalten lässt.
Die eigentlichen Seiteninhalte sind abhängig vom Anwendungszweck, beginnen aber grundsätzlich mit einem beschreibenden Seitentitel sowie den optionalen Breadcrumbs oder einer Fortschrittsanzeige. Neben den wesentlichen Inhalten können sie eine Seitenleiste links für eine mögliche Fortschrittsnavigation und einer Marginalspalte rechts für ergänzende Inhalte, Funktionen und Hilfen enthalten.
Gestaltungsraster und Breakpoints
Darstellung und Bedienung der Anwendung richten sich nach den ermittelbaren Parametern der durch die Nutzenden verwendeten Endgeräte. Hierzu werden Media Queries verwendet, mit denen man unter anderem Bildschirmgrößen und Orientierung der Geräte ermitteln kann.
Hierbei gilt das Design-Prinzip, dass sich die Anwendung 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.
Das Design System definiert ein gängiges 12-spaltiges Gestaltungsraster mit den Breakpoint-abhängigen Anordnungen und Breiten der Inhaltsspalten und Stege.
Mobile First
Grundsätzlich gelten die DESY-Regeln für alle Komponenten und Inhalte sämtlicher Anwendungen, die zur Nutzung dieses Design Systems angehalten sind. Die Verwendungszwecke und Qualitätsanforderungen sind bewusst Technologie- und Plattform-agnostisch formuliert, die Gestaltung erfolgt immer nach dem Mobile-First-Prinzip.
Das bedeutet, dass die Regeln für die überwiegende Anzahl von Formular-Elementen oder das visuelle Design nicht nur auf das stationäre oder das mobile Web anwendbar sind, sondern auch auf native Anwendungen für Android und iOS/iPadOS. Bitte beachten Sie, dass wir zu den nativen Komponenten keine Codes liefern können, da diese höchst Plattform-spezifisch und Technologie-abhängig sind.
Komponenten und Muster
Das Herzstück des Design Systems bildet die Komponenten-Bibliothek. Diese enthält alle UI-Bausteine wie die Formular- oder Navigationselemente, die in den Anwendungen benötigt werden. Die Komponenten sind modular und nach den Ideen des „Atomic Designs“ aufgebaut, um eine schnelle Anpassung und Wiederverwendbarkeit zu ermöglichen.
Eine detaillierte Dokumentation beschreibt das visuelle Design, die technischen Anforderungen sowie die Barrierefreiheit für jede Komponente und damit die vollständigen Akzeptanzkriterien. Die wachsende Anzahl von Mustern zeigt beispielhafte Implementierungen und bietet Orientierung für die Integration in bestehende oder neu zu erstellende Anwendungen.
Farbigkeit
Die festgelegten Farben spielen im Zoll-Design System eine zentrale Rolle auf der visuellen und der emotionalen Ebene. Sie prägen das vertrauenserweckende Erscheinungsbild und gewährleisten die Wiedererkennbarkeit über alle Anwendungen hinweg. Die Farben unterstützen die Bedienbarkeit, indem wichtige Elemente hervorgehoben und barrierefreie Kontraste sichergestellt werden; Abstufungen im Farbschema ermöglichen die weitere Strukturierung und Gewichtung in Komponenten.
Die Elemente werden minimalistisch und zweidimensional gestaltet, es wird auf Plastizität und Texturen verzichtet. Schlagschatten werden lediglich zur subtilen visuellen Unterstützung bei der Identifizierung von Zuständen eines Elements oder einer Komponente eingesetzt.
Die Style Sheets reagieren auch auf benutzerdefinierte Farben in den Endgeräten (z. B. Dark Mode oder Kontrastmodus) und stellen über entsprechende Media Queries angepasste Regeln zur Verfügung, die eine Wahrnehmbakeit und Lesbarkeit auch unter solchen Bedingungen gewährleisten.
Typografie
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.
Die BundesSans und BundesSerif als Hausschriftarten des Zolls und der Bundesregierung werden für sämtliche Fließtexte, Überschriften, Bildunterschriften, für funktionale Inhalte wie Beschriftungen und Eingaben in Formularen, Hinweise und Dialoge, für Navigationen und Menüs verwendet.
Intervalle und Abstände
Regeln für Abstände sorgen dafür, dass Inhalte geordnet und übersichtlich wirken, wodurch Nutzende sich leichter orientieren und Informationen aufnehmen können. Weissräume helfen, Elemente voneinander abzugrenzen und Hierarchien der Inhalte zu verdeutlichen. Sie verbessern die Erfassbarkeit von Informationen, die Lesbarkeit von Texten und verhindern eine visuelle Überfrachtung.
Barrierefreiheit und Usability
Das Ziel des Design Systems ist es, digitale Dienstleistungen klar verständlich und nutzerorientiert zu gestalten. Es stellt sicher, dass Inhalte und Funktionen intuitiv und effizient genutzt werden können und alle Benutzer, einschließlich Personen mit Behinderungen, gleichberechtigten Zugang zu Inhalten und Funktionen haben. Dazu werden vorgefertigte Bausteine bereitgestellt, die bereits nach den Kriterien der Usability und Barrierefreiheit nach BITV 2.0 überprüft wurden.
Diese Anforderungen stellen sicher, dass alle Benutzer, unabhängig von ihren Fähigkeiten oder dem verwendeten Gerät, die digitalen Angebote nutzen können. Barrierefreiheit wird als nicht-funktionale Anforderung definiert, in die Design- und Entwicklungsprozesse integriert und entsprechend getestet, um eine durchgängige Umsetzung zu gewährleisten.
Test- und Validierungskonzepte
Das Design System enthält Methoden zur Validierung der Komponenten auf Browser-Kompatibilität, mobile Nutzung und Gebrauchstauglichkeit. Regelmäßige Tests mit echten Nutzenden sowie automatisierte Testverfahren sind unerlässlich, um die Qualität der Implementierungen sicherzustellen. Fehler werden identifiziert und entsprechende Lösungen direkt in die Dokumentation zurückgespielt, inklusive Erkenntnissen zum inhaltlichen Verständnis.
Integration in Entwicklungsprozesse
Das Design System kann nahtlos in die bestehenden Entwicklungs- und Designprozesse integriert werden. Es ist kein starres Regelwerk, sondern eine flexible Richtlinie, die genug Spielraum für spezifische Anforderungen bietet. Durch die enge Zusammenarbeit zwischen Fachseiten, Konzeption, Design und Entwicklung wird eine reibungslose und an den Bedarfen orientierte Umsetzung gewährleistet.
Zukunftsperspektiven
Das Design System ist eine lebendes Dokument, das ständig weiterentwickelt wird – es wächst mit den Anforderungen der Fachverfahren und den Bedürfnissen der Nutzenden. Die Entwicklung neuer Komponenten erfolgt nach Bedarf auf Basis der im System festgelegten Standards, bestehende werden regelmäßig optimiert, wodurch die Komponenten-Bibliothek regelmäßig wächst. Dies ermöglicht es, schnell auf Änderungen im digitalen Umfeld zu reagieren und innovative, benutzerfreundliche Lösungen zu schaffen.
Best Practices für die Nutzung
- Frühzeitig einbinden
- Das Design System soll bereits in der Planungsphase eines Projekts konsultiert werden, um Inkonsistenzen zu vermeiden
- Kontinuierlich pflegen
- Das System wird regelmäßig überprüft und aktualisiert, um auf neue Anforderungen reagieren zu können.
- Kollaboration fördern
- Offene Kommunikation zwischen den Beteiligten ist entscheidend für die erfolgreiche Implementierung und Weiterentwicklung des Systems.