Arbeitstitel

EU History

1 - Grundideen

2 - Kurzbeschreibung des Projekts

EU History ist ein Storytellingprojekt, welches von einem Interview mit einem Holocaustüberlebenden inspiriert wurde. Es soll mit der Darstellung von 10 wichtigen Events in der EU Geschichte dazu beitragen, das historische Wissen in den Leuten am Leben zu erhalten und Wiederholungen von Fehlern der Vergangenheit zu vermeiden.

3 - Formulierung Ausgangssituation, Problem, Lösung

Wir sehen es immer wieder: auf Social Media hetzen Leute gegen die EU mit irrsinnigen Geschichten über die Entstehung dieser, leugnen den Holocaust weil wir ja alle gemicrochipt sind, etc. etc.. Dies sind natürlich nur sehr extreme Beispiele aber leider existieren sie immer mehr auch bei uns in Deutschland zum Beispiel, direkt vor der Haustür (AfD, Pegida, Attila Hildmann, etc. ). 

Fehlendes historisches Wissen führt leider dazu, dass man leichter manipulierbar/extremisierbar wird. Wenn man sich beispielsweise mit AfD-Wählern unterhält, sind es meistens keine Bösewichte, die alles Gute zerstören wollen und sich einen zweiten Holocaust wünschen. Es sind unterinformierte Leute, die von den wirren Lügen der Partei dazu verleitet werden, zu glauben dass die AfD die einzig wahre Partei ist, die ihnen aus ihrer vielleicht nicht idealen Lebenssituation helfen kann. 

Gegen solche Phänomene soll meine Website „EU History“ vorgehen, Leuten einen groben Überblick verschaffen über die Historie der EU, der nicht durch ellenlange Wikipediatexte überfordert und durch eine illustrierende Komponente den Leser so lange wie möglich am Lesen zu hält. Denn Wissen ist nicht nur Macht sondern auch Schutz. Schutz vor Fehlinformation.

4 - Recherche, Inhalte, Daten & Quellen

QUELLEN

1945 Quellen: https://european-union.europa.eu/principles-countries-history/history-eu/1945-59_en

https://europe.unc.edu/the-end-of-wwii-and-the-division-of-europe/

https://carleton.ca/ces/eulearning/history/europe-after-wwii/ 

1949 Quellen: https://apnews.com/article/russia-ukraine-business-world-war-ii-sweden-finland-240d97572cc783b2c7ff6e7122dd72d2

https://www.eeas.europa.eu/eeas/eu-nato-cooperation-factsheets_en

https://history.state.gov/milestones/1945-1952/nato

1951 Quellen:  https://en.wikipedia.org/wiki/European_Coal_and_Steel_Community

https://eur-lex.europa.eu/EN/legal-content/summary/treaty-establishing-the-european-coal-and-steel-community-ecsc-treaty.html

https://www.jstor.org/stable/40750370

1957 Quellen: https://www.britannica.com/event/Treaty-of-Rome

https://www.europarl.europa.eu/about-parliament/en/in-the-past/the-parliament-and-the-treaties/treaty-of-rome

https://en.wikipedia.org/wiki/Treaty_of_Rome

1968 Quellen: https://www.cbc.ca/radio/ideas/the-paris-riots-of-1968-part-1-a-failed-revolution-that-changed-the-world-1.4651557

https://www.npr.org/sections/parallels/2018/05/29/613671633/in-france-the-protests-of-may-1968-reverberate-today-and-still-divide-the-french

https://www.britannica.com/event/events-of-May-1968

1979 Quellen: https://multimedia.europarl.europa.eu/en/package/40-years-ago-the-first-session-of-directly-elected-european-parliament_12503?tab=photosets&photoType=25

https://en.wikipedia.org/wiki/1979_European_Parliament_election

https://www.theguardian.com/politics/from-the-archive-blog/2019/jan/23/first-european-elections-june-1979

1980 Quellen: https://www.theguardian.com/world/2020/aug/28/shipyard-strike-puts-mark-of-change-on-poland-1980

https://kafkadesk.org/2021/08/31/on-this-day-in-1980-lech-walesa-announced-the-signing-of-the-historic-gdansk-agreement/

https://www.history.com/this-day-in-history/polish-government-signs-accord-with-gdansk-shipyard-workers

https://www.youtube.com/watch?v=UDzVwLV81fU

https://www.gdansk.pl/en/about-gdansk/freedom-broke-out-in-gdansk-history-of-august-1980,a,3020

https://poland.pl/history/historical-events/gdansk-agreement-birth-solidarity/

https://culture.ec.europa.eu/cultural-heritage/initiatives-and-success-stories/european-heritage-label/european-heritage-label-sites/the-historic-gdansk-shipyard-poland

https://moneyweek.com/404447/14-august-1980-gdansk-shipyard-strike-begins

1989 Quellen: https://www.bbc.com/news/world-europe-50013048

https://www.iwm.org.uk/history/what-was-the-berlin-wall-and-how-did-it-fall

https://www.berlin.de/mauer/en/history/opening-of-the-wall/

2002 Quellen:  https://european-union.europa.eu/institutions-law-budget/euro/history-and-purpose_en#:~:text=After%20a%20decade%20of%20preparations,changeover%20in%20history%20took%20place.

https://www.dw.com/en/the-introduction-of-the-euro-january-1-2002/a-4835039

https://www.brugesgroup.com/quotes/the-euro

2017 Quellen: https://www.studysmarter.us/explanations/macroeconomics/macroeconomics-examples/consequences-of-brexit/

https://en.wikipedia.org/wiki/Brexit#:~:text=Brexit%20(%2F%CB%88br%C9%9B,to%20have%20left%20the%20EU.

https://www.lamoncloa.gob.es/lang/en/brexit/AboutBrexit/Paginas/index.aspx

https://www.investopedia.com/terms/b/brexit.asp

https://www.wallstreetmojo.com/brexit-explained-simply/

https://www.government.nl/topics/brexit/question-and-answer/what-is-brexit

https://www.britannica.com/topic/Brexit

https://newsforkids.net/fastfacts/brexit/

Designrecherche:

3 Seiten/Designs, die mich hauptsächlich inspiriert haben in meinem Prozess:

https://www.darc-room.com/?category=color

https://www.once.agency/timeline#11

https://www.instagram.com/p/CrDTbq-ISgp/?utm_source=ig_web_copy_link&igshid=MzRlODBiNWFlZA==

5 - Storyline, Spannungsbogen, Mindmap

Da es sich um eine Scroll-Down-Aufzählung von historisch gleich wichtigen Events handelt, gibt es so etwas wie einen Spannungsbogen kaum, wenn man die About-Section und das Intro-Zitat wegnimmt, welche kaum als Spannungsbogen gelten.

6 - Moodboards

Da ich mich im Endeffekt stark auf das Design von bereits existierenden Websiten gestützt habe (siehe 3 Websites bei Designrecherche/Quellen), habe ich mich bei den Moodboards darauf fokussiert Illustrationen zu finden, die simpel aber einzigartig sind.  

Dazu habe ich vier „Moodboards“ erstellt auf meinem Miroboard, wobei ich mich dann am Ende recht schnell für das obere/letzte Moodboard als Inspiration entschieden habe.

7 - Skizzen, erste Layouts, erste Prototypen

Aufgrund der eher suboptimalen Qualität der ersten Entwürfe (Bild 1-4) habe ich mich bei den darauf folgenden Entwürfen stark auf das Design anderer Websiten und Wireframekits gestützt um ein gutes Grundgerüst zu haben, aus dem ich dann mein eigenes Projekt formen kann. Da ich mit Illustrationen arbeiten wollte, habe ich in ein paar Entwürfen 5 Probeillustrationen (siehe unter dem Text) eingebaut.

8 - Designvarianten

9 - Finales Design

Alle finalen Illustrationen + Backups

10 - Prototyp

Link zum Figma Prototyp (Flow 7= Finales Design): https://www.figma.com/proto/ca6pSbskLD2QDBs2wRFH8c/New-EU-Entw%C3%BCrfe?page-id=1%3A1037&type=design&node-id=148-2544&viewport=-5170%2C769%2C0.1&t=WYQbjbb5BiSkMRft-1&scaling=min-zoom&starting-point-node-id=148%3A2544&show-proto-sidebar=1&mode=design

11 - Testing

Durch regelmäßiges Testing habe ich es geschafft immer wieder kleine Verbesserungen an meiner Website vorzunehmen:

-mehr weiße Elemente in jede Illustration einbringen + Linienstärke minimieren

-About Section vom Aufbau her wie die Main Page gestalten, statt einen Textblock zu verwenden

-Die rote Linie am Ende doch mit After Effects und Lotties zu erstellen und in zwei zu teilen um sie in Webflow erfolgreich einbetten zu können (Danke Peter und Kim)

-Design des Overviews simpel halten statt dort zu viel rumzuspielen mit Illustrationen oder Designs

12 - Finaler Prototyp / Link Webflow

https://seraphinas-eu-history.webflow.io/

(Linie nicht responsiv, ist ideal platziert auf großen Bildschirmen wie an der Hochschule)

13 - Styleguide

14 - Screencast

15 - Präsentationsvideo

Abschlusspräsentation

Plakat Werkschau