🐝 Huk-Coburg Design System

Übersicht

Effizient zu nutzerzentrierten UIs – maßgeschneidert für den HUK-Konzern

Produktvision

Für die Produkt-Teams welche hohe Aufwände für konsistente UIs haben, ist Shield ein Design System, welches für den HUK-Konzern maßgeschneidert ist, um schnell flexibel konsistente performante und barrierefreie UIs zu erzeugen. Im Gegensatz zu anderen Design Systemen oder Eigenentwicklungen bietet unser Produkt ein Design-System mit durchgängiger und multi-brand fähiger Toolchain über den gesamten Design- und Entwicklungsprozess.

Mehr dazu im Detail auf der Seite Produktvision.

Unsere Infrastruktur

Unser Workflow für Design-Tokens umfasst folgende Schritte:

• Ablage: Zentrale Verwaltung der Design-Tokens (Farben, Typografie, Abstände etc.).
• Generierung: Umwandlung der Tokens in nutzbare Formate mittels Style-Dictionary.
• Integration: Einbindung der generierten Tokens in unser Theme.
• Verwendung: Anwendungen nutzen Theme, CSS-Framework und Web Components für eine konsistente UI.
• Figma: Die gleichen Tokens werden in Figma genutzt, um Designs konsistent zu halten.

Dieser Prozess stellt sicher, dass alle digitalen Produkte eine einheitliche Designsprache haben, was die Benutzererfahrung und die Entwicklungsprozesse verbessert.

flowchart TD
A["Design Tokens"] --> B["Style Dictionary"]
A --> Z["Figma"]
B --> C["Themes"]
B --> D["CSS Framework"]
B --> H["Components"]
C --> E["HUK"]
C --> F["HUK24"]
C --> G["VRK"]
D --> I["Apps"]
E --> I
F --> I
G --> I
H --> I

Browsersupport

Shield wird in den neuesten zwei Versionen der folgenden Browser getestet. Es gibt keine Unterstützung für IE11 oder ältere Browser.

Chrome	Firefox	Edge	Safari	Samsung Internet

Das Team

• Product Owner: Adrian
• Architektur (Jenkins, Storybook, etc.): Willy (extern)
• Designer: Tim
• Entwickler: Andre, Willy, Flo und Dima

Support: Bei Fragen oder für Unterstützung steht euch unser Support-Channel in MS Teams zur Verfügung. Zögert nicht, uns dort zu kontaktieren.