wprowadzenie
w pewnym momencie swojej kariery prawie każdy projektant będzie musiał zaprojektować zestaw banerów reklamowych. Zainspirowany przez kogoś, kto powiedział mi, że zrobili swoją pierwszą reklamę banerową, pomyślałem, że dobrze byłoby zbadać ten sub-gatunek projektu, ponieważ przez lata zaprojektowałem tysiące reklam banerowych i skierowałem tysiące innych sztuk.
w tym poście Nie będę wdawał się w kwestie takie jak rodzaje stron, na których wyświetlają się reklamy, czy współczynniki klikalności, ponieważ projektanci nie mogą ich zmienić. Będę wyłącznie przyglądać się rzemiosłu projektowania banerów, aby wyglądały bardziej atrakcyjnie (i mam nadzieję, że bardziej klikalne).
banery reklamowe powinny sygnalizować stronę, z którą się łączą
krajobraz reklam banerowych
trzy najczęstsze reklamy banerowe online to MPU (Messaging Plus Units), tablica wyników i Wieżowiec, co nazywam Świętą Trójcą reklam banerowych. Pojawiają się one w całej sieci, gdy kształty pasują do szerokości strony internetowej (rankingi) lub w pojedynczej kolumnie (MPU i drapacze chmur). Rankingi są umieszczane z MPU lub wieżowca, ale wszystkie trzy nigdy nie pojawiają się razem.
banery reklamowe będą zazwyczaj częścią istniejącej kampanii, więc ich składniki mogą być dostarczone przez klienta tj. logo(y), obrazy, kierunek kopiowania. Kluczem jest połączenie tych składników w sposób, który jest interesujący dla użytkownika witryny w ciągu 2 sekund lub tak, że spędzają skanowanie reklamy (nawet mniej, jeśli skanują reklamę peryferyjnie). Ważne jest, aby przyciągnąć ich uwagę atrakcyjnym obrazem/wiadomością i uświadomić sobie, co chcesz, aby zrobili dalej. Jeśli zmrużysz oczy i nie ma oczywistego punktu ogniskowego w reklamie, to raczej nie zadziała.
uważam, że banery powinny wyraźnie wskazywać na to, na co klika internauta. W ten sposób użytkownik trafia na stronę, która wygląda jak reklama, która go tam wysłała. Gdyby tak nie było, naturalnie byliby rozczarowani lub odkładali, gdyby nie wyglądało to tak, jak oczekiwali.
w rezultacie zwykle najpierw patrzę na stronę docelową podczas projektowania banerów reklamowych i pracuję wstecz. Dalej jest to przypadek wypracowania odpowiedniej hierarchii różnych składników reklamy(np. logo najpierw ale małe, nagłówek następny ale dominujący itp.). Następnie dodaj odpowiednie wezwanie do działania (CTA), które wiąże się z kopią i określa żądaną akcję/odpowiedź. Po posortowaniu hierarchii wiadomości można je zastosować indywidualnie do trzech rozmiarów banerów reklamowych.
Elementy konkurują ze sobą w większości MPU ze względu na Kwadratowy kształt
MPU (300×250)
MPU (Messaging Plus Unit) jest zwykle umieszczany w węższej prawej kolumnie strony, w wyniku czego ma mniej więcej kwadratowy format i mniejszy rozmiar, aby pojawić się nad zakładką. Kwadratowy format stanowi problem kompozycyjny, ponieważ ludzkie oko lubi obrazy, które są nieco bardziej poziome (format krajobrazowy) lub głębsze (format portretowy).
czuję, że mieszanka logo, obrazu, nagłówka i CTA w MPU często nie pozostawia wiele miejsca dla jednego z czterech, aby utworzyć skupienie reklamy. Jest to łatwo widoczne w HP i X-Factor MPUs powyżej, gdzie wszystkie elementy walczą ze sobą o uwagę użytkownika sieci. W obu przypadkach tło służy jedynie jako tablet, na którym umieszczane są elementy.
natomiast CSI MPU powyżej użyło obrazu tła, aby połączyć elementy, sprawiając, że wychodzą z cienia. Zakreślony Pistolet, żółta kartka z dowodami i ręce na stopach również wychodzą z cienia, aby nadać ton i dostarczyć innym informacjom wizualnym dla oka, jeśli kopia nie zostanie odczytana.
nagłówki są kluczowym elementem w rankingach
(728×90)
długi poziomy kształt tabeli liderów może prowadzić do projektów, które wykorzystują jego elementy jako serię równych kawałków, jak w powyższym przykładzie HP. Odkryłem jednak, że rankingi mają większy wpływ, jeśli nagłówek jest znacznie większy niż w pozostałych dwóch jednostkach reklamowych. Jest to wyraźnie pokazane w powyższej reklamie X-Factor, gdzie nawet jeśli szybko zeskanujesz reklamę, kluczem jest ” czy ją masz?”
ponieważ rankingi są zwykle umieszczane na samej górze strony, nacisk na nagłówki nadaje się do istniejącej wcześniej psychologii przetwarzania stron internetowych-pozostałej pamięci z czytania gazet i czasopism.
wraz ze wzrostem rozdzielczości wyświetlacza, szerokość strony internetowej staje się coraz bardziej zbędna (pierwotnie zaprojektowana dla rozdzielczości 1024 × 768). W wyniku tego CBS Interactive przenosi się do zastąpienia wszystkich 728x90s w swojej sieci witryn z 970x66s (zwany super liderem). Te nowe reklamy są mniej uciążliwe dla użytkownika witryny i bardziej pasują do różnych stron, które mają teraz szerokość 970px. Dodana długość i płytsza głębokość superleader nadaje się jeszcze bardziej do iteracji kampanii opartej na nagłówkach.
fałda przecina drapacze chmur na pół, aż użytkownik przewinie się w dół
długi i smukły wieżowiec ma małe nagłówki i duże obrazy
wieżowce (160×600)
podczas gdy MPU i rankingi są zwykle umieszczane na stronie powyżej zakładki, wieżowiec jest przecięty na pół przez zakładkę strony (zwykle około 600 px w dół – Patrz diagram powyżej). W rezultacie kluczowe informacje, takie jak logo, nagłówek i CTA, powinny znajdować się w górnej połowie. Wąskość wieżowca oznacza również, że ich nagłówki są małe.
z mojego doświadczenia wynika, że wieżowce są zwykle umieszczane na stronach, które są ciężkie dla informacji, a lekkie dla obrazów. Jest to idealne rozwiązanie dla drapaczy chmur, ponieważ mają o wiele więcej miejsca na obrazy niż MPU i rankingi.
w trzech przykładach 160×600 powyżej wieżowców został zaprojektowany z rosnącym uwzględnieniem fałdy od lewej do prawej. W HP drapacz chmur wszystkie powyższe elementy zostały tak samo wyeksponowane i w rezultacie nie ma ostrości dla oka. Reklama X-Factor ma prezenterów większych niż w innych iteracjach kampanii, ale mały nagłówek został przytłoczony wszystkimi innymi elementami–kluczowe informacje są wszystkie poniżej fałdy i sprawia, że dno reklamy jest ciężkie. W wieżowcu CSI większy obraz łączy elementy, podczas gdy drugie logo spowodowało małe przepełnienie u góry.
Porównaj tę wersję reklamy 728×90 z poniższą wersją 300×250 (zobacz animowaną reklamę tutaj)
Animacja pomaga podzielić elementy w czasie
animacja
oczywiste jest, że dodanie animacji do reklamy banerowej przyciągnie wzrok. Wersja Flash banera pomaga również rozbić te elementy w czasie. W Ally 728×90 powyżej pokazanie pełnego ołówka jest mniej przekonujące niż wersja 300×250, w której oko czeka, aby zobaczyć, co będzie dalej.
ostatnio widzę dużo więcej przycisków powtórek na animowanych reklamach-bez wątpienia, ponieważ reklama jest już uruchomiona, gdy strona zaczyna się ładować. Statyczne wersje reklam stają się ponownie bardziej odpowiednie, ponieważ są ładowane jako domyślny format Jpeg w środowiskach, w których Flash nie jest odtwarzany, takich jak tablety i smartfony.
sama animacja nie wystarczy, aby reklama była dobra. Nadal musi być coś atrakcyjnego w reklamie, w przeciwnym razie skręca w kierunku bycia jak wszystkie te tanie przyciągające uwagę oceny kredytowej, diety i reklamy remortgage. Pierwotnie zamieniłem dwie powyższe reklamy sojuszników w animowane gify dla tego posta, ale moje oko automatycznie je wyświetliło, ponieważ ja (i prawdopodobnie większość ludzi w Internecie) jestem przyzwyczajony do ignorowania animowanych reklam ułożonych jeden na drugim.
porady dotyczące projektowania banerów reklamowych
ponieważ zrobiłem tak wiele reklam banerowych, oto kilka wskazówek, które podniosłem przez lata. Przepraszam, jeśli wydają się oczywiste, stwierdzam je, ponieważ widzę, że stale nie są stosowane:
Kopiuj
• unikaj kopiowania dużych liter, ponieważ utrudnia to użytkownikowi czytanie
• nagłówki i kopiowanie treści powinny mieć różne rozmiary, aby ułatwić czytelnikowi skanowanie
• nagłówki i/lub kopiowanie treści powinny znajdować się na nie więcej niż trzech liniach
• zachowaj hierarchie wiadomości i cały tekst powinien być konsekwentnie wyrównany (w lewo, w prawo, w środku)
• rozważ użycie interesującej typografii jako obrazu w celu oszczędzaj miejsce, mając o jeden element mniej
Call-to-action (CTA)
• powinno być krótkie i do rzeczy, takie jak „go now” lub „check it Out”
• powinny być powyżej krotnie dla 160×600 i 300×600 jednostek (mniej więcej w środku jednostki)
• powinny być duże litery na początku każdego słowa, aby ułatwić skanowanie
przyciski
• powinny być w kontrastowych kolorach bez patrząc krzykliwe
• powinny być umieszczone w kierunku końca kopii i/lub dolnej prawej strony
• powinny być zgodne w rozmiar w całym zestawie banerów reklamowych
• widocznie uzyskać więcej kliknięć niż tylko linki tekstowe w banerach reklamowych (mimo że te ostatnie wyglądają bardziej elegancko)
różne
• dodaj szare obramowanie 1px na reklamach z białym tłem-może być umieszczony na białej stronie
skórka strony łączy banery reklamowe poprzez zawijanie lub kadrowanie strony
podsumowanie
ponieważ użytkownicy sieci są tak przyzwyczajeni do wyświetlania banerów reklamowych (i reklam w ogóle), przed nami wiele zmian. Chociaż Święta Trójca MPU, leaderboard i Drapacz chmur dominują w krajobrazie reklamy banerowej widziałem inne rozmiary stają się coraz bardziej powszechne, takie jak 640×480 Interstitials (jak wideo staje się bardziej dominujący) i 300×600 „pół strony” reklamy, które mają głębsze MPU zdominować prawą kolumnę. Aby uzyskać pełną listę nowszych jednostek, które mogą zapełnić internet w przyszłości, sprawdź stronę IAB na ten temat, klikając tutaj.
aby uzyskać bardziej wszechstronne i harmonijne doświadczenie w brandingu, skórki (lub „tapety”) są używane znacznie częściej w Internecie (zwłaszcza w IMDB), ponieważ zawierają banery reklamowe. Robimy około 900 skórek rocznie w CBS Interactive (Pobierz ten plik pdf, aby przeczytać więcej). Ponieważ skórki stają się coraz liczniejsze, wzrasta również liczba niestandardowych przejęć rich media, o które szczególnie prosi się w zapytaniach ofertowych (aby przeczytać więcej na ten temat, zobacz mój post tutaj). Jednak zarówno w przypadku skórek, jak i przejęć rich media wciąż istnieje potrzeba, aby doświadczenie reklamowe działało w połączeniu ze standardowymi reklamami banerowymi na stronie i doświadczeniem użytkownika.
dodatek
historia reklam banerowych: http://en.wikipedia.org/wiki/Web_banner
standardy interaktywnego Biura Reklamy (IAB) :
http://www.iab.net/guidelines/508676/508767/displayguidelines
Fold: http://en.wikipedia.org/wiki/Above_the_fold
Sprawdź banery reklamowe dla konkretnych marek: http://www.moat.com
rozdzielczość ekranu: http://en.wikipedia.org/wiki/Display_resolution
tworzenie reklam DIY: http://www.building43.com/videos/2011/07/19/flite-cloud-based-advertising
banery reklamowe od Adobe: http://tv.adobe.com/watch/cs5-design-premium-feature-tour/interaction-design-101-create-a-simple-banner-ad-with-flash-professional-cs5/
niektóre strony z banerami reklamowymi:
http://jobs.designcrowd.com/bannerad-design-jobs
http://99designs.com/banner-ad-design/contests
http://www.crowdspring.com/banner-ads/
niektóre tanie (i przepełnione) strony internetowe Projektowanie banerów:
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
