Zajawka(ang. Teaser)

Struktura

1. Zdjęcie

   Zdjęcie ilustruje tekst. Nie może zawierać w sobie tekstu. W niektórych wariantach może występować jako tło całego komponentu.

2. Kategoria

   Opisuje kategorię stron, do której należy podstrona reprezentowana przez zajawkę. Rekomendowany limit słów to 2.

3. Tytuł

   Rekomendowany limit tekstu to 3 linijki na wszystkich rozdzielczościach.

4. Lead zależnie od wariantu

   Stanowi rozwinięcie tytułu. Rekomendowana długość tekstu to 2-5 linijek na wszystkich rozdzielczościach.

5. Przycisk lub link ze strzałką zależnie od wariantu

   Odsyła użytkownika na inną podstronę. W zajawce można umieścić jedynie jeden przycisk podstawowy. W małej zajawce przycisk jest zastąpiony czerwonym linkiem ze strzałką. Przyciski należy stosować zgodnie z obowiązującymi regułami.

Klikalne są przyciski, tytuły i zdjęcia.

Warianty

1. Zajawka na całą szerokość strony

   Zdjęcie stanowi tło dla pozostałych elementów, które mogą występować po prawej lub po lewej stronie. W ramach jednej podstrony nie należy używać więcej niż 1 zajawki na całą szerokość strony, ani używać jej w grupie z innymi zajawkami.



2. Duża zajawka

   Zdjęcie może stanowić tło lub zajmować tylko część komponentu. W obu przypadkach pozostałe elementy mogą występować po prawej lub po lewej stronie.



3. Mała zajawka

   Zdjęcie może stanowić tło lub zajmować tylko część komponentu. Pozostałe elementy znajdują się w górnej części komponentu. W tym wariancie nie występuje lead a zamiast przycisku jest czerwony link ze strzałką.

Grupy

Zajawki można układać na stronie w większe grupy łącząc różne rozmiary i wersje. Należy przestrzegać kilku zasad, żeby powstające kompozycje nie były zbyt monotonne czy zbyt chaotyczne:

1. Zmieniać naprzemiennie położenie tekstu na dużych teaserach
2. Używać naprzemiennie małych i dużych teaserów.
3. Używać opcji ze zdjęciem w tle w celu urozmaicenia układu. Optymalna relacja teaserów ze zdjęciem w tle do ogólnej liczby teaserów w układzie to 1 do 2.

Jeśli grupa jest złożona z dwóch zajawek, powinny one być tej samej wielkości.

Jeśli grupa jest złożona z trzech zajawek, to jedna z nich powinna być większa i występować jako pierwsza.

Jeśli grupa jest złożona z więcej niż trzech zajawek, można zastosować ten sam rozmiar do nich wszystkich lub jedną zajawkę wyróżnić większym rozmiarem.

Zasady stosowania

Zróżnicowany układ

Aby urozmaicić kontent strony, należy łączyć w obrębie grupy duże i małe zajawki. Wybrane zajawki mogą mieć zdjęcie w tle.

Pozostawienie pustego miejsca

Nie należy pozostawiać pustego miejsca w grupie zajawek. Puste miejsce może być uzupełnione poprzez wykorzystanie jednej dużej zajawki.

Przyciemnianie zdjęcia

Zdjęcie wykorzystane jako tło powinno zapewniać odpowiedni kontrast dla zachowania czytelności tekstu. Zdjęcie może być przyciemnione w całości lub w miejcu nakładania się tekstu. Kontrast tekstu do tła powinnien wynosić conajmniej 3:1.

Pojedyncza mała zajawka

Mała zajawka nie może występować samodzielnie. Należy wówczas zastąpić ją dużą zajawką lub dodać drugą małą zajawkę obok.

Zbyt dużo zajawek ze zdjęciem w tle

Na jedną zajawkę ze zdjęciem w tle powinny przypadać na stronie przynajmniej dwie zajawki bez zdjęcia w tle. Zajawki ze zdjęciem w tle nie powinny stanowić większości wszystkich występujących na stronie zajawek. Wyjątkiem jest grupa dwóch małych zajawek – obie mogą mieć zdjęcie w tle.

Źle wykadrowane zdjęcie

Zdjęcia powinny być kadrowane w ten sposób, by zawsze zawierały najważniejszą część kompozycji.

Zbyt dużo detali na zdjęciu w tle

Zbyt szczegółowe zdjęcie sprawia, że umieszczony na nim tekst staje się mało czytelny.