UI/UX Design: Figma-Kurs und Wireframe-Website

UI/UX Design + Figma + Wireframing + Prototyping


Diese Weiterbildung vermittelt grundlegende und fortgeschrittene Kenntnisse im Bereich UI/UX Design. Die Teilnehmenden lernen, wie digitale Anwendungen unter Einsatz von Prototyping-Tools und Designspezifikationen erarbeitet werden. Ein besonderer Fokus liegt auf der Anwendung des Tools Figma.


Modul 1: UI/UX Design für digitale Anwendungen
Modul 2: Figma: Digitale Designsysteme und Prototyping-Workflows
Modul 3: Wireframing in der nutzerzentrierten Gestaltung
Modul 4: UI Frameworks & visuelle Strukturmodelle im UX Design


UI/UX Design für digitale Anwendungen

• Grundlagen von UI/UX: Einführung in Usability, Interface-Gestaltung und Nutzerführung für Web, App und mobile Anwendungen.


• Prototyping & Wireframes: Einsatz von Figma, Adobe XD und Rapid Prototyping zur Entwicklung von nutzerzentrierten UI-Konzepten.


• UX Research & Testing: Durchführung von User Research, A/B-Tests und User Personas zur Optimierung der User Experience.


• Designsysteme & Tools: Nutzung von UI Frameworks, Style Guides und WCAG-Richtlinien für barrierefreies und responsives Design.

Figma: Digitale Designsysteme und Prototyping-Workflows

• Grundlagen der Prototyp-Erstellung mit Figma, Aufbau interaktiver UI-Designs und Wireframing im Webdesign-Kontext.


• Anwendung von Komponenten, Responsive Design, Grid Design und Style Guides in figma-basierten Projekten.


• Teamarbeit mit Entwicklern durch Kommentierung, Dokumentation und figma-gestützte Entwicklerübergabe.


• Erstellung interaktiver Prototypen, Durchführung von Usability-Tests und Ableitung gestalterischer Optimierungen.

Wireframing in der nutzerzentrierten Gestaltung

• Grundlagen von Wireframes: Einführung in Struktur, Funktion und Einsatz von Wireframes zur Planung digitaler Interfaces und Webseiten.


• Toolgestützte Entwicklung: Erstellung statischer und interaktiver Wireframes mit Figma, Sketch, Adobe XD und gängiger Prototyping Software.


• Designprozesse & Usability: Einsatz von Wireframes zur frühen Evaluation von Navigation, Informationsarchitektur und responsivem Webdesign.


• Standards & Zusammenarbeit: Integration in UI/UX-Workflows, Austausch im Team und Vorbereitung für Designsysteme und Frontend-Entwicklung.

UI Frameworks & visuelle Strukturmodelle im UX Design

• Strukturelle Grundlagen: Vermittlung von UI-Komponentenmodellen mit Fokus auf usability, grid design und ui framework.


• Frameworkbasierte Gestaltung: Einsatz von compose android, android compose und swift ui zur Interface-Entwicklung.


• Prototyping-Tools: Umsetzung von app wireframe, prototyping software und figma ui im gestalterischen Entwicklungsprozess.


• Test & Umsetzung: Validierung durch ui test, Integration in frontend-Systeme und Versionsverwaltung mit git.

Im Anschluss an die Weiterbildung können die Teilnehmenden nutzerzentrierte UI-Konzepte entwickeln, Prototypen erstellen und evaluieren. Sie nutzen Figma und weitere Tools, um Designs im Team zu planen und umzusetzen.