Zielsetzung des Kurses
Der Kurs UI/UX Design mit Wireframing vermittelt grundlegende und angewandte Methoden zur Gestaltung digitaler Benutzeroberflächen mit Schwerpunkt auf Struktur, Interaktion und Informationsarchitektur. Behandelt werden Vorgehensweisen zur Ableitung von Anforderungen, zur visuellen Strukturierung mittels Wireframes sowie zur Vorbereitung von Prototypen. Der Kurs ordnet sich in das Fachgebiet Human-Computer-Interaction und Interface-Design ein und adressiert den Übergang von Konzeption zu visueller Ausarbeitung. Ziel ist die methodische Herleitung nutzbarer Interface-Strukturen auf Basis von Nutzer- und Geschäftsanforderungen.
Inhalte
Einordnung von UI/UX: Klärung der Begriffe User Interface und User Experience, Rollenverständnis im Product-Team, Prozessschritte von Research über Konzeption bis zum Prototyping und Übergabe an die Entwicklung
Anforderungsaufnahme und Informationsarchitektur: Erhebung von Use Cases, User Flows und Szenarien, Strukturierung von Inhalten, Navigationskonzepte, Erstellung von Sitemaps und Task-Flows
Wireframing: Low- und Mid-Fidelity-Wireframes, Layout-Raster, Content-Priorisierung, Interaktionsmuster, Zustände und Fehlermeldungen, Annotierung und Dokumentation
Prototyping und Testing-Vorbereitung: Klickbare Prototypen aus Wireframes ableiten, Definition von Testaufgaben, Auswahl einfacher Evaluationsmethoden, Iteration auf Basis von Rückmeldungen
UI-Grundlagen und Designsysteme: Typografie, Farbe, Komponentenbibliotheken, Responsivität, Barrierefreiheitsanforderungen (Accessibility) und Konsistenz durch Patterns
Handover und Kollaboration: Spezifikation für Entwickler, Versionierung, Asset-Export, Nutzung gängiger Tools sowie Abstimmung mit Stakeholdern
Lernziele
- Analysieren von Nutzeranforderungen und Ableiten von Use Cases, User Flows und Informationsstrukturen
- Unterscheiden von Low- und Mid-Fidelity-Wireframes und Anwenden passender Detaillierungsgrade je Projektphase
- Erstellen von Wireframes mit klarer Layout-Struktur, Interaktionszuständen und annotierten Spezifikationen
- Entwickeln klickbarer Prototypen auf Basis von Wireframes und Durchführen einfacher Evaluationen
- Integrieren von Accessibility-Grundsätzen, responsiven Layouts und wiederverwendbaren Komponenten
- Implementieren eines strukturierten Handover-Prozesses inklusive Dokumentation und Abstimmung mit Entwicklungsteams
Berufsperspektiven
Die Kursinhalte finden Anwendung in Berufsfeldern wie UI/UX-Design, insbesondere in der Konzeption und Ausarbeitung von Wireframes und Prototypen.
Typische Tätigkeitsfelder umfassen Interaction Design und Informationsarchitektur mit Fokus auf Navigationsmodelle, Flows und Strukturierung von Inhalten.
Der Kurs adressiert Inhalte für Tätigkeiten wie Produktdesign im digitalen Umfeld, einschließlich Abstimmung mit Entwicklungsteams und Erstellung spezifizierter Interface-Komponenten.
Zusammenfassung
Der Kurs UI/UX Design mit Wireframing behandelt die strukturierte Gestaltung digitaler Benutzeroberflächen von der Anforderungsaufnahme über Wireframes bis zur prototypischen Umsetzung. Im Rahmen dieser Weiterbildung werden Methoden des Interface- und Interaktionsdesigns, Informationsarchitektur sowie Handover-Prozesse vermittelt. Die vermittelten Themen finden fachliche Anwendung in Tätigkeitsfeldern wie UI/UX-Design, Interaction Design und Produktdesign.