inleiding
op enig moment in hun carrière zal bijna elke ontwerper een reeks banneradvertenties moeten ontwerpen. Geïnspireerd door iemand die me vertelde dat ze hun allereerste banner advertentie had gedaan Ik dacht dat het goed zou zijn om dit ontwerp sub-genre te onderzoeken, omdat ik duizenden banner advertenties en kunst gericht duizenden meer door de jaren heen hebben ontworpen.
In dit bericht zal ik niet ingaan op de problemen zoals welke soorten pagina ‘ s de advertenties verschijnen of click-thru rates als ontwerpers kunnen deze niet veranderen. Ik zal uitsluitend kijken naar het ambacht van het ontwerpen van banners om ze er aantrekkelijker te maken (en hopelijk meer klikbaar).
banneradvertenties moeten de pagina die ze verbinden met
het BANNERADVERTENTIELANDSCHAP
de drie meest voorkomende Online banneradvertenties zijn de MPU( Messaging Plus Units), het leaderboard en de wolkenkrabber, wat ik de Heilige Drie-eenheid van banneradvertenties noem. Ze verschijnen overal op het web als de vormen passen over de breedte van de webpagina (leaderboards) of binnen een individuele kolom (MPU ‘ s en wolkenkrabbers). Leaderboards worden geplaatst met een MPU of een wolkenkrabber, maar alle drie nooit samen verschijnen.
banneradvertenties zullen gewoonlijk deel uitmaken van een bestaande campagne, zodat hun ingrediënten door de klant kunnen worden geleverd, d.w.z. logo(s), afbeeldingen, kopieerrichting. De sleutel is het combineren van deze ingrediënten op een manier die interessant is voor de gebruiker van de website in de 2 seconden of zo dat ze besteden aan het scannen van de advertentie (nog minder als ze het scannen van de advertentie periferaal). Het is cruciaal om hun aandacht te trekken met een meeslepend beeld/boodschap en maak het duidelijk wat je zou willen dat ze doen volgende. Als je je ogen knippert en er is geen duidelijk brandpunt in de advertentie dan is het onwaarschijnlijk dat het werkt.
ik ben ervan overtuigd dat banners duidelijk moeten aangeven waar de webgebruiker op klikt. Op deze manier komt de gebruiker bij een pagina die eruit ziet als de advertentie die hen daar stuurde. Als dat niet het geval was, zouden ze natuurlijk teleurgesteld of afgeschrikt worden als het er niet uitzag zoals ze verwachtten.
als gevolg hiervan kijk ik meestal eerst naar de doelpagina bij het ontwerpen van banneradvertenties en werk vanaf daar achteruit. Vervolgens is het een geval van het uitwerken van de juiste hiërarchie van de verschillende ingrediënten van de advertentie (bijvoorbeeld logo eerst maar klein, kop volgende maar dominant etc.). Daarna voeg een geschikte call-to-action (CTA) die banden met de kopie en spells uit de gewenste actie/reactie. Zodra de hiërarchieën van de messaging zijn gesorteerd kunnen ze worden toegepast op de drie banner advertenties maten afzonderlijk.
elementen concurreren met elkaar in de meeste MPU ’s vanwege de vierkante vorm
MPU’ S (300×250)
de MPU (Messaging Plus Unit) wordt meestal geplaatst in de smallere rechter kolom van de pagina en als gevolg daarvan is het ongeveer vierkant in formaat en kleiner in grootte om boven de vouw te verschijnen. Het vierkantige formaat vormt een compositorisch probleem omdat het menselijk oog houdt van beelden die iets meer horizontaal (liggend formaat) of dieper (staand formaat) zijn.
ik voel dat de mix van logo, afbeelding, kop en CTA in MPU ‘ s vaak niet veel ruimte laat voor een van de vier om een focus van de advertentie te vormen. Dit is gemakkelijk te zien in de HP en X-Factor MPU ‘ s hierboven waar alle elementen elkaar vechten voor de aandacht van de webgebruiker. In beide gevallen wordt de achtergrond alleen gebruikt als een tablet waarop elementen worden geplaatst.
daarentegen heeft de CSI MPU hierboven de achtergrondafbeelding gebruikt om de elementen samen te brengen door ze uit de schaduwen te laten komen. Het omcirkelde Pistool, de gele bewijsskaart en de handen op de voeten komen ook uit de schaduwen om een toon te zetten en andere visuele informatie voor het oog te verstrekken als de kopie niet wordt gelezen.
Headlines zijn het belangrijkste aandachtspunt in leaderboards
LEADERBOARDS (728×90)
de lange horizontale vorm van het leaderboard kan leiden tot ontwerpen die gebruik maken van zijn elementen als een reeks gelijke brokken zoals in het HP voorbeeld hierboven. Maar ik heb gevonden dat leaderboards hebben meer impact als de kop is veel groter dan in de andere twee banner advertentie-eenheden. Dit is duidelijk aangetoond in de X-Factor advertentie hierboven waar zelfs als u de advertentie snel scannen de belangrijkste afhaalmaaltijd is ” heb je het?”
aangezien leaderboards meestal bovenaan de pagina worden geplaatst, leent een focus op krantenkoppen zich voor de reeds bestaande psychologie van hoe we webpagina ‘ s verwerken-een restgeheugen van het lezen van kranten en tijdschriften.
naarmate beeldschermresoluties groter worden, worden ook webpaginabreedtes waardoor de vorige 728×90 ‘ s steeds redundanter worden (oorspronkelijk ontworpen voor een resolutie van 1024 × 768). Als gevolg van deze CBS Interactive is verhuizen naar alle 728x90s op het netwerk van sites te vervangen door 970x66s (genaamd een super leider). Deze nieuwe advertenties zijn minder opdringerig voor de gebruiker van een site en past meer snuggly met de verschillende pagina ‘ s die nu allemaal 970px breed. De toegevoegde lengte en ondiepere diepte van een superleader leent zich nog meer voor een headline gedreven iteratie van een campagne.
de vouw snijdt wolkenkrabbers in de helft totdat de gebruiker scrollt naar beneden
de lange en slanke wolkenkrabber heeft kleine koppen en grote afbeeldingen
wolkenkrabbers (160×600)
terwijl MPU ‘ s en leaderboards meestal op een pagina boven de vouw worden geplaatst, wordt de wolkenkrabber doormidden gesneden door de vouw van de pagina (meestal ongeveer 600 px naar beneden – zie diagram hierboven). Als gevolg daarvan zouden belangrijke informatie zoals het logo, de kop en het TCL in de bovenste helft moeten staan. De smalheid van de wolkenkrabber betekent ook dat hun krantenkoppen meestal klein zijn.In mijn ervaring heb ik geconstateerd dat wolkenkrabbers meestal worden geplaatst op pagina ‘ s die zwaar zijn op informatie en licht op afbeeldingen. Dit is ideaal voor wolkenkrabbers omdat ze veel meer ruimte voor imagary dan MPU ‘ s en leaderboards.
in de drie 160×600 voorbeelden boven de wolkenkrabbers is ontworpen met toenemende aandacht voor de vouw van links naar rechts. In de HP wolkenkrabber zijn alle bovenstaande elementen even prominent aanwezig en daardoor is er geen focus voor het oog. De X-Factor advertentie heeft de presentatoren groter dan in andere iteraties van de campagne, maar de kleine kop is overweldigd door alle andere elementen–de belangrijkste informatie is allemaal onder de vouw en maakt de advertentie bodem zwaar. In de CSI wolkenkrabber brengt de grotere afbeelding de elementen bij elkaar terwijl het tweede logo een beetje overbevolking heeft veroorzaakt aan de bovenkant.
vergelijk deze 728×90 versie van de advertentie met de 300×250 hieronder (zie de geanimeerde advertentie hier)
animatie helpt de elementen in de tijd op te delen
animatie
het spreekt vanzelf dat het toevoegen van animatie aan een banneradvertentie de aandacht trekt. Een Flash-versie van een banner helpt ook deze elementen na verloop van tijd te breken. In de Ally 728 × 90 hierboven is het tonen van het volledige potlood minder dwingend dan de 300×250 versie waar het oog wacht om te zien wat er vervolgens gebeurt.
de laatste tijd zie ik veel meer replay knoppen op geanimeerde advertenties–ongetwijfeld omdat de advertentie al wordt afgespeeld als de pagina begint te laden. Statische versies van advertenties zijn weer relevanter geworden als ze worden geladen als een standaard Jpeg in omgevingen waar Flash niet speelt, zoals tablets en smartphones.
animatie alleen is niet genoeg om een advertentie goed te maken. Er moet nog steeds iets dwingend in de advertentie anders draait het in de richting van het zijn als al die goedkope aandacht grijpen credit score, dieet en remortgage advertenties. Ik had oorspronkelijk draaide de twee bondgenoot advertenties hierboven in geanimeerde GIF ‘ s voor deze post, maar mijn oog automatisch gescreend ze uit als ik (en waarschijnlijk de meeste mensen op het web) ben zo gewend aan het negeren van geanimeerde advertenties gestapeld op de top van elkaar.
tips voor het ontwerpen van banneradvertenties
omdat ik zoveel banneradvertenties heb gedaan, zijn hier enkele tips die ik door de jaren heen heb opgepikt. Excuses als ze lijken voor de hand liggende, Ik zeg ze omdat ik zie ze voortdurend niet toegepast:
kopieer
• Vermijd alle hoofdletters omdat dit het moeilijk maakt voor de gebruiker om te lezen
• Headlines en body copy moeten verschillende groottes hebben om het voor de lezer gemakkelijker te maken om te scannen
• Headlines en/of body copy moeten op niet meer dan drie regels
• behoud hiërarchieën van berichten en alle tekst moet consistent uitgelijnd zijn (links, rechts, midden)
• overweeg interessante typografie als beeldmateriaal te gebruiken om ruimte te besparen door één element minder
call-to-action (CTA)
• moet kort zijn en tot het punt als “Go Now” of “check it Uit”
• Moet boven de vouw voor 160×600 en 300×600 eenheden (ongeveer het midden van de eenheid)
• Moet worden hoofdletters aan het begin van elk woord om het makkelijker te maken om te scannen
Knoppen
• Moet worden in contrasterende kleuren zonder te kijken opzichtige
• geplaatst Moet worden in de richting van het einde van het kopiëren en/of rechtsonder
• Moet consistent zijn in omvang gedurende een set van banner-advertenties
• Blijkbaar meer klikken dan alleen tekst links in de banner-advertenties (hoewel dat laatste kijken meer elegant)
Diversen
• Toevoegen 1px grijze rand om advertenties met een witte achtergrond – het kan worden geplaatst op een witte pagina
• Voor de eerste ronde goedkeuring ik soms draai de individuele Photoshop frames naar een animated GIF –
• Vóór de definitieve indiening ik een stapje terug en scheel op de advertentie om te controleren of het kan gemakkelijk worden gescand
• Zoals met alle ontwerp -, bespaar tijd door het schetsen van de advertentie frames altijd
Een pagina van de huid brengt de banner advertenties samen door het wikkelen of framing van de pagina
CONCLUSIE
Sinds web-gebruikers zijn zo gewend aan het zien van banner-advertenties en advertenties in het algemeen) er zijn een hoop veranderingen voor de boeg. Hoewel de Heilige Drie-eenheid van MPU, leaderboard en Wolkenkrabber domineren de banner ad landschap heb ik gezien andere maten worden steeds vaker, zoals 640×480 Interstitials (als video wordt meer overheersend) en de 300×600 ‘halve pagina’ advertenties die een diepere MPU om de rechter kolom domineren. Voor een volledige lijst van nieuwere eenheden die in de toekomst waarschijnlijk het internet zullen bevolken, kijk op de pagina van IAB over dit onderwerp door hier te klikken.
voor een meer uitgebreide en harmonieuze branding ervaring pagina skins (of ‘wallpapers’) worden veel meer gebruikt op het internet (vooral op IMDB) als ze wikkelen de banneradvertenties samen. We doen ongeveer 900 skins per jaar bij CBS Interactive (download deze pdf om meer te lezen). Aangezien skins ook talrijker worden, is er ook een stijging van op maat gemaakte rich media overnames die speciaal worden gevraagd in RFP ‘ s (om meer hierover te lezen, zie mijn bericht hier). Maar voor zowel skins en rich media overnames is er nog steeds de altijd aanwezige behoefte aan de advertentie-ervaring om te werken in combinatie met de standaard banner advertenties op de pagina en de ervaring van de gebruiker van hen.
bijlage
de geschiedenis van banneradvertenties: http://en.wikipedia.org/wiki/Web_banner
Interactive Advertising Bureau (IAB) standards:
http://www.iab.net/guidelines/508676/508767/displayguidelines
de vouw: http://en.wikipedia.org/wiki/Above_the_fold
banners opzoeken advertenties voor specifieke merken: http://www.moat.com
schermweergave resolutie: http://en.wikipedia.org/wiki/Display_resolution
DIY advertentie aanmaken: http://www.building43.com/videos/2011/07/19/flite-cloud-based-advertising
banneradvertenties uit Adobe: http://tv.adobe.com/watch/cs5-design-premium-feature-tour/interaction-design-101-create-a-simple-banner-ad-with-flash-professional-cs5/
enkele crowdsourced banner advertentiepagina ‘ s:
http://jobs.designcrowd.com/bannerad-design-jobs
http://99designs.com/banner-ad-design/contests
http://www.crowdspring.com/banner-ads/
enkele goedkope (en overbevolkte) web 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
