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

The layers of music

01 | FINALER TITEL

The layers of music

02 | REPRÄSENTATIVES BILD DES PROJEKTS ALS HEADER

Thumbnail.pngThumbnail.png

03 | KURZBESCHREIBUNG / ABSTRACT

Dieses Projekt sensibilisiert für die einzelnen Klangschichten eines Musikstücks. Ziel ist es, hörbar und sichtbar zu machen, wie komplex der Aufbau eines Liedes tatsächlich ist. Oft nehmen wir Musik nur als Gesamtklang wahr „The layers of music“ zeigt, woraus dieser Klang eigentlich besteht.

Dazu wurden drei Bücher aus transparenten Acrylplatten gestaltet, jeweils stellvertretend für ein Genre: Pop (Billie Jean), Rap (Lose Yourself) und Jazz (So What). Jede Seite stellt eine einzelne Tonspur bzw. ein Instrument dar, radial angeordnet, gelasert und farbig ausgespachtelt.

Überlagert man die Seiten, entsteht ein visuelles Geflecht aus Klangspuren. Gleichzeitig erkennt eine Webcam per ARUCO-Marker, welche Seiten sichtbar sind, und spielt entsprechend die passenden Instrumente ab.

So lässt sich das Lied interaktiv Schicht für Schicht aufbauen und erleben. Sichtbares und Hörbares greifen ineinander und machen die Komplexität der Musik unmittelbar erfahrbar.

04 | FILMISCHE DOKUMENTATION DES PROJEKTS

05 | BILDER DER UMSETZUNG / ANWENDUNG / AUSSTELLUNG

Umsetzung / Produktion

IMG_1707.JPGIMG_1707.JPG
IMG_1749.JPGIMG_1749.JPG
Bildschirmfoto 2025-07-27 um 17.57.56.pngBildschirmfoto 2025-07-27 um 17.57.56.png
IMG_1782.JPGIMG_1782.JPG
IMG_1829.JPGIMG_1829.JPG
IMG_1835.JPGIMG_1835.JPG
IMG_1874.JPGIMG_1874.JPG
Bildschirmfoto 2025-07-27 um 18.04.03.pngBildschirmfoto 2025-07-27 um 18.04.03.png
IMG_1930.JPGIMG_1930.JPG

Ausstellung

IMG_1972-2.jpgIMG_1972-2.jpg
IMG_1977-2.jpgIMG_1977-2.jpg
IMG_1975-2.jpgIMG_1975-2.jpg

Finales Objekt

klein.pngklein.png
klein2.pngklein2.png
klein3.pngklein3.png
klein4.pngklein4.png
klein6.pngklein6.png
klein5.pngklein5.png
klein7.pngklein7.png
klein8.pngklein8.png
klein9.pngklein9.png
klein10.pngklein10.png
klein11.pngklein11.png
klein12.pngklein12.png
klein14.pngklein14.png
klein13.pngklein13.png
klein15.pngklein15.png
klein16.pngklein16.png
klein18.pngklein18.png
klein17.pngklein17.png
klein19.pngklein19.png
klein21.pngklein21.png
klein20.pngklein20.png

06 | PITCH DECK

Pitchdeck_final_Endpräse.pdf PDF Pitchdeck_final_Endpräse.pdf

07 | USERJOURNEY / USERFLOW

Vereinfachter Userflow.jpgVereinfachter Userflow.jpg

08 | DESIGNPROZESS

Moodboards

Rauschen.jpgRauschen.jpg
Typo.jpgTypo.jpg
Comic.jpgComic.jpg
Abstrakt.jpgAbstrakt.jpg

Von den vier Moodboards sind drei kraftvoll und expressiv gestaltet, während das erste eine deutlich reduziertere visuelle Sprache spricht. Für dieses hatte ich bereits eine konkretere Vorstellung, jedoch fehlten passende Visuals, um diese vollständig umzusetzen.

Zentrales Anliegen war es, durch die Überlagerung der Gestaltungselemente am Ende ein kohärentes Gesamtbild zu schaffen, eines das nicht nur formal überzeugt, sondern zugleich Informationen über die einzelnen Klangschichten transportiert und damit Inhalt und Form eng miteinander verknüpft.

Designvarianten

Bildschirmfoto 2025-07-24 um 23.54.37.pngBildschirmfoto 2025-07-24 um 23.54.37.png
Bildschirmfoto 2025-07-24 um 23.54.53.pngBildschirmfoto 2025-07-24 um 23.54.53.png
Bildschirmfoto 2025-07-24 um 23.55.09.pngBildschirmfoto 2025-07-24 um 23.55.09.png
Bildschirmfoto 2025-07-24 um 23.55.34.pngBildschirmfoto 2025-07-24 um 23.55.34.png
Bildschirmfoto 2025-07-24 um 23.55.45.pngBildschirmfoto 2025-07-24 um 23.55.45.png
Bildschirmfoto 2025-07-24 um 23.56.08.pngBildschirmfoto 2025-07-24 um 23.56.08.png
Bildschirmfoto 2025-07-24 um 23.56.23.pngBildschirmfoto 2025-07-24 um 23.56.23.png
Bildschirmfoto 2025-07-24 um 23.58.24.pngBildschirmfoto 2025-07-24 um 23.58.24.png
Bildschirmfoto 2025-07-25 um 00.02.18.pngBildschirmfoto 2025-07-25 um 00.02.18.png
Bildschirmfoto 2025-07-25 um 00.02.46.pngBildschirmfoto 2025-07-25 um 00.02.46.png
Bildschirmfoto 2025-07-25 um 00.03.05.pngBildschirmfoto 2025-07-25 um 00.03.05.png

Finales Design

Bildschirmfoto 2025-07-25 um 00.00.21.pngBildschirmfoto 2025-07-25 um 00.00.21.png
Bildschirmfoto 2025-07-25 um 00.03.43.pngBildschirmfoto 2025-07-25 um 00.03.43.png
Bildschirmfoto 2025-07-25 um 00.05.35.pngBildschirmfoto 2025-07-25 um 00.05.35.png

09 | LINKS ZU QUELLCODE UND PROTOTYPEN

10 | RESTLICHE DOKUMENTATION WÄHREND DES SEMESTERS

Themensammlung

KD6_Interaction - Frame 1.jpgKD6_Interaction - Frame 1.jpg

Links:
https://www.instagram.com/p/DHBaAMfRxDc/?hl=de
https://www.instagram.com/reel/DGminGmRIIq/?hl=de
https://www.instagram.com/p/DGjngMQyDDW/?hl=de

Macropad Synthplug Drone (DIY)

Die MacroPad SynthPlug Drone verfügt über 12 Frequenzen, die miteinander interagieren. Diese lassen sich durch Scatter, Filter, Volume und Root modifizieren und ergeben zusammen einen vielschichtigen Klang. Der erzeugte Sound wirkt atmosphärisch und kann, wenn er in einem großen Raum abgespielt wird, die gesamte Raumstimmung unmittelbar beeinflussen.

IMG_6881.JPGIMG_6881.JPG
Bildschirmfoto 2025-03-26 um 11.36.30.pngBildschirmfoto 2025-03-26 um 11.36.30.png
IMG_6887.jpgIMG_6887.jpg

Modulare Projektskizzen

1_Runde.jpg1_Runde.jpg

Überthema: Gehörlosigkeit
Links zu Projekten:
https://www.thepowerofthearts.de/4-0-eine-audiovisuelle-installation-fuer-taube-und-hoerende/?utm_source=chatgpt.com

https://www.focus.de/panorama/welt/not-impossible-mit-dieser-high-tech-weste-koennen-gehoerlose-musik-ganz-neu-erleben_id_199930759.html?utm_source=chatgpt.com

https://sound-shirt.jimdofree.com/

https://teslasuit.io/

Links zu Artikel:
https://www.wissenschaft.de/erde-umwelt/warum-gehoerlose-musik-geniessen-koennen/?utm_source=chatgpt.com

https://www.barrierefrei.bayern.de/barrierefreiheit-verstehen/beispiele-internet/musik-gebaerdensprache/?utm_source=chatgpt.com

Überthema: Visualisierung
Links zu Projekten:

https://de.wikipedia.org/wiki/Klangwelle_Bad_Neuenahr-Ahrweiler?utm_source=chatgpt.com

https://www.dieweltdesklangs.de/kymat-wasser-klang-bilder/?utm_source=chatgpt.com

https://creatability.withgoogle.com/seeing-music/

Überthema: Von Bewegung zu Musik
Links zu Projekten:
https://motioncomposer.de/en/start/

https://www.youtube.com/watch?v=CvyVQqCO8pY

https://www.youtube.com/watch?v=YxdlYFCp5Ic

https://www.youtube.com/watch?v=AN3CM7WBmBA

Überthema: Daten zu Musik
Links zu Artikel:
https://www.diepresse.com/6216531/es-wird-immer-mehr-musik-gehoert-und-immer-mehr-genres?utm_source=chatgpt.com

https://ifpi.at/globale-studie-wir-hoeren-207-stunden-musik-pro-woche/?utm_source=chatgpt.com

https://www.welt.de/kultur/pop/article130632400/Musik-macht-reich-und-beruehmt.html?utm_source=chatgpt.com

Überthema: Die Entwicklung des Menschlichen Gehörs
Links zu Artikel:
https://www.hno-aerzte-im-netz.de/unsere-sinne/hoeren/entwicklung-des-gehoers.html?utm_source=chatgpt.com

https://www.dr-gumpert.de/html/altersschwerhoerigkeit.html?utm_source=chatgpt.com

Interessante Projekte:
https://www.instagram.com/p/DHBaAMfRxDc/?hl=de

https://www.instagram.com/p/DGjngMQyDDW/?hl=de

Weitere Recherche

2_Runde.jpg2_Runde.jpg

Why How What

Alltagsinstalation_V1.jpgAlltagsinstalation_V1.jpg
Musik-deiner-Stimme_V2.jpgMusik-deiner-Stimme_V2.jpg
Musik-deiner-Bewegungen_V3.jpgMusik-deiner-Bewegungen_V3.jpg
Layers-of-music_V4.jpgLayers-of-music_V4.jpg

Recherche 2. Diamond

Mediale und Umsetzungsvarianten Recherche

1.1Medien_Umsetzungsvarianten.jpg1.1Medien_Umsetzungsvarianten.jpg
1.3Medien_Umsetzungsvarianten.jpg1.3Medien_Umsetzungsvarianten.jpg
1.2Medien_Umsetzungsvarianten.jpg1.2Medien_Umsetzungsvarianten.jpg
1Medien_Umsetzungsvarianten.jpg1Medien_Umsetzungsvarianten.jpg

Inhaltliche Recherche

2.1Inhaltliche_Recherche.jpg2.1Inhaltliche_Recherche.jpg
2.2Inhaltliche_Recherche.jpg2.2Inhaltliche_Recherche.jpg
2.3Inhaltliche_Recherche.jpg2.3Inhaltliche_Recherche.jpg
2Inhaltliche_Recherche.jpg2Inhaltliche_Recherche.jpg

Medien.jpgMedien.jpg
Genre_Lieder.jpgGenre_Lieder.jpg

Bildschirmfoto 2025-06-16 um 00.39.36.pngBildschirmfoto 2025-06-16 um 00.39.36.png
Bildschirmfoto 2025-06-16 um 10.43.48.pngBildschirmfoto 2025-06-16 um 10.43.48.png
Bildschirmfoto 2025-06-16 um 10.43.32.pngBildschirmfoto 2025-06-16 um 10.43.32.png

Prototypen

Bildschirmfoto 2025-05-12 um 09.21.07.pngBildschirmfoto 2025-05-12 um 09.21.07.png
Bildschirmfoto 2025-05-12 um 09.02.35.pngBildschirmfoto 2025-05-12 um 09.02.35.png

Moodboards

Rauschen.jpgRauschen.jpg
Comic.jpgComic.jpg
Typo.jpgTypo.jpg
Abstrakt.jpgAbstrakt.jpg

Designvarianten

Bildschirmfoto 2025-05-25 um 15.53.48.pngBildschirmfoto 2025-05-25 um 15.53.48.png
Bildschirmfoto 2025-05-25 um 15.53.55.pngBildschirmfoto 2025-05-25 um 15.53.55.png
Bildschirmfoto 2025-05-25 um 16.12.15.pngBildschirmfoto 2025-05-25 um 16.12.15.png
Bildschirmfoto 2025-05-25 um 16.24.49.pngBildschirmfoto 2025-05-25 um 16.24.49.png

Die Wellen sind nun radial angeordnet. Es wird immer der Mittelwert des Ausschlages berechnet und diese sind dann miteinander verbunden. Per Mausklick kann man von einer zackigen auf eine gerundete Darstellung wechseln (die Rundung ist kaum sichtbar, da die Punkte dicht beieinander liegen)

Link zur OpenProcessing File:
https://openprocessing.org/sketch/2658857

Ein weiteres Experiment war, dass sich die beiden Endpunkte des Strichs mit den Endpunkten des nächsten Punktes verbinden, sodass eine Form entsteht. Die einzelnen Linien sind, mit der Shape eines Vierecks verbunden.

Link zur OpenProcessing File:
https://openprocessing.org/sketch/2658942

Bildschirmfoto 2025-05-26 um 01.25.31.pngBildschirmfoto 2025-05-26 um 01.25.31.png
Bildschirmfoto 2025-05-26 um 01.26.56.pngBildschirmfoto 2025-05-26 um 01.26.56.png
Bildschirmfoto 2025-05-26 um 14.25.30.pngBildschirmfoto 2025-05-26 um 14.25.30.png

Bildschirmfoto 2025-06-23 um 09.02.51.pngBildschirmfoto 2025-06-23 um 09.02.51.png

OY_KD6_Interaction - Frame 10.jpgOY_KD6_Interaction - Frame 10.jpg

Testing / Funktion des Codes

In dem Video ist zu sehen, dass ich teste, durch wie viele Acrylplatten die ARUCO ID immer noch erkannt wird. Die ID habe ich mit einem Figma Link verknüpft. Die ID wurde bei einer guten Beleuchtung durch drei Platten erkannt.

Userflow

Vereinfachter Userflow.jpgVereinfachter Userflow.jpg

Bearbeitung Acryl

IMG_1705.JPGIMG_1705.JPG
IMG_1743 Kopie.JPGIMG_1743 Kopie.JPG
IMG_1750 Kopie.JPGIMG_1750 Kopie.JPG
IMG_1746.JPGIMG_1746.JPG
IMG_1761 Kopie.JPGIMG_1761 Kopie.JPG
IMG_1765.JPGIMG_1765.JPG
IMG_1782.JPGIMG_1782.JPG
IMG_1785.JPGIMG_1785.JPG
IMG_1789.JPGIMG_1789.JPG

Ich konnte den Lasercut auf einem 4mm dickem Acryl probieren, bis er danach leider nicht mehr einsatzfähig war.
Ich habe das gravierte Acryl zur hälfte verputzt, damit noch ein direkter Vergleich möglich ist. Neben dem verputzen habe ich bedruckte Folie auf das Acryl geklebt, um zu sehen wie gut es auf dem Acryl hält.

Resultat:
Als die Spachtel Masse noch feucht war, hatte sie noch keine Bläschen, sobald sie getrocknet war, ist die Masse etwas zusammengezogen und es waren kleine Bläschen zu erkennen, möglicherweise muss ich hier zwei mal über die Gravur spachteln.

Der Kleber hat gut gehalten, jedoch habe ich es mit der Menge des Klebers etwas zu gut gemeint und einwenig zu viel Kleber verwendet, was in einem deutlich sichtbaren überschüssigem Rand resultierte.

Zusätzlich habe ich versucht kleine Scharniere in Acryl zu hämmern, jedoch bin ich hierbei leider nicht sehr weit gekommen und muss andre Scharniere oder eine andere Bindetechnik in Erwägung ziehen.

IMG_1835.JPGIMG_1835.JPG
IMG_1824.JPGIMG_1824.JPG
IMG_1836.JPGIMG_1836.JPG
IMG_1830.JPGIMG_1830.JPG
IMG_1854.JPGIMG_1854.JPG
IMG_1855.JPGIMG_1855.JPG
IMG_1859.JPGIMG_1859.JPG
IMG_1857.JPGIMG_1857.JPG

Exponat

Bildschirmfoto 2025-06-30 um 11.07.17.pngBildschirmfoto 2025-06-30 um 11.07.17.png

Das Exponat besteht aus drei Acrylbüchern, einer Webcam, Kopfhörer und einem unter dem Tisch verborgenen Laptop, der die Soundsteuerung übernimmt. Eine begleitende Texttafel erläutert das Projekt sowie die Funktionsweise der Interaktion.

Sonstiges

Liniengrafik

Bildschirmfoto 2025-04-06 um 22.30.48.pngBildschirmfoto 2025-04-06 um 22.30.48.png

Ein Projekt von

Fachgruppe

Kommunikationsdesign

Art des Projekts

Keine Angabe

Zugehöriger Workspace

Designprojekt 3: Interaction / Information Design

Entstehungszeitraum

Sommersemester 2025