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 der Vorlesung Design System Engineering bestand unsere Aufgabe darin, ein Design System zu entwickeln und mit Storybook umzusetzen, einem Tool zur Entwicklung, Erprobung und Dokumentation von UI-Komponenten.
Unser Projekt spielt im Jahr 2050, einer Zeit, in der die Menschheit ihre ersten Kolonien im Sonnensystem errichtet hat. Die internationale Raumfahrtbehörde IRFB nimmt dabei eine zentrale Rolle ein: Sie ist Vorreiter in der Entwicklung neuer Technologien und verantwortlich für die interplanetare Mobilitätsinfrastruktur.
Unsere Aufgabe war es, ein Dashboard zu gestalten, das der IRFB einen umfassenden Überblick über diese Infrastruktur ermöglicht. Dieses Design System bildet die Grundlage für eine intuitive, effiziente und skalierbare Benutzeroberfläche, die den komplexen Anforderungen interplanetarer Mobilität gerecht wird.
Wir entschieden uns für ein retrofuturistisches UI-Design, das an klassische Computerterminals erinnert. Klare Rasterlayouts, monochrome Farbschemata, pixelbasierte Schriften und minimalistische Icons erzeugen eine vertraute, funktionale Ästhetik. Kombiniert mit modernen Interaktionsmustern entsteht ein Interface, das nostalgische Terminal-Elemente mit zeitgemäßer Usability verbindet.
Willkommen im Designsystem der IRFB
Die Internationale Raumfahrt Behörde (IRFB) präsentiert ihr Designsystem, entwickelt von der RAUM-ZEIT-IT (Regionale Abteilung für Umlaufbahn-Management der Zentralen Europäischen Interstellaren Transport- Entwicklungs-Initiative für Terrestrische & Interplanetare Taktung).
Komponenten
Unser Designsystem besteht aus den folgenden Kernkomponenten:
Basis-Komponenten
Alert: Systembenachrichtigungen und Warnmeldungen
FlightDetails: Detaillierte Fluginformationen
FlightTable: Tabellarische Flugübersicht
LoginButton: Authentifizierungssteuerung
Progress: Fortschritts- und Auslastungsanzeigen
Status: Gesamtsystemstatus-Übersicht
StatusItem: Einzelne Statusanzeigen
Tree: Hierarchische Datennavigation
Layout-Komponenten
Header: Systemzeit und globale Steuerung
Card: Container für strukturierte Informationsdarstellung
Map: Sonnensystem-Visualisierung
Design-Philosophie
Unsere Gestaltungsprinzipien:
Konsistenz: Einheitliche Gestaltungssprache über alle Komponenten
