bevezetés
karrierjük egy bizonyos pontján szinte minden tervezőnek meg kell terveznie egy sor banner hirdetést. Ihlette valaki, aki azt mondta, hogy ők tették az első banner hirdetés azt hittem, hogy jó lenne, hogy vizsgálja meg ezt a tervezési al-műfaj, mivel én tervezték ezer banner hirdetések és művészeti irányított több ezer az évek során.
ebben a bejegyzésben nem megyek bele olyan kérdésekbe, mint például, hogy milyen típusú oldalakon jelennek meg a hirdetések, vagy kattintási arányok, mivel a tervezők nem tudják megváltoztatni ezeket. Kizárólag a bannerek tervezésének mesterségét fogom megvizsgálni, hogy vonzóbbnak tűnjenek (és remélhetőleg kattinthatóbbak legyenek).
a Bannerhirdetéseknek jelezniük kell azt az oldalt, amelyhez csatlakoznak
a BANNERHIRDETÉSI táj
a három leggyakoribb Online bannerhirdetés az MPU (Messaging Plus Units), a ranglista és a felhőkarcoló, amit a bannerhirdetések szentháromságának nevezek. Az egész weben megjelennek, mivel az alakzatok illeszkednek a weboldal szélességéhez (ranglisták) vagy egy egyedi oszlopon belül (Mpu-k és felhőkarcolók). A ranglistákat MPU-val vagy felhőkarcolóval helyezik el, de mindhárom soha nem jelenik meg együtt.
a Szalaghirdetések általában egy meglévő kampány részét képezik, így összetevőiket az ügyfél adhatja meg, pl. logó(ok), képek, másolási irány. A legfontosabb az, hogy ezeket az összetevőket oly módon kombináljuk, amely érdekes a webhely felhasználója számára a 2 másodperc alatt, vagy úgy, hogy a hirdetés beolvasásával töltsék (még kevésbé, ha periférikusan szkennelik a hirdetést). Nagyon fontos, hogy megragad a figyelmet egy lenyűgöző kép/üzenet, és nyilvánvalóvá teszi, hogy mit szeretne, hogy a következő. Ha hunyorog a szemed, és nincs nyilvánvaló fókuszpont a hirdetésben, akkor nem valószínű, hogy működni fog.
határozottan úgy érzem, hogy a bannereknek egyértelműen jelezniük kell, hogy a webes felhasználó mire kattint. Így a Felhasználó olyan oldalra érkezik, amely úgy néz ki, mint az a hirdetés, amely oda küldte őket. Ha nem, akkor természetesen csalódni fognak, vagy elhalasztják, ha nem úgy néz ki, mint amire számítottak.
ennek eredményeként általában először a céloldalt nézem meg, amikor banner hirdetéseket tervezek, és onnan visszafelé dolgozom. Ezután a hirdetés különböző összetevőinek megfelelő hierarchiáját dolgozzuk ki (pl. logó első, de kicsi, címsor következő, de domináns stb.). Ezután adjon hozzá egy megfelelő cselekvésre ösztönzést (CTA), amely összekapcsolódik a másolattal, és meghatározza a kívánt műveletet/választ. Az üzenetküldés hierarchiáinak rendezése után a három szalaghirdetés méretére külön-külön alkalmazhatók.
az elemek a legtöbb Mpu-ban versenyeznek egymással a négyzet alakú
Mpu-k miatt (300×250)
az MPU (Messaging Plus Unit) általában az oldal keskenyebb jobb oldali oszlopába kerül, ennek eredményeként nagyjából négyzet alakú és kisebb méretű, hogy a hajtás felett jelenjen meg. A négyzet alakú formátum kompozíciós problémát jelent, mivel az emberi szem kedveli a kissé vízszintesebb (fekvő formátumú) vagy mélyebb (álló formátumú) képeket.
úgy érzem, hogy a logó, a kép, a címsor és a CTA keveréke az MPU-kban gyakran nem hagy sok helyet a négy közül az egyiknek, hogy a hirdetés fókuszát képezze. Ez jól látható a fenti HP és X-Factor Mpu-kban, ahol az összes elem harcol egymással a webes felhasználó figyelméért. Mindkét esetben a hátteret csupán tablettaként használják, amelyre elemeket lehet elhelyezni.
ezzel szemben a CSI MPU fenti használta a háttérképet, hogy az elemek együtt azáltal, hogy azok jelennek meg az árnyékból. A bekarikázott pisztoly, a sárga bizonyítékkártya és a lábakon lévő kezek szintén előbújnak az árnyékból, hogy hangot adjanak és más vizuális információkat nyújtsanak a szemnek, ha a másolatot nem olvassák el.
a címsorok a legfontosabb fókuszelemek a ranglistákban
ranglisták (728×90)
a ranglista hosszú vízszintes alakja olyan tervekhez vezethet, amelyek elemeit egyenlő darabok sorozataként használják, mint a fenti HP példában. Azt tapasztaltam azonban, hogy a ranglisták nagyobb hatással vannak, ha a címsor sokkal nagyobb, mint a másik két szalaghirdetési egységben. Ezt egyértelműen bizonyítja a fenti X-Factor hirdetés, ahol még akkor is, ha gyorsan beolvassa a hirdetést, a legfontosabb elvihető: “megvan?”
mivel a ranglistákat általában az oldal legtetején helyezik el, a címsorokra való összpontosítás a weboldalak feldolgozásának már létező pszichológiájához igazodik-az újságok és magazinok olvasásából származó maradék memória.
ahogy a kijelző felbontása növekszik, a weboldal szélessége is egyre redundánsabbá teszi az előző 728×90-eseket (eredetileg 1024 668-as felbontáshoz tervezték). Ennek eredményeként a CBS Interactive mozog, hogy cserélje ki az összes 728x90s rajta hálózat oldalak 970x66s (úgynevezett super leader). Ezek az új hirdetések kevésbé tolakodóak a webhely felhasználói számára, és jobban illeszkednek a különböző oldalakhoz, amelyek mind 970px szélesek. A superleader hozzáadott hossza és sekélyebb mélysége még inkább alkalmas egy kampány címsor által vezérelt iterációjára.
a hajtás kettévágja a felhőkarcolókat, amíg a felhasználó lefelé nem görget
a hosszú és karcsú felhőkarcoló kis főcímek és nagy képek
felhőkarcolók (160×600)
míg az MPU-k és a ranglisták általában a hajtás feletti oldalra kerülnek, a felhőkarcolót az oldal hajtása félbevágja (általában körülbelül 600 px lefelé – lásd a fenti ábrát). Ennek eredményeként a legfontosabb információknak, például a logónak, a címsornak és a CTA-nak a felső felében kell lenniük. A felhőkarcoló szűksége azt is jelenti, hogy a címsoruk általában kicsi.
tapasztalatom szerint a felhőkarcolókat általában olyan oldalakon helyezik el, ahol nehéz az információ, és könnyű a kép. Ez ideális a felhőkarcolók számára, mivel sokkal több helyük van az imagary számára, mint az MPU-k és a ranglisták.
a három 160 600 példákban a felhőkarcolók felett úgy tervezték, hogy egyre inkább figyelembe vegyék a hajtást balról jobbra. A HP felhőkarcolóban az összes fenti elem egyenlő hangsúlyt kapott, ennek eredményeként nincs fókusz a szem számára. Az X-Factor hirdetés előadói nagyobbak, mint a kampány más iterációiban, de a kis címsort elárasztotta az összes többi elem–a legfontosabb információk mind a hajtás alatt vannak, és megnehezítik a hirdetés alját. A CSI felhőkarcolóban a nagyobb kép összehozza az elemeket, míg a második logó kissé túlzsúfoltságot okozott a tetején.
hasonlítsa össze a hirdetés ezen 728 60-as verzióját az alábbi 300 250-gyel (lásd az animált hirdetést itt)
az animáció segít az elemek időbeli felosztásában
animáció
magától értetődik, hogy az animáció hozzáadása a szalaghirdetéshez felhívja a figyelmet rá. A szalaghirdetés Flash verziója szintén segít ezeknek az elemeknek az idővel történő felbomlásában. A fenti 728 60-as Ally-ben a teljes ceruza bemutatása kevésbé kényszerítő, mint a 300 250-es változat, ahol a szem arra vár, hogy lássa, mi történik ezután.
az utóbbi időben sokkal több visszajátszási gombot látok az animált hirdetéseken–nem kétséges, mert a hirdetés lejátszása már megkezdődött, amikor az oldal betöltődik. A hirdetések statikus verziói ismét relevánsabbá váltak, mivel alapértelmezett Jpeg-ként töltődnek be olyan környezetekben, ahol a Flash nem játszik le, például táblagépeken vagy okostelefonokon.
az animáció önmagában nem elég ahhoz, hogy egy hirdetés jó legyen. Még mindig kell lennie valami kényszerítőnek a hirdetésben, különben olyan lesz, mint az olcsó figyelemfelkeltő kredit pontszám, diéta és remortgage hirdetések. Eredetileg a fenti két Ally hirdetést animált GIF-ekké alakítottam erre a bejegyzésre, de a szemem automatikusan kiszűrte őket, mivel én (és valószínűleg a legtöbb ember az interneten) annyira megszoktam, hogy figyelmen kívül hagyom az egymásra rakott animált hirdetéseket.
BANNER hirdetési tervezési tippek
mivel annyi banner hirdetést készítettem, íme néhány tipp, amelyet az évek során felvettem. Elnézést, ha nyilvánvalónak tűnnek, kijelentem őket, mert látom, hogy folyamatosan nem alkalmazzák őket:
másolás
• kerülje az összes nagybetűs másolatot, mivel ez megnehezíti a felhasználó számára az olvasást
• a Címsoroknak és a törzsmásolatoknak különböző méretűnek kell lenniük, hogy megkönnyítsék az olvasó számára a beolvasást
• a címsorok és/vagy a törzsmásolatoknak legfeljebb három sorban kell lenniük
• az üzenetküldés hierarchiáinak megőrzése és az összes szövegnek következetesen igazodnia kell (balra, jobbra, középen)
• fontolja meg érdekes tipográfia használatát képként, hogy helyet takarítson meg azáltal, hogy eggyel kevesebb elem
cselekvésre ösztönzés (CTA)
• rövidnek kell lennie, olyan pontig, mint a “go now” vagy a “check it Out”
• a hajtás felett kell lennie 160 600 és 300 600 egységnél (nagyjából az egység közepén)
• nagybetűknek kell lenniük minden szó elején, hogy megkönnyítsék a beolvasást
gombok
• kontrasztos színűnek kell lennie anélkül, hogy rikító lenne
• a másolat vége felé és/vagy a jobb alsó oldal felé kell elhelyezni
• következetesnek kell lennie minden egyes szó elején, hogy megkönnyítse a beolvasást méret az egész sor banner hirdetések
• úgy tűnik, hogy több kattintást, mint a szöveg csak linkeket banner hirdetések (annak ellenére, hogy az utóbbi meg elegánsabb)
egyéb
• adjunk hozzá egy 1px szürke szegéllyel hirdetések fehér háttérrel – fehér oldalra helyezhető
* az első forduló jóváhagyásához néha az egyes Photoshop-képkockákat animált GIF-be fordítom
* a végső benyújtás előtt hátrébb állok és hunyorogok a hirdetésnél, hogy ellenőrizzem, könnyen beolvasható-e
az oldalfelület a szalaghirdetéseket úgy hozza össze, hogy becsomagolja vagy keretezi az oldalt
következtetés
mivel a webes felhasználók annyira megszokták a szalaghirdetéseket (és általában a hirdetéseket), sok változás áll előttünk. Bár az MPU szentháromsága, a ranglista és a felhőkarcoló uralja a banner hirdetési tájat, láttam, hogy más méretek egyre gyakoribbak, mint például a 640 ++ 480 Interstitials (ahogy a videó egyre dominánsabbá válik) és a 300 600 ‘fél oldalas’ hirdetések, amelyek mélyebb MPU-val rendelkeznek, hogy uralják a jobb oldali oszlopot. A teljes listát az újabb egységek valószínűleg feltölti az interneten a jövőben nézd meg IAB oldalt a témában ide kattintva.
az átfogóbb és harmonikusabb márkaépítési élmény érdekében az oldalbőröket (vagy háttérképeket) sokkal többet használják az interneten (különösen az IMDB-n), amikor a szalaghirdetéseket együtt csomagolják. Évente körülbelül 900 bőrt készítünk a CBS Interactive-nál (töltse le ezt a pdf-t további információkért). Ahogy skins is egyre több van is egy nő a rendelésre készült rich media felvásárlások, amelyek különösen kérte a RFP-k (Ha többet szeretne megtudni erről lásd a post itt). Azonban mind a bőrök, mind a rich media átvételek esetében még mindig szükség van arra, hogy a hirdetési élmény együtt működjön az oldalon található szokásos szalaghirdetésekkel és a felhasználói élményekkel.
függelék
a Banner hirdetések története: http://en.wikipedia.org/wiki/Web_banner
interaktív hirdetési Iroda (IAB) szabványok:
http://www.iab.net/guidelines/508676/508767/displayguidelines
a hajtás: http://en.wikipedia.org/wiki/Above_the_fold
Nézz fel bannerek hirdetések konkrét márkák: http://www.moat.com
képernyő kijelző felbontása: http://en.wikipedia.org/wiki/Display_resolution
DIY hirdetés létrehozása: http://www.building43.com/videos/2011/07/19/flite-cloud-based-advertising
banner hirdetések Adobe: http://tv.adobe.com/watch/cs5-design-premium-feature-tour/interaction-design-101-create-a-simple-banner-ad-with-flash-professional-cs5/
néhány crowdsourced banner hirdetési oldal:
http://jobs.designcrowd.com/bannerad-design-jobs
http://99designs.com/banner-ad-design/contests
http://www.crowdspring.com/banner-ads/
néhány olcsó (és túlzsúfolt) web banner design oldalak:
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
