# Geanimeerde bannerads: beweging die de boodschap helpt

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

Een banner krijgt een blik vanuit de ooghoek. Beweging kan die blik verdienen, en moet daarna overdragen aan een boodschap die eenvoudig genoeg is om in een seconde te lezen.

## The short version

- Effectieve geanimeerde bannerads volgen meestal een kort storyboard van drie beelden: een haak, de waarde, en dan het merk en de call-to-action.
- Het laatste beeld van een geanimeerde banner moet op zichzelf werken, omdat veel advertentienetwerken beperken hoe lang of hoe vaak animatie mag spelen.
- Gangbare displayformaten zijn onder meer 300×250, 728×90, 300×600, 160×600 en 320×50 pixels.
- Geanimeerde banners worden meestal geleverd als html5-pakketten of gifs, en netwerken stellen voor beide krappe gewichtslimieten.
- Beweging in een banner moet het oog één keer trekken en de woorden dan lang genoeg stil laten staan om gelezen te worden.

Goede **geanimeerde bannerads** gebruiken beweging om het oog één keer te vangen en dan uit de weg te gaan van de boodschap. De betrouwbare structuur is drie beelden: een haak, de waarde, en een slotbeeld met het merk en een duidelijke call-to-action die in beeld blijft. Houd de hele reeks kort, laat dat laatste beeld als stilstaande advertentie op zichzelf werken en houd het bestand licht, want advertentienetwerken beperken zowel hoe lang animatie loopt als hoe zwaar het bestand mag zijn.

## Het storyboard van drie beelden

Bannerads worden in het voorbijgaan gezien, naast iets waarvoor de lezer echt kwam. Niemand wacht tot een banner klaar is. Plan de reeks zo dat elk beeld op zichzelf klopt en de volgorde een heel klein verhaal vertelt.

1. **Beeld 1: de haak** Eén korte regel of één opvallend beeld. Het enige doel is dat iemand kijkt. “Je bureau, rustiger.” Twee tot drie seconden.
2. **Beeld 2: de waarde** Wat je biedt, in de woorden van de lezer. “Kabelgoten die op elk bureau passen.” Twee tot drie seconden.
3. **Beeld 3: het slotbeeld** Logo, het aanbod in het kort en een call-to-action in de vorm van een knop. “Bekijk het assortiment.” Dit beeld blijft staan tot de advertentie stopt.

Vierkant advertentiebeeld met de haak je bureau, rustiger over een langzaam bewegend kleurverloop

Beeld één: een haak in vier woorden over bewegende kleur. Niets anders concurreert ermee.

Vierkant slotbeeld met een merknaam, een korte waarderegel en de call-to-action bekijk het assortiment

Het slotbeeld: merk, waarde en call-to-action samen. Als iemand alleen dit ziet, werkt de advertentie nog.

Hetzelfde storyboard werkt voor socialadvertenties, die meestal korte video’s zijn en geen banners. [Facebook-advertenties ontwerpen](https://gradiently.design/nl/guide/facebook-ad-design) en [Instagram-advertenties ontwerpen](https://gradiently.design/nl/guide/instagram-ad-design) behandelen die formaten.

## Timing en loops in geanimeerde bannerads

Veel advertentienetwerken en uitgevers beperken hoe lang animatie mag lopen en hoe vaak hij mag herhalen, en de limieten verschillen. Google Ads beperkt geüploade geanimeerde advertenties bijvoorbeeld tot 30 seconden animatie. Controleer de actuele specificatie van elk netwerk waarbij je inkoopt en ontwerp zo dat de advertentie op zijn sterkste beeld eindigt, wat de limiet ook is.

| Onderdeel | Timing | Regel |
| --- | --- | --- |
| Haakbeeld | 2 tot 3 seconden | Korte woorden, grote letters |
| Waardebeeld | 2 tot 3 seconden | Eén voordeel, geen lijst |
| Slotbeeld | Blijft staan | Merk, aanbod en call-to-action, leesbaar als stilstaand beeld |
| Overgangen | 300 tot 500 ms | Snel en consistent; één stijl voor alle beelden |
| Hele reeks | Ongeveer 6 tot 10 seconden per keer | Kort genoeg om binnen de limieten een paar keer te herhalen |

Vuistregel voor leestijd: als je een beeld niet twee keer hardop kunt lezen voordat het wisselt, geef het meer tijd of schrap woorden.

> **Vermijd geflits en gejaagde beweging** Snelle flitsen zijn onprettig en kunnen schadelijk zijn voor mensen met fotosensitieve epilepsie, en advertentienetwerken weigeren ze vaak. Beweeg kleur en tekst vloeiend, en nooit sneller dan het oog kan volgen.

## Standaardformaten voor bannerads

Displaynetwerken gebruiken een reeks standaardformaten. Een campagne dekt er meestal meerdere, dus ontwerp een systeem in plaats van één advertentie: een opmaak die zich herschikt voor brede, hoge en kleine plekken met dezelfde woorden, kleur en beweging.

- Medium rectangle: 300 × 250
- Halve pagina: 300 × 600
- Brede skyscraper: 160 × 600
- Leaderboard: 728 × 90
- Mobiele banner: 320 × 50

Gangbare displayformaten op schaal. De heel brede en heel lage plekken hebben minder woorden en een eenvoudiger slotbeeld nodig.

| Formaat (px) | Naam | Wat past |
| --- | --- | --- |
| 300×250 | Medium rectangle | Het volledige verhaal van drie beelden; een goed basisformaat |
| 300×600 | Halve pagina | Ruimte voor een beeld boven de woorden |
| 160×600 | Brede skyscraper | Woorden gestapeld, twee of drie per regel |
| 728×90 | Leaderboard | Eén regel per beeld, logo en knop naast elkaar |
| 320×50 | Mobiele banner | Alleen haak en knop; het logo kan de haak zijn |

Ontwerp eerst de 300×250 en pas daarna de andere aan. Uitgevers en netwerken vragen vaak ook versies met dubbele dichtheid.

## Gif of html5 voor geanimeerde banners

De meeste displaynetwerken accepteren geanimeerde advertenties als gif of html5, een klein pakket html, css, JavaScript en beelden. Html5 geeft vloeiendere beweging, scherpe tekst op elke dichtheid en volledige kleur, en past bij rijkere advertenties. Gif is eenvoudiger te maken en bijna overal geaccepteerd, maar de limiet van 256 kleuren laat kleurverlopen bandvorming tonen. Gewichtslimieten voor beide zijn krap, gemeten in kilobytes en niet in megabytes, dus controleer de specificatie van elk netwerk.

Kies je gif, dan houden de technieken in [geanimeerde gifs](https://gradiently.design/nl/guide/gif-maker-tips) het gewicht laag: minder beelden, een palet dat uit de animatie is opgebouwd en zo weinig mogelijk beweging in het kader. Voor de beweging zelf maakt consistente [easing](https://gradiently.design/nl/guide/easing) het verschil tussen een verzorgde banner en een schokkerige.

## Ontwerpregels waardoor banners werken

### Vermijd

- Vier of vijf beelden met tekst
- Kleine tekst over drukke, snelle beweging
- Het logo alleen in het eerste beeld
- Een andere animatiestijl voor elk element
- Een slotbeeld zonder duidelijke call-to-action

### Doe

- Drie beelden met elk een handvol woorden
- Grote letters over trage, rustige kleur
- Merk op het slotbeeld dat blijft staan
- Eén overgangsstijl overal
- Een call-to-action in knopvorm op het laatste beeld

Een onderscheidende achtergrond is de goedkoopste manier om herkend te worden over een campagne heen. Als hetzelfde kleurvlak achter elk beeld en elk formaat beweegt, gaan mensen de beweging met jou associëren voordat ze een woord lezen. Test variaties van de haak in plaats van de hele advertentie; [testen van advertentiebeeld](https://gradiently.design/nl/guide/ad-creative-testing) legt uit hoe je dat eerlijk doet.

Gradiently past bij de socialkant van een campagne. Ontwerp de haak en het slotbeeld op een Mark die van jou is, schaal met Pro in één stap naar 1080×1080, 1080×1350 en 1080×1920 en exporteer elk als mp4. De Mark wordt voor elk formaat getekend, dus zijn rustige gebied zit op elk formaat achter de woorden.

## FAQ

### Hoe lang moet een geanimeerde bannerad zijn?

Eén keer afspelen van ongeveer 6 tot 10 seconden past bij de meeste banners. Veel netwerken beperken de totale animatietijd, Google Ads tot 30 seconden voor geüploade geanimeerde advertenties, dus controleer de specificatie van elk netwerk.

### Hoeveel beelden moet een geanimeerde banner hebben?

Drie is een betrouwbare structuur: een haak, de waarde en een slotbeeld met het merk en de call-to-action. Meer beelden betekent meestal meer woorden dan iemand leest.

### Wat zijn de gangbaarste bannerformaten?

300×250, 300×600, 160×600, 728×90 en 320×50 pixels behoren tot de meestgebruikte displayformaten. Begin met 300×250 en pas de andere daaruit aan.

### Moeten geanimeerde bannerads gif of html5 zijn?

Html5 geeft vloeiendere beweging en scherpere tekst en past bij rijkere advertenties; gif is eenvoudiger en bijna overal geaccepteerd, maar toont bandvorming in kleurverlopen. Beide moeten voldoen aan de gewichtslimiet van het netwerk.

### Wat moet het laatste beeld van een bannerad tonen?

Het merk, het aanbod in het kort en een duidelijke call-to-action, zo opgezet dat het beeld als complete stilstaande advertentie werkt als de animatie daar stopt.