Webdesign + Prototyping + Figma + UI/UX

Diese Weiterbildung vermittelt Kenntnisse in der Gestaltung digitaler Interfaces unter Verwendung von Sketch und Adobe XD. Teilnehmende lernen, wie sie durch systematische Designprozesse und Interaktionsgestaltung ansprechende und funktionale Benutzeroberflächen entwickeln können.

Modul 1: Webdesign: Struktur, Designprozesse und Interaktionsgestaltung
Modul 2: Figma: Gestaltung und Prototyping im Webdesign
Modul 3: UI/UX Entwicklung mit komponentenbasierten Frameworks
Modul 4: Wireframing in der nutzerzentrierten Gestaltung

Webdesign: Struktur, Designprozesse und Interaktionsgestaltung
  • Gestaltung digitaler Interfaces mit Responsive Design, Usability-Prinzipien und uikit-basierter Strukturierung.
  • Wireframing und Prototyping mit Figma, Adobe XD und Sketch im Rahmen eines systematischen UI Design Workflows.
  • Frontend-Grundlagen mit CSS, Flexbox, Grid Layout und semantischer HTML-Struktur für Webseiten.
  • Grundlagen zu WCAG-Richtlinien, Interface Testing und barrierefreier Gestaltung im digitalen Webdesign.

Figma: Gestaltung und Prototyping im Webdesign
  • Einführung in Figma: Grundlagen der webbasierten Designsoftware zur Erstellung von User Interfaces, Wireframes und interaktiven Prototypen.
  • Gestaltung & Komponenten: Anwendung von UI-Kits, Auto-Layout, Designsystemen und responsivem Webdesign in plattformübergreifenden Projekten.
  • Kollaboration & Feedback: Nutzung von Figma-Funktionen für Teamarbeit, Kommentierung und Übergabe an Entwickler im UI/UX-Workflow.
  • Prototyping & Testing: Erstellung interaktiver Klick-Prototypen, Durchführung von User Tests und Vorbereitung auf Usability-Optimierungen.

UI/UX Entwicklung mit komponentenbasierten Frameworks
  • Interface-Komponenten: Aufbau von Designsystemen mit user interface coding, framework ui und responsive UI-Strukturen.
  • Design & Layout: Nutzung von flexbox, grid design und compose zur Erstellung flexibler Web- und App-Komponenten.
  • Prototyping mit Tools: Anwendung von sketch, figma developer und wireframe website zur Interface-Simulation.
  • Entwicklung & Kontrolle: Einsatz von git, docker compose und ui testing zur Sicherung und Abstimmung modularer Interfaces.

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.

Mit Abschluss der Weiterbildung sind die Teilnehmenden in der Lage, digitale Interfaces zu gestalten und Prototypen zu erstellen, Figma und Adobe XD zu nutzen und Designprozesse in UI/UX-Workflows zu integrieren.