https://about-imajine.webflow.io/

01 Grundideen

Um mir einen Überblick über daskomplexe Themenfeld Europa zu verschaffen, habe ich anfangs eine Themenmindmap angefertigt und schonmal erste Quellen recherchiert.

Für den Inpulsvortrag habe ich das Thema Menschnhandel in Europa vorgestellt.

Um mich zwischen den vier Ideen, Menschenhandel in Europa, Fake News, Zukunftsszenarien der EU und Language Pal entscheiden zu können, habe ich diese nach verschiedenen Aspekten bewertet. Da ich ein Storytelling Projekt machen wollte und von den Artikel über Zukunftsszenarien der EU faziniert war, habe ich mich für dieses Thema entschieden.

02 Kurzbeschreibung Projekt

What could a European future look like? How can we make this future equitable for all? The website „About Imajine“ visualizes the project „IMAJINE“, which was created within the Horizon 2020 EU research project. It explores four possible future scenarios to investigate different possibilities that can lead to spatial justice. These scenarios aim to challenge current assumptions and address territorial 
inequality and spatial equity.

Wie könnte die Zukunft Europas aussehen? Wie können wir sicherstellen, dass diese Zukunft für alle gerecht ist? Die Webseite „About Imajine“ visualisiert das „IMAJINE“ Projekt, das im Rahmen des Horizon 2020 EU-Forschungsprojekts entwickelt wurde. Es erkundet vier mögliche Zukunftsszenarien, um verschiedene Möglichkeiten zu untersuchen, die zu räumlicher Gerechtigkeit führen können. Die Szenarien zielen darauf ab, bestehende Annahmen herauszufordern und territoriale Ungleichheit und räumliche Gerechtigkeit anzugehen.

03 Ausgangssituation, Problem, Lösung

Es ist von entscheidender Bedeutung, sich Gedanken über die Zukunft Europas zu machen, da sie davon abhängt, wie wir heute handeln und welche Themen wir in den Fokus unserer Gesellschaft stellen. 

Das Horizon 2020 EU-Forschungsprojekt hat daher vier Zukunftsszenarien für Europa entwickelt, deren Ergebnisse in einer umfangreichen Projektbeschreibung festgehalten sind.

Durch die Darstellung der Szenarien auf einer Storytelling-Website wird es leichter einen Eindruck über diese Zukunftsvarianten zu erhalten. Zusätzlich bietet die Website eine weitere Ebene der Information durch aktuelle Daten und Fakten, die die Zukunftsszenarien komplementieren.

04 Recherche, Inhalte, Daten & Quellen

https://www.derstandard.de/story/2000121309674/wie-ungleich-europa-in-30-jahren-sein-koennte

https://imajine-project.eu/

https://imajine-project.eu/wp-content/uploads/2021/10/IMAJINE-Scenarios-with-expert-responses.pdf

05 Storyline, Spannungsboegen, Mindmap

Für die Storyline habe ich an verschiedene Perspektiven und Storytelling Prinzipien angedacht, wie beispielsweise Priciple of Ownership oder Structure Before Activity Principle. Schlußendlich fiel die Entscheidung auf das Pyramid Principle, welches einen logischen und gut strukturiereten Contentaufbau garantiert.

Aufbauend auf dem Pyramid Principle habe ich die Site Map angelegt.

Der User Journey, der sich aus der Site Map ergibt, lässt sich in den aristotelischen Spannungsbogen einordnen.

06 Moodboard

Variante 01

• überlappende Karten

• gedeckte Farben

• Outlines/Linien

Variante 02

• starke Typo

• grafisch

• gedrehte Flächen

Variante 03

• Vierteilung

• neon Farben

• Verläufe

07 Skizzen und erste Layouts

08 Designvarianten

Die Designvarianten orientieren sich an den drei Moodboards. Für die Umsetzung wurde Variante 02 gewählt, jedoch mit einem lesbareren Illustrationsstil. Variante 01 blieb als Fallbackvariante offen, die aber nicht mehr gebraucht wurde.

Variante 01

Variante 02

Varinate 03

09 Finales Design

Das finale Design ist eine Weiterentwicklung von Variante 02.

10 Prototyp

Link zum Figma Prototyp

11 Testing

Menü

Das Menü wurde vereinfacht, sodass man direkt die Szenarios ohne weiteren Klick kommen kann.

Menü vor Testing

Menü nach Testing

Trigger Points

Während des Testings der Webflow Seite ist aufgefallen, dass User die durch Wiggle Effekt gekennzeichnten Elemente nicht als klickbar ansahen. Deshalb wurde nun durch Animation gekennzeichnete runde Triggerelemente eingebaut. Diese haben immer die gleiche wiedererkennbare Optik.

Trigger nach bekannter Anmutung nach Testing

10 Webflow

Link zur Webflow-Seite: about-imajine.webflow.io

11 Styleguide

Die Größen der Schriften sind in relativen Einheiten zum Viewport zu verwenden. Bilder werden so skaliert, dass die Linienstärken annähernd aneinander angeglichen werden.

12 Screencast

13 Präsentationsvideo

14 Ausstellung