ZUi Web-Komponenten Bibliothek
Umgesetzt für Carl Zeiss Meditec AG
Aufbau einer konzernweiten Web-Komponenten Bibliothek für ZEISS User Interfaces auf Basis des ZUi Design Systems
Ausgezeichnet mit dem German Design Award 2022
Mit dem stetig wachsenden ZEISS Produktportfolio nimmt auch die Zahl der Geräte und Anwendungen zu, die Frontends zu ihrer Steuerung, Wartung und Bedienung besitzen. Diese Frontends sollen die Endkund/innen in einem homogenen ‚Look and Feel‘ und gleichbleibend hoher Qualität erleben. Daher gewinnt ein einheitliches Bedienkonzept für diese User Interfaces zunehmend an Bedeutung. Das offizielle ZUi Design System wird von ZEISS Digital Innovation (ZDI) als Web Components implementiert, zusätzlich werden Angular und React supportet. Anwendungsentwickler/innen können auf diese Library zurückgreifen und mit geringem Aufwand in ihre bestehenden Anwendungen integrieren.
Projektbeschreibung
Ziel des fortlaufenden Projektes ist die Entwicklung einer Bibliothek, die die Komponenten des Design Systems ‚ZUi‘ (ZEISS UI) als Webkomponenten bereitstellt.
Anwendungsentwickler/innen sollen diese Komponenten verwenden, um ein einheitliches, ZEISS konzernweites ‚Look and Feel‘ in ihren Anwendungen zu erzeugen. Auf diese Weise benötigen sie in ihren Projekten eine deutlich kürzere Zeit für die Frontend-Implementierung.
Die Komponenten werden in ihren verschiedenen Zuständen und Funktionen gemeinsam mit dem UI/UX Team definiert. Auch die Qualitätssicherung erfolgt Hand in Hand mit UI/UX. So wird die korrekte Umsetzung aller Komponenten zu jeder Zeit gewährleistet.
Die finalisierten Komponenten können als npm-Package von Anwendern konsumiert und in ihre Frontend-Anwendungen eingebaut werden. Damit folgen die Anwendungen dem ZEISS UX-Konzept und Nutzer/innen ist die optimale Interaktion mit den ZEISS Anwendungen garantiert.
Die ZUI Web Komponenten Library ist ein Meilenstein für die verbesserte teamübergreifende Zusammenarbeit und Kommunikation zwischen Entwicklern und Designern. Sie zahlt sich in vielerlei Hinsicht aus und macht unsere Arbeit deutlich effizienter: Weniger Code-Duplizierung, Konsistenz von UI und UX über viele Projekte hinweg, Schnelligkeit durch Wiederverwendung, Kompatibilität und Standardisierung von Komponenten in Design und Code. Ein absolutes Best Practice Beispiel für weitere Frameworks im Unternehmen!