Układ

Układ (ang. layout) to sposób w jaki na stronie rozmieszczone są elementy treści: tekst, zdjęcia, ilustracje, tabele itd. Układ stron ORLEN oparty jest na siatce dwunastokolumnowej. W tej sekcji opisane są zasady stosowania siatki przy planowaniu rozmieszczenia treści na stronach internetowych.

Kolumna tekstu

Tekst jest podstawowym elementem treści i od sposobu jego rozmieszczenia na stronie zależy jego czytelność. Co do zasady kolumna tekstu na stronach ORLEN zajmować powinna 2/3 szerokości strony (8 z 12 kolumn siatki). Kolumna tekstu umieszczana jest przy lewym marginesie strony, ale w celu urozmaicenia układu może być umieszczona również przy prawym marginesie.

Podział tekstu na kolumny

Mniejsze bloki tekstu o podobnej długości można umieszczać w równych kolumnach obok siebie. Dopuszczalny jest podział na 2, 3 i 4 kolumny. Należy pamiętać o odpowiednim doborze rozmiaru tekstu przy wyborze szerokości kolumny. Na wersji dektop dla standardowego tekstu obowiązuje rozmiar 18px na interlinii 28px (Body Text). Dla kolumny tekstu węższej niż 4 kolumny siatki zalecane jest użycie rozmiaru 16px na interlinii 24px (Small Text).

Tekst ze zdjęciem

Łącząc tekst ze zdjęciem należy zadbać o odpowiednie ustawienie kompozycji na siatce. Na stronach ORLEN przyjęta jest zasada, że tekst jest oddzielony od zdjęcia lub filmu szerokością jednej kolumny siatki. Całość układu powinna się zamykać w dwunastu kolumnach siatki. Jeżeli zdjęcie zajmuje połowę szerokośći strony 
(6 kolumn), to tekst umieszczony obok powinien zajmować 5 kolumn, a 1 kolumna pomiędzy zdjęciem i tekstem powinna pozostać pusta.

Dopuszczalne jest użycie następujących kombinacji:

  • - tekst na 4 kolumnach, 1 kolumna odstępu, zdjęcie na 7 kolumnach
  • - tekst na 5 kolumnach, 1 kolumna odstępu, zdjęcie na 6 kolumnach
  • - tekst na 6 kolumnach, 1 kolumna odstępu, zdjęcie na 5 kolumnach

Dopuszczalne jest odbicie lustrzane kompozycji:

  • - zdjęcie na 7 kolumnach, 1 kolumna odstępu, tekst na 4 kolumnach
  • - zdjęcie na 6 kolumnach, 1 kolumna odstępu, tekst na 5 kolumnach
  • - zdjęcie na 5 kolumnach, 1 kolumna odstępu, tekst na 6 kolumnach

Układ naprzemienny

Z połączeń zdjęcia i bloków tekstu może powstać układ naprzemienny. W ramach jednego układu naprzemiennego nie należy stosować różnych formatów zdjęć i różnych proporcji szerokości. Układ naprzemienny można zaczynać od zdjęcia lub kolumny tekstu. Zbyt długie sekwencje układu naprzemiennego nie są wskazane – optymalna liczba sekcji w ramach układu mieści się w granicach od 2 do 5.

Nawigacja boczna

Nawigacja boczna stosowana jest w przypadku grupy stron połączonych ze sobą tematycznie i zawierających duże ilości treśći tekstowej. W przypadku zastosowania nawigacji bocznej strona jest podzielona na dwa obszary: obszar nawigacji (3 kolumny siatki i 1 kolumna odstępu) oraz obszar treści (8 kolumn siatki). W obszarze treśći nie należy wykorzystywać komponentów przeznaczonych na całą szerokość siatki. Kolumna tekstu powinna zajmować całą szerokość obszaru treści (8 kolumn podstawowej siatki).

Ograniczenia

Nie należy rozciągać tekstu na całą szerokość strony

Tekst umieszczony w zbyt szerokiej kolumnie staje się nieczytelny

Nie należy dzielić tekstu na nierówne kolumny

Kolumny tekstu umieszczone obok siebie powinny mnieć tą samą szerokość a długość tekstu wewnątrz kolumn powinna być zbliżona.

Nie należy wprowadzać innych szerokości dla standardowej kolumny tekstu niż 8 kolumn ani zmieniać jej umiejscowienia na siatce

Standardowa kolumna tekstu powinna zajmować 8 kolumn siatki na dużych ekranach. Powinna być umieszczona przy lewym lub prawym marginesie.

Nie należy umieszczać zbyt dużej ilości treści obok siebie w ramach układu

Siatka na 12 kolumn umożliwia ułożenie obok siebie dużej ilości treści tekstowej i materiałów wizualnych. Dla lepszej czytelności nie należy wypełniać całej dostępnej przestrzeni treścią. Wolna przestrzeń stanowi integralną część układu.