blogpost_titelbild_06.jpgFoto: Disney

Sie möchten ihre Kunden mit Animationen begeistern und Sie gleichzeitig vor langen Ladezeiten schützen?

In diesem Artikel erfahren Sie, die zurzeit besten Lösungen für interaktive Animationen
und wie Sie diese mit einfachen Mitteln nutzen können. Da ihre Zeit kostbar ist gehe ich nur auf die wichtigsten Punkte ein.

 

Warum ich diesen Artikel schreibe?

Viele stehen vor der Herausforderung Animation so bereit zu stellen, dass diese schnell geladen werden und auf jedem Endgerät funktionieren. Mit diesem Problem haben wir uns intensiv beschäftig und smarte Lösungen für unsere Kunden gefunden. Ich möchte diese Techniken einfach und kurz erklären, sodass Sie diese Systeme kennen und je nach Bedarf für ihre Anwendungen nutzen können.

 

Welchen Nutzen bringt eine interaktive Animation?

Das Marketing kann auf wichtige Dinge leichter aufmerksam machen. Das Auge kann gelenkt werden und damit die Benutzerfreundlichkeit von zum Beispiel Formularen erhöht werden. Natürlich können Sie ihre Nutzer auch einfach nur unterhalten und somit eine längere Verweildauer auf ihrer Seite erreichen.
Sie können ihre Interessenten sogar begeistern, wenn durch leichte Animation das Feeling des Designs unterstrichen wird. Dadurch kommt es zu einem besserem Gesamteindruck und das Markenerlebnis wird intensiver aufgenommen.

 

Grundsätze guter Animationen
 

  1. Für Animation mit denen man interagieren kann, zählt der Grundsatz wie für jede gute Benutzeroberfläche (UI):

„Ein gutes UI ist wie ein Witz.
Also am besten,
wenn man ihn nicht erklären muss"

  1. Gute Animation sind schlank. Vermeiden Sie große Datenmengen. Diese führen zu langen Ladezeiten und damit zu Abbrüchen. Ihr Interessent wird ihre Anwendung enttäuscht verlassen.
     
  2. Weniger ist mehr. Zu viele verschiedene Animationen stören und lenken ab.
    Lassen Sie ihre Animation am besten zu ihrer Corporate Identity planen.

 

So einfach können Sie professionelle Animation realisieren

Sie können nahezu alle Elemente in ihrer App oder auf ihrer Homepage animieren lassen. Einfache Animationen funktionieren am besten über Stylesheet-Anweisungen in CSS-Dateien. Diese werden mit ihrer Anwendung auf dem Server verknüpft. Den Rest erledigt der Browser.

 

Ein gutes Beispiel ist Animate.css von Daniel Eden. Verfügbar auf https://daneden.github.io/animate.css/ oder hier direkt testen:

 

Gehts das auch mit Bildern?

Noch spannender wird es, wenn es um eine Animation mit größeren Bildern oder sogar Bildsequenzen geht. Hier macht Grundsatz 2 oft die größten Probleme: Die Datengröße.

 

Die eleganteste Lösung ist, mit skalierbaren Vektorgrafiken (SVG) zu arbeiten. Diese Grafiken bestehen aus Vektoren und nicht aus Punkten oder Pixeln. Dadurch lässt sich eine SVG beliebig groß oder klein skalieren. Es kann also mit einer relativ kleinen Datei jedes Endgerät bedient werden.

 

Aber das allerbeste ist, dass sich jeder einzelne Vektor in der SVG animieren lässt.
Sogar super einfach mit CSS-Anweisungen, wie im Beispiel oben.

 

Hier eine Animation die wir für unseren Kunden OTTO aus einer Kombination aus SVG und CSS realisiert haben.

 


 

 

Man kann auch noch weiter gehen und mit JavaScript den Benutzer die Elemente manipulieren lassen. Dadurch werden noch immer alle Grundsätze guter Animation erfüllt. Allerdings ist hier der Aufwand in der Entwicklung höher.

 

Z.B. Haben wir aus einer SVG ein ganzes Tool zur Gestaltung mit Kreisbögen realisiert. Das ganze Projekt wurde im Rahmen einer Bachelor Arbeit von Robin Schwarz bei uns umgesetzt und mit Awards von Red Dot und ADC ausgezeichnet.

 

Hier ein kurzes Video zum Projekt:

 

 

Und hier geht’s zum Tool: vektor.de

 

Ein weiteres Beispiel kommt aus der Baubranche.
Mit diesem Tool lässt sich die Kontur eines Flachdaches zeichnen. Im Anschluss werden alle nötigen Elemente für den Dachrandabschluss berechnet und visualisiert. Der Kunde kann also alles ganz einfach planen und mit einem Klick alles in den Warenkorb legen.

 

Das Planungstool finden Sie hier. https://rooofer.de/pages/dachrandprofil-planer

 

Vieleicht haben Sie auch schon unsere 404-Seite entdeckt. Dort können Sie im Hintergrund eine ruhige Kugel schieben ;)
https://vrs-muenster.de/404

 

P.S. Sie möchten auch gerne eine Animation, die begeistert? Wir helfen gerne! Schreiben Sie uns jetzt einfach eine E-Mail oder rufen Sie mich an.

0251 14426-20

E-MAIL

 

Franz Samson

Franz Samson B. A.

Programmierung / Marketing / BWL