Abstract

Das Projekt „zwei dazwischen“ thematisiert den „Ludwig-Main-Donau-Kanal“ und den neuen Donau-Main-Kanal und stellt verschiedene Aspekte wie Geschichte oder Wirtschaft interaktiv auf einer Storytelling-Website gegenüber. Diese Website ermöglicht es den Nutzern, die Themen an unterschiedlichen Stationen entweder vor Ort oder bequem von zu Hause aus zu erkunden, wodurch eine zeitliche und räumliche Entkoppelung der Informationsvermittlung erreicht wird. Ein zentraler Bestandteil des Projekts besteht in der Transformation von Fotografien des „alten“ Kanals mithilfe eines Styletransfers, der auf TensorFlow basiert. Dabei werden die Bilder in die Ästhetik historischer Stahlstiche des Kanals umgewandelt, die vom Künstler Alexander Richard Marx im Jahr 1845 erstellt wurden. Das Prinzip der AR Szenen lässt sich mit weiteren Aspekten des Kanals beliebig fortführen.

Dokumentationsvideo

Bilder der Umsetzung und Ausstellung

Pitch Deck

User Journey

userjourney.png

Design Prozess

Panorama Style Transfer

Szenen

Workflow:

  1. Zu Thema 360° Panorama alter & neuer Kanal zuordnen
  2. ggf. Styletransfer/ Bearbeitung

  3. Szene in Illustrator aufbauen: Buttons +/-, Grafiken

  4. Export der einzelnen Elemente
  5. Pro Thema eine eigene Aframe-Szene anlegen
  6. Elemte in Szene laden und platzieren
  7. Abhängigkeiten hinzufügen

Beispiel Aufbau Szenen in Illustrator

Szene_handel.JPG

Aframe Szene mit Button Funktionalitäten

Link

aframe_szenetest.JPG

360° Panorama

SetUp:

  • GoProFusion CHDHZ-103-FW 360
  • GoPro Quik App
  • 2 Micro SD Karten (eine pro Kameraseite)
  • Powerbanl Usb-C
  • Stativ
  • SD Karten Adapter
  • Brillenputztücher

Vorbereitung:

  1. Tutorial anschauen und GoPro Fusion aufladen

  2. GoPro Quik App Installation und Setup

  3. Fusion Studio Installation Verrsion 1.2 für Mac

Vor Ort:

  1. GoPro mit Quik App verbinden
  2. Koppeln über Bluetooth
  3. Verbinden über Wlan
  4. Kamera Vorderseite nach Norden ausrichten
  5. Linsen putzen

  6. Helligkeit anpassen

  7. Verstecken
  8. Foto aufnehmen

Postproduction:

  1. Bilder von beiden Kameraseiten in einen Ordner kopieren
  2. Ordner in Fusion Studio importieren
  3. Bilder anpassen (Farbe/Positionierung)
  4. Bilder zum Export hinzufügen
  5. Bilder rendern (.tiff möglich, keine Komprimierung wie bei JPG)
  6. Stativ auf Bildern mit Photoshop retuschieren
  7. ggf. Styletransfer

Location:

  • alter Kanal: Gartenstadt Nürnberg, Worzeldorf, Brückkanal

  • neuer Kanal: Schleuse Nürnberg, Schleuse Eibach, Bootsweg Nürnberg

Abstract

Das Projekt „zwei dazwischen“ wurde von Marina Mörtel (6. Semester) unter der Betreuung von Prof. Michael Zöllner im Rahmen des Interaktion & Information Design Seminars an der Hochschule Hof entwickelt. Das Projekt thematisiert den „Ludwig-Main-Donau-Kanal“ und den neuen Donau-Main-Kanal und stellt verschiedene Aspekte wie Geografie, Geschichte und Wirtschaft interaktiv auf einer Storytelling-Website gegenüber. Diese Website ermöglicht es den Nutzern, die Themen an unterschiedlichen Stationen entweder vor Ort oder bequem von zu Hause aus zu erkunden, wodurch eine zeitliche und räumliche Entkoppelung der Informationsvermittlung erreicht wird. Ein zentraler Bestandteil des Projekts besteht in der Transformation von Fotografien des „alten“ Kanals mithilfe eines Styletransfers, der auf TensorFlow basiert. Dabei werden die Bilder in die Ästhetik historischer Stahlstiche des Kanals umgewandelt, die vom Künstler Alexander Richard Marx im Jahr 1845 erstellt wurden.

Webflow Umsetzung

https://zweidazwischen.webflow.io/

Konzeption

https://agate-rumbling-roadrunner.glitch.me/panorama_simple.html

Wireframes/Designansatz

User Journey

Marina's private board - User Story(2).jpg
Marina's private board - Copy of User Story.jpg
Marina's private board - Copy of User Story.jpg

Styletransfer Test

Learnings:

  • Content Image:

    1. Bilder an bewölkten Tag aufnehmen, sonst Fragmente

    2. farbig führt zu etwas mehr Bildtiefe als S/W

    3. ca. 650x650px

  • Style Images:

    1. großer Ausschnitt führt zu mehr Details

Style Transfer Tests

Marina's private board - Frame 34.jpg

Varianten und Experimente

Marina's private board - Frame 35.jpg
Marina's private board - Frame 33.jpg

Weitere Quellenrecherche

Marina's private board - Frame 32.jpg
Marina's private board - Frame 31(1).jpg

Vorläufiges Pitch Deck

Adobe Aero Testing

20230503_130755.jpg
Marina's private board - Frame 28(1).jpg

Themen

Neuer & alter Kanal

Marina's private board - 2023 Interaction Themen Ideen.jpg
Marina's private board - Copy of 2023 Interaction Themen Ideen(5).jpg

Was bedeutet Heimat

Marina's private board - Copy of 2023 Interaction Themen Ideen.jpg
Marina's private board - Copy of 2023 Interaction Themen Ideen(3).jpg

Forschende Hochschule Labortour

Marina's private board - Copy of 2023 Interaction Themen Ideen(1).jpg
Marina's private board - Copy of 2023 Interaction Themen Ideen(6).jpg

Recherche

Marina's private board - 2023 Interaction Design Recherche.jpg