Rocket Man Design System

Einleitung

Im Rahmen dieses Semesters bestand unsere Aufgabe darin, ein Designsystem zu konzipieren und umzusetzen, wobei wir Storybook und React verwendet haben. Die gewählte Aufgabenstellung lautete:

Im Jahr 2050 errichtet die Menschheit ihre ersten Kolonien im Sonnensystem. Die internationale Raumfahrtbehörde nimmt dabei eine Vorreiterrolle ein und entwickelt zahlreiche neue Technologien.

Rocket Man

Unser Designsystem trägt den Namen Rocket Man und ist eine Webanwendung, die die Überwachung von Raketenflügen im Sonnensystem ermöglicht. Die Anwendung bietet eine Übersicht über alle Raketenflüge, die von der internationalen Raumfahrtbehörde durchgeführt werden. Es gibt mehrer Unterübersichten, die es ermöglichen, die Flüge nach verschiedenen Kriterien zu filtern und zu sortieren. Es gibt die Solarsystemansicht, die Planetenansicht und die Raumhafenansicht. Zudem gibt es eine Raketen Detailansicht, die es ermöglicht jede Rakete im Detail zu betrachten und zu überwachen.

Umsetzung

Mood Board

Nach der ersten Funktionsdefinition erstellten wir ein Mood Board für Farben und Benutzeroberflächenelemente. Unser Ziel war es, einen Retro-Future-Stil zu realisieren, wie er häufig in futuristischen Filmen dargestellt wird. Zusätzlich ließen wir uns auch von den technischen Systemen und Umsetzungen von SpaceX in der Raumfahrt inspirieren.

Low-Fidelity Wireframes

Danach erstellten wir Low-Fidelity-Wireframes, um die Struktur des Dashboards zu definieren. Diese Wireframes dienten als Grundlage für die Entwicklung des Designsystems und der Komponenten.

High-Fidelity Wireframes

Nachdem die Low-Fidelity-Wireframes erstellt wurden, haben wir High-Fidelity-Wireframes in Figma erstellt, um die Farben und das Design des Dashboards zu definieren. Danach ging es für uns an die Umsetzung des Designsystems.

Umsetzung

Nach der Gestaltung der Komponenten und Seiten begannen wir mit der praktischen Umsetzung. Dabei war es uns wichtig, sämtliche im Unterricht vermittelten Inhalte zu integrieren. Besonders hervorzuheben sind die implementierten Accessibility-Features sowie die Unterstützung von Dark- und Light-Themes.

Fazit

Im Verlauf dieses Projekts konnten wir umfangreiche Kenntnisse erwerben. Neben dem Aufbau eines Designsystems haben wir neue Möglichkeiten im Umgang mit SCSS und CSS entdeckt. Als Team bemühten wir uns um einen effizienten Workflow auf GitHub und erkannten dabei den Wert von Code-Reviews durch eine zweite Person.

Vision

Wir hatten zahlreiche Ideen, die jedoch nicht in das aktuelle Designsystem integriert werden konnten. Beispielsweise hatten wir die Vision, Raketenflüge durch das Sonnensystem in Echtzeit zu überwachen, ähnlich der Flugüberwachung bei Flugzeugen. Wir wollten also in unserem Solarsystem wirklich die Raketen an ihrem genauen Standort tracken und anzeigen, wie man in Flugkarten die einzelnen Flugzeuge sieht. Darüber hinaus wäre es erstrebenswert gewesen, ein Design für mobile Endgeräte und Tablets zu entwickeln und das gesamte System responsiv zu gestalten.