Animierte Bannerwerbung: Bewegung, die der Botschaft hilft

Gute animierte Banner nutzen Bewegung, um einmal den Blick zu fangen, und machen dann der Botschaft Platz. Die verlässliche Struktur hat drei Frames: einen Aufhänger, den Nutzen und einen Schlussframe mit der Marke und einer klaren Handlungsaufforderung, der stehen bleibt. Halte die ganze Sequenz kurz, sorg dafür, dass der letzte Frame allein als Standbild-Anzeige funktioniert, und halte die Datei leicht, denn Werbenetzwerke begrenzen sowohl die Laufzeit der Animation als auch das Dateigewicht.

Das Storyboard in drei Frames

Banner werden im Vorbeigehen gesehen, neben dem, wofür jemand eigentlich gekommen ist. Niemand wartet, bis ein Banner fertig ist. Plane die Sequenz so, dass jeder Frame allein Sinn ergibt und die Reihenfolge eine winzige Geschichte erzählt.

1. 1

   Frame 1: der Aufhänger

   Eine kurze Zeile oder ein auffälliges Bild. Seine einzige Aufgabe ist, dass jemand hinsieht. „Dein Schreibtisch, ruhiger.“ Zwei bis drei Sekunden.

2. 2

   Frame 2: der Nutzen

   Was du anbietest, in den Worten der Lesenden. „Kabelkanäle, die an jeden Tisch passen.“ Zwei bis drei Sekunden.

3. 3

   Frame 3: der Schlussframe

   Logo, das Angebot in Kürze und eine Handlungsaufforderung in Buttonform. „Zum Sortiment.“ Dieser Frame bleibt stehen, bis die Anzeige endet.

Dasselbe Storyboard funktioniert für Social Ads, die meist kurze Videos statt Banner sind. Facebook-Anzeigen gestalten und Instagram-Anzeigen gestalten behandeln diese Formate.

Timing und Loops in animierten Bannern

Viele Werbenetzwerke und Publisher begrenzen, wie lange eine Animation laufen und wie oft sie loopen darf, und die Grenzen unterscheiden sich. Google Ads beschränkt hochgeladene animierte Anzeigen zum Beispiel auf 30 Sekunden Animation. Prüf die aktuelle Spezifikation jedes Netzwerks, bei dem du einkaufst, und gestalte so, dass die Anzeige unabhängig von der Grenze auf ihrem stärksten Frame endet.

Standardgrößen für Bannerwerbung

Displaynetzwerke nutzen eine Reihe von Standardgrößen. Eine Kampagne deckt meist mehrere davon ab, gestalte also ein System statt einer einzelnen Anzeige: ein Layout, das sich für breite, hohe und kleine Plätze umordnet und dabei Worte, Farbe und Bewegung beibehält.

GIF oder HTML5 für animierte Banner

Die meisten Displaynetzwerke akzeptieren animierte Anzeigen als GIF oder als HTML5, ein kleines Paket aus HTML, CSS, JavaScript und Bildern. HTML5 bietet weichere Bewegung, scharfen Text bei jeder Pixeldichte und volle Farbe und eignet sich für aufwendigere Anzeigen. GIF ist einfacher zu produzieren und fast überall akzeptiert, doch die Grenze von 256 Farben lässt Verläufe streifig werden. Die Grenzen beim Dateigewicht sind für beide eng, gemessen in Kilobyte statt Megabyte, prüf also die Spezifikation jedes Netzwerks.

Entscheidest du dich für GIF, halten die Techniken aus Animierte GIFs das Gewicht niedrig: weniger Frames, eine aus der Animation gebaute Palette und so wenig Bewegung im Bild wie möglich. Bei der Bewegung selbst trennt einheitliches Easing ein geschliffenes Banner von einem ruckeligen.

Gestaltungsregeln, mit denen Banner funktionieren

Ein unverwechselbarer Hintergrund ist der günstigste Weg, über eine Kampagne hinweg erkannt zu werden. Bewegt sich dasselbe Farbfeld hinter jedem Frame und in jeder Größe, verbinden Menschen die Bewegung mit dir, bevor sie ein Wort lesen. Teste Varianten des Aufhängers statt der ganzen Anzeige; Anzeigenmotive testen erklärt, wie das fair gelingt.

Gradiently passt zur Social-Seite einer Kampagne. Gestalte Aufhänger und Schlussframe auf einem Mark, der dir gehört, bring sie mit Pro in einem Schritt auf 1080×1080, 1080×1350 und 1080×1920 und exportiere jede Version als MP4. Der Mark wird für jedes Format neu gerendert, seine ruhige Fläche sitzt also in jeder Größe hinter den Worten.