Source: https://cd.union-investment.de/anwendungen/Digitalmedien/solid-design-system
Das Ziel des Design Systems ist es, digitale Produkte schnell auf die Straße bringen und ein solides Fundament für die digitale Zukunft von Union Investment zu bilden. Dazu wurde ein Set an konsistenten und anpassbaren Komponenten entwickelt, das Applikations-, Medien- und Geräte übergreifend verwendet wird. Dadurch wird nicht nur Wiedererkennbarkeit, sondern auch die Nutzerfreundlichkeit verbessert. Sowohl in der Umsetzung wie auch in der Kundenwahrnehmung. Gleichzeitig berücksichtigen die Solid Components die Richtlinien zur Barrierefreitheit nach WCAG .
* Bitte beachten: : * Nutzen Sie für alle digitalen Anwendungen das Solid Design System sowohl im Design als auch in der Entwicklung. Mitarbeitende und Partner erhalten Zugriff auf die Solid DS Figma Libraries und Storybook , in denen Design- und Code-Komponenten zur Verfügung stehen, die als gemeinsame Grundlage für konsistente Gestaltung und Umsetzung dienen.
In einem interdisziplinär aufgestellten Team (SDS Team) werden Basiskomponenten (Solid Components) unter den Perspektiven von Marke, UX, Systemdesign und Development entwickelt. So entsteht ein lebendes Set an generalistischen Komponenten (als Design- und als Webcomponent), das von allen unter dem Dach der Marke Union Investment verwendet wird und beim Entstehen von neuen Anforderungen für alle erweitert werden kann.
Dazu wurde eine Vision entwickelt und folgende Kernprinzipien festgelegt:
Für Union Investment schaffen wir eine unternehmensweit verlässliche und zukunftssichere Design- und Codebasis für digitale Produkte, die die Marke stärkt, einen benutzerfreundlichen und barrierefreien Zugang bietet, sich mit wenig Aufwand implementieren lässt, robust bleibt und es den Teams ermöglicht, mit Freude und Vertrauen zu entwerfen und zu programmieren.
Solid Design System Team
Verantwortlich für die Gesamtausrichtung des Design Systems
Erfahren Sie auf der Landingpage des Solid Design Systems , wie das SDS Teams unterstützt, Workflows beschleunigt und nachhaltige Produktentwicklung fördert.
Wie bereits erwähnt folgen die Components des SDS den Richtlinien der WCAG 2.2 für digitale Inhalte und bietet eine solide Grundlage für die Entwicklung inklusiver digitaler Produkte. So stellt das Design System sicher, dass übergreifende Komponenten und Farbkombinationen die Anforderungen an Kontraste, Tastaturbedienbarkeit und Screenreader-Kompatibilität erfüllen.
Da die Einhaltung der Richtlinien über das Design System allein nicht garantiert werden kann, obliegt die finale Umsetzung dem Ersteller der jeweiligen Oberfläche. Besonders für endkundenorientierte Produkte ist dies nicht nur sinnvoll, um eine bessere Nutzererfahrung für alle zu schaffen, sondern auch aus regulatorischer Sicht entscheidend.
Überprüfen Sie daher, ob die verwendeten Farben und Kontraste dem WCAG Standards entsprechen. In Figma können dafür Plugins wie “Contrast” genutzt werden. Achten Sie auf eine barrierefreie Struktur und Inhalte Ihrer Oberfläche und lesen Sie auch die Hinweise zu den Grafikelementen von Union Investment in den Kapiteln Tabellen, Schaubildern, Diagrammen, Störern und Bewegtbild. Die barrierefreien Farbkombinationen aus dem UI Farbraum, sind hier zusammengefasst:
Accessible Color Combinations
Mehr zum Thema Accessibility und die Umsetzung im SDS lesen Sie hier .
Barrierefreiheit in Figma Barrierefreiheit im Storybook
Vorheriges Kapitel Leitfaden Digitalmedien Nächstes Kapitel Erste Schritte
