Frontend-Entwicklung + Webdesign + UI/UX + Prototyping

Diese Weiterbildung vermittelt Kenntnisse in der Gestaltung von Weboberflächen, der Anwendung von Design- und Entwicklungstools sowie der Umsetzung von UI/UX-Konzepten. Sie bietet Einblicke in Webentwicklung, Webdesign und digitale Produktdesignprozesse.

Modul 1: Frontend Entwicklung für Websysteme
Modul 2: Webdesign: Grundlagen, Tools und Standards
Modul 3: UI & UX Prozesse im digitalen Produktdesign
Modul 4: Figma: Gestaltung und Prototyping im Webdesign

Frontend Entwicklung für Websysteme
  • Webentwicklung mit HTML, CSS und JavaScript zur Erstellung modularer Komponenten und strukturierter Benutzeroberflächen im Frontend.
  • Arbeiten mit React, Angular oder Vue.js sowie Nutzung von CSS Grid, Flexbox und UI Frameworks zur Gestaltung responsiver Webseiten.
  • Code-Versionierung mit GitHub, Branch-Management und Anwendung gängiger Workflows in kollaborativen Entwicklungsprozessen.
  • Testing-Grundlagen, Umsetzung der WCAG-Regeln und Anbindung von Schnittstellen zur Integration externer APIs im Webfrontend.

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.

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.

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.

Nach Abschluss der Weiterbildung sind die Teilnehmenden in der Lage, Weboberflächen zu gestalten, Design- und Entwicklungstools anzuwenden und UI/UX-Konzepte in unterschiedlichen digitalen Kontexten umzusetzen.