Frontend Entwicklung: User Interface

Frontend-Entwicklung + UI/UX-Design + Prototyping + Testing


Diese Weiterbildung vermittelt Kenntnisse in der Gestaltung und Entwicklung von Benutzeroberflächen für Webanwendungen. Die Teilnehmenden lernen den Umgang mit gängigen Webentwicklungstechnologien, Frameworks und Tools sowie Methoden zur Sicherung der Usability und Barrierefreiheit.


Modul 1: Frontend Entwicklung für Webanwendungen
Modul 2: UI/UX Entwicklung mit komponentenbasierten Frameworks
Modul 3: UI/UX Design für digitale Anwendungen
Modul 4: UI & UX Analyse: Testing-Strategien und A/B-Verfahren


Frontend Entwicklung für Webanwendungen

• Grundlagen der Webentwicklung: Einführung in HTML, CSS, JavaScript und responsive Webdesign zur Gestaltung interaktiver Benutzeroberflächen.


• Frameworks & Tools: Arbeiten mit React, Angular oder Vue.js sowie Nutzung von CSS Grid, Flexbox und UI Frameworks für strukturierte Layouts.


• Versionskontrolle & Zusammenarbeit: Einsatz von GitHub, Code-Management und Workflow-Standards im agilen Frontend Development.


• Barrierefreiheit & Standards: Anwendung von WCAG, Testing-Prinzipien und Schnittstellenanbindung zur Optimierung der Usability.

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.

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.

UI & UX Analyse: Testing-Strategien und A/B-Verfahren

• Testmethoden verstehen: Einführung in user testing, a/b testing und Evaluation von UI-Konzepten in mobilen und webbasierten Interfaces.


• Personas & Journey Mapping: Aufbau von Tests mit user personas, customer journey mapping und wireframe website zur Analyse von UX.


• Datengestützte Optimierung: Auswertung von Testergebnissen zur Anpassung von UI Design und Ableitung nutzerorientierter Verbesserungen.


• Frameworks & Standards: Einsatz von ui framework, compose desktop und style guides zur Einhaltung barrierefreier Interface-Anforderungen.

Nach Absolvierung der Maßnahme verfügen die Teilnehmenden über Kenntnisse, um Benutzeroberflächen zu gestalten und zu optimieren, Prototypen zu entwickeln und Testing-Strategien anzuwenden.