INTRODUZIONE
Ad un certo punto della loro carriera quasi ogni designer dovrà progettare una serie di banner pubblicitari. Ispirato da qualcuno che mi ha detto che avevano fatto il loro primo banner pubblicitario, ho pensato che sarebbe stato bello esaminare questo sottogenere di design dal momento che ho progettato migliaia di banner pubblicitari e l’arte ha diretto altre migliaia nel corso degli anni.
In questo post non entrerò nei problemi come i tipi di pagine su cui appaiono gli annunci o le tariffe click-thru in quanto i designer non possono modificarli. Sarò esclusivamente guardando il mestiere di progettare banner per farli sembrare più attraente (e si spera più cliccabile).
I banner pubblicitari dovrebbero indicare la pagina a cui si stanno collegando
IL BANNER PUBBLICITARIO LANDSCAPE
I tre banner pubblicitari online più comuni sono l’MPU (Messaging Plus Units), la classifica e il grattacielo, quello che chiamo la santissima trinità dei banner pubblicitari. Essi appaiono in tutto il web come le forme si adattano attraverso la larghezza della pagina web (classifiche) o all’interno di una singola colonna (MPUS e grattacieli). Classifiche sono collocati sia con un MPU o un grattacielo, ma tutti e tre non appaiono mai insieme.
I banner pubblicitari di solito fanno parte di una campagna esistente, quindi i loro ingredienti possono essere forniti dal cliente, ad esempio logo, immagini, direzione della copia. La chiave sta combinando quegli ingredienti in un modo che è interessante per l’utente del sito Web nei secondi 2 o così che spendono la scansione dell’annuncio (anche meno se stanno scansionando l’annuncio in periferia). È fondamentale attirare la loro attenzione con un’immagine/messaggio avvincente e rendere evidente cosa vorresti che facessero dopo. Se strizzi gli occhi e non c’è un punto focale ovvio nell’annuncio, è improbabile che funzioni.
Sento fortemente che i banner dovrebbero indicare chiaramente ciò a cui l’utente web sta facendo clic. In questo modo l’utente arriva a una pagina che assomiglia all’annuncio che li ha inviati lì. Se non lo facesse, sarebbero naturalmente delusi o rimandati se non assomigliasse a quello che si aspettavano.
Di conseguenza di solito guardo prima la pagina di destinazione durante la progettazione di banner pubblicitari e lavoro all’indietro da lì. Successivamente si tratta di elaborare la giusta gerarchia dei vari ingredienti dell’annuncio (ad esempio logo prima ma piccolo, titolo successivo ma dominante ecc.). Successivamente aggiungi un call-to-action (CTA) adatto che si lega alla copia e specifica l’azione/risposta desiderata. Una volta ordinate le gerarchie della messaggistica, possono essere applicate individualmente alle tre dimensioni dei banner pubblicitari.
Gli elementi competono tra loro nella maggior parte delle MPUS a causa della forma quadrata
MPUs (300×250)
L’MPU (Messaging Plus Unit) viene solitamente posizionata nella colonna destra più stretta della pagina e di conseguenza è approssimativamente quadrata in formato e di dimensioni più piccole in modo da apparire sopra la piega. Il formato squadrato presenta un problema compositivo in quanto l’occhio umano ama le immagini leggermente più orizzontali (formato orizzontale) o più profonde (formato verticale).
Sento che il mix di logo, immagine, titolo e CTA in MPUS spesso non lascia molto spazio per uno dei quattro per formare un focus dell’annuncio. Questo è facilmente visibile nelle MPUS HP e X-Factor sopra dove tutti gli elementi si combattono l’un l’altro per l’attenzione dell’utente web. In entrambi i casi lo sfondo è semplicemente usato come una tavoletta su cui posizionare gli elementi.
Al contrario il CSI MPU sopra ha usato l’immagine di sfondo per riunire gli elementi facendoli emergere dalle ombre. Anche la pistola cerchiata, la scheda di prova gialla e le mani sui piedi emergono dalle ombre per impostare un tono e fornire altre informazioni visive per l’occhio se la copia non viene letta.
I titoli sono l’elemento focale chiave nelle classifiche
CLASSIFICHE (728×90)
La lunga forma orizzontale della classifica può portare a disegni che utilizzano i suoi elementi come una serie di blocchi uguali come nell’esempio HP sopra. Tuttavia ho scoperto che le classifiche hanno un impatto maggiore se il titolo è molto più grande rispetto alle altre due unità di banner pubblicitari. Questo è chiaramente dimostrato nel X-Factor annuncio di cui sopra, dove anche se si esegue la scansione l “annuncio rapidamente la chiave da asporto è” Hai capito?”
Poiché le classifiche sono solitamente posizionate in cima alla pagina, un focus sui titoli si presta alla psicologia preesistente di come elaboriamo le pagine web-una memoria residua dalla lettura di giornali e riviste.
Man mano che le risoluzioni del display aumentano di dimensioni, anche le larghezze delle pagine Web rendono i precedenti 728×90 sempre più ridondanti (originariamente progettati per una risoluzione 1024 × 768). Come risultato di questo CBS Interactive si sta muovendo per sostituire tutti i 728x90s sulla sua rete di siti con 970x66s (chiamato un super leader). Questi nuovi annunci sono meno invadente per l’utente di un sito e si adatta più snuggly con le varie pagine che sono tutti ora 970px di larghezza. La lunghezza aggiunta e la profondità inferiore di un superleader si presta ancora di più a un’iterazione guidata dal titolo di una campagna.
La piega tagli grattacieli in mezzo fino a quando l’utente scorre verso il basso
Il lungo e snello grattacielo di piccoli titoli e immagini di grandi dimensioni
GRATTACIELI (160×600)
Mentre Mpu e le classifiche sono in genere collocati su una pagina al di sopra della piega, il grattacielo è tagliato a metà dalla pagina di volte (di solito circa 600 px down – vedi schema sopra). Di conseguenza, le informazioni chiave come il logo, il titolo e il CTA dovrebbero essere nella metà superiore. La ristrettezza del grattacielo significa anche che i loro titoli tendono ad essere piccoli.
Nella mia esperienza ho scoperto che i grattacieli tendono ad essere collocati su pagine che sono pesanti sulle informazioni e leggere sulle immagini. Questo è l’ideale per i grattacieli dal momento che hanno molto più spazio per imagary di MPUS e classifiche.
Nei tre esempi 160×600 sopra i grattacieli è stato progettato con crescente considerazione per la piega da sinistra a destra. Nel grattacielo HP tutti gli elementi di cui sopra hanno ricevuto uguale risalto e di conseguenza non c’è attenzione per l’occhio. L’annuncio di X-Factor ha i presentatori più grandi che in altre iterazioni della campagna, ma il piccolo titolo è diventato sopraffatto da tutti gli altri elementi: le informazioni chiave sono tutte al di sotto della piega e rendono l’annuncio pesante. Nel grattacielo CSI l’immagine più grande riunisce gli elementi mentre il secondo logo ha causato un po ‘ di sovraffollamento nella parte superiore.
Confronta questa versione 728×90 dell’annuncio con il 300×250 qui sotto(vedi l’annuncio animato qui)
L’animazione aiuta a dividere gli elementi nel tempo
ANIMAZIONE
Va da sé che l’aggiunta di animazione a un banner pubblicitario attirerà l’attenzione su di esso. Una versione Flash di un banner aiuta anche a rompere questi elementi nel tempo. Nell’alleato 728×90 sopra che mostra la matita piena è meno avvincente della versione 300×250 in cui l’occhio è in attesa di vedere cosa succede dopo.
Ultimamente vedo molti più pulsanti di replay sugli annunci animati, senza dubbio perché l’annuncio è già stato avviato quando la pagina inizia a caricarsi. Le versioni statiche degli annunci sono diventate di nuovo più rilevanti man mano che vengono caricate come Jpeg predefinito in ambienti in cui Flash non viene riprodotto come tablet e smartphone.
L’animazione da sola non è sufficiente per rendere un annuncio buono. Ci deve ancora essere qualcosa di convincente nell’annuncio altrimenti vira verso l’essere come tutti quelli a buon mercato attenzione afferrare punteggio di credito, dieta e remortgage annunci. Inizialmente avevo trasformato i due annunci di Ally sopra in GIF animate per questo post, ma il mio occhio li ha automaticamente proiettati mentre io (e probabilmente la maggior parte delle persone sul web) sono così abituato a ignorare gli annunci animati impilati l’uno sopra l’altro.
BANNER AD DESIGN TIPS
Da quando ho fatto così tanti banner pubblicitari ecco alcuni suggerimenti che ho raccolto nel corso degli anni. Mi scuso se sembrano ovvi, li sto affermando perché li vedo costantemente non applicati:
Copia
• Evitare il tutto maiuscolo copia come questo rende difficile per l’utente di leggere
• Titoli e il corpo del testo deve avere dimensioni diverse per rendere più facile per il lettore a scansione
• Titoli e/o il corpo del testo deve essere non più di tre righe
• preservare le gerarchie di messaggistica e di tutto il testo deve essere coerente allineamento (sinistra, destra, centro)
• Considerare l’utilizzo di interessante tipografia come immagini per risparmiare spazio avendo uno di meno l’elemento
Call-to-Action (CTA)
• Deve essere breve e al punto, come “Go Now” o “Check It Out”
• Deve essere al di sopra della piega per 160×600 e il 300×600 unità (circa il centro dell’unità)
• Deve essere in lettere maiuscole all’inizio di ogni parola per rendere più facile per eseguire la scansione
• Deve essere in colori a contrasto senza guardare sgargianti
• Deve essere posizionato verso la fine del copia e/o inferiore destra
• Deve essere coerente dimensioni in tutta una serie di banner pubblicitari
• Apparentemente ottenere più click rispetto al testo solo i link nel banner (anche se l’ultimo look più elegante)
Misc
• Aggiungere un 1px bordo grigio su annunci con sfondo bianco, può essere posizionato su una pagina bianca
• Per il primo turno di approvazione a volte mi trasformare i singoli Photoshop fotogrammi in una GIF animata
• Prima dell’invio definitivo io sto indietro e strabismo all’annuncio di verificare se può essere facilmente acquisita
• Come per tutti i design, risparmio di tempo di abbozzare il annuncio fotogrammi di sempre
Una pagina di pelle porta i banner pubblicitari insieme da un confezionamento o di inquadratura la pagina
CONCLUSIONE
Dal momento che gli utenti del web sono così abituati a vedere i banner pubblicitari (e annunci in generale) ci sono un sacco di modifiche in anticipo. Anche se la santissima trinità di MPU, leaderboard e skyscraper dominano il paesaggio banner pubblicitario che ho visto altre dimensioni stanno diventando sempre più comuni come 640×480 Interstitial (come il video diventa più predominante) e gli annunci 300×600 ‘Mezza pagina’ che hanno un MPU più profondo per dominare la colonna di destra. Per un elenco completo delle nuove unità che potrebbero popolare Internet in futuro, consulta la pagina di IAB sull’argomento cliccando qui.
Per un’esperienza di branding più completa e armoniosa, le skin della pagina (o “sfondi”) vengono utilizzate molto di più su Internet (specialmente su IMDB) mentre avvolgono i banner pubblicitari insieme. Facciamo circa 900 skin all’anno a CBS Interactive (scarica questo pdf per saperne di più). Poiché anche le skin diventano più numerose, c’è anche un aumento delle acquisizioni di rich media su misura che vengono richieste in particolare nelle RFP (per saperne di più vedi il mio post qui). Tuttavia, sia per le skin che per le acquisizioni di rich media, c’è ancora la necessità sempre presente che l’esperienza pubblicitaria funzioni in combinazione con gli annunci banner standard sulla pagina e l’esperienza dell’utente.
APPENDICE
La storia del Banner: http://en.wikipedia.org/wiki/Web_banner
Interactive Advertising Bureau (IAB) standard:
http://www.iab.net/guidelines/508676/508767/displayguidelines
La Piega: http://en.wikipedia.org/wiki/Above_the_fold
Cercare banner annunci per marche specifiche: http://www.moat.com
risoluzione dello Schermo: http://en.wikipedia.org/wiki/Display_resolution
fai da te per la creazione di annunci: http://www.building43.com/videos/2011/07/19/flite-cloud-based-advertising
Banner pubblicitari da Adobe: http://tv.adobe.com/watch/cs5-design-premium-feature-tour/interaction-design-101-create-a-simple-banner-ad-with-flash-professional-cs5/
Alcuni crowdsourcing banner pagine:
http://jobs.designcrowd.com/bannerad-design-jobs
http://99designs.com/banner-ad-design/contests
http://www.crowdspring.com/banner-ads/
Alcuni siti di banner web economici (e sovraffollati) :
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
