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.