Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Banner ładny czy skuteczny - warsztaty PWD podczas GrafConf 2018

480 views

Published on

Published in: Design
  • Login to see the comments

  • Be the first to like this

Banner ładny czy skuteczny - warsztaty PWD podczas GrafConf 2018

  1. 1. Banner ładny czy skuteczny? Warsztaty projektowania
 wg metody Performance Web Design
  2. 2. 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
  3. 3. poprawiamy wyniki online’owych kampanii sprzedażowych naszych klientów poprzez efektywne projekty mailingów i bannerów. .dotpartners Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design 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:
  4. 4. .agenda Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Wstęp Część 1 - Banner rulez! Przerwa - 10 minut Część 2 - Pimp My Mailing! Podsumowanie warsztatów
  5. 5. .wstęp 01
  6. 6. .performance web design
  7. 7. .performance web design Banner ładny czy skuteczny? - Warsztaty projektowania wg metody 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.
  8. 8. .performance web design Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design warstwa COPYwarstwa DESIGN Performance Web Design stosujemy równorzędnie na dwóch warstwach projektowych:
  9. 9. .rynek reklamy
  10. 10. .rynek reklamy Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design 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
  11. 11. .banner widoczny
  12. 12. .banner widoczny Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design 8 2Czas skanowania treści
 przez użytkownika na desktopie Czas skanowania treści
 przez użytkownika na mobile
  13. 13. .banner rulez! 02
  14. 14. .master banner
  15. 15. .master banner Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Master banner to kreacja startowa od której powinno rozpoczynać się prace na zestawem formatów dla danej kampanii. Najczęstszy format to 750x200px
  16. 16. .master banner Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Odpowiednie zdjęcie Główny claim,
 teksty uzupełniające Logotyp Benefity CTA Elementy master bannera uwzględniane przy projektowaniu metodą PWD.
  17. 17. .master banner Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Przykładowa egzekucja master bannera na formaty
  18. 18. .kompozycja
  19. 19. .kompozycja Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Przykładowa heat mapa pokazująca skupienie wzroku usera na poszczególnych elementach kreacji.
  20. 20. .zasada F
  21. 21. .zasada F Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design 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.
  22. 22. .dobór zdjęć
  23. 23. .dobór zdjęć Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Zdjęcia naturalne Unikanie zdjęć stockowych
  24. 24. .dobór zdjęć Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Odpowiednia jakość zdjęcia Legalne źródła
  25. 25. .dobór zdjęć Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Używajmy zdjęć kobiet/dzieci czy zwierząt
  26. 26. .dobór zdjęć Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Zdjęcia kierujące uwagę wpływają na „ruch” odbiorcy w stronę głównego komunikatu.
  27. 27. .bestia CTA
  28. 28. .bestia CTA Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Kluczowy
 punkt kreacji Wzywa
 do wykonania czynności Spójny
 z przekazem Scala
 komunikację Forma buttona Call
 To Action
  29. 29. .bestia CTA Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design KUP TERAZ COPY=DESIGN Dobre CTA składa się z równorzędnie zaprojektowanych warstw:
  30. 30. .bestia CTA Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design 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.
  31. 31. .bestia CTA Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Przykład na kreację z dobrze zaprojektowany CTA
  32. 32. .bestia CTA Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Company Logo Call To Action 20% Call To Action Rozmiar CTA a logotyp Pole ochronne CTA
  33. 33. .bestia CTA Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design 26px 26px Minimalne rozmiary CTA
  34. 34. .bestia CTA Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Nie bądź nudny! Stwórz opowieść Dotrzyj co celu Jaka powinna być warstwa COPY dobrego CTA?
  35. 35. .bestia CTA Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design KlikalnośćWyróżnianie Kierowanie Kontrast Najważniejsze aspekty dobrze zaprojektowanego CTA:
  36. 36. .bestia CTA Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Przykłady kreacji CTA:
  37. 37. .bestia CTA Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Przykłady kreacji CTA:
  38. 38. .bestia CTA Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Przykłady kreacji CTA:
  39. 39. .egzekucja
  40. 40. 50 kB .egzekucja Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Maksymalna waga danego formatu:
  41. 41. .egzekucja Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Przykład kreacji z dopasowanymi elementami do odpowiedniej wagi
  42. 42. .egzekucja Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design 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.
  43. 43. B A .egzekucja Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Testy A/B to odpowiedni sposób
 do sprawdzania efektywności kreacji.
  44. 44. .egzekucja Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Skyscrappers Formaty trudne:
  45. 45. .egzekucja Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Mobilne Formaty trudne:
  46. 46. .egzekucja Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Facebook Formaty trudne:
  47. 47. .egzekucja Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Formaty specjalne Formaty trudne:
  48. 48. .egzekucja Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design 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
  49. 49. .warsztat 02
  50. 50. .warsztat Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Zadanie warsztatowe - wersja przed wprowadzeniem metody projektowania PWD
  51. 51. .warsztat Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Nowy Jaguar E-PACE 0% WPŁATY WŁASNEJ OD 1.499 ZŁ NETTO/MIES. SPRAWDŹ Zadanie warsztatowe - wersja przed wprowadzeniem metody projektowania PWD
  52. 52. .pimp my mailing! 03
  53. 53. .wygląd i treść
 są bardzo ważne
  54. 54. .wygląd i treść są bardzo ważne Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design
  55. 55. .mobile first!
  56. 56. .mobile first! Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design 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:
  57. 57. .mobile first! Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design 300-350px 34 px Widoczne CTA RESPONSYWNOŚĆ SZEROKOŚĆ KLIKALNOŚĆ Najważniejsze właściwości mailingu mobilnego:
  58. 58. .szerokość mailingu
  59. 59. .szerokość mailingu Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design 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.
  60. 60. .waga mailingu
  61. 61. .waga mailingu Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design 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
  62. 62. .bezpieczne fonty
  63. 63. .bezpieczne fonty Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Jestem stary ale jary! Jestem stary ale jary! Jestem stary ale jary! Jestem stary ale jary! Jestem stary ale jary! Jestem stary ale jary! Jestem stary ale jary! Jestem stary ale jary! Jestem stary ale jary! Jestem stary ale jary! Arial Arial Narrow Tahoma Impact Arial Black Helvetica Times NR Georgia Courier New Comic Sans Poznajecie?
  64. 64. .bezpieczne fonty Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design 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 
 światło między literami jest małe + - Times New Roman „oczytany” font łatwo rozpoznawalny
 światło między literami jest małe + - Fonty warte uwagi podczas projektowania mailingów wg metody PWD:
  65. 65. .elementy mailingu
  66. 66. .elementy mailingu Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Logotyp Główny komunikat Call To Action Element kierujący uwagę Warstwa copy Biała przestrzeń Zdjęcia/grafiki
  67. 67. .logotyp
  68. 68. .elementy mailingu Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design 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:
  69. 69. .główny komunikat
  70. 70. .elementy mailingu Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design 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.
  71. 71. .elementy mailingu Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Hierarchizowanie treści Mocne punkty Prowadzenie usera przez kreację Zasada PIRAMIDY
  72. 72. .kierowanie uwagi
  73. 73. .elementy mailingu Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Kierowanie uwagi
  74. 74. .dobór zdjęć
  75. 75. .biała przestrzeń
  76. 76. .elementy mailingu Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design BIAŁE
 PRZESTRZENIE
  77. 77. .bestia CTA
 powraca!
  78. 78. .elementy mailingu Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design KUP TERAZKontrast/kolorystyka Warstwa copy Pole ochronne Kierunkowanie Rozmiar
  79. 79. .warstwa copy
  80. 80. .elementy mailingu Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Zaciekaw headlinem Pisz bezpośrednio FOMO Czytelna stopka
  81. 81. Efektowny Efektywny .podsumowanie Banner ładny czy skuteczny? - Warsztaty projektowania wg metody Performance Web Design Mailing wg PWD powinien być:
  82. 82. Dziękuję!
 dotpartners.pl

×