Apollo Raumfahrtprogramm

Innerhalb des Web-Kurses haben wir uns für das Apollo Raumfahrtprogramm entschieden. Dieses Thema fanden wir zum einen interessant und es bestand die Herausforderung , ein geschichtliches Thema interessant aufzubereiten. Als Vorteil sahen wir hierbei, dass das Thema bereits abgeschlossen ist und unsere Wikipedia-Seite hierbei auch lange aktuell wäre.

Konzept

Nach einigen Skizzen und Ideen haben wir uns für einen Onepager als Startseite entschieden. Die allgemeinen Infos des Apollo Programms informiert: Gründung, Erfolge, Missionen, Raumschiff. Im jeweiligen Themenbereich dienen Texte, Bilder und Grafiken als Informationsquelle. Alles ist dabei so einfach wie möglich und nicht zu wissenschaftlich beschrieben. Im Bereich Missionen befindet sich eine Auflistung aller Missionen. Jede einzelne Mission ist klickbar, wodurch man auf detailliertere Missionsseiten gelangt. Hier gibt es die Daten in Steckbriefform, Besatzung, Verlauf er Mission mit Animationen und jeweils eine Besonderheit der Mission.

Umsetzung

Die Umsetzung des Projekts haben wir in Figma erstellt. Es war für uns sehr einfach in der Handhabung, obwohl wir mit Figma noch nicht gearbeitet hatten. Zudem konnten wir super zusammen an einem Dokument arbeiten, was das Arbeiten im Homeoffice immens erleichtert hat.
Als erstes legten wir das Dokument an, welches in ein 12-spaltiges Raster gegliedert wurde. Die Breite des Prototyps haben wir an die Bildschirmbreite eines MacBook Pros angepasst, die Länge variiert je nach Inhaltsmenge.

Design

Typografie

Für die Headlines haben wir die Avenir Black gewählt, für Beschriftungen und Fließtext die IBM Plex Sans Medium. Die Headlines sind in 48 Punkt Schriftgröße, der Fließtext in für Web typischen 18 Punkt.
Headlines sind in weiß, um sich vom Fließtext, grau, abzuheben. Zudem haben wir bei wichtigen Elementen unsere rote Highlightfarbe als Schriftfarbe verwendet.

Animationen

Die Animationen sind direkt aus den Grafiken abgewandelt, d.h. Konturstärke und Formen sind identisch bzw. wiedererkennbar.
Zusätzlich haben wir sie, da sie sich bewegen, für eine bessere „Lesbarkeit“ grau auf den Flächen eingefärbt. Besonders wichtige Elemente, z.B. die Darstellung der Explosion im Servicemodul, sind auch hier wieder mit unserer roten Highlightfarbe dargestellt, um sie optisch klar über den Rest der jeweiligen Grafik zu stellen.

Interaktive Elemente

Die interaktiven Elemente sind in ihrem Erscheinungsbild an die Grafiken angepasst. Das eine interaktion stattfinden kann, z.B. durch hovern, oder klicken mit dem Cursor, wird durch unsere rote Highlightfarbe angezeigt.
Die Highlightfarbe informiert den Benutzer auch, wo er sich gerade befindet. In der Timeline ist dann der Kreis und die Beschriftung rot.