Die Studierenden lernen Praktiken der komponentenbasierten Front-End-Entwicklung kennen. Der Kurs legt dabei Wert auf die Wiederverwendbarkeit von UI Elementen und behandelt wichtige Aspekte wie Barrierefreiheit und Internationalisierung.
Die Vorlesung kombiniert theoretische Konzepte mit praktischen Übungen. Nach einer Einführung in die Entwicklung von Design Systemen werden verschiedene Front-End-Technologien wie JavaScript, HTML, CSS, SCSS und Standards wie ARIA im Detail behandelt. Im praktischen Teil des Kurses entwickeln die Studierenden ein eigenes Design System mit konsistentem Erscheinungsbild. Die Umsetzung wird mit React und Storybook realisiert.
Im Rahmen des Kurses “Design System Engineering” werden Studierende mit den Best Practices der komponentenbasierten Front-End-Entwicklung vertraut gemacht. Die Lehre fokussiert auf die Wiederverwendbarkeit von Benutzeroberflächenkomponenten und adressiert essenzielle Themen wie Barrierefreiheit und Internationalisierung.
Unser Projekt, eine Fitness-App, verkörpert diesen Lehransatz durch ihr Design und ihre Funktionalität. Sie fördert gesunde Gewohnheiten durch einfaches Monitoring der Ernährung, körperlichen Aktivität und Hydratation. Mit einer intuitiven Benutzeroberfläche, die sowohl im Light- als auch im Darkmode zugänglich ist, visualisiert die App Fortschritte und motiviert zu einem gesunden Lebensstil. Die Screenshots zeigen die Hauptseite und die spezifische Ansicht zur Wasseraufnahme.
Entdecke die einzelnen UI-Elemente, ihre Anwendung und die technische Dokumentation in unserem Storybook, das ein Herzstück unseres Design Systems bildet: Storybook der Fitness-App.
