INTRODUKSJON
på et tidspunkt i karrieren må nesten alle designere designe et sett med bannerannonser. Inspirert av noen som fortalte meg at de hadde gjort sin første bannerannonse, trodde jeg det ville være bra å undersøke denne designundergenren siden jeg har designet tusenvis av bannerannonser og kunst rettet tusenvis flere gjennom årene.
I dette innlegget vil jeg ikke gå inn på problemene som hvilke typer sider annonsene vises på eller klikk-gjennom-priser som designere ikke kan endre disse. Jeg vil utelukkende se på håndverket med å designe bannere for å få dem til å se mer tiltalende (og forhåpentligvis mer klikkbare).
Bannerannonser skal signere siden de kobler til
BANNERANNONSELANDSKAPET
de tre vanligste online bannerannonsene er Mpu (Messaging Plus Units), leaderboardet og skyskraperen, det jeg refererer til som den hellige treenighet av bannerannonser. De vises over hele nettet som figurene passer over bredden på nettsiden (leaderboards) eller i en enkelt kolonne (Mpuer og skyskrapere). Leaderboards er plassert med enten EN MPU eller en skyskraper, men alle tre vises aldri sammen.
Bannerannonser vil vanligvis være en del av en eksisterende kampanje, slik at ingrediensene kan leveres av klienten, dvs. logo( er), bilder, kopieringsretning. Nøkkelen er å kombinere disse ingrediensene på en måte som er interessant for nettstedets bruker i 2 sekunder eller så at de bruker skanning annonsen(enda mindre hvis de skanner annonsen perifert). Det er viktig å fange oppmerksomheten med et overbevisende bilde/melding og gjøre det klart hva du vil at de skal gjøre neste gang. Hvis du knuser øynene dine og det ikke er noe åpenbart fokuspunkt i annonsen, er det lite sannsynlig å fungere.
jeg føler sterkt at bannere skal tydelig skilt hva webbrukeren klikker på. På denne måten kommer brukeren til en side som ser ut som annonsen som sendte dem der. Hvis det ikke gjorde det, ville de naturligvis bli skuffet eller satt av hvis det ikke så ut som det de forventet.
som et resultat ser jeg vanligvis på destinasjonssiden først når jeg designer bannerannonser og jobber bakover derfra. Neste er det et tilfelle av å utarbeide riktig hierarki av annonsens ulike ingredienser (f.eks.). Deretter legger du til en passende call-to-action (CTA) som knytter seg til kopien og staver ut ønsket handling/respons. Når hierarkier av meldinger er sortert de kan brukes til de tre bannerannonser størrelser individuelt.
Elementer konkurrerer med hverandre i de fleste Mpuer på grunn av den firkantede formen
Mpuer (300×250)
Mpu (Messaging Plus Unit) er vanligvis plassert i den smalere høyre kolonnen på siden, og som et resultat er den omtrent firkantet i format og mindre i størrelse slik at den vises over brettet. Det kvadratiske formatet presenterer et komposisjonsproblem som det menneskelige øye liker bilder som er litt mer horisontale (landskapsformat) eller dypere (portrettformat).
jeg føler at blandingen av logo, bilde, overskrift og CTA i Mpuer ofte ikke gir mye plass til en av de fire for å danne et fokus for annonsen. Dette er lett å se I HP og X-Factor Mpuer over hvor alle elementene kjemper hverandre for webbrukerens oppmerksomhet. I begge tilfeller brukes bakgrunnen bare som en tablett for å plassere elementer.
DERIMOT HAR CSI MPU ovenfor brukt bakgrunnsbildet til å bringe elementene sammen ved å få dem til å komme ut av skyggene. Den sirklede pistolen, det gule beviskortet og hendene på føttene kommer også ut av skyggene for å sette en tone og gi annen visuell informasjon for øyet hvis kopien ikke leses.
Overskrifter er det sentrale fokuselementet i leaderboards
LEADERBOARDS (728×90)
den lange horisontale formen på ledertavlen kan føre til design som bruker elementene som en rekke like biter som I HP-eksemplet ovenfor. Men jeg har funnet ut at leaderboards har mer innvirkning hvis overskriften er mye større enn i de to andre bannerannonseenhetene. Dette er tydelig demonstrert I x-Factor annonsen ovenfor der selv om du skanner annonsen raskt nøkkelen takeaway er » Har du det?»
siden leaderboards vanligvis er plassert øverst på siden, gir fokus på overskrifter seg til den eksisterende psykologien om hvordan vi behandler nettsider – et gjenværende minne fra å lese aviser og magasiner.
som skjermoppløsninger øker i størrelse, så er også nettsidebredder som gjør de forrige 728x90s stadig overflødig (opprinnelig designet for en 1024 × 768 oppløsning). SOM et resultat av DETTE FLYTTER CBS Interactive til å erstatte alle 728x90s på sitt nettverk av nettsteder med 970x66s (kalt en super leder). Disse nye annonsene er mindre påtrengende for et nettsted bruker og passer mer snuggly med de ulike sidene som er alle nå 970px bred. Den ekstra lengden og grunnere dybden til en superleder gir seg enda mer til en overskriftsdrevet iterasjon av en kampanje.
folden kutter skyskrapere i halv til brukeren ruller ned
den lange og slanke skyskraperen har små overskrifter og store bilder
SKYSKRAPERE (160×600)
Mens Mpuer og leaderboards vanligvis plasseres på en side over brettet, blir skyskraperen halvert av sidens brett(vanligvis ca 600 px ned-se diagram over). Som et resultat bør nøkkelinformasjon som logo, overskrift og CTA være i topphalvdelen. Skyskraperens nærhet betyr også at overskriftene har en tendens til å være små.
i min erfaring har jeg funnet ut at skyskrapere pleier å bli plassert på sider som er tunge på informasjon og lys på bilder. Dette er ideelt for skyskrapere siden de har mye mer plass til imagary enn Mpuer og leaderboards.
i de tre 160×600 eksemplene ovenfor har skyskraperne blitt designet med økende hensyn til brettet fra venstre til høyre. I HP skyskraper alle elementene ovenfor har fått lik fremtredende og som et resultat er det ingen fokus for øyet. X-Factor-annonsen har presentatørene større enn i andre iterasjoner av kampanjen, men den lille overskriften har blitt overveldet av alle de andre elementene. I CSI skyskraper større bilde bringer elementene sammen mens den andre logoen har forårsaket litt overbefolkning på toppen.
Sammenlign denne 728×90-versjonen av annonsen med 300×250 nedenfor (se den animerte annonsen her)
Animasjon bidrar til å dele opp elementene over tid
ANIMASJON
det sier seg selv at å legge til animasjon til en bannerannonse vil trekke øyet til det. En Flash-versjon av et banner hjelper også bryte opp disse elementene over tid. I Ally 728×90 ovenfor viser full blyant er mindre overbevisende enn 300×250 versjon der øyet venter på å se hva som skjer videre.
I Det Siste ser jeg mange flere replay-knapper på animerte annonser-uten tvil fordi annonsen allerede er begynt å spille når siden begynner å lastes. Statiske versjoner av annonser har blitt mer relevante igjen da de blir lastet som Standard Jpeg i miljøer Der Flash ikke spiller som tabletter og smarttelefoner.
Animasjon alene er ikke nok til å gjøre en annonse god. Det har fortsatt å være noe overbevisende i annonsen ellers det svinger mot å være som alle de billig oppmerksomhet gripe kreditt score, kosthold og remortgage annonser. Jeg hadde opprinnelig slått De To Ally-annonsene over til animerte Gif-Filer for dette innlegget, men øyet mitt skjermet dem automatisk da jeg (og sannsynligvis de fleste på nettet) er så vant til å ignorere animerte annonser stablet oppå hverandre.
BANNER AD DESIGN TIPS
Siden Jeg har gjort så mange bannerannonser her er noen tips som jeg har plukket opp gjennom årene. Unnskyldninger hvis de virker åpenbare, sier jeg dem fordi jeg ser dem hele tiden ikke brukt:
Kopier
• Unngå alle store bokstaver, da dette gjør det vanskelig for brukeren å lese
• Overskrifter og kroppskopi bør ha forskjellige størrelser for å gjøre det lettere for leseren å skanne
• Overskrifter og/eller kroppskopi bør ikke være på mer enn tre linjer
• bevar hierarkier av meldinger og all tekst bør være konsekvent justert (venstre, høyre, senter)
• Vurder å bruke interessant typografi som bilder for å spare plass ved å ha ett mindre element
Call-To-Action (cta)
• bør være kort og til punktet som «gå nå» eller «sjekk det Ut »
• bør være over brettet for 160×600 og 300×600 enheter (omtrent midt på enheten)
• bør være store bokstaver ved starten av hvert ord for å gjøre det enklere å skanne
Knapper
• bør være i kontrastfarger uten å se glorete
• bør plasseres mot slutten av kopien og/eller nedre høyre side
• bør være konsekvent i få flere klikk enn kun tekstkoblinger i bannerannonser (selv om sistnevnte ser mer elegant ut)
diverse
• legg til en 1px grå ramme på annonser med en hvit bakgrunn – den kan plasseres på en hvit side
• for første runde godkjenning gjør jeg noen Ganger De enkelte Photoshop-rammene til en animert GIF
• før endelig innsending står jeg tilbake og knuser på annonsen for å sjekke om den enkelt kan skannes
en side hud bringer bannerannonser sammen ved å pakke eller innramming siden
KONKLUSJON
siden nettbrukere er så vant til å se bannerannonser (og annonser generelt) er det mange endringer fremover. Selv om den hellige treenighet AV MPU, leaderboard og skyskraper dominerer bannerannonselandskapet, har jeg sett at andre størrelser blir mer vanlige, for eksempel 640×480 Interstitialer (som video blir mer dominerende) og 300×600 ‘Halv Side’ annonser som har en dypere MPU for å dominere høyre kolonne. For en fullstendig liste over nyere enheter som sannsynligvis vil fylle internett i fremtiden, sjekk ut IABS side om emnet ved å klikke her.
for en mer omfattende og harmonisk merkevarebygging erfaring side skins (eller’ bakgrunnsbilder’) blir brukt mye mer over internett (spesielt PÅ IMDB) som de vikle bannerannonser sammen. Vi gjør ca 900 skins i året PÅ CBS Interactive (last ned denne pdf for å lese mer). Som skins også blitt mer tallrike det er også en økning i skreddersydde rik media oppkjøp som blir spesielt bedt om I RFPs (for å lese mer om dette se mitt innlegg her). Men for både skins og rik media oppkjøp er det fortsatt alltid tilstede behovet for annonseopplevelsen å jobbe sammen med standard bannerannonser på siden og brukerens opplevelse av dem.
TILLEGG
Historien Om Bannerannonser: http://en.wikipedia.org/wiki/Web_banner
Standarder For Interactive Advertising Bureau (Iab):
http://www.iab.net/guidelines/508676/508767/displayguidelines
Fold: http://en.wikipedia.org/wiki/Above_the_fold
Slå opp bannere annonser for bestemte merker:http://www.moat.com
Skjermoppløsning: http://en.wikipedia.org/wiki/Display_resolution
DIY annonse opprettelse: http://www.building43.com/videos/2011/07/19/flite-cloud-based-advertising
Bannerannonser Fra Adobe: http://tv.adobe.com/watch/cs5-design-premium-feature-tour/interaction-design-101-create-a-simple-banner-ad-with-flash-professional-cs5/
noen crowdsourced banner ad sider:
http://jobs.designcrowd.com/bannerad-design-jobs
http://99designs.com/banner-ad-design/contests
http://www.crowdspring.com/banner-ads/
Noen billige (og overfylte) webbanner design nettsteder:
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
