CAS Web-Experience & UI-Engineering

Design und technische Umsetzung als Erfolgsfaktor der digitalen Industrie

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
• Design-Systeme und UI-Engineering
• Design und Umsetzung interaktiver Systeme
• Projektarbeit