2. Logon minimileveys 50 px
1.1 Logo X
Logon käyttö ja suoja-alueet verkossa X
Logoa käytetään pääasiallisesti sinisenä valkoisella pohjalla. Vaihtoeh-
toisesti logosta voi käyttää valkoista negatiiviversiota, jota voi käyttää
myös yhtenäisen ja rauhallisen kuvapinnan päällä. Oheisessa esimerkis-
sä logo on sijoitettu sinisen taivaan päälle.
Logon suoja-alueet muodostetaan oheisen kuvan osoittamalla tavalla.
Suoja-alueen sisäpuolella ei tulisi olla häiritseviä, voimakkaita visuaali- Suoja-alue
sia elementtejä.
Sähköisissä medioissa toimitaan välillä hyvin pienessä mittakaavassa.
Logon käytössä tuleekin aina varmistua siitä, että logo on riittävän ko-
koinen ja riittävän hyvälaatuinen pysyäkseen luettavana. Positiivi- ja ne-
gatiivilogon minimileveys verkkomedioissa on 50 px.
Esimerkki logon käytöstä kuvituksen päällä
1 | Tele.fi visuaalinen ilme
Tele.fi:ssä logo on aina näkyvissä sivun
vasemmassa yläreunassa. Tämän vuoksi ei
yleensä ole tarpeen sijoittaa logoa muihin
2 sivustolla oleviin elementteihin, esim.
kampanjasivustoille.
3. Sininen (pääväri)
1.2 Värimaailma R 53, G 153, B 93
Vaaleansininen (apuväri)
Värien koodit
R 129, G 198, B 255
Digitaalisissa toteutuksissa toimitaan aina rgb-värimaailmassa, jossa
värit muodostuvat punaisesta, vihreästä ja sinisestä osaväristä. Ohei- Vihreä (mm. tilausnapeissa)
sesta taulukosta löydät Tele.fi:ssä käytettävien värien määritykset. R 71, G 179, B 15
Väriprofiilina verkkototeutuksissa käytetään sRGB IEC61966-2.1 -pro-
fiilia. Harmaa (taustaväri)
R 240, G 240, B 240
Punainen (tarjousväri)
R 230, G 60, B 0
Mustanharmaa (leipäteksti)
R 30, G 30, B 30
1 | Tele.fi visuaalinen ilme
Värien oikeaoppisen käytön lisäksi tulee huomioi-
da ilmavuus. Vaalea yleisilme saa värit ja kuvituk-
sen nousemaan ja pitää taiton raikkaana. Ei siis
3 liian suuria yhtenäisiä värimattoja vaan ripaus
väriä sinne tänne!
4. 1.2 Värimaailma Valkoinen tila
Värien painoarvot
Tele.fi:n yleisilmeen tulisi olla sinivalkoinen. Vihreä ja punainen toimivat
tehosteväreinä nostaen tarvittaessa haluttuja elementtejä, kuten esim.
linkkinappeja, tarjouksia ja nostoja.
Värien painoarvot
1 | Tele.fi visuaalinen ilme
Huomioi myös värien viestittämät mielikuvat.
Punainen on voimakas ja pysäyttävä tehosteväri,
mutta se koetaan usein myös negatiivisena.
4 Vihreä koetaan usein positiivisena ja eloisana.
5. Arial
1.3 Typografia
Kirjaintyypit
Internetissä html-muodossa käytettyjen kirjaintyyppien tulisi aina olla
sellaisia, jotka löytyvät mahdollisimman monen eri käyttöjärjestelmän
peruspaketeista. Tele.fi:ssä käytetty Arial täyttää tämän kriteerin. Aria-
lia käytetään html-teksteissä niin otsikoissa kuin leipätekstinäkin.
Tämän lisäksi kuvaelementeissä käytetään Tele Finlandin brändikirjain-
tyyppiä Unitedia, ja erityisesti sen condensed- ja semi-condensed United condensed United semi-condensed
-leikkauksia.
1 | Tele.fi visuaalinen ilme
5
6. 1.3 Typografia
Tekstin värit ja muotoilu
Otsikko ja aktiivinen + vierailtu linkki
RGB 53, 153, 236
Hex 3599ec
Leipäteksti ja linkin hover
RGB 30, 30, 30
Hex 1e1e1e
Tekstin lihavointia tulisi käyttää säästeliäästi nostamaan vain tärkeim-
piä kohtia. Esim. hintoja ja puhelinnumeroita on yleensä perusteltua li-
havoida.
Esimerkki: etusivun palstoitus
1 | Tele.fi visuaalinen ilme
6
7. 1.4 Taitto 4 palstan levyinen päänosto
Palstataitto – sivuston selkäranka
1 palsta 1 palsta 1 palsta 1 palsta
Sivuston sisältö muodostuu neljään palstaan jaetun ruudukon pohjalta.
Ruudukon tarkoituksena on yhtenäistää sivuston ulkoasu, auttaa sisäl- 2 + 1 palstan levyinen
laitenosto
löntuotannossa ja päivittämisessä sekä helpottaa käyttäjän tiedonha-
kua.
Palstojen lisäksi huomiota tulee kiinnittää niiden välisiin marginaalei-
hin. Jotta kaikki sivun elementit saadaan linjaan toistensa kanssa, myös
marginaalien tulee olla yhtenäiset.
Esimerkki etusivun palstoituksesta
1 | Tele.fi visuaalinen ilme
Johdonmukainen typografia ja taitto edistää
luotettavaa brändimielikuvaa. Luotettavuus
viestinnässä on ensimmäinen askel siihen, että
7 kuluttaja voi luottaa myös markkinointiviestin
sisältöön.
9. Esimerkki: etusivun visuaalinen hierarkia
1.4 Taitto
1.
Visuaalinen hierarkia
Mitä tahansa sivua suunniteltaessa tulisi aina pyrkiä luomaan sivul- 2. 2. 2. 4
le selkeä visuaalinen hierarkia, Taitto suunnitellaan niin, että elemen-
tit saavat sivulla selkeän painoarvon sen mukaan, kuinka tärkeitä tai
olennaisia ne ovat. Yksinkertaistettuna tämä voidaan ilmaista niin, että 3 5
esimerkiksi tärkeä päänosto nostetaan sivulla mahdollisimman ylös, ja
siitä tehdään mahdollisimman suurikokoinen ja helposti huomattava,
kun taas vähemmän tärkeät elementit saavat pienemmän tilan ja suh-
teellisesti vähemmän näkyvän sijoittelun.
Hierarkisen sijoittelun perustana ovat mm. tutkimukset verkkokäyttä-
jien silmäilyjärjestyksestä uudelle sivulle tultaessa: yleistäen voidaan
todeta että ensimmäisenä hahmotetaan vasen yläkulma, siitä alaspäin
ja oikealle siirtyen.
1 | Tele.fi visuaalinen ilme
Jo sisältösuunnitteluvaiheessa tulisi kiinnittää Hierarkian tarve vain korostuu verkossa, jossa
huomiota hierarkiaan: mikä on aiheen tärkein sisältöä selaillaan korostetun pintapuolisesti ja
sisältö, mikä seuraavaksi tärkein jne. tavoitehakuisesti. Tämä tulisi huomioida myös
9 tekstisuunnittelussa: pidä teksti korostetun
ytimekkäänä!
10. Esimerkki: liittymät-sivun palstoitus
1.4 Taitto 2 palstaa
4 palstaa
Palstat ja kuvitus 2 palstaa 2 palstaa
Tavoitteena visuaalisessa suunnittelussa on ollut rakentaa selkeä run-
ko, joka kuitenkin taipuu myös hyvin vaihtelevan ja monipuolisen sisällön 1 palsta 1 palsta 1 palsta 1 palsta
esittämiseen. Näin haluttiin antaa Tele Finlandin hahmoille, Esalle ja Ro-
Palstoituksen
polle tilaa yllättää käyttäjä myös sisäsivuilla. Hahmot tuovat ripauksen ylittävä kuvitus-
iloa ja hauskuutta jämäkkään palstataittoon nousemalla ikäänkuin ulos elementti
ruuduista ja laatikoista kautta sivuston.
1 | Tele.fi visuaalinen ilme
10
11. 1.4 Taitto 1 palsta 3 palstaa
2 palstan levyinen
tekstipalsta
1 palsta
varattu
nostoille
Tekstin taittaminen ja kuvi-
tukselle
Tekstipalstat ovat helpommin luettavia kun ne eivät ole liian leveitä.
Tele.fi on suunniteltu niin, että tekstiä ei koskaan tarvitse latoa kahta
palstaa leveämmäksi. Tämä luo myös yleisilmeeseen ilmavuutta ja antaa
tilaa kuvituksille ja nostoille.
Esimerkki: palvelut-sivun palstoitus
1 | Tele.fi visuaalinen ilme
Huomioi tekstiä taittaessa, että rivitys ei mene liian
lähelle palstan sivu- tai alareunaa. Teksti tarvitsee sil-
mämääräisesti saman verran tilaa joka puolelle, mutta
11 erityisesti palstan oikealle puolelle kannattaa yleensä
jättää hieman lisätilaa.
12. 1.5 Kuvitus
Kuvituksen yleistunnelma
Tele Finlandin kuvituksissa seikkailevat Esa ja Ropo esiintyvät aina iloi-
sina ja positiivisina. Esa on Tele Finlandin päähahmo ja esittää yleensä
sivustollakin pääosaa, samalla kun Ropo toimii parivaljakon hellyttävänä
ja huvittavana osapuolena. Ropon roolina sivustolla on mm. vinkata käyt-
täjälle tarjouksista tai eduista.
Kuvitusten taustojen tulisi aina olla valoisia ja raikkaita väritykseltään.
Oli kesä tai talvi, kuvituksiin poimitaan aina kunkin vuodenajan idyllisin-
tä, suomalaistyyppistä ympäristöä.
Kuvituksen teknisen toteutuksen tulisi olla Tele Finlandin yleisten ku-
vitusohjeistuksien mukainen. Tarkemmat ohjeistukset löytyvät Tele Fin-
landin Brand Bookista.
Esimerkkejä Tele.fi -kuvituksista
1 | Tele.fi visuaalinen ilme
Isokokoisemmissa yleiskuvissa Esa ja Ropo esitetään
yleensä yhdessä. Pienemmissä kuvissa ja nostoissa
voidaan käyttää myös vain toista.
12
13. 1.5 Kuvitus
Kuvituksen käyttö Tele.fi:ssä
Tele.fi:n etusivulla on pääosassa suurikokoinen nostokaruselli, joka toi-
mii heti sivulle tullessa selkeänä katseenvangitsijana. Kuvituksen avulla
voidaankin helposti kohdistaa käyttäjän mielenkiinto haluttuun sisäl-
töön. Kuvitusta tulisikin käyttää sivulla tavoitehakuisesti: ei roiskien
päämäärättömästi, vaan säästeliäästi ja harkiten.
Yleensä esim. yksi tai kaksi kuvituselementtiä per sivu riittää mainiosti,
kaikilla alasivuilla ei välttämättä tarvitse olla kuvitusta lainkaan.
Pienikin kuvituselementti toimii parhaiten silloin, kun se rikkoo jonkin
rajan esim. nousee ulos laatikosta. Usein kuvitukset eivät myöskään tar-
vitse rajattua laatikkoa lainkaan, vaan hahmot voivat vapaasti seikkailla
sivupohjassa, esim. sivun marginaalissa.
Esimerkkejä vapaasti asetelluista kuvituksista
1 | Tele.fi visuaalinen ilme
Kun kuvituksia sijoitellaan vapaasti, tulisi aina konsul-
toida myös teknistä asiantuntijaa siitä, pystytäänkö
kyseistä ratkaisua toteuttamaan julkaisujärjestelmän
13 rajoitteet huomioiden.
14. 1.6 Graafiset elementit
Tele.fi:n graafinen ilme
Tele.fi:n ilmeessä yhdistyy pelkistetty, moderni verkkosuunnittelu ja
iloisen pirteä kuvamaailma. Graafisen ilmeen perustana ovat ilmavuus,
pyöreät kulmat ja keveät varjostukset ja liukuvärit.
Ilmavuus saavutetaan taittamalla sisältö aina riittävän väljästi: tekstil-
lä ja kuvilla on aina marginaalinsa suhteessa toisiinsa. Tekstit suunnitel-
laan aina tiiviiksi ja niitä rytmitetään kappalevaihdoilla ja väliotsikoilla.
Kulmien pyöristyksien tulee aina olla yhtenäiset suunniteltuihin sivu-
pohjiin nähden. Tarkasta suunniteltavan elementin kulman pyöristysaste
tarvittaessa suunnittelun perustaksi luoduista alkuperäistiedostoista.
Varjostuksien ja liukuvärien suhteen tulee noudattaa sivustolle luo-
tujen suunnittelupohjien esimerkkiä, sekä periaatetta ”vähemmän on
enemmän”.
Esimerkki graafisista elementeistä: pyöreitä kulmia
ja hienovaraisia varjostuksia ja liukuvärejä
1 | Tele.fi visuaalinen ilme
14
15. 1.6 Graafiset elementit
Muita graafisia elementtejä
Etusivun päänosto on toteutettu Flash-animoituna karusellina. Karu-
selli näyttää yhtä nostoa sovitun ajan, jonka jälkeen seuraava nosto
nousee esiin. Suunniteltaessa nostoja on otettava huomioon rajallinen
näkyvyysaika; tekstin tulee olla iskevää ja kuvituksen selkeää ja eteen-
päin ohjaavaa.
Esimerkkejä etusivun päänostoista
1 | Tele.fi visuaalinen ilme
15
16. 1.6 Graafiset elementit
Muita graafisia elementtejä
Nostolaatikko kulmanuolella toimii erikokoisten ja muotoisten nosto- Esimerkki nostolaatikosta kulmanuolella
jen pohjana. Nuolen tulisi aina olla oikeassa yläkulmassa. Nostojen leve-
yden tulisi olla aina tasalevyinen palstojen leveyden kanssa.
Viittaava huomiolaatikko toimii jonkin ylempänä olevan asian syventä-
jänä.
Napit luodaan aina samantyyppisiksi, väritykseltään ne voivat olla joko
vihreitä (käytetään pääasiassa linkkaamaan kauppaan) tai sinisiä. Na-
peissa voi käyttötarkoituksesta riippuen käyttää myös nuolta oikeassa
reunassa.
Esimerkkejä napeista
Esimerkki viittaavasta nostolaatikosta
1 | Tele.fi visuaalinen ilme
16
17. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”
1.7 Tekninen ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”fi” lang=”fi”>
<head>
dokumentaatio <title>TeleFinland</title>
<link rel=”stylesheet” href=”/css/styles.css” />
</head>
Tele.fi -sivusto on toteutettu nykypäivän stan- <body>
dardien mukaisesti käyttäen XHTML ja CSS -tek- <div id=”container”>
niikoita. Sivuston layout on toteutettu div-tait- <div id=”contentholder”>
toa käyttäen ja elementtien ulkoasu/positiointi <div id=”navi”>
on määritelty ulkoisessa Stylesheet-tiedostos- <div id=”search”></div>
</div>
sa. Uuden sisällön luonnissa tulisi aina käyttää <!-- Sisältö -->
”Tekninen Styleguide” -dokumenttia. </div>
</div>
Ohessa sivupohjan perusrakenne. <div id=”footer”></div>
</div>
</body>
</html>
1 | Tele.fi visuaalinen ilme
17
18. 1.7 Tekninen
dokumentaatio
1. tason navigaatio
Ylänavigaatio luodaan ”navi”-nimiseen DIV:iin <ul>
Unordered -listana. Kulloinkin valittuun navi- <li class=”active”><a href=”linkkiurl” id=”linkin ID”>Linkin teksti</
gaatioelementtiin lisätään class=”active” jolloin a></li>
<li class=”navispacer”></li>
sen värimääritykset ja taustakuva muuttuvat
<li><a href=”linkkiurl” id=”linkin ID”>Linkin teksti</a></li>
indikoimaan senhetkistä sijaintia sivustolla. <li class=”navispacer”></li>
<li><a href=”linkkiurl” id=”linkin ID”>Linkin teksti</a></li>
</ul>
1 | Tele.fi visuaalinen ilme
18
19. 1.7 Tekninen
dokumentaatio
2. tason navigaatio
Toisen tason navigaatio luodaan vastaavasti <div id=”level2”><ul>
kuin ylänavigaatiokin. Kulloinkin valittuun navi- <li><a href=”linkkiurl”>Linkin teksti</a></li>
gaatioelementtiin lisätään class=”active” jolloin <li><a href=”linkkiurl”>Linkin teksti</a></li>
<li><a href=”linkkiurl”>Linkin teksti</a></li>
sen värimääritykset ja taustakuva muuttuvat
<li class=”active”><a href=”linkkiurl”>Linkin teksti</a></li>
indikoimaan senhetkistä sijaintia sivustolla. <li><a href=”linkkiurl”>Linkin teksti</a></li>
</ul></div>
1 | Tele.fi visuaalinen ilme
19
20. 1.7 Tekninen
dokumentaatio
3. tason navigaatio
Vasemman reunan navigaatio luodaan normaa- <div class=”subnavi_container_left”>
lein anchor -linkein. Tässäkin tapauksessa kul- <div id=”level3”>
loinkin valittuun linkkiin lisätään class=”active” <div class=”hr_div_subnavi”><hr class=”hr_1px”></div>
<a href=”linkkiurl”>» Linkin teksti</a>
indikoimaan senhetkistä sijaintia sivustolla.
<a href=”linkkiurl”>» Linkin teksti</a>
<a href=”linkkiurl”>» Linkin teksti</a>
<a href=”linkkiurl” class=”active”>» Linkin teksti</a>
<a href=”linkkiurl”>» Linkin teksti</a>
</div>
</div>
1 | Tele.fi visuaalinen ilme
20
24. 1.7 Tekninen <slide1
timer=”10” = Aika kuinka kauan slide on näkyvissä.
img=”banner_images/telefi_laajakaista.jpg” = Taustakuvan sijainti.
dokumentaatio openInWindow=”_blank” =Avataanko linkki tyhjään vai samaan ikkunana _blank / _self
effectSpeed=”1” = Kuinka kauan sliden vaihtoefekti kestää
obj=”banner_images/link.png” = Lisättävä kuva, jos halutaan käyttää näkymätöntä linkkiob-
Etusivun karuselli jektia käytetään kuvaa link.png
objX=”50” = Kuvan X-positio (vaakasuora)
Etusivun flash-karusellin sisältö määritellään objY=”300” = Kuvan Y-Position (pystysuora)
XML-tiedostossa. objLink=”https://kauppa.tele.fi/telefinland/paketti/liittymapaketti.aspx?add=perus ” =
kuvan url, jos kuvaan ei haluta linkkiä jätetään se tyhjäksi. (objLink=””)
objWidth=”300” = Kuvan leveys
objHeight=”300”= Kuvan korkeus
/>
XML- Rakenne <slide2
timer=”10”
<?xml version=”1.0” encoding= ”UTF-8” ?> img=”banner_images/tele_fi_heinakuu.jpg”
<content openInWindow=”_blank”
bannerWidth=”960” = Noston leveys effectSpeed=”1”
bannerHeight=”280” = Noston korkeus obj=””
automaticStart=”yes” = Pyöriikö nosto automaattisesti yes/no objX=””
buttonClipRightMargin=”760” = Navigoinnin oikea marginaali. objY=””
buttonClipLeftMargin=”820” = Navigoinnin vasen marginaali. objLink=””
pausePlayButtonPositionX=”880” play/pause –painikkeen x-sijainti. objWidth=””
pausePlayButtonPositionY=”246” play/pause – painikkeen y-sijainti. objHeight=””
pausePlayVisibility=”show” = Näytetäänkö play/pause -painike />
buttonsVisibility=”show” = Näytetäänkö navigointipalikat
spaceBetweenButtons=”3” = Navigointipalkkien väli </content>
>
24
25. 1.7 Tekninen
dokumentaatio
Obj-attribuutti
Obj–attribuutilla voidaan lisätä slidelle koko-
naan erillinen kuva. Slidetagille voidaan lisätä
obj attribuutteja, jotka tulee nimetä järjestyk-
sessä obj, obj2, obj3 jne. HUOM! Slideilla on ol-
tava aina yhtä monta obj-attribuuttia.
Jos slide1:lla on attribuutit obj, obj2 ja obj3,
samat attribuutit on oltava myös slide2 ja
slide3:lla. Jos obj-kuvia/linkkejä ei kuitenkaan
haluta käyttää kaikissa slideissa, jätetään attri-
buutit tyhjiksi (obj=””, objX=””, objLink=”” jne.).
1 | Tele.fi visuaalinen ilme
25
26. 1.7 Tekninen
dokumentaatio <!-- SiteCatalyst code version: H.17. Copyright 1997-2008 Omniture, Inc. More info availab-
le at http://www.omniture.com -->
<script language=”JavaScript” type=”text/javascript” src=”/js/s_code_prod.js”>
</script>
Mittaus
<script language=”JavaScript” type=”text/javascript”><!--
s.pageName=”Etusivu”
Tele.fi -sivustolla käytetään SiteCatalyst -mitta- s.channel=”/Etusivu”
usta. Ohessa malli sivuun lisättävästä koodis- s.server=”l”
ta. var s_code=s.t();if(s_code)document.write(s_code)//--></script>
<script language=”JavaScript” type=”text/javascript”><!--
if(navigator.appVersion.indexOf(’MSIE’)>=0)document.write(unescape(’%3C’)+’!-’+’-’)
//--></script><noscript><a href=”http://www.omniture.com” title=”Web Analytics”>
<img src=”http:///b/ss/teliasedev2/1/H.17--NS/0”
height=”1” width=”1” border=”0” alt=”” /></a></noscript><!--/DO NOT REMOVE/-->
<!-- End SiteCatalyst code version: H.17. tele -->
1 | Tele.fi visuaalinen ilme
26
27. 2.1 Ostettu ja
ansaittu media
Mainonnan muodot
Verkkomainonnan formaateista Tele Finland hyödyntää aktiivisesti mm.
vaihtelevan kokoisia ja muotoisia bannereita, niin animoituina kuin
staattisina versioinakin. Nykyään bannereissakin pystytään hyödyntä-
mään tehokkaasti mm. videomateriaalia, mikä mahdollistaa mm. televi-
siomainosten esittämisen bannereissa.
Mediat tarjoavat jatkuvasti uusia banneriformaatteja, joten niiden yk-
sityiskohtainen läpikäynti on jokseenkin turhaa. Tele Finlandin brändiin Esimerkki toteutetusta video-bannerimainoksesta
sopii kuitenkin kaikenlaisten uusien ja yllättävien formaattien ennakko-
luuloton käyttäminen.
2 | Markkinointiviestinnän visuaalinen ilme
Bannerit huomataan usein parem-
min, jos niiden sisältö tai visuaalisuus
suunnitellaan istumaan kohdemedian
27 sisältöön.
28. 2.1 Ostettu ja
ansaittu media
Tone-of-voice verkkomainonnassa
Verkkomainonnan tone-of-voice noudattaa pääpiirteissään muun vies-
tinnän linjaa. Verkkomainonnan roolina on usein joko kiinnittää huomio
tarjoukseen, ja/tai tukea käynnissä olevan kampanjan viestiä.
Kaikki Tele Finlandin verkkomainonta pyrkii aina ohjaamaan kuluttajaa
eteenpäin Tele.fi-sivuille ja verkkokauppaan. Ohjaus visualisoidaan ohei- Esimerkki verkkomainoksen aktivointinuolesta
sen kuvan mukaisella aktivointinuolella, joka on yleensä väritykseltään
TF:n punainen. Nuolen sisällä oleva ohjausteksti ladotaan versaalina ja
keskitetään joka puolelta. Yleensä nuoli on myös animoitu.
2 | Markkinointiviestinnän visuaalinen ilme
Bannerin näkee yleensä yli. 100 kertaa suurempi
määrä kuin sitä klikkaa! Suunnittele siis banneri
niin että myös mahdollisimman monelle heistä jää
28 muistijälki bannerin viestistä/tarjouksesta.
29. 2.1 Ostettu ja
ansaittu media
Ansaitun median ratkaisut
Ansaitulla medialla tarkoitetaan yrityksen spontaanisti ja ostamatta saa-
maa mediahuomiota. Ansaittu media nauttii arvostusta kuluttajan pää-
töksenteossa. Mm. Mediacomin toteuttaman tutkimuksen mukaan yli 50
prosenttia sosiaalisen median käyttäjistä on muuttanut käsitystään jos-
tain tuotteesta tai palvelusta verkosta saadun tiedon perusteella.
Ansaitun median hyödyntämistä tavoittelevista kampanjoista voi mai-
nita esimerkiksi 2009 kesällä toteutetun kampanjan, jossa haettiin
rekrytointi-ilmoituksilla ”festarisankaria” eri musiikkifestivaaleille. Ta-
voitteena oli kohdata työpaikkaa vaihtamassa olevat kuluttajat yllättä-
vässä mediassa ja saada aikaan ansaitun median huomiota ja viestin
leviämistä viraalisti. Tele Finlandin rekrytointi-ilmoitus julkaistiin mm. Oikotie.fi:ssä
2 | Markkinointiviestinnän visuaalinen ilme
Aiheen täytyy olla erityisen kiinnostava, jotta kulut-
taja haluaisi jakaa jotain ystävilleen. Tämän vuoksi
ansaitun median ratkaisut saattavat vaatia rohke-
29 aakin lähestymistä.
30. 2.1 Ostettu ja
ansaittu media
Logon käyttö verkkomainonnassa
Esimerkiksi bannerit ja mobiilin päätelaitteen sovellukset asettavat
suunnittelulle omat rajoitteensa. Logon käytössä tuleekin aina varmis-
tua siitä, että logo on riittävän kokoinen ja riittävän hyvälaatuinen pysy-
äkseen luettavana. Positiivi- ja negatiivilogon minimileveys verkkomedi-
oissa on 50 px.
Verkkomainoksissa logo toimii allekirjoittajana. Logon tulisikin näkyä
kuluttajalle riittävän varhaisessa vaiheessa jotta kuluttaja ehtii huoma-
ta kenen mainos on.
Esimerkkejä logon sijoittelusta verkkomainoksissa
2 | Markkinointiviestinnän visuaalinen ilme
Verkkomainoksien painorajat ovat Logonkäytössäkin voi olla luova! Logon ei aina tar-
tiukat. Pakkaa mieluummin jotain vä- vitse olla päälleliimattuna nurkassa. Ylläolevassa
hemmän tärkeää elementtiä, ja pidä logo banneriesimerkissä käsi pitelee paperia jossa logo
30 mahdollisimman hyvälaatuisena. on. Vietäessä hiiri bannerin päälle käsi jättää pape-
rin verhon taakse ja alkaa heiluttaa ’tilaa’-nuolta.
31. 2.1 Ostettu ja
ansaittu media
Kuvituksen käyttö verkkomainonnassa
Kuvitukset joutuvat verkkomainonnassa tiukkojen kilorajojen armoille.
Suuri ja näyttävä kuva huomataan, mutta kuvan laatu saattaa pahimmil-
laan olla este halutun viestin välittymiselle. Suunnittele siis verkkomai-
noksia idea edellä, mutta kilorajat mielessä.
Bannerin koko määrittelee hyvin pitkälle, millaisia ideoita ja toteutuksia
niissä kannattaa ylipäänsä käyttää. Pidä huolta että myös teksti pysyy
aina riittävän voimakkaana ja luettavana, nyrkkisääntönä United Sansia
ei verkkomainoksissa tulisi latoa alle 16 px:n koon.
Esimerkkejä kuvituksen käytöstä eri banneriko’oissa
2 | Markkinointiviestinnän visuaalinen ilme
Banneria suunniteltaessa yritä välttää liian pitkiä Yleensä hahmokuvien kokoa ja laatua voi kasvattaa
tarinoita tai useita viestejä. Ytimekäs, selkeä viesti esimerkiksi bannerin taustaa rauhoittamalla ja
ja idea huomataan yleensä parhaiten. pelkistämällä.
31
32. 2.2 Omistettu media
Mikrosivustot Tele.fi:ssä
Mikrosivusto-termillä tarkoitetaan itsenäistä osiota suuremmasta verk-
kosivustosta ja sitä käytetään syventämään tietoa jostain yksittäisestä
aiheesta. Tele.fi:ssä mikrosivustoilla esitellään mm. tärkeitä tarjouksia.
Tele.fi:n mikrosivustoille kävijöitä ohjataan yleensä suoraan verkkomai-
noksista, sekä Tele.fi:n etusivun nostoista. Mikrosivustoilla on yleensä
myös suora, selkokielinen osoite, mm. oheisissa kuvissa esitelty Euron
päivä -kampanjan osoite oli: www.tele.fi/euronpaiva.
Jos mikrosivusto toteutetaan Flash-animoituna, pidetään sivulla kui-
tenkin aina näkyvissä myös yläreunan päänavigaatio, sekä alareunan
footer-navigaatio.
Euron päivä -mikrosivusto toteutettiin kesällä 2009
2 | Markkinointiviestinnän visuaalinen ilme
Musiikin tai puheen käyttö mikrosivustoilla on
voimakas tehokeino joka voi luoda tunnelmaa ja
syventää viestin välittymistä, mutta ajattelematto-
32 masti käytettynä se saatetaan kokea ärsyttävänä.
33. 2.2 Omistettu media
Nostot Tele.fissä
Käyttäjä ei yleensä koskaan vieraile sivuston jokaisella sivulla, joten
hänen rajallinen vierailuaikansa tulisi hyödyntää mahdollisimman tehok-
kaasti. Käyttäjän näkökulmasta on tärkeää, että hän löytää mahdollisim-
man helposti ja nopeasti etsimänsä tiedon, Tele Finlandin näkökulmasta
on tärkeää pidentää vierailua esittelemällä muita mahdollisesti kiinnos-
tavia sisältöjä ja tarjouksia.
Erilaisia nostoja suunniteltaessa tulisi huomioida molemmat edellämai-
nituista puolista. Nostot kilpailevat huomiosta toistensa kanssa, joten
on tärkeää että olennaisimmat nostot huomataan parhaiten. Jos kaikki
nostot huutavat täyttä kurkkua, käyttäjä ei välttämättä huomaa niistä
yhtäkään.
Esimerkki nostohierarkiasta etusivulla. Tärkeä päänosto vie suuren
osan huomiosta, minkä jälkeen huomio kiinnittyy pienempiin
alanostoihin ja myöhemmin oikean reunan tekstinostoihin.
2 | Markkinointiviestinnän visuaalinen ilme
Nostojen viestejä tulee suunnitella kuin verkko-
mainoksia, pelkistys ja tiivistys on ensiarvoisen
tärkeää!
33
