introduktion
på et tidspunkt i deres karriere bliver næsten enhver designer nødt til at designe et sæt bannerannoncer. Inspireret af nogen, der fortalte mig, at de havde lavet deres første bannerannonce nogensinde, troede jeg, det ville være godt at undersøge denne designundergenre, da jeg har designet tusinder af bannerannoncer og kunst instrueret tusinder mere gennem årene.
i dette indlæg vil jeg ikke gå ind på problemerne som hvilke typer sider annoncerne vises på eller klik-gennem satser, da designere ikke kan ændre disse. Jeg vil udelukkende se på håndværket med at designe bannere for at få dem til at se mere tiltalende ud (og forhåbentlig mere klikbare).
bannerannoncer skal signpost den side, de forbinder til
BANNERANNONCELANDSKABET
de tre mest almindelige online bannerannoncer er MPU (Messaging Plus Units), leaderboardet og skyskraberen, hvad jeg omtaler som den hellige treenighed af bannerannoncer. De vises over hele internettet som figurerne passer på tværs af bredden af hjemmesiden (leaderboards) eller inden for en individuel kolonne (Mpu ‘ er og skyskrabere). Leaderboards er placeret med enten en MPU eller en skyskraber, men alle tre vises aldrig sammen.
bannerannoncer vil normalt være en del af en eksisterende kampagne, så deres ingredienser kan leveres af klienten, dvs.logo(er), billeder, kopiretning. Nøglen er at kombinere disse ingredienser på en måde, der er interessant for hjemmesidens bruger i 2 sekunder eller så de bruger scanning annoncen (endnu mindre, hvis de scanner annoncen perifert). Det er afgørende at fange deres opmærksomhed med et overbevisende billede/besked og gøre det indlysende, hvad du gerne vil have dem til at gøre næste gang. Hvis du skæver dine øjne, og der ikke er noget åbenlyst fokuspunkt i annoncen, er det usandsynligt, at det fungerer.
jeg føler stærkt, at bannere klart skal vejlede, hvad internetbrugeren klikker på. På denne måde ankommer brugeren til en side, der ligner den annonce, der sendte dem der. Hvis det ikke gjorde det, ville de naturligvis blive skuffede eller afskrækket, hvis det ikke lignede det, de forventede.
som et resultat ser jeg normalt først på destinationssiden, når jeg designer bannerannoncer og arbejder baglæns derfra. Dernæst er det et tilfælde af at udarbejde det rigtige hierarki af annoncens forskellige ingredienser (f.eks.). Derefter tilføjes en passende opfordring til handling (CTA), der binder ind i kopien og præciserer den ønskede handling/respons. Når hierarkierne i meddelelserne er sorteret, kan de anvendes individuelt på de tre bannerannoncestørrelser.
elementer konkurrerer med hinanden i de fleste Mpu ‘er på grund af den firkantede form
Mpu’ er (300×250)
MPU ‘ en (Messaging Plus Unit) placeres normalt i den snævrere højre kolonne på siden, og som et resultat er den omtrent firkantet i format og mindre i størrelse for at vises over folden. Det firkantede format præsenterer et kompositionsproblem, da det menneskelige øje kan lide billeder, der er lidt mere vandrette (liggende format) eller dybere (portrætformat).
jeg føler, at blandingen af logo, billede, overskrift og CTA i Mpu ‘ er ofte ikke giver meget plads til en af de fire til at danne fokus for annoncen. Dette ses let i HP-og KT-faktor-Mpu ‘ erne ovenfor, hvor alle elementerne kæmper mod hinanden for internetbrugerens opmærksomhed. I begge tilfælde bruges baggrunden kun som en tablet til placering af elementer.
derimod har CSI MPU ovenfor brugt baggrundsbilledet til at bringe elementerne sammen ved at få dem til at komme ud af skyggerne. Den cirklede pistol, det gule beviskort og hænderne på fødderne kommer også ud af skyggerne for at sætte en tone og give anden visuel information til øjet, hvis kopien ikke læses.
overskrifter er det centrale fokalelement i leaderboards
LEADERBOARDS (728×90)
den lange vandrette form på leaderboardet kan føre til design, der bruger dets elementer som en række lige store bidder som i HP-eksemplet ovenfor. Men jeg har fundet ud af, at leaderboards har større indflydelse, hvis overskriften er meget større end i de to andre bannerannonceenheder. Dette demonstreres tydeligt i Røntgenfaktorannoncen ovenfor, hvor selvom du hurtigt scanner annoncen, er nøglen til afhentning ” har du det?”
da leaderboards normalt er placeret øverst på siden, giver et fokus på overskrifter sig til den allerede eksisterende psykologi om, hvordan vi behandler hjemmesider-en resthukommelse fra læsning af aviser og magasiner.
i takt med at skærmopløsninger stiger i størrelse, er sidebredder også med til at gøre de tidligere 728h90 ‘ ere mere og mere overflødige (oprindeligt designet til en 1024-768-opløsning). Som et resultat af dette CBS Interactive flytter til at erstatte alle 728h90s på det netværk af sites med 970h66s (kaldet en super leder). Disse nye annoncer er mindre påtrængende for en sides bruger og passer mere tæt sammen med de forskellige sider, som alle nu er 970 gange brede. Den ekstra længde og lavere dybde af en superleder egner sig endnu mere til en overskriftsdrevet iteration af en kampagne.
folden skærer skyskrabere i halve, indtil brugeren ruller ned
den lange og slanke skyskraber har små overskrifter og store billeder
skyskrabere (160×600)
mens Mpu ‘ er og leaderboards normalt placeres på en side over folden, skæres skyskraberen i halvdelen af sidens fold (normalt omkring 600 gange ned – se diagrammet ovenfor). Som et resultat skal nøgleoplysninger som logoet, overskriften og CTA være i den øverste halvdel. Skyskraberens snæverhed betyder også, at deres overskrifter har tendens til at være små.
efter min erfaring har jeg fundet ud af, at skyskrabere har tendens til at blive placeret på sider, der er tunge på information og lys på billeder. Dette er ideelt til skyskrabere, da de har meget mere plads til imagary end Mpu ‘ er og leaderboards.
i de tre 160 liter 600 eksempler ovenfor er skyskrabere designet med stigende hensyntagen til folden fra venstre mod højre. I HP-skyskraberen har alle ovenstående elementer fået lige fremtrædende plads, og som et resultat er der ikke noget fokus for øjet. Annoncen har præsentanterne større end i andre gentagelser af kampagnen, men den lille overskrift er blevet overvældet af alle de andre elementer–nøgleoplysningerne er alle under folden og gør annoncebunden tung. I CSI-skyskraberen bringer det større billede elementerne sammen, mens det andet logo har forårsaget lidt overbelægning øverst.
sammenlign denne 728-version af annoncen med 300-versionen af annoncen 250 nedenfor (se den animerede annonce her)
Animation hjælper med at opdele elementerne over tid
ANIMATION
det siger sig selv, at tilføjelse af animation til en bannerannonce vil trække øjet til det. En Flash version af et banner hjælper også bryde op disse elementer over tid. I Ally 728 er den fulde blyant, der viser den fulde blyant, mindre overbevisende end den 300 250-version, hvor øjet venter på at se, hvad der sker næste gang.
på det seneste ser jeg meget flere replay–knapper på animerede annoncer-uden tvivl fordi annoncen allerede er begyndt at spille, da siden begynder at blive indlæst. Statiske versioner af annoncer er blevet mere relevante igen, da de indlæses som en standard Jpeg i miljøer, hvor Flash ikke afspilles, såsom tablets og smartphones.
Animation alene er ikke nok til at gøre en annonce god. Der skal stadig være noget overbevisende i annoncen, ellers vender det sig mod at være som alle de billige opmærksomhedsfangende kredit score, kost og omprioritere annoncer. Jeg havde oprindeligt forvandlet de to Ally-annoncer ovenfor til animerede GIF ‘ er til dette indlæg, men mit øje screenede dem automatisk, da jeg (og sandsynligvis de fleste mennesker på nettet) er så vant til at ignorere animerede annoncer stablet oven på hinanden.
BANNER annonce DESIGN TIPS
da jeg har gjort så mange bannerannoncer her er nogle tips, som jeg har samlet op gennem årene. Undskyld, hvis de synes indlysende, jeg siger dem, fordi jeg ser dem konstant Ikke anvendt:
Kopier
• undgå alle store bogstaver, da dette gør det svært for brugeren at læse
• overskrifter og kropskopi skal have forskellige størrelser for at gøre det lettere for læseren at scanne
• overskrifter og/eller kropskopi bør ikke være på mere end tre linjer
• Bevar hierarkier af meddelelser, og al tekst skal være konsekvent justeret (venstre, højre, center)
• overvej at bruge interessant typografi som billedsprog for at spare plads ved at et mindre element
opfordring til handling (CTA)
• skal være kort og til det punkt som “gå nu” eller “tjek det Ud”
• skal være over folden for 160 liter 600 og 300 liter 600 enheder (omtrent midt på enheden)
• skal være store bogstaver i starten af hvert ord for at gøre det lettere at scanne
knapper
• skal være i kontrastfarver uden at se prangende
• skal placeres mod slutningen af kopien og/eller nederste højre Side
• skal være konsistent i størrelse gennem et sæt bannerannoncer
• tilsyneladende få flere klik end kun tekstlinks i bannerannoncer (selvom sidstnævnte ser mere elegant ud)
misc
• Tilføj en grå kant på annoncer på 1 stk hvid baggrund – det kan placeres på en hvid Side
* til godkendelse i første runde forvandler jeg nogle gange de enkelte Photoshop-rammer til en animeret GIF
• før den endelige indsendelse står jeg tilbage og skviser på annoncen for at kontrollere, om den let kan scannes
* som med alt design sparer du tid ved altid at skitsere annoncens rammer
en sidehud samler bannerannoncerne ved at indpakke eller indramme siden
konklusion
da internetbrugere er så vant til at se bannerannoncer (og annoncer generelt), er der mange ændringer forude. Selvom den hellige treenighed af MPU, leaderboard og skyskraber dominerer bannerannoncelandskabet, har jeg set, at andre størrelser bliver mere almindelige, såsom 640 liter 480 Interstitials (som video bliver mere dominerende) og 300 liter 600 ‘halv side’ annoncer, der har en dybere MPU til at dominere højre kolonne. For en komplet liste over nyere enheder, der sandsynligvis vil udfylde internettet i fremtiden, tjek IABs side om emnet ved at klikke her.
for en mere omfattende og harmonisk branding oplevelse side skind (eller ‘baggrunde’) bliver brugt meget mere på tværs af internettet (især på IMDB) som de ombryde bannerreklamer sammen. Vi laver omkring 900 skins om året på CBS Interactive (Hent denne pdf for at læse mere). Da skins også bliver mere talrige, er der også en stigning i specialfremstillede rich media-overtagelser, som især bliver bedt om i RFPs (for at læse mere om dette se mit indlæg her). Men for både skins og rich media-overtagelser er der stadig det altid tilstedeværende behov for, at annonceoplevelsen fungerer sammen med standardbannerannoncerne på siden og brugerens oplevelse af dem.
appendiks
historien om bannerannoncer: http://en.wikipedia.org/wiki/Web_banner
Interactive Advertising Bureau (IAB) standarder:
http://www.iab.net/guidelines/508676/508767/displayguidelines
folden: http://en.wikipedia.org/wiki/Above_the_fold
slå bannerannoncer op for specifikke mærker: http://www.moat.com
Skærmvisningsopløsning: http://en.wikipedia.org/wiki/Display_resolution
oprettelse af DIY-annoncer: http://www.building43.com/videos/2011/07/19/flite-cloud-based-advertising
bannerannoncer fra Adobe: http://tv.adobe.com/watch/cs5-design-premium-feature-tour/interaction-design-101-create-a-simple-banner-ad-with-flash-professional-cs5/
nogle overfyldte bannerannoncesider:
http://jobs.designcrowd.com/bannerad-design-jobs
http://99designs.com/banner-ad-design/contests
http://www.crowdspring.com/banner-ads/
nogle billige (og overfyldte) banner design sites:
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
