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/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
