Tärkeimmät vinkit bannerien tekemiseen

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

Onnistunut bannerimainonta vaatii hyvän suunnittelun ja ymmärrystä bannerimainonnasta.

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 »

Digikampanjan 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 tiedostokoot pieniä, näissä oltava tarkkana!
  • Jos käytössä vain tasapintaisia värejä, käytä .PNG-formaattia.
  • Jos käytössä on valokuva, käytä .JPG-formaattia.
  • GIF-formaattia ei suositella rajallisen värimäärän takia (enintään 256 väriä). Älä käytä lainkaan valokuvaa sisältävässä aineistossa.
  • Tarvittaessa 8-bittisyys pienentää kokoa, mutta varmista laatu, kun pakkaat.
  • Käytä reunuksia. Suurin osa medioista vaatii aineistolle reunukset. Google lisää automaattisesti mustat reunat. Ilman reunuksia oleva mainos voi johtaa oudon näköisiin elementtien sijoitteluihin.
  • Resoluutio 72dpi.
  • Väriprofiili RGB.

 

Animoitu .gif

  • Animaation enimmäiskesto 30 sek. Kaiken liikkeen pysähdyttävä ennen tätä.
  • Muista ottaa suunnitellessa huomioon, mihin viestiin ja näkymään liike pysähtyy!
  • Vaikka Gif -animaatio on helppo tuottaa, on animointi rajattua ja suuri animointi kasvattaa tiedostokokoa.
  • Yleensä kaikki animoidut aineistot tehdään HTML5 -muotoon. GIF-formaattia voidaan käyttää yksinkertaisesti animoiduissa aineistoissa.

HTML5

  • Tiedostojen sallitut enimmäiskoot usein suurempia verrattuna still -bannereihin.
  • Mahdollistaa nykyään paljon. Periaatteessa, sen mitä voi tehdä nettisivuille, onnistuu myös bannerissa.
  • Myös “pelillistäminen” on mahdollista banneripinnassa.
  • Toteutukseen varattava enemmän aikaa verrattuna still tai .gif -aineistojen tekemiseen.
  • Hyödynnetään tekniikkaa.
  • Mobiilimainonnassa tekniikka mahdollistaa paljon ja saa ihmisen viettämään aikaa brändin parissa.
  • Vältä liian vaikeasti tai kankeasti lähestyttäviä toteutuksia. Vanhempi kohderyhmä e välttämättä osaa käyttää tai vieroksuu teknisiä ratkaisuja.


Lue tietoisku HTML5-bannereista »

Yleiset kilotavurajat

Kuvabannerit, 40 – 80kt HTML5-aineistot, 40 – 200kt
  • Koodi vie tilaa normaalisti 10-30kt animoinnin määrästä riippuen. Ota tämä huomioon mainoksen valokuvia käyttäessä!
  • Aineiston on mahdollista olla yli sallitun kokorajan, mutta vaatii teknisen toteutuksen, jolla määritetään aineistojen latautuminen vasta kun mainostajan sivusto on latautunut kokonaan (ns. lazy load). Tapaa käytetään enemmän pelimäisissä tai enemmän sisältöä tarjoavissa erikoisissa ratkaisuissa 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 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 bannerituotanto esimerkki

HTML5-banneri on jaettu elementteihin, 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ä artikkelin kirjoittaneeseen ammattilaiseen.

Oddy Digital CEO Jenna Leino

Tutustu myös blogeihimme aiheesta

Mitä on Googlen Display-mainonta?

Mitä on Googlen Display-mainonta?

Google Display -mainonta on Googlen Display-verkostossa näkyvää bannerimainontaa. Kustannustehokas mainosmuoto tavoittaa laajoja yleisöjä ja vie viestisi tehokkaasti perille.
Mitä on Googlen bannerimainonta

Google bannerimainonnan hyödyt

Googlen bannerimainonta eli Display-mainonta sopii moneen. Se on hyvä tapa mainostaa visuaalisin keinoin, tavoittaa laajasti, kohdennetusti ja mitattavasti.
Vinkit bannerituotantoon

Tärkeimmät vinkit bannerien tekemiseen

Näillä vinkeillä ja huomioilla onnistut tekemään toimivat ja tyylikkäät bannerit. Opi ja poimi tärkeimmät vinkit bannerien tekemiseen.
Tehokas viesti bannerimainonnassa

Vinkkejä toimivan mainosviestin kirjoittamiseen bannerimainonnassa

Tiedätkö millainen on toimiva ja tehokas mainosviesti bannerimainonnassa? Lue blogistamme vinkit hyvän banneriviestin kirjoittamiseen!
Millainen on toimiva bannerimainos?

Millainen on toimiva bannerimainos?

Millainen on toimiva bannerimainos? Toimivuuteen vaikuttaa bannerin selkeä ulkoasu ja toimiva mainosteksti. Lue blogi ja opi aiheesta lisää.
Oddy HTML5 bannerit

Tietoisku HTML5-banneriaineistoista

HTML5 (Hypertext Markup Language) tarjoaa mainostajalle mahdollisuuden tehdä näyttäviä, toiminnallisia mainosmuotoja desktopiin, mobiiliin ja tablettiin. Suosittelemme vahvasti animoitujen ja toiminnallisten aineistojen tekemistä HTML5 -muotoon. Lue lisää.

Ota yhteyttä

Etsitkö huoletonta ja kokonaisvaltaista ratkaisua yrityksesi markkinointiin? Oddyn markkinointipäällikköpalvelu auttaa. Lue lisää!
Tilaa Oddy Digitalin uutiskirje

Tilaa tosi Oddy uutiskirje!

Tilaa noin kerran kuussa ilmestyvä uutiskirjeemme, niin pysyt ajan tasalla digitaalisen markkinoinnin trendeistä.