UX/UI Design Advanced: Erweiterte Prototypenentwicklung und Design-Systeme

Der Kurs richtet sich an Quereinsteigerinnen und Designerinnen, die ihre Kenntnisse im UX/UI Design vertiefen möchten, sowie an Berufspersonen, die ihre Fähigkeiten im Bereich der digitalen Produktentwicklung erweitern wollen. Besonders geeignet für alle, die Design-Systeme aufbauen, interaktive Prototypen erstellen und digitale Produkte wie Websites, Apps oder Tools mit Figma entwickeln möchten.

In diesem praxisorientierten Kurs vertiefen Sie Ihre Kenntnisse im UX/UI Design – mit einem Schwerpunkt auf Design-Systeme, Komponenten und interaktives Prototyping in Figma. Sie lernen, ein eigenes Design-System aufzubauen und klickbare Prototypen zu entwickeln – mit Fokus auf Effizienz, Konsistenz und nutzerzentrierte Gestaltung.

Im Zentrum des Kurses steht die Entwicklung einer eigenen digitalen Lösung für ein frei wählbares Problem. Sie durchlaufen den gesamten Designprozess: von der Problemdefinition über die Strukturierung von UI-Komponenten bis hin zum interaktiven, testbaren Prototyp.


Kursinhalte:

Einführung in Design-Systeme
- Was ist ein Design-System und wie steigert es Effizienz, Konsistenz und Skalierbarkeit im Designprozess?
- Erstellung eines Design-Systems in Figma: Farben, Typografie, Icons, Buttons und weitere UI-Komponenten
- Best Practices zur Standardisierung und Dokumentation von Designelementen

Problemfindung & digitale Lösungsentwicklung
- Auswahl eines konkreten, realitätsnahen Problems, das durch ein digitales Produkt gelöst werden soll
- Definition der wichtigsten Funktionen zur Lösung des Problems
- Festlegung des Produkttyps (z. B. App, Website oder digitales Tool) und seiner Hauptfeatures
- Erstellung von High-Fidelity Wireframes zur Visualisierung der Lösungsidee

Komponenten & Design Tokens in Figma
- Einführung in Komponenten: Wie erstellt und verwaltet man wiederverwendbare UI-Elemente in Figma?
- Einsatz von Varianten, Auto Layout und verschachtelten Komponenten
- Optional: Einsatz von Design Tokens für Themen wie Dark-/Light-Modus oder verschiedene Zustände

Prototyping & Interaktive Elemente
- Aufbau eines klickbaren Prototyps in Figma zur Simulation der Nutzerführung
- Integration interaktiver Elemente wie Dropdowns, Slidern, Maps, Carousels oder eingebetteten Videos (je nach Bedarf)

Testing & Iteration
- Durchführung einfacher Usability-Tests im Seminarumfeld
- Sammlung von Feedback und Überarbeitung des Prototyps

Weitere Hinweise

Der Unterricht findet über Zoom statt.. Voraussetzungen für den Online-Kurs: Mikrofon und Webcam. Den Zugangslink erhalten Sie mit der Kurserinnerung per E-Mail vor Kursbeginn.