Lyhyesti
- Toimivat animoidut bannerimainokset seuraavat yleensä kolmea ruutua: koukku, hyöty sekä brändi ja toimintakehotus.
- Bannerin loppuruudun pitää toimia itsenäisesti, sillä monet mainosverkostot rajoittavat animaation kestoa tai toistokertoja.
- Yleisiä display-mainoskokoja ovat 300×250, 728×90, 300×600, 160×600 ja 320×50 pikseliä.
- Animoidut bannerit toimitetaan yleensä HTML5-paketteina tai GIF-tiedostoina. Verkostot rajoittavat molempien tiedostokokoa tiukasti.
- Bannerin liikkeen tulee houkutella katse kerran ja jättää sitten sanat paikalleen riittävän pitkäksi lukuajaksi.
Tällä sivulla
Hyvät animoidut bannerimainokset tavoittavat katseen kerran liikkeellä ja antavat sitten tilaa viestille. Luotettava rakenne on kolme ruutua: koukku, hyöty ja näytölle jäävä loppuruutu, jossa on brändi ja selkeä toimintakehotus. Pidä sarja lyhyenä, tee viimeisestä ruudusta itsenäinen still-mainos ja tiedostosta kevyt. Mainosverkostot rajoittavat sekä animaation kestoa että tiedostokokoa.
Kolmen ruudun kuvakäsikirjoitus
Bannerit nähdään ohimennen sen sisällön vieressä, jota lukija tuli katsomaan. Kukaan ei odota bannerin loppua. Suunnittele jokainen ruutu itsenäisesti ymmärrettäväksi ja järjestys pieneksi tarinaksi.
- 1
Ruutu 1: koukku
Yksi lyhyt rivi tai vaikuttava kuva. Ainoa tehtävä on saada katsomaan. ”Pöytäsi, hieman rauhallisempi paikka.” Kaksi tai kolme sekuntia.
- 2
Ruutu 2: hyöty
Tarjontasi lukijan näkökulmasta. ”Kaapelihyllyt joka pöytään.” Kaksi tai kolme sekuntia.
- 3
Ruutu 3: loppuruutu
Logo, lyhyt tarjous ja painikkeen muotoinen toimintakehotus. ”Tutustu valikoimaan.” Ruutu jää näkyviin mainoksen loppuun.
Ensimmäinen ruutu: neljän sanan koukku liikkuvan värin päällä. Mikään muu ei kilpaile.
Loppuruutu: brändi, hyöty ja toimintakehotus yhdessä. Mainos toimii vaikka katsoja näkisi vain tämän.
Sama kuvakäsikirjoitus toimii somemainoksissa, jotka ovat yleensä lyhyitä videoita bannerien sijaan. Facebook-mainoksen suunnittelu ja Instagram-mainoksen suunnittelu käsittelevät näitä formaatteja.
Animoitujen bannerien ajoitus ja toisto
Monet mainosverkostot ja julkaisijat rajoittavat animaation kestoa ja toistoja eri tavoin. Esimerkiksi Google Ads rajoittaa ladattujen animoitujen mainosten animaation 30 sekuntiin. Tarkista jokaisen käyttämäsi verkoston ajantasaiset vaatimukset. Suunnittele mainos päättymään vahvimpaan ruutuunsa rajasta riippumatta.
Ajoitus
Sääntö
Ajoitus
Sääntö
Ajoitus
Sääntö
Ajoitus
Sääntö
Ajoitus
Sääntö
Bannerimainosten vakiokoot
Display-verkostot käyttävät vakiokokoja. Kampanja kattaa yleensä useita, joten suunnittele järjestelmä yhden mainoksen sijaan: asettelu järjestyy leveisiin, korkeisiin ja pieniin paikkoihin säilyttäen sanat, värin ja liikkeen.
Keskikokoinen suorakulmio
300 × 250
Puolisivu
300 × 600
Leveä pilvenpiirtäjä
160 × 600
Leaderboard
728 × 90
Mobiilibanneri
320 × 50
Mitä mahtuu
Mitä mahtuu
Mitä mahtuu
Mitä mahtuu
Mitä mahtuu
GIF vai HTML5 animoituun banneriin
Useimmat display-verkostot hyväksyvät GIF:n tai HTML5:n eli pienen HTML-, CSS-, JavaScript- ja kuvapaketin. HTML5 tuo tasaisemman liikkeen, terävän tekstin kaikissa pikselitiheyksissä ja täydet värit. Se sopii monipuolisempiin mainoksiin. GIF on helpompi tuottaa ja hyväksytään lähes kaikkialla, mutta 256 värin raja raidoittaa liukuvärit. Molempien tiedostorajat ovat tiukkoja, kilotavuja megatavujen sijaan. Tarkista verkoston vaatimukset.
GIF:n tiedostokokoa pienentävät animoitujen GIFien tekniikat: vähemmän ruutuja, animaatiosta tehty paletti ja mahdollisimman pieni liikkuva alue. Yhtenäinen liikkeen pehmennys erottaa viimeistellyn bannerin nykivästä.
Toimivan bannerin suunnittelusäännöt
Vältä
- Neljän tai viiden ruudun tekstiä
- Pientä tekstiä vilkkaalla nopealla liikkeellä
- Logoa vain ensimmäisessä ruudussa
- Eri animaatiotyyliä joka elementille
- Loppuruutua ilman selkeää toimintakehotusta
Tee
- Kolme ruutua, muutama sana kussakin
- Suuri teksti hitaalla rauhallisella värillä
- Brändi näkyviin jäävään loppuruutuun
- Yksi siirtymätyyli kauttaaltaan
- Painikkeen muotoinen toimintakehotus viimeiseen ruutuun
Erottuva tausta on edullisin tapa tulla tunnistetuksi kampanjassa. Kun sama värikenttä liikkuu kaikissa ruuduissa ja koissa, liike yhdistetään sinuun jo ennen sanojen lukemista. Testaa koukun muunnelmia koko mainoksen sijaan. Mainosluovien testaus näyttää reilun kokeen.
Gradiently sopii kampanjan someosuuteen. Suunnittele koukku ja loppuruutu omalla Markillasi. Pro muuttaa koot 1080×1080, 1080×1350 ja 1080×1920 yhdellä kertaa ja vie kunkin MP4:nä. Mark renderöidään joka formaattiin, joten sen rauhallinen alue pysyy sanojen takana kaikissa koissa.
Usein kysyttyä
Kuinka pitkä animoidun bannerimainoksen pitäisi olla?
Yksi noin 6-10 sekunnin toisto sopii useimpiin bannereihin. Monet verkostot rajoittavat kokonaisanimaatioaikaa, Google Ads ladattujen animaatioiden kohdalla 30 sekuntiin. Tarkista jokaisen verkoston vaatimukset.
Kuinka monta ruutua bannerianimaatio tarvitsee?
Kolme on luotettava rakenne: koukku, hyöty ja loppuruutu brändillä ja toimintakehotuksella. Lisäruudut tarkoittavat yleensä enemmän sanoja kuin kukaan lukee.
Mitkä ovat tavallisimmat bannerimainosten koot?
300×250, 300×600, 160×600, 728×90 ja 320×50 pikseliä kuuluvat yleisimpiin display-kokoihin. Aloita koosta 300×250 ja sovita muut siitä.
Pitäisikö animoidun bannerin olla GIF vai HTML5?
HTML5 tarjoaa tasaisemman liikkeen ja terävämmän tekstin monipuolisiin mainoksiin. GIF on yksinkertaisempi ja lähes kaikkialla hyväksytty, mutta raidoittaa liukuvärit. Molempien pitää alittaa tiedostoraja.
Mitä bannerin viimeisessä ruudussa pitää näkyä?
Brändi, lyhyt tarjous ja selkeä toimintakehotus asettelussa, joka toimii kokonaisena still-mainoksena animaation pysähtyessä.
Kirjoittanut Gradiently
Gradientlyn tiimi. Gradiently on Markien ympärille rakennettu suunnittelutyökalu: eläviä liukuvärejä, joiden ansiosta kaikki suunnittelemasi näyttää omaltasi.
Katso profiilimme