Design System Richtlinien
Vorwort
Das konzernweite Design System dient als zentraler Standard, um konsistente, barrierefreie und markenkonforme Nutzererlebnisse zu gewährleisten. Ziel ist es, die bestmöglichen Ergebnisse für alle Nutzenden zu erzielen und gleichzeitig die Skalierbarkeit und Effizienz für die Produktteams zu erhöhen.
Im Fokus stehen tatsächliche Herausforderungen und Lösungsansätze, keine persönlichen Präferenzen. Als Basis hierfür dient uns eine offene und transparente Kommunikation: was, wer, wie, wo, wann und wieso.
Aufbau
Das Design System ist in verschiedene Ebenen gegliedert, die gemeinsam eine flexible und skalierbare Grundlage für die Gestaltung und Entwicklung digitaler Produkte bieten:
Core
Der Core umfasst die grundlegenden Inhalte, die als universelle Basis für alle digitalen Produkte dienen. Dazu gehören:
- Foundations: Tokens für Farben, Schriften, Größen, Abstände, sowie Inhalte wie Icons und andere grundlegende Designprinzipien.
- Komponenten: Standardisierte UI-Komponenten, die auf den Foundations aufbauen und grundlegende Funktionen bereitstellen.
- Pattern: Standardisierte UX-Patterns, die auf den Foundations und Komponenten aufbauen und eine Standardisierte Nutzererfahrung sicherstellen.
Der Core gewährleistet Konsistenz und Effizienz über alle Produkte hinweg und definiert die unverzichtbaren Standards für Design und Entwicklung.
Extensions
Die Extensions bieten spezifische Erweiterungen für verschiedene Kontexte und Anforderungen. Sie bauen auf dem Core auf und bieten maßgeschneiderte Lösungen für spezielle Anwendungsfälle, wie:
- Content-Module: Standards für die Darstellung von Inhalten in unterschiedlichen Formaten.
- Reisendeninformationen: Standards für die Anzeige von Reise- und Verkehrsdaten.
- Datenvisualisierung: Standards zu klaren und ansprechenden Darstellung von komplexen Datensätzen und Statistiken.
Extensions ermöglichen es, auf individuelle Anforderungen einzugehen, ohne die zentralen Prinzipien des Core-Systems zu verlassen, und bieten so die notwendige Flexibilität für vielfältige Produkte und Kontexte.
Produktstandards
Die Produktstandards bieten spezifische Erweiterungen für den Produktkontext und dessen Anforderungen. Sie bauen auf dem Core und den relevanten Extensions auf und bieten maßgeschneiderte Lösungen für spezielle Anwendungsfälle, wie:
- Spezielle Produktkomponenten
- Wiederkehrende Produktmodule
Durch diese Struktur bleibt das Design System gleichzeitig stabil und erweiterbar, was eine konsistente Nutzererfahrung und eine effiziente Entwicklung sicherstellt.
Weiterentwicklung von Standards
1. Änderungen an Standards müssen nachweisliche Verbesserungen für alle Nutzenden bewirken bzw. auf fundiertem Research oder Industriestandards basieren.
2. Jede Änderung sollte den Nutzen und Aufwand sorgfältig abwägen. Ist die Verbesserung signifikant genug, um den damit verbundenen Aufwand zu rechtfertigen?
3. Übergreifend bereitgestellte Extensions müssen mit dem Design System Team abgestimmt sein, um deren Qualität und Systemkonformität zu gewährleisten.
4. Relevante Produktstandards sollten mit dem Design System Team abgestimmt sein, um deren Qualität und Systemkonformität zu gewährleisten.
Nutzung
Alle digitalen Produkte und ihre Bestandteile (u.a. Komponenten, Module, Screens) müssen auf Basis der Design System Foundations (Tokens) entwickelt werden um eine langfristige Systemkonformität zu gewährleisten.
Weitere Inhalte des Design System Cores (Komponenten, Pattern & Guidelines) sind verpflichtend zu nutzen/beachten, es sei denn:
- Es gibt einen nachweislichen, researchbasierten Grund für eine Abweichung, welcher dem Design System Team gemeldet wurde (Ziel: Mögliche Weiterentwicklung des Systems).
Teams, die von Standards abweichen, tragen die Verantwortung für:
- Sicherstellung der Barrierefreiheit.
- Einhaltung der Markenrichtlinien.
- Wahrung der Systemkonformität.
- Wartung der Abweichungen über den Produktlebenszyklus hinweg.
- Sicherstellung der Compliance mit architektonischen Vorgaben (z.B. ADRs).
Erstellung und Integration neuer Inhalte
Inhalte, die aktuell weder im Core noch in offiziellen Extensions verfügbar sind, müssen von den Produktteams in Eigenverantwortung entwickelt werden.
Dabei gelten folgende Richtlinien:
1. Alle neuen Inhalte müssen auf Basis der Design System Foundations (Tokens) entwickelt werden um eine langfristige Systemkonformität zu gewährleisten.
2. Die entwickelten Inhalte müssen auf Produktebene dokumentiert und gepflegt werden, um ihre Wiederverwendbarkeit und Wartbarkeit langfristig sicherzustellen.
3. Eine klare und transparente Kommunikation mit dem Design System Team ist erforderlich, um:
- Die Notwendigkeit neuer Inhalte zu besprechen und zu beurteilen
- Feedback oder Unterstützung einzuholen
- Eine mögliche Rückführung der Inhalte in das zentrale Design System (Core oder Extensions) anzustoßen
Diese Vorgehensweise stellt sicher, dass individuelle Anforderungen der Produktteams erfüllt werden können, ohne die Konsistenz und Skalierbarkeit des Gesamtsystems zu gefährden.
Theming
Das Design System verfolgt einen „White Label“-Ansatz, bei dem die grundlegenden Foundations (z. B. Farben, Abstände, Schriften) durch Themes angepasst werden können, um spezifischen Designvorgaben (z. B. Diskriminierungsfreiheit oder Corporate Design) gerecht zu werden. Ein speziell entwickelter Theme-Builder ermöglicht es, diese Anpassungen effizient und benutzerfreundlich umzusetzen, ohne die Struktur des Systems und dessen Vorteile (z. B. Konsistenz und Wiederverwendbarkeit) zu gefährden.
Zielbild
Das Design System bietet eine starke Basis für die Gestaltung und Entwicklung digitaler Produkte, die konsistent, effizient und skalierbar sind. Die konsequente Anwendung und Weiterentwicklung des Systems ermöglicht es, die Qualität der Nutzererlebnisse kontinuierlich zu steigern und den Anforderungen eines dynamischen Umfelds auf effiziente Art gerecht zu werden.
Alle Produktteams sind eingeladen, aktiv zur Weiterentwicklung beizutragen – sei es durch Feedback, die Schaffung neuer Inhalte oder die gemeinsame Arbeit an Standards. Gemeinsam stellen wir sicher, dass das Design System ein unverzichtbares Werkzeug für den Erfolg unserer digitalen Produkte ist.
Tobias OberpaulLead @ DB UX
Weiter