Zielsetzung des Kurses
Der Kurs zum Thema Webdesign Prototyping und Webdesign Responsiveness vermittelt Vorgehensweisen zur Konzeption, Ausarbeitung und Prüfung von Webseitenentwürfen mit Fokus auf responsiven Aufbau. Behandelt wird das Zusammenspiel von Low- bis High-Fidelity-Prototypen, Designsystemen und Breakpoints für unterschiedliche Endgeräte. Die Inhalte sind im Fachgebiet der digitalen Gestaltung und Frontend-Planung verortet und berücksichtigen gestalterische, technische und organisatorische Aspekte. Ziel ist die strukturierte Anwendung von Prototyping-Methoden zur Vorbereitung auf responsive Implementierungen.
Inhalte
Einführung in Prototyping-Methoden mit Abgrenzung von Skizze, Wireframe und interaktivem Prototyp sowie Festlegung von Navigationsstrukturen, Informationsarchitektur und Nutzerflüssen.
Erarbeitung von responsiven Layouts anhand von Grid-Systemen, Flex-Layouts und Breakpoints inklusive Typografie- und Farbkonzepten für unterschiedliche Viewports.
Ausarbeitung von Styleguides und Designsystem-Bausteinen mit Komponenten, Zuständen und Interaktionen als Grundlage für konsistente Oberflächen.
Erstellung und Test von klickbaren Prototypen, Durchführung von Feedbackschleifen und Ableitung von Anpassungen aus Beobachtungen.
Übertragung in Entwicklerhandovers mit Spezifikationen zu Abständen, Assets, Barrierefreiheit und Performance-orientierten Gestaltungsentscheidungen.
Überblick zu Werkzeugen und Dateiformaten im Prototyping sowie Dokumentation der Varianten für Desktop, Tablet und Smartphone.
Lernziele
- Analysieren von Nutzerflüssen und Informationsarchitektur zur Ableitung von Wireframes
- Unterscheiden von Prototyping-Grade (Low-, Mid-, High-Fidelity) und passenden Einsatzszenarien
- Erstellen von responsiven Layouts mit definierten Breakpoints und skalierbaren Komponenten
- Durchführen von Tests mit interaktiven Prototypen und Ableiten konkreter Anpassungen
- Implementieren von Designsystem-Bestandteilen in Prototypen inklusive Zuständen und Interaktionen
- Integrieren von Spezifikationen für das Entwicklerhandover mit Maßangaben, Assets und Accessibility-Hinweisen
Berufsperspektiven
Die Kursinhalte finden Anwendung in Berufsfeldern wie UX/UI-Design, insbesondere bei der Erstellung interaktiver Prototypen und responsiver Oberflächen. Typische Tätigkeitsfelder umfassen Webdesign und Frontend-Konzeption mit Fokus auf Layouts, Komponenten und Breakpoints. Der Kurs adressiert Inhalte für Tätigkeiten wie Product Design und digitale Gestaltung, bei denen Prototypen, Designsysteme und Entwicklerhandovers eingesetzt werden.
Zusammenfassung
Der Kurs Webdesign Prototyping und Webdesign Responsiveness behandelt die Konzeption, Ausarbeitung und Prüfung interaktiver Entwürfe für unterschiedliche Endgeräte und Viewports. Im Rahmen dieser Weiterbildung werden Methoden des Prototypings mit Anforderungen an responsive Layouts, Komponenten und Übergaben an die Entwicklung verbunden. Die vermittelten Themen stehen in Bezug zu Tätigkeitsfeldern wie UX/UI-Design, Webdesign und Product Design.