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

Bandgeschichten - Die Kompaktkassette

Bandgeschichten - Die Kompaktkassette

1| KURZBESCHREIBUNG

Die Musikkassette war über Jahrzehnte hinweg ein fester Bestandteil des Alltags und hat die Musikkultur nachhaltig geprägt. Heute ist sie weitgehend aus dem öffentlichen Bewusstsein verschwunden. Dieses Projekt möchte die Kassette wieder ins Gedächtnis rufen und ihre Bedeutung auf moderne Weise vermitteln. 

Ein interaktives Plakat lädt dazu ein, die Welt der Kassette neu zu entdecken. Besucher können das Plakat mit einem Tablet einscannen und so eine AR-Anwendung starten, die mit Adobe Aero realisiert wurde. Durch Animationen, 3D-Modelle und multimediale Inhalte wird der Aufbau der Kassette anschaulich erklärt und ihre Geschichte lebendig gemacht. Die Gestaltung greift typische Farben und Formen der 70er, 80er und 90er Jahre auf und verbindet sie mit heutigen digitalen Möglichkeiten.

2| FILMISCHE DOKUMENTATION

3| BILDER DER UMSETZUNG

_DSC3947.jpg_DSC3947.jpg
_DSC4131.jpg_DSC4131.jpg
_DSC4178.jpg_DSC4178.jpg
_DSC4168.jpg_DSC4168.jpg
_DSC3935.jpg_DSC3935.jpg
Bild_Aero2.jpgBild_Aero2.jpg
Bild_Aero.jpgBild_Aero.jpg
IMG_7621.jpgIMG_7621.jpg

3| PITCH DECK

Pitch Deck_Kassette.pdf PDF Pitch Deck_Kassette.pdf

4| USERJOURNEY / USERFLOW

KD6 - Copy of User Flow.jpgKD6 - Copy of User Flow.jpg

5| DESIGNPROZESS

5.1| Themensammlung

KD6 - Themen Sammlung Interaction.jpgKD6 - Themen Sammlung Interaction.jpg

5.2| Little Bits

Im Rahmen eines Uni-Projekts habe ich mit LittleBits gearbeitet. Ich habe verschiedene Module wie Filter, Lautsprecher und Steuerelemente miteinander verbunden und ausprobiert, wie sich durch unterschiedliche Kombinationen Klänge verändern lassen. Besonders interessant war der Umgang mit den kleinen Schiebereglern, über die man in Echtzeit Tonhöhe, Lautstärke oder Klangfarbe anpassen konnte. Schon kleine Veränderungen an diesen Reglern führten zu hörbar anderen Klängen. Das Experimentieren war sehr spaßig und hat einen praktischen Einblick in die Grundlagen der Soundgestaltung gegeben.

IMG_7164.jpegIMG_7164.jpeg

5.3| What, How, Why

KD6 - Why How What.jpgKD6 - Why How What.jpg

5.4| Designansatz

Mein erster Designansatz ist die Entwicklung eines interaktiven Buches, das sich mit dem Thema Kompaktkassette beschäftigt. Schon das Cover soll eine besondere Funktion haben. Es ist so gestaltet, dass es an eine Kassettenhülle erinnert. Um das Buch öffnen zu können, muss man diese Hülle zuerst entfernen, ähnlich wie bei einer echten Kassette.

Das Buch behandelt verschiedene Themen wie die Frage, was eine Kassette eigentlich ist, wie sie aufgebaut ist und funktioniert, welche kulturelle Bedeutung sie hatte und welche persönlichen Erlebnisse Menschen damit verbinden. Auch Interviews und die heutige Relevanz der Kassette spielen eine Rolle.

In den einzelnen Kapiteln sind unterschiedliche interaktive Elemente vorgesehen. Dazu gehören zum Beispiel 3D-Animationen, aufklappbare Seiten, Scan-Möglichkeiten, abspielbare Musik und weitere  Inhalte.

KD6 - Inhalt-3.jpgKD6 - Inhalt-3.jpg

5.5| Moodboard

Mein Moodboard soll stark mit der Zeit der Kassette verbunden sein, also mit den 70er-, 80er- und 90er-Jahren. Dafür finde ich Farbtöne wie Blau, Orange und Rot passend, da sie gut das Lebensgefühl und die Ästhetik dieser Jahrzehnte widerspiegeln. Diese Farben sollen in Form von Linien eingesetzt werden, die an das Magnetband der Kassette erinnern und so eine visuelle Verbindung zum Thema herstellen.

KD6 - Moodboard-2.jpgKD6 - Moodboard-2.jpg

5.6| Recherche

KD6 - Aufbau.jpgKD6 - Aufbau.jpg
KD6 - Recherche.jpgKD6 - Recherche.jpg
Bildschirmfoto 2025-07-06 um 22.47.51.pngBildschirmfoto 2025-07-06 um 22.47.51.png
Bildschirmfoto 2025-07-06 um 22.48.00.pngBildschirmfoto 2025-07-06 um 22.48.00.png
Bildschirmfoto 2025-07-06 um 22.48.11.pngBildschirmfoto 2025-07-06 um 22.48.11.png

5.7| Umsetzungsvarianten

Die erste Idee war, den Inhalt als Buch umzusetzen. Nach den ersten Layouts wurde aber schnell klar, dass es dafür etwas zu wenig Material war. Statt dickerem Papier habe Ich mich dann für ein ausklappbares Plakat entschieden. Hierfür musste ich jedoch erst Designvarianten des Plakates erstellen.

Bandgeschichten_Variante1.pdf PDF Bandgeschichten_Variante1.pdf

5.8| Designvarianten

Um einen ersten Eindruck davon zu bekommen, wie mein Plakat aussehen soll, habe ich zunächst mehrere Designvarianten entworfen, die sich an meinem Moodboard orientieren. Anfangs hatte ich die Idee, sogenannte „Blasen“ zu gestalten, in die Bilder eingebaut werden sollten. Dabei habe ich jedoch schnell gemerkt, dass das Gesamtbild dadurch zu überladen wirkt. Deshalb habe ich mich schließlich für eine schlichtere und klarere Variante entschieden.

Designvariante1.jpgDesignvariante1.jpg
Designvariante2.jpgDesignvariante2.jpg
Designvariante3.jpgDesignvariante3.jpg
Designvariante4.jpgDesignvariante4.jpg

5.9| Finales Plakat

Plakat_Kompaktkassette_CMYK.pdf PDF Plakat_Kompaktkassette_CMYK.pdf

5.10| Animationen

Um das Plakat interaktiver zu gestalten, plane ich mehrere 3D-Animationen. Eine davon ist ein 3D-Modell, das den Aufbau einer Kompaktkassette zeigt. Zur Erstellung nutze ich Blender, und für die Einbindung in die interaktive Darstellung kommt Adobe Aero zum Einsatz.

5.10.1| Blender Model

Bildschirmfoto 2025-06-02 um 02.19.28.pngBildschirmfoto 2025-06-02 um 02.19.28.png
Bildschirmfoto 2025-06-02 um 02.19.18.pngBildschirmfoto 2025-06-02 um 02.19.18.png
Bildschirmfoto 2025-06-02 um 02.19.39.pngBildschirmfoto 2025-06-02 um 02.19.39.png

Für das 3D-Modell der Kompaktkassette habe ich zunächst die vollständige Kassette in Blender erstellt. Anschließend habe ich die einzelnen Bestandteile auseinandergezogen, damit sie in Aero auf dem Tablet besser betrachtet und klarer erkannt werden können. Ursprünglich hatte ich beide Gehäuseseiten modelliert. Beim Test in Aero stellte ich jedoch fest, dass eine der Gehäuseseiten beim Betrachten der Einzelteile störte. Daher habe ich im finalen Modell auf eines der Gehäuseteile verzichtet. In Aero habe ich dann die Einzelteile beschriftet.

Bildschirmfoto 2025-07-06 um 18.38.32.pngBildschirmfoto 2025-07-06 um 18.38.32.png
Bildschirmfoto 2025-07-06 um 18.38.53.pngBildschirmfoto 2025-07-06 um 18.38.53.png
Bildschirmfoto 2025-07-06 um 18.43.56.pngBildschirmfoto 2025-07-06 um 18.43.56.png
Bildschirmfoto 2025-07-06 um 19.11.28.pngBildschirmfoto 2025-07-06 um 19.11.28.png

5.10.2| KI Animationen

Für zwei Animationen auf dem Plakat wollte ich Bilder zum Leben erwecken. Dafür habe ich ein Bild des Erfinders der Kassette und ein Bild der Band Queen verwendet. Aus den erstellten Videos habe ich anschließend GIFs erstellt. In Photoshop habe ich jedem einzelnen Frame einen weißen Hintergrund hinzugefügt, damit die Animationen optisch zum Plakat passen. Das war mir wichtig, da alle Bilder auf dem Plakat eine weiße Umrandung haben.

Bildschirmfoto 2025-07-06 um 22.20.50.pngBildschirmfoto 2025-07-06 um 22.20.50.png

5.11| Finales Aero Dokument

Für das Plakat habe ich zu jedem einzelnen Bild eigene Animationen erstellt. Dabei gibt es zum einen mehrere kleinere Animationen, bei denen sich Elemente bewegen oder drehen. Zusätzlich habe ich drei größere Animationen umgesetzt.

Für diese habe ich mithilfe von KI unter anderem Personen wie den Erfinder der Kassette oder die Band Queen zum Leben erweckt. Bei der Animation zu Queen wird sogar Musik abgespielt, wenn man sie antippt. Eine weitere große Animation zeigt den Aufbau der Kompaktkassette. Auch diese erscheint, sobald man den entsprechenden Trigger auslöst.

Bild_Aero2.jpgBild_Aero2.jpg
Bild_Aero.jpgBild_Aero.jpg

5.12| Projektbeschreibung

Vorlage Projektbeschreibungen.pdf PDF Vorlage Projektbeschreibungen.pdf

6| LINK ZU PROTOTYPEN

Hier ist der Link zu meinem Aero Projekt:

https://adobeaero.app.link/9CM1zBbolVb

------------------

0| LINIENGRAFIK

Liniengrafik1.jpgLiniengrafik1.jpg
Liniengrafik2.jpgLiniengrafik2.jpg
Liniengrafik5.jpgLiniengrafik5.jpg
Liniengrafik4.jpgLiniengrafik4.jpg

Ein Projekt von

Fachgruppe

Kommunikationsdesign

Art des Projekts

Keine Angabe

Zugehöriger Workspace

Designprojekt 3: Interaction / Information Design

Entstehungszeitraum

Sommersemester 2025