UI Design + Flexbox + Prototyping + Webdesign

Diese Weiterbildung vermittelt Kenntnisse im Bereich des digitalen Produktdesigns, einschließlich der Gestaltung benutzerfreundlicher Interfaces und der Nutzung von Prototyping-Tools. Die Teilnehmenden lernen, wie sie mit Frameworks und Technologien interaktive und responsive Nutzeroberflächen entwickeln können.

Modul 1: UI & UX Prozesse im digitalen Produktdesign
Modul 2: User Interface Frameworks im digitalen Produktdesign
Modul 3: CSS-Strukturen und responsives Frontend
Modul 4: Webdesign: Grundlagen, Tools und Standards

UI & UX Prozesse im digitalen Produktdesign
  • Interface & Usability: Gestaltung von user interface Komponenten mit Fokus auf barrierefreiheit und human interface guideline.
  • Wireframe & Prototyp: Nutzung von prototyping software, app prototyping und figma developer zur visuellen Ausarbeitung.
  • UX Research Methoden: Entwicklung von ux persona, user research und teststrukturen für digitale Produkte.
  • Designintegration: Einsatz von swiftui, android compose und ui testing für mobile und responsive Webanwendungen.

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.

CSS-Strukturen und responsives Frontend
  • CSS-Eigenschaften, Selektoren und Regeln zur Formatierung von Webseiten mit HTML und JavaScript.
  • Flexibles Layout mit CSS Grid, Flexbox und Media Queries zur Umsetzung responsiver Interfaces.
  • Einbindung von Frameworks, Designsystemen und Strukturierung von CSS im Developer-Workflow.
  • Versionssicherung mit GitHub, Editor-Tools und Strukturierung im Frontend Development.

Webdesign: Grundlagen, Tools und Standards
  • Grundlagen im Webdesign: Einführung in UI/UX Design, Responsive Webdesign, Strukturierung und Gestaltung funktionaler Webseiten.
  • Visuelle Gestaltung & Tools: Arbeiten mit Figma, Adobe XD und Sketch zur Erstellung von Wireframes, Prototypen und Interface-Layouts.
  • Frontend & Struktur: Umsetzung von Designs mit HTML, CSS, Flexbox und Grid Design für funktionale und zugängliche Benutzeroberflächen.
  • Barrierefreiheit & Standards: Anwendung von WCAG, Style Guides und Usability-Prinzipien für inklusive, nutzerfreundliche Webangebote.

Mit Abschluss der Weiterbildung sind die Teilnehmenden in der Lage, benutzerfreundliche und responsive Interfaces zu gestalten, Prototyping-Tools einzusetzen und Frameworks im Bereich UI-Design anzuwenden.