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

Klimagrafik – Greenhouse Gases made visible

Klimagrafik – Greenhouse Gases made visible

Climate change is one of the major global challenges of the 21st century and an important aspect of combating climate change is education as well as information. It is necessary to show how the climate has already changed over the last 250 years, how the climate is likely to change, which factors influence the climate and how human activity affects the climate.

The course ‘Klimagrafik’ developed infographics that illustrate and communicate ecological, economic, physical and social aspects of global warming. The infographics are to be contextualised and published in the form of a website. The aim is to inform and educate about different aspects of climate change.

Topic

Our scrollytelling website ‘Greenhouse Gases made visible’ informs and educates about the human-made greenhouse gases. More precisely how CO₂, Methane, Nitrous Dioxide and F-Gases are related to global warming, where they come from and where they go and we explain and visualize the meaning of carbon dioxide equivalent (CO₂eq).

Human made greenhouse gases in a nutshell:

Greenhouse gases are the essence of climate change. They are often mentioned, but not always properly explained. The different characteristics of Carbon Dioxide (CO₂), Methane (CH₄), Nitrous Oxide (N₂O) and F-gases reinforce and speed up climate change in different ways. 
The warming of the earth itself through greenhouse gases is a natural process, without which it would be about 33 degrees Celsius colder. However, too many gases cause the earth to heat up more than would actually be expected from solar radiation.

Sketches & Ideas

GG_grey_01.pngGG_grey_01.png

We wanted to show what properties the different gases have, for example how they are produced, how harmful they are for climate change and how long they can remain in the atmosphere.

CO₂-Equivalents: In order to be able to compare the global warming potential and how harmful the individual gases are to the climate, they are measured in CO₂-Equivalents (CO₂eq). The climate-damaging effect of carbon dioxide is taken as a benchmark and the other greenhouse gases are related accordingly in parts per million (ppm) CO₂.

GG_grey_02@3x.pngGG_grey_02@3x.png

Worldwide Comparison: We also want to break down which countries or continents have produced which type and quantity of greenhouse gases in which years and in which sectors. The idea was for the user to be able to compare the differences between different years, sectors, etc. by adjusting a parameter to change the graph.

Later on, we noticed that this complex idea of a worldwide comparison deserves a separate website, wherefore we didn't implement it into our scrollytelling website.

GG_grey_03@3x.pngGG_grey_03@3x.png

GG_grey_04@3x.pngGG_grey_04@3x.png

Concept

GG_grey_05@3x.pngGG_grey_05@3x.png

The final Website is a one pager with a few scrollytelling parts, where information visualizations are animated. The usage of dots is a basis for most of our visualizations, which comes from an early sketch to explain the CO₂-Equivalents. Another main part is the 4-column-layout we are using for the whole website up to the conclusion part. That means we have one column for each gas, a sticky Header shows which gas is represented where on the side and all information about each gas is in this layout.

Style

Zeichenfläche 1.pngZeichenfläche 1.png

Process

We started by sketching a lot of ideas for the visualizations and how we could communicate and explain the complexity of the CO₂-Equivalents. Then we built screens and designs in figma. We created the style guide quite early, having 4 colors for each gas, the Roboto Mono for Headers and the Roboto for texts. In the beginning, we did research to write all texts and discussed the layout. We documented all our notes, to dos and the feedback from the presentations in Evernote, to be on the same page and get an overview on what to do next. Finally we started coding the website, using static HTML, CSS and JavaScript. After every coding step we pushed the code to GitHub, from where we also launched the page. In the last 3 weeks of working on the project, we had several design and code iterations to optimize the reading flow.

GG_grey_06@3x.pngGG_grey_06@3x.png

GG_grey_10@3x.pngGG_grey_10@3x.png

GG_grey_07@3x.pngGG_grey_07@3x.png

Final Result

To take a look at the final website, visit https://caroachtrm.github.io/. Note that the website is best displayed in chrome or opera and for the purpose of this project it is non-responsive.

GG_grey_08-1@3x.pngGG_grey_08-1@3x.png

GG_grey_08-2@3x.pngGG_grey_08-2@3x.png

GG_grey_08-3@3x.pngGG_grey_08-3@3x.png

GG_grey_08-4@3x.pngGG_grey_08-4@3x.png

GG_grey_08-5@3x.pngGG_grey_08-5@3x.png

GG_grey_08-6@3x.pngGG_grey_08-6@3x.png

GG_grey_08-7@3x.pngGG_grey_08-7@3x.png

Conclusion

Due to the given topic, we already had a direction in content on which we could focus, which saved us a lot of research time. However, even with this focus, we wanted to fill our website with too much different content and over time we realized that it is important to focus on the main topics while working scientifically and to put an eye on the visual language and concept throughout the project. 

Furthermore we found it very helpful to get frequent feedback from external people in between to improve our website continuously.

We have found that, to work efficiently, each person should focus on one working discipline, either visual elaboration or implementation, including a big number of loops between design, content and development.

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Zugehöriger Workspace

Klimagrafik

Entstehungszeitraum

Sommersemester 2020

Keywords