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

Bagstory - Die interaktive Tasche

Jasmin Nicklas

Bagstory - die interaktive Tasche

Die interaktive Tasche erklärt ihren Herstellungsprozess selbst. Sie ist eine kleine interaktive Installation und kann z.B. für Ausstellungen über Nachhaltigkeit verwendet werden. Mithilfe von bunten LED Animationen lädt sie Besucher dazu ein, symbolische Gegenstände in sie hineinzulegen. Für jeden Gegenstand wird eine eigene Animation gestartet, welche über die wichtigsten Schritte der Herstellung sowie ökonomische, ökologische und soziale Probleme informiert. Nutzer können so durch Eigeninitiative die Informationen selbst erkunden und dabei in ihrem eigenen, individuellen Tempo entscheiden, worüber sie erfahren möchten.

Präsentationsvideo

Galerie

Titel.jpgTitel.jpg
Aktion.jpgAktion.jpg
Animation.jpgAnimation.jpg
Technik.jpgTechnik.jpg
Test.jpgTest.jpg
RFID Reader.jpgRFID Reader.jpg
Technik.jpgTechnik.jpg
Technick alles.jpgTechnick alles.jpg
Box offen.jpgBox offen.jpg
Lasercutter.jpgLasercutter.jpg

Userflow

Userflow.jpgUserflow.jpg

Links

Arbeitsaufteilung:

- RFID programmieren - Nina

- LED Wire programmieren - Jasmin

- Box Bauen - Jasmin

- Sockel erstellen + 3D drucken - Nina? (entfällt)

- Tablet-Animationen - Nina

- Präsentationsvideo - Jasmin

Box Bauen

Da der Lasercutter bei uns leider kaputt ist, ging ich ins FabLab der FAU Erlangen, um die box zu cutten. Dort bemerkte ich die erste Hürde: wenn ich die SVG Datei in VisiCut öffne, ist das Projekt genau so groß wie die äußersten Linien. Das Problem: Ich hatte die Datei in A2 angelegt und Rand gelassen. Folglich wäre die Box viel zu groß geworden. Vor Ort musste ich so abschätzen, um wie viele cm ich das Bild verkleinern muss, um die ursprüngliche Größe zu erhalten. Aufgrund dessen waren die Ausschnitte aus den Brettchen jeweils leicht unterschiedlich groß, jedoch konnte diesem Problem mit einer Säge und Schleifpapier geholfen werden. Mein Learning für nächstes Mal: eine Linie in der vollen Breite einzeichnen, damit die Datei ihre ursprüngliche Größe behält. Das Verleimen hat gut funktioniert.

Screenshot_2025-01-18-17-47-35-71_92460851df6f172a4592fca41cc2d2e6.jpgScreenshot_2025-01-18-17-47-35-71_92460851df6f172a4592fca41cc2d2e6.jpg
Screenshot_2025-01-18-17-47-16-12_92460851df6f172a4592fca41cc2d2e6.jpgScreenshot_2025-01-18-17-47-16-12_92460851df6f172a4592fca41cc2d2e6.jpg
IMG20250118124708.jpgIMG20250118124708.jpg
IMG20250118124703.jpgIMG20250118124703.jpg

Storyboard für Präsentationsvideo

Bei diesem Storyboard handelt es sich lediglich um einen ersten Entwurf. Es ist möglich, dass sich noch einzelnen Szenen oder Einstellungen ändern, bzw. spontane Ideen hinzugefügt werden.

IMG_20250113_125625.jpgIMG_20250113_125625.jpg

Box für Lasercutter Entwurf

screenshot_plan.pngscreenshot_plan.png

LED Animationen

Endgültiger Code mit den 2 Animationen, bereit zum Einfügen zu dem RFID Code:

Screenshot 2025-01-20 100501.pngScreenshot 2025-01-20 100501.png
Screenshot 2025-01-20 100546.pngScreenshot 2025-01-20 100546.png

Beispielanimationen:

Screenshot 2024-12-22 155300.pngScreenshot 2024-12-22 155300.png
Screenshot 2024-12-22 155225.pngScreenshot 2024-12-22 155225.png
Screenshot 2024-12-22 155332.pngScreenshot 2024-12-22 155332.png
Screenshot 2024-12-22 155404.pngScreenshot 2024-12-22 155404.png

Risiken und Unklarheiten:

- Wie wird der RFID Chip programmiert?

- Wird die Tasche beleuchtet, und wenn ja, wie?

- wie können wir einen LED Stripe anschließen, sodass er sich über Code steuern lässt?

16.12 - Pitchdecks aktualisiert

Screenshot 2024-12-16 145839.pngScreenshot 2024-12-16 145839.png
Screenshot 2024-12-16 145804.pngScreenshot 2024-12-16 145804.png
Screenshot 2024-12-16 145913.pngScreenshot 2024-12-16 145913.png
Screenshot 2024-12-16 150037.pngScreenshot 2024-12-16 150037.png
Screenshot 2024-12-16 150014.pngScreenshot 2024-12-16 150014.png
Screenshot 2024-12-16 145944.pngScreenshot 2024-12-16 145944.png
Screenshot 2024-12-16 150059.pngScreenshot 2024-12-16 150059.png
Screenshot 2024-12-16 150134.pngScreenshot 2024-12-16 150134.png

09.12 - Animationen

09.12 - Variationen...

Traurig darüber, dass es mit den Acrylglasplatten nicht klappt, gebe ich dennoch nicht auf zu versuchen, LEDs auf eine andere Weise in unser Taschenprojekt mit einzubinden.

Idee 1: 

LEDs als Zeichen, dass die Tasche durch das Einlegen des Objekts „aktiviert“ wurde. Sobald das Objekt erkannt wurde, leuchten die LEDs auf.

Var 1: EL Wires (wir haben lange gesucht, aber keine im Lab gefunden)

Var 2: LED Streifen am Rand der Tasche entlang.

Var 3: Diffuses Licht durch LEDs in der Tasche, ohne den Stoff zu berühren - die ganze Tasche leuchtet auf. Funktioniert bei weißer Tasche besser als bei schwarzer

Screenshot 2024-12-13 113235.pngScreenshot 2024-12-13 113235.png

IMG20241213103743.jpgIMG20241213103743.jpg
IMG20241213103818.jpgIMG20241213103818.jpg
IMG20241213103943.jpgIMG20241213103943.jpg
IMG20241213104004.jpgIMG20241213104004.jpg

IMG20241213104257.jpgIMG20241213104257.jpg
IMG20241213104248.jpgIMG20241213104248.jpg
IMG20241213104501.jpgIMG20241213104501.jpg
IMG20241213104423.jpgIMG20241213104423.jpg

Idee 2:

Eine LED Matrix zeigt den Zustand des eingefügten Objekts an und dient als Bedienungshilfe.

Problem: helle, leuchtende Matrix konkurriert mit der Animation auf dem Tablet und droht, dieser die Aufmerksamkeit des Nutzers zu stehlen.

Screenshot 2024-12-13 113302.pngScreenshot 2024-12-13 113302.png

IMG20241211160257.jpgIMG20241211160257.jpg
IMG20241211155706.jpgIMG20241211155706.jpg

08.12 - Test mit Acrylglasscheiben

Um zu testen, ob unsere Idee mit den Acrylglasplatten überhaupt funktioniert, stellten wir aus zwei Glasresten mit dem Lasercutter zwei kleine, simple Prototypen her und ich testete sie zuhause mit einem LED Stripe.

Wenn die Platten einzeln beleuchtet werden, funktioniert es sehr gut und das Ergebnis ist sehr ästhetisch:

IMG20241208154636.jpgIMG20241208154636.jpg
IMG20241208155011.jpgIMG20241208155011.jpg

Sobald allerdings die Platten hintereinander stehen, nimmt die vordere, unbeleuchtete Platte das Licht der hinteren, beleuchteten Platte auf und somit wird die hintere Platte so gut wie unlesbar. Bei unterschiedlichen Farben ist die Unleserlichkeit zwar unterschiedlich, aber dennoch haben wir keine Farbe entdeckt, bei der die Platte noch gut lesbar wäre.

IMG20241208154951.jpgIMG20241208154951.jpg
IMG20241208154908.jpgIMG20241208154908.jpg
IMG20241208155047.jpgIMG20241208155047.jpg

Dann kam mir die Idee, das Licht einfach möglichst nur in eine Richtung zu leiten. Ich habe eine kleine „Rinne“ aus Papier gebaut, in der ich den LED Streifen zusammen mit der Platte platzierte. So wurde die vordere Platte nicht direkt von LED Streifen mit angeleuchtet. Trotzdem war das Ergebnis ernüchternd, da die eingravierten Muster nicht durchsichtig sind:

IMG20241208160723.jpgIMG20241208160723.jpg

FAZIT:

Der einige Weg, wie die Platten lesbar bleiben wäre, sie nebeneinander zu platzieren. Dies ist aufgrund des beschränkten Platzes in der Tasche leider nicht möglich. Aus diesem Grund werden wir wahrscheinlich auf die Variante mit dem Tablet zurückgreifen müssen, an der bisher meine Teamkollegin Nina gearbeitet hat. Vielleicht findet sich ja ein eleganter Weg, wie wir das Thema LEDs trotzdem noch mit einbauen können!

02.12 - Storyboard

Screenshot 2024-12-03 111224.pngScreenshot 2024-12-03 111224.png
Screenshot 2024-12-03 111202.pngScreenshot 2024-12-03 111202.png
Screenshot 2024-12-03 111247.pngScreenshot 2024-12-03 111247.png
Screenshot 2024-12-03 111309.pngScreenshot 2024-12-03 111309.png
Screenshot 2024-12-03 111351.pngScreenshot 2024-12-03 111351.png
Screenshot 2024-12-03 111327.pngScreenshot 2024-12-03 111327.png
Screenshot 2024-12-03 111412.pngScreenshot 2024-12-03 111412.png
Screenshot 2024-12-03 111431.pngScreenshot 2024-12-03 111431.png

25.11 - Pitch Decks

Screenshot 2024-12-03 111834.pngScreenshot 2024-12-03 111834.png
Screenshot 2024-12-03 111906.pngScreenshot 2024-12-03 111906.png
Screenshot 2024-12-03 111939.pngScreenshot 2024-12-03 111939.png
Screenshot 2024-12-03 112109.pngScreenshot 2024-12-03 112109.png
Screenshot 2024-12-03 112025.pngScreenshot 2024-12-03 112025.png
Screenshot 2024-12-03 112003.pngScreenshot 2024-12-03 112003.png
Screenshot 2024-12-03 112126.pngScreenshot 2024-12-03 112126.png
Screenshot 2024-12-03 112148.pngScreenshot 2024-12-03 112148.png

18.11++ - Prototyping

Schwerpunkt Idee mit Acrylglastafeln

Digitaler Prototyp erstellt mit Hilfe der Photoshop KI

Tasche Modell2.jpgTasche Modell2.jpg
Tasche Modell.jpgTasche Modell.jpg

Konkrete Skizzen

Screenshot 2024-11-25 164152.pngScreenshot 2024-11-25 164152.png
Screenshot 2024-11-25 164128.pngScreenshot 2024-11-25 164128.png
Screenshot 2024-11-25 164054.pngScreenshot 2024-11-25 164054.png

Erste Designversuch für eine Acrylglasplatte

Frame 2.pngFrame 2.png
Frame 1.pngFrame 1.png
Frame 3.pngFrame 3.png

11.11 - Konkretisierung einer Idee

Screenshot 2024-11-18 094518.pngScreenshot 2024-11-18 094518.png

Screenshot 2024-11-12 112800.pngScreenshot 2024-11-12 112800.png
Screenshot 2024-11-12 112728.pngScreenshot 2024-11-12 112728.png
Screenshot 2024-11-12 112833.pngScreenshot 2024-11-12 112833.png
Screenshot 2024-11-12 113202.pngScreenshot 2024-11-12 113202.png

Erste Recherchen

Screenshot 2024-11-12 112909.pngScreenshot 2024-11-12 112909.png

04.11 - Ideensammlung & Inspiration

Screenshot 2024-10-29 103740.pngScreenshot 2024-10-29 103740.png

Screenshot 2024-11-11 142932.pngScreenshot 2024-11-11 142932.png

04. 28.10 - LED Matrix

Gruppenarbeit mit Aleksandra

Pilz und Herz als Bitmap

WhatsApp Bild 2024-10-30 um 22.02.35_9b3bb5bb.jpgWhatsApp Bild 2024-10-30 um 22.02.35_9b3bb5bb.jpg
WhatsApp Bild 2024-10-30 um 15.17.18_d9fa57bc.jpgWhatsApp Bild 2024-10-30 um 15.17.18_d9fa57bc.jpg
WhatsApp Bild 2024-10-28 um 16.59.05_10824e80.jpgWhatsApp Bild 2024-10-28 um 16.59.05_10824e80.jpg
WhatsApp Bild 2024-10-30 um 22.02.33_1c7f4f99.jpgWhatsApp Bild 2024-10-30 um 22.02.33_1c7f4f99.jpg

Hey, what´s up? Animation

Ein Stück Papier liegt über den LEDs, damit man die Schrift besser erkennen kann.

Screenshot 2024-10-30 151455.pngScreenshot 2024-10-30 151455.png

03. 21.10 - Lichtsensor

Gruppenarbeit mit Aleksandra

Der Mini- Kühlschrank

Die Kühlschranktür offen stehen zu lassen und das Kühlschranklicht dauerhaft brennen zu lassen verbraucht unnötig Strom. Um zu überprüfen, dass das nicht passiert, nutzen wir eine LED Leuchte und einen Lichtsensor.

Ist die Kühlschranktür geschlossen, ist alles gut. Die LED leuchtet blau.

Ist die Kühlschranktür offen, leuchtet die LED rot.

Ist Licht im Kühlschrank an (simuliert durch die Taschenlampenfunktion meines Fitnesstrackers), so leuchtet die LED gelb.

code.pngcode.png

02. 14.10 - Neopixel Ring

Gruppenarbeit mit Aleksandra

Variante 1: RGB Verlauf und Blinken

Screenshot 2024-10-14 182925_3.pngScreenshot 2024-10-14 182925_3.png
Screenshot 2024-10-14 183005_4.pngScreenshot 2024-10-14 183005_4.png
Screenshot 2024-10-14 183037_5.pngScreenshot 2024-10-14 183037_5.png
Screenshot 2024-10-14 182840_2.pngScreenshot 2024-10-14 182840_2.png
Screenshot 2024-10-14 182750_1.pngScreenshot 2024-10-14 182750_1.png

Variante 2: Radiale Animation mit Helligkeitsverlauf

Detaillierte Beschreibung siehe Projekt von Aleksandra

01. 07.10 - Neopixel Simulation

Blinken rot

rot blinken.pngrot blinken.png

Ampel

ampel.pngampel.png

Random color pulse

random pulse.pngrandom pulse.png

Ein Projekt von

Fachgruppe

Kommunikationsdesign

Art des Projekts

Keine Angabe

Zugehöriger Workspace

Designprojekt 1: Interaction / Information Design (Gruppe 1/A)

Entstehungszeitraum

Wintersemester 2024 / 2025