Verwenden der 12 Animationsprinzipien von Disney in Ihrem nächsten Webdesign-Projekt

Genau in dem Moment, in dem ich dies tippe, stehen in meinem Büro 17 Disney-Irgendwas-oder-andere an den Wänden und Regalen. Siebzehn. Sogar ich bin überrascht. So sehr ich Disney-Alles liebe, die Magie, die durch die 12 Prinzipien der Animation entsteht, entgeht sogar mir, wenn ich einen ihrer Filme sehe.

Und das ist der Punkt. Die 12 Prinzipien der Animation sind subtil. Sie hinterlassen beim Betrachter Eindrücke, ohne dass der Betrachter es merkt. Sie bringen uns zum Lachen, Weinen, Mitgefühl und Träumen, manchmal innerhalb derselben Szene. Und sie erschaffen Charaktere und Objekte, die so realistisch aussehen und sich bewegen, dass Sie sie berühren und berühren möchten. (Hast du jemals Coco gesehen? Ich lasse meinen Fall zurück.)

Diese 12 Prinzipien der Animation bilden nun die Grundlage für alle Motion-Arbeiten, Disney und andere. Sie sind auch für Bereiche außerhalb der Animation relevant, z. B. Webdesign.

Eine kurze Geschichte der 12 Prinzipien der Animation

Die 12 Prinzipien der Animation wurden von Ollie Johnston und Frank Thomas eingeführt, zwei von Disneys Nine Old Men, der Kerngruppe der Animatoren, die in den 1920er und 30er Jahren beigetreten sind. Johnston und Thomas schrieben 1981 The Illusion of Life: Disney Animation und es blieb die „Bibel“ der Animation. Das Buch wirft einen genauen Blick auf die Ansätze von Disneys Top-Animatoren, um die 12 Prinzipien zu extrahieren. Obwohl diese Prinzipien ursprünglich für handgezeichnete Animationen gedacht waren, haben sie den technologischen Wandel überlebt und werden heute von Computeranimatoren (wie Pixar) und Webdesignern verwendet.

Die 12 Prinzipien der Animation und wie sie das Webdesign beeinflussen

Nicht umsonst haben sich diese Prinzipien bewährt. Manchmal sind die Basics immer noch die besten.

1. Squash und Stretch

Quelle: Chris Gannon über Giphy

„Squash and Stretch“ ist das wichtigste der Animationsprinzipien. Es gibt Animationen Flexibilität, Schwerkraft, Gewicht und Masse. Wenn sich ein Objekt in Bewegung befindet, behält es nicht die gleiche Form.

Die Lautstärke muss jedoch konstant bleiben. Das Dehnen erfordert, dass das Objekt dünner und länger wird; Quetschen macht es kürzer und breiter. Wenn Sie es nur dünner oder kürzer machen würden, würde es nicht das gleiche Volumen behalten.

Im Webdesign wird „Squash and Stretch“ verwendet, wenn Objekte ins Auge fallen sollen. Wenn ein Objekt so aussehen muss, als hätte es eine physikalische Masse, kann dieses Prinzip den Zweck erfüllen.

2. Vorfreude

Quelle: CentoLodigiani über Giphy

Vorfreude bereitet den Betrachter auf das vor, was passieren wird, und kann die resultierende Handlung realistischer machen. Sie würden sich nicht hinsetzen, ohne vorher die Knie zu beugen, oder etwas fangen, ohne den Arm auszustrecken, oder? Antizipation führt den Charakter oder das Objekt durch eine oder zwei realistische Bewegungen, um dem Betrachter einen Hinweis darauf zu geben, was gleich passieren wird.

Im Webdesign wird Antizipation in Übergängen verwendet. Wenn ein Besucher beispielsweise ein Informationsfeld ausfüllt und erforderliche Informationen auslässt, kann das Feld ein wenig hüpfen, um seine Aufmerksamkeit zu erregen und zu kommunizieren: „Hey, da stimmt etwas nicht“. Eine andere Möglichkeit, Vorfreude zu nutzen, besteht darin, Gegenstände leicht zu verkleinern und sie dann beim Schweben größer zu machen.

3. Inszenierung

Die Inszenierung führt den Blick des Betrachters dahin, wo er hinschauen soll („führende Linien“ in der Fotografie). Spielen Sie den Rest der Szene herunter, damit sich der Betrachter auf das konzentriert, was Sie möchten. Eine weitere Komponente der Inszenierung ist, dass hinter jeder Handlung eines Charakters eine Absicht steht. Wenn Sie jeden Frame der Animation isolieren, können Sie die Absicht hinter der Pose erkennen.

Staging ist eines der einfacheren Prinzipien, die auf Webdesign und Visuals auf Websites angewendet werden können. Das passiert, wenn auf einer Webseite ein Pop-up erscheint – die Bewegung des Pop-ups lässt Sie sich darauf konzentrieren und der Rest der Seite wird verschwommen, abgeblendet oder verdeckt. Du beleuchtest im übertragenen Sinne den wichtigsten Teil der „Bühne“ und hältst alles andere im Hintergrund. Auch hierfür können Licht und Schatten verwendet werden, oder Webdesigner können dieses Prinzip anwenden, indem sie einfach unnötige Details loswerden.

4. Geradeaus und Pose zu Pose

„Geradeaus“ und „Pose zu Pose“ sind zwei verschiedene Möglichkeiten, Animationen zu erstellen. Bei „geradeaus“ werden Frames in der Reihenfolge von Anfang bis Ende erstellt. Dies verleiht der Animation dynamische, flüssige Bewegungen. Mit „Pose zu Pose“ werden der erste und letzte Frame erstellt, dann werden die notwendigen Zwischenposen hinzugefügt.

Quelle: Vincenzo Lodigiani, Motion Artist

Heute verwendet die Computeranimation „Pose to Pose“, weil der Computer die fehlenden Frames automatisch ausfüllen kann. Schauen Sie sich die Animationen auf Tschechow an – Sie können sehen, dass sie nicht realistisch flüssig sind (und das sollten sie auch nicht sein). Wenn Sie auf Ihrer Website eine „Straight-Ahead“-Animation erstellen möchten, können Sie die Timing-Funktion steps( ) verwenden, mit der Sie mehrere Frames definieren und in einer Sequenz anzeigen können.

5. Durchgehende und überlappende Aktion

Das Prinzip „Folgen und Überlappen von Aktionen“ besagt, dass sich Teile des Subjekts bewegen und mit unterschiedlichen Geschwindigkeiten anhalten, wenn sich eine Figur oder ein Objekt in Bewegung befindet und dann stoppt. Dies imitiert reale Gesetze der Physik.

• Überlappende Aktion: Verschiedene Teile des Motivs bewegen sich mit unterschiedlichen Geschwindigkeiten.
• Follow Through: Lose verbundene Teile des Objekts bewegen sich noch einige Sekunden weiter, nachdem das Hauptobjekt aufgehört hat, sich zu bewegen. Diese Teile bewegen sich über den Haltepunkt hinaus und ziehen sich dann zum Objekt zurück.

Im Beispiel unten bewegen sich Rapunzels Arme und Beine mit einer anderen Geschwindigkeit als ihr Kopf – das ist eine überlappende Aktion. Als sie aufhört zu wirbeln, schwingt ihr Haar noch eine Sekunde weiter – das heißt durchziehen.

„Ziehen“ ist eine verwandte Technik, bei der das Gegenteil passiert – Teile des Objekts bewegen sich und dann holt der Rest auf. Alle diese Techniken zeigen realistische Bewegungen oder können die Bewegung für einen komischen Effekt übertreiben.

Auch „Moving Hold“ hängt damit zusammen. Verbleibende Charaktere haben noch eine leichte Bewegung, damit die Animation nicht stagniert.

Im Mobile- und Webdesign zeigen „follow through“ und „overlapping action“ dem Betrachter, dass eine Aktion absichtlich gestoppt wird. Andernfalls könnten Sie denken, dass es einfach nicht mehr funktioniert. Sehen Sie sich zum Beispiel an, wie die Wunderlist-App auf meinem iPhone anzeigt, dass ich ein Listenelement verschiebe. Der Artikel nimmt eine andere Farbe an und wird größer, wenn ich ihn bewege, und kehrt dann zu seiner ursprünglichen Farbe und Größe zurück, wenn ich fertig bin. So weiß ich, dass die Aktion abgeschlossen ist.

Dieses Prinzip können Sie auch auf Ihrem iPhone in Aktion sehen. Wenn Sie zwischen Ansichten wechseln oder Symbole auf dem Startbildschirm verschieben, bewegen sich die Elemente mit leicht unterschiedlichen Geschwindigkeiten. So kommuniziert Ihr iPhone: „Dinge ändern sich“.

6. Langsam rein und langsam raus

Das Prinzip „slow in and slow out“ besagt, dass ein Objekt langsam anfängt, sich zu bewegen, an Schwung gewinnt und schneller wird und dann wieder verlangsamt, wenn es zum Stillstand kommt. Grundsätzlich müssen Bewegungen beschleunigt und verlangsamt werden, um natürlich zu sein. Um diesen Effekt zu erzielen, gibt es zusätzliche Frames am Anfang und am Ende einer Aktion, um die allmähliche Zunahme und Abnahme der Bewegung zu betonen.

Quelle: Die Illusion des Lebens auf Tumblr

Für das Webdesign hat CSS zwei Timing-Funktionen, die sich auf dieses Prinzip beziehen: Ease-in und Ease-out. Ein Beispiel finden Sie auf der Your Plan, Your Planet-Website (klicken Sie zuerst auf "Los geht's").

7. Lichtbogen

Wie viele der anderen 12 Prinzipien der Animation basiert „Arc“ auf Physik. Objekte folgen normalerweise einer Art von Bogen, wenn sie sich aufgrund der Schwerkraft bewegen. Wenn sie gerade bleiben würden, wäre die Bewegung mechanisch, nicht realistisch.

Dies gilt auch für alle Bewegungsarten, nicht nur für Low-to-high-to-low-Bögen:

Im Webdesign lässt sich das „Bogen“-Prinzip nutzen, indem man natürlich bogenförmige Animationen erstellt, aber auch ein Element rotieren lässt, etwa während der Ladezeiten.

8. Sekundäre Aktion

Eine Nebenhandlung betont die Haupthandlung, ohne davon abzulenken. Außerdem verleiht es Charakteren und Objekten mehr Dimension und haucht einer Szene Leben ein. Das Prinzip der Inszenierung spielt eine Rolle, denn die Haupthandlung muss noch im Mittelpunkt stehen.

Eine sekundäre Aktion muss nicht außerhalb des Hauptobjekts liegen. Es kann ein Charakter sein, der beim Gehen pfeift oder Emotionen ausdrückt, indem er die Augenbrauen hochzieht.

Im Mobile- und Webdesign wird das Prinzip der „sekundären Aktion“ gesehen, wenn Elemente aus dem Weg geräumt werden, um Platz für ein neues Element zu schaffen, wie z. B. wenn Sie Apps auf Ihrem iPhone neu anordnen. Dies kann Hand in Hand gehen mit „Folge- und Überlappungsaktionen“, die diese Aktionen betonen.

9. Timing

Das Timing ist ziemlich einfach und hängt mit „slow in and slow out“ zusammen. Das Prinzip besagt, dass sich Elemente konsequent auf natürliche Weise bewegen sollten, wie sie es in der realen Welt tun würden. Zur Betonung können sie absichtlich beschleunigt oder verlangsamt werden. Die Anzahl der verwendeten Frames bestimmt das Timing – mehr Frames erzeugen eine langsamere Aktion, weniger Frames erzeugen eine schnellere.

In diesem Beispiel haben Daffy Ducks erste Aktionen ein natürliches Timing, und dann ist die letzte Aktion, wenn er sich dem Betrachter nähert, absichtlich schnell zur Betonung.

Das Timing hilft dem Betrachter auch, das Gewicht der Objekte im Verhältnis zueinander zu verstehen. In diesem Beispiel hebt der Charakter die Gewichte langsam und lässt sie schnell fallen, um zu zeigen, dass sie schwer für ihn sind:

Quelle: @scottthigpen auf Giphy

Im Webdesign wird Timing verwendet, um Elemente entweder etwas länger zu halten oder schnell zu verschwinden, insbesondere wenn auf Benutzerinteraktionen reagiert wird. Wenn ein Benutzer beispielsweise ein Menü schließen möchte, können Sie das Timing so einstellen, dass es 300 ms lang bleibt. Wenn sie auf ein Element in der Navigationsleiste tippen, möchten Sie, dass die Aktion schnell (100 ms) ausgeführt wird.

10. Übertreibung

Auch wenn viele der 12 Prinzipien der Animation auf die Realität ausgerichtet sind, ist das Schöne an der Animation, dass sie nicht real ist. Das Prinzip der „Übertreibung“ besagt, dass zu viel Realismus von dem ablenken kann, was Animationen am besten können: unterhaltsam. Übertreibung wird verwendet, um Charaktere und Objekte interessanter zu machen. Es nimmt die Realität und dreht sie eine Stufe höher, gerade genug, damit die Szene noch glaubwürdig ist. Übertreibung erfordert Zurückhaltung, damit die Szene nicht abstrakt oder surreal wird.

Im Webdesign werden Objekte nach oben oder unten skaliert, um Aufmerksamkeit zu erregen oder abzulenken. Wenn ein Benutzer auf einem bestimmten Teil der Website aktiv ist, z. B. auf einem Formular, kann es wachsen, während andere Elemente schrumpfen. Dies ähnelt dem „Staging“-Prinzip, insbesondere wenn Sie an Popup-Formulare denken.

11. Solide Zeichnung

Quelle: Die Illusion des Lebens auf Tumblr

Obwohl Animation technisch gesehen 2D ist, muss sie realistisch in 3D dargestellt werden. Das Prinzip des „soliden Zeichnens“ könnte auch „Perspektive“ genannt werden, da es darum geht, zeichnen zu können und Grundlagen zu verstehen wie:

• Anatomie
• Gleichgewicht
• Konsistenz
• Licht und Schatten
• Volumen
• Gewicht

Für Webdesigner zeigt das Hinzufügen von Tiefe zu einem Element den Benutzern, dass sie damit interagieren können. Dies können Sie auf unserer Website in Aktion sehen. Beobachten Sie, wie die Schaltfläche "Zum Download beitreten" rosa wird, wenn ich nach unten scrolle:

12. Einspruch

„Appeal“ ist möglicherweise das kniffligste der 12 Prinzipien der Animation, das es zu meistern gilt. Sie sollten in irgendeiner Weise attraktiv und charmant sein, körperlich oder anderweitig. Es gibt kein Rezept, um dies richtig zu machen, aber solide Charakterentwicklung und Storytelling sind die wichtigsten Zutaten.

In der Animation wird nicht jeder einzelne Charakter ansprechend sein – der Bösewicht ist ein Eckpfeiler der Disney-Filme. Die Art und Weise, wie sie präsentiert werden, sollte dennoch Charisma haben und das Publikum interessieren.

Im Webdesign bedeutet „Appeal“, dass die Website als Ganzes ansprechend, angenehm und einfach zu bedienen ist.

Einpacken

Die 12 Prinzipien von Disney können bei einfachen Animationen hilfreich sein, beispielsweise wenn Sie ein interaktives Spiel auf Ihrer Website erstellen, aber sie können auch beim Design für alle Arten von Webseiten helfen. Die meisten Verbraucher sind wie ich, wenn es um Disney-Filme geht: Ich weiß, dass ich etwas mag und mein Gehirn die Hinweise verarbeitet, aber ich kann nicht genau sagen, warum ich diese Reaktionen habe. Die Aufgabe des Webdesigners besteht darin, zu antizipieren, was ein Besucher denkt und tut, und ihn dann auf subtile Weise zu den richtigen Aktionen zu führen.

Suchen Sie nach noch mehr Möglichkeiten, mit Ihrem Publikum in Kontakt zu treten? Lesen Sie unseren Blogbeitrag über die Verwendung von Farbgefühlen.