Geanimeerde bannerads: beweging die de boodschap helpt

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

Hetzelfde storyboard werkt voor socialadvertenties, die meestal korte video’s zijn en geen banners. Facebook-advertenties ontwerpen en Instagram-advertenties ontwerpen 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.

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.

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 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 het verschil tussen een verzorgde banner en een schokkerige.

Ontwerpregels waardoor banners werken

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