johdanto
jossain vaiheessa uraansa lähes jokainen suunnittelija joutuu suunnittelemaan joukon bannerimainoksia. Inspired by someone who told me that they had done their first ever banner ad I thought it would be good to examinate this design sub-genre since I have designed thousands of banner ads and art directed thousands more over the years.
tässä viestissä en lähde pohtimaan esimerkiksi sitä, millaisilla sivuilla mainokset näkyvät tai klikkailemaan hintoja, koska suunnittelijat eivät voi muuttaa näitä. Aion yksinomaan tarkastella veneet suunnittelu bannerit, jotta ne näyttävät houkuttelevampi (ja toivottavasti enemmän clickable).
bannerimainosten tulisi viitoittaa sivu, jonka ne yhdistävät
BANNERIMAINOSMAISEMAAN
kolme yleisintä Online-bannerimainosta ovat MPU (Messaging Plus-yksiköt), leaderboard ja pilvenpiirtäjä, jota kutsun bannerimainosten pyhäksi kolminaisuudeksi. Ne näkyvät koko web kuin muodot sopivat koko leveys verkkosivun (pistetaulukot) tai sisällä yksittäisen sarakkeen (MPUs ja pilvenpiirtäjiä). Pistetaulukot on sijoitettu joko MPU tai pilvenpiirtäjä, mutta kaikki kolme eivät koskaan näy yhdessä.
bannerimainokset ovat yleensä osa olemassa olevaa kampanjaa, joten niiden ainesosat voivat olla asiakkaan toimittamia eli logoja, kuvia, kopiointiohjeita. Avain on yhdistää nämä ainesosat tavalla, joka on mielenkiintoinen sivuston käyttäjän 2 sekuntia tai niin, että he viettävät skannaamalla mainoksen (vielä vähemmän, jos he skannaavat mainoksen perifeerisesti). On tärkeää napata heidän huomionsa mukaansatempaava kuva / viesti ja tehdä selväksi, mitä haluat heidän tekevän seuraavaksi. Jos siristät silmiäsi, eikä mainoksessa ole selvää polttopistettä, se tuskin toimii.
olen vahvasti sitä mieltä, että banderollien pitäisi selvästi ilmoittaa, mitä Webin käyttäjä klikkailee. Näin käyttäjä saapuu sivulle, joka näyttää sinne lähettämältään mainokselta. Jos se ei olisi, he olisivat luonnollisesti pettyneitä tai lykkääntyneet, jos se ei näyttäisi lainkaan siltä, mitä he odottivat.
tämän vuoksi katson yleensä kohdesivua ensin bannerimainoksia suunnitellessani ja työskentelen sieltä taaksepäin. Seuraavaksi selvitetään mainoksen eri ainesosien oikea hierarkia(esim. logo ensin, mutta pieni, otsikko seuraavaksi, mutta hallitseva jne.). Tämän jälkeen lisätään sopiva call-to-action (CTA), joka sitoo kopioon ja täsmentää halutun toiminnon/vastauksen. Kun viestien hierarkiat on lajiteltu, niitä voidaan soveltaa kolmeen bannerimainoksen kokoon erikseen.
elementit kilpailevat keskenään useimmissa Mpuissa neliömäisen muodon
MPUs vuoksi (300×250)
MPU (Messaging Plus-yksikkö) sijoitetaan yleensä sivun kapeampaan oikeanpuoleiseen sarakkeeseen, minkä seurauksena se on muodoltaan suunnilleen neliömäinen ja kooltaan pienempi niin, että se näkyy taitoksen yläpuolella. Squarish-formaatti aiheuttaa kompositio-ongelman, sillä ihmissilmä pitää kuvista, jotka ovat hieman vaakasuorampia (maisemaformaatti) tai syvempiä (muotokuvaformaatti).
minusta tuntuu, että logon, kuvan, otsikon ja CTA: n yhdistelmä MPUs: ssä ei useinkaan jätä paljon tilaa yhdelle neljästä mainoksen keskipisteeksi. Tämä on helppo nähdä HP ja X-Factor MPUs edellä, jossa kaikki elementit taistelevat toisiaan web-käyttäjän huomiosta. Kummassakin tapauksessa taustaa käytetään vain tablettina, johon sijoitetaan elementtejä.
sitä vastoin yllä oleva CSI MPU on käyttänyt taustakuvaa tuomaan elementit yhteen laittamalla ne esiin varjoista. Myös ympyröity ase, keltainen todistekortti ja kädet jaloissa nousevat esiin varjoista asettaakseen sävyn ja antaakseen muuta visuaalista tietoa silmälle, jos kopiota ei lueta.
otsikot ovat pistetaulukoissa avainasemassa
pistetaulukot (728×90)
pitkä vaakasuora muoto leaderboard voi johtaa malleja, jotka käyttävät sen elementtejä sarjana yhtä palasia kuin HP esimerkki edellä. Kuitenkin olen huomannut, että pistetaulukot on enemmän vaikutusta, jos otsikko on paljon suurempi kuin kaksi muuta bannerimainoksen yksikköä. Tämä on selvästi osoitettu X-Factor mainos edellä, jossa vaikka skannaat mainoksen nopeasti avain takeaway on ” Have You got it?”
koska pistetaulukot sijoitetaan yleensä aivan sivun yläreunaan, keskittyminen otsikoihin sopii ennestään olemassa olevaan psykologiaan siitä, miten käsittelemme verkkosivuja–jäännösmuistiin Sanoma-ja aikakauslehtien lukemisesta.
näyttötarkkuuksien kasvaessa myös verkkosivun leveydet tekevät aiemmasta 728×90: stä yhä tarpeettomamman (alun perin suunniteltu 1024 × 768-resoluutiolle). Tämän seurauksena CBS Interactive siirtyy korvaamaan kaikki 728x90s sen verkon sivustoja 970x66s (kutsutaan super johtaja). Nämä uudet mainokset ovat vähemmän tunkeilevia sivuston käyttäjälle, ja ne sopivat tiiviimmin eri sivuille, jotka kaikki ovat nyt 970px leveitä. Superleaderin lisätty pituus ja matalampi syvyys sopii vielä paremmin kampanjan otsikkopohjaiseen iterointiin.
taitos leikkaa pilvenpiirtäjät kahtia, kunnes käyttäjä rullaa alas
pitkässä ja hoikassa pilvenpiirtäjässä on pieniä otsikoita ja suuria kuvia
pilvenpiirtäjiä (160×600)
vaikka MPUs ja pistetaulukot on yleensä sijoitettu sivulle taitoksen yläpuolelle, pilvenpiirtäjä leikataan kahtia sivun kertaiseksi (yleensä noin 600 px alas-katso kaavio yllä). Tämän seurauksena keskeiset tiedot, kuten logo, otsikko ja CTA pitäisi olla yläosassa. Pilvenpiirtäjän kapeus tarkoittaa myös sitä, että niiden otsikot ovat yleensä pieniä.
olen kokemukseni mukaan huomannut, että pilvenpiirtäjät sijoittuvat yleensä sivuille, joilla on paljon tietoa ja keveitä kuvia. Tämä on ihanteellinen pilvenpiirtäjiä, koska heillä on paljon enemmän tilaa imagary kuin MPUs ja pistetaulukot.
kolmessa yllä olevassa 160×600 esimerkissä pilvenpiirtäjät on suunniteltu ottaen yhä enemmän huomioon taitos vasemmalta oikealle. HP-pilvenpiirtäjässä kaikki edellä mainitut elementit ovat saaneet yhtä paljon näkyvyyttä, minkä vuoksi katseelle ei jää tarkennusta. X-Factorin mainoksessa juontajat ovat suurempia kuin muissa kampanjan iteraatioissa, mutta pieni otsikko on hukkunut kaikkiin muihin elementteihin–avaintiedot ovat kaikki taitoksen alapuolella ja tekevät mainoksen pohjasta raskaan. CSI-pilvenpiirtäjässä suurempi kuva tuo elementit yhteen, kun taas toinen logo on aiheuttanut pientä ahtautta huipulla.
vertaa tätä 728×90-versiota mainoksesta alla olevaan 300×250: een (katso animaatiomainos täältä)
animaatio auttaa jakamaan elementtejä ajan myötä
animaatio
on sanomattakin selvää, että animaation lisääminen bannerimainokseen kiinnittää huomion siihen. Bannerin Flash-versio auttaa myös hajottamaan nämä elementit ajan myötä. Ally 728×90 yllä näyttää koko kynä on vähemmän pakottavia kuin 300×250 versio, jossa silmä odottaa mitä tapahtuu seuraavaksi.
viime aikoina olen nähnyt paljon enemmän uusintapainikkeita animoiduissa mainoksissa–ei epäilystäkään, koska mainos on jo alkanut soida, kun sivu alkaa latautua. Mainosten staattisista versioista on tullut taas ajankohtaisempia, kun ne ladataan oletuksena Jpeg-tiedostona ympäristöissä, joissa Flash ei pelaa, kuten tableteissa ja älypuhelimissa.
pelkkä animaatio ei riitä tekemään mainoksesta hyvää. Mainoksessa on silti oltava jotain pakottavaa, muuten se kääntyy kohti sitä, että se on kuin kaikki ne Halvat huomiota tarttuvat luottopisteet, ruokavalio ja remortgage-mainokset. Olin alun perin kääntänyt edellä mainitut kaksi Ally-mainosta animoiduiksi Gif-kuviksi tätä julkaisua varten, mutta silmäni seuloi ne automaattisesti pois, kun minä (ja luultavasti useimmat ihmiset verkossa) Olen niin tottunut sivuuttamaan animoidut mainokset päällekkäin päällekkäin.
bannerimainosten SUUNNITTELUVINKIT
koska olen tehnyt niin paljon bannerimainoksia, tässä muutamia vinkkejä, joita olen poiminut vuosien varrella. Pahoittelut, jos ne tuntuvat ilmeisiltä, totean ne, koska näen niitä jatkuvasti ei sovelleta:
Kopioi
• Vältä kaikkia suuraakkosia, koska näin käyttäjän on vaikea lukea
• otsikoiden ja vartalokopion tulisi olla erikokoisia, jotta lukija voi helpommin skannata
• otsikoiden ja/tai vartalokopion tulisi olla enintään kolmella rivillä
• säilytä viestihierarkiat ja kaiken tekstin tulisi olla yhdenmukaisesti linjassa (vasen, oikea, keskusta)
• harkitse mielenkiintoisen typografian käyttöä kuvina tilan säästämiseksi yksi elementti vähemmän
Call-to-Action (CTA)
• pitäisi olla lyhyt ja pisteeseen kuten ”go now” tai ”check it Out”
• tulee olla yli taitteen 160×600 ja 300×600 yksikölle (suurin piirtein yksikön keskikohta)
• tulee olla isoilla kirjaimilla jokaisen sanan alussa, jotta on helpompi skannata
painikkeet
• pitäisi olla vastaväreissä näyttämättä pramealta
• tulee olla sijoitettu kopion loppuun ja/tai oikeassa alakulmassa
• tulee olla yhdenmukainen koko joukko bannerimainoksia
• ilmeisesti saada enemmän klikkauksia kuin teksti vain linkkejä bannerimainoksissa (vaikka jälkimmäinen näyttää tyylikkäämmältä)
sekalaista
• lisää 1px harmaa reunus mainoksiin valkoisella pohjalla-se voidaan sijoittaa valkoiselle sivulle
• ensimmäisen kierroksen hyväksymistä varten muutan joskus yksittäiset Photoshop-kehykset animoiduksi GIF-kuvaksi
• ennen lopullista jättämistä seison selälläni ja siristän mainosta tarkistaakseni, onko se helposti skannattavissa
• kuten kaikessa suunnittelussa, Säästä aikaa luonnostelemalla mainoksen kehykset aina
sivun iho yhdistää bannerimainokset käärimällä tai kehystämällä sivun
johtopäätös
koska web-käyttäjät ovat niin tottuneet näkemään bannerimainoksia (ja mainoksia yleensä), edessä on paljon muutoksia. Vaikka pyhä kolminaisuus MPU, leaderboard ja pilvenpiirtäjä hallitsevat banneri mainosmaisemaa olen nähnyt muita kokoja ovat yleistymässä, kuten 640×480 Interstitials (kuten video tulee hallitsevampi) ja 300×600 ”puoli sivua” mainoksia, joilla on syvempi MPU hallita oikealla sarakkeen. Täydellinen luettelo uudemmista yksiköistä, jotka todennäköisesti kansoittavat Internetin tulevaisuudessa, löytyy IAB: n sivulta aiheesta klikkaamalla tästä.
kattavampaa ja harmonisempaa brändäyskokemusta varten skinejä (tai ’taustakuvia’) käytetään paljon enemmän Internetissä (erityisesti IMDB: ssä), kun ne käärivät bannerimainokset yhteen. Teemme noin 900 nahat vuodessa CBS Interactive (lataa tämä pdf Lue lisää). Koska nahat liian tullut lukuisia on myös nousu mittatilaustyönä rich media haltuunottoja, joita on erityisesti pyydetty RFPs (lukea lisää tästä Katso minun postitse täällä). Kuitenkin sekä skins että rich media takeovers on edelleen jatkuvasti tarpeen mainos kokemus työskennellä yhdessä standardin bannerimainokset sivulla ja käyttäjän kokemus niistä.
liite
bannerimainosten historia: http://en.wikipedia.org/wiki/Web_banner
Interactive Advertising Bureau (IAB) standards:
http://www.iab.net/guidelines/508676/508767/displayguidelines
the Fold: http://en.wikipedia.org/wiki/Above_the_fold
Look up banners ads for specific brands: http://www.moat.com
Screen display resolution: http://en.wikipedia.org/wiki/Display_resolution
DIY ad creation: http://www.building43.com/videos/2011/07/19/flite-cloud-based-advertising
bannerimainokset Adobelta: http://tv.adobe.com/watch/cs5-design-premium-feature-tour/interaction-design-101-create-a-simple-banner-ad-with-flash-professional-cs5/
joitakin joukkoistettuja bannerimainossivuja:
http://jobs.designcrowd.com/bannerad-design-jobs
http://99designs.com/banner-ad-design/contests
http://www.crowdspring.com/banner-ads/
jotkut halvat (ja ylikansoitettu) web mainospalkkien suunnittelu sivustot:
http://www.justgothere.com/web_banners/web_banner_example/300x250_web_banner_example.htm
http://www.decentbanners.com/portfolio_300x250.html
http://www.banner4five.com/business_banners_300x250
