Author: tanja.kobler

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.

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

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

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

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.