Kürzlich habe ich einen sechzig Tage dauernden Sprint abgeschlossen, bei dem ich jeden Tag handcodierte Zombie-CSS-Animationen veröffentlichte. Ich habe viel gelernt, aber es hat mich auch zurück in die Filmschule versetzt und mich an so vieles erinnert, was ich über Storytelling, Kinematografie und Kunst gelernt habe.
Es stellt sich heraus, dass vieles von dem, was ich damals gelernt habe, für Websites relevant ist, insbesondere für Webanimationen. Sarah Drasner hat die Verbindung zwischen Theater und Entwicklung hergestellt, und ich dachte, ich würde einige dieser Ideen im Hinblick auf den Film weiter ausführen.
Eine Geschichte macht alles ansprechender
Menschen lieben Geschichten. Ich brauche Ihnen keine Statistiken über die Milliarden von Dollar zu nennen, die jedes Jahr für Shows, Bücher und Spiele ausgegeben werden. Wenn Sie eine Geschichte in eine Website einbauen können – insbesondere wenn es um Animationen geht –, wird sie für Ihr Publikum umso interessanter und ansprechender sein.
Es gibt viele Möglichkeiten, was eine „Geschichte“ ist, aber wenn es um das Web geht, wo Animationen schnell oder subtil sein können, denke ich, dass eine Geschichte nur zwei Dinge erfordert: einen Charakter und ein auslösendes Ereignis (was einfach ein Handlungspunkt ist, der den Protagonisten – oder die Hauptfigur – in die Geschichte bringt).
Nehmen Sie die „Magical Oops“-Demo, die ich auf CodePen erstellt habe
Es passiert nicht viel, aber es gibt eine Geschichte. Wir haben einen Charakter, den Wissenschaftler, der ein auslösendes Ereignis hervorruft, als er den Schrumpfstrahl auf den Zombie abfeuert. Anstatt den Zombie zu schrumpfen, schrumpft der Strahl den Hut des Zombies, um ein Kaninchen zu enthüllen (und es schließlich zu tragen). Werden Sie sich zwangsläufig mit diesen Charakteren identifizieren? Wahrscheinlich nicht, zumindest nicht persönlich. Aber die Tatsache, dass ihnen etwas passiert, ist genug ein fesselnder Haken, um Sie einzubinden.
Sicher, ich neige zu lustigen und albernen Handlungssträngen, aber der Ton einer Geschichte kann ernsthaft oder jede andere Menge von Dingen sein.
Ich bin zuversichtlich, dass Sie eine Geschichte finden werden, die zu Ihrer Website passt.
Eine Geschichte macht alles persönlicher
Menschen anthropomorphisieren alles und jedes. Sie wissen genau, wie sich das anfühlt, wenn Sie sich jemals mit Charakteren in einem Pixar-Film wie „Toy Story“ oder „Alles steht Kopf“ identifiziert haben. Der von Ihnen hinzugefügte Charakter muss kein buchstäblich lebendes Wesen oder ein Vertreter eines lebenden Wesens sein. Mein Gott, meine Geschichten handeln von den *Untoten*.
Wie hat das mit dem Web zu tun? Nehmen wir an, Ihre App gratuliert Benutzern, wenn sie eine Aufgabe abgeschlossen haben, so wie Slack es tut, wenn alle ungelesenen Threads gelöscht wurden.
Der Punkt ist, jeder Bewegung, die Sie erstellen, etwas Persönlichkeit und Intentionalität zu verleihen. Es geht auch darum, die Geschichte – die Benutzeraufgabe, ungelesene Nachrichten zu überprüfen – zu einem natürlichen (und in diesem Fall zu einem glücklichen) Abschluss zu bringen. Eine solche Rückmeldung ist nicht nur informativ, sondern macht den Benutzer auf eine persönliche Weise Teil der Geschichte.
Wenn ein Betrachter das Thema der Geschichte verstehen kann, wird er verstehen, warum sich etwas bewegt oder verändert. Er wird es als Charakter sehen – auch wenn das Thema der Benutzer ist. Das ist es, was etwas persönlich macht. (Sie haben es verstanden! Hier ist ein Pony. 🐴)
Achten Sie auf das Grinsen des Menschen in meinem „Undead Seat Driver“-Pen
Das Grinsen führt ein emotionales Element ein, das die Geschichte weiter bereichert, indem es die Hauptfigur nachvollziehbarer macht.
Lenken Sie die Aufmerksamkeit mit visueller Tiefe
Einer der großartigsten Zombiefilme aller Zeiten, Citizen Kane, erfreute sich aus verschiedenen Gründen großer Beliebtheit. Es ist eine wunderbare Geschichte mit großartigen schauspielerischen Leistungen, zum einen, aber es gibt noch etwas anderes, das Sie heute vielleicht nicht bemerken, das damals revolutionär war: tiefen scharfen Fokus. Der tiefe Fokus ermöglichte es, dass Dinge im Vordergrund, im Hintergrund und im mittleren Bereich gleichzeitig scharf waren. Davor war es nur möglich, einen Brennpunkt gleichzeitig zu verwenden. Der tiefe Fokus ließ den Film fast 3D-mäßig wirken.
Wir sind im Web nicht durch Kameraobjektive eingeschränkt (nun, abgesehen von eingebetteten Medien, nehme ich an), aber eine Sache, die den tiefen Fokus von Citizen Kane so gut macht, ist, dass Regisseur Orson Welles die Aufmerksamkeit des Zuschauers zu verschiedenen Zeiten auf verschiedene Ebenen lenken konnte. Er hatte manchmal sogar mehrere Dinge auf mehreren Ebenen geschehen, aber das war immer eine bewusste Entscheidung.
Arbeit mit tiefem Fokus im Web findet eigentlich schon seit einiger Zeit statt, auch wenn es nicht so genannt wird. Denken Sie an Parallax-Scrolling und wie es Tiefe zwischen Hintergründen hinzufügt. Es gibt auch das beliebte Modal-Muster, bei dem ein Element den Vordergrund dominiert, während der Hintergrund entweder abgedunkelt oder verschwommen ist.
Das war die Idee hinter meinem „Hey, Hey, Hey!“-Pen, der mit einer Figur in einem weit entfernten Fokus beginnt, die einem Zombie Platz macht, der im Vordergrund erscheint
Das Gegenteil passiert hier in meinem „Nobody Here But Us Humans… 2“-Pen
Versuchen Sie, eine Website als 3D-Raum zu betrachten, und Sie werden Möglichkeiten eröffnen, die Sie vielleicht noch nie in Betracht gezogen haben. Und obwohl es 3D-Transformationen gibt, die derzeit in Ihrem Browser funktionieren, ist das nicht alles, wovon ich spreche. Es gibt unzählige Möglichkeiten, einen 3D-Effekt zu „fälschen“, indem man Schattierung, Schatten, relative Größe, Unschärfe oder andere Arten von Verzerrungen verwendet.
Zum Beispiel habe ich eine Stapelreihenfolge verwendet, um einen mehrdimensionalen Raum in meinem „Finally, alone with my sandwich…“-Pen zu imitieren. Beachten Sie, wie die Kopfdrehung des Menschen dem Effekt etwas mehr Glaubwürdigkeit verleiht
Heben Sie Animationen mit Szenen auf ein neues Level
Einige der Arbeiten, auf die ich am stolzesten bin, sind die, bei denen ich über alberne Charaktere, die alberne Dinge tun, hinausgegangen bin (obwohl ich auch darauf stolz bin). Mir fallen zwei Animationen ein.
Das erste ist, was ich „Zombie Noon 2“ nenne
Der Grund, warum mir diese besonders auffällt, ist, wie die Kamera den Zuschauer plötzlich (und möglicherweise als unerwarteter Plot-Twist) zu einem Charakter in der Geschichte macht. Sobald die Schüsse des Zombies abgefeuert sind, rollt die Kamera um und enthüllt im Wesentlichen, dass Sie es sind, der erschossen wurde.
Das zweite Stück, das mir in den Sinn kommt, heißt „Lunch (at) Noon“
(Ich hatte anscheinend einen gewissen Spaß in der Mittelschule, Zombies Hüte vom Kopf zu schießen. *Schulterzucken* Leicht belustigt zu sein, ist billige Unterhaltung.)
Auch hier versetzt die Kamera Dinge in eine Art Ich-Perspektive, bei der wir einem Zombie-Koch gegenüberstehen, dem der Hut vom Kopf geschossen wird. Der Clou kommt, als darunter ein Ratatouille-ähnlicher Charakter enthüllt wird, der eine neue Szene auslöst, indem er auf ihn zoomt. Beobachten Sie, wie sich seine Augen verengen, wenn der Fokus auf ihn gerichtet wird.
Die Verwendung der „Kamera“ ist eine fantastische Möglichkeit, eine Animation auf ein neues Level zu heben; sie erzwingt die Beteiligung des Betrachters. Das bedeutet nicht, dass die Kamera bei jedem Wendepunkt und bei jeder Animation schwenken, fliegen und zoomen sollte, aber der Wechsel von einer 2D- zu einer 3D-Perspektive – wenn gut gemacht und zur Vertiefung des Erlebnisses eingesetzt – kann das Benutzererlebnis damit verbessern.
Es stellt sich also heraus, dass meine Filmausbildung sich wirklich ausgezahlt hat! Es gibt so vieles, das direkt auf das Web anwendbar ist, und hoffentlich sehen Sie dieselben Korrelationen, die ich entdeckt habe.
Ich wäre nachlässig, wenn ich etwas Wichtiges in diesem Artikel nicht erwähnen würde. Obwohl ich denke, dass das Ausleihen von Konzepten aus Geschichten und Storytelling wirklich großartig ist und den Unterschied zwischen guten und großartigen Erlebnissen ausmachen kann, sind sie nicht in jeder Situation die richtige Wahl. Zum Beispiel, was ist der Sinn davon, einen Benutzer durch eine geschichtsähnliche Erfahrung auf einer Seite mit Nutzungsbedingungen zu schleusen? Rechtliche Inhalte sind normalerweise bereits eine etwas angespannte Lektüre, daher ist es vielleicht nicht die beste Idee, mehr Spannung hinzuzufügen. Aber hey, wenn Sie in der Lage sind, eine Geschichte einzuführen, die die Spannung dieses Kontexts mildert, dann nur zu! Und vergessen wir nicht die Benutzer, die reduzierte Bewegung bevorzugen.
Fazit: Diese Ideen sind keine Allheilmittel für alle Fälle. Sie sind Werkzeuge, die Ihnen helfen, darüber nachzudenken, wie Sie Ihre Website und Ihre Animationen auf die nächste Stufe heben und das Benutzererlebnis auf angenehme Weise verbessern können.
Ich liebe die Codepen-Einbettungen! :)