NIME paper review

I read Participatory Design of a Collaborative Accessible Digital Musical Interface with Children with Autism Spectrum Condition by Balázs Iványi, Truls Tjemsland, Lloyd May, Matt Robidoux, and Stefania Serafin and would like to state my opinions, thoughts, feedback and critique in the following paragraphs.

I really like the core idea of creating a tool specifically for children with autism. I’ve always found neurodiversity fascinating—how differently people on the spectrum perceive the world and react to interventions. The brain is such a powerful thing, and seeing projects that try to meet neurodivergent individuals on their level is super cool. Giving kids a medium to explore social skills through music feels like a thoughtful and interesting approach.

What I really appreciate is that this project doesn’t just design for children with ASC but instead designs with them. The participatory design (PD) process is such a respectful and inclusive way to work—especially with a population that’s often overlooked in design and research processes. It’s great to see the researchers really leaning into methods like fictional inquiry and narrative-based workshops to engage the children on their terms.

At the same time, one thing that left me a bit puzzled was how quickly the team settled on the idea of a “music box” app. While music can be therapeutic and collaborative, the paper doesn’t fully explain how this specific medium connects with the needs or strengths of autistic children. Why music over other sensory or communication-based tools? That connection could’ve been explored more deeply, especially since kids on the spectrum can have such different sensory profiles—some love sound, others might be overwhelmed by it.

Another interesting point for me was recognizing the iterative prototyping process—it was like a flashback to what we’ve learned in our own courses. Start with simple experiments (like trying sounds on the phone), move on to lo-fi prototypes (like a cardboard box), and finally develop a more polished product. It’s encouraging to see this familiar design thinking structure being applied in a real research context and to such a meaningful user group.

Still, I would’ve liked more details about the final version of the prototype—what exactly can it do now? How do kids use it? Will it be made publicly available or used long-term in schools? The evaluation section gave some hints, but it stayed pretty vague. I also wonder how they plan to address the issue of physical proximity being uncomfortable for some kids—especially when the app is meant to be collaborative and used by multiple users on a single iPad. Would separating controls or even offering individual interfaces be a better fit?

One suggestion might have been to involve a music therapist earlier in the design process. Some teachers mentioned this toward the end, and I think it could’ve really helped bridge the gap between musical expression and social skill development in a structured way. Also, while the aesthetic design choices were touched on (like using retro-futuristic visuals), I wonder how much user testing went into determining if those visuals were actually appealing or helpful for the kids.

Overall, I think the project has great intentions, a solid foundation in participatory research, and shows sensitivity to working with children with ASC. I just wish there had been more insight into the real-life impact of the final product—and how the kids actually felt using it in the long run. But as a student myself, I find it really encouraging to see how others apply the methods we’ve learned in such a creative and inclusive way.

#1 Prototyping Session

Der erste Versuch einen Prototypen für die Vorlesung Des Res 2 ist tatsächlich nicht über mein potentielles Masterprojekt, denn ich habe die Aufgabe mehr als eine rapid Prototyping Übung verstanden. Also habe ich ein Problem genommen, das meinen Alltag prägt (eine sogenannte Alltagsunwürdigkeit) und versucht dafür eine Lösung zu finden. 

Das besagte Problem hier zu sehen: 

Und zwar besitze ich in meiner kleinen 50m2 Wohnung keine Speisekammer oder ähnliches, um muss den Großteil meiner Lebensmittel, die nicht in den Kühlschrank gehören, in zwei sehr tiefe Laden stopfen. Fast täglich gibt es die Situation, dass ich auch von hinten in der Lade etwas brauche und beim Versuch dorthin zu gelangen, schmeiße ich an der vordersten Front alles um.  

Darum muss hier eine Lösung her. Und dabei dachte ich an eine Drehscheibe mit Vertiefungen für die Lebensmittel. 


Die Drehfunktion

Im ersten Schritt wollte ich dazu zwei Teller nehmen und dazwischen Perlen, die ich bereits Zuhause habe. Quasi ein provisorisches Kugellager. Hat leider eher schlechter funktioniert und sich nicht wirklich gut gedreht. Wahrscheinlich waren die Perlen zu unrund oder nicht alle gleich groß.

Der Inhalt 

Als erstes wollte ich mich um die obere Lade kümmern. Dafür mussten die einzelnen Lebensmittel kategorisiert werden. Dabei ergaben sich diese 4 Kategorien:

  • Brot
  • Gewürze
  • Soßen
  • Tee

Diese 4 Kategorien nehmen ungefähr die selbe Menge an Platz ein.

Probleme

Während des Prototypings sind einige Probleme aufgetreten.
Zum Beispiel, dass der Marker nicht markiert auf dem Panzertape und dass es irgendwie ein Mittelding gebraucht hat, damit zwei Scheiben sich aufeinander drehen. Dafür wurde dann eine Schraube verwendet. Die erste war leider zu lange, mit der zweiten hat die Sache dann schon besser funktioniert.

„Finaler“ sehr Lofi Prototype

Im Endeffekt hatte ich dann eine ganz gut drehbare Scheibe mit Kennzeichnung der einzelnen Bereiche. Meine Kollegen hatten anhand der Beschriftung halbwegs erkannt, was das Objekt machen soll, der Kontext zu meinem Storage konnte aber ohne Erklärung (irgendwie auch logisch)  nicht erkannt werden. 

Fazit

Es hat sehr Spaß gemacht zu tüfteln und kontinuierlich kleine Probleme zu beseitigen. Auch das Speed-Dating war sehr cool. Bin mir nicht sicher, ob ich doch schon an meiner Masterarbeitsidee hätte arbeiten sollen, damit da etwas schneller weiter geht, aber es war auch befreiend, sich mit einem weniger „geladenen“ Thema zu beschäftigen. 

Startpunkte zur kunsthistorischen Forschung

Kernfrage: Wie finde ich eine unterrepräsentierte Persönlichkeit als Protagonist:in für meine Webseite?

Die Auswahl einer Protagonistin oder eines Protagonisten, die unterrepräsentiert ist und dennoch eine interessante Geschichte erzählt, ist eine Herausforderung. In diesem Blogpost untersuche ich Ansätze und Ressourcen, die helfen können, eine geeignete Persönlichkeit zu finden.

1. Recherche in spezialisierten Kunstarchiven und Datenbanken

Viele Kunstarchive und Datenbanken widmen sich bewusst der Aufgabe, unterrepräsentierte Künstler:innen sichtbar zu machen. Hier einige Quellen, die bei der Recherche hilfreich sein können:

AWARE: Archives of Women Artists, Research and Exhibitions:

Diese Plattform hat sich auf Künstlerinnen spezialisiert, die im Laufe der Kunstgeschichte wenig Beachtung gefunden haben. AWARE bietet Artikel, Biografien und Forschungsergebnisse über Frauen in der Kunst.

Lost Women Art:

Diese deutsche Initiative beleuchtet Künstlerinnen, deren Werke und Geschichten zu Unrecht in den Hintergrund gerückt sind. Da diese (ca. 10) Persönlichkeiten aber schon eine Plattform haben, dient die Seite eher als Inspiration, bzw. kann ich denen möglicherweise Schreiben, um weitere Hinweise zu bekommen.

Getty Research Institute:

Das Institut bietet umfangreiche Sammlungen und Forschungsdokumente zur Kunstgeschichte, darunter auch Themen zu marginalisierten Gruppen.

Google Arts & Culture:

Digitale Sammlungen, die oft auch weniger bekannte Künstler:innen oder Projekte thematisieren.

2. Suche nach Experten und Netzwerken in der Kunstforschung

Kunsthistoriker:innen und Forscher:innen, die sich auf Diversität und Inklusion spezialisiert haben, könnten wertvolle Kontakte und Tipps geben. Hier einige Möglichkeiten:

Universitätsfakultäten für Kunstgeschichte

Webseiten von Kunstgeschichtsinstituten, um Professor:innen oder Forschende zu finden, die über Minderheiten in der Kunst forschen. Themen wie feministische Kunstgeschichte, queere Kunst oder Postkolonialismus wären spannend. Möglicherweise jemand an der Grazer Hauptuni anschreiben?

Bekannte Forscher:innen

Linda Nochlin: Eine Pionierin der feministischen Kunstgeschichte (z. B. mit ihrem Essay “Why Have There Been No Great Women Artists?”). Leider verstorben, aber vielleicht trotzdem inspirierend.

Griselda Pollock: Ihre Arbeiten über feministische und queere Kunstgeschichte könnten relevante Ansätze bieten.

Netzwerke:

ICOM (International Council of Museums): Vernetzung mit Museumsforscher:innen, die oft Zugang zu wenig bekannten Werken und Biografien haben.

College Art Association (CAA): Ein Netzwerk, das sich auch mit Themen der Diversität und Inklusion in der Kunst beschäftigt.

3. Durchforsten von wissenschaftlichen Publikationen

Datenbanken wie JSTOR, Google Scholar oder ResearchGate bieten wissenschaftliche Paper, die speziell unterrepräsentierte Künstler:innen beleuchten. Suche mit Stichwörtern wie:

“Feminist art history”

“Queer art representation”

“Postcolonial art studies”

“Forgotten women artists”

Herausfinden, welche Forschenden immer wieder zu diesem Thema publizieren. Diese Expert:innen könnte ich eventuell kontaktieren.

4. Museen und Ausstellungen besuchen

Museen und Ausstellungen, die sich auf Diversität und Inklusion konzentrieren, könnten Inspiration liefern:

Victoria & Albert Museum (London): Das V&A arbeitet oft an Projekten, die sich mit Minderheiten und neuen Perspektiven in der Kunst beschäftigen.

• Ich bin im September in Japan auf der Weltausstellung, vielleicht gibt es hier auch noch andere inspirierende Inputs.

5. Kontaktaufnahme mit Expert:innen und Institutionen

Aktiv auf Fachleute oder Organisationen zugehen:

Kunsthistoriker:innen anschreiben: Hoffentlich antworten Wissenschaftler:innen auf spezifische Anfragen, wenn sie mein Forschungsvorhaben spannend finden.

Netzwerke nutzen: Plattformen wie LinkedIn könnten helfen, Expert:innen zu identifizieren und zu kontaktieren.

Kunst- und Kulturinstitute: Vielleicht gibt es feministische Initiativen der Stadt Graz, die spannende Kontakte haben.

6. Inspiration durch Literatur und Filme

Manchmal finden sich interessante Persönlichkeiten in Büchern, Biografien oder Filmen. Jedoch würde ich ungern etwas über eine Person machen, zu der es bereits einen Blockbuster gibt.

Fazit

Die Suche nach einer unterrepräsentierten Persönlichkeit erfordert Geduld, kann aber hoffentlich durch Recherche, Netzwerke und den Austausch mit Expert:innen gelingen.

Nachhaltigkeit und digitale Kunstprojekte

Die Integration von Nachhaltigkeit in digitale Kunstprojekte gewinnt zunehmend an Bedeutung, da der ökologische Fußabdruck digitaler Medien nicht zu unterschätzen ist. Insbesondere ressourcenintensive Technologien wie WebGL und Three.js, die für interaktive 3D-Grafiken im Web eingesetzt werden, können erhebliche Energiemengen verbrauchen. Es ist daher wichtig, sich darüber Gedanken zu machen, wie digitale Kunst umweltfreundlicher gestaltet werden kann.

Meine Motivation

Mir ist es ein persönliches Anliegen, ressourcenschonend mit meiner Umwelt umzugehen und auch im Großen und Ganzen mit meiner Arbeit mehr positiven als negativen Einfluss auf Umwelt und Gesellschaft zu haben. Tatsächlich finde ich, sollte es aber kein persönliches Anliegen mehr sein, sondern im Internet besonders an Großkonzernen (Meta, ChatGPT, usw.) Regulierungen geben, die einerseits Transparenz fordern und auch einen verantwortungsvollen Umgang mit den benötigten Energiemengen.

Energieverbrauch von WebGL und Three.js

WebGL ist eine JavaScript-API, die es ermöglicht, 3D-Grafiken direkt im Browser darzustellen, indem sie die GPU des Nutzers nutzt. Three.js hingegen ist eine auf WebGL aufbauende Bibliothek, die die Erstellung von 3D-Inhalten vereinfacht. Obwohl Three.js die Entwicklung erleichtert, kann die Abstraktionsebene zu zusätzlichem Ressourcenverbrauch führen. Ein Vergleich zwischen WebGL und WebGPU zeigt, dass die Wahl der Technologie Einfluss auf die Performance und somit auf den Energieverbrauch hat.

Strategien zur Reduzierung des Energieverbrauchs

1. Optimierung der Performance: Durch Techniken wie Frustum Culling, Instancing und Level of Detail (LOD) kann die Anzahl der zu rendernden Objekte reduziert werden, was die Effizienz steigert.

2. Code-Minimierung: Schlanker und effizienter Code kann die Ladezeiten verkürzen und den Energieverbrauch senken.

3. Nutzung effizienter Bibliotheken: Der bewusste Einsatz von Bibliotheken, die für ihre Performance bekannt sind, kann den Ressourcenverbrauch minimieren.

Nachhaltige Hosting-Lösungen

Die Wahl des Hosting-Anbieters beeinflusst ebenfalls die Umweltbilanz digitaler Kunstprojekte. Anbieter, die erneuerbare Energien nutzen oder CO₂-Kompensationsprogramme anbieten, tragen zur Reduzierung des ökologischen Fußabdrucks bei.

Bewusstsein und Bildung

Künstler und Entwickler sollten für die ökologischen Auswirkungen ihrer digitalen Werke sensibilisiert werden. Initiativen wie “Zero – Klimaneutrale Kunst- und Kulturprojekte” ermutigen dazu, klimaneutrale Produktionen zu realisieren und nachhaltige Praktiken zu etablieren.

Fazit

Nachhaltigkeit in digitalen Kunstprojekten erfordert ein Bewusstsein für den Energieverbrauch verwendeter Technologien und die Implementierung gezielter Optimierungsstrategien. Durch Performance-Optimierungen, bewusste Technologieauswahl und nachhaltige Hosting-Lösungen kann man einen Beitrag zum Umweltschutz leisten, ohne die kreative Freiheit einzuschränken.

Technische Untersuchung: ÖBB History

Im vorherigen Artikel “Fallbeispiel: Öbb History” habe ich die Seite auf inhaltliche und Design Aspekte analysiert. In diesem Blogpost schau ich mir an, ob und wieviel ich über die technische Umsetzung dieser Seite herausfinden kann.

Das sind jedenfalls mal die Personen, die diese Webseite kreiert haben:

Und die Seite war mal auf AWWWARDS Website of the Day:

Technische Analyse

Als erstes sehe ich beim Untersuchen, dass die Seite mit dem Framework Next gebaut wurde:


Next.js ist ein beliebtes React-Framework, das serverseitiges Rendering (SSR), statische Seitengenerierung (SSG) und API-Routen in einer Umgebung kombiniert. 

Canvas

Die Hauptanimationen befinden sich in einem canvas tag mit dem parameter data-engine=”three.js”. Daher ist davon auszugehen, dass für die großen Animationen Three.js verwendet wurde.

Styled Components

https://styled-components.com

Diese Library habe ich auch noch nie verwendet, damit soll angeblich CSS leichter zuzuweisen sein auf React Componenten.

Tailwind

Tailwind mag ich nicht so, ich finde es macht das ganze voll unübersichtlich wenn die tags so lange werden.

Imgix

Imgix wird verwendet, um Bilder effizient zu komprimieren, zu transformieren (z. B. Größenänderung, Zuschnitt) und über ein Content Delivery Network (CDN) schnell auszuliefern. Das reduziert Ladezeiten und verbessert die Benutzererfahrung, insbesondere bei Medien-intensiven Websites. Das weißt auch darauf hin, dass sie ein CDN verwenden.

SEO

Da gibt es bissl viele h1.

Barrierefreiheit

Die Seite ist trotz der vielen Animationen großteils mit tab bedienbar. Es wurden auch Aria live tags benutzt.

Manchmal Kontrast Probleme.


Fazit

Nach der Analyse überlege ich doch, wieder React mit Next.js zu nutzen, weil ich mich trotz meines letzten Projekts immer noch nicht super fit darin fühle. Ich werde noch ein paar vergleichbare Websites untersuchen und wenn sich das als State-of-the-Art Framework für interaktive Webseiten herauskristallisiert, dann geht fast kein Weg drum herum. Three.js stand bereits auf meiner To-Do Liste, das will ich unbedingt auch nutzen. Gegen Tailwind wehre ich mich. Imgix und Styled-Components sehe ich mir gern mal an.

Fallbeispiel: Öbb History

Juhu ich habe von der Agentur wild tatsächlich Zugang zu ihrer Staging Umgebung bekommen, in der die Seite, die ich im Chronologisches Storytelling auf Web-Plattformen Blogpost erwähnt habe, aufzurufen ist! Die Zugangsdaten teile ich natürlich nicht, aber ein paar Sceenshots darf ich bestimmt machen.

Das ist die Loading Scene:

Ein Preloader, der bei mir momentan in etwa 1-2s ladet. Super elegant gelöst damit, dass der loader in der selben Font wie das 100 Jahre ÖBB Logo ist. Und sobald die 100% geladen sind entwickelt sich aus dieser Zahl direkt das Öbb logo unten und fährt dann nach oben. Ich finde so kleine Details machen das ganze Projekt so richtig elegant. Die Seite wird auch nicht einfach rot, sondern hat auch hier eine kleine transition.

Das ist dann der Startscreen:

Nachdem das Logo hochfährt, animiert sich der mittlere Text rein und danach kommt der Button hinzu.
Obwohl jedes einzelne Element hier eine eigene Intro Animation hat, wirkt es nicht überladen. Wahrscheinlich weil es sehr dezente animationen sind und sie auch gut getimed sind. Das einzige was ich mich frage: wieso braucht man hier zwei button fürs einsteigen, soweit ich checke machen die beiden das selbe.

Dann kommt man auf die, meiner Meinung nach, coolste Seite: das Ticket-Ziehen

Hier animiert isch der “Datepicker”, der das Start und End Datum festlegt und mit links und rechts Pfeilklick kann man zwischen den 8 Phasen wechseln. Jede Phase hat ein eigenes ticket, dass per Drag gezogen werden kann. Hier ein Screenvideo davon:

Ursprünglich habe ich nicht gedacht, dass ich Sound einbauen werde, weil das garnicht mein Bereich ist und ich es auch auf Webseiten eher nervig finde. Jedoch ist es hier super gemacht und auch bei den meisten anderen Seiten die mir gefallen haben gibt Sound eine wichtige weitere Ebene dazu, darum werde ich höchstwahrscheinlich nicht darauf verzichten können.

Im Anschluss kommt man zu einem Slider, der die einzelnen Artikel zu dem Zeitraum auflistet:

So sehen dann die dazugehörigen Detailseiten aus:

Ich finde es super gelöst, sehr einfach für den User zu verstehen. Die Detailseiten, in denen es um die tatsächliche Informationsweitergabe geht, ist eher schlicht und informativ gelöst mit wenig effekten und klarem Fließtext auf weißem Hintergrund. Je nachdem wieviel Inhalt ich bei meinem Projekt habe, sollte ich vielleicht auch dem User die Möglichkeit geben auf eine angenehme Weise viel Text zu konsumieren. Vielleicht ist es aber auch nicht nötig viel zu lesen. Könnte ich auch mit einem Prototypen mal testen, ob Leute auch wirklich lesen, ehrlicherweise habe ich selber auch noch nicht so viel vom ÖBB Text gelesen außer den Überschriften.

Im nächsten Blogpost werde ich die Website in technischer Hinsicht untersuchen und mal sehen, ob und wieviel ich da über die Umsetzung herausfinden kann.

Lets talk about Design

Wie bereits im Artikel “Chronologisches Storytelling auf Web-Plattformen” unter Fallbeispiele angeführt, möchte ich ein Erlebnis schaffen, dass komplett auf die zu erzählende Geschichte abgestimmt ist und möglichst innovative und sinnvolle Interaktionsmöglichkeiten schaffen. Wie bei der ÖBB das Ticket ziehen oder bei der Ukraine Seite der switch zwischen Russlands Ansicht vs. Rest der Welt (ob das jetzt in dem Fall die Wahrheit ist oder nicht, sei mal dahingestellt).

Folgende Faktoren gehören somit beim erstellen des UX/UI Designs beachtet.

Geschichtenbasiertes Design (Storytelling im Fokus)

Die Benutzeroberfläche muss die Geschichte unterstützen und verstärken. Elemente wie interaktive Zeitleisten, animierte Übergänge oder thematische Illustrationen sollten die Narration visuell und emotional unterstützen. Der inhaltliche Fluss sollte logisch und nachvollziehbar sein, um die Geschichte effektiv zu erzählen.

Interaktionsmöglichkeiten

Interaktionen sollten die Geschichte vertiefen und den Benutzer aktiv einbinden. Beispiele sind Drag-and-Drop-Elemente, Scrolling, interaktive Karten, 360°-Ansichten oder vergleichende Schaltflächen wie bei der Ukraine-Seite (Russlands Ansicht vs. Rest der Welt). Die Interaktionen müssen intuitiv und selbsterklärend sein, um Frustration zu vermeiden.

Emotionale Ansprache

Farben, Schriftarten, Bilder und Animationen sollten so gewählt werden, dass sie die emotionale Wirkung der Geschichte verstärken. Mikrointeraktionen wie Animationen bei Klicks oder Hover-Zuständen können subtile, aber wirksame Effekte schaffen.

Barrierefreiheit und Inklusion (Accessibility)

Das Design muss barrierefrei gestaltet werden, sodass es auch für Menschen mit Einschränkungen zugänglich ist (z. B. Screenreader-Kompatibilität, Tastaturnavigation, ausreichende Farbkontraste). Texte und Beschriftungen sollten klar lesbar und verständlich sein.

Mobile-First-Ansatz und Responsivität

Da viele Benutzer über mobile Geräte auf die Plattform zugreifen, muss das Design auf Smartphones, Tablets und Desktops gleichermaßen gut funktionieren. Interaktive Elemente müssen für Touchscreens optimiert sein, beispielsweise durch größere Schaltflächen.

Visuelle Kohärenz und Konsistenz

Alle visuellen Elemente, wie Farben, Schriften und Icons, sollten einem konsistenten Designsystem folgen. Dies schafft ein harmonisches Nutzererlebnis. Thematische Anpassungen, die zur Geschichte passen, wie spezifische Farbpaletten oder gestalterische Details, sind dabei wichtig.

Benutzerführung (User Flow)

Der Benutzerfluss sollte so gestaltet werden, dass die Navigation durch die Geschichte klar und mühelos erfolgt. Orientierungshilfen wie Fortschrittsanzeigen oder “Zurück”-Schaltflächen können helfen, den Kontext zu wahren.

Nutzerfeedback und Testing

Prototypen sollten regelmäßig getestet werden, um sicherzustellen, dass das Design sowohl funktional als auch narrativ überzeugt. Nutzerfeedback ist entscheidend, um Schwachstellen in der Navigation oder Interaktion zu erkennen und zu beheben.

Beispiele:

https://www.no-fishing.net

https://madamspeaker.org.au

https://storytime.xyzal.com/story/the-sleepy-wizard

https://zentry.com/prologue

https://www.igloo.inc

https://genocide.greatarmenia.org/remember

Digital Biopic?

Bisher habe ich es mir noch offen gelassen, ob es eine digitale Galerie über mehrere Künstler:innen wird, die dort quasi ihre eigene Subpage bekommen, oder ob ich eine spezielle Geschichte aufbereite. Momentan tendiere ich dazu, eine repräsentative Geschichte zu finden und diese dafür umso detaillierter aufzubereiten und auch in der Nachforschung/Recherche jemanden besonders relevanten zu finden.

Besonders inspiriert wurde ich da von Filmen wie “Big Eye” oder Arte Dokumentationen über einzelne Schicksale der Künster:innen (hauptsächlich aber Frauen). Im Vergleich dieser beiden herangehensweisen an Verfilmung: “Big Eye” ist ein Biopic (kurz für “biographical picture”) – ein Filmgenre, das auf dem Leben einer realen Person basiert und Arte Dokus im klassischen Dokumentarstil/manchmal reenacted, finde ich Biopics immer viel mitreisender und emotionaler. Biopics haben nicht den Anspruch, komplett Realitätsgetreu zu sein, sondern mehr einen spannenden Dramaturgischen Bogen zu machen, während Dokumentationen natürlich die Wahrheit abbilden sollen. Ich will in meiner Arbeit natürlich auch nur die Wahrheit zeigen, diesen Teil übernehme ich von der Dokumentation, aber will mit den interaktiven Animationen auch schaffen, dass die User ein unterhaltendes Erlebnis erfahren können, wie es bei einem Biopic der Fall ist.

Darum kurze Stichwort Recherche, wie man den Begriff “Biopic” in der Webbranche übersetzen könnte:

  • Digital Biography
  • Interactive Biopic
  • Digital Memorial
  • Immersive Biography
  • Narrative Web Documentary

Beispiele für Narrative Web Dokus:

http://hollowdocumentary.com/
Ist schon eher alt und nicht die modernste Technologie, aber der Mix aus verschiedenen Medien und auch Sounds und Zahlen die sich erhöhen + der tragischen Geschichte ergibt ein sehr eindrucksvolles Projekt.

https://bear71vr.nfb.ca

Wilde Geschichte über die Vertreibung des Tierreichs durch Menschen in Kanada aus der Ich-Perspektive von Bear 71 erzählt.

Auf der AWWWARDS Webseite gibt es eine Subkategorie namens “Non Profit Websites”, in der es viele Beispiele gibt, die auch Mehrheitlich durch Storytelling versuchen, auf einen Missstand oder ein Problem aufmerksam zu machen.

https://www.awwwards.com/awwwards/collections/nonprofit-websites

Technische Challenges

In der konkreten Umsetzung meines Projektes bzw. des Prototypen der wissenschaftlichen Arbeit geht es um eine Web-Anwendung, die mittels Animationen, gutem Storytelling und interaktiven Benutzermöglichkeiten zu einem immersiven User Erlebnis verhelfen soll. Durch diese spielerische Informationsaufnahme soll vor allem ein emotionaler Zugang zu den bereitgestellten Informationen gegeben werden.

Aus technischer Sicht gibt es dafür einige Aspekte zu berücksichtigen

Framework: Die Grundlage für die Entwicklung

Die Wahl eines geeigneten Frameworks ist entscheidend, um die Entwicklungszeit zu optimieren und die technischen Anforderungen zu erfüllen. Die Auswahl hängt von verschiedenen Faktoren ab:

React, Vue oder Svelte?
React bietet eine breite Community und Bibliotheken wie Three.js für 3D-Animationen und GSAP für Animationseffekte. Vue und Svelte hingegen punkten mit ihrer Einfachheit, was für interaktive Anwendungen von Vorteil sein kann.

Backend-Integration
Wenn die Web-App serverseitige Datenverarbeitung oder Benutzerverwaltung benötigen würde, könnte ein Framework wie Next.js (auf React basierend) oder Nuxt.js (für Vue) sinnvoll sein. Diese ermöglichen serverseitiges Rendering (SSR) und verbessern so die Performance und SEO.
Da aber nur ich die Webseite betreibe und es höchstwahrscheinlich auch keine Content-Änderungen für Redakteure oder andere User geben wird, ist es schon wahrscheinlich, dass ich gar kein backend anbinde. Könnte, falls später mal nötig, auch ganz easy angebunden werden.

WebGL-Integration
Für 3D-Inhalte und Animationen ist die Integration von WebGL unumgänglich. Frameworks wie Three.js bieten hier gute Tools, die mit JavaScript-Frameworks kombiniert werden können. Ich bin mir zwar noch nicht sicher, ob ich 3D Elemente einbinde, aber falls ja, dann würde ich mich gerne im Thema Three.js fortbilden.

https://threejs.org/examples/#webgl_lights_spotlight


Animationen: Performance und Flexibilität

Animationen spielen eine zentrale Rolle im Projekt, um das Storytelling lebendig zu gestalten. Dabei sind folgende technische Anforderungen zu beachten:

Tools wie GSAP oder Lottie
GSAP (GreenSock Animation Platform) ist eine bekannte Bibliothek für detaillierte und performante Animationen. Lottie ermöglicht das Einbinden von Animationen, die direkt in Tools wie After Effects erstellt werden.

Optimierung der Performance
Animationen können die Ladezeit und Performance der Web-App stark beeinflussen. Lazy Loading und die Minimierung der Größe von Assets sind hier essenziell.

Responsive Animationen
Die Animationen müssen auf unterschiedlichen Bildschirmgrößen und Geräten gleich gut funktionieren. Media Queries und relative Maßeinheiten spielen hierbei eine wichtige Rolle.


Interaktivität: Benutzerfreundliche Elemente

Eine interaktive Web-App erfordert robuste und intuitive Interaktionselemente:

Event Listener
Interaktionen wie Mausbewegungen, Scroll-Events oder Touch-Gesten müssen richtig und performant umgesetzt werden.

State Management
Bibliotheken wie Redux (React) oder Pinia (Vue) können helfen, den Zustand der App konsistent zu verwalten, insbesondere bei komplexen Interaktionsmöglichkeiten.

Barrierefreiheit (Accessibility)
Damit alle Benutzer Zugang zu den Inhalten haben, muss die Anwendung barrierefrei gestaltet werden. Dies umfasst Tastatursteuerung, Screenreader-Kompatibilität und gut lesbare Kontraste. Insbesondere bei Web-Anwendungen, die durch Interaktion hervorstechen, kommt die Berrierefreiheit oft zu kurz. Hier besonders viel Zeit einplanen.


Datenverarbeitung und Backend

Falls, wie oben bereits beschrieben, überhaupt ein Backend nötig ist, dann sind folgende überlegungen zu tätigen:

Content Management System (CMS)
Da kein voll Umfangreiches Backend nötig ist, kann für eine einfache Verwaltung der Inhalte ein Headless CMS wie Strapi, Sanity oder Contentful integriert werden.

Datenbanksystem
Falls größere Datenmengen gespeichert werden, könnten relationale (z. B. PostgreSQL) oder NoSQL-Datenbanken (z. B. MongoDB) benötigt werden.


Herausforderungen bei der Performance

Eine immersive Web-Anwendung mit Animationen und Interaktivität kann ressourcen-intensiv sein. Daher ist die Optimierung der Performance essenziell:

Code Splitting und Lazy Loading
Inhalte und Animationen sollten nur bei Bedarf geladen werden, um die Ladezeit zu verkürzen.

Bild- und Asset-Optimierung
Alle Bilder und Medien sollten in modernen Formaten wie WebP gespeichert und komprimiert werden.

Browserkompatibilität
Die Anwendung muss auf allen gängigen Browsern und Plattformen stabil laufen. Testing-Tools wie BrowserStack oder CrossBrowserTesting sind hier hilfreich.


Quellen:

https://joshcollinsworth.com/blog/introducing-svelte-comparing-with-react-vue

https://reactjs.org/docs/getting-started.html

https://vuejs.org/guide/extras/render-function.html

https://spin.atomicobject.com/animations-threejs-gsap/

https://frontend.horse/episode/using-threejs-with-gsap-scrolltrigger

Forschungsfokus: Diskriminierte Kunst

Motivation

Das Ziel meiner Arbeit liegt darin, die Geschichten von Personen zu beleuchten, die aufgrund von Diskriminierung – sei es durch Geschlecht, Herkunft, soziale Zugehörigkeit oder andere Vorurteile – nicht die Anerkennung in der Kunst erfahren haben, die ihnen zusteht. Indem ich diese Geschichten erzähle, möchte ich nicht nur ihre Beiträge zur Kunst sichtbar machen, sondern auch auf die strukturellen Ungerechtigkeiten hinweisen, die dazu führten, dass ihre Werke und ihr Wirken lange Zeit übersehen oder marginalisiert wurden. Es geht darum, diesen Menschen Gehör zu verschaffen und ihre Kunst in unsere heutige Zeit zu holen, um zu zeigen, wie wichtig sie ist. Gleichzeitig soll ihre Geschichte dazu anregen, darüber nachzudenken, wie die Kunstwelt in der Vergangenheit mit Vielfalt und Gleichberechtigung umgegangen ist.


Stichworte

Ich habe ein kleines Brainstorming gemacht, was genau ich repräsentieren will. Folgende Schlagwörter sind hier besonders prominent erschienen:

„Vergessene Künstlerinnen“, „Diskriminierte Kunst“, „Verbrechen in der Kunst“, „Unterrepräsentierte Kunstbewegungen“, „Kunst und Minderheiten“, „queere Kunstgeschichte“

Ursprünglich war mein Wunsch ein feministisches Projekt mit Fokus auf Frauen zu erarbeiten, aber hier gibt es schon sehr viel Aufarbeitung. Natürlich ist das Thema bis heute ein Problem, und man kann auch schwer sagen, dass es schon auserzählt ist, aber die queere Kunstgeschichte ist vielleicht eine Nische, die noch weniger Aufmerksamkeit bekommen hat. Oder vielleicht waren männliche homosexuelle Künstler doch weniger ein Tabu-Thema als meine Hypothese es vermuten lässt. Ich kann mir auch gut vorstellen, das queere Frauen extrem wenig bis keine Repräsentation in dieser Szene hatten. Hier ist aber auch die Schwierigkeit, überhaupt an wissenschaftliches Material zu kommen. Dazu recherchiere ich noch.

Experten Interviews

Ich habe von unserer Lektorin Stefanie Egger einen Kontakt zu einer Frau bekommen, die sich für die Digitalisierung von Kunst einsetzt und die sicherlich einen wertvollen Einblick hat, welche Gruppierung oder auch Hinweise auf Geschichten von Einzelpersonen, die noch unterrepräsentiert sind.

Außerdem werde ich auch meinen alten Kunstgeschichte Professor (der selber Künstler ist) dazu kontaktieren, dieser ist in der Kunstszene gut vernetzt und hat durch seinen Beruf und auch seiner Lebenserfahrung viel Informationen, die meine Arbeit vorantreiben könnte.

Bücher

  • Women Artists: The Linda Nochlin Reader
  • Hidden Histories: 20th Century Women Artists

Film: Big Eyes

Es gibt einen Film, den ich vor ca. 10 Jahren mal gesehen hab und der mich echt unglaublich mitgenommen bzw. auch inspiriert hat. Und zwar war das “Big Eyes” (2014), in Spielfilm der auf die wahre Begebenheit der unterdrückten Künstlerin Margaret Keane durch ihren Ehemann Walter basiert. Ihre Werke wurden nämlich zunächst nicht ihr, sondern ihrem Ehemann zugeschrieben. Walter, selbst ein erfolgloser Künstler, erkannte das kommerzielle Potenzial von Margarets Gemälden und vermarktete sie erfolgreich – jedoch unter seinem Namen. Margaret wurde dabei mehr und mehr in die Rolle seiner „Kunstsklavin“ gedrängt, die heimlich arbeitete, während er den Ruhm einheimste. Aufgrund der gesellschaftlichen Strukturen der Zeit hatte Margaret zunächst keine Möglichkeit, sich gegen diesen Betrug zu wehren. Margaret macht schließlich die Wahrheit öffentlich bekannt und zieht gegen Walter vor Gericht. In einem Prozess wird sie aufgefordert, live im Gerichtssaal ein Gemälde anzufertigen, um zu beweisen, dass sie die wahre Künstlerin ist – und wird damit befreit.

Da Margaret Keane heute eine der bekanntesten Künstlerinnen ihrer Zeit ist, eignet sich ein solcher Fall nicht optimal für meine Zwecke. Aber die Art des emotionalen Storytellings dieses Films und das ein einzelner Fall auch representativ für ein systematisches Problem viel aufzeigen kann finde ich besonders inspirierend auch für meine Arbeit.

Was mir jedoch im Zuge der Recherche zu dieser Story aufgefallen ist, ist, dass es extrem häufig vor kam, dass Frauen “im Schatten” von Männern standen und tatsächlich männliche Kollegen, Lehrer, Partner oder Familienangehörige deren Arbeiten im eigenen Namen vertrieben haben.

Podcast

Revisionist History
https://open.spotify.com/show/2LOJaYKijiwNefCvzczyib?si=81bbf2fa335d44a8


„Revisionist History“ ist ein Podcast, der von Malcolm Gladwell moderiert wird. „Revisionist History“ untersucht Themen, Ereignisse oder Personen, die in der Vergangenheit übersehen, missverstanden oder falsch interpretiert wurden. Gladwell betrachtet diese Geschichten aus neuen, oft überraschenden Blickwinkeln, um zu zeigen, wie kleine Details, kulturelle Verzerrungen oder historische Blindspots größere Konsequenzen haben können.

Datenbanken und Web-Projekte

Auf folgende Webseiten bin ich bei meiner Recherche bisher gestoßen.
Diese könnten auch bei weiterer Nachforschung interessant sein.

https://awarewomenartists.com

Begriffe

“Herstory” = Der Begriff “Herstory” ist ein Wortspiel, das sich aus dem englischen Wort “history” ableitet, jedoch mit dem Fokus auf Frauen und ihre Geschichten. Während history wörtlich “seine Geschichte” (aus his-story) suggerieren kann, betont herstory “ihre Geschichte” (her-story), um auf die oft übersehene oder unterrepräsentierte Rolle von Frauen in der Geschichte hinzuweisen.

Der Begriff wird häufig in feministischen Kontexten verwendet und zielt darauf ab, die traditionelle Geschichtsschreibung zu hinterfragen, die oft von männlichen Perspektiven dominiert ist. Herstory setzt sich dafür ein, vergessene oder marginalisierte Beiträge von Frauen sichtbar zu machen, sei es in der Politik, Wissenschaft, Kunst oder anderen Bereichen. Es geht darum, die Geschichte inklusiver zu gestalten und alternative Perspektiven zu beleuchten.

Quelle: https://en.wikipedia.org/wiki/Herstory

Interessante Persönlichkeit

Sophie Taeuber-Arp (1889–1943):
Eine Schweizer Künstlerin, deren Beiträge zur Dada-Bewegung oft ihrem Mann Hans Arp zugeschrieben wurden.
Ist anscheinend in der Schweiz bereits sehr bekannt. Cool daran ist, dass sie die Großtante von Silvia Boadella ist, und ein lebender Nachkomme würde vielleicht viel interessanten Input hinzugeben können.