Visualisierung einer Minute

Eine scheinbar einfache Aufgabe, die sich später als doch nicht ganz so simpel entpuppte. Gerade bei den Teilaufgaben „Punkt Linie Fläche“ und „Farbe Kontrast“ musste ich von dem Grundgedanken, die Minute für jeden sofort erkennbar darzustellen, abkommen und habe mich deswegen dazu entschieden mich der nächstkleineren Zeiteinheit, der Sekunde, zu bedienen.

Teilaufgabe 1 und Teilaufgabe 2 erinnern hierbei an eine analoge bzw. digitale Uhr, während man bei Teilaufgabe 3 schon genauer hinsehen muss um das Thema Zeit zu erkennen.

Hier sind meine Ideen und Skizzen zu den jeweiligen Gestaltungsmitteln zu sehen

Beim Gestaltungsmittel „Punkt Linie Fläche“ habe ich mich für ein Design entschieden, welches an eine analoge Uhr erinnert. Dabei geben die Einkerbungen in der weißen Fläche jeweils 10 Sekunden an. Der rote markante Punkt visualisiert eine Art Sekundenzeiger, welcher eine Minute zum umkreisen der zentralen Fläche braucht. Der senkrechte dickere Strich auf 12 Uhr stellt Start und Ende der Minute dar.

Beim Gestaltungsmittel „Typographie“ habe ich mich für eine digitale Uhrzeit entschieden. Das Design ist simpel, wodurch die Minute dementsprechend schnell erkannt wird.

Beim Gestaltungsmittel „Farbe Kontrast“ habe ich mich am schwersten getan. Der Grundgedanke sind zwei komplementäre Farben die den Zustandswechsel einer Minute darstellen bzw. ausdrücken sollen was in so kurzer Zeit alles passieren kann. Dabei wird der Farbverlauf im Design durch 60 verschiedene Stufen unterteilt, welche die Sekunden repräsentieren.

Hier noch ein paar Codeschnipsel

Ausarbeitung und Weiterentwicklung

Bezüglich der Weiterentwicklung meiner Designs habe ich mich in Woche 2 auf das Gestaltungsmittel „Punkt, Linie, Fläche“ spezialisiert und zu meinem ursprünglichen Entwurf 3 Varianten ausgearbeitet.

Hier sind meine Skizzen und Ideen dazu.

In meiner ersten Variante wird die zentrale weiße Fläche durch eine durch Linien und Farben unterteilte tortendiagrammähnliche Grafik ersetzt, welche anhand von Beispielen zeigt was auf der Welt innerhalb einer Minute passiert. Somit kennzeichnet der rote animierte Punkt, welcher eine Minute für die Strecke benötigt, das Stattfinden jener Vorgänge.

Die zweite Variante funktioniert ausschließlich als Animation. Hierbei wurde die ursprüngliche weiße Fläche durch eine kreisförmige Soundwave getauscht, welche zur Filmmusik „no time for caution“ aus Interstellar entstanden ist. Das Thema hat eine Geschwindigkeit von 120 bzw. 60 BPM und besondere Percussion-Elemente welche an das Ticken einer Uhr erinnern. Dadurch entsteht exakt 60 mal pro Minute ein Impuls, welcher einen alternativen Sekundenzeiger visualisiert. Idealerweise wird die Animation mit der zugehörigen Musik abgespielt.

Bei meiner dritten und letzten Variante ist die zentrale Fläche zum Teil erhalten geblieben, allerdings durch ein auffallend rotes Herz und einen weißen Herzschlag erweitert worden. Der Ansatz ist philosophischer und stellt die Minute als wertvolle Lebenszeit dar. Neben dem bereits animierten Punkt, könnte man zusätzlich das Herz bzw. den Herzschlag im Sekundentakt pulsieren lassen um wieder eine Art Sekundenzeiger zu visualisieren.

Varianten

In Woche 3 ging es um die Weiterentwicklung eines Entwurfes und darum zu diesem Design 3 Varianten zu erstellen. Ich habe mich dazu entschlossen, mich auf den uhrähnlichen Entwurf zu fokussieren und weiter die Idee zu verfolgen, Vorgänge die parallel auf der ganzen Welt innerhalb einer Minute stattfinden, zu visualisieren. Dabei habe ich versucht mich von erklärenden Typografie-Elementen zu lösen und die Designs symbolischer bzw. abstrakter zu gestalten um dem Betrachter mehr Spielraum für Interpretationen zu lassen.

Hier sind meine Ideen und Skizzen zu den verschiedenen Varianten zu sehen.

Das erste Design zeigt einen Kreis um den Blick des Betrachters zu lenken, in dessen Zentrum ein Symbol für ein gerade stattfindendes Ereignis zu sehen ist. Umrahmt wird es von einem Herzschlag , welcher eine Minute zum umkreisen braucht, somit ein alternativer Sekundenzeiger ist und seine Farbe passend zum mittig gezeigtem Symbol anpasst. Im Beispiel ist das Zeichen für Leben bzw. eine Geburt mit grünem Herzschlag (grün steht für Leben, Glück, Hoffnung) und das Zeichen für Liebe bzw. eine Hochzeit mit rotem Herzschlag (rot steht für Liebe und Leidenschaft) zu sehen.

Das zweite Design zeigt die Erde und rund um den Globus gerade stattfindende Vorgänge. Im Beispiel sind Kreuze, welche Tod symbolisieren und Anche, welche Leben symbolisieren zu sehen. Abhängig von der Anzahl der entsprechenden Ereignisse ploppen die Zeichen unterschiedlich oft pro Minute auf.

Das dritte und letzte Design zeigt wiederum im Zentrum die Erde, aber anstelle die stattfindenden Ereignisse mithilfe von Symbolen zu visualisieren, wird die Welt von einer kreisförmigen Lautstärkekurve umschlossen, welche auf die Klänge von z.B. Krieg, einer Hochzeit, einer Geburt usw. reagiert. Wie auch schon in der ersten Variante nimmt die Lautstärkekurve passend zum jeweiligen auditiven Ereignis eine Farbe an. Alternativ könnte die Kurve auch wieder wie beim ersten Design über den Zeitraum von einer Minute aufdecken um zusätzlich einen zeitmessenden Charakter darzustellen.

Finaler Entwurf

In der 4. bzw. 5. Woche ging es nun um die Finalisierung des Designs.

Ich habe mich dazu entschieden, den Fokus auf verschiedene Impressionen aus einer Minute Weltgeschehen beizubehalten, aber anstatt diese zu symbolisieren, will ich den Betrachter emotional bewegen. Erreichen will ich das, indem ich die jeweiligen Ereignisse auditiv darstelle und passend zu jedem Sound ein statisches expressionistisch verzerrtes Bild zeige. Darüber hinaus integriere ich eine animierte Lautstärkekurve, welche passend zur Szene designt ist. Somit gilt die Aufmerksamkeit des Betrachters verstärkt der Audiospur.

Hier sind meine Ideen und Skizzen zu den jeweiligen Impressionen zu sehen.

Impression 1: Krieg

Zu hören sind verschiedene Waffen, absichtlich übersteuerte Jets und unangenehmes Pfeifen von Raketen. Die Soundwave ist weiß, die Farbe des Todes und erinnert an eine Sirene oder einen Alarm. Sie bewegt sich sehr hektisch und macht den Betrachter unruhig. Das Bild zeigt einen am Boden liegenden Soldaten und ist mit runden Strichen verzerrt, um Rauch und Verwüstung darzustellen.

Impression 2: Nachtleben

Zu hören ist ein Technoset, eine applaudierende Menge und Stimmengewirr. Die Soundwave ist rot und dunkelblau und erinnert an Clubscheinwerfer. Das dunkle Blau steht für den Nachthimmel und das rot symbolisiert, die Lichter der Stadt. (Ampeln, Bremslichter,  Rotlichtviertel, Rücklichter, Anzeigtafeln).  Das Bild zeigt tanzende schemenhafte Personen und ist vor einem schwarzen Hintergrund mit bunten Punkten verzerrt, welche wiederum Lichter darstellen.

Impression 3: Sport

Zu hören ist eine deutsche Übertragung zum Zeitpunkt des WM Final Treffers von Mario Götze 2014, kombiniert mit der Reaktion deutscher Fans beim Public Viewing. Die Soundwave ist sehr klassisch gehalten um das Wesen der Sportübertragung zu wahren. Das Bild zeigt die Reaktion der deutschen Spieler im Moment des Treffers und ist mit geraden Linien verzerrt um den rasanten Charakter des Spiels und die explosionsartigen Emotionsausbrüche zu verdeutlichen.

Impression 4: Hochzeit

Zu hören sind Kirchenglocken. Die Soundwave besteht aus umherfliegenden Blütenblättern, welche z.B. von Blumenmädchen stammen könnten. Das Bild zeigt zwei sich berührende Hände, vermutlich Braut und Bräutigam und ist aus unzähligen kleinen Herzen zusammengesetzt. Das gesamte Design ist in einem roten Ton gehalten und symbolisiert die Liebe.

Abgabe und Fazit

Im Ordner Abgabe.zip findet sich der Code. Die Auswahl der Szenen geschieht random, wenn man die Seite öffnet, bzw. neu lädt und schließt sich von selbst nach Ablauf der Minute.

Als abschließendes Fazit würde ich sagen, dass ich viel Spaß bei dem Projekt hatte, stellenweise jedoch auch zu kämpfen hatte.  Gerade die Visualisierung der Soundspur hat mich sehr viel Zeit gekostet, da ich mir selbst beibringen musste wie man aus einer mp3-Datei die Lautstärke der verschiedenen Frequenzen ausließt und diese dann in grafische Elemente umwandelt. Außerdem hatte ich sehr viele Ideen, welche meistens jedoch zu banal waren um den Betrachter tatsächlich längerfristig zu beschäftigen bzw. zum Nachdenken anzuregen. Insgesamt bin ich jedoch mit dem Ergebnis sehr zufrieden und ich denke, dass ich mein Ziel, den Betrachter zu bewegen und Lebensgefühle bzw. Erinnerungen zu vermitteln, erreicht habe. Darüber hinaus finde ich, dass ich die Ästhetik der Soundwave an das jeweilige Ereignis ziemlich gut angepasst habe. Was die Weiterentwicklung des Designs betrifft, besteht natürlich die Möglichkeit unzählige weitere Impressionen hinzuzufügen oder beispielsweise auch die statischen Hintergrundbilder mit einem Video zu ersetzen. Allerdings bestünde hierbei die Gefahr den Betrachter zu sehr vom Wesentlichen, der Tonspur, abzulenken. Generell versuche ich in Zukunft mich von konventionellem Design zu lösen und mehr Zeit in meine Skizzen und Ideen zu investieren.