Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

CONNECTIONS IN GRIME 07 - Visualisierung spezifischer musikalischer Zusammenhänge in London

CONNECTIONS IN GRIME 07 - Visualisierung spezifischer musikalischer Zusammenhänge in London

Darstellung der Zusammenhänge innerhalb der Londoner Grime Music Scene anhand 20 ausgewählter Mixtapes aus dem Jahr 2007 im Rahmen der Semesterarbeit des Grundlagenkurses Screendesign unter der Leitung von Christophe Stoll.

h2_aufgabe.pngh2_aufgabe.png

Erstellen einer interaktiven Visualisierung einer bestimmten, thematisch zusammenhängenden Datenmenge aus einem festgelegten Zeitraum

h2_grundidee.pngh2_grundidee.png

Grundidee meiner Visualisierung war es, die undurchsichtigen Zusammenhänge der Künstler der Londoner Grime-Musik-Scene zu beleuchten, und anhand 20 ausgewählter Mixtapes (ähnlich wie Musikalben nur independent, also unabhängig von einem Majorlabel, veröffentlicht) des Jahres 2007 nachvollziehbar zu visualisieren.

Dabei wollte ich eine Verbindung zwischen Künstlern, Produzenten, Crews (Zusammenschluss mehrerer Künstler, Produzenten, Djs) und Labels sowie ihrer Lokalisierung innerhalb Londons schaffen und diese möglichst formal ästhetisch, dem Thema entsprechend aufarbeiten.

Die Idee entsand vor allem durch meine tiefe Begeisterung dieser Musik und dem Willen, diese auch anderen, Genrefremden näher zu bringen.

h2_definition.pngh2_definition.png

Grime(Music) ist ein Sub-Genre der urbanen Musik, die zuerst in London, England in den frühen 2000er Jahren aufkam und in erster Linie eine Weiterentwicklung und Verschmelzung von UK Garage, Dancehall und Hip-Hop ist darstellt.

Grime Music verkörpert unkonventionelle Sounds aus komplexen 2Step Breakbeats (Musikrichtungen), die in der Regel um die 140 Beats per Minute haben. Stilistisch bedient sich Grime mehrerer Genres inklusive UK Garage, Dancehall and Hip Hop. Texte und Musik verbinden futuristische, elektronische Elemente mit dunklen, tiefen Bass-Lines. (quelle: http://en.wikipedia.org)

h2_analyse.pngh2_analyse.png

Da ich mir ziemlich schnell sicher war, mit welchem Thema ich mich beschäftigen wollte und es bis dato keine vergleichbaren Projekte gab, habe ich mich erstmal an die Sammlung der Daten gemacht. Dazu habe ich mir zuerst 20 Mixtapes aus dem Jahr 2007 herausgesucht. Entscheidend dabei war für mich, dass ich diese Mixtape in irgendeiner Form selber besaß.

Danach habe ich angefangen die Daten zu den Mixtapes zu sammeln. Sofern sie auf den Mixtapes vermerkt waren, habe ich die Tracklists inklusive gefeaturten Künstlern, sowie Produzenten und den Labels, auf denen sie erschienen sind übernommen. Fehlende Informationen habe ich über Grime Music vertreibende Recordstores bezogen.

Dabei wurde mir schnell klar, dass diese Analyse allein nicht ausreichen wird, um die von mir angestrebten Zusammenhänge klar zu machen. Also habe ich angefangen Hintergrundinformationen zu den Protagonisten zu sammeln. Allen voran deren Herkunft in London.

Nach diesem langen Weg habe ich angefangen die Informationen tabellarisch zu ordnen um ihre Mengen miteinander zu vergleichen und einen ersten Überblick zu bekommen. Hier wurde mir dann ziemlich schnell klar, dass eine Aufbereitung anhand der Karte Londons ziemlich sinnvoll sei.

So erkannte ich Zusammenhänge zwischen den einzelnen Protagonisten, die mir vorher verborgen blieben. An diese Stelle entschied ich mich, die Informationen, neben ihrer Zusammenhänge im Bezug auf die Scene, auch im Bezug auf London darzustellen, denn zum Teil ergaben sich Zusammenhänge innerhalb der Scene durch lokale Verbindungen in London.

PROJEKTITEL

Da sich meine Arbeit mit Künstlern des englischsprachigen Raumes befasst, habe ich sie auch englisch tituliert. Durch den Bezug meiner Informationen auf das Jahr 2007, habe ich der sinngemäßen Übersetzung meiner Grundidee ins englische die 07 beigefügt.

h2_visuelle_sprache.pngh2_visuelle_sprache.png

AUFBAU
Im Kopf des Screens befindet sich der Titel der Arbeit. Unterhalb des Titels wird der Screen in zwei Teile gegliedert. Der linke Teil dient der Aufarbeitung der Informationen und ist deshalb wesentlich größer als der Rechte.

Im rechten Teil werden, neben der Navigation am Kopf dieses Teiles, zusätzliche Informationen zum jeweiligen Menüpunkt aufbereitet und weitere themenbezogene Informationen verlinkt.

Die Navigation bietet dem User zusätzlich sechs weitere Möglichkeiten der Informationsstrukturierung.

FARBLEITSYSTEM
Um die einzelnen Parteien in allen Visualisierungs– und Strukturierungsmöglichkeiten für den User eindeutig zu kennzeichnen, wurden ihnen Farben zugeordnet. Gleichzeitig, sollten diese Farben aber auch den Charakter der Musik und das Layout unterstützen. Da Grime eine sehr energetische Musik ist, habe ich mich für strahlende Farben entschieden, die einen starken Kontrast zueinander und zum Hintergrund bilden.

8koMIz2Q.png8koMIz2Q.png

Gelb gesetzte Informationen beziehen sich demnach immer auf Künstler (artist). Sie schreiben einer Information also diese Eigenschaft zu. Ein gelb gekennzeichneter Name bedeuted demnach, dass es sich um einen Künstler handelt.

SCHRIFT
Als Schrift habe ich die Unibody gewählt, weil sie den unkonventionellen Charakteristiken der Grime Music sehr nahe kommt. Für mich verkörpert sie das »ruffe« der Musik und durch ihre Eigenschaften als Pixelschrift gleichzeitig deren elektronischen Einflüsse.

h2_walkthrough.pngh2_walkthrough.png

swbhRNid.pngswbhRNid.png

Startscreen

Auf der Startseite bekommt der User, neben dem Titel der Arbeit, zu erst einen Überblick der zugrunde gelegten Mixtapes durch die Darstellung ihrer Cover. Die Mixtapes sind alle verlinkt und ermöglichen dem User dadurch einen direkten Zugang zu den mixtapespezifische Informationen.

Dieser Hauptinhaltsbereich wird auch in den folgenden Screens der Aufbereitung der Informationen dienen.

Im rechten Bereich findet der User die Navigation, die ihm einen anderen Zugang zu den Informationen ermöglicht. Hier kann er sich zum Beispiel zu erst einen Überblick über die Künstler verschaffen oder schauen, wie die lokale Verteilung der Künstler im Bezug auf die Karte Londons ist.

70MXzCxP.png70MXzCxP.png

Screen nach asuwählen des »Greatest Hits« Mixtapes von Skepta

Hat der User nun ein Mixtape per klicken ausgewählt, so erhält er eine Übersicht der Mitwirkenden am Mixtape im Bezug auf deren Herkunft innerhalb Londons. In der rechten Spalte erfährt er zusätzlich den Namen des Künstlers, der das Mixtape veröffentlicht hat, sowie den Namen des Mixtapes und die Möglichkeit direkt zum Künstler oder zum Mixtape zu springen.

Am Beispiel von Skeptas Mixtape »Greatest Hits« kann man nun die Verteilung der einzelnen am Mixtape beteiligten Artists, Crews, Produzenten und Labels in London sowie deren Menge nachvollziehen. Dies ermöglicht dem User erste Rückschlüsse über die lokalen Zusammenhänge zwischen den einzelnen Parteien zu treffen. So lässt sich zum Beispiel schon hier erkennen, dass die meisten, an »Greatest Hits« Beteiligten aus dem Norden Londons stammen. Aus Tottenham N 17.

Nun hat der User, zusätzlich zur Navigation, die Möglichkeit sich über die entsprechenden Links in der rechten Spalte detailiertere Informationen zum Mixtape »Greatest Hits« oder zum Künstler »Skepta« anzusehen.

Wählt er nun Informationen zu »Greatest Hits«, so werden ihm auf dem folgenden Screen die Verbindungen aller am Mixtape Beteiligten, anhand ihrer Arbeit innerhalb der Scene und der Menge ihrer Arbeit verbildlicht. Die Größe des Namens verdeutlicht hierbei die Menge der geleisteten Arbeit und die Abstände der Namen zueinander, ihre Nähe auf die Scene bezogen. (Zusammenarbeiten, gemeinsame Crews, Labels usw.) Diese ist unabhängig von ihrer Nähe zu einander auf der Karte Londons.

O0tZrxbT.pngO0tZrxbT.png

_ Screen mit der Darstellung der Verbindungen aller am Mixtape Beteiligten, _ _anhand ihrer Arbeit innerhalb der Scene sortiert _

Der User hat aber durch einen entsprechenden Link, »sort connection by map« in der rechten Spalte, gleichzeitig die Möglichkeit, sich die Zusammenhänge anhand der Karte Londons sortieren zu lassen.

hyLV0WQM.pnghyLV0WQM.png

Screen mit der Darstellung der Verbindungen aller am Mixtape Beteiligten, _ _an der Londoner Karte ausgerichtet

Wenn der User nun spezifischere Informationen zu Skepta erhalten will, so muss er nur den dafür vorgesehenen Link in der rechten Spalte klicken. Nun werden im Hauptbereich jegliche Verbindungen Skeptas zu den 20 Mixtapes anhand der Zusammnhänge innerhalb der Scene abgebildet. In der rechten Spalte erhält der User zu dem spezifische Informationen zu Skepta.

56UBN0NA.png56UBN0NA.png

Visualisierung der Verbindungen Skeptas zu den 20 Mixtapes, _ _sortiert anhand der Zusammnhänge innerhalb der Scene

Anhand der Größe des Mixtapes wird die Menge der Arbeiten an dem Mixtape visualisiert und anhand der Farbe die Art der von Skepta für dieses Mixtape geleisteten Arbeitt. Da Skepta sowohl Producer als auch Artist und Labelchef ist, tauchen manche Mixtapes mehrfach auf. Dies ermöglicht neben Rückschlüssen auf Zusammenhänge zwischen den einzelnen Künstlern und Skepta auch Rückschlüsse auf Menge und Art seiner Arbeit an deren Mixtapes.

Sofern der User nun eines der Mixtapes auswählt erhält er zum Einen, Informationen zum ausgewählten Mixtape (Name, Künstler und Label), und zum Anderen, eine Auflistung der Tunes (Lieder) an denen der betrachtete Künstler (Skepta) beteiligt war.

Um sich eine musikalische Vorstellung zu machen, kann er sich den Tune nun mittels eines Lautsprecher-Icons anhören.

Des Weiteren erfährt der User, wer neben dem Künstler in welcher Form an den einzelnen Tunes mitwirkte.

Zdx5Akrn.pngZdx5Akrn.png

Screen nach Auswahl eines Mixtapes an dem Spekta mitwirkte

Auch in diesem Bereich hat der User die Möglichkeit sich die Informationen auf die Karte Londons bezogen darstellen zu lassen.

BfoZwQYO.pngBfoZwQYO.png

Visualisierung der Verbindungen Skeptas zu den 20 Mixtapes anhand der Karte Londons sortiert

Natürlich kann man von jeder Seite auch über einen gleichnamigen Link in der linken Spalte direkt zur Startseite gelangen.

MENÜ

ldn map

Übersicht der Mixtapes im Bezug auf die Karte LondonsÜbersicht der Mixtapes im Bezug auf die Karte Londons
Ansicht nach Auswahl eines MixtapesAnsicht nach Auswahl eines Mixtapes

Beim aktivieren dieses Menüpunktes erhält der User einen Überblick der Mixtapes im Bezug auf die Karte Londons. Dies ermöglicht ihm, jedes Mixtape in London zu lokalisieren.

Ausgehend von dieser Ansicht, kann der User sich nun durch auswählen eines Mixtapes, spezifischere Informationen im Bezug auf die Karte Londons, zu diesem Mixtape abbilden lassen.

Gleichzeitig, kann er ausgehend vom Mixtape und dessen lokaler Verknüpfung, auch Informationen zum jeweiligen Borough (Bezirk), aus dem das Mixtape kommt abrufen. Dort erhält er einen kurzen Steckbrief des Boroughs und eine Auflistung der dort ansässigen Artists (Künstler), Crews, Producers (Produzenten) und Labels.

producers, crews, artists + lables

Ansicht nach Auswahl des Menüpunktes »artists«Ansicht nach Auswahl des Menüpunktes »artists«
Ansicht nach Auswahl des Menüpunktes »producers«Ansicht nach Auswahl des Menüpunktes »producers«
Ansicht nach Auswahl des Menüpunktes »crews«Ansicht nach Auswahl des Menüpunktes »crews«
Ansicht nach Auswahl des Menüpunktes »labels«Ansicht nach Auswahl des Menüpunktes »labels«

Unter dem Menüpunkt »producers« erhält der User eine Übersicht aller Producer anhand der Karte Londons. Die Producer werden dabei nach den den Himmelsrichtungen sortiert und die Karte entsprechend der Verteilung innerhalb Londons eingefärbt. Je dunkler ein Teil ist, desto weniger Producer kommen aus diesem Teil Londons. Die mit einem Balken vor ihrem Namen versehenen Producer, haben eines der 20 Mixtapes veröffenlicht. Der Balken signaliesiert zusätzlich, dass dieser Name verlinkt ist, der User sich also über anklicken des Namens weitere Informationen zu diesem Producer holen kann.

Gleichermaßen verhält es sich unter den Menüpunkten »crews«, »artists« und »labels«.

mixtapes

Unter diesem Menüpunkt werden dem User alle 20, der Visualisierung zu Grunde liegenden Mixtapes aufgezeigt.

Darstellung bei 800px x 600px

eyWcozNk.pngeyWcozNk.png

Darstellung bei einer Auflösung von 800px x 600px

Da die rechte Spalte von vorn herein in ihrer Größe sehr reduziert wurde, und somit den minimalsten Platz für die darzustellenden Informationen bot, sollte sie ihre Größe auch bei einer Reduzierung der Größe des Browserfensters nicht verändern. Lediglich die Größe des Titels der Arbeit und die des Haupinhaltsbereiches sollten sich veringern.

Darstellung bei 1280px x 1024px

vwtGgIVB.pngvwtGgIVB.png

Darstellung bei einer Auflösung von 1280px x 1024 px

Bei einer Vergrößerung des Browserfensters, sollen sich hingegen alle Inhalte proportional vergrößern.

h2_resuemee.pngh2_resuemee.png

Für mich war diese Arbeit sehr wichtig, weil ich gezwungen war mich relativ eigenverantwortlich über einen gewissen Zeitraum mit einem Thema zu befassen, ohne klare Vorgaben zu haben.

Außerdem war es mir neu, mit einer solchen Fülle an Informationen umzugehen und deren Wichtigkeit zu differenzieren. Aufgrund meines persönlichen Interesses an diesem Thema, bestand vor allem darin meine Schwierigkeit, denn für mich waren alle Informationen wichtig und interessant. Aber es galt sie so zu minimieren, dass der Kern der Aussage auch für den Leihen ersichtlich wurde.

Auch wenn ich dieses Projekt gern noch viel weiter voran getrieben hätte und am liebsten einen funktionsfähigen Prototypen erzeugt hätte, so musste ich doch irgendwann Abstriche machen um im Rahmen der Zeit zu einem zufrieden stellenden Ergebnis zu kommen.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: CS

Entstehungszeitraum

Sommersemester 2008