Screendesign, UX, Webentwicklung & digitale Prototypen
Das Modul Digitale Medien fasst alle Inhalte aus den verschiedenen Semesterstufen zusammen und vermittelt durchgehend praxisnahe Kompetenzen im Screendesign, UX-Design, der Webentwicklung und der digitalen Prototypisierung. Die Studierenden lernen, mediengerechte Interfaces zu gestalten, technisch umzusetzen und professionelle digitale Präsentationen zu entwickeln.
Leitidee: Digitale Gestaltung verbindet visuelles Denken, Nutzerpsychologie und technischen Feinsinn zu einem funktionalen, intuitiven und ästhetischen Gesamtsystem.
Zu Beginn des Moduls stehen die basalen Grundlagen der digitalen Gestaltung im Fokus: Struktur, Navigationslogik, visuelle Hierarchien, responsive Layouts und zeitgemäße Interface-Standards. Die Studierenden analysieren moderne Websites, mobile Apps und digitale Stilwelten wie Flat Design, Skeuomorphismus oder Material Design, um ein Verständnis für Trends, Konventionen und Gestaltungssysteme aufzubauen.
Grundlagen von Screendesign & UX-Design
Die Studierenden setzen sich intensiv mit Nutzerführung und Wahrnehmungspsychologie auseinander:
- Informationsarchitektur und visuelle Priorisierung
- Navigation & User Flows
- Typografie für digitale Oberflächen
- Designsysteme & modulare UI-Bausteine
- Microinteractions & Feedbackprinzipien
Dabei entsteht ein Verständnis dafür, wie digitale Produkte nicht nur gut aussehen, sondern sich richtig anfühlen.
Prototyping & Wireframing mit Figma
Aufbauend auf der gestalterischen Basis erstellen die Studierenden digitale Prototypen in Figma:
- Wireframes für mobile & Desktop
- Mockups kompletter Interface-Strecken
- Interaktive Klick-Prototypen
- UI-Kits & Komponentenbibliotheken
„Ein Prototyp ist die schnellste Form, eine Idee sichtbar, testbar und erlebbar zu machen.“
Ein zentraler Bestandteil ist die technische Umsetzung eigener Screendesign-Ideen. Die Studierenden lernen:
- HTML-Struktur & semantisches Markup
- CSS-Grundlagen & das Box-Modell
- Webfonts, Farben & Layout-Systeme
- Medienabfragen & Breakpoints
- Bootstrap & responsive Grids
- Arbeiten mit Vorlagen und bestehenden Templates
Zusätzlich werden Entwicklungsumgebungen wie Visual Studio Code eingerichtet und Workflows wie FTP-Upload, Hosting-Basics und technische Qualitätskriterien vermittelt.
Im fortgeschrittenen Teil des Moduls arbeiten die Studierenden an eigenständigen Projekten wie:
- persönlichen Portfolio-Webseiten,
- dynamischen oder responsiven Webminiaturen,
- digitalen Prototypen für Bewerbungszwecke,
- Experimenten mit modernen Webthemen (KI, AR, VR, mobile Interfaces),
- Mitwirkung an der Schul-Webplattform für Abschlussjahrgänge.
Abschließend präsentieren die Studierenden ihre Projekte und reflektieren Wirkung, Benutzerfreundlichkeit und gestalterische Logik.
Das Modul Digitale Medien führt so von den Grundlagen digitaler Gestaltung bis hin zur professionellen, mediengerechten Umsetzung komplexer Webprojekte – gestalterisch, technisch und konzeptionell.
