Nach unten scrollen

Virtual Botanical Garden

Studienprojekt – 4. Semester Mediendesign

Interaction design – Information design

Aufgabenstellung Prozess Umsetzung Ergebnis

Aufgabenstellung

In diesem Semester arbeitete der Studiengang Mediendesign mit dem Botanischem Garten Hof zusammen. Die Projekte der Studierenden sollten sich rund um dieses Thema abspielen. Mir und zwei meiner Kommilitonen ist bei dem Besuch des Gartens aufgefallen, dass es damals noch keine Karte oder andere Mittel zur Orientierung im garten gab. Ich bildete also mit Jan Gemeinhardt und Lukas Margerie eine Gruppe um gemeinsam einem Projekt zu arbeiten.

Bild anwählen für Galerie

Ziel des Projekts

Eine Webanwendung, die mit interaktiven 3D-Elementen und Animationen eine virtuelle Karte des Botanischen Gartens Hof bereitstellt. Die Anwendung soll darüber hinaus den User über interessante Fakten der Pflanzen im botanischen Garten aufklären und interaktive Informationsgrafiken beinhalten. Diese sind gefüllt mit Daten aus Sensor-Stationen und sollen zusätzlich tiefere Einblicke in das Innenleben des Gartens liefern. Ein real angefertigtes 3D-Modell der Karte soll außerdem vor Ort in der Nähe des Gartens als Gegenstück zur Webanwendung fungieren und den Besuchern des Gartens zusätzlich als Orientierung dienen. Mithilfe von Augmented Reality sollen die Infografiken sowohl am Modell als auch groß im Garten zu sehen sein und die Brücke zwischen den beiden Teilprojekten bilden.

Prozess

1. Gruppenbildung

In der Ideenphase des Semesters merkten wir schnell, dass alle drei individuelle Ideen sich um eine Karte für den botanischen Gartens drehten. Wir entschlossen uns zusammen zu arbeiten.

2. Zielgruppen

Unser Projekt sollte dem spielerischen Lernen über die Pflanzen des botanischen Gartens zu Gute kommen. Deswegen sind unsere Personas besonders Studenten, Schülern und Lehrern nachempfunden.

3. Informationssammlung

Zu Beginn des Projekt recherchierten wir existierende digitale Karten zu Zwecken der Inspiration. Gleichzeitig informierten wir uns online und Vorort über den aktuellen Stand des Gartens durch Interviews mit den Gärtnern. Dadurch entwickelte sich nach und nach die Informationsarchitektur für die Anwendung.

4. Experimente

Im Laufe des Projekts verfolgten wir die verschiedenen Ansätze und Ideen für unser Projekt. Die Aspekte unseres Projekts wie 3D-Karte, Sensorgraph, Interface Design, Physische 3D Karte und A-Frame bzw. Web Development teilten wir untereinander auf.

5. Eingrenzung des Projekts

Da so viele Ideen auf einmal in einem Semester nicht umsetzbar waren, fokussierten wir uns auf den Kern unseres Projekts, der interaktiven 3D Webanwendung. Wir verwendeten für die digitale Karte A-Frame, da man hier dreidimensionale Szenen durch Programmieren inszenieren und animieren kann.

Umsetzung

Bei der Umsetzung übernahm Jan das Modellieren der 3D-Objekte in Blender, Lukas kümmerte sich um die zugehörigen Texte und das User interface in Webflow, während meine Hauptaufgabe in der Programmierung in A-Frame lag. Es fand ein ständiger Austausch statt. Ich konzentriere mich hier großteils auf meinen Teil der Arbeit in A-frame: die Zusammensetzung und Animation der 3D-Objekte. Da ich zuvor nicht damit gearbeitet hatte und das Tool ständigen Wandel unterzogen ist, nahm die Umsetzung sehr viel Zeit in Anspruch. Oft mussten Objekte von Jan neu modelliert werden um den Anforderungen zu entsprechen.

A-Frame

3D-Visualisierung

Die fertige Karte setzt sich aus über vierzig einzelnen 3D-Objekten zusammen. Jedes Einzelne der zweiunddreißig Beete und acht Kunstwerke des Gartens musste unabhängig beweglich sein um Animationen zu integrieren zu können.

Animationen

Als Hovereffekt wird jedes der Beete und Kunstwerke aus der Grundplatte gehoben. Zu diesem Zweck wurden sie meist höher modelliert um beim Anheben weiterhin mit dem Boden verbunden zu sein.

Kamerafahrten

Durch Anwählen der Beete schwenkt die Kamera dynamisch aus ihrer Grundposition zu den einzelnen Beeten und Kunstwerken. Jede der Fahrten ist individuell in Position und Rotation angepasst und funktionieren auch von Objekt zu Objekt. Man kann jeder Zeit durch ein Home-Icon am unteren Rand des Sichtfelds in die Grundposition zurückkehren.

Webflow

Die Verbindung von A-frame mit dem Userinterface von Lukas in Webflow war sehr kompliziert. Jedes Beet musste mit dem entsprechenden Informationstexten im Interface verbunden sein. Anwählen der Flächen sollte in Interface und 3D-Modell gleichermaßen möglich sein. Die fertige Webseite wurde nur für die Präsentation des Projekts im Semester gehostet und ist jetzt aber leider nicht mehr verfügbar.

Link zum A-Frame-Sketch

Physische Karte

Unser Projekt sollte bei einer Realumsetzung auch ein physisches Equivalent im Garten beinhalten, welches aus Holz und Beton hergestellt werden könnte. Zu Präsentationszwecken fertigten wir jeweils ein Kartenmodell mit dem 3D-Drucker und dem Lasercutter an.

Bild anwählen für Galerie

Ergebnis

Das Resultat ist eine interaktive Orientierungshilfe, die den Besuchern des botanischen Gartens auch als ein Guide bei den verschiedenen Beeten dienen kann. Man kann sich dadurch sowohl während als auch vor seinem Besuch von Zuhause aus Informationen zu den Pflanzen aneignen.
Die Augmented Reality und Integration der Sensorgraphen haben es leider nicht mehr in unsere finale Ausarbeitung geschafft. Aufgrund des zeitaufwendigen Einarbeitens mit A-Frame und Webflow, haben wir unseren Fokus auf das Wesentliche gerichtet. Mit mehr Zeit hätten wir das Projekt noch verfeinern und um einige Aspekte erweitern können.