Präsentationsvideo
--------
Analyse und Entdecken
Bei einer ersten Zooführung tauschten wir uns über Ideen, Probleme und Verbesserungsmöglichkeiten mit dem Zoodirektor aus.
Ich erstellte eine erste Ideensammlung mit Ansätzen und Themen, welche mich interessierten.
Aus den Ideen erstellten wir ein Problem-Cluster, um diese als Gruppe zu sammeln und nach Wichtigkeit zu bewerten.
Auf Basis der geordneten und bewerteten Probleme haben wir anschließend überlegt, welche Schnittstellen geeignet wären, um die jeweiligen Herausforderungen zu lösen.
Ich entschied mich für das Thema „schriftlose Bildung“, bei dem ich mit interaktiven Elementen Wissen vermitteln möchte.
Mein zweites Thema, zu dem ich mir Gedanken machte, war die Infotafeln im Zoo, welche eher unattraktiv sind. Zu diesem Thema gab es jedoch schon eine andere Person, welche sich ähnliche Gedanken dazu gemacht hatte, weshalb ich auf die schriftlose Bildung zurückgriff.
Das sind meine Gedanken zu den Infotafeln:
Definition und Konzeption
Problemdefinition:
Die Informationsvermittlung im Zoo ist vorwiegend statisch und bleibt nicht im Gedächtnis. Außerdem gibt es ungenutzte Gebäude im Zoogelände.
Das Problem betrifft vor allem Zoobesucher im Alter von 10-30 Jahren.
Ein guter Rundgang sollte interessant und spannend gestaltet sein, um die Aufmerksamkeit der Besucher aufrechtzuerhalten und einen guten Eindruck zu hinterlassen. Dabei ist mir die Vermittlung von Wissen über Zoos und ihre Bedeutung besonders wichtig. Durch den gezielten Einsatz haptischer und visueller Interaktionen lässt sich das Besuchserlebnis zusätzlich stärken.
Meine ersten Entwurfsplanungen zur Visualisierung sind auf diesem Figma Jamboard nach der Erstellung geordnet:
https://www.figma.com/board/7xek6xMXyCDDhG3Yl0ZlWG/UX-Zoo?node-id=0-1&t=BQf7HYTKzKukaeFa-1
Mein Entwurf für das „Nachttierhaus“ ist auf der folgenden Folie zu sehen.
Dieses Haus bekam jedoch schon einen anderen Plan, weshalb diese Idee leider wegfiel.
Das zweite und finale Haus, zu welchem ich einen genaueren Plan ausarbeitete, war das „Ludwig Leichhardt Haus“ mit dem Thema Australien.
Für dieses erstellte ich einen Plan für 3 Medien, mit welchen ich bestimmte Themen erklären kann.
Mein erstes Medium ist ein interaktiver Tisch, welcher mit dem Drehen an einem Rad durch die erste Australien-Expedition Ludwig Leichhardts scrollt.
Medium zwei ist eine Drehscheibe, auf der die drei bekanntesten invasiven Arten Australiens gezeigt und erklärt werden. Und das dritte Medium ist ein haptisches Exponat zum Thema Auswirkungen des Menschen auf Australien.
Ich entschied mich dazu, aus diesen drei Medien eine Kombination zu entwickeln, die beide Themen, - Expedition und invasive Arten aufgreift und die Konzepte des Exponat-Tisches, der Website sowie des Rades integriert.
Außerdem erstellte ich in Blender anhand von Bildern ein 3D-Modell vom Raum, um mir dessen Dimensionen besser darstellen zu können.
Moodboards
Für die Expeditions-Website und das grundlegende Design des Raumes bzw. Tisches erstellte ich 4 Moodboards.
Das erste und dritte Moodboard legte ich für meinen Stil fest.
Dieser sollte somit fotografisch mit unterschiedlichen Grafikelementen wie Cutouts, Flächen und großer Typo gestärkt werden.
Zwischenpräsentation
--------
Designprozess
Für die Lebensraum-/ Tier-Karten, das interaktive Rad und die Website erstellte ich unterschiedliche Designvarianten und experimentierte mit verschiedenen Stilen.
Interaktives Rad
Das interaktive Rad kann von Hand gedreht werden, bekommt also zwei Seiten - die Vorderseite leitet in das Thema invasive Arten ein und die Seite hinter der Drehscheibe - welche durch Ausschnitte im Holz zu sehen ist - beinhaltet Informationen zu drei Invasiven Tieren. Die Katze, das Kaninchen und der Fuchs.
Zuerst erstellte ich Wireframes, um ein stimmiges Layout zu erstellen.
Danach erstellte ich ein erstes Design mit realistischen Bildern von Unsplash.
Danach erstellte ich ein erstes Design mit realistischen Bildern von Unsplash. Zu dem Zeitpunkt wusste ich auch noch nicht, ob man das obere Element oder die untere Ebene drehen sollte, weshalb ich für beide Optionen Varianten erstellte.
Das Design passte ich nach dem Erstellen aller Elemente am Tisch noch einmal an. Daraus entstand dieser Stil mit gerissenem Papier und Papp-Textur.
Außerdem benötigte ich alle Texte in Tschechisch, weshalb nur noch wenig Platz für Weißraum zur Verfügung stand. Das Rad hat einen Außendurchmesser von 38cm, damit es auf den Tisch, welcher eine Länge von 1,10 m hat, passt.
Lebensraum- und Tier-Karten
In der Mitte des Tisches sollen 3 Karten-Reihen platziert werden.
Die Klapp-Karten haben eine Vorderseite mit Vorschaubild und zwei innere Seiten, auf denen Informationen zu Lebensräumen und einem Tier, das darin lebt, zu sehen sind.
Zuerst sind Varianten zu sehen, bei denen sich das Design noch veränderte.
Zum einen passte ich bei den Designs das Titelblatt an, welches zusätzlich eine Erklärung bekommen hat, damit Besucher*innen die Karten nicht mit invasiven Arten verwechseln.
Außerdem passte ich Größe und Farben an.
Expeditions-Website - Port-Essinton
Auf einem - im Tisch eingesetzten - Display kann man die erste Expedition von Ludwig Leichhardt entdecken. Dafür ist ein Drehknopf unterhalb angebracht.
Die Website läuft über einen Raspberry Pi 5. Dafür benötigte ich eine HTML Website, die kontinuierlich offline gehostet werden kann.
Mein erstes Design erstellte ich mit der KI von Claude.
Der Prompt dafür war:
Ich baute etwas an dem Grundkonstrukt der Website, bis ich diese Variante erhielt: https://site.schwarzflorian.com/test_ludwig-leichhardt/
Bei der Variante hatte ich noch keinen Stil vorgegeben. Diesen setzte ich in der erstellten HTML Datei über VS Code um.
Außerdem waren noch einige Kleinigkeiten im Code vorhanden, die Probleme bereiteten.
Probleme, die behoben werden mussten:
1. Satellitenkarte kann nicht auf dem Pi wiedergegeben werden, da sie zu viel Speicherplatz einnehmen würde und mit 2 Gigabyte Arbeitsspeicher nicht flüssig laufen könnte.
Lösung: Ich musste eine andere Australien-Karte von Maplibre nehmen, welche nicht so viel Speicherplatz benötigt, heruntergeladen und über pmtiles eingebunden werden kann. Dieses Problem konnte ich aber recht gut mit Claude und mehreren Python-Skripten lösen.
2. Die Punkte auf der Karte folgten nicht genau der Route von Ludwig Leichhardts erster Expedition.
Lösung: Erstellung eines HTML-Tools mithilfe von Claude, das eine genaue Koordinaten-Abfrage ermöglicht, welche in die Zwischenablage gespeichert wird.
Außerdem kann ich ein Bild in den Hintergrund legen, was mir ermöglichte, die genaue Route nachzubilden. Das ist der Link zu dem Tool: https://site.schwarzflorian.com/tools/koordinaten-karten-tool.html
Angepasste Karte
In HTML ist es möglich, Bilder als Maske in den Hintergrund von Div-Blöcken zu legen. Das nutze ich aus, um meine Papierstruktur dreidimensional über die Karte zu legen.
Die animierten Icons exportierte ich mit Lottie Files aus Figma, wo ich den Start- und End-Frame anlegte.
Mit einem Mausklick bzw. dem Drücken des Rotary-Encoders am Tisch wechselt die Seite zu einer zweiten HTML Datei mit tschechischen Texten.
Die Seite ist unter dieser URL erreichbar:
Screencast
Blender 3D-Konstruktion
Um sich ein Bild von dem Tisch machen zu können, erstellte ich eine Konstruktion des Tisches in der 3D-Grafiksoftware Blender.
Ich startete mit einem Grundkonstrukt, wie ich mir den Tisch vorstellte.
Dabei entstanden mehrere Varianten, wie man den Tisch aufstellen kann.
Letztendlich entschieden wir uns aber dafür, den Tisch in einem Winkel an der Wand anzubringen und die Seitenteile als Stützen zu verwenden.
Um sich den Tisch besser vorstellen zu können und genaue Maße hinzuzufügen, startete ich mit der Konstruktion wieder von vorne.
Dieses Mal fügte ich realistische Materialien hinzu, wobei ich manche Shader selbst erstellte. Die Maserung der Multiplexplatte erstellte ich mit einer gestreckten „Wave Texture“ mit hell- und dunkelbraunen Abschnitten.
Dabei experimentierte ich mit verschiedenen Shader-Elementen, um zum gewünschten Ergebnis zu kommen.
Die Holztextur ist ein heruntergeladenes Preset.
Die finalen Infotexte konnte ich dann aus dem Programm Affinity exportieren und als „Image Texture“ auf die Elemente mappen.
Zusammen entstand somit ein realistischer Render, den man für eine Kundenpräsentation zusätzlich mit Animationen aufbereiten könnte.
--------
Bau des Tisches
Ich arbeite gerne in meiner Werkstatt. Deshalb habe ich mich auch dafür entschieden, das Projekt in die Realität umzusetzen. Der Zoo unterstützte mich bei der Anschaffung der Materialien.
Durch meine 3D-Konstruktion hatte ich genaue Maße um das Holz zu bestellen und die Einzelteile zuzuschneiden.
Dabei musste ich immer wieder zu anderen Schritten zurückkommen, um Maße und Dimensionen anzupassen. Zum Beispiel hatte ich die Kärtchen auf ein Maß von 10 cm angedacht, dabei waren aber die Texte in der Schriftgröße nicht mehr gut zu lesen. Deshalb passte ich das Maß auf 14 cm an.
Um eine stabile Konstruktion zu erhalten, verwendete ich als Holzart Multiplex 18 mm. Diese lässt sich gut bearbeiten und hat durch ihre geleimten Ebenen die Eigenschaft, dass es sich nicht im Nachhinein verzieht oder biegt.
Tischkonstrukt
Der erste Schritt war es, den Kasten zu bauen, auf dem später die Elemente aufgebracht werden und in welchem die Technik ihren Platz findet.
Die Multiplexplatten mussten zugeschnitten werden und bekamen einen Winkel mit der Kreissäge.
Zum Zusammenbau der Einzelteile verwendete ich verzinkte Stahlwinkel. Davon mussten zwei Stück zugesägt werden, damit sie als Zierleiste für den Abschluss passten.
Für die Referenzklappe verwendete ich Scharniere und zwei Schlossriegel, an die man im Nachhinein auch Schlösser zum Absperren der Klappe anbringen kann.
Klappen
Schritt zwei war es, die einzelnen Elemente anzufertigen.
Für die Klappmechanismen verwendete ich Stangenscharniere. Diese sehen mit den dazu passenden Schrauben sehr hochwertig aus. Das Holz ist dieses Mal 12 mm Multiplex, damit es auf dem Tisch nicht zu hoch wirkt.
Drehbares Rad
Das Rad für die invasiven Arten ist ein Stück Multiplex mit einem Durchmesser von 38 cm. Um eine exakte Rundung zu erlangen, verwendete ich eine selbst gebaute Vorrichtung, mit der ich auf meiner Hobby-Tischkreisäge genaue Kreise sägen kann.
Den Ausschnitt durch die Holzplatte sägte ich mit einer Stichsäge und einem präzisen Sägeblatt. Damit wurden die Rundungen ziemlich genau.
Das Loch in der Mitte ist für die Befestigung mit dem Tisch und dient als Drehmechanismus. Dabei wird das Rad mit einer Schraube und einer Mutter leicht angezogen und danach mit einer zweiten Mutter „gekontert“.
Displayausschnitt
Bei dem Ausschnitt für das Display verwendete ich eine Oberfräße, da der Schnitt mit einer Tisch- oder Hand-Kreissäge zu ungenau geworden wäre.
Mit einem Richtscheit und Zwingen baute ich mir eine Konstruktion, um die Oberfräße genau zu führen. Nach zwei Durchgängen (der Displayausschnitt und die Auflagefläche dessen) konnte ich noch die Vertiefungen für die Kabel fräsen. Nach öfterem Anpassen der Vertiefungen mit Stemmeisen und Cuttermesser, passte das Display sehr genau in den Ausschnitt.
Drehregler
Der Drehregler sollte rotiert und betätigt werden können, wobei ich mehrere Anforderungen hatte, damit er gut funktioniert und nicht einfach herausgezogen werden kann.
Dafür überlegte ich mir verschiedene Möglichkeiten, wie ich dies bezwecken konnte. Zum Schluss hatte ich eine Konstruktion, die nicht klemmt, aber auch nicht herausgezogen werden kann.
(Der Drehknopf ist an eine kleine runde Multiplexplatte geschraubt, welche denselben Durchmesser hat wie die Bohrung im Tisch. Dahinter ist ein 3D-gedrucktes Rad, was das Herausziehen verhindert und gleichzeitig die Übersetzung zum Rotary Encoder herstellt.)
Ein kleiner Kasten im Tisch versteckt die Konstruktion und ist somit nicht zugänglich.
Der Drehregler bekam außerdem eine Lasergravur, um als drehbarer Kompass erkannt werden zu können.
Alles zusammenbauen
Nachdem alle Teile gefertigt waren, konnte ich alles zusammenbauen und schrauben. Dabei sind die Karten von dem Tisch-Inneren geschraubt, um keine Schraubenköpfe sehen zu können. Das „Invasive-Arten-Rad“ bekam eine Bohrung, ebenso wie der Drehregler.
Informationstexte Kleben
Das Kleben der Informationstexte brachte mir Schwierigkeiten, denn es musste exakt passen. Deswegen machte ich einen Test und bemerkte, dass es zu extremen Wellen im Papier kam. Nach etwas Nachforschung fand ich ein Video, in dem genau mein Fall erklärt wurde. Ich musste die Holzleim-Wasser-Lösung sehr dünn mischen und dann dick auf das Papier, wie auch das Holz auftragen.
Dabei entstanden zwar auch kleine Blasen, diese lösten sich aber nach dem Trocknen auf.
Zuletzt musste ich die Reste mit einem Skalpell abschneiden und alles wieder zusammenbauen.
Raspberry Pi
Die Einrichtung vom Raspberry Pi habe ich zusammen mit dem Chatbot Claude vorgenommen.
Die Hauptschritte waren:
1. Raspberry Pi OS Lite auf eine SD-Karte installieren und auf dem Pi öffnen
2. Über SSH auf den Pi zugreifen und eine Ordnerstruktur sowie einen Localhost-Server - „nginx“ einrichten.
3. Bibliothek für Adafruit Stemma (Rotary Encoder für den Drehregler) installieren und verbinden
4. Website auf den Pi übertragen
5. Automatisches Booten von localhost einrichten
Plakate
Für die Werkschau (Ausstellung am Ende des Semesters) erstellte ich zwei Plakate.
Das Plakat 1 ist ebenso geeignet für die Dauerausstellung im Zoologischen Garten Hof, da es einen schnellen Überblick über das Thema gibt.
Das zweite Plakat dient als Erklärung, was später mit dem Tisch passieren wird. Dafür verwendete ich ein gerendertes Bild aus Blender, um den Tisch an der Holzwand zu zeigen.
