Webdesign + Figma + Wireframing + User Interface

Diese Weiterbildung vermittelt Kenntnisse in der digitalen Gestaltung und technischen Umsetzung von Webprojekten. Sie umfasst die Erstellung und Anwendung von Prototypen, die Verwendung von Designsoftware und die Einführung in barrierefreie Webstandards.

Modul 1: Webdesign: Digitale Gestaltung und technische Umsetzung
Modul 2: Figma: Gestaltung und Prototyping im Webdesign
Modul 3: Wireframing: Visuelle Struktur und digitale Prozessplanung
Modul 4: User Interface Frameworks im digitalen Produktdesign

Webdesign: Digitale Gestaltung und technische Umsetzung
  • UI/UX Design und Interface-Gestaltung für strukturierte und funktionale Benutzeroberflächen im Webdesign-Kontext.
  • Erstellung von Wireframes und Prototypen mit Figma, Adobe XD und Sketch zur Visualisierung digitaler Webprojekte.
  • Technische Umsetzung mit HTML, CSS, Grid Design und Flexbox im Bereich der Frontend Webentwicklung.
  • Einführung in WCAG, Style Guides und barrierefreie Webstandards für zugängliche und normgerechte Webseiten.

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.

Wireframing: Visuelle Struktur und digitale Prozessplanung
  • Wireframing als Methode zur Entwicklung logischer Interface-Strukturen im Webdesign und App-Prototyping.
  • Statische und klickbare Wireframes in Tools wie Figma, Sketch, Adobe XD und Figma-UI-Workflows.
  • Nutzung zur Vorabprüfung von Interaktionen, Seitenaufbau und UI Testing in crossmedialen Webprojekten.
  • Einbindung in UI/UX-Designer-Teams, Vorbereitung auf Frontend-Webentwicklung und Style-Guide-Umsetzung.

User Interface Frameworks im digitalen Produktdesign
  • Grundlagen von UI Frameworks: Einführung in Struktur, Komponenten und Einsatzbereiche für responsive Web- und App-Oberflächen.
  • Designsysteme & Komponenten: Anwendung von UIKit, SwiftUI, Flexbox und Compose für konsistente Interfaces und skalierbare UI-Architekturen.
  • Prototyping & Gestaltung: Entwicklung interaktiver Interfaces mit Figma, Sketch oder Adobe XD unter Berücksichtigung von Usability-Prinzipien.
  • Integration & Testing: Verbindung mit Codebases, UI Testing Workflows und Versionsverwaltung mit Git für kollaborative UI-Entwicklung.

Mit Abschluss der Weiterbildung sind die Teilnehmenden in der Lage, Webdesign-Projekte mit aktuellen Tools und Techniken zu gestalten, Prototypen zu erstellen und User Interfaces responsiv und zugänglich zu entwickeln.