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

App für den Tierpark Röhrensee

Finaler Titel

Tierpark Röhrensee App

Repräsentatives Bild des Projekts als Header

Free_Iphone_13_Pro_Mockup_2.jpgFree_Iphone_13_Pro_Mockup_2.jpg

1. Kurzbeschreibung

Bei meinem Projekt handelt es sich um eine mobile Anwendung für den Tierpark Röhrensee in Bayreuth, die als Wegweiser durch den Park dienen, informativ sein und alle Attraktionen des Parks präsentieren soll. Die Anwendung enthält eine in MapBox erstellte und mit allen wichtigen Dingen markierte digitale Karte, dann eine Übersicht aller Stationen und detaillierte Seiten zu Tieren, Attraktionen und Anreisemöglichkeiten. Für jedes Tier gibt es eine AR-Animation mit Ton und natürlichem Lebensraum, erstellt in Artivive, die beim Scannen des von mir erstellten Schilders funktioniert. Damit wollte ich eine Interaktion verbinden, die für Nutzer interessant sein kann, alle wichtigen Dinge an einem Ort sammeln und ihren Rundgang durch den Park so schön und einfach wie möglich gestalten. Mein Ziel war es, eine neue Ästhetik für den Park zu schaffen. Meine Motivation entstand aus meiner Liebe zu diesem Ort, denn ich verbringe dort oft Tage und es gibt viel zu tun, von Tierbeobachtungen, Essen, Picknicken bis hin zu Spielplätzen.

2. Filmische Dokumentation des Projekts

3. Bilder der Umsetzung / Anwendung / Ausstellung

IMG_1027.JPGIMG_1027.JPG
IMG_1037.JPGIMG_1037.JPG
IMG_1024.JPGIMG_1024.JPG
WhatsApp Bild 2024-07-21 um 12.01.11_18b75a94.jpgWhatsApp Bild 2024-07-21 um 12.01.11_18b75a94.jpg
WhatsApp Bild 2024-07-22 um 14.32.09_a0452d84.jpgWhatsApp Bild 2024-07-22 um 14.32.09_a0452d84.jpg

4. Pitch Deck

Pitch Decks KD4_6 Sommer 2024 - PD AJ 01 Titel.jpgPitch Decks KD4_6 Sommer 2024 - PD AJ 01 Titel.jpg
Pitch Decks KD4_6 Sommer 2024 - PD AJ 02 Team.jpgPitch Decks KD4_6 Sommer 2024 - PD AJ 02 Team.jpg
Pitch Decks KD4_6 Sommer 2024 - PD AJ 03 Problem.jpgPitch Decks KD4_6 Sommer 2024 - PD AJ 03 Problem.jpg
Pitch Decks KD4_6 Sommer 2024 - PD AJ 05 Projekt.jpgPitch Decks KD4_6 Sommer 2024 - PD AJ 05 Projekt.jpg
Pitch Decks KD4_6 Sommer 2024 - PD AJ 04 Lösung.jpgPitch Decks KD4_6 Sommer 2024 - PD AJ 04 Lösung.jpg
Pitch Decks KD4_6 Sommer 2024 - PD AJ 06 Zielgruppe.jpgPitch Decks KD4_6 Sommer 2024 - PD AJ 06 Zielgruppe.jpg
Pitch Decks KD4_6 Sommer 2024 - PD AJ 07 Wettbewerb.jpgPitch Decks KD4_6 Sommer 2024 - PD AJ 07 Wettbewerb.jpg
Pitch Decks KD4_6 Sommer 2024 - PD AJ 08 Alleinstellungsmerkmal.jpgPitch Decks KD4_6 Sommer 2024 - PD AJ 08 Alleinstellungsmerkmal.jpg

5. User Journey / Userflow

KD4 - Interaction Information Sommer 2024 - Userflow.jpgKD4 - Interaction Information Sommer 2024 - Userflow.jpg

6. Links zu Quellcode und Prototypen

7. Designprozess:

Ideenfindung

Screenshot (585).pngScreenshot (585).png
Screenshot (586).pngScreenshot (586).png
Screenshot (587).pngScreenshot (587).png

Recherche

Screenshot (652).pngScreenshot (652).png
Screenshot (640).pngScreenshot (640).png
Screenshot (643).pngScreenshot (643).png
Screenshot (648).pngScreenshot (648).png
Screenshot (647).pngScreenshot (647).png
Screenshot (642).pngScreenshot (642).png

Was kommt alles in der App:

Screenshot (669).pngScreenshot (669).png
Screenshot (670).pngScreenshot (670).png
Screenshot (671).pngScreenshot (671).png

Recherche über Tieren:

Recherche über Tieren.pdf PDF Recherche über Tieren.pdf

Moodboards

Fotos:

Screenshot (654).pngScreenshot (654).png

App und Schilder:

Screenshot (672).pngScreenshot (672).png

Mappe und Aero / Artivive:

Screenshot (748).pngScreenshot (748).png
Screenshot (710).pngScreenshot (710).png
Screenshot (711).pngScreenshot (711).png

Umsetzung

Bei Umsetzung hatte ich mehrere Ideen, wie eine Website zu machen oder eine Projektion an den Wänden und ähnliches. Am Ende habe ich mich für eine mobile App und Schilder entschieden, die denen im Park ähneln, aber AR-Animationen von Tieren mit Hilfe von Adobe Aero oder Artivive zeigen. Auf diese Weise können Benutzer sie auch unterwegs jederzeit verwenden, was für den Park am sinnvollsten ist.

Screenshot (656).pngScreenshot (656).png

App

Typo, Farben:

Ich habe mich auf die Farben des Parks konzentriert, weil sie auch die Farben von Bayreuth repräsentieren, aber da Blau und Grün jedoch nicht zu allem passen, weil sie beide sehr kräftig sind, habe ich ein helles Blau hinzugefügt, um sie auszugleichen. Für Typeface habe ich Poppins gewählt, weil es serifenlos, passend und leicht zu lesen ist.

Screenshot (862).pngScreenshot (862).png

Wireframes:

Screenshot 2024-05-13 221434.pngScreenshot 2024-05-13 221434.png

Screenshot (863).pngScreenshot (863).png
Screenshot (864).pngScreenshot (864).png
Screenshot (865).pngScreenshot (865).png

Fertiges Design und Prototyp:

Ich habe alle drei Farben verwendet, wobei das Hellblau am meisten im Fokus steht, was eine beruhigende Wirkung hat und den Inhalt in den Vordergrund stellt. Es gibt einen Startbildschirm, eine digitale Karte des Parks, eine Übersicht aller Stationen und jeweils eine Detailseite, alle Attraktionen des Parks mit Telefonnummer und Öffnungszeiten sowie Ankunft. Ich wollte die Collage Ästhetik ausprobieren, deswegen habe ich die weißen Ränder implementiert, die auch in AR Animationen sind. Mir war es wichtig, dass zu den Attraktionen alle notwendigen Informationen vorhanden sind, wie zum Beispiel die Entfernung der Restaurants vom Park, die Möglichkeit, die Nummer direkt aus der App heraus anzurufen und bis wann alles geöffnet ist.

Android Large - 14.pngAndroid Large - 14.png
Mappe.pngMappe.png
Stationen fertig.pngStationen fertig.png
Station 2 Detailseite.pngStation 2 Detailseite.png
Station 1 Detailseite.pngStation 1 Detailseite.png
Attraktionen farbig.pngAttraktionen farbig.png
Ankunft fertig 5.pngAnkunft fertig 5.png

Screencast:

Artivive

Für Artivive war es mir wichtig, Animationen einzuführen, die den natürlichen Lebensraum der Tiere darstellen, da dieser nirgendwo im Park visuell dargestellt wird und es manchmal schwierig ist, sich bestimmte Regionen, Wasserarten und Böden vorzustellen. Ich wollte die Collage Look ausprobieren. Ich wollte der Animation auch „Leben“ verleihen, indem ich eine Audiokomponente, Tiergeräusche und sich bewegende Elemente wie Wolken, Pflanzen oder Vögel im Hintergrund hinzufügte. Ich habe mit Ebenen gearbeitet. Wenn sich also der Betrachtungswinkel änderte, konnten die Leute alle Ebenen sehen, und das sorgt für eine interessante Komponente. Für die Tieranimation wollte ich, dass sie aus bewegten Bildern besteht und eine weiße Outline hinzufügt, die auch in der App enthalten ist und eine neue Ästhetik verleiht und das Tier etwas besser vom Hintergrund abhebt.

Schilder

Schilder funktionieren, indem sie mit der Artivive-App gescannt werden und automatisch Animationen des auf dem Schild gezeigten Tieres starten. Das Schild enthält Informationen über das Tier, einige davon nicht in der App und andere etwas allgemeiner. Wie bei Schilder im Park habe ich ein ähnliches Layout angelegt und oben rechts steht der Kontinent, von dem das Tier stammt.

gotovi.pdf PDF gotovi.pdf

WhatsApp Bild 2024-07-21 um 12.01.11_18b75a94.jpgWhatsApp Bild 2024-07-21 um 12.01.11_18b75a94.jpg
IMG_1027.JPGIMG_1027.JPG

Ein Projekt von

Fachgruppe

Mediendesign

Art des Projekts

Keine Angabe

Zugehöriger Workspace

Interaction / Information Design (KD4)

Entstehungszeitraum

Sommersemester 2024