Motion Design mit Airbnb’s Lottie

Die Herausforderungen eines UX Designers sind vielseitig, wobei die Wünsche und Erwartungen des Users immer im Mittelpunkt stehen. Mobile Interfaces verständlich und intuitiv zu gestalten, gehören somit zu den Hausaufgaben eines guten UX Designers. Analysiert man Usergruppen, erstellt Personas und führt Gespräche mit Stakeholdern, so werden kaum Forderungen in Richtung Motion Design identifiziert. Ist es nun notwendig, Animationen in einem UI Konzept zu berücksichtigen? Wir sagen ja!

Animations können helfen, die Bedienung eines Mobile Interfaces verständlicher und attraktiver zu gestalten und lenken zudem – bei sinnvoller und gut durchdachter Konzeption – in die gewünschte Richtung.

 

How to handle Motion Design

Oft bergen Umsetzung und Feinschliff von Animationen einen hohen Zeitaufwand und technische Herausforderungen. Mit ein paar wichtigen Regeln können hier Effizienz und Qualität optimiert werden:

Im ersten Schritt müssen grafische Elemente von einem Grafikdesigner erstellt werden, um anschließend von einem Motion Designer mittels Animation Tools wie Facebook Origami, Quartzcode, Adobe After Effects, etc. animiert werden zu können. Indes bleibt für Mobile Entwickler die Herausforderung, Animationen simple und zuverlässig in Apps zu integrieren.

Für die Umsetzung bieten sich mehrere “klassische” Ansätze an, die allerdings nicht nur Vorteile mit sich bringen:

Videos: besitzen keine Transparenz und sind ressourcenhungrig. Zusätzlich werden für verschiedene Auflösungen eigene Video Exports benötigt.

Gifs: limitiert in der Farbdarstellung der Animation mit fehlender echter Transparenz (z.B. können Schatten-Effekte schlecht dargestellt werden). Zudem nehmen die Dateigrößen schnell überhand. Auch hier werden für verschiedene Auflösungen eigene Gif Exports benötigt.

PNG-Sequenzen: Hier gilt ein ähnliches Umsetzungsprinzip wie bei Gifs. Der Vorteil liegt aber klar in der vollen Farbdarstellung und der Möglichkeit echter Transparenzen. PNG-Sequenzen benötigen jedoch ebenso für jede Auflösung eine separate Bildreihenfolge und sind zudem sehr ressourcenhungrig.

Native Animations: Hier bilden Mobile App Entwickler Animationen programmatisch für ihre Plattform nach. Das bringt klare Vorteile mit sich: Auflösungsneutralität, niedrige Dateigrößen und hoher Qualitätsfaktor. Die Nachteile: Dieser Prozess ist recht zeitintensiv und muss für jede Plattform individuell umgesetzt werden, was gerade im Zuge von App-Wartungen berücksichtigt werden muss.

Während große App-Produkt-Hersteller (Facebook, Twittter, Uber & Co.) auf Native Animations setzen, bleibt bei Dienstleistern die Herausforderung, Animations in entsprechende Projektbudgets zu gießen. Dies führt leider oft dazu, dass auf eine UI Optimierung in Form von Animationen verzichtet wird.

Ein neuer Lösungsansatz: Lottie von Airbnb

Mit dem kürzlich vorgestellten Open-Source-Tool “Lottie” liefert Airbnb eine deutliche Hilfestellung. Airbnb’s Lottie – eine Bibliothek für iOS, Android und React Native – ermöglicht auf eben diesen Plattformen die Einbindung einer Animationsdatei, welche gleichzeitig in nativen Code übersetzt und wiedergegeben wird. Diese Animationsdatei kann mit dem Adobe After Effects Plugin Bodymovin erstellt und native eingebunden werden.

Die üblichen Aufgaben für Motion Designer bleiben indes bestehen. So erstellt dieser gewünschte Animationen nach wie vor in Adobe After Effects, exportiert diese mittels Bodymovin und übergibt dann die fertigen JSON Dateien an die Mobile Entwickler. Daraus resultiert ein Motion Design höchster Qualität bei gleichzeitig geringem Zeitaufwand.

Unser Fazit: Lottie ist aktuell das Tool, um Animationen hoch optimiert auf die Straße zu bringen. Das freut nicht nur uns, sondern auch viele andere UX Designer der Kreativwelt.

Daumen hoch, Airbnb!

ShareTw.Fb.Pin.
...

This is a unique website which will require a more modern browser to work!

Please upgrade today!