Úvod
v určitém okamžiku své kariéry bude muset téměř každý návrhář navrhnout sadu bannerových reklam. Inspirován někým, kdo mi řekl, že udělali svou vůbec první bannerovou reklamu, myslel jsem, že by bylo dobré prozkoumat tento podžánr designu, protože jsem v průběhu let navrhl tisíce bannerových reklam a umění režírované tisíce dalších.
v tomto příspěvku se nebudu zabývat otázkami, jako jsou typy stránek, na kterých se reklamy zobrazují, nebo sazby kliknutí, protože návrháři je nemohou změnit. Budu se výhradně dívat na řemeslo navrhování bannerů, aby vypadaly přitažlivěji (a doufejme, že více klikatelné).
bannerové reklamy by měly označovat stránku, ke které se připojují
Krajina bannerové reklamy
tři nejběžnější online bannerové reklamy jsou MPU (Messaging Plus Units), leaderboard a Mrakodrap, což označuji jako Nejsvětější Trojice bannerových reklam. Objevují se po celém webu, Jak se tvary vejdou přes šířku webové stránky (žebříčků) nebo v rámci jednotlivých sloupců (Mpu a mrakodrapy). Žebříčky jsou umístěny buď s MPU nebo mrakodrap, ale všechny tři se nikdy neobjeví společně.
bannerové reklamy budou obvykle součástí stávající kampaně, takže jejich složky mohou být poskytnuty klientem, tj. Klíčem je kombinace těchto složek způsobem, který je zajímavý pro uživatele webových stránek za 2 sekundy nebo tak, že stráví skenováním reklamy(ještě méně, pokud skenují reklamu periferně). Je velmi důležité upoutat jejich pozornost přesvědčivým obrázkem / zprávou a objasnit, co byste chtěli, aby dělali dál. Pokud přimhouříte oči a v reklamě není zjevné ohnisko, je nepravděpodobné, že by to fungovalo.
mám silný pocit, že bannery by měly jasně označovat, na co uživatel webu klikne. Tímto způsobem uživatel dorazí na stránku, která vypadá jako reklama, která je tam poslala. Pokud by tomu tak nebylo, přirozeně by byli zklamáni nebo odloženi, kdyby to nevypadalo jako to, co očekávali.
v důsledku toho se obvykle při navrhování bannerových reklam nejprve podívám na cílovou stránku a odtud pracuji zpět. Dále je to případ vypracování správné hierarchie různých složek reklamy (např. logo první, ale malé, Nadpis další, ale dominantní atd.). Poté přidejte vhodnou výzvu k akci (CTA), která se váže do kopie a vysvětluje požadovanou akci/odpověď. Jakmile jsou hierarchie zpráv seřazeny, mohou být použity na tři velikosti bannerových reklam jednotlivě.
prvky si navzájem konkurují ve většině Mpu díky čtvercovému tvaru
Mpu (300×250)
MPU (Messaging Plus Unit) je obvykle umístěn v užším pravém sloupci stránky a v důsledku toho je zhruba čtvercový formát a menší, aby se objevil nad záhybem. Čtvercový formát představuje kompoziční problém, protože lidské oko má rád obrázky, které jsou o něco horizontálnější (formát na šířku) nebo hlubší(formát na výšku).
mám pocit, že kombinace loga, obrázku, nadpisu a CTA v Mpu často nezanechává mnoho prostoru pro to, aby jeden ze čtyř vytvořil zaměření reklamy. To je snadno vidět v HP a X-Factor Mpu výše, kde všechny prvky bojují navzájem za pozornost uživatele webu. V obou případech se pozadí používá pouze jako tablet, na který lze umístit prvky.
naproti tomu výše uvedený CSI MPU použil obrázek na pozadí, aby spojil prvky tím, že je nechal vyjít ze stínů. Zakroužkovaná zbraň, žlutá karta s důkazy a ruce na nohou také vystupují ze stínů, aby nastavily tón a poskytly další vizuální informace o oku, pokud není kopie přečtena.
titulky jsou klíčovým ústředním prvkem v žebříčcích
žebříčků (728×90)
dlouhý vodorovný tvar žebříčku může vést k návrhům, které používají jeho prvky jako řadu stejných kusů jako ve výše uvedeném příkladu HP. Zjistil jsem však, že žebříčky mají větší dopad, pokud je Nadpis mnohem větší než v ostatních dvou bannerových reklamních jednotkách. To je jasně prokázáno v reklamě X-Factor výše, kde i když rychle naskenujete reklamu, klíčovým jídlem je „máš to?“
vzhledem k tomu, že žebříčky jsou obvykle umístěny na samém vrcholu stránky, zaměření na titulky se hodí k již existující psychologii zpracování webových stránek-zbytkové paměti ze čtení novin a časopisů.
vzhledem k tomu, že rozlišení displeje se zvyšuje ve velikosti, jsou také šířky webových stránek, díky nimž jsou předchozí 728×90 stále nadbytečnější(původně navržené pro rozlišení 1024 × 768). V důsledku tohoto CBS Interactive se pohybuje nahradit všechny 728x90s na to je síť míst s 970x66s (volal super vůdce). Tyto nové reklamy jsou pro uživatele webu méně rušivé a pohodlně se hodí k různým stránkám, které jsou nyní široké 970px. Přidaná délka a mělčí hloubka superleaderu se ještě více hodí k iteraci kampaně řízené nadpisem.
záhyb řeže mrakodrapy na polovinu, dokud se uživatel neposune dolů
dlouhý a štíhlý mrakodrap má malé titulky a velké obrázky
mrakodrapy (160×600)
zatímco Mpu a žebříčky jsou obvykle umístěny na stránce nad záhybem, mrakodrap je zkrácen na polovinu záhybem stránky (obvykle asi 600 px dolů-viz obrázek výše). V důsledku toho by klíčové informace, jako je logo, Nadpis a CTA, měly být v horní polovině. Úzkost mrakodrapu také znamená, že jejich titulky bývají malé.
podle mých zkušeností jsem zjistil, že mrakodrapy mají tendenci být umístěny na stránkách, které jsou těžké na informace a světlo na obrázky. To je ideální pro mrakodrapy, protože mají mnohem více prostoru pro imagary než Mpu a žebříčků.
ve třech příkladech 160×600 nad mrakodrapy byl navržen s rostoucím ohledem na záhyb zleva doprava. V mrakodrapu HP dostaly všechny výše uvedené prvky stejnou důležitost a v důsledku toho není oko Zaostřeno. Reklama X-Factor má moderátory větší než v jiných iteracích kampaně, ale malý Nadpis je ohromen všemi ostatními prvky–klíčové informace jsou všechny pod záhybem a ztěžují dno reklamy. V mrakodrapu CSI větší obrázek spojuje prvky, zatímco druhé logo způsobilo trochu přeplnění nahoře.
Porovnejte tuto verzi reklamy 728×90 s 300×250 níže (viz animovaná reklama zde)
animace pomáhá rozdělit prvky v čase
animace
je samozřejmé, že přidání animace do bannerové reklamy na ni upoutá pozornost. Flash verze banneru také pomáhá rozbít tyto prvky v průběhu času. Ve výše uvedeném Ally 728×90 je plná tužka méně přesvědčivá než verze 300×250, kde oko čeká, co se stane dál.
v poslední době vidím na animovaných reklamách mnohem více tlačítek pro přehrávání-bezpochyby proto, že reklama se již začala přehrávat, jakmile se stránka začne načítat. Statické verze reklam se opět staly relevantnějšími, protože se načítají jako výchozí Jpeg v prostředích, kde Flash nehraje, jako jsou tablety a smartphony.
animace sama o sobě nestačí k tomu, aby byla reklama dobrá. V reklamě musí být stále něco přesvědčivého, jinak se točí směrem k tomu, že je jako všechny ty levné kreditní skóre, strava a remortgage reklamy. Původně jsem změnil dvě reklamy spojenců výše na animované GIFy pro tento příspěvek, ale moje oko je automaticky promítalo, protože já (a pravděpodobně většina lidí na webu) jsem tak zvyklý ignorovat animované reklamy naskládané na sebe.
bannerové reklamy DESIGN tipy
vzhledem k tomu, že jsem udělal tolik bannerové reklamy zde jsou některé tipy, které jsem zvedl v průběhu let. Omlouvám se, pokud se zdají být zřejmé, uvádím je, protože je vidím, že se neustále nepoužívají:
kopírovat
• Vyhněte se všem velkým písmenům, protože to uživateli ztěžuje čtení
• nadpisy a kopie těla by měly mít různé velikosti, aby čtenáři usnadnily skenování
• nadpisy a/nebo kopie těla by neměly být na více než třech řádcích
• zachovat hierarchie zpráv a veškerý text by měl být důsledně zarovnán (vlevo, vpravo, uprostřed)
• zvažte použití zajímavé typografie jako snímků, abyste ušetřili místo tím, že budete mít o jeden prvek méně
-to-action (CTA)
• by měl být krátký a do bodu jako „go now“ nebo „check it
• by měla být nad záhybem pro 160×600 a 300×600 jednotek (zhruba uprostřed jednotky)
• by měla být velká písmena na začátku každého slova, aby se usnadnilo skenování
tlačítka
• by měla být v kontrastních barvách, aniž by vypadala křiklavě
• by měla být umístěna směrem ke konci kopie a/nebo dolní pravé straně
• by měla být konzistentní ve velikosti v celé sadě bannerových reklam
• zřejmě získat více kliknutí než textové odkazy pouze v bannerové reklamy (i když ty vypadají elegantněji)
různé
• přidejte 1px šedý okraj na reklamy s bílým pozadím – může být umístěn na bílé stránce
• pro schválení v prvním kole někdy přeměním jednotlivé snímky Photoshopu na animovaný GIF
• před konečným odesláním stojím a šilhám na reklamu, abych zkontroloval, zda ji lze snadno naskenovat
• stejně jako u všech návrhů Šetřete čas načrtnutím rámečků reklamy vždy
Vzhled stránky spojuje bannerové reklamy zabalením nebo rámováním stránky
závěr
vzhledem k tomu, že uživatelé webu jsou tak zvyklí vidět bannerové reklamy (a reklamy obecně), je před námi mnoho změn. Ačkoli Nejsvětější Trojice MPU, leaderboard a Mrakodrap dominují bannerové reklamní krajině, viděl jsem, že jiné velikosti jsou stále běžnější, jako jsou Intersticiály 640×480 (Jak se video stává převládajícím) a reklamy 300×600 „půl stránky“, které mají hlubší MPU, aby ovládly pravý sloupec. Úplný seznam novějších jednotek, které by mohly v budoucnu naplnit internet, najdete na stránce IAB na toto téma kliknutím sem.
pro komplexnější a harmoničtější zážitek z branding stránky skiny (nebo „tapety“) jsou používány mnohem více přes internet (zejména na IMDB), jak zabalit bannerové reklamy dohromady. Děláme asi 900 skinů ročně v CBS Interactive (stáhněte si tento pdf a přečtěte si více). Vzhledem k tomu, že kůže se také stávají četnějšími, dochází také k nárůstu převzetí bohatých médií na zakázku, které jsou zvláště žádány v RFP (více o tom viz můj příspěvek zde). Nicméně pro skiny a rich media převzetí stále existuje stále přítomná potřeba pro reklamní zážitek pracovat ve spojení se standardními bannerové reklamy na stránce a uživatelské zkušenosti z nich.
Dodatek
historie bannerových reklam: http://en.wikipedia.org/wiki/Web_banner
standardy Interactive Advertising Bureau (IAB) :
http://www.iab.net/guidelines/508676/508767/displayguidelines
záhyb: http://en.wikipedia.org/wiki/Above_the_fold
vyhledat bannery reklamy pro konkrétní značky: http://www.moat.com
rozlišení displeje: http://en.wikipedia.org/wiki/Display_resolution
DIY tvorba reklam: http://www.building43.com/videos/2011/07/19/flite-cloud-based-advertising
bannerové reklamy od společnosti Adobe: http://tv.adobe.com/watch/cs5-design-premium-feature-tour/interaction-design-101-create-a-simple-banner-ad-with-flash-professional-cs5/
některé crowdsourced bannerové reklamní stránky:
http://jobs.designcrowd.com/bannerad-design-jobs
http://99designs.com/banner-ad-design/contests
http://www.crowdspring.com/banner-ads/
některé levné (a přeplněné) web banner design stránky:
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
