Vinkit bannerituotantoon

Näillä vinkeillä onnistut tekemään toimivat ja tyylikkäät bannerit

18.6.2020
Vinkit bannerituotantoon

Bannerituotannon suunnitteluprosessi

Tärkein vaihe bannerituotannossa on hyvä suunnittelu. Ennen bannerituotannon aloitusta on ymmärrettävä, miksi bannerit tehdään ja mitä niillä tavoitellaan. Tämän jälkeen mietitään tarkemmin mitä ja kenelle halutaan mainostaa. Vielä kun mainosviesti on mietitty, niin päästään miettimään missä kanavissa mainostetaan, millaisella formaatilla (esim. video tai banneri) ja miltä mainos näyttää käytännössä.

Lue vinkkejä toimivan mainosviestin kirjoittamiseen bannerimainonnassa »

Bannerituotannon suunnitteluprosessi

Bannerituotannon suunnitteluprosessi

Mainostyypit

Tyypilliset mainostyypit nykyään ovat still-kuva (jpg, png, gif), animoitu gif, HTML5 ja videobannerit. Flash-bannereita ei juuri tehdä enää lainkaan, sillä vuonna 2017 Adobe kertoi lopettavansa Flash-tekniikkansa tuen. Myös Google ilmoitti silloin, että se lopettaa Flash-sisällön tuen Chrome-selaimessaan vuoden 2020 loppuun mennessä. Myös Microsoft, Apple ja Mozilla ovat ilmoittaneet suunnitelmistaan ​​poistaa Flashin käytön selaimissaan.

Katso tarkemmat kanavakohtaiset aineisto-ohjeet »

Still-​kuvat (jpg, png, gif)

  • Sallitut tie­dos­to­koot pieniä, näissä oltava tarkkana!
  • Jos käytössä vain tasa­pin­taisia värejä, käytä .PNG-​formaattia.
  • Jos käytössä on valokuva, käytä .JPG-​formaattia.
  • GIF-​formaattia ei suo­si­tella rajal­lisen väri­määrän takia (enintään 256 väriä). Älä käytä lainkaan valo­kuvaa sisäl­tä­vässä aineistossa.
  • Tar­vit­taessa 8‑bittisyys pie­nentää kokoa, mutta varmista laatu, kun pakkaat.
  • Käytä reu­nuksia. Suurin osa medioista vaatii aineis­tolle reu­nukset. Google lisää auto­maat­ti­sesti mustat reunat. Ilman reu­nuksia oleva mainos voi johtaa oudon näköi­siin ele­ment­tien sijoitteluihin.
  • Reso­luutio 72dpi.
  • Väri­pro­fiili RGB.

Animoitu .gif

  • Ani­maa­tion enim­mäis­kesto 30 sek. Kaiken liikkeen pysäh­dyt­tävä ennen tätä.
  • Muista ottaa suun­ni­tel­lessa huomioon, mihin viestiin ja näkymään liike pysähtyy!
  • Vaikka Gif ‑ani­maatio on helppo tuottaa, on ani­mointi rajattua ja suuri ani­mointi kas­vattaa tiedostokokoa.
  • Yleensä kaikki ani­moidut aineistot tehdään HTML5 ‑muotoon. GIF-​formaattia voidaan käyttää yksin­ker­tai­sesti ani­moi­duissa aineistoissa.

HTML5

  • Tie­dos­tojen sallitut enim­mäis­koot usein suu­rempia ver­rat­tuna still ‑ban­ne­reihin.
  • Mah­dol­listaa nykyään paljon. Peri­aat­teessa, sen mitä voi tehdä net­ti­si­vuille, onnistuu myös bannerissa.
  • Myös “pelil­lis­tä­minen” on mah­dol­lista banneripinnassa.
  • Toteu­tuk­seen varat­tava enemmän aikaa ver­rat­tuna still tai .gif ‑aineis­tojen tekemiseen.
  • Hyö­dyn­ne­tään tekniikkaa.
  • Mobii­li­mai­non­nassa tek­niikka mah­dol­listaa paljon ja saa ihmisen viet­tä­mään aikaa brändin parissa.
  • Vältä liian vai­keasti tai kan­keasti lähes­tyt­täviä toteu­tuksia. Vanhempi koh­de­ryhmä e vält­tä­mättä osaa käyttää tai vie­roksuu teknisiä ratkaisuja.

Lue tietoisku HTML5-bannereista »

Yleiset kilotavurajat

Kuvabannerit, 40 - 80kt

HTML5-aineistot, 40 - 200kt

  • Koodi vie tilaa nor­maa­listi 10–30kt ani­moinnin määrästä riippuen. Ota tämä huomioon mai­noksen valo­kuvia käyttäessä!
  • Aineiston on mah­dol­lista olla yli sallitun koko­rajan, mutta vaatii teknisen toteu­tuksen, jolla mää­ri­te­tään aineis­tojen latau­tu­minen vasta kun mai­nos­tajan sivusto on latau­tunut kokonaan  (ns. lazy load). Tapaa käy­te­tään enemmän peli­mäi­sissä tai enemmän sisältöä tar­joa­vissa eri­koi­sissa rat­kai­suissa sekä videobannereissa.

Katso tarkemmat kanavakohtaiset aineisto-ohjeet »

Kilotavurajat ja bannereiden pakkaaminen

Mikäli bannerimainontaa ajetaan liian raskailla mainosmateriaaleilla, kampanjan tehokkuus kärsii. Kampanjaa on vaikeampi optimoida, kun osa mainosaineistoista jää näkymättä, kun mediat blokkaavat ne pois liian korkeiden kilotavujen takia. Myös latausajat kasvavat, kun aineistot ovat liian raskaita. Huonolla nettiyhteydellä raskaiden aineistojen näkyminen hidastuu merkittävästi.

Ensimmäinen ja nopein keino on kokeilla pakata .png -kuvat https://tinypng.com/ -työkalulla tai vastaavalla. PhotoShopista saa myös png:t ladattua ulos 8-bittisenä, jos kuva antaa periksi ja sen jälkeen kuvat voi vielä ajaa TinyPNG:n läpi.

Esimerkki, kuinka ratkaista ongelma, kun banneri on liian raskas.

Flash -bannerituotantoesimerkki

Bannerissa “leima” on pyörivä / keikkuva elementti. Banneri on toteutettu Flash-tekniikalla.

Ongelma: Osassa medioista kilotavuraja on 60kt. Valokuva on tiedostokooltaan n. 20kt liian suuri näihin medioihin.

Bannerituotanto esimerkki 1

Bannerituotanto esimerkki 2

Ratkaisu: Kuva paloiteltiin neljään eri osaan, joka mahdollisti nurmikkoalueiden kovemman pakkauksen, jolloin henkilöille ja kasvoille jäi tarkempi kuvanlaatu. Palat kasattiin yhteen Flashissä.

Nykyään HTML5-tekniikalla tehtynä sallittu aineiston kokoraja olisi 150kt, mutta samaa paloittelua voi joutua edelleen hyödyntämään.

HTML5 bannerituotantoesimerkki

HTML5 banneri on jaettu elemnetteihin, jotka ilmestyvät halutussa järjesteyksessä animoituun banneriin.

Bannerituotanto html5 esimerkki 2

Valmis banneri näyttää tältä, elementit tulevat vuoron perään näkyviin. Pieni liike bannerissa lisää mainonnan tehoja ja huomioarvoa merkittävästi.

Bannerituotanto html5 esimerkki 1

Kanavakohtaiset aineisto-​ohjeet

Aineisto-ohjeet vaihtelevat kanavien mukaan. Googlen banneriverkostossa voidaan ajaa painavampia aineistoja kuin ohjelmallisessa verkostossa.

Katso tarkemmat kanavakohtaiset aineisto-ohjeet »

Haluatko kuulla lisää?

Ota yhteyttä  blogin kirjoittajaan!

Tutustu myös muihin blogeihimme

Lisää luet­tavaa

Laita meille viestiä!

Tarvitsetko apua mainonnassa ja markkinoinnissa? Haluatko tehdä markkinointia, joka toimii? Kerro tarkemmin, missä tarvitset apua tai jätä yhteystietosi, niin otamme sinuun yhteyttä.

Anna Oddyn auttaa!

Lue mielenkiintoisia blogipostauksiamme
Tutustu palveluihimme
Tutustu asiakkaisiimme