Webentwicklung + Wireframes + Prototyping + UX/UI

Diese Weiterbildung vermittelt Kenntnisse in der Erstellung von Webseiten und digitalen Prototypen mit Fokus auf Technologien, Wireframes und UX/UI-Design. Sie bietet Einblicke in die Strukturierung und den Einsatz aktueller Tools für die Webentwicklung.

Modul 1: Technologien und Werkzeuge der Web Entwicklung
Modul 2: Wireframe: Strukturierung, Tools und Interface-Planung
Modul 3: Figma: Digitale Designsysteme und Prototyping-Workflows
Modul 4: UX/UI Konzepte im digitalen Produktdesign

Technologien und Werkzeuge der Web Entwicklung
  • Webseiten erstellen mit HTML5, CSS3, JavaScript: Struktur, Stil und Funktion für Browser- und Gerätetypen umsetzen.
  • Frontend-Engineering: Umsetzung mit Webflow, CSS Grid, Wireframes und responsivem Design auf Grundlage der WCAG.
  • Serverkommunikation & Datenbankzugriff: Verwendung von Node.js, SQL Datenbanken, API Schnittstellen und JSON.
  • Projektstrukturierung mit Tools: Einsatz von GitHub Repositories, Vue.js, Angular und agiler Webentwicklung.

Wireframe: Strukturierung, Tools und Interface-Planung
  • Wireframes als Planungstool für Webseiten, Interfaces und Anwendungen im Kontext von UX Design und Nutzerführung.
  • Digitale Wireframes mit Figma, Sketch und Adobe XD zur Visualisierung statischer und interaktiver Benutzeroberflächen.
  • Wireframing zur Analyse von Navigationsstrukturen, Responsive Design und Usability-Aspekten im UI/UX-Prozess.
  • Integration in UI-Workflows, Übergabe an Frontend-Teams und Anbindung an Designsysteme und User Interface Coding.

Figma: Digitale Designsysteme und Prototyping-Workflows
  • Grundlagen der Prototyp-Erstellung mit Figma, Aufbau interaktiver UI-Designs und Wireframing im Webdesign-Kontext.
  • Anwendung von Komponenten, Responsive Design, Grid Design und Style Guides in figma-basierten Projekten.
  • Teamarbeit mit Entwicklern durch Kommentierung, Dokumentation und figma-gestützte Entwicklerübergabe.
  • Erstellung interaktiver Prototypen, Durchführung von Usability-Tests und Ableitung gestalterischer Optimierungen.

UX/UI Konzepte im digitalen Produktdesign
  • Designprozesse mit Fokus auf Interface-Strukturen, App-Logik und mobilen Anwendungen für Android, iOS und responsive Webseiten.
  • Analyse von Nutzerverhalten mit User Research, Personas, Usability-Kriterien und Customer Journey Mapping im Designablauf.
  • Erstellung interaktiver UI-Prototypen mit Figma, Sketch oder Prototyping Software für mobile und webbasierte Interfaces.
  • Einsatz von A/B Testing, User Testing und Feedbacksystemen zur Optimierung digitaler Benutzeroberflächen.

Mit Abschluss der Weiterbildung sind die Teilnehmenden in der Lage, Webseiten und Prototypen mit gängigen Webtechnologien und UX/UI-Methoden zu gestalten und anzuwenden. Sie nutzen Tools wie Figma und Sketch zur Optimierung digitaler Produkte.