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

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 w- Videos (je nach Bedarf)
Testing & Iteration**
- Durchführung einfacher Usability-Tests im Seminarumfeld
- Sammlung von Feedback und Überarbeitung des Prototyps
Voraussetzungen:
Grundlegende Computerkenntnisse sind erforderlich. Erste Erfahrungen mit Figma, idealerweise aus dem Basis-Kurs „Einführung in UX/UI Design“, werden vorausgesetzt. Level 3*
__________
*Lernlevels:
Level 1: Anwender*innen ohne Vorwissen
Level 2: Anwender*innen mit Basiskenntnissen
Level 3: Anwender*innen mit einschlägiger Arbeitsroutine