Kafelki(ang. Tiles)

Kafelki pozwalają na przedstawienie dłuższej listy elementów w atrakcyjny wizualnie sposób. Szczególnie dobrze sprawdzają się na stronach z komunikatami prasowymi czy blogach. Mogą występować razem ze stronicowaniem.

Struktura

tile
  1. Zdjęcie zależnie od wariantu

    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. W wersji małej komponent może występować bez zdjęcia.

  2. Kategoria

    Opisuje kategorię stron, do której należy podstrona (np. artykuł) reprezentowana przez kafelek. Rekomendowany limit słów to 2.

  3. Data

    Informuje o dacie dodania materiału.

  4. Tytuł

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

  5. Lead

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

  6. Link ze strzałką

    Odsyła użytkownika na inną podstronę. W zależności od tła jest to link biały lub czerwony (dla poziomu dostępności AA minimalny wymagany kontrast to 4.5:1). Towarzyszy mu zawsze strzałka.

Klikalny jest cały kafelek.

Warianty

  1. Kafelek duży

    Zajmuje zawsze 8 kolumn na desktopie. Zdjęcie może stanowić tło lub zajmować tylko część komponentu.

    tile
  2. Kafelek mały

    Zajmuje zawsze 4 kolumny na desktopie. Zdjęcie może stanowić tło, zajmować tylko część komponentu, lub może w ogóle nie występować. Pozostałe elementy znajdują się w górnej lub środkowej części komponentu z wyjątkiem linku, który zawsze jest umieszczony na dole.

    tile

Grupy

Kafelki występują w grupach. Dlatego bardzo istotne jest zachowanie zasad tworzenia układu strony. Rekomendowana minimalna liczba kafelków to 3.

Należy tak dobrać różne warianty kafelków, aby tworzyły one harmonijny, ale i ciekawy układ. Warto rozważyć wyróżnienie pierwszego kafelka większym rozmiarem. Można również dodać kafelek ze zdjęciem w tle, lub kafelek bez zdjęcia aby urozmaicić grupę.

tile

Zasady stosowania

tile

Duży kafelek umieszczony pierwszy

W przypadku grup kafelków, w których jeden jest większy, powinien on być umieszczony na początku.

tile

Przyciemnianie zdjęcia

Jeśli zdjęcie stanowi tło, jest ono przyciemniane w miejscu nakładania się tekstu za pomocą półprzezroczystego filtru. Filtr może zostać wyłączony, jeśli kontrast tekst-tło oraz link-tło jest odpowiedni (4.5:1 dla fontu poniżej 24px bez pogrubienia lub poniżej 18.5px z pogrubieniem; 3:1 dla większych fontów).

tile

Mały kafelek bez zdjęcia

Dopuszczalne jest użycia pojedynczego małego kafelka bez zdjęcia występującego w grupie min. 3 kafli.

tile

Zbyt długi tytuł

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

tile

Za mało kafelków

Rekomendowana minimalna liczba kafelków to 3.

tile

Zmienianie rozmiaru kafelków

Na desktopie duży kafelek powinien zajmować 8 kolumn, a mały 4.

tile

Pozostawianie pustej przestrzeni

Należy starać się tak dobrać kafelki, aby nie pozostawić pustej przestrzeni.

tile

Źle wykadrowane zdjęcie

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

tile

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.