Website

Die Website für das Open Air wurde mit den neusten Standards programmiert. Durch die großen Datenmengen werden automatisch neuere WebP Bilder für die modernen Browser genutzt. Bei über 10.000 Visits im Monat war es wichtig für jeden Besucher eine gleiche UX zu schaffen, deshalb war es die höchste Priorität eine gute Performance zu bekommen, bei einem Google Lighthouse Audit bekommt die Seite 98 von 100 Punkten. Die Seite wird durch ein Kirby Backend gefüttert.

Motivation

Nachdem ich im Winter 2018 einen Artikel über die deutschen Gletscher gelesen habe, saß ich wie versteinert auf meinem Stuhl zuhause. Ich hatte Gänsehaut und ich fühlte mich unwohl. Unwohl für etwas was scheinbar schon passiert ist und nicht mehr aufzuhalten ist. Der letzte deutsche Gletscher, so heißt es, ist 2080 für immer verschwunden.
Da ich selbst gerne in den Bergen bin und finde, dass dieses Thema oft zu global gesehen wird, war damit die Motivation geschaffen, mehr Leute zu informieren.

Konzept

Das Konzept meiner Arbeit war schnell klar, ich wollte mit ihr viele Leute informieren. Im 21. Jahrhundert funktioniert dies besonders einfach, fast jeder hat einen Internetzugang und so war für mich schnell klar, dass ich eine Weblösung haben will.

Prozess

Über mehrere Monate hinweg wurden Ideen und Skizzen angefertigt, weggeworfen und neu begonnen. In diesem Prozess lernte ich mich mit der Materie zu befassen: Was heißt es für mich und für andere, wenn es keine Gletscher mehr in Deutschland geben wird? Wie möchte ich auf einer Website meine Stimmung über die Thematik kommunizieren? Ist es möglich mit Bildsprache, Typografie und Farbgebung dem Leser eine Stimmung zu vermitteln?
Von der ersten Idee bis hin zur fertigen Arbeit hat sich das Design mehrmals verändert, von zu fröhlich über zu trist bis hin zum jetzigen Ergebnis.

Umsetzung

Nach einigen Schritten zurück habe ich die perfekte Kombination aus Design, Funktion und User Experience gefunden und mich dazu entschieden das Projekt in dieser Form auszuführen. Da es allerdings zu aufwendig wurde um es als Website nun komplett umzusetzen, habe ich mich dazu entschieden mein Projekt als Prototyp mit Framer zu entwickeln.
Die Kombination aus Sketch und Framer funktioniert hervorragend und so konnte ich einiges an Zeit sparen, indem ich meine Artboards aus Sketch mühelos in Framer importieren konnte und sie so mit einigen Animationen so darstellen konnte, dass ein User versteht was er tun musste. Der Prototyp wurde sehr umfangreich, so umfangreich, dass man fast meinen könnte es sei eine finale Website die online genauso funktionieren kann.

Abschluss & Design

Nach einem Semester konstant an einem Projekt fokussiert arbeiten ist mein Bachelorprojekt fertig. Es zeig anschaulich und auf den Punkt gebracht, was viele andere Websites zu dem Thema bis heute nicht schaffen, wie dramatisch es um die Gletscher steht.
Die Seite beginnt mit einem Countdown der den User erstmal im Schatten stehen lässt, was hat es damit auf sich?

Diese Frage klärt sich im laufe der Nutzung. Im Hintergrund der Startseite findet man ein Diagramm, welches auch später nochmals seinen Einsatz hat. Es symbolisiert den Rückgang der Gletscher um einen gewissen Prozentsatz. Scrollt der User nun, gelangt er zu der Übersicht aller deutschen Gletscher und bekommt eine Archivaufnahme bei einem Mouseover gezeigt. Bei einem klick springt er genau an die Stelle wo es mehr Informationen zu dem jeweiligen Gletscher gibt. So sind alle Gletscher aufgebaut und man findet mit einem Scroll nach rechts oder durch klicken immer mehr über den Gletscher heraus.
Hat man alle Informationen und ist am Ende angelangt, wird der Countdown aufgeklärt und nochmal genauer erläutert.

Credits & Danke

Archivfotos von → gletscherarchiv.de
Danke an Prof. Xuyen Dam

Website

For the annual exhibition from the design department of the University of Applied Sciences, we also created a website with all necessary informations about the exhibition like maps and informations about the exhibitors. The key visual of this years exhibition was a square which should stand for a room. We tried to create a dynamic visual on both sites, the mobile and the desktop version.

Project description & task

In the third semester communication design at the University of Applied Sciences, Munich, we worked with informationgraphics. Our team choose to work with the internship data the students have to collect during their internship. The problem of this data is, nobody reads it because it’s just to much information. One interesting point for me of all this data was, the locations where the agencies are. So after three semester at the University of Applied Sciences I noticed that more and more students took their internship in their comfort–zone: In Munich. In my graphic I would like to show where other students were and If the trend to stay in Munich is really true.

Concept

The concept of my work is to show give the user a quick and wide insight where the students from the University of Applied Sciences go for their internship. The trend shows, that more and more students take their internship in Munich. I would like to show, that their also many students who took their internship far or less far away from home. You can click on the dots inside of the rings which are the actual agencies. By clicking on the dot you’ll get more information about the agency. The navigation bar on the bottom tells the user how far away he is from the university. The user can either drag the bar or adjust it by clicking on the arrows. The maximum distance from Munich is an isle near New Zealand and thats also the maximum distance you can travel. So my bar goes from Munich to this point. On the bar are also the agencies in the same color as on the graphic just to make thing clear where the user is at the moment and to cover greater distances where no agency is, like in the sea.

TYPOGRAPHIC

For the first logo, we should work completely typographical. I tried to create a slow and goo like look. The final result should not look to dissolve and not to static. I came up with 3 different logo styles.

LOUD / SILENT

The next task was a loud and silent logo. I decided that I would like to work with a contrast, which can be loud and silent as well. In the next step, I created organic looking shaped which I converted afterwards in greyscale to create a gradient from bright to dark.

LIGHT

The last task was under the name of „light“. Again, I tried to catch up the „Slow“ – Topic. This time I worked with lines which stand for the tracks a snail makes when it moves. I duplicated the lines to create a lighter look. This time I came up with 3 different logos which all look alike.

FRONT PAGE

The front page of World Wide Science got a complete redesign. Important for us was, to create a clear looking front page. World Wide Science offers a wide range of filters to refine the search results. With our new designed page, all these filters were put under one point and so the search is in the focus again.

MOBILE SITE

Beside the desktop version, we also created and designed a mobile version. The mobile version is more or less a light version of the desktop site. Functions like adding more search tabs been omitted to use the format of a mobile device better. The mobile site should be used to do a quick search and pin the result to check back later on a desktop.