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.
Das Core Design System wurde basierend auf der Fitness-App FitCore entwickelt. Die Anwendung unterstützt Nutzer bei der Organisation ihrer Trainingstage und der Verfolgung ihres Fortschritts. Der Fokus liegt auf essenziellen Komponenten für den täglichen Gebrauch in einer mobilen Anwendung. Ziel war es, den Fortschritt visuell darzustellen, das Design simpel und übersichtlich zu halten und durch umfangreiche Recherche zu Fitness-Apps und Gadgets eine optimale Nutzererfahrung zu schaffen.
Homescreen
Der Homescreen zeigt den Fortschritt in Bezug auf die gesetzten Trainingsziele. Im Beispiel sind fünf Workouts für die Woche geplant: zweimal Arme, zweimal Oberkörper und einmal Beine. Bereits abgeschlossene Workouts werden in einer Fortschrittsanzeige dargestellt. Direkt darunter sind gespeicherte Workouts sichtbar, inklusive einer Übersicht der nächsten geplanten Einheiten mit der Möglichkeit, das Training direkt zu starten.
Workout
Die Workout-Ansicht listet die anstehenden Übungen auf, inklusive Wiederholungen und Gewicht. Eine seitliche Fortschrittsanzeige zeigt, wie weit das aktuelle Training bereits absolviert wurde. Am unteren Rand befinden sich Buttons, um das Workout abzuschließen oder abzubrechen.
Kalender
Die Kalenderansicht zeigt den aktuellen Monat mit markierten Tagen, an denen ein Workout absolviert oder geplant wurde. Der aktuelle Tag wird mit einem dickeren Rahmen in der Hauptfarbe hervorgehoben.
