Serviceplan / BMW5er LimousineImage Kampagne (2017)

HTML5 Master
HTML / CSS / JS
< 150 KB

IdeeKampagnen Visual als Cinemagramm

ZielEmotionalität steigern

Das statische Motiv der Kampagne wird durch die HTML-Animation lebendig und deshalb emotionaler. Die Gestaltung bleibt dabei zu 100% in der vorgegebenen grafischen Anmutung des Keyvisuals

Die Animation der der fahrenden BMW 5er Limousine stand Mittelpunkt der digitalen Kommunikationsmaßnahmen einer reichweitenstarken Imagekampagne. Die Vorteile der digitalen Umgebung konnten effektiv genutzt werden während „Look & Feel“ der Klassikkreation erhalten blieben.

Aus technischer Sicht handelt es sich bei dieser Art der Animation um ein HTML5 Cinemagramm. Dieses besteht aus einem Standbild, innerhalb welchem einzelne Bereiche animiert werden. Dies kann erreicht werden, indem ausgewählte Bildelemente in einem ersten Schritt freigestellt und / oder retouschiert werden. Im zweiten Schritt, werden diese dann in HTML animiert anhand grundlegender Effekte wie Ein-/Ausblendungen, Fahrten, Skalierungen und Easings.

Der wesentliche Vorteil dieser Methode ist, dass wertige Video-ähnliche Bewegungen mit sehr geringem Dateigewicht dargestellt werden können. In diesem Fall betrug das Dateigewicht des Werbemittels 150KB. Im Vergleich dazu hätte eine Umsetzung als Video mit Aftereffekts ein um den Faktor 8-10 höheres Gewicht verursacht. Diese massiven Gewichtseinsparungen ermöglichen hohe Reichweiten über Standardplatzierungen. Gleichzeitig werden Ladezeiten und Media- bzw. Adserving-Kosten auf ein Minimum reduziert.

Grundsätzlich sind bei dieser Methode Einschränkungen der gestalterischen Möglichkeiten im Vergleich zu Videoanimationen mit Aftereffects zu berücksichtigen. In diesem Fallbeispiel waren die entsprechenden Nachteile kaum relevant, da sich das Motiv für die HTML5-Animation sehr gut eignete. So erreichten wir auch in HTML5 durch verschiedene Effekte und Animation ein hohes Level an Emotionalität und technischer Professionalität: die Parallaxe von Vorder- und Hintergrund, die vorbeifliegende Straße, und en Detail der filmrealistische Reifen-Stroboskopeffekt unterstützen die übergeordnete Brand-Idee „Freude am Fahren“.