In diesem Mini-Weberlebnis, im Fachjargon „One Page Story“ genannt, geht es um einen Dialog zwischen einer Hauskatze und einem smarten Assistenten, wie es ihn bereits heute in vielen Haushalten gibt. Anders als in der Realität zeigt der Assistent einen lebensechten Charakter und versucht, die Stimme des Haustiers zu interpretieren und Hilfestellung zu geben. Es kommt soweit, dass der Assistent in einem Vortrag die Arbeitsweise einer Bilderkennung (Computer Vision) erklärt.
Charaktere
Rupert, die Katze
Rupert ist eine gewöhnliche Hauskatze, die am liebsten auf dem Sofa sitzt und miaut. Ob und was genau er mit diesen Geräuschen sagen will, bleibt für uns ein Rätsel.
Sorri, der Computer
Sorri ist ein typischer Smart Home Assistent. Er kann auf Stimmen im Raum reagieren und entsprechende Antworten geben. Wie der Name schon andeutet klappt das nicht immer gut. Seit kurzem hat er jedoch ein neues Software Update bekommen, welches ihm ermöglicht, dank echter KI zu denken.
Entstehungsprozess
Herbst 2020: Im ersten Schritt haben sich alle Studierenden gemeinsam mit dem Thema „Fluid“ auseinander gesetzt und unzählige Ansätze zur Bearbeitung des Themas gefunden. Besonders interessant fand ich das Thema „Neuronale Netze“, die in den vielen Illustrationen im Netz fast wie ein Fluid aussehen. Das Endprodukt der Lehrveranstaltung sollte eine „Geschichte“ sein, die beim Scrollen durch die Website erzählt wird.
Danach habe ich mich genauer mit neuronalen Netzen befasst, die sich im Gehirn verändern und wachsen können. Auch bei künstlichen neuronalen Netzen funktioniert das ähnlich.
Auf einem digitalen Whiteboard „Miro“ habe ich Ideen gesammelt, dem Konzept eine Form gegeben und schließlich ein Storyboard geschrieben.
Ein besonders großer Einfluss war die Erzählweise der Kindersendung „Es war einmal … das Leben“, wo die Protagonisten das Innere des Menschen besuchten. Auch der Grafikstil von „Simon’s Cat“ war mir ein Vorbild.
So wurde das Ergebnis eine Story im direkten Sinne – mit Charakteren und einem Dialog.
Dieser handelt davon, dass eine Katze mit einem Computer spricht und dieser ihr zeigt, wie neuronale Netze funktionieren und dazu führen, dass er mit ihr kommunizieren kann. Kurz darauf folgten die ersten Zeichnungen für die Gestaltung. Die Katze sollte süss, faul und verfressen sein – der Computer hilfsbereit und gut gelaunt. Dessen aussehen ist eine Hommage an den iMac der frühen 2000er Jahre.
Dezember 2020: Nun ging es an die Umsetzung. Die Lehrveranstaltungen im Dezember gaben uns einige Vorschläge, in welcher Technologie die Programmierung stattfinden könnte. Ich entschied mich für GSAP. Es ist ein Framework für viele unterschiedliche Projektarten und hat auch ein Plugin für Scroll-Aktionen. Ich fand auch ein Beispiel für den Aufbau, wie die Story seitenweise durchgeblättert werden kann. (Das nennt sich Scroll Snapping) So sollte verhindert werden, dass beim Betrachten Dialogboxen übersprungen werden. Rein visuell findet jedoch alles auf einem Screen statt. Die Akteure (Katze, Computer, Möbel, etc.) sind am Bildschirm fixiert.
Eine große Herausforderung war, dass Animationsschritte in sehr vielen Fällen nicht an den geplanten Stellen abgespielt wurden. Ich habe daher zusätzlich zu den Bilschirmseiten eine Timeline erstellt und die Javascript Aktionen an die Elemente auf dieser geknüpft. So konnte ich visuell prüfen, ob die Elemente richtig angesprochen wurden.
Jänner 2021: Nach zwei Neustarts, unzähligen Überarbeitungen wurde die Website fristgerecht fertig. Es blieb auch Zeit, die Charaktere weiter zu verfeinern. Dazu nutzte ich ProCreate am iPad, um meinen Zeichenstil einzufangen. Im zweiten Schritt baute ich die Formen in Illustrator nach und verbesserte die Proportionen.
Weitere Infos und Impressum
Diese Abschlussarbeit der Lehrveranstaltung „Interaction Design“ im WS 20/21 ist eine Interaktive „One-Page Story“. Mein Ziel war, ein dynamisches Weberlebnis zu schaffen, welches nur durch scrollen zum Leben erwacht. Das Projekt wurde in klassischem HTML, CSS und JS umgesetzt. Als Animationsframework kam GSAP zum Einsatz.
Idee, Storyboard, Illustrationen der Charaktere, Programmierung: Peter Beck