Banner ładny czy skuteczny - warsztaty PWD podczas GrafConf 2018

Banner ładny czy skuteczny?
Warsztaty projektowania 
wg metody Performance Web Design

pracy na rynku
reklamowym jako designer
.o mnie
Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design
10 lat
PRODUCT DIRECTOR
w DOT Partners

poprawiamy wyniki online’owych
kampanii sprzedażowych naszych
klientów poprzez efektywne
projekty mailingów i bannerów.
.dotpartners
7 lat
stworzyliśmy autorską metodę projektowania, 
bo wiemy, że generowanie poprawy wiąże się 
nie tylko z realizacją bardzo dobrych
pomysłów, ale także potrzebą wprowadzenia
określonych reguł.
PERFORMANCE WEB DESIGN
Opiekujemy się takimi markami jak:

.agenda
Wstęp
Część 1 - Banner rulez!
Przerwa - 10 minut
Część 2 - Pimp My Mailing!
Podsumowanie warsztatów

.performance web design
Autorska metoda projektowania
skutecznej komunikacji sprzedażowej 
w internecie.
Uwzględnia specyfikę
formatów reklamowych 
i podnosi ich efektywność.
Łączy wiedzę z obszarów psychologii
perswazji, zachowań konsumenckich 
i kampanii performance.
Przyczynia się do osiągania wyższych
wskaźników konwersji i zwrotu
z inwestycji.

.performance web design
warstwa COPYwarstwa DESIGN
Performance Web Design stosujemy równorzędnie na dwóch warstwach projektowych:

.rynek reklamy
BRAND 
SAFETY
COALITION 
FOR BETTER ADS
AD BLOCK
Dlaczego rynek reklamy stał się bardzo trudnym
rynkiem dla reklamodawców?
Ograniczenie liczby wydawców 
poprzez dbanie przez marki 
o środowisko w jakim 
są wyświetlane reklamy.
Utworzenie koalicji 
dużych graczy internetowych 
i wyeliminowanie przez nich intruzywnych
reklam internetowych. Taki zabieg wywołał
u wydawców obawę przed ograniczaniem
różnych formatów, co skutkuje
ograniczaniem wydatków na reklamy.
AD Block staje się coraz popularniejszy

.banner widoczny
8 2Czas skanowania treści 
przez użytkownika na desktopie
Czas skanowania treści 
przez użytkownika na mobile

.master banner
Master banner to kreacja startowa od której powinno rozpoczynać
się prace na zestawem formatów dla danej kampanii.
Najczęstszy format to 750x200px

.master banner
Odpowiednie
zdjęcie
Główny claim, 
teksty uzupełniające
Logotyp
Benefity CTA
Elementy master bannera uwzględniane przy projektowaniu metodą PWD.

.master banner
Przykładowa
egzekucja master
bannera na formaty

.kompozycja
Przykładowa heat mapa
pokazująca skupienie wzroku
usera na poszczególnych
elementach kreacji.

.zasada F
Zasady F została określona przez UX designerów, przy śledzeniu ruchu gałek ocznych userów w internecie. 
Przenosząc ten model na master baner wiemy, że odbiorca skupia się na pierwszym komunikacie, najczęściej będzie to headline umieszczony po lewej stronie każdego wiersza
tekstu. Jak widzimy na naszym przykładzie umieszczanie poszczególnych elementów kreacji jak logo, headline czy benefity powinno odbywać się z uwzględnieniem litery F.

.dobór zdjęć
Zdjęcia naturalne
Unikanie zdjęć stockowych

.dobór zdjęć
Odpowiednia
jakość zdjęcia
Legalne
źródła

.dobór zdjęć
Używajmy zdjęć kobiet/dzieci czy zwierząt

.dobór zdjęć
Zdjęcia kierujące uwagę
wpływają na „ruch”
odbiorcy w stronę
głównego komunikatu.

.bestia CTA
Kluczowy 
punkt kreacji
Wzywa 
do wykonania
czynności
Spójny 
z przekazem
Scala 
komunikację
Forma
buttona
Call 
To Action

.bestia CTA
KUP TERAZ
COPY=DESIGN
Dobre CTA składa się z równorzędnie zaprojektowanych warstw:

.bestia CTA
Naturalne umiejscowienie CTA 
to prawy dolny róg kreacji
Ekspozycja przycisku ma duże znaczenie dla przyciągania uwagi odbiorcy. 
Ważne, aby odbywała się w naturalnych lokalizacjach czyli takich, do których nasz odbiorca
jest przyzwyczajony. Działajmy zgodnie z zachowaniem i przyzwyczajeniami użytkownika. 
Prezentacja CTA powinna znajdować się dokładnie w tych miejscach, w których nasz odbiorca 
się ich spodziewa. Zwyczajowo jest to prawy dolny róg kreacji.

.bestia CTA
Przykład na kreację z dobrze zaprojektowany CTA

.bestia CTA
Company Logo
Call To Action
20%
Call To Action
Rozmiar CTA a logotyp Pole ochronne CTA

.bestia CTA
26px
26px
Minimalne rozmiary CTA

.bestia CTA
Nie bądź nudny!
Stwórz opowieść
Dotrzyj co celu
Jaka powinna być warstwa COPY dobrego CTA?

.bestia CTA
KlikalnośćWyróżnianie
Kierowanie
Kontrast
Najważniejsze aspekty dobrze zaprojektowanego CTA:

.bestia CTA
Przykłady kreacji CTA:

50 kB
.egzekucja
Maksymalna waga danego formatu:

.egzekucja
Przykład kreacji z dopasowanymi elementami
do odpowiedniej wagi

.egzekucja
static html/
Warto ustalić, czy formaty będą statyczne (.jpg, .png) czy dynamiczne (HTML). 
To ważne, bowiem pierwsza wersja ogranicza projekt do jednej odsłony bez animacji. W przypadku rozwiązań opartych na HTML-u możliwości są dużo większe, 
bo kreacja staje się dynamiczna poprzez animację wybranych elementów. Oczywiście w przypadku drugiego podejścia należy zachować umiar i skondensować przekaz
do maksymalnie dwóch odsłon. Oczywiście taki wybór powstaje nam w momencie kiedy mamy do czynienia z większa ilością treści, która nie zmieści się nam na jednej
odsłonie. Na pewno produkcja rozwiązań animowanych jest dłuższa i droższa. Na koniec dnia i tak liczy się konwersja na cel. Środki dotarcia do niego są różne i warto
sprawdzić jak się zachowują na gotowych realizacjach.

B
A
.egzekucja
Testy A/B to odpowiedni sposób 
do sprawdzania efektywności kreacji.

.egzekucja
Skyscrappers
Formaty trudne:

.egzekucja
Mobilne
Formaty trudne:

.egzekucja
Facebook
Formaty trudne:

.egzekucja
Formaty specjalne
Formaty trudne:

.egzekucja
Im mniej tym lepiej!
W trakcie projektowania skutecznej komunikacji display’owej warto pamiętać o minimalizmie. Często ulegamy pokusie przesady i staramy się przy okazji jednego działania
wspomnieć kolejne np. chcemy sprzedać pożyczkę, ale wspominamy jeszcze o aplikacji mobilnej. To jeden z najczęściej zauważanych błędów. Skuteczna komunikacja jest
bezpośrednia i uczciwa. Powinna w prosty sposób odpowiedzieć odbiorcy na pytanie: „Co będę z tego miał?”, a poprzez CTA wskazać jak może to zdobyć.
Przed Po

.warsztat
Zadanie warsztatowe - wersja przed wprowadzeniem metody projektowania PWD

.warsztat
Nowy Jaguar E-PACE
0% WPŁATY WŁASNEJ
OD 1.499 ZŁ NETTO/MIES.
SPRAWDŹ
Zadanie warsztatowe - wersja przed wprowadzeniem metody projektowania PWD

.wygląd i treść 
są bardzo ważne

.wygląd i treść są bardzo ważne

.mobile first!
7%
23%
Udział urządzeń mobilnych w rynku 
wg raportu Freshmail
55%
2013 2016 2018
Udział urządzeń mobilnych 
w rynku na podstawie ostatniego
raportu Gemius z marca 2018 roku
Dlaczego należy projektować mailing mobilny:

.mobile first!
300-350px
34 px
Widoczne CTA
RESPONSYWNOŚĆ
SZEROKOŚĆ
KLIKALNOŚĆ
Najważniejsze właściwości mailingu mobilnego:

.szerokość mailingu
600-650px
Zwróć uwagę na to, by Twój projekt mailingu nie był zbyt szeroki.
Rekomendowana szerokość wiadomości to 600-650 px. 
Dzięki temu masz pewność, że Twój mailing będzie się dobrze
wyświetlał na większości rozdzielczości monitorów.

.waga mailingu
50kb
Waga mailingu po kodowaniu
powinna wynosić maksymalnie 50kB. 
Na wagę całego mailingu wpływają
takie elementy jak:
ilość kolorów 
użycie gradientów 
użycie „ciężkich” zdjęć 
skomplikowane grafiki oraz zdjęcia

.bezpieczne fonty
Jestem stary ale jary!
Arial
Arial Narrow
Tahoma
Impact
Arial Black
Helvetica
Times NR
Georgia
Courier New
Comic Sans
Poznajecie?

.bezpieczne fonty
Arial
prosty i czytelny
uniwersalny 
sprawdza się przy wysyłce mailingów
 
światło między literami jest małe
+
-
Helvetica
nowoczesny i minimalistyczny
uniwersalny 
sprawdza się przy wysyłce mailingów
 
+
-
Times New Roman
„oczytany” font
łatwo rozpoznawalny 
+
-
Fonty warte uwagi podczas projektowania mailingów wg metody PWD:

.elementy mailingu
Logotyp
Główny komunikat
Call To Action
Element kierujący uwagę
Warstwa copy
Biała przestrzeń
Zdjęcia/grafiki

.elementy mailingu
Umiejscowienie 
w górnej części projektu
Zachowanie odpowiedniej
widoczności
Najlepsze miejsce 
na logotyp
Podlinkowanie
Najważniejsze właściwości logotypu wg PWD:

.elementy mailingu
350px
Pamiętaj o bardzo ważnej zasadzie przy projektowaniu: wysokość przestrzeni jaką przeznaczasz na główny komunikat. Nie powinna przekraczać 350 px od górnej krawędzi
mailingu. Dlaczego? Ponieważ w tym obszarze skupisz informacje, które od razu trafią do odbiorcy. Masz tylko 8 sekund na zatrzymanie i „zainteresowanie” uwagi odbiorcy, 
dlatego skoncentruj główne treści właśnie w tej, najwyżej położonej części mailingu.

.elementy mailingu
Hierarchizowanie treści
Mocne punkty
Prowadzenie usera przez kreację
Zasada PIRAMIDY

.elementy mailingu
Kierowanie uwagi

.elementy mailingu
BIAŁE 
PRZESTRZENIE

.elementy mailingu
KUP TERAZKontrast/kolorystyka
Warstwa copy
Pole ochronne
Kierunkowanie
Rozmiar

.elementy mailingu
Zaciekaw headlinem
Pisz bezpośrednio
FOMO
Czytelna stopka

Efektowny
Efektywny
.podsumowanie
Mailing wg PWD powinien być:

Banner ładny czy skuteczny - warsztaty PWD podczas GrafConf 2018

Recomendados

Recomendados

Más contenido relacionado

Similar a Banner ładny czy skuteczny - warsztaty PWD podczas GrafConf 2018

Similar a Banner ładny czy skuteczny - warsztaty PWD podczas GrafConf 2018 (20)

Banner ładny czy skuteczny - warsztaty PWD podczas GrafConf 2018