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.
Wir haben eine Health-App namens Nuvi entwickelt, die Nutzern hilft, ihre täglichen Gesundheitsziele zu verfolgen. Unser Fokus lag dabei auf Usability, motivierendem visuellen Feedback und einer intuitiven Nutzerführung, um gesunde Gewohnheiten nachhaltig zu fördern.
Personalisierte Gesundheits-Widgets
Nuvi bietet Widgets für Wasserzufuhr, Schritte sowie Obst- und Gemüseaufnahme und ermöglicht eine einfache Verwaltung persönlicher Gesundheitsdaten.
Ein modernes Dashboard gibt jederzeit einen klaren Überblick über den Fortschritt und motiviert durch visuelle Hinweise zur kontinuierlichen Nutzung.
Die Widgets gibt es in zwei Varianten:
Kleine Widgets für eine schnelle Übersicht der aktuellen Werte.
Große, animierte Widgets zur interaktiven Eingabe, die das Tracken der Gesundheitsdaten intuitiv und ansprechend gestaltet.
Strukturiertes Design-System & Barrierefreiheit
Um eine konsistente und barrierefreie Nutzererfahrung zu gewährleisten, haben wir ein Design-System mit React und SCSS entwickelt.
ARIA-Attribute und weitere zugängliche Funktionen sorgen dafür, dass die App für eine breite Nutzerschaft optimiert ist.
Mit Storybook dokumentieren und entwickeln wir UI-Komponenten strukturiert und ermöglichen eine effiziente Anpassung.
Datenanalyse & Fortschrittskontrolle
Nuvi bietet dynamische Diagramme, die eine detaillierte Analyse der erfassten Daten ermöglichen. Nutzer können ihre Werte nach Tag, Woche oder Monat filtern und langfristige Entwicklungen in ihren gewählten Gesundheitsbereichen nachvollziehen.
Unser Ziel war es, eine App zu entwickeln, die nicht nur funktional, sondern auch motivierend ist – mit ansprechendem Design, interaktiven Elementen und leicht verständlichen Visualisierungen.
