CAS Web-Experience & UI-Engineering

Hochschule für Informatik

Design und technische Umsetzung als Erfolgsfaktor der digitalen Industrie

Steckbrief

Abschluss: CAS FHNW
ECTS-Punkte: 12
Nächster Start: 27.3.2026
Dauer: 16 Kurstage, Selbststudium: 20 Stunden pro Modul
Unterrichtssprache(n): Deutsch; Grundkenntnisse in Englisch essenziell
Durchführungsort(e): FHNW Campus Brugg-Windisch
Preis: CHF 8'200
Dokumente: Weiterbildungsordnung-HSI-2025.pdf
Reglement CAS Web Experience _ UI-Engineering.pdf
Factsheet CAS Web-Experience & UI-Engineering.pdf
CAS Web-Experience & UI-Engineering Programm.pdf
20250101_teilnahmebedingungen-wb-hsi-fhnw.pdf
Factsheet CAS Web-Experience UI-Engineering.pdf

Auf einen Blick

Effizienz durch Systematik: Design-Systeme entwickeln und implementieren – der Schlüssel zu hochwertigen digitalen Produkten
Design meets Engineering: Anspruchsvolle Designs professionell umsetzen
Konsistenz durch Qualität: Wartbare und skalierbare Codebasis aufbauen – Best Practices im UI-Engineering

Ziele und Nutzen

Was wir dir vermitteln und vorleben

Professionelle Web-Oberflächen entstehen nicht zufällig, sondern durch die enge Verzahnung von Gestaltungs- und Umsetzungskompetenz.

Moderne Web-Applikationen müssen heute einem anspruchsvollen Anforderungsprofil gerecht werden: ein konsistentes Design-System, klare Accessibility-Standards sowie Zuverlässigkeit, Erweiterbarkeit und Wartbarkeit sind ebenso entscheidend wie eine performante Implementierung.

Die Fähigkeit, Design und technische Umsetzung nahtlos zu verbinden, ist zu einem zentralen Erfolgsfaktor in der digitalen Industrie geworden.

Zielpublikum

Frontend-Entwickler:innen, die ihre Design-Kompetenz erweitern möchten
UI/UX-Designer:innen, die tiefere Einblicke in die technische Umsetzung suchen
Web-Entwickler:innen, die sich im UI-Engineering spezialisieren möchten
Projektmanager:innen, die ihre Teams in der Schnittstelle zwischen Design und Entwicklung stärken wollen

Aufbau und Inhalte

Gestaltungskompetenz und Umsetzungskompetenz führen gemeinsam zum Erfolg in der digitalen Industrie. Im CAS werden beide Bereiche eng miteinander verzahnt vermittelt:

HTML/CSS/JS (Umsetzungskompetenz): Moderne HTML-Semantik, fortgeschrittene CSS-Techniken (Cascade, Selectors, Custom Properties, Layout mit Grid/Flex/Container Queries, Positioning inkl. Anchor & Layers), Animationen & Transitions, Farb- und Typografie-Systeme in CSS, Units & Intrinsic Design, SVG im Frontend sowie robuste JavaScript-Grundlagen (ES6+ APIs) für UI-Verhalten, Performance und Wartbarkeit.

Design/Figma (Gestaltungskompetenz): UI-Engineering mit Figma: Components & Variants, Styles & Variables, Libraries, Auto-Layout (von Basics bis Advanced), Prototyping (Interactions, Smart Animate), Plugin-Workflows, Import/Export sowie Multi-Mode-Setups (z. B. Light/Dark).

Beide Disziplinen wirken zusammen: Gestaltung wird technisch tragfähig umgesetzt, und technische Details spiegeln sich konsistent im Design-System wider.

Modulübersicht

Grundlagen moderner Web-Entwicklung

Semantisches Web und moderne HTML5-Strukturen
Fortschrittliche CSS-Techniken und Layout-Systeme
JavaScript ES6+ und moderne Web-APIs
Entwicklungsumgebungen und Werkzeuge
Intrinsic Design

Design-Systeme und UI-Engineering

Design-System und Implementierung
Komponentenbasierte Entwicklung
CSS-Organisation und Styling-Methodologien
Design-Tokens und Theming (Light Mode & Dark Mode)
Wiederverwendbare UI-Bausteine
Konzeption und Umsetzung eines eigenen Design-Systems

Design und Umsetzung interaktiver Systeme

Interaktive Benutzeroberflächen
Direktmanipulative Interfaces
Bewährte Patterns für Frontend-Entwicklung
3D & Advanced Effects

Projektarbeit

Design und Entwicklung einer eigenen Web-Anwendung
Geführte Code und Design Reviews
Abschlussbesprechung mit Showcase-Effekt
Aufbau eines individuellen Design-Systems

International

Dozierende

Fabian Affolter (Gestaltung) und Prof. Dierk König (Umsetzung) verbinden jahrelange Erfahrung in der Entwicklung geschäftlicher und wissenschaftlicher Software mit der Leidenschaft für die Vermittlung moderner UI-Engineering-Praktiken. Ihr gemeinsamer Ansatz: Die kreative Synergie zwischen Design und Entwicklung zu nutzen, um durch gegenseitiges Verständnis tragfähige Lösungen zu entwickeln.