Szukaj

5 dobrych praktyk przy tworzeniu Screeningu

Otacza stronę od góry i po bokach. ⬇

Dobrze zrobiony praktycznie nie da się przeoczyć 👀


Screening składa się z 2 elementów:

1️⃣ tapety, czyli grafiki umieszczonej w tle strony,

2️⃣ baneru, który wyświetlany jest nad górną częścią tapety.



Dobrze zrobiony, czyli jaki ❓


1 z 5 zasad, które warto wziąć pod uwagę:

🟣 Tapeta i baner powinny tworzyć spójną całość


Tak jak parę butów tworzy but lewy i prawy, 👟👟

tak tapeta i baner tworzą jedną reklamę → Screening


Te 2 elementy powinny łączyć się ze sobą, tworząc spójną całość.

Wyglądać jak 1 reklama, a nie 2 oddzielne.



Jak to osiągnąć ❓


Screening najlepiej projektować w całości, jako jedną dużą kreację.

Idealnie, jeśli granica pomiędzy banerem, a tapetą będzie niezauważalna.


👉 Najłatwiej to osiągnąć, jeśli baner jest przezroczysty.

Umieszczamy na nim elementy, np. logo, teksty, CTA, natomiast jego tłem będzie tapeta.



Co jeśli „nie da się”, bo taki mamy k… key visual❓


Zazwyczaj się da 😇

A jeśli nie, to wyjątkowo można zastosować ramkę wokół baneru lub inny element nadający spójności.






Ponad 20%.

Tylu użytkowników w Polsce ma szerokość ekranu komputera pomiędzy 1280 a 1366 px.

Co ma ta wiedza do Screeningu ❓


Wskazuje 2-gą zasadę, którą warto wziąć pod uwagę:

🟣 Kluczowe elementy powinny znajdować się nad serwisem, max. do 1240 pikseli szerokości



Kluczowe, czyli jakie


▶ Te, które powinny być widoczne zawsze w całości.

▶ Bez których kreacja nie będzie mieć sensu lub dużo utraci.


Są to np.:

◻ CTA

◻ logotypy

◻ teksty i legale

◻ packshoty, twarze



Czemu NAD serwisem


To jaki obszar Screeningu będzie widoczny, zależy od ekranu.

Część użytkowników w ogóle nie zobaczy boków tapety.


Zobaczą tylko obszar nad serwisem (baner i to, co jest wokół niego).

Jest to więc jedyna bezpieczna strefa Screeningu.







Czemu do 1240 px szerokości


Najmniejsza szerokość ekranu jaką warto wziąć pod uwagę to 1280 px.


Od tego najlepiej odjąć ~40 pikseli na:

◻ pasek do scrollowania,

◻ jakikolwiek margines, aby elementy nie były przytulone do ekranu.



A co z większymi ekranami

Tam kreacja będzie wyglądała ubogo.


Są na to 2 rozwiązania


1️⃣ Kilka wersji tapety.


Niektóre serwisy umożliwiają przygotowanie kilku wersji tapety.

Dzięki temu możemy zaopiekować użytkowników z małymi ekranami, nie robiąc tego kosztem uboższej kreacji dla większych ekranów.


2️⃣ Wypełnienie tła mniej istotnymi elementami.


Pozostałą część tapety można wypełnić elementami, które będą tylko dopełnieniem.

Nic się nie stanie, jeśli część użytkowników ich nie zobaczy.



Spójrz na przykłady

✅ Milenium: elementy po bokach tapety jako dodatek.

❌ FIFA23: przycięty logotyp PS5 i twarz piłkarza.








Tak więc:

👉 najbezpieczniejsza strefa Screeningu to obszar nad serwisem,

👉 kluczowe elementy najlepiej umieścić do szerokości 1240 pikseli,

👉 resztę tapety dopełnić elementami dodatkowymi lub przygotować kilka wersji.

60-80%


Tylu odbiorców w Polsce zobaczy boki Screeningu. (w zależności od portalu i szerokości ekranu)


Sporo.

Warto, je dobrze wykorzystać 😊


3. zasada, którą warto wziąć pod uwagę:

🟣 Przygotuj odpowiednio boki tapety


Czyli jak


Screeningu nie da się przygotować uniwersalnie.

Musi być dostosowany do danego portalu.



1️⃣ NA SZEROKOŚĆ


Sprawdzamy na danym portalu ile przestrzeni po bokach zostaje na różnych szerokościach ekranu: 1280, 1366, 1536, 1600 i 1920 px.


Przykładowo:

◻ Na Filmwebie już od szerokości 1366 px da się zagospodarować boki

◻ Na Onecie dopiero od 1600 px


Na mniejszych szerokościach będą to tylko wąskie paski, na których niewiele się zmieści.



Opcja 1 to kompromis.


Zaakceptowanie, że:

◻ część odbiorców zobaczy elementy po bokach w całości,

◻ część nie zobaczy ich w ogóle,

◻ a część zobaczy je przycięte.



✅ Zobacz przykład Millennium





Na szerokościach:

◻ 1280-1400 px smartfona i CTA po bokach nie widać w ogóle,

◻ 1564-1660 px są przycięte,

◻ 1920+ px widać je w całości.



Jak to zrobić najlepiej


Dostosować indywidualnie w zależności od portalu i elementów, jakie umieszczamy po bokach.



▶ Opcja 2 to pewność.


Na bokach tapety nie umieszczamy elementów, które nie powinny być przycięte.

Jest tylko tło, które wygląda OK na każdej szerokości.


✅ Zobacz przykład ING








Co lepsze


Jeśli dodatkowe elementy sprawią, że kreacja może być skuteczniejsza, to warto je dodać nawet kosztem przycięcia dla części odbiorców.


Jeśli niewiele wniosą, to nie.



2️⃣ NA WYSOKOŚĆ


Tapeta może być osadzona na portalu na 2 sposoby:


Scrollowalna


Podczas scrollowania tapeta przesuwa się w dół razem z portalem.

Jest to bezpieczna opcja i najczęściej spotykana.


Nie musimy się martwić, że na średnich i małych ekranach dolna część tapety będzie niewidoczna.


Wadą jest to, że jeśli użytkownik zescrolluje w dół, to nie będzie już widział naszej reklamy.



Fixed


Podczas scrollowania portal przesuwa się w dół, ale tapeta tkwi w miejscu.

W pewnym sensie jest to zaleta, bo boki tapety będą cały czas widoczne.


Jednak są też wady:


◻ po zescrollowaniu w dół, baner nie będzie widoczny. Trzeba więc zadbać, aby boki tapety same w sobie niosły sensowny komunikat.


◻ widać tylko tyle boków tapety, na ile pozwala wysokość ekranu.

Jeśli elementy na bokach tapety nie będą osadzone wystarczająco wysoko, to zostaną obcięte od dołu.



Co lepsze


👉 Wersja scrollowalna lepiej sprawdzi się przy standardowym Screeningu (z banerem). Kreacja albo będzie widoczna w całości, albo w ogóle.


👉 Wersja Fixed sprawdzi się w wersji bez banera (widoczne same boki tapety).

Obszar po bokach będzie musiał nieść kluczowy komunikat i dobrze, jeśli będzie widoczny cały czas.



Mamy tendencje do dostrzegania ruchu znacznie bardziej, niż statycznych obiektów. ⬇

Tak więc warto Screening rozruszać 😀 💃🕺



4. zasada, którą warto wziąć pod uwagę:

🟣 Wykorzystaj animacje HTML5



Można spotkać 2 rodzaje Screeningów animowanych:


1️⃣ Animowany baner HTML, statyczna tapeta.


Jest to najczęściej spotykane połączenie.


Jeśli baner jest statyczny, sprawa jest prosta.

Zazwyczaj można zignorować granice baneru i projektować dostępny obszar całościowo.


👉 Pomoże to zachować spójność całego Screeningu oraz sprawi, że efektywniej wykorzystamy dostępną przestrzeń.



W wypadku baneru animowanego HTML5 jest podobnie.


🟣 Jest jednak ważny wyjątek 🟣

Na banerze HTML można umieścić animacje, wideo i interakcje.


👉 Wszystkie te elementy muszą znaleźć się w granicach baneru.

Trzeba to założyć na etapie projektowania. 👈


Inaczej Screeningu nie da się zaanimować zgodnie z pomysłem.

Zmiany w kreacji i opóźnienia murowane 😉



2️⃣ Animowany cały Screening (baner i tapeta)


Dostępny tylko na niektórych portalach, np. Filmweb.


W tej wersji chciałoby się powiedzieć „hulaj dusza” 😉

I trochę tak jest - cały obszar Screeningu może być dowolnie animowany jako jedna ogromna kreacja.


🟣 Ale nie można przesadzić 🟣


Tak jak w standardowym Screeningu, główną część animacji lepiej skupić na banerze i jego otoczeniu.


Dlaczego ❓


👉 Nie wszyscy zobaczą boki tapety (60-80%).

👉 Chodzi o przykucie uwagi, a nie wywołanie irytacji odbiorcy.


Tapeta zajmuje spory obszar.

Najlepiej umieścić tam subtelną lub krótką animację, jako uzupełnienie animacji banerowej.





Podsumowując 👇



1️⃣ Tapeta i baner powinny tworzyć spójną całość


Screening składa się z tapety i baneru, ale to jedna reklama.

Jak lewy i prawy but.


👉 Najlepiej projektować go całościowo, jako jedną dużą kreację.


Dzięki temu:

◻ będzie wyglądać lepiej,

◻ efektywniej zagospodarujemy dostępną przestrzeń.



2️⃣ Kluczowe elementy powinny znajdować się nad serwisem, max. do 1240 pikseli szerokości


20-40%

Tylu odbiorców NIE zobaczy boków tapety.


Jedynym bezpiecznym obszarem jest baner i przestrzeń wokół niego.

Ale tylko do 1240 pikseli szerokości.


👉 To tutaj najlepiej umieścić kluczowe elementy.



3️⃣ Przygotuj odpowiednio boki tapety


60-80% odbiorców zobaczy boki tapety.

Dopiero z nimi daje się odczuć pełną moc Screeningu.


Ze względu na obszar jaki zajmują, działają jak magnes przyciągając wzrok odbiorców. 🧲


👉 Boki tapety to miejsce na elementy dodatkowe.

Takie bez których reklama nie utraci tego, co chcemy przekazać odbiorcom.



4️⃣ Wykorzystaj animacje HTML5


Screening sam w sobie przykuwa wzrok bardziej, niż klasyczny baner.

Zajmuje ogromną przestrzeń, stąd ciężko go przeoczyć.


A dobrym rzeczom warto pomagać. 😉


👉 Screening zawierający animacje HTML przyciągnie i zatrzyma wzrok jeszcze bardziej.


Standardowo animowany może być sam baner.

Niektóre portale pozwalają zaanimować cały obszar, czyli także tapetę.



5️⃣ Nie zapomnij o Cappingu


Upewnij się, czy potrzebny jest dodatkowy baner ze względu na capping.

Jeśli ustalisz to na początku, uchronisz się przed dorabianiem go w pośpiechu.




Nie chcesz się tym przejmować ❓ W 1000.digital przygotujemy na tip-top nie tylko Screening. Zrzucimy z Twojej głowy przygotowanie assetów do całego media planu. 😊