UI Design: Interface und Flexbox

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.