What’s your mood?
«Gohts guet?» impliziert ja irgendwie schon, dass es einem gut gehen sollte. Besonders in Corona-Zeiten traut man sich kaum zuzugeben, dass es einem nicht gut geht – obwohl man doch froh sein könnte, gesund, nicht in Quarantäne zu sein oder gar existenzielle Ängste zu haben.
So wenig Gründe es auch haben mag, es geht einem eben nicht immer gut. Corona hin oder her sind wir unserer eigenen Gefühlslage ausgeliefert. Hatten die orange verfärbten Blätter beim Herbstspaziergang gestern noch eine beruhigende Wirkung, wirken sie heute rot, aggressiv und aufbrausend. Und so auch der eigene Mood: die Musik in den Ohren treibend, die Gedanken verdüstern sich, der Wind peitscht um die Ohren.
Moods dürfen ausgelebt, gefühlt und in den meisten Fällen auch als solche abgetan werden. Fühlt man sich aber oft deprimiert, die Gedanken sind schwer und das Loch scheint unüberwindbar, ist es wichtig, die eigene Stimmung ernst zu nehmen und darüber ehrlich zu sprechen.
Weil das so wichtig ist, frage ich dich: What’s your mood? Der interaktive Slider ist unvoreingenommen und versucht audiovisuell – mit Collage und Spotify-Playlist – dein Mood zu unterstreichen oder nach Bedarf auch entgegenzuwirken.
WHAT’S YOUR MOOD? CLICK HERE.
(hil)
Idee
Die Frage «Gohts guet?» beschäftigt mich schon seit längerem. Sie wird einem häufig gestellt – teilweise aufrichtig, manchmal aber auch bloss, weil man einander die Frage eben einfach stellt. Smalltalk halt. Und genauso beantwortet man sie auch. Manchmal ehrlich, in den meisten Fällen aber – ohne wirklich darüber nachzudenken – so, wie es das Gegenüber meistens erwartet: mit einem «Ja.»
Ob nun derjenige, der fragt oder derjenige, der antwortet an dieser Unaufrichtigkeit schuld ist, spielt keine Rolle. Wichtig ist mir aber, dass man sich ab und zu bewusst wird, dass diese kleine Frage – mit Aufrichtigkeit gestellt – einen grossen Unterschied machen kann. Nämlich zu spüren, dass es dem Gegenüber nicht gut geht und allenfalls sogar Hilfe braucht.
Ziel dieses Projektes ist es, audiovisuell, interaktiv und auch ein bisschen spielerisch auf dieses wichtige Thema aufmerksam zu machen.
Umsetzung
Konzept & Design
Meine Idee war relativ schnell visualisiert. Mit einem einfachen Wireframe und Mockup strukturierte ich die Seite, legte das Design meiner Idee fest und plante, wo Interaktivität eingebaut werden sollte.
Programmieren
Obwohl ich – abgesehen vom IM-Unterricht – absolut keine Erfahrung mit Programmieren hatte, wollte ich mich in meinem letzten Digezz-Semester doch noch ans Coden wagen. Was mich jedoch vor einige Startschwierigkeiten stellte. Ich hatte zwar ein detailliertes Mockup, aber absolut keine Ahnung, wie ich das nun umsetzen könnte. Daher holte ich mir Starthilfe bei einem der LBAs aus dem Interaktive Medien-Unterricht. Mit einem HTML-, CSS- und JavaScript-File und relativ wenig Code sollte mein Projekt umsetzbar sein. Die Interaktivität baue ich mit einem Range Slider ein (siehe w3schools – dein wohl bester Coder-Freund und Helfer).
Die darauf folgenden Arbeitsschritte liefen dann so, wie man es sich beim Programmieren eben so gewöhnt ist: Googeln, Copy & Paste, Ausprobieren, Error-Codes erhalten, Untersuchen, Code abändern usw. Und nach einigen weiteren YouTube-Tutorials stand meine Seite – zu diesem Zeitpunkt noch mit Platzhaltern befüllt und noch alles andere als responsive. Die wohl grösste Herausforderung war dann auch, die Seite responsive zu optimieren. Dafür erhielt ich Hilfe von meinem Studikollegen Sandro 🙂
Collagen
Obwohl für mich von Anfang an klar war, dass ich die jeweiligen Moods mit Collagen visualisieren möchte, wartete ich mit der Umsetzung dieser bis nach dem Programmieren der Website. So wusste ich nämlich, wie die Seite final wirkt und in welcher Form die Collagen am besten zur Geltung kommen.
Für die Collagen hatte ich im vornherein Mindmaps erstellt, in denen ich festhielt, was mir zu verschiedenen Moods motivmässig so alles einfiel. Danach reduzierte ich die Moods und Farben auf fünf ausgewählte, die mich am meisten inspirierten: #f5bd29, #e4a7bb, #85b5b1, #b43e3e, #454746 – das sollten die Mood-Farben sein.
Nachdem ich in etwa wusste, aus welchen Bestandteilen die Collagen bestehen sollten, ging es an die Bildersuche. Da ich die Bilder jeweils extrem zuschnitt und komplett neu zusammenfügte, hatte ich keine Probleme mit den Copyrights.
Playlists
Nachdem ich die definitiven Farben und Moods festgelegt hatte, entstanden die einzelnen Playlists laufend. Was ich gerade so hörte, wanderte in die passende Playlist. Bei der Benennung der Playlists habe ich mich für den HEX-Code der jeweiligen Mood-Farbe entschieden – so wird jeder Mood den Interpretationen der Betrachter*innen überlassen.
Herausforderungen
Die grösste Herausforderung war grundsätzlich das Programmieren der Website, da ich das erste Mal völlig eigenständig ein Programmier-Projekt umsetzte. Ausserdem musste ich zugunsten der Responsiveness meine ursprünglichen Wireframes und Designideen etwas abändern – was mir teilweise schwerfiel.
Bei den Collagen war die grösste Herausforderung, das passende Bildmaterial zu finden. Da waren teilweise verschiedene Versionen der Collage nötig bis das stimmige Mood-Bild stand.
Fazit
Das Projekt ist für mich insofern ein kleiner Erfolg, da ich meine «Abneigung» gegenüber dem Programmieren ablegen konnte.
Leider konnte ich nicht ganz alles nach meinen Vorstellungen umsetzen (z.B. war der Slider vertikal geplant, hat dann aber responsive nicht so gut funktioniert). Grundsätzlich steht jetzt aber eine Website, welche die Anforderungen meiner Ursprungsidee erfüllt und interaktiv funktioniert.
Was ich gerne noch getan hätte, vom Timing her aber nicht mehr ganz gereicht hat: Die Playlists noch etwas sorgfältiger kuratieren und von der Reihenfolge passender abändern. Da sich die Einbettung der Playlists in den Code ja aber dynamisch mitverändert, kann ich das auch gut noch nach Abgabe des Projektes laufend machen.