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

Diese Weiterbildung vermittelt grundlegende Kenntnisse im Bereich der Frontend-Entwicklung und des User Interface Designs. Die Teilnehmenden lernen die Verwendung von HTML5, CSS3 und JavaScript sowie die Anwendung von aktuellen Design- und Prototyping-Tools wie Figma und Adobe XD.

Modul 1: Frontend Entwicklung und Schnittstellen
Modul 2: UI/UX Design für digitale Anwendungen
Modul 3: Wireframing: Visuelle Struktur und digitale Prozessplanung
Modul 4: Figma: Gestaltung und Prototyping im Webdesign
Modul 5: CSS in der responsiven Webgestaltung

Frontend Entwicklung und Schnittstellen
  • HTML5, CSS3, JavaScript und responsive Design zur Entwicklung von komponentenbasierten User Interfaces.
  • Verwendung von Frameworks wie React, Vue.js oder Angular sowie strukturierter Layoutgestaltung.
  • Einsatz von GitHub zur Code-Verwaltung, Versionssicherung und kollaborativer Entwicklung im Team.
  • Anwendung von WCAG-Kriterien, Anbindung von Schnittstellen und Einführung in automatisiertes Testing.

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.

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.

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.

CSS in der responsiven Webgestaltung
  • Einführung in CSS: Grundlagen zur Gestaltung von Webseiten, Einsatz von Selektoren, Eigenschaften und Strukturierung mit CSS3.
  • Layouts & Techniken: Erstellung responsiver Oberflächen mit Flexbox, CSS Grid und Media Queries für Webdesign-Projekte.
  • Designsysteme & Best Practices: Anwendung von Style Guides, Komponenten-Logik und Frameworks im Frontend Development.
  • Integration & Versionierung: Arbeit mit HTML, GitHub, Coding-Standards und CSS-Organisation für skalierbare Webentwicklungen.

Mit Abschluss der Weiterbildung sind die Teilnehmenden in der Lage, HTML5, CSS3 und JavaScript zur responsiven Webgestaltung einzusetzen, UI/UX-Designprinzipien anzuwenden und Prototyping-Tools zu nutzen.