Siatka strony www -- (ang. Grid) w projektowaniu graficznym to inaczej dwuwymiarowa struktura składająca się z szeregu prostych (pionowych, poziomych i kątowych) będących liniami pomocniczymi, używanymi do rozkładu treści. Mówiąc po ludzku, siatka służy jako szkielet na którym projektant może organizować treść i elementy graficzne strony.

W projektowaniu stron responsywnych, siatka nabiera niezwykle dużego znaczenia. Tutaj, projektując ją trzeba dodatkowo pamiętać o różnego rodzaju wielkościach ekranów, na których strona będzie wyświetlana.

Od czego zacząć projektując siatkę strony www?

Rozpoczynając projektowanie siatki dla stron i serwisów internetowych zaczynamy od spotkania z klientem. O ile ogólne założenia siatek są stałe dla wszystkich stron www, o tyle dobrze zaprojektowanej siatki nie da się poprawnie zaprojektować bez ustalenia kilku rzeczy.

Przede wszystkim:

  • Ustal z klientem zakres funkcjonalności, jakie będzie na stronie wykorzystywał?
  • Ustal z klientem zakres informacji i sposób komunikacji na stronie
  • Ustal z klientem strukturę menu, ze szczególnym uwzględnieniem jego głębokości

Pisząc „Ustal z klientem" mam na myśli konieczność pomocy klientowi i wyjaśnienia mu dokładnie wszystkich kwestii. Stan, gdzie klient sam nie do końca zna swoje potrzeby względem strony internetowej, jest całkowicie naturalny i nie należy się temu dziwić.

Projektując klientowi siatkę strony www, uwzględnij jego indywidualne potrzeby i wymagania. Przemyślana i dobrze przygotowana siatka srony jest jak dobrze skrojony i dopasowany garnitur uszyty na miarę.

Jeśli całkowicie nie wiesz od czego zacząć, zacznij od podstaw. Dla wszystkich zainteresowanych, polecamy: Grids are good

Gdy już ustalimy potrzeby klienta...

Mając ustalony zakres rzeczy, jakie będą występować na stronie można dopiero przystąpić do analizy i przygotowania siatki strony. Jak już wspomniałem, ogólne zasady tworzenia siatek są niezmienne dla każdego interfejsu. W przypadku stron i serwisów internetowych należy jednak zwrócić uwagę na indywidualne elementy personalizujące stronę i jej wygląd. Zakres prezentowanej informacji, liczba elementów, czy wreszcie sposób komunikacji, to wszystko wpływa na wygląd strony. Dobrze zaprojektowana siatka będzie pomocna dla całego zespołu, podczas tworzenia strony jako całości.

Czego unikać?

Podczas projektowania siatki strony warto pamiętać, aby unikać rzeczy, które później mogą być problematyczne.

  • Elementów „wystających poza siatkę strony". Na dużych ekranach wyglądają dobrze, przy mniejszych rozdzielczościach, zwłaszcza przy rozdzielczościach granicznych stają się kłopotliwe.
  • Elementów z ustawionym pozycjonowaniem „fixed". Spora część przeglądarek mobilnych ma problemy z poprawnym wyświetleniem tak pozycjonowanych elementów.
  • Elementów graficznych (obrazków), mniejszych niż najmniejsze „oczko" siatki. Reguła ta nie dotyczy jednak ikon i elementów dopełniających bloki tekstu do oczek siatki.

Przykład wykorzystania siatki

Poniżej prezentujemy przykłady rozkładu treści z wykorzystaniem siatki i bez niej, oraz wygląd siatki jaka została przewidziana dla przykładowej strony.