Vorstellungsvideo

“If I was a” is a TikTok trend from 2022. It allows creators to show a variety of aspects of their personalities. Instead of talking and telling stories about oneself, the pictures used in the separate categories give hints about how the person would describe themselves through their interests and favorite things.

Pw: Thisisme

Theorie 1.1 - erste Überlegungen zur Infografik

Was macht mich aus? Wo gehöre ich dazu? Wer bin ich? Sich mit sich selbst auseinanderzusetzen liegt in der Natur des Menschen. Daher ist es nicht verwunderlich, dass sich auch Künstler allzu gern von Ihren Eigenschaften inspirieren lassen. Auch der Trend des „Quantified Self„ fängt schon bei Selbstporträts von Malern wie Rembrandt an. Die eigenen Vor-lieben, Angewohnheiten, Wünsche oder das eigene tägliche Leben sind Themen, mit denen sich Künstler auseinandersetzen. Beispielhaft dafür ist unter anderem Christoph Niemann mit seinem Werk „Abstract City. Mein Leben unterm Strich“. Darin illustriert er unterschiedliche Aspekte seines Alltags in humoristischen Grafiken.

Infografik “personal identification numbers“, Beispiel zur “quantified self“-Bewegung

Theorie 1.2 - Infografik als Meinungsmacher

Heutzutage sind Infografiken ein sehr beliebtes Mittel zur Veranschaulichung verschiedenster Daten. Dank ihnen ist es möglich, trotz der stetig wachsenden Menge an Informationen einen Überblick zu behalten. Die Informationen werden jedoch nicht frei von Meinungen in den Infografiken präsentiert. So schaffte es beispielsweise Colin Powell, mittels einer Grafik (gezeigt wurden angebliche mobile Biowaffenlabore), den UN-Sicherheitsrat davon zu überzeugen, die Irakinvasion von 2003 zu initiieren.

Infografik zur ungerechten Gewinnverteilung in der Schokoladenbranche

Theorie 1.3 - Infografik im Raum

Sehr lange schon findet man Infografiken nicht mehr nur auf Papier oder im digitalen Raum. Sie werden Teil vom Raum bspw. als Wandbild oder interaktiver Station einer Ausstellung. Oder sie bilden das Herzstück einer Installation die ganze Räume einnimmt, wie das Projekt „Mehrung“ von Böhler & Orendt. Doch auch außerhalb von showrooms sind Infografiken anzutreffen. Sie werden in Kunstprojekten aufgefasst („Phantom Truck 2“ von Inigos Manglano-Ovalle), oder sind verankert mit dem echten Leben durch die geschickte Verbindung von Dingen des Alltags und infografischen Gestaltungsmustern („1meter Party“ - Helmut Smits / „Infographics in context“ - Peter Orntoft)

Theorie 2.1 - Was macht eine gute Infografik aus?

Infografiken werden genutzt, um Informationen (beispielsweise aus Datensätzen) zu visualisieren. Dabei kommt es nicht unbedingt auf die Menge, sondern auch auf die Aufbereitung der Daten an. Die wenigsten Menschen wollen sich Seite um Seite mit Exceltabellen auseinandersetzen.

Eine Story hinter den Zahlen hilft daher dem Leser die Informationen aufnehmen zu können und bringt ihn dazu, mehr erfahren zu wollen.

Laut Rob Orchard zeichnen sich gute Infografiken durch 7 Punkte aus: das richtige „Setting„ (Ort), eine starke Aussage, ein klares Ziel, zu dem die Infografik hinführt, brisante Informationen („Killer Facts“) über interessante Persönlichkeiten, einen persönlichen Bezug zum Betrachter und gern auch Humor. Gelungene Infografiken zeichnen sich außerdem durch eine starke Verbindung von Inhalt und äußerer Form aus.

Infografik aus dem Delayed Gratification Magazine zu Filminhalten

Theorie 2.2 - Wie befrage ich einen Datensatz?

Datensätze sind riesige Sammlungen von Rohinformationen. Der massive Umfang der Daten muss zunächst mithilfe von Software in eine lesbare Form gebracht werden. Anschließend schaut man nach besonderen „Mar-kern„, um interessante Aspekte herauspicken zu können. Dazu zählen vor allem Anomalien, Extrempunkte (sehr hohe oder sehr niedrige Werte) und Durchschnitte. Die Daten können außerdem nach story-technischen Aspekten (Stereotypen etc.) untersucht werden.

Theorie 3 - Formen der Infografik

Infografiken lassen sich allgemein in 4 Gruppen einteilen. Liniendiagramme - Darstellung der Daten durch Linien oder Linienpunkte, Kreisdiagramme - kreisförmige Visualisierungen (auch Ringe, Kreisabschnitte), Datenblöcke - Balken oder Blöcke, die die Informationen darstellen und Prozessdiagramme - Darstellung einzelner Prozessabschnitte in zeitlicher Abfolge (Flussdiagramm, Sankey Diagramm, Zeitstrahl). Außerdem gibt es Mischformen dieser Gruppen und Sonderformen wie Piktogramme und Kartendiagramme.

Exkurs: Das „Orange-Peel-Problem“

Das sogenannte „orange-peel-problem„ beschreibt, dass bei der Übertragung von Punkten der Oberfläche einer Kugel auf eine zweidimensionale Fläche Fehler entstehen. Dadurch entsprechen Weltkarten nach der Mer-catorprojektion (gängigste Version der Weltkarte) in ihren Proportionen nicht der Realität. Je weiter sich ein Land vom Äquator entfernt, desto verzerrter wird seine Größe dargestellt. Dafür ist diese Projektion win-keltreu und ermöglicht das Navigieren auf See und in der Luft. Karten, die auf der „Peters Projektion“ beruhen, stellen die Proportionen der Landmassen korrekt dar, aber können nicht bei der Navigation eingesetzt werden.

Übersicht der Formen von Infografiken und Grafiken zu Fischer- und Mercatorprojektion

Semesterprojekt - SMOKESHOW

Hintergrund

Nach der ersten Sichtung der vom Hans Otto Theater erhobenen Emissionsdaten fiel uns schnell auf, dass der Transportsektor allein über 50 % der Gesamtemissionen des gesamten Theaters ausmacht. Vor allem die Besuchermobilität stößt jährlich 165,5 Tonnen CO₂ äquivalente Gase (CO2e) aus. Doch wie viel ist das überhaupt und welche Transportmittel stoßen wie viele klimaschädliche Gase aus?

Mit SMOKESHOW wollen wir den Besucher*innen der Premiere von „Eure Paläste sind leer“ einen groben Überblick über den CO2e-Ausstoß ihrer Fahrt zum Theater geben. Mithilfe von greifbaren Vergleichswerten aus dem Leben des Publikums sollen die vermittelten Informationen besser verstanden und im Wissensschatz behalten werden. Im Idealfall entscheiden sich die Besucher*innen bei ihrer nächsten Fahrt für eine klimaschonendere Alternative. Im zweiten Teil des Projekts zeigen wir, wie viel CO2e jede der ausgewählten Transportmittel (Fahrrad/Fuß, ÖPNV, E-Auto und Verbrenner) ausstoßen würden, wenn alle Besucher sich für die gleiche Möglichkeit, zum Theater zu kommen, entscheiden würden.

Außerdem wurde von uns ein Poster erstellt, welches verschiedene Infografiken zum CO2e Ausstoß des Transportsektors des HOT zeigt.

Konzeption

Während der verschiedenen Workshops und Einblicke, die wir während des Kurses gesammelt haben, erhielten wir eine Übersicht über die konzipierten Bühnenbilder und Effekte, die in „Eure Paläste sind leer“ eingesetzt werden.

Das Stück wird auf 3 Ebenen erzählt und beleuchtet dabei die möglichen Ursachen und Folgen, die unser kapitalistisches System auf unsere Gesellschaft und Umwelt haben. Auf einer dieser Ebenen bewegt sich ein sogenanntes „Ich“ in einer zerstörten und verlassenen Zukunft und lamentiert die Entscheidungen, die unsere heutige Gesellschaft trifft. Es bewegt sich in einem Dunst, der durch Nebel auf der Bühne verwirklicht wird. Genau dieses Bild haben wir als Verknüpfung unseres Projekts mit dem Stück genutzt.

Sowohl die interaktive Infografik als auch unser Poster spielen mit Formen, die wie in einer Kristallkugel entstehen und wieder verschwimmen. Da wir außerdem die „Transportemissionen sichtbar machen“ wollen, obwohl klimaschädliche Gase meist farblos sind, passt die Analogie des Rauchs/Nebels auch in die von uns untersuchte Thematik.

Storyboard zur Funktionsweise des einen Prototyp-Teils

Moodboard

Prozess

Zunächst stand die Gestaltung einer eher „klassischen“ Infografik auf unserer Agenda. Sprich, ein Poster für eine Übersicht der wichtigsten Daten, welches mit Hilfe eines QR-Codes gleichzeitig als „Gate-Opener“ fungiert und auf die interaktive Infografik weiterleitet. So suchten wir zunächst nach einer etwas normaleren Übersetzung der Zahlen, bevor es an die Gestaltung der interaktiven Infografik ging.

Der vielfältige Austausch zwischen uns beiden half enorm dabei, Entscheidungen zu treffen und effektive Lösungen zu finden.. Zunächst bereiteten wir die Zahlen aus der Klimabilanz des Hans Otto Theaters auf und fassten sie in einfachster Form zusammen, was sich als sehr hilfreich herausstellte. Durch diese Vorarbeit konnten wir uns in der weiteren Umsetzung voll und ganz auf die visuelle Übersetzung des Plakates konzentrieren.

Hierbei nahmen wir die Visualität der Animationen auf, um so eine erkennbare Verbindung zwischen dem Plakat und der interaktiven Infografik herzustellen. Mit Hilfe von After Effects kamen wir so zu der Rauchstruktur und übertrugen diese auf die Kreisdiagramme. Die visuelle Hierarchie gestalteten wir dabei so, dass am Ende der Blick und die Aufmerksamkeit auf dem QR-Code landet, welcher den Link zur interaktiven Infografik beinhaltet.

Auch bei dieser stellte sich eine gute Zusammenarbeit als sehr wichtig heraus. Durch den großen Arbeitsaufwand war eine gewisse Aufgabenteilung der logische Schritt, und so kamen wir sehr gut voran. Hierbei half es sehr, dass Felix bereits Erfahrung mit der Gestaltung einer interaktiven Infografik hatte und somit auch das technische Know-how mitbrachte. Dadurch hatten wir bereits am Anfang eine sehr gute Struktur für die technischen Prozesse in Adobe XD und konnten alles nach und nach abarbeiten.

Die Aufgaben teilten wir hierbei so, dass sich einer vor allem um die redaktionelle Gestaltung sowie die technischen Prozesse kümmerte, während der andere sich um die Animationen der Loops und Übergänge kümmerte. Der Prozess bis hin zu einer guten Rauchoptik war jedoch überhaupt nicht einfach und erforderte viel Experimentieren und nervenaufreibendes Ausprobieren, bis die Visualität und das Bewegungsmuster zu unserer Zufriedenheit waren. Sehr wichtig war hierbei auch, dass die illustrierten Bilder sowie die Animationen gut miteinander harmonierten. Am Ende sind es insgesamt über 20 kleine Videos geworden, welche wir dann anschließend in die Infografik integrierten.

XD Prototyp mit entsprechenden Verknüpfungen

Endprodukt

Plakat mit Infografiken zu Transportemissionen des Hans Otto Theaters Potsdam

Pw: HOTSmoke

Demovideo zu den Interaktiven Infografik Prototypen

Alle Ergebnisse des ersten Teils

Fazit

Wir sind sehr zufrieden mit dem Design des Endprodukts und fühlen uns in unseren Entscheidung bestätigt. Die visuellen Elemente sind sehr nah an unserer ursprünglichen Idee und Vision, was zeigt, dass unsere intensive Zusammenarbeit und Vorarbeit sich ausgezahlt haben.

Trotz der Herausforderungen durch die verwendete Software gelang es uns, die Animationen ansprechend zu integrieren. Allerdings mussten wir aufgrund der Begrenzung von höchstens 20 Videos in Adobe XD die interaktive Infografik in zwei Teilen präsentieren, was eine kleine Einschränkung darstellte.

Während wir uns dem Abschluss näherten, mussten wir leider feststellen, dass wir unseren eigenen Anspruch nicht zu 100% erreichen konnten. Obwohl wir unzählige Stunden mit Video-Tutorials verbrachten und uns sogar einen kurzen Einblick in JavaScript verschafften, fehlte uns letztendlich das Know-how, um die interaktive Infografik erfolgreich als flüssig laufende Website zu veröffentlichen. Diese Erkenntnis hat uns klar aufgezeigt, wo wir in Bezug auf zukünftige Projekte ansetzen können und welche Bereiche wir gezielt weiterentwickeln müssen.

Dennoch sind wir stolz auf das, was wir erreicht haben, und betrachten dieses Projekt als wertvolle Erfahrung für unsere zukünftigen Vorhaben.