Zielsetzung des Kurses
Der Kurs UI Design Systems und Atomic Design adressiert Konzeption, Aufbau und Pflege konsistenter Benutzeroberflächen im Bereich Interface- und Produktdesign. Behandelt werden Prinzipien wiederverwendbarer Komponenten und die Organisation von Mustern nach dem Atomic-Design-Ansatz. Ziel ist die strukturierte Herleitung von Design-Tokens, Komponentenbibliotheken und Dokumentation für digitale Produkte. Der Kurs ordnet sich in das Feld UI/UX-Design an der Schnittstelle zu Design Operations und Frontend-Handoff ein.
Inhalte
Einführung in Design Systeme mit Schwerpunkt Begriffsdefinition, Rollen im Team, Artefakte wie Styleguides und Pattern Libraries sowie Abgrenzung zu UI Kits und Markenrichtlinien.
Atomic Design als Ordnungsprinzip mit Aufgliederung in Atome, Moleküle, Organismen, Templates und Seiten sowie Ableitung von Komponentenarchitekturen.
Design Tokens und Gestaltungssprache mit Fokus auf Farben, Typografie, Spacing, Radius, Schatten und Zustände sowie Namenskonventionen und Versionierung.
Komponentenbibliothek und Dokumentation mit Regeln zu Zuständen, Varianten, Barrierefreiheit, Interaktionen und verbindlicher Beschreibung in Werkzeugsammlungen.
Workflow und Kollaboration einschließlich Handoff an Entwicklung, Nutzung von UI-Tools, Guidelines zu Versionierung, Review-Prozessen und Änderungsmanagement.
Qualitätssicherung und Governance mit Prüfmechanismen, Konsistenzkontrollen, Release-Prozessen und Pflege zyklischer Aktualisierungen über Produktlebenszyklen.
Lernziele
- Analysieren von bestehenden Benutzeroberflächen hinsichtlich Komponentenstruktur und Konsistenz
- Identifizieren von Atomen, Molekülen und Organismen nach dem Atomic-Design-Ansatz
- Erstellen von Design Tokens für Farbe, Typografie, Abstände und Interaktionszustände
- Entwickeln einer Komponentenbibliothek mit Varianten, Zuständen und Dokumentation
- Integrieren eines Handoff-Workflows zwischen Design und Entwicklung inklusive Versionierung
- Bewerten von Änderungen an Design Systemen unter Berücksichtigung von Governance und Barrierefreiheit
Berufsperspektiven
Die Kursinhalte finden Anwendung in Berufsfeldern wie UI-Designer mit Schwerpunkt Komponentenentwicklung und Dokumentation von Gestaltungssystemen. Typische Tätigkeitsfelder umfassen UX/UI-Design in Produktteams mit Verantwortung für Musterbibliotheken und Design Tokens. Der Kurs adressiert Inhalte für Tätigkeiten wie Design System Manager oder Design Operations, einschließlich Pflege, Governance und Kollaboration mit Entwicklung. Ebenfalls anschlussfähig sind Rollen im Frontend-Umfeld mit Fokus auf die Umsetzung dokumentierter Komponenten.
Zusammenfassung
Der Kurs UI Design Systems und Atomic Design behandelt Aufbau, Pflege und Dokumentation von Gestaltungssystemen auf Basis des Atomic-Design-Ansatzes. Im Rahmen dieser Weiterbildung werden Methoden zur Strukturierung von Komponenten, zur Definition von Design Tokens und zur Zusammenarbeit mit Entwicklung vermittelt. Die Themen stehen in Bezug zu Tätigkeiten im UI/UX-Design, Design System Management und Design Operations.