Zielsetzung des Kurses
Der Kurs Interface-Gestaltung mit Design Tokens behandelt den Einsatz von Design Tokens zur konsistenten Ausgestaltung digitaler Benutzeroberflächen. Im Mittelpunkt steht die Überführung von Gestaltungsentscheidungen in semantische, wiederverwendbare Token für Farben, Typografie, Abstände und Komponenten. Vermittelt wird die Einbettung von Tokens in Design- und Entwicklungspipelines im Kontext von UI/UX-Design und Frontend-Entwicklung. Ziel ist die strukturierte Herleitung, Dokumentation und Pflege eines skalierbaren Design-Systems auf Token-Basis.
Inhalte
Einführung in Design Tokens: Begriffsdefinition, Token-Typen (Core, Semantik, Komponententoken), Nomenklatur und Strukturierung von Token-Hierarchien sowie Abgrenzung zu Stilguides und klassischen Design-System-Artefakten.
Gestaltungsparameter und Semantisierung: Ableitung von Farb-, Typografie-, Spacing- und Radius-Token aus Marken- und Zugänglichkeitsanforderungen, inklusive Kontrast- und Skalierungsregeln sowie Benennungskonventionen.
Technische Repräsentation und Formate: Beschreibung von Token in JSON, W3C Design Token Community Group-Formaten, Figma- und Style-Dictionary-Workflows sowie Konvertierung in Plattform-Ausgaben (CSS, Android, iOS).
Integration in UI-Komponenten: Zuordnung von Tokens zu Komponenten-States und -Varianten, Theming-Modelle (Light/Dark/Modes), Umgang mit responsive Breakpoints und Zustandsabhängigkeiten.
Prozesse, Governance und Versionierung: Freigabeprozesse, Änderungsmanagement, Dokumentation, Kollaboration zwischen Design und Entwicklung, Qualitätssicherung und Zugriffskontrolle.
Barrierefreiheit und Qualität: Anwendung von WCAG-Anforderungen auf Token-Ebene, Farbabstufungen, Fokus-Indikatoren, Testverfahren und visuelle Regressionstests im Kontext von Token-Änderungen.
Lernziele
- Identifikation von Token-Kategorien und Unterscheidung zwischen Core-, semantischen und komponentenbezogenen Tokens
- Erstellung einer Token-Nomenklatur und Durchführung der Strukturierung in Hierarchien für Farben, Typografie und Abstände
- Anwendung von Barrierefreiheitskriterien auf Farb- und Typografie-Tokens inklusive Kontrastmessung und Skalierung
- Implementierung von Design Tokens in gängige Formate und Integration in Build-Prozesse mittels Style Dictionary oder vergleichbarer Tools
- Integration von Tokens in UI-Komponenten mit Zuständen und Varianten sowie Einrichtung von Theme-Varianten
- Bewertung von Änderungen an Tokens hinsichtlich Auswirkungen auf Komponenten, Dokumentation und Versionierung
Berufsperspektiven
Die Kursinhalte finden Anwendung in Berufsfeldern wie UX/UI-Design, insbesondere bei der Konzeption und Pflege von Design-Systemen auf Token-Basis. Typische Tätigkeitsfelder umfassen Frontend-Entwicklung mit Fokus auf themingfähigen Komponentenbibliotheken und Token-Workflows. Der Kurs adressiert Inhalte für Tätigkeiten wie Design-System-Management und die Dokumentation von Gestaltungsrichtlinien in interdisziplinären Teams.
Zusammenfassung
Der Kurs Interface-Gestaltung mit Design Tokens behandelt die Ableitung, Dokumentation und technische Umsetzung von Gestaltungsparametern als wiederverwendbare Tokens. Im Rahmen dieser Weiterbildung werden Methoden zur Integration in Design- und Entwicklungspipelines sowie zum Einsatz in Komponenten vermittelt. Die Themen stehen in Bezug zu Tätigkeiten in UX/UI-Design, Frontend-Entwicklung und Design-System-Management.