• cowboy - Interaktive Animationen: Die neue Digital Experience

Interaktive Animationen: Die neue Digital Experience

Die Erkenntnis ist nicht neu und sie ist wissenschaftlich erwiesen: Was sich bewegt, bewegt und erregt die Aufmerksamkeit viel, viel stärker. Deshalb hat sich der Film die letzten Jahre auch zum mächtigsten Marketing-Tool im Web entwickelt – egal ob Erklär-, Produkt- oder Imagefilm.

Aber muss die Bewegung beim Film aufhören? Wenn sie so ein starkes Mittel ist, um Aufmerksamkeit zu erregen, sollte man sie dann nicht noch konsequenter nutzen?

Wir sind der Überzeugung, dass ja. Es wird Zeit, dass man sich die Macht der Bewegung auch in anderen Medien und Kanälen zunutze macht, und Animation und Interaktivität nutzt, um die eigene Website und die Socialmedia Kanäle attraktiver, einzigartiger und lebendiger zu machen.

Von After Effects zur interaktiven Webanimation

Beim Goldenen Westen werden die meisten Motion Projekte in After Effects realisiert. Da aber zukünftig interaktive Animationen im Web eine immer größere Rolle spielen werden, haben wir uns gefragt, wie man komplexe Animationen aus After Effects ressourcenschonend auf eine Webseite stellen kann und wie man damit interagieren kann.

Wir haben eine vielversprechende Möglichkeit gefunden: Das bodymovin Plugin für After Effects von Hernan Torrisi gibt uns genau solche Möglichkeiten an die Hand.

Einmal installiert, transferiert es After Effects Animationen in ein handliches JSON Format. Dieses wird von der dazugehörigen JavaScript Bibliothek ausgelesen und in Form einer SVG Animation im HTML gespiegelt. Die bodymovin API ermöglicht es dann per JavaScript die Animationen zu manipulieren.

Hier, was wir draus gemacht haben. Wie wir es gemacht haben, kann man auf unserem Codepen Account sehen.

See the Pen bodymovin cowboy test by Goldener Westen (@goldenerwesten) on CodePen.

Animierte/ Interaktive Websites

Eine gute Website unterstützt ihre Nutzer – nicht nur durch gutes Design und eine klare Struktur, sondern auch durch eine gute Usability der gesamten Seite. Dabei können Animationen sehr hilfreich sein. Sie erzeugen Aufmerksamkeit und verdeutlichen Zusammenhänge und runden so den gesamten Eindruck ab.

Beispielhaft möchten wir hier die Webseite, welche wir für Stimmt entwickelt haben, anführen:

Animierte / Interaktive Landingpages für Erklärvideos

Wenn man Erklärfilmen die gewünschte Aufmerksamkeit zukommen lassen möchte, muss man sie auch auf der Website gut inszenieren. Viel zu oft verkümmern hochwertig konzipierte und perfekt auf den Kundenfokus hin optimierte Filme immer noch irgendwo klein in einer Ecke und werden – wenn überhaupt – nur durch Zufall entdeckt.

Für Lexware’s Businessplan haben wir die entsprechenden Erklärfilme auf einer One-Pager Seite visuell interessant inszeniert:

Animierte / Interaktive Infografiken

So nützlich eine Infografik auch ist – oft braucht es seine Zeit, bis man sich mit einer Infografik vertraut gemacht hat und verstanden hat, welche Zusammenhänge sie verdeutlichen will. Je komplexer eine Infografik ist bzw. je komplexer die Inhalte, die sie darstellen will, desto länger kann es dauern bis man sie erfasst hat. Animation lenkt den Blick des Betrachters und hilft ihm zu verstehen, wie und in welcher Reihenfolge die dargestellten Zusammenhänge und Information “gelesen” werden müssen. Und überhaupt macht Bewegung und die Möglichkeit zur Interaktivität einfach mehr Lust und Neugier darauf, sich mit einem Thema zu befassen.

Hier eine kleine Spielerei, die das Ganze veranschaulicht:

Wie soll das nächste Projekt sein? (wähle zwei)

Gut

Preiswert

Schnell

Basiert auf dem GitHup Projekt: good-cheap-fast

erklaerfilm - Interaktive Animationen: Die neue Digital Experience

Ihr Ansprechpartner für Fragen und weitere Informationen:

Arne Keunecke
arne@goldenerwesten.com
030 847 10 654

2017-06-23T11:00:41+00:00

Ein Kommentar

  1. Arne Keunecke 12. Mai 2017 um 12:00 Uhr - Antworten

    hier noch ein super Artikel zum Thema Interactive Animation von Chris Gannon
    http://codepen.io/chrisgannon/post/exciting-times-for-interactive-animation

Hinterlassen Sie einen Kommentar