introducere
la un moment dat în cariera lor, aproape fiecare designer va trebui să proiecteze un set de anunțuri banner. Inspirat de cineva care mi-a spus că au făcut primul lor vreodată banner-ul M-am gândit că ar fi bine să examineze acest design sub-gen, deoarece am proiectat mii de anunțuri banner și arta regizat mii mai mult de-a lungul anilor.
în această postare Nu voi intra în probleme precum tipurile de pagini pe care apar anunțurile sau ratele de clic, deoarece designerii nu le pot schimba. Mă voi uita exclusiv la ambarcațiunile de proiectare a bannerelor pentru a le face să pară mai atrăgătoare (și, sperăm, mai ușor de făcut clic).
anunțurile Banner ar trebui să indice pagina la care se conectează
peisajul anunțului BANNER
cele mai frecvente trei anunțuri banner online sunt MPU (mesagerie plus unități), clasament și zgârie-nori, ceea ce mă refer la Sfânta Treime a anunțurilor banner. Ele apar peste tot pe web ca formele se potrivesc pe lățimea paginii web (clasamente) sau într-o coloană individuală (MPU-uri și zgârie-nori). Clasamentele sunt plasate fie cu un MPU, fie cu un zgârie-nori, dar toate cele trei nu apar niciodată împreună.
anunțurile Banner vor face de obicei parte dintr-o campanie existentă, astfel încât ingredientele lor pot fi furnizate de client, adică logo-uri, imagini, direcție de copiere. Cheia este combinarea acestor ingrediente într-un mod care este interesant pentru utilizatorul site-ului web în cele 2 secunde sau astfel încât să cheltuiască scanarea anunțului (cu atât mai puțin dacă scanează anunțul periferic). Este crucial să le atrageți atenția cu o imagine/mesaj convingător și să faceți evident ce ați dori să facă în continuare. Dacă vă aruncați ochii și nu există un punct focal evident în anunț, este puțin probabil să funcționeze.
simt cu tărie că bannerele ar trebui să indice clar la ce face clic utilizatorul web. În acest fel, utilizatorul ajunge la o pagină care arată ca anunțul care le-a trimis acolo. În cazul în care nu le-ar fi dezamăgit în mod natural sau pune în afara în cazul în care nu arata nimic ca ceea ce se așteptau.
ca rezultat, de obicei mă uit mai întâi la pagina de destinație atunci când proiectez anunțuri banner și lucrez înapoi de acolo. Următorul este un caz de elaborare a ierarhiei corecte a diferitelor ingrediente ale anunțului (de exemplu, logo-ul mai întâi, dar mic, titlul următor, dar dominant etc.). După aceea adăugați un call-to-action adecvat (CTA) care se leagă în copie și precizează acțiunea/răspunsul dorit. Odată ce ierarhiile mesageriei sunt sortate, acestea pot fi aplicate individual celor trei dimensiuni de anunțuri banner.
elementele concurează între ele în majoritatea MPU-urilor datorită formei pătrate
MPU-uri (300×250)
MPU (Messaging plus Unit) este de obicei plasat în coloana dreaptă mai îngustă a paginii și, ca rezultat, are un format aproximativ pătrat și o dimensiune mai mică, astfel încât să apară deasupra pliului. Formatul pătrat prezintă o problemă compozițională, deoarece ochiului uman îi plac imaginile puțin mai orizontale (format peisaj) sau mai profunde (format portret).
simt că amestecul de logo, imagine, titlu și CTA în MPU-uri adesea nu lasă prea mult loc pentru ca unul dintre cei patru să formeze un accent al anunțului. Acest lucru se vede cu ușurință în MPU-urile HP și X-Factor de mai sus, unde toate elementele se luptă între ele pentru atenția utilizatorului web. În ambele cazuri, fundalul este folosit doar ca o tabletă pe care să plasați elemente.
în contrast, CSI MPU de mai sus a folosit imaginea de fundal pentru a aduce elementele împreună, făcându-le să iasă din umbre. Pistolul încercuit, cardul galben de dovezi și mâinile de pe picioare ies, de asemenea, din umbre pentru a da un ton și a oferi alte informații vizuale pentru ochi dacă copia nu este citită.
titlurile sunt elementul cheie focal în clasamente
clasamente (728×90)
forma orizontală lungă a clasamentului poate duce la modele care utilizează elementele sale ca o serie de bucăți egale ca în exemplul HP de mai sus. Cu toate acestea, am constatat că clasamentele au un impact mai mare dacă titlul este mult mai mare decât în celelalte două unități de anunțuri banner. Acest lucru este demonstrat în mod clar în anunțul X-Factor de mai sus în cazul în care, chiar dacă scanați anunțul rapid takeaway cheie este „Ai luat-o?”
deoarece clasamentele sunt de obicei plasate chiar în partea de sus a paginii, accentul pe titluri se pretează psihologiei preexistente a modului în care procesăm paginile web-o memorie reziduală din citirea ziarelor și revistelor.
pe măsură ce rezoluțiile afișajului cresc în dimensiune, la fel sunt și lățimile paginii web, ceea ce face ca 728×90-urile anterioare să fie din ce în ce mai redundante (concepute inițial pentru o rezoluție de 1024 de 768 de metri pătrați). Ca urmare a acestei CBS Interactive este în mișcare pentru a înlocui toate 728x90s pe rețeaua sa de site-uri cu 970x66s (numit un super-lider). Aceste anunțuri noi sunt mai puțin intruzive pentru utilizatorul unui site și se potrivesc mai bine cu diferitele pagini care sunt acum 970px. Lungimea adăugată și adâncimea mai mică a unui superleader se pretează și mai mult la o iterație condusă de titlu a unei campanii.
pliul taie zgârie-nori în jumătate până când utilizatorul derulează în jos
zgârie-nori lung și subțire are titluri mici și imagini mari
zgârie-nori (160×600)
în timp ce MPU – urile și clasamentele sunt de obicei plasate pe o pagină deasupra pliului, zgârie-nori este tăiat în jumătate de pliul paginii (de obicei aproximativ 600 px în jos-vezi diagrama de mai sus). Ca urmare, informațiile cheie, cum ar fi logo-ul, titlul și CTA, ar trebui să fie în jumătatea superioară. Îngustimea zgârie-nori înseamnă, de asemenea, titlurile lor tind să fie mici.
din experiența mea am constatat că zgârie-nori tind să fie plasate pe pagini care sunt grele pe informații și lumină pe imagini. Acest lucru este ideal pentru zgârie-nori, deoarece au mult mai mult spațiu pentru imagary decât MPU-uri și clasamente.
în cele trei 160 600 de exemple de mai sus de zgârie-nori a fost proiectat cu luarea în considerare în creștere pentru ori de la stânga la dreapta. În zgârie-nori HP toate elementele de mai sus au primit o proeminență egală și, ca urmare, nu există focalizare pentru ochi. Anunțul X-Factor are prezentatorii mai mari decât în alte iterații ale campaniei, dar titlul mic a devenit copleșit de toate celelalte elemente–informațiile cheie sunt toate sub fold și fac ca partea de jos a anunțului să fie grea. În zgârie-nori CSI imaginea mai mare reunește elementele, în timp ce al doilea logo a provocat o mică supraaglomerare în partea de sus.
comparați această versiune 728 90 a anunțului cu 300 250 de mai jos (vedeți anunțul animat aici)
animația ajută la împărțirea elementelor în timp
animație
este de la sine înțeles că adăugarea animației la un anunț banner va atrage atenția asupra acestuia. O versiune Flash a unui banner ajută, de asemenea, la descompunerea acestor elemente în timp. În Ally 728 90 de mai sus, arătând creionul complet, este mai puțin convingător decât versiunea 300 250 de la 350, în care ochiul așteaptă să vadă ce se întâmplă în continuare.
în ultima vreme văd mult mai multe butoane de redare pe anunțurile animate–fără îndoială, deoarece anunțul a început deja să se joace pe măsură ce pagina începe să se încarce. Versiunile statice ale anunțurilor au devenit din nou mai relevante pe măsură ce sunt încărcate ca Jpeg implicit în medii în care Flash nu se redă, cum ar fi tablete și smartphone-uri.
animația singură nu este suficientă pentru a face un anunț bun. Există încă trebuie să fie ceva convingătoare în anunț altfel se virează spre a fi ca toate aceste ieftine atenție hapsân scor de credit, dieta și remortgage anunțuri. Am transformat inițial cele două anunțuri Ally de mai sus în GIF-uri animate pentru această postare, dar ochiul meu le-a ecranat automat, deoarece eu (și probabil majoritatea oamenilor de pe web) sunt atât de obișnuit să ignor anunțurile animate stivuite una peste alta.
BANNER AD DESIGN sfaturi
de când am făcut atât de multe anunțuri banner aici sunt câteva sfaturi pe care le-am luat de-a lungul anilor. Îmi cer scuze dacă par evidente, le spun pentru că le văd în mod constant nu se aplică:
Copy
• evitați toate copiile majuscule, deoarece acest lucru îngreunează citirea utilizatorului
• titlurile și copiile corporale ar trebui să aibă dimensiuni diferite pentru a facilita scanarea cititorului
• titlurile și/sau copiile corporale ar trebui să fie pe cel mult trei linii
• păstrați ierarhiile mesajelor și tot textul ar trebui să fie aliniate în mod constant (stânga, dreapta, centru)
• luați în considerare utilizarea tipografiei interesante ca imagini pentru un element mai puțin
Call-To-Action (CTA)
• ar trebui să fie scurt și la punctul de genul „Du-te acum” sau „verificați-l Out”
• ar trebui să fie deasupra pliului pentru 160 600 și 300 600 de unități (aproximativ mijlocul unității)
• ar trebui să fie litere majuscule la începutul fiecărui cuvânt pentru a facilita scanarea butoanelor
• ar trebui să fie în culori contrastante, fără a arăta prost
• ar trebui să fie poziționat spre sfârșitul copiei și/sau partea din dreapta jos
• ar trebui să fie coerente dimensiune de-a lungul unui set de anunțuri banner
• se pare că obțineți mai multe clicuri decât link-uri numai text în anunțurile banner (chiar dacă acestea din urmă arată mai elegant)
diverse
• adăugați un chenar gri de 1px pe anunțuri cu un fundal alb – poate fi plasat pe o pagină albă
• pentru aprobarea din prima rundă, uneori transform cadrele Photoshop individuale într-un GIF animat
• înainte de depunerea finală, stau în spate și mă uit la anunț pentru a verifica dacă poate fi scanat cu ușurință
o piele de pagină reunește anunțurile banner prin împachetarea sau încadrarea paginii
concluzie
deoarece utilizatorii web sunt atât de obișnuiți să vadă anunțurile banner (și anunțurile în general), există o mulțime de schimbări înainte. Deși Sfânta Treime a MPU, leaderboard și zgârie-nori domina peisajul banner-ul am văzut alte dimensiuni sunt din ce în ce mai frecvente, cum ar fi 640 480 interstițiale (ca video devine mai predominantă) și 300 600 ‘jumătate de pagină’ anunțuri care au un MPU mai profund pentru a domina coloana din dreapta. Pentru o listă completă a unităților mai noi care ar putea popula Internetul în viitor, consultați pagina IAB pe această temă făcând clic aici.
pentru o experiență de branding mai cuprinzătoare și mai armonioasă, skin-urile de pagină (sau ‘imagini de fundal’) sunt utilizate mult mai mult pe internet (în special pe IMDB) pe măsură ce înfășoară anunțurile banner împreună. Facem aproximativ 900 de skin-uri pe an la CBS Interactive (descărcați acest pdf pentru a citi mai multe). Pe măsură ce skin-urile devin și mai numeroase, există și o creștere a preluărilor media bogate personalizate, care sunt solicitate în special în RFP-uri (pentru a citi mai multe despre acest lucru, consultați postarea mea aici). Cu toate acestea, atât pentru skin-uri, cât și pentru preluări media bogate, există încă nevoia mereu prezentă ca experiența anunțului să funcționeze împreună cu anunțurile banner standard de pe pagină și experiența utilizatorului despre acestea.
apendice
Istoricul anunțurilor Banner: http://en.wikipedia.org/wiki/Web_banner
standardele Interactive Advertising Bureau (IAB) :
http://www.iab.net/guidelines/508676/508767/displayguidelines
Fold: http://en.wikipedia.org/wiki/Above_the_fold
căutați bannere anunțuri pentru anumite mărci: http://www.moat.com
rezoluția afișajului ecranului: http://en.wikipedia.org/wiki/Display_resolution
crearea anunțurilor DIY: http://www.building43.com/videos/2011/07/19/flite-cloud-based-advertising
anunțuri Banner de la Adobe: http://tv.adobe.com/watch/cs5-design-premium-feature-tour/interaction-design-101-create-a-simple-banner-ad-with-flash-professional-cs5/
unele pagini de anunțuri banner crowdsourced:
http://jobs.designcrowd.com/bannerad-design-jobs
http://99designs.com/banner-ad-design/contests
http://www.crowdspring.com/banner-ads/
unele site-uri ieftine (și supraaglomerate) de design de bannere web:
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
