Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Storytelling with Data

Die hier dokumentierte Studienarbeit ist im Grundlagenkurs „Storytelling with Data“ bei Christian Ivanis entstanden. Bei der mit „Die Reise zum Mars“ betitelten Arbeit handelt es sich um eine interaktive Webseite, die in gemeinsamer Teamarbeit von Kenny Löffler und mir konzipiert sowie umgesetzt wurde.

Aufgabenstellung und Hinführung

Im Rahmen des Kurses sollten methodisch-praktische Fähigkeiten vermittelt werden, um quantitative und qualitative Datensätze gezielt recherchieren, analysieren und so aufbereiten zu können, dass ein guter Zugang zum frei gewählten Thema ermöglicht wird.

Die Hinführung zur selbständigen Ausarbeitung der Studienarbeit erfolgte über Einstiegsübungen wie das Vergleichen und Diskutieren von gelungenen aber auch nicht gelungenen Datenvisualisierungen sowohl in gedruckter als auch digitaler Form. Hinzu kamen kleinere Gruppenarbeiten wie die Erstellung eines persönlichen Datenportraits oder die Visualisierung einzelner Aspekte eines IKEA-Katalogs. Detailaspekte der Datenvisualisierung wurden dem Kurs in umfassenden Referaten präsentiert (Kenny: Musikvisualisierung // Anna: Typografie).

Ideenfindung

Bei der Frage nach dem Thema, das wir beide gemeinsam bearbeiten wollen, standen zunächst sehr unterschiedliche Vorschläge zur Auswahl, so z.B. der Programmierprozess in Processing, ASMR (Autonomous Sensory Meridian Response) Videos, die Plattform Spotify, einzelne Musikstücke und der Planet Mars. Unabhängig voneinander haben wir jeweils unser eigenes Lieblingsthema probeweise ausgearbeitet (Kenny: ASMR-Videos // Anna: Processing) und im Prozess festgestellt, dass sich bei beiden Themen die quantitative Datensammlung als schwierig erweist. Da wir uns beide für die Themen Raumfahrt und Weltall interessieren, entschieden wir uns zum Schluss für das Thema „Mars“. Dabei haben wir die Frage nach der Art der Daten, d.h. ob wir uns quantitative oder qualitative Datensätze vornehmen, am Anfang bewusst offengelassen.

Datensammlung

Ausgehend von der Vorgabe am Ende des Semesters ein A1-Plakat abliefern zu müssen, hielten wir erste Visualisierungsideen skizzenhaft fest. Basierend auf der Art dieser Datendarstellung, recherchierten wir unabhängig voneinander sowohl quantitative als auch qualitative Datensätze zum Mars ganz allgemein. Als Datenquellen schauten wir uns u.a. folgende Plattformen an:

  • NASA Homepage und Instagram Account
  • IMDB Datenbank
  • Spotify Musikplattform
  • Literaturkatalog der Deutschen Nationalbibliothek
  • Wikipedia samt den Quellenverweisen

Als gemeinsamen Datenspeicherort nutzten wir die Plattform Google Docs und hier den Dienst Google Sheets.

Die Datensammlung ist auch unserem Team nicht immer leichtgefallen. Es war insbesondere schwer die Menge und Art der qualitativen Informationen sinnvoll einzugrenzen, gleichzeitig aber auch quantitative Daten so aufzuarbeiten, dass sie sich einheitlich gut visualisieren ließen. Die Präsentation des Grobkonzepts vor dem gesamten Kurs, die uns zur ersten digitalen Ausarbeitung brachte, war hinsichtlich des Zeit- und Ressourcenmanagements ein hilfreicher Meilenstein.

skizzen.jpgskizzen.jpg
grobkonzept.jpggrobkonzept.jpg
datensammlung.jpgdatensammlung.jpg

Umsetzung


Erster Ansatz – Plakat


Nach Sichtung der gesammelten Daten haben wir uns dazu entschieden mit qualitativen Daten zu arbeiten und uns vor allem auf das Storytelling zu fokussieren. Unser Konzept sah vor, spannende, merk- und denkwürdige Informationen zum Mars systematisch gruppiert darzustellen. Die treibende Frage hinter dem Konzept war: Wie ist der Planet Mars in der Geschichte und Kultur der Menschheit präsent? Dazu gehören so unterschiedliche Bereiche wie: Wissenschaft, Mythologie, Populärkultur, Musik, Astronomie und Astrologie. Bezüglich der Arbeitsteilung kümmerte sich Kenny um die grafische Ausarbeitung der Entwürfe in Adobe Illustrator, während ich mich um das inhaltlich-logische Clustering der einzelnen Themenfelder bemühte.

Nach mehreren Versuchen die einzelnen Informationsblöcke sowohl inhaltlich als auch ästhetisch zusammenhängend in der Fläche zu verteilen, mussten wir u.a. feststellen, dass die Idee eines Hauptstrangs in Form eines Zeitstrahls einfach nicht funktionierte. Das visuelle Wandern des Betrachters im Plakat ließ sich nicht zufriedenstellend umsetzen und mündete stets in abgehackten, voneinander zu stark getrennten Wissenshäppchen, die mit der visuellen Form nicht harmonierten. Vor diesem Hintergrund waren wir sehr froh, als sich im Kurs die Möglichkeit aufgetan hatte, sich von der Plakatform lösen zu dürfen und z.B. digital arbeiten zu können.


Zweiter Ansatz – Webseite


Mit der neuen Freiheit bei der Wahl der Form entschieden wir uns sehr schnell für das Erstellen einer Webseite. Außerdem erhielten wir bei der Zwischenpräsentation vom Kurs das Feedback, dass der Ansatz kurze und knackige „Mars Fun Facts“ zu präsentieren wesentlich besser ankommt, als Übersichtsdarstellungen möglichst akkurater, wissenschaftlicher Datensätze. Nach erneuter Sichtung unserer Daten entwickelten wir die Idee einer Marsreise: Ein junger Mensch hat sich entschieden an der Kolonisation des Mars teilzunehmen und begibt sich auf die Reise dorthin. Diese Reise dauert 500 Tage. Daraufhin haben wir alle gesammelten Mars Fun Facts in Relation zu dieser Zeitdauer aufgearbeitet – z.B. wie viele Marsriegel der Astronaut essen könnte, während er auf der Reise ist. Abschließend wird auf der Webseite abgefragt, ob der Betrachter sich ebenfalls für eine Reise zum Mars entscheiden würde.

Nach der von mir vorgenommenen Ausarbeitung der Story sowie der Erzählreihenfolge ging es an die Entwicklung der visuellen Sprache. Wir entschieden uns für einen leichten, poppigen Stil, der den Charakter der Fun Facts unterstreicht. Kenny erstellte mehrere Illustrationen in Adobe Illustrator, auf Google Fonts suchten wir gemeinsam nach passender Typografie und arrangierten abschließend die einzelnen Elemente in Sketch zu einem Layout. Bei diesem Prozess durchliefen wir mehrere Iterationsschleifen, wobei wir Entscheidungen über Farbe und zusätzliche Elemente immer wieder aufs Neue abwägten.

webseite_layout.jpgwebseite_layout.jpg
webseite_visuals.jpgwebseite_visuals.jpg
webseite_reihenfolge.jpgwebseite_reihenfolge.jpg

Finale Webseite

Während der Umsetzung der Webseite in HTML & CSS stießen wir immer wieder auf die Notwendigkeit unsere technischen Möglichkeiten mit unserem ästhetischen Anspruch zu balancieren. Die technischen Voraussetzungen sollten den ästhetischen Ausdruck nicht zu stark beeinflussen. Gleichzeitig waren wir jedoch in einen Semesterzeitplan eingebunden und durften die Machbarkeit dieser Semesterarbeit nicht aus den Augen verlieren. Die endgültige Form der Webseite speist sich aus diesen drei Bereichen: ästhetischer Anspruch, technische Möglichkeiten und vorgegebener Zeitrahmen.

finale_webseite.jpgfinale_webseite.jpg
finale_webseite2.jpgfinale_webseite2.jpg

Persönliches Fazit und Ausblick

Die Auseinandersetzung mit dem Prozess der Datenvisualisierung ist für uns beide ein spannender und lehrreicher Prozess gewesen. Ich persönlich bin sehr froh, dass ich Kenny bei seiner Arbeit an den Illustrationen und der technischen Umsetzung der Webseite über die Schulter schauen durfte und natürlich für die Zigaretten. Ich selbst nehme dankend das Kompliment für meine strukturierte und planerische Herangehensweise an die Umsetzung an.

Die große Freiheit, die im Kurs gegeben war, brachte uns beides – die Freuden der interessen- und lustgeleiteten Auswahl aber auch die Frustration der eingeschränkten Machbarkeit. Wir beide sind für diese Freiheit dankbar und freuen uns die Webseite bei der Werkschau präsentieren zu können. Und bis dahin bleibt nur noch die Abfrage zu programmieren ;).

Fachgruppe

Gestaltungsgrundlagen

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: CI

Entstehungszeitraum

Wintersemester 2018 / 2019

Keywords