zurück

Besser mit Bewegung

Leon Quirin Stelzer
Visual Designer

Animationen sind ein effektives Mittel, um den Auftritt einer Firma spannender zu gestalten. Ob auf Webseiten, in Präsentationen oder in digitalen Newsletter – Animationen ermöglichen es, selbst komplexe Inhalte einfach und verständlich zu erklären. Im ersten Teil dieser Beitragsreihe geben wir Einblicke in die vielfältigen Einsatzbereiche von Animationen. Der zweite Teil geht auf die verschiedenen Animationstechniken ein.

 

Es gibt verschiedene Möglichkeiten, Animationen sinnvoll in einen Unternehmensauftritt zu integrieren. In einem ersten Schritt bietet es sich häufig an, aus bereits bestehenden Gestaltungselementen wie dem Logo oder Icons simple Animationen zu erstellen. Solche Animationen können dann schnell auf Webseiten und Social Media Kanälen zum Einsatz kommen. 

 

Einsatzbereiche von Animationen:

  • Website
  • Erklärvideo
  • Powerpoint-Präsentation
  • E-Mail-Newsletter
  • Screen an Event
  • Digitale Aussenwerbung
  • Interaktives Plakat

 

Animationen im Web

Auf Websites können Micro-Animationen dabei helfen, die User Experience zu verbessern. Micro-Animation sind Animationen, die auf einer Website durch kleine Bewegungen dem User direktes visuelles Feedback geben. Wie zum Beispiel auf der Seite von Mosaik Capital.

Ein bewegtes Icon wird schneller wahrgenommen als ein statisches. Bewegungen lenken den Fokus des Users in die gewünschte Richtung, so steigert sich das Interesse einer Person und sie verweilt länger auf der Seite. 

Wichtig ist es, die Website nicht mit Micro-Animationen zu überladen und den User dadurch zu überfordern. Ziel ist es, dem User Anker bzw. Orientierungshilfen zu geben, um sich leichter auf der Website zurechtzufinden.

Um lange Ladezeiten auf einer Website zu vermeiden oder auch Newsletter schlank versenden zu können, bietet es sich an, z.B. animierte Logos als .gif-Datei einzubauen. .gif-Dateien weisen eine geringere Dateigrösse als .mp4-Dateien mit gleicher Bildqualität auf. Alternativ können auch .html5-Dateien benutzt werden, die bis zu 10 mal kleiner als .gif-Dateien sind.

 

Micro Animation für Mosaik Capital


Animationen auf Screens 

Animationen können auch ausserhalb des Internets zum Einsatz kommen, beispielsweise auf Bildschirmen im Bus oder am Bahnhof. Sie bilden eine Schnittstelle zwischen analoger Plakatwerbung und aufwändig gefilmten Werbespots. 

Mit guten Animationen kann schnell und kostengünstig ein Video entwickelt werden, das einen Wow-Effekt beim Betrachter auslöst. Kostengünstig sind Animationen vor allem auch deshalb, weil weniger Personen an der Produktion beteiligt sind als bei einem Live-Action-Video.

Der britische Nachrichtensender BBC, hat zur Präsentation ihrer neuen Schrift eine Kampagne lanciert, die mit verschiedenen, simplen, aber wirkungsvollen Animationen arbeitet. Auf der Kampagnenseite finden sich einige Beispiele dazu.

 

© Spin BBC Reith Campaign

 

Vom Script zum Storyboard

Bei grösseren Produktionen wie zum Beispiel einem Erklärvideo helfen verschiedene Tools dabei, einen reibungslosen Projektablauf zu garantieren. Sobald das Ziel des Projektes definiert ist, wird mit einem Script der Ablauf der Animation in Textform geplant. 

In einem weiteren Schritt wird der visuelle Stil der Animation bestimmt, dabei helfen Beispiel-Animationen von anderen Projekten. Sobald das Script erstellt und der Stil definiert ist, wird ein Storyboard gezeichnet, mit dem grobe Bewegungsabläufe festgelegt werden. 

 

Der kleine Leitfaden für ein erfolgreiches Animationsprojekt:

  1. Ziele und Stil definieren
  2. Script schreiben
  3. Storyboard basierend auf Script erstellen
  4. Animation entwickeln und für Zielmedien aufbereiten

 

Ganz wichtig ist immer auch ein aktiver Austausch mit den Kunden, um die Animation schnell und effizient entwickeln zu können. 

Ein weiterer Aspekt von Animationen ist die Technik, mit der sie erstellt werden. Denn jede Technik hat ihre Vor- und Nachteile, die wir im zweiten Teil zum Thema Animation aufzeigen.