Geanimeerde Instagram-story maken die aandacht vasthoudt

Een geanimeerde Instagram-story werkt als één ding met een doel beweegt en al het andere leesbaar blijft. In de praktijk betekent dat een achtergrond die langzaam drijft, een kop die één keer met een korte animatie binnenkomt en dan blijft staan, en niets belangrijks bovenin of onderin het kader van 1080×1920. Exporteer hem als mp4, niet als gif, en zorg dat het allereerste beeld al als af ontwerp leest, want sommige mensen zien alleen dat beeld ooit.

Wat moet bewegen in een geanimeerde story

Een story wordt even bekeken, op armlengte, vaak zonder geluid. Beweging trekt het oog, dus alles wat beweegt concurreert met je woorden. De stories die aandacht vasthouden kiezen één bewegende laag en maken die rustig, en laten de tekst dan zijn werk doen. Drukke stories voelen energiek in de editor en uitputtend op een telefoon.

Hetzelfde principe loopt door al het goede bewegingswerk heen, van logo’s tot websites. Wil je de theorie erachter, dan behandelt principes van motion design timing, easing en hiërarchie uitgebreider.

Vier tekstanimaties die werken in stories

Tekstanimatie is de nuttigste beweging in een story, omdat ze het oog vertelt waar te beginnen. Houd hem kort. Een intrede die langer dan ongeveer een halve seconde duurt, gaat voelen als wachten, en mensen tikken door als ze moeten wachten.

Laat regels op elkaar volgen in plaats van woorden: eerst de kop, een tel later de ondersteunende regel, als laatste de linkaanwijzing. Die volgorde sluit aan bij hoe mensen lezen, en zorgt dat de story klopt, ook als iemand halverwege weggaat. Voor meer patronen, ook kinetische typografie, zie ideeën voor tekstanimatie.

De timing van een geanimeerde Instagram-story

Een stilstaande story blijft ongeveer vijf seconden in beeld voordat Instagram doorgaat. Een videostory speelt zolang de clip duurt, maar de aandacht zit vooraan: als de eerste seconde leeg is, wordt de rest zelden gezien. Plan de tijdlijn vanaf daar achteruit.

1. 1

   0 tot 1 seconde: de kop

   De achtergrond beweegt al in het eerste beeld. De kop voltooit zijn intrede aan het einde van de eerste seconde.

2. 2

   1 tot 2 seconden: de ondersteuning

   De tweede regel of het product komt binnen. Gebruik dezelfde animatie als de kop, iets kleiner in beweging.

3. 3

   2 tot 3 seconden: de actie

   De linkaanwijzing, datum of code verschijnt. Dit is de regel waarop mensen handelen, dus hij heeft tijd nodig om gelezen te worden.

4. 4

   De rest: vasthouden

   Er komt niets nieuws binnen. De achtergrond blijft drijven zodat de story zonder zichtbare herstart loopt.

Zes tot tien seconden is een comfortabele lengte voor een ontworpen story met een korte boodschap. Langere clips passen bij praten of demonstreren, niet bij een kop. Gaat de story loopen, dan moet de achtergrond eindigen waar hij begon, wat stap voor stap staat in naadloze loopvideo.

Formaat, veilige zones en exportinstellingen

Een geanimeerde story gebruikt hetzelfde kader als een stilstaande: 1080×1920 pixels, 9:16. De interface van Instagram ligt over de boven- en onderkant, dus houd woorden en logo’s in de middenband. Een gangbare werkregel is om ongeveer de bovenste en onderste 250 pixels vrij van tekst te laten. De volledige uitleg staat in Instagram Story-formaat.

Gif is het ene formaat dat je hier moet vermijden. De limiet van 256 kleuren verandert zachte kleurverlopen in strepen, en een bewegende story is voor Instagram een video, dus geef hem er een. De vergelijking staat in gif versus mp4.

Geanimeerde stories maken die niet op die van anderen lijken

De meeste sjablonen voor geanimeerde stories gebruiken dezelfde handvol bewegende achtergronden, dus een feed vol ervan vervaagt tot één geheel. De achtergrond is waar je merk herkend kan worden voordat iemand een woord leest. Een bewegend kleurvlak dat van jou is, doet meer dan een stockloop ooit kan.

In Gradiently begint een story op een Mark: een levende kleurverloop- en materiaalachtergrond die uit zichzelf beweegt en uniek is. Voeg je kop toe, kies rise, pop, wipe of typemachine, en de Mark houdt zijn rustigste gebied achter de woorden terwijl Auto-inkt regel voor regel lichte of donkere tekst kiest. Hetzelfde ontwerp kan dan worden aangepast naar een feedpost of een Reels-achtergrond zonder het opnieuw te bouwen. Video-export hoort bij Pro en slaat mp4 op waar je browser dat ondersteunt.