Keynote: Design Tokens und ihr Einsatz in industriellen HMIs

Der Vortrag unseres Designers Johannes Ziebandt von der Future of Industrial Usability Conference aus Herbst ist jetzt auch als Video verfügbar. Die darin behandelten Techniken sind sowohl für UX/UI-Designer, als auch für Entwickler und Projektmanager von professionellen HMIs wichtig, weil die flexible und modulare Herangehensweise den Entwicklungsprozess nachhaltig effizienter machen kann:

Design-Systeme sind derzeit die bevorzugte Methode beim Aufbau und der Pflege von Human Machine Interfaces. Ihr komponentenbasierter Ansatz bei der Erstellung von Design-Vorlagen ermöglicht eine enge Verbindung zur Frontend-Entwicklung. Dies vereinfacht den Handoff und die Dokumentation für die Implementierung.

Ein entscheidender Bestandteil von Design-Systemen ist die Dokumentation von Design-Eigenschaften als Variablen, den sogenannten Design-Tokens. Hierbei geht es darum, die Beschreibung des Designs so nah wie möglich an die Implementierung heranzuführen, während gleichzeitig Plattform- und Technologieunabhängigkeit gewährleistet bleibt.

Ein weiterer zentraler Aspekt von Design-Tokens ist, dass Änderungen am Design keinen zusätzlichen Dokumentations- oder Implementierungsaufwand bedeuten. Sowohl die Designausgabe als auch die Integration in die Entwicklung können automatisiert werden. Das ermöglicht es, relativ einfach parallele Designversionen zu erstellen, die auf unterschiedliche Aspekte wie größere oder kleinere Darstellungen, dunkle und helle Themes, oder Anpassungen an verschiedene Corporate Designs zugeschnitten sind.

Design-Tokens kommen auch in unserer HELIO IDE zum Einsatz. Das auf Webtechnologie basierende Visualisierungssystem wurde von uns auf Einfachheit und Geschwindigkeit optimiert. Dabei war es uns besonders wichtig auch die Schnittstelle zwischen Design und Entwicklung so schlank wie möglich zu halten. Design-Tokens geben uns die Möglichkeit schnell und flexibel Anpassungen an einem standardisierten Baukastensystem durchzuführen. Unsere größte Herausforderung war die Token-Bibliothek zu verwenden, bevor sie vollständig fertiggestellt ist. Also sozusagen „Living Tokens“, die es uns ermöglichen nachhaltig und zukunftssicher immer neue Varianten des gleichen Kernsystems weiter zu entwicklen.

Keynote herunterladen (PDF)
Video auf vimeo
Video auf youtube

W3C Draft
Design Tokens Naming Playbook
Naming Tokens in Design Systems
BEM - Block Element Modifier