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 Reiseplanungs-App namens „Auf und Davon“ entwickelt, die Nutzer:innen dabei unterstützt, ihre Reisen einfach und intuitiv zu organisieren. Unser Fokus lag auf einer visuell ansprechenden, dynamischen und strukturierten Nutzererfahrung, bei der sich die Inhalte automatisch an das aktuelle Reiseziel anpassen.
Durch eine moderne UI-Gestaltung, interaktive Elemente und eine klare Informationsstruktur ermöglicht die App eine reibungslos koordinierte Reiseplanung.
Dynamische Reiseplanung & Inhalte
Automatisch wechselnde Inhalte
Die App nutzt ein interaktives Carousel, um zwischen Reisezielen zu wechseln.
Je nach Auswahl aktualisieren sich:
Timeline: Zeigt geplante Aktivitäten, Sehenswürdigkeiten und Reservierungen für das gewählte Ziel.
Tickets: Alle relevanten Eintrittskarten und Buchungen sind direkt verfügbar.
Navigation: Die App behält eine klare Struktur und erleichtert das Auffinden von Informationen.
Funktionen
Tagesplanung mit Timeline
Alle geplanten Aktivitäten & Reservierungen werden übersichtlich in einer Timeline dargestellt.
Enthält wichtige Informationen zu Uhrzeiten, Orten und Beschreibungen.
Automatische Aktualisierung bei Änderung des Reiseziels.
Ticketverwaltung mit QR-Code
Alle gebuchten Tickets sind in einer zentralen Übersicht abrufbar.
QR-Code-Integration ermöglicht schnellen Zugang zu Veranstaltungen, Sehenswürdigkeiten und Transportmitteln.
Detaillierte Angaben zu Datum, Uhrzeit, Sitzplatz & mehr.
Interaktive Navigation & Benutzerführung
Eine Tabbar ermöglicht den Wechsel zwischen Timeline & Ticketübersicht.
Die Navigationsleiste sorgt für eine intuitive Orientierung.
Dynamische Inhalte passen sich je nach Reiseziel an.
Design-System & Barrierefreiheit
Farbschema mit Design-Tokens für eine konsistente & ansprechende UI.
ARIA-Unterstützung sorgt für Barrierefreiheit.
Dark Mode & Light Mode optimieren die Lesbarkeit in jeder Umgebung.
Analyse & Visualisierung
Fortschrittsanzeige & Reisedaten
Die App ermöglicht eine klare Darstellung der Reisepläne durch visuelle und strukturierte Informationsblöcke.
Reiseroute & Aktivitäten sind jederzeit abrufbar.
Tickets & Buchungen werden zentral gespeichert und können einfach gescannt oder weitergegeben werden.
Fazit
„Auf und Davon“ bietet eine moderne, dynamische und strukturierte Lösung für alle, die ihre Reisen effizient organisieren möchten.
