dormakaba
XEA Design System
Ausgehend vom Design Hub haben wir mit dormakaba ein Design System entwickelt, welches auf den Ten Principles of Aesthetic (XEA®) des Unternehmens basiert.
Im Jahr 2020 wurde der Grundstein für das XEA Design System von dormakaba gelegt. Der erste Aufschlag umfasste eine grundlegende Sammlung von Farben, Schriften und Icons, die zu über 1.000 Komponenten zusammengefügt wurden.
Der Stand in 2021
- 36 Farb-Styles
- 34 Schrift-Styles
- 766 Icons
Mit dieser initialen Ausstattung konnten die weltweiten UX-Design-Teams von dormakaba beginnen, Apps und Desktop-Software einfach und schnell zu konzipieren. Damit alle jederzeit Zugriff hatten etablierte giinco für dormakaba einen figma Organisation-Account. Bestandteil der Figmaeinführung waren regelmäßige Schulungstermine, Erklärvideos und Support für neue Teams weltweit.
Das Ziel war von Anfang an klar: Entwicklern, Designern und Projektmanagern sollte es ermöglicht werden, Prototypen zu erstellen, die ein konsistentes Erscheinungsbild der Marke gewährleisten und die Entwicklungszeit bis zum ersten fertigen Produkt (MVP) deutlich verkürzen. Dies war die Basis, auf der alle weiteren Entwicklungen aufbauen sollten.
„Das »XEA®-Design System« ist die globale, produktübergreifende Quelle mit Leitlinien, und Komponenten für digitale Interfaces. Basis sind leicht nutzbare Bibliotheken, Styleguides und ästhetische Systeme. Es ist verankert in dem für Produkt- und UX-Design einheitlichen Entstehungs-Prozess von dormakaba.“
German Design Award 2022
Begründung der Jury
German Design Award 2022
Zusammen mit dormakaba haben wir das entwickelte XEA®-Design System bei einem der renommiertesten Design-Preise weltweit, dem German Design Award (GDA), eingereicht und eine »Special Mention« im Bereich »Excellent Communications Design Corporate Identity« gewonnen.
Neben einer Präsentation mit Text und Screens wurde auch ein Videoclip erarbeitet, der das Projekt und seine Besonderheiten vorstellt. Die Begründung der Jury hebt dabei die Verbindung des Interface- und Produktdesigns von dormakaba zu einer übergreifenden Designsprache hervor.
dormakaba XEA Design System
Weitere hilfreiche Funktionen
Das in Figma aufgebautes Designsystem ist weit mehr als nur eine Sammlung von UI-Elementen; es ist ein lebendiges und skalierbares Fundament für digitale Produkte. Das XEA-Designgnsystem, das über die letzten Jahre gewachsen ist, bietet eine Reihe von mächtigen Funktionen, die den Design- und Entwicklungsprozess erheblich beschleunigt und verbessern haben.
Verschiedene Modi: Light und Dark Mode
Eine der grundlegenden und gleichzeitig wichtigsten Funktionen des XEA Design Systems ist die Unterstützung verschiedener Anzeigemodi, allen voran der Light Mode und der Dark Mode. Durch die intelligente Nutzung von Farbvariablen und -stilen, die zentral im XEA Design System definiert sind, passen sich die Komponenten automatisch an den vom Nutzer gewählten Modus an.
Dies stellt sicher, dass jede mit dem XEA Design System erstellte Benutzeroberfläche in beiden Modi optimal lesbar und ästhetisch ansprechend ist, ohne dass für den Light- und Dark-Mode separate Designs erstellt werden müssen.
Theming für Sub-Brands und regionale Anpassungen
Als global agierendes Unternehmen steht dormakaba vor der Herausforderung, unterschiedliche Corporate Designs für verschiedene Märkte – wie beispielsweise den amerikanischen – oder für spezifische Sub-Brands auf einer einheitlichen technologischen Basis abzubilden. Das XEA Design System löst diese Aufgabe durch eine leistungsstarke "Theming"-Funktion.
Dabei werden Design-Tokens (also die zentral definierten Werte für Farben, Schriften, Abstände etc.) so angelegt, dass sie für verschiedene Kontexte einfach ausgetauscht werden können. So kann das gleiche Grundgerüst einer Anwendung, die mit dem XEA Design System gebaut wurde, mit wenigen Klicks an das Farbschema und die Typografie einer Sub-Brand oder die spezifischen Design-Anforderungen für den amerikanischen Markt angepasst werden. Das gewährleistet globale Markenkonsistenz bei gleichzeitiger Flexibilität für lokale und markenspezifische Bedürfnisse.
XEA DS Ausblick auf aktuelle Arbeiten
KI-unterstützte Prototypen
Die Integration von künstlicher Intelligenz (KI) revolutioniert auch die Prototypenerstellung in Figma. KI-basierte Werkzeuge und Plugins können zukünftig Designer dabei unterstützen, schnell und effizient realistische Prototypen zu erstellen. Dies reicht von der automatischen Generierung von Designvarianten über die intelligente Platzierung von Inhalten bis hin zur Erstellung von interaktiven Prototypen aus einfachen Textbeschreibungen. KI kann somit den kreativen Prozess von dormakaba beschleunigen und den Teams helfen, sich auf die konzeptionelle Arbeit zu konzentrieren, anstatt repetitive Aufgaben manuell auszuführen.
