Keynote: Design Tokens und ihr Einsatz in industriellen HMIs

Der Vortrag unseres Designers Johannes Ziebandt von der Future of Industrial Usability Conference ist jetzt als Video verfügbar. Er zeigt, wie moderne Design-Systeme und Design-Tokens die Entwicklung von Human Machine Interfaces (HMIs) revolutionieren können. Diese Techniken sind für UX/UI-Designer, Entwickler und Projektmanager gleichermaßen relevant, da sie den Entwicklungsprozess nachhaltig effizienter gestalten.

Design-Systeme haben sich als die führende Methode für den Aufbau und die Pflege von HMIs etabliert. Ihr komponentenbasierter Ansatz ermöglicht die Erstellung von Designvorlagen, die eng mit der Frontend-Entwicklung verbunden sind. Dies vereinfacht die Übergabe von Designs an die Entwickler (Handoff) und die Dokumentation für die Implementierung erheblich.

Die Brücke zwischen Design und Entwicklung

Ein entscheidender Bestandteil von Design-Systemen ist die Dokumentation von Design-Eigenschaften als Variablen, den sogenannten Design-Tokens. Design-Tokens beschreiben das Aussehen einer Anwendung, wie z. B. Farben, Typografie oder Abstände. Sie ermöglichen es, Designentscheidungen in einem standardisierten Format festzuhalten, das sowohl von Designern als auch von Entwicklern verstanden wird.

Der Vorteil von Design-Tokens liegt darin, 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. Dies ermöglicht es, schnell und einfach verschiedene Designvarianten zu erstellen, die auf unterschiedliche Anforderungen zugeschnitten sind (z. B. verschiedene Bildschirmgrößen, Dark/Light-Themes oder Corporate Designs).

Vorteile von Design-Tokens

• Effizienz: Designänderungen erfordern keine manuelle Anpassung der Implementierung.
• Konsistenz: Design-Tokens gewährleisten ein einheitliches Erscheinungsbild über alle Anwendungen hinweg.
• Flexibilität: Design-Tokens ermöglichen die einfache Anpassung an verschiedene Anforderungen.
• Skalierbarkeit: Design-Tokens unterstützen die Entwicklung von komplexen HMI-Systemen.

Design-Systeme und Design-Tokens sind unverzichtbare Werkzeuge für die moderne HMI-Entwicklung. Sie ermöglichen es, effizientere, konsistentere und flexiblere HMIs zu erstellen. Der Vortrag von Johannes Ziebandt bietet einen wertvollen Einblick in die praktische Anwendung dieser Techniken und zeigt, wie sie den Entwicklungsprozess nachhaltig verbessern können.

Keynote

Keynote herunterladen (PDF)

Video

Video auf vimeo
Video auf youtube

Links

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