introduktion
vid någon tidpunkt i sin karriär måste nästan alla designer designa en uppsättning bannerannonser. Inspirerad av någon som berättade för mig att de hade gjort sin första bannerannons någonsin trodde jag att det skulle vara bra att undersöka denna designundergenre eftersom jag har designat tusentals bannerannonser och konst riktade tusentals mer genom åren.
i det här inlägget kommer jag inte att gå in på frågor som vilka typer av sidor annonserna visas på eller klicka-thru priser som designers inte kan ändra dessa. Jag kommer uteslutande att titta på hantverket att designa banners för att få dem att se mer tilltalande (och förhoppningsvis mer klickbara).
bannerannonser ska skylta sidan de ansluter till
BANNERANNONSLANDSKAPET
de tre vanligaste online bannerannonserna är MPU (Messaging Plus Units), leaderboard och skyskrapan, vad jag kallar den heliga treenigheten av bannerannonser. De visas över hela webben eftersom formerna passar över bredden på webbsidan (leaderboards) eller inom en enskild kolumn (mpus och skyskrapor). Leaderboards placeras med antingen en MPU eller en skyskrapa men alla tre visas aldrig tillsammans.
bannerannonser kommer vanligtvis att vara en del av en befintlig kampanj så att deras ingredienser kan tillhandahållas av kunden, dvs logotyp(er), bilder, kopieringsriktning. Nyckeln är att kombinera dessa ingredienser på ett sätt som är intressant för webbplatsens användare i 2 sekunder eller så att de spenderar skanna annonsen (ännu mindre om de skannar annonsen perifert). Det är viktigt att fånga deras uppmärksamhet med en övertygande bild/meddelande och göra det uppenbart vad du vill att de ska göra nästa. Om du Kisar dina ögon och det inte finns någon uppenbar kontaktpunkt i annonsen är det osannolikt att det fungerar.
jag känner starkt att banners tydligt ska skylta vad webbanvändaren klickar på. På så sätt kommer användaren till en sida som ser ut som annonsen som skickade dem dit. Om det inte gjorde det skulle de naturligtvis bli besvikna eller skjuta upp om det inte såg ut som vad de förväntade sig.
som ett resultat tittar jag vanligtvis på målsidan först när jag utformar bannerannonser och arbetar bakåt därifrån. Därefter handlar det om att utarbeta rätt hierarki för annonsens olika ingredienser (t.ex. logotyp först men liten, rubrik nästa men dominerande etc.). Därefter lägger du till en lämplig call-to-action (CTA) som binder in i kopian och stavar ut önskad åtgärd/svar. När hierarkierna för meddelanden sorteras de kan tillämpas på de tre bannerannonser storlekar individuellt.
element konkurrerar med varandra i de flesta MPUs på grund av den fyrkantiga formen
MPUs (300×250)
MPU (Messaging Plus Unit) placeras vanligtvis i den smalare högra kolumnen på sidan och som ett resultat är den ungefär kvadratisk i format och mindre i storlek för att visas ovanför vikningen. Det kvadratiska formatet presenterar ett kompositionsproblem eftersom det mänskliga ögat gillar bilder som är något mer horisontella (liggande format) eller djupare (porträttformat).
jag känner att blandningen av logotyp, bild, rubrik och CTA i MPUs ofta inte lämnar mycket utrymme för en av de fyra för att bilda ett fokus för annonsen. Detta syns lätt i HP och X-Factor MPUs ovan där alla element kämpar mot varandra för webbanvändarens uppmärksamhet. I båda fallen används bakgrunden bara som en tablett för att placera element.
däremot har CSI MPU ovan använt bakgrundsbilden för att sammanföra elementen genom att få dem att komma ut ur skuggorna. Den inringade pistolen, det gula beviskortet och händerna på fötterna kommer också ut ur skuggorna för att ställa in en ton och ge annan visuell information för ögat om kopian inte läses.
rubriker är det viktigaste fokuselementet i leaderboards
LEADERBOARDS (728×90)
den långa horisontella formen på topplistan kan leda till mönster som använder dess element som en serie lika stora bitar som i HP-exemplet ovan. Men jag har funnit att topplistorna har större inverkan om rubriken är mycket större än i de andra två bannerannonsenheterna. Detta visas tydligt i X-Factor-annonsen ovan där även om du skannar annonsen snabbt är nyckeln takeaway ” har du det?”
eftersom topplistor vanligtvis placeras högst upp på sidan låter fokus på rubriker sig till den befintliga psykologin för hur vi bearbetar webbsidor-ett kvarvarande minne från att läsa tidningar och tidskrifter.
när skärmupplösningar ökar i storlek så är även webbsidans bredder som gör de tidigare 728×90-erna alltmer överflödiga (ursprungligen utformade för en 1024 GHz 768-upplösning). Som ett resultat av detta flyttar CBS Interactive för att ersätta alla 728x90s på sitt nätverk av webbplatser med 970x66s (kallad super leader). Dessa nya annonser är mindre påträngande för en webbplats användare och passar mer snuggly med de olika sidorna som alla nu 970px bred. Den extra längden och grundare djupet hos en superledare lämpar sig ännu mer för en rubrikdriven iteration av en kampanj.
vecket skär skyskrapor i hälften tills användaren rullar ner
den långa och smala skyskrapan har små rubriker och stora bilder
skyskrapor (160×600)
medan Mpu: er och topplistor vanligtvis placeras på en sida ovanför vikningen skärs skyskrapan i hälften av sidans vikning (vanligtvis cirka 600 px ner – se diagram ovan). Som ett resultat bör viktig information som logotypen, rubriken och CTA vara i den övre halvan. Skyskrapans smalhet betyder också att deras rubriker tenderar att vara små.
enligt min erfarenhet har jag funnit att skyskrapor tenderar att placeras på sidor som är tunga på information och ljus på bilder. Detta är idealiskt för skyskrapor eftersom de har mycket mer utrymme för imagary än Mpu och leaderboards.
i de tre 160 600-exemplen ovan har skyskraporna utformats med ökande hänsyn till vikningen från vänster till höger. I HP-skyskrapan har alla ovanstående element fått lika framträdande och som ett resultat finns det inget fokus för ögat. X-Factor-annonsen har presentatörerna större än i andra iterationer av kampanjen, men den lilla rubriken har blivit överväldigad av alla andra element–nyckelinformationen ligger under veckan och gör annonsens botten tung. I CSI-skyskrapan sammanför den större bilden elementen medan den andra logotypen har orsakat lite överbeläggning högst upp.
jämför denna 728 90-version av annonsen med 300 250-versionen nedan (se den animerade annonsen här)
animering hjälper till att dela upp elementen över tiden
animering
det säger sig självt att lägga till animering i en bannerannons kommer att dra ögat till det. En Flash-version av en banner hjälper också till att bryta upp dessa element över tiden. I Ally 728 20 90 ovan visar hela penna är mindre övertygande än 300 250 250 version där ögat väntar på att se vad som händer härnäst.
på senare tid ser jag mycket mer återspelningsknappar på animerade annonser–utan tvekan eftersom annonsen redan har börjat spelas när sidan börjar laddas. Statiska versioner av annonser har blivit mer relevanta igen eftersom de laddas som standard Jpeg I miljöer där Flash inte spelas upp som surfplattor och smartphones.
animering ensam räcker inte för att göra en annons bra. Det måste fortfarande vara något övertygande i annonsen annars svänger mot att vara som alla dessa billiga uppmärksamhet greppa kredit värdering, kost och remortgage annonser. Jag hade ursprungligen förvandlat de två allierade annonserna ovan till animerade GIFs för det här inlägget men mitt öga visade dem automatiskt ut som jag (och förmodligen de flesta på webben) är så van vid att ignorera animerade annonser staplade ovanpå varandra.
BANNERANNONSDESIGNTIPS
eftersom jag har gjort så många bannerannonser här är några tips som jag har plockat upp genom åren. Ursäkter om de verkar uppenbara, jag anger dem eftersom jag ser dem ständigt inte tillämpas:
kopiera
• Undvik alla versaler kopia eftersom detta gör det svårt för användaren att läsa
• rubriker och body copy bör ha olika storlekar för att göra det lättare för läsaren att skanna
• rubriker och/eller body copy bör vara på högst tre rader
• bevara hierarkier av meddelanden och all text bör konsekvent justeras (vänster, höger, center)
• överväga att använda intressant typografi som bildspråk för att spara ett mindre element
Call-to-Action (CTA)
• ska vara kort och till den punkt som ”go now” eller ”check it Out”
• bör vara över vecket för 160 600 och 300 600 enheter (ungefär mitten av enheten)
• bör vara versaler i början av varje ord för att göra det lättare att skanna
knappar
• bör vara i kontrasterande färger utan att se granna
• bör placeras mot slutet av kopian och/eller nedre högra sidan
• bör vara konsekvent i storlek genom en uppsättning bannerannonser
• tydligen få fler klick än text endast länkar i bannerannonser (även om den senare ser mer elegant)
misc
• Lägg till en 1px grå kant på annonser med en vit bakgrund – det kan placeras på en vit sida
en sida hud ger bannerannonser tillsammans genom inslagning eller inramning sidan
slutsats
eftersom webbanvändare är så vana att se bannerannonser (och annonser i allmänhet) det finns en hel del förändringar framåt. Även om den heliga treenigheten av MPU, leaderboard och skyskrapa dominerar bannerannonslandskapet har jag sett att andra storlekar blir vanligare som 640 480 mellansidesannonser (eftersom video blir mer dominerande) och 300 600 ’halvsidiga’ annonser för 300 600 ’halvsida’ som har en djupare MPU för att dominera den högra kolumnen. För en fullständig lista över nyare enheter som sannolikt kommer att fylla på internet i framtiden, kolla in IABs sida om ämnet genom att klicka här.
för en mer omfattande och harmonisk varumärkesupplevelse används sidskinn (eller ’bakgrundsbilder’) mycket mer över internet (särskilt på IMDB) när de sätter ihop bannerannonserna. Vi gör cirka 900 skinn per år på CBS Interactive (ladda ner denna pdf för att läsa mer). Eftersom skinn också blir fler finns det också en ökning av skräddarsydda rich media-övertaganden som speciellt efterfrågas i RFP: er (för att läsa mer om detta, se mitt inlägg här). Men för både skinn och rich media takeovers finns det fortfarande det ständigt närvarande behovet av annonsupplevelsen att arbeta tillsammans med standard bannerannonser på sidan och användarens upplevelse av dem.
bilaga
historien om bannerannonser:http://en.wikipedia.org/wiki/Web_banner
Interactive Advertising Bureau (IAB) standarder:
http://www.iab.net/guidelines/508676/508767/displayguidelines
vikningen: http://en.wikipedia.org/wiki/Above_the_fold
slå upp bannerannonser för specifika märken: http://www.moat.com
Skärmskärmsupplösning: http://en.wikipedia.org/wiki/Display_resolution
DIY-annonsskapande: http://www.building43.com/videos/2011/07/19/flite-cloud-based-advertising
bannerannonser från Adobe: http://tv.adobe.com/watch/cs5-design-premium-feature-tour/interaction-design-101-create-a-simple-banner-ad-with-flash-professional-cs5/
några crowdsourced bannerannonssidor:
http://jobs.designcrowd.com/bannerad-design-jobs
http://99designs.com/banner-ad-design/contests
http://www.crowdspring.com/banner-ads/
några billiga (och överfulla) webb banner design webbplatser:
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
