Unsere Gruppe bestand aus Dustin Kummer, Jane Apitz und Chiara Tilgen

Das Projektergebnis könnt ihr hier erkunden (am besten in Chrome oder Firefox öffnen)

1. Recherche & Skizzen

Wir fanden uns durch die Wahl des Themas „Was sind Klima-Kipppunkte und wie sind sie miteinander verbunden?“. Zunächst begannen wir uns jeweils über die Thematik zu informieren und legten gleich zu Beginn ein Miro Board an. Dort sammelten wir Recherchematerial, Ideen und Skizzen. Wir formulierten Ziele, mögliche Titel und Umsetzungsmöglichkeiten. Im späteren Verlauf diente es ebenfalls zum Festhalten von Fragen, Problemen und To-Dos.

Mithilfe von Miro konnten wir unsere erste grobe Netzwerk-Visualisierung erstellen. Somit verschafften wir uns einen besseren Überblick über die Beziehungen. Durch die Netzwerkgrafik konnten wir sowohl Kippelemente, ihre Vorgänge, sowie Auswirkungen auf die Umwelt und Ursachen darstellen.

Doch bereits bei der Recherche wurde uns bewusst, wie komplex die Thematik ist und machten uns Gedanken welche Darstellung der Komplexität gerecht werden würde, ohne den User zu überfordern.

Im Kurs kam die Netzwerkgrafik gut an, doch wir versuchten uns in weiteren Visualisierungen.

Es gab mehrere Bestandteile, die wir in unserer Grafik visualisieren wollten.

• neun Kippelemente (das Schmelzen des grönländischen Eisschilds, der Verlust von Permafrost, die atlantische Umwälzbewegung, die Verlagerung borealer Wälder, das Regenwaldsterben, die Auflösung des westantarktischen Eisschildes, die Verlagerung des westafrikanischen Monsuns, die Verlagerung des indischen Monsuns und das Sterben von Korallenriffen)
• Vorgänge
• Ursachen
• Auswirkungen
• Dauer/Zeitmaßstab
• Wahrscheinlichkeit

Uns war es wichtig so viele Informationen wie möglich bereitzustellen. Doch nach mehreren Versuchen mussten wir einsehen, dass gewisse Komponenten vernachlässigt werden mussten. Da bestimmte Daten spekulativ waren entschieden wir, besonders als Designer, ohne tiefgründige, wissenschaftliche Kenntnisse, diese nicht einzubinden.

Letztlich kamen wir wieder zurück zu der ursprünglichen Netzwerk-Visualisierung. Wir räumten diese jedoch wesentlich auf, um sie verständlicher zu gestalten. Wir entschieden uns weitere Informationen in Form von Erklärtexten zu jedem Kippelement bereitzustellen.

2. Gestaltung

Als wir uns im nächsten Schritt der Gestaltung annahmen wechselten wir von Miro zu Figma.

Jeder von uns erarbeitete mögliche Designs unserer Grafik. Wir waren uns einig, dass ein komplexes Thema ein schlichtes Design benötigt und gingen letztlich mit Dustins Entwurf. Wir wollten den User bei dem doch recht bedrückenden Inhalt nicht auch mit einer düsteren Gestaltung abschrecken. Die filigranen Linien, Rundungen und unaufdringliche, klare Schriftwahl verleihen der Thematik eine gewisse Leichtigkeit.

Bei der Farbwahl legten wir uns auf ein helles Design mit gezielten Hervorhebungen fest.

Wir entschieden bei der Grafik interaktive Texthervorhebungen in den Erklärtexten zu ermöglichen, dafür probierten wir verschiedenste Farben aus, ebenso für die anklickbaren Quellen-Verlinkungen. Obwohl wir anfangs eine Alternative zu Rot suchten, um nicht einer weit verbreiteten Farbgebung zu verfallen, schien es doch die geeignetste Farbe für wichtige Elemente.

Um eine bessere Orientierung zu schaffen hinterlegten wir unsere geografisch-orientierte Netzwerkgrafik mit einer Weltkarte in einem Grauton.

Außerdem gestalteten wir Icons für vier verstärkende, wie auch bewirkende Vorgänge, die wir bei der Grafik hervorheben. Ebenso wurden Icons für das An- und Ausblenden der Karte kreiert. Diese sind am simplen, abgerundeten und klaren Design orientiert:

Für einen verständlichen Einstieg in die Grafik erstellten wir ein Onboarding/Tutorial. Dieses leitet den User durch die Funktionen unserer Website und erläutert sie Schritt für Schritt.

Zuletzt begann Chiara Grafiken für jedes der neun Kippelemente zu erstellen. Diese wurden zum besseren Verständnis in die Erklärtexte eingebunden und als GIF animiert. Passend zu der Grafik wurde die Farbwahl auf das Geringste minimiert und leichte Rundungen, sowie klare Linien genutzt.

3. Inhalt und Programmierung

Da wir nun in der Gestaltung einig waren und die Screens standen begann Dustin mit der Programmierung unserer Website. Hierfür wurde Nuxt.js, ein Vue.js Framework, verwendet um die Logic des Interfaces umzusetzen und die dynamischen SVGs aus selbst definierten JSONs zu generieren. Schlussendlich wird eine statische Website generiert, welche keine Datenbank benötigt und somit auf jedem Server hochgeladen werden kann. Den kompletten Quellcode findet man auf Github.

Währenddessen verfassten Jane und Chiara die Texte. Wir lasen uns jede Menge Papers, Artikel, Websiten, etc. durch und arbeiteten mit diesen Quellen. In einem Google Doc entstanden somit neun Texte, die mehrere Seiten füllten. Eine große Herausforderung war es, die Informationen so kurz wie möglich und weiterhin verständlich zu formulieren. Um eine weitere Reichweite für unsere Website zu ermöglichen einigten wir uns darauf alles englischsprachig zu halten.

4. Fazit

Es war unglaublich interessant sich tiefgründiger mit wichtigen Aspekten der Klimaerwärmung in Hinsicht auf Kipppunkte zu beschäftigen. Der Kurs bot uns wichtigen Input in Form von Vorträgen, Gastbeiträgen, Tutorials, Einzelkonsultationen, sowie gemeinsamen Präsentationen. Ein Gruppenprojekt während eines Online-Semesters zu realisieren war eine neue Erfahrung für uns alle, doch dank vieler, langer Zoom-Sessions arbeiteten wir effizient und erfolgreich. Tools wie Miro und Figma waren dabei sehr hilfreich.

Ein Großteil des Projektes nahm wissenschaftliches Arbeiten und Recherche ein, was für uns ungewohnt und anstrengend war. Doch rückblickend ein essentieller und zufriedenstellender Aspekt, da unsere Website somit zu 100% Eigenleistung repräsentiert. Zudem half uns das erlernte Wissen bei der Gestaltung der Grafik.

Während des Semesters lernten wir welche Rolle Aufgabenteilungen, Kompromisse und Kommunikation für eine gute Zusammenarbeit einnehmen.

Wir bedanken uns bei Boris für sein konstruktives Feedback, den gut strukturierten Kursablauf und spannenden Input. Ebenso ein großes Danke an das SENSES Team für die Unterstützung.