Incom ist die Kommunikations-Plattform der Hochschule Hof Kommunikationsdesign

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Hochschule Hof Kommunikationsdesign mehr erfahren

Wende Journal

1. Finaler Titel

Wende Journal

2. Kurzbeschreibung des Projektes

Als gebürtige Plauenerin bin ich eng mit der Geschichte meiner Heimatstadt verbunden und kenne die bedeutende Rolle, die Plauen während der Friedlichen Revolution 1989 spielte. Leider ist vielen Menschen nicht bewusst, welchen Einfluss Plauen auf die Wende hatte. Mit meinem Projekt „Wende Journal“ möchte ich dieses wichtige historische Wissen zugänglich machen und die oft vergessene Rolle meiner Heimatstadt während der Wende hervorheben.

Das „Wende Journal“ ist eine interaktive, mobile Website, die chronologisch die wichtigsten Ereignisse der Wende in Deutschland 1989 beleuchtet, mit besonderem Fokus auf Plauen. Um die Informationen zu den Menschen zu bringen, habe ich Postkarten entworfen, die an den historischen Orten der Ereignisse platziert werden sollen. Scannt man den QR-Code auf der Rückseite der Postkarte, wird die Vorderseite der Postkarte zum Leben erweckt und man kann direkt auf die Website zum entsprechenden Ereignis springen. Auf der Website kann man sich dann chronologisch durch die Ereignisse klicken.

Durch dieses Projekt möchte ich dazu beitragen, das Bewusstsein für die historische Bedeutung Plauens zu schärfen und die Geschichten der Menschen, die die Wende möglich gemacht haben, zu erzählen.

3. Filmische Dokumentation

4. Bilder der Umsetzung, Anwendung, Ausstellung

Umsetzung & Anwendung:

1. Postkarte zum Ereignis:

postkarte.pngpostkarte.png

2. Scan des QR-Codes:

qr-code-scan.pngqr-code-scan.png

3. AR-Erlebnis:

ar-anwednung.pngar-anwednung.png

4. Mobile Website:

website.pngwebsite.png

Live:

IMG_2584.jpgIMG_2584.jpg
IMG_2585.jpgIMG_2585.jpg
IMG_2583.jpgIMG_2583.jpg

Postkarten:

postkarten.pngpostkarten.png

Screencast:

Ausstellung:

IMG_1807.jpgIMG_1807.jpg
IMG_2406.jpgIMG_2406.jpg
IMG_2405.jpgIMG_2405.jpg

5. Pitchdeck

finales-pitchdeck.pdf PDF finales-pitchdeck.pdf

6. User Journey/ User Flow

Bildschirmfoto 2024-07-25 um 17.47.17.pngBildschirmfoto 2024-07-25 um 17.47.17.png

7. Designprozess

KW 27 & 28 Fertigstellung des Projektes

In den letzten beiden Wochen habe ich die Postkarten in den Druck gegeben, die AR-Umsetzung mit Aero fertiggestellt und die Website in Webflow fertig umgesetzt. Außerdem habe ich noch einen Schriftzug für die Ausstellung geplottet und alles fertig aufgebaut.

IMG_1807.jpgIMG_1807.jpg

KW 26 - Designs aller Postkarten finalisiert + weitere Umsetzung der Website in Webflow

Diese Woche habe ich die Postkarten alle fertig gemacht, damit ich sie noch rechtzeitig in den Druck geben kann. Außerdem habe ich weiter an der Website in Webflow gearbeitet und auch an den Texten weitergeschrieben.

Finalisierung der Postkarten: 

Bildschirmfoto 2024-07-27 um 21.34.10.pngBildschirmfoto 2024-07-27 um 21.34.10.png

KW 25 - Festlegung des finalen Screen Designs + Beginn der Umsetzung in Webflow

Diese Woche habe ich nach dem Festlegen des finalen Screen Designs die Umsetzung in Webflow begonnen und nebenbei weiter an den Texten geschrieben. Außerdem habe ich angefangen alle Bilder mit einem Halftone Effekt zu bearbeiten, da die ursprüngliche Idee mit dem Halftone CSS nicht funktioniert hat. Das konnte ich aber Gott sei Dank relativ leicht in Webflow mit meiner Überblendungs-Animation lösen, sodass man im Vordergrund das Halftone Bild hat und im Hintergrund das Original. So kann man das Bild on Scroll zum Original auflösen.

Finales Screen Design: 

Bildschirmfoto 2024-07-26 um 20.25.50.pngBildschirmfoto 2024-07-26 um 20.25.50.png

KW 24 - Verschiedene Entwürfe für Postkarten + Prototypische Umsetzung mit Adobe Aero

Da die Masse an Inhalt und die Herausforderungen im Design durch viele (historische) Vorschriften sehr viel Zeit eingenommen haben, musste ich mich diese Woche dazu entscheiden, von meinem ursprünglichen Konzept etwas abzuweichen. Nun wird es anstatt einem großen Plakat mit einem virtuellen AR-Erlebnis vor Ort Postkarten geben, die aber auch vor Ort ausliegen können und bei denen man ebenfalls über einen QR-Code die Postkarten mit einer Animation zum Leben erwecken kann und von da aus direkt auf die Website springen kann. 

Das habe ich in dieser auch mit Adobe Aero getestet und war überrascht wie einfach das ging und bin sehr begeistert mit dem Ergebnis.

Verschiedene Entwürfe für Postkarten:

Bildschirmfoto 2024-06-18 um 18.37.18.pngBildschirmfoto 2024-06-18 um 18.37.18.png

Prototypische Umsetzung mit Adobe Aero:

KW 23 - Austesten verschiedener Animationen + Überarbeitung des Screen Designs: Information Design für Orte & Scrollbars zur Orientierung

In dieser Woche habe ich mich mit weiteren möglichen Animationen für meine Screen Designs auseinander gesetzt und bin zu dem Entschluss gekommen, dass die Typo-Animation am besten passt.

Zusätzlich habe ich die Screens vom Interface noch etwas angepasst, um noch mehr Informationen zu den Ereignissen und vor allem den Orten mitzugeben.

Austesten verschiedener Animationen:

Animationen mit KI:
Mit Runway ML habe ich versucht einige Bilder animieren zu lassen. Jedoch morpht es die Menschen zu sehr und der animierte Inhalt macht keinen Sinn. Außerdem ist das Ergebnis zu sehr weichgezeichnet, was nicht zu meinem Stil passt, weshalb ich mich gegen diese Animation entschieden habe. 

Animationen mit VHS:
Gegen den Vorschlag von VHS Animationen habe ich mich relativ schnell entschieden, da das nicht zu meinem Zeitungsstil passt und ich sonst noch mehr vom Printmedium im Digitalen abkomme. 

Typo Animationen:
Schlussendlich belasse ich es bei meinem ersten Entwurf mit der Typo Animation. Ich finde sie sehr passend, da sie auch einen „News-Ticker“ Charakter hat und so zu meinem Konzept des „Wende Journals“ sehr gut passt.

Überarbeitung des Screen Designs: Information Design für Orte & Scrollbars zur Orientierung:

Bildschirmfoto 2024-06-18 um 18.27.26.pngBildschirmfoto 2024-06-18 um 18.27.26.png

KW 21 & 22 - Screen Design Varianten Website + erste Texte geschrieben

Da ich nun nach der letzten Woche eine gute Grundlage für die Gestaltung meines Projekts hatte, habe ich in dieser Woche das Screen Design überarbeitet und mehrere Entwürfe gemacht.

Parallel habe ich angefangen die ersten Texte für die Website zu schreiben und die Bilder entsprechend zuzuordnen.

Screen Designs: 

Group 202.pngGroup 202.png

Erste Texte geschrieben: 

Bildschirmfoto 2024-06-18 um 18.19.05.pngBildschirmfoto 2024-06-18 um 18.19.05.png

KW 20 - Auseinandersetzung mit NS Codes & DDR CI

Nachdem mein Entwurf von der letzten Woche leider sehr stark an die NS-Zeit erinnerte, habe ich mich in dieser Woche sehr intensiv mit NS-Codes und der DDR-CI auseinandergesetzt. Das war sehr hilfreich, um mein Design von NS-Codes abzugrenzen und ein visuelles Erscheinungsbild für die Wende herzuleiten.

Styleguide (1).pdf PDF Styleguide (1).pdf

KW 19 - erster Plakat- und Website Entwurf

Diese Woche habe ich einen ersten Entwurf für das Plakat gemacht - sowohl die analoge Version, als auch die AR Variante, wie das Poster nach dem Scan das QR-Codes aussehen soll. 

Dazu habe ich auch noch ein passenden Entwurf für die mobile Variante der Website gemacht. Hier gibt es zwei Navigationen. Die Navigation unten ermöglich es sich jeweils rechts und links chronologisch durch die Ereignisse durchzuklicken. Das Burger Menü oben bietet dann eine Übersicht aller Ereignisse, durch die man scrollen kann und direkt zu einem anderen Ereignis springen kann.

Bildschirmfoto 2024-05-29 um 17.14.53.pngBildschirmfoto 2024-05-29 um 17.14.53.png

KW 18 - Pitch

In dieser Woche habe ich das Pitchdeck ausgearbeitet und mich auf den Pitch vorbereitet.

WENDE '89.pdf PDF WENDE '89.pdf

KW 17 - Ausarbeitung des Konzepts

Diese Woche habe ich das Konzept für die Umsetzung meines Projekts ausgefeilt: Ich stelle mir ein interaktives Plakat im Zeitungsstil vor, welches es vor Ort ermöglicht, sich über die historischen Ereignisse zu informieren. Über einen QR-Code kommt man zu einem virtuellen AR Erlebnis und erhält Zugang zur Website für weiterführende Informationen.

Dafür habe ich außerdem noch ein weiteres Moodboard, ergänzend zu denen von letzter Woche, im Zeitungsstil erstellt, für welches ich mich schlussendlich auch für die Umsetzung meines Projektes entschieden habe. Das Medium Zeitung passt aus gestalterischer Hinsicht sehr gut zu dem Thema, weil es damals auch um Pressefreiheit ging und die Zeitung das Medium der Nachrichten war. 

Zusätzlich habe ich noch auf einer Karte von Plauen die Punkte markiert, an denen man die Poster bei der Umsetzung des Projektes aufhängen könnte.

Bildschirmfoto 2024-05-07 um 15.50.54.pngBildschirmfoto 2024-05-07 um 15.50.54.png

Erstellung eines weiteren Moodboards, welches ich für die Umsetzung nutzen werde:

Bildschirmfoto 2024-05-07 um 16.19.20.pngBildschirmfoto 2024-05-07 um 16.19.20.png

Übersicht der Punkte in Plauen, an denen die AR-Poster aufgehängt werden können: 

Bildschirmfoto 2024-05-07 um 15.52.23.pngBildschirmfoto 2024-05-07 um 15.52.23.png

KW 16 - Verbildlichung des Themas + Moodboards

In dieser Woche habe ich mich visuell mit dem Erscheinungsbild der DDR auseinandergesetzt und mir dazu ein Moodboard gemacht, um so ein besseres Gefühl von dieser Zeit zu bekommen.

Zusätzlich habe ich noch ein paar andere Moodboards gemacht, mit Richtungen, in die mein Projekt eventuell gehen könnte.

Verbildlichung des Themas:

Bildschirmfoto 2024-05-07 um 13.58.03.pngBildschirmfoto 2024-05-07 um 13.58.03.png
Bildschirmfoto 2024-05-07 um 13.58.29.pngBildschirmfoto 2024-05-07 um 13.58.29.png
Bildschirmfoto 2024-05-07 um 13.58.18.pngBildschirmfoto 2024-05-07 um 13.58.18.png

Moodboards:

Bildschirmfoto 2024-05-07 um 13.58.43.pngBildschirmfoto 2024-05-07 um 13.58.43.png
Bildschirmfoto 2024-05-07 um 13.58.52.pngBildschirmfoto 2024-05-07 um 13.58.52.png
Bildschirmfoto 2024-05-07 um 13.59.07.pngBildschirmfoto 2024-05-07 um 13.59.07.png

KW 15 - Tiefergehende Recherche

Diese Woche habe ich mich noch intensiver mit der Recherche auseinandergesetzt und mich mit dem Zeitzeugen Siegmar Wolf getroffen. Er hat mir wertvolle Einblicke und noch mal sehr viel wertvollen Input gegeben. Unterstützt durch Zeitungsartikel, Filmausschnitte und Fotomaterial habe ich ein umfassendes Bild der damaligen Ereignisse in Plauen erhalten.

Außerdem habe ich die Rechercheergebnisse der vergangenen Woche(n) strukturiert, den Zeitstrahl nochmal aussortiert und die Ereignisse priorisiert, um den Inhalt immer mehr auf das Wesentliche einzugrenzen. 

Ergänzend dazu habe ich die Inhalte nochmal visuell anders dargestellt - auf einer Karte mit einer Legende - um einen besseren Überblick über alle Daten zu bekommen.

Recherche Input von Siegmar Wolf: 

Bildschirmfoto 2024-05-07 um 15.54.58.pngBildschirmfoto 2024-05-07 um 15.54.58.png
Bildschirmfoto 2024-05-07 um 15.56.10.pngBildschirmfoto 2024-05-07 um 15.56.10.png
81JF2XGoFnL._AC_UF894,1000_QL80_.jpg81JF2XGoFnL._AC_UF894,1000_QL80_.jpg

Zeitstrahl:

Bildschirmfoto 2024-04-16 um 14.38.26.pngBildschirmfoto 2024-04-16 um 14.38.26.png
Bildschirmfoto 2024-04-16 um 14.38.37.pngBildschirmfoto 2024-04-16 um 14.38.37.png
Bildschirmfoto 2024-04-16 um 14.38.54.pngBildschirmfoto 2024-04-16 um 14.38.54.png
Bildschirmfoto 2024-04-16 um 14.39.14.pngBildschirmfoto 2024-04-16 um 14.39.14.png
Bildschirmfoto 2024-04-16 um 14.39.21.pngBildschirmfoto 2024-04-16 um 14.39.21.png

Übersicht der Daten:

Bildschirmfoto 2024-04-16 um 14.46.53.pngBildschirmfoto 2024-04-16 um 14.46.53.png

KW 13 & 14 - Recherche + Medienübersicht

Nachdem ich mich für das Thema „Die Wende 1989“ entschieden habe, bin ich tiefer in die Recherche gegangen und habe erstmal aus verschiedenen Quellen fast alle Jahreszahlen und Ereignisse aus dem Jahr 1989 herausgeschrieben, Bilder herausgesucht und alles chronologisch nach Monaten geordnet. 

Außerdem habe ich eine Übersicht an möglichen Medien, die für mein Projekt in Frage kommen, erstellt. Mir war von Anfang an klar, dass ich Analog mit Digital verbinden möchte. Da ich den Riso mit seinem Charakter sehr gerne mag und das auch gut zu einem historischen Thema passt, habe ich ihn mir als Medium/ Drucker für eventuelle Poster herausgesucht. Für eine digitale Anwendung könnte ich mir gut Mapbox (für die verschiedenen Orte der Ereignisse) oder auch die Erweiterung mit Augmented Reality vorstellen.

Weitere Recherche: 

Bildschirmfoto 2024-04-08 um 08.14.10.pngBildschirmfoto 2024-04-08 um 08.14.10.png
Bildschirmfoto 2024-04-08 um 08.14.31.pngBildschirmfoto 2024-04-08 um 08.14.31.png
Bildschirmfoto 2024-04-08 um 08.16.35.pngBildschirmfoto 2024-04-08 um 08.16.35.png
Bildschirmfoto 2024-04-08 um 08.17.49.pngBildschirmfoto 2024-04-08 um 08.17.49.png
Bildschirmfoto 2024-04-08 um 08.18.07.pngBildschirmfoto 2024-04-08 um 08.18.07.png

Medienübersicht:

Bildschirmfoto 2024-04-08 um 08.18.46.pngBildschirmfoto 2024-04-08 um 08.18.46.png

KW 12 - Erste Themenvorschläge

Während meiner Recherche für mögliche Themen habe ich relativ schnell einen Favoriten gefunden, für den ich mich später auch entschieden habe: Die Wende 1989. Dieses historische Ereignis fasziniert mich schon lange und hat in meiner Heimatstadt Plauen eine ganz besondere Bedeutung. Da Plauen eine Vorreiterrolle bei der friedlichen Revolution in der DDR einnahm, bietet dieses Thema eine einzigartige Möglichkeit, lokale Geschichte mit einem übergreifenden historischen Kontext zu verbinden.

1. Nutzung von Künstlicher Intelligenz in Deutschland

Verbreitung:

  • Wie viele Menschen in Deutschland nutzen KI?
  • In welchen Bereichen wird KI am häufigsten eingesetzt?
  • Wie sieht die regionale Verteilung der KI-Nutzung aus?
  • In welchen Bereichen wird KI am häufigsten eingesetzt?
  • Wie sieht die regionale Verteilung der KI-Nutzung aus?

Auswirkungen:

  • Welche Vorteile und Herausforderungen bringt KI für die Gesellschaft?
  • Wie verändert KI die Arbeitswelt?
  • Welche Auswirkungen hat KI auf Bildung und Gesundheit?

Ausblick:

  • Welche Entwicklungen sind im Bereich KI zu erwarten?
  • Welche Chancen und Risiken birgt die Zukunft von KI?

Daten:

https://www.destatis.de/DE/Presse/Pressemitteilungen/2023/11/PD23_453_52911.html

https://de.statista.com/outlook/tmo/kuenstliche-intelligenz/deutschland#benutzer

https://de.statista.com/statistik/daten/studie/1425962/umfrage/veraenderungen-durch-generative-ki-nach-bereichen/

____________________________________________________________

2. Die Wende - Mauerfall in Deutschland 1989

Chronik der Wende:

  • Darstellung der wichtigsten Ereignisse im Jahr 1989
  • Beschreibung der Schlüsselmomente, die zum Fall der Mauer führten

Fokus Plauen:

  • Die ersten Demonstrationen: Darstellung der Ereignisse in Plauen im Herbst 1989
  • Zeitzeugenbefragung - Interview
  • Fotos, Videos, Dokumente aus Plauen

Fall der Mauer:

  • Fotos, Videos und Audioaufnahmen der Nachrichten- und Pressemitteilungen

Blick auf die heutige Zeit:

  • offene Frage für einen Diskussionsraum, ob die damals hart erkämpfte und gewünschte Demokratie heute noch das ist, was man sich damals vorgestellt hat?

Daten:

https://www.bundesregierung.de/breg-de/themen/deutsche-einheit/chronik-der-ereignisse-1989-1990

https://www.plauen.de/Tourismus-Kultur-und-Freizeit/Plauen-entdecken/Friedliche-Revolution-89/Chronik-der-Wende/

https://www.plauen.de/Tourismus-Kultur-und-Freizeit/Plauen-entdecken/Stadtflair/Sehenswertes/Altstadtrundgang/Bürgerdenkmal-Friedliche-Revolution-in-Plauen-/

https://www.ndr.de/geschichte/chronologie/wende/9-November-1989-Der-Tag-an-dem-die-Mauer-faellt,mauerfall234.html

https://www.ndr.de/geschichte/chronologie/wende/Guenter-Schabowski-Sein-Zettel-und-der-Mauerfall,schabowskiszettel100.html

https://magazin.spiegel.de/EpubDelivery/spiegel/pdf/66133641

____________________________________________________________

3. Verschwendung von Konsumgütern

Dimensionen der Verschwendung:

  • Darstellung des Ausmaßes der Lebensmittelverschwendung in Deutschland
  • Veranschaulichung der Umweltbelastungen durch Konsumgüter
  • Veranschaulichung warum wir so viele Lebensmittel wegwerfen

Globale Auswirkungen:

  • Beschreibung der Folgen von Ressourcenverschwendung für die Welt

Ursachen und Treiber:

  • Konsumverhalten: Analyse der Faktoren, die zu übermäßigem Konsum führen
  • Systemische Faktoren: Einfluss von Produktionssystemen und Marketingstrategien

Daten:

https://de.statista.com/statistik/daten/studie/1040378/umfrage/verschwendung-von-lebensmitteln-in-deutschland-nach-bundeslaendern/

https://www.bzfe.de/nachhaltiger-konsum/lagern-kochen-essen-teilen/lebensmittelverschwendung/

https://www.bmel.de/DE/themen/ernaehrung/lebensmittelverschwendung/studie-lebensmittelabfaelle-deutschland.html

8. Links

Figma Dokument:

Aero:

Webflow:

Website:

9. Reflexion

Nach diesem Projekt kann ich auf jeden Fall sagen, dass es das herausforderndste Projekt für mich während des ganzen Studiums war - sowohl inhaltlich, als auch gestalterisch. Es war ein sehr komplexes und großes Thema, welches immer mehr eingegrenzt werden musste, damit ich es zeitlich überhaupt umsetzen kann. Mir ist es nicht ganz leicht gefallen, zum Schluss immer mehr Ereignisse aus der Zeit herauszustreichen. Dennoch denke ich, dass ich jetzt die wichtigsten Ereignisse gut zusammengefasst habe und man einen guten inhaltlichen Zusammenhang der wichtigsten Ereignisse der Wende erkennen kann. Die gestalterischen Herausforderungen haben mich in der Mitte des Projekts auch sehr viel Zeit und Nerven gekostet. Aber das war sehr wertvoll, um zum Schluss ein sicheres Design zu haben, was an keine andere historische Zeit erinnert. 

Trotz der ganzen Herausforderungen bin ich zum Schluss sehr zufrieden mit meinem Projekt und habe in diesem Semester sehr viel mitgenommen und dazugelernt!

Ein Projekt von

Fachgruppe

Kommunikationsdesign

Art des Projekts

Keine Angabe

Betreuung

foto: Prof. Michael Zöllner

Zugehöriger Workspace

Interaction / Information Design (KD6)

Entstehungszeitraum

Sommersemester 2024