Kortversionen
- Effektiva animerade bannerannonser följer oftast en kort storyboard på tre rutor: en krok, värdet och sedan varumärket och uppmaningen.
- Sista rutan i en animerad banner ska fungera på egen hand, eftersom många annonsnätverk begränsar hur länge eller hur många gånger animation får spelas.
- Vanliga displaystorlekar är 300×250, 728×90, 300×600, 160×600 och 320×50 pixlar.
- Animerade bannrar levereras oftast som HTML5-paket eller GIF, och nätverken sätter snäva gränser för filvikten för båda.
- Rörelse i en banner ska fånga blicken en gång och sedan låta orden stå stilla tillräckligt länge för att läsas.
På den här sidan
Bra animerade bannerannonser använder rörelse för att fånga ögat en gång och sedan kliva åt sidan för budskapet. Den pålitliga strukturen är tre rutor: en krok, värdet och en slutruta med varumärket och en tydlig uppmaning som blir kvar på skärmen. Håll hela sekvensen kort, låt sista rutan fungera som en stillbildsannons på egen hand och håll filen lätt, eftersom annonsnätverk begränsar både hur länge animationen får gå och hur tung filen får vara.
Storyboarden på tre rutor
Bannerannonser ses i förbifarten, bredvid något läsaren faktiskt kom för. Ingen väntar på att en banner ska bli klar. Planera sekvensen så att varje ruta ger mening ensam och ordningen berättar en liten historia.
- 1
Ruta 1: kroken
En kort rad eller en slående bild. Dess enda uppgift är att få någon att titta. ”Ditt skrivbord, lugnare.” Två till tre sekunder.
- 2
Ruta 2: värdet
Vad du erbjuder, på läsarens villkor. ”Kabelrännor som passar vilket skrivbord som helst.” Två till tre sekunder.
- 3
Ruta 3: slutrutan
Logotyp, erbjudandet i korthet och en uppmaning formad som en knapp. ”Se sortimentet.” Rutan står kvar tills annonsen slutar.
Ruta ett: en krok på tre ord över rörlig färg. Inget annat konkurrerar med den.
Slutrutan: varumärke, värde och uppmaning tillsammans. Om det här är allt någon ser fungerar annonsen ändå.
Samma storyboard fungerar för sociala annonser, som oftast är korta videor snarare än bannrar. Design av Facebook-annonser och design av Instagram-annonser tar upp de formaten.
Timing och loopar i animerade bannerannonser
Många annonsnätverk och utgivare begränsar hur länge animation får gå och hur ofta den får loopa, och gränserna varierar. Google Ads begränsar till exempel uppladdade animerade annonser till 30 sekunders animation. Kontrollera den aktuella specifikationen för varje nätverk du köper från, och designa så att annonsen slutar på sin starkaste ruta oavsett gräns.
Regel
Timing
Regel
Regel
Timing
Regel
Timing
Regel
Standardstorlekar för bannerannonser
Displaynätverk använder en uppsättning standardstorlekar. En kampanj täcker oftast flera av dem, så designa ett system i stället för en annons: en layout som ordnar om sig för breda, höga och små platser men behåller samma ord, färg och rörelse.
Medelstor rektangel
300 × 250
Halvsida
300 × 600
Bred skyskrapa
160 × 600
Leaderboard
728 × 90
Mobilbanner
320 × 50
Det här ryms
Det här ryms
Det här ryms
Det här ryms
Det här ryms
GIF eller HTML5 för animerade bannrar
De flesta displaynätverk tar emot animerade annonser som antingen GIF eller HTML5, ett litet paket av HTML, CSS, JavaScript och bilder. HTML5 ger mjukare rörelse, skarp text i alla tätheter och full färg, och passar rikare annonser. GIF är enklare att göra och accepteras nästan överallt, men dess gräns på 256 färger gör att gradienter får band. Gränserna för filvikt är snäva för båda, mätta i kilobyte snarare än megabyte, så kontrollera varje nätverks specifikation.
Om du väljer GIF håller teknikerna i animerade GIF vikten nere: färre rutor, en palett byggd av animationen och så lite av rutan i rörelse som möjligt. För själva rörelsen är enhetlig acceleration och inbromsning det som skiljer en polerad banner från en ryckig.
Designregler som får bannrar att fungera
Undvik
- Fyra eller fem rutor med text
- Liten text över stökig, snabb rörelse
- Logotypen bara i första rutan
- En annan animationsstil för varje element
- En slutruta utan tydlig uppmaning
Gör
- Tre rutor, en handfull ord var
- Stor text över långsam, lugn färg
- Varumärket på slutrutan som står kvar
- En övergångsstil genom hela
- En uppmaning formad som en knapp på sista rutan
En särpräglad bakgrund är det billigaste sättet att bli igenkänd genom en kampanj. När samma färgfält rör sig bakom varje ruta och varje storlek börjar folk koppla rörelsen till dig innan de läser ett ord. Testa variationer av kroken snarare än hela annonsen. Testning av annonsmaterial förklarar hur du gör det rättvist.
Gradiently passar kampanjens sociala sida. Designa kroken och slutrutan på en Mark som tillhör dig, ändra storlek till 1080×1080, 1080×1350 och 1080×1920 i ett steg i Pro och exportera var och en som MP4. Marken renderas för varje format, så dess lugna område ligger fortfarande bakom orden i varje storlek.
Vanliga frågor
Hur lång ska en animerad bannerannons vara?
En spelning på cirka 6 till 10 sekunder passar de flesta bannrar. Många nätverk begränsar total animationstid, Google Ads till 30 sekunder för uppladdade animerade annonser, så kontrollera varje nätverks specifikation.
Hur många rutor ska en animerad banner ha?
Tre är en pålitlig struktur: en krok, värdet och en slutruta med varumärket och uppmaningen. Fler rutor betyder oftast fler ord än någon läser.
Vilka är de vanligaste bannerstorlekarna?
300×250, 300×600, 160×600, 728×90 och 320×50 pixlar hör till de mest använda displaystorlekarna. Börja med 300×250 och anpassa de andra utifrån den.
Ska animerade bannerannonser vara GIF eller HTML5?
HTML5 ger mjukare rörelse och skarpare text och passar rikare annonser, medan GIF är enklare och accepteras nästan överallt men ger band i gradienter. Båda måste klara nätverkets gräns för filvikt.
Vad ska sista rutan i en bannerannons visa?
Varumärket, erbjudandet i korthet och en tydlig uppmaning, utlagda så att rutan fungerar som en komplett stillbildsannons om animationen stannar där.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil