# Animierte Bannerwerbung: Bewegung, die der Botschaft hilft

[Canonical HTML page](https://gradiently.design/de/guide/animated-banner-ads)

Ein Banner bekommt einen Blick aus dem Augenwinkel. Bewegung kann diesen Blick verdienen, dann muss sie an eine Botschaft übergeben, die einfach genug ist, um sie in einer Sekunde zu lesen.

## The short version

- Wirksame animierte Banner folgen meist einem kurzen Storyboard aus drei Frames: ein Aufhänger, der Nutzen, dann Marke und Handlungsaufforderung.
- Der letzte Frame eines animierten Banners muss für sich allein funktionieren, denn viele Werbenetzwerke begrenzen, wie lange oder wie oft eine Animation laufen darf.
- Gängige Größen für Displaywerbung sind 300×250, 728×90, 300×600, 160×600 und 320×50 Pixel.
- Animierte Banner werden meist als HTML5-Paket oder GIF geliefert, und Netzwerke setzen für beide enge Grenzen beim Dateigewicht.
- Bewegung in einem Banner sollte den Blick einmal anziehen und die Worte dann lange genug stillhalten, damit man sie lesen kann.

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. **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. **Frame 2: der Nutzen** Was du anbietest, in den Worten der Lesenden. „Kabelkanäle, die an jeden Tisch passen.“ Zwei bis drei Sekunden.
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.

Quadratischer Anzeigenframe mit dem Aufhänger Dein Schreibtisch, ruhiger über einem langsam bewegten Farbverlauf

Frame eins: ein Aufhänger in wenigen Worten über bewegter Farbe. Nichts anderes konkurriert damit.

Quadratischer Schlussframe mit Markenname, einer kurzen Nutzenzeile und der Handlungsaufforderung Zum Sortiment

Der Schlussframe: Marke, Nutzen und Handlungsaufforderung zusammen. Sieht jemand nur diesen, funktioniert die Anzeige trotzdem.

Dasselbe Storyboard funktioniert für Social Ads, die meist kurze Videos statt Banner sind. [Facebook-Anzeigen gestalten](https://gradiently.design/de/guide/facebook-ad-design) und [Instagram-Anzeigen gestalten](https://gradiently.design/de/guide/instagram-ad-design) 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.

| Teil | Timing | Regel |
| --- | --- | --- |
| Aufhänger-Frame | 2 bis 3 Sekunden | Kurze Worte, große Schrift |
| Nutzen-Frame | 2 bis 3 Sekunden | Ein Vorteil, keine Liste |
| Schlussframe | Bleibt stehen | Marke, Angebot und Handlungsaufforderung, als Standbild lesbar |
| Übergänge | 300 bis 500 ms | Schnell und einheitlich; ein Stil für alle Frames |
| Ganze Sequenz | Etwa 6 bis 10 Sekunden pro Durchlauf | Kurz genug, um innerhalb der Grenzen ein paar Mal zu loopen |

Eine Faustregel für die Lesezeit: Kannst du einen Frame nicht zweimal laut vorlesen, bevor er wechselt, gib ihm mehr Zeit oder streich Worte.

> **Keine Blitze und keine hektische Bewegung** Schnelle Blitze sind unangenehm, können Menschen mit fotosensitiver Epilepsie schaden, und Werbenetzwerke lehnen sie häufig ab. Bewege Farbe und Schrift weich und nie schneller, als das Auge folgen kann.

## 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.

- Medium Rectangle: 300 × 250
- Half Page: 300 × 600
- Wide Skyscraper: 160 × 600
- Leaderboard: 728 × 90
- Mobile Banner: 320 × 50

Gängige Displaygrößen maßstabsgetreu. Die sehr breiten und sehr flachen Plätze brauchen weniger Worte und einen einfacheren Schlussframe.

| Größe (px) | Name | Was hineinpasst |
| --- | --- | --- |
| 300×250 | Medium Rectangle | Die ganze Geschichte in drei Frames; eine gute Ausgangsgröße |
| 300×600 | Half Page | Platz für ein Bild über den Worten |
| 160×600 | Wide Skyscraper | Gestapelte Worte, zwei oder drei pro Zeile |
| 728×90 | Leaderboard | Eine Zeile pro Frame, Logo und Button nebeneinander |
| 320×50 | Mobile Banner | Nur Aufhänger und Button; das Logo kann der Aufhänger sein |

Gestalte zuerst das 300×250 und passe dann an. Publisher und Netzwerke verlangen oft auch Versionen in doppelter Pixeldichte.

## 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](https://gradiently.design/de/guide/gif-maker-tips) 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](https://gradiently.design/de/guide/easing) ein geschliffenes Banner von einem ruckeligen.

## Gestaltungsregeln, mit denen Banner funktionieren

### Vermeiden

- Vier oder fünf Frames voller Text
- Kleine Schrift über unruhiger, schneller Bewegung
- Das Logo nur im ersten Frame
- Für jedes Element ein anderer Animationsstil
- Ein Schlussframe ohne klare Handlungsaufforderung

### So geht es

- Drei Frames mit jeweils einer Handvoll Worte
- Große Schrift über langsamer, ruhiger Farbe
- Die Marke auf dem Schlussframe, der stehen bleibt
- Durchgehend ein Übergangsstil
- Eine Handlungsaufforderung in Buttonform im letzten Frame

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](https://gradiently.design/de/guide/ad-creative-testing) 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.

## FAQ

### Wie lang sollte ein animiertes Banner sein?

Ein Durchlauf von etwa 6 bis 10 Sekunden passt zu den meisten Bannern. Viele Netzwerke begrenzen die gesamte Animationszeit, Google Ads auf 30 Sekunden bei hochgeladenen animierten Anzeigen, prüf also die Spezifikation jedes Netzwerks.

### Wie viele Frames sollte ein animiertes Banner haben?

Drei sind eine verlässliche Struktur: ein Aufhänger, der Nutzen und ein Schlussframe mit Marke und Handlungsaufforderung. Mehr Frames bedeuten meist mehr Worte, als irgendjemand liest.

### Welche Bannergrößen sind am gängigsten?

300×250, 300×600, 160×600, 728×90 und 320×50 Pixel gehören zu den meistgenutzten Displaygrößen. Beginne mit 300×250 und leite die anderen daraus ab.

### Sollten animierte Banner GIF oder HTML5 sein?

HTML5 bietet weichere Bewegung und schärferen Text und passt zu aufwendigeren Anzeigen; GIF ist einfacher und fast überall akzeptiert, macht Verläufe aber streifig. Beide müssen die Gewichtsgrenze des Netzwerks einhalten.

### Was sollte der letzte Frame eines Banners zeigen?

Die Marke, das Angebot in Kürze und eine klare Handlungsaufforderung, so angeordnet, dass der Frame als vollständige Standbild-Anzeige funktioniert, wenn die Animation dort stoppt.