Po co stronie siatka?
Siatka to zestaw prostych zasad określających, gdzie zaczyna się i kończy treść oraz jak układają się obok siebie jej części. Nie musi oznaczać widocznych linii ani jednakowych kafelków na każdej podstronie. Jej zadaniem jest sprawić, by nagłówki, tekst, zdjęcia i przyciski miały przewidywalne położenie. Dzięki temu osoba odwiedzająca stronę łatwiej rozpoznaje, co jest ważne i gdzie szukać kolejnej informacji.
Bez wspólnych zasad każda podstrona może wyglądać jak osobny projekt: na jednej tekst zaczyna się blisko krawędzi, na drugiej jest wąski, a na trzeciej przycisk znajduje się w przypadkowym miejscu. Takie różnice utrudniają przeglądanie nawet wtedy, gdy poszczególne elementy są estetyczne. Siatka porządkuje całość, ale nie odbiera swobody. Strona kontaktowa może mieć inny układ niż wpis na blogu, jeśli oba korzystają z tych samych reguł szerokości i odstępów.
Zacznij od szerokości i wspólnych krawędzi
Najpierw wyznacz obszar, w którym będzie pojawiać się główna treść. Na szerokim ekranie nie musi on zajmować całej dostępnej przestrzeni: zbyt długie wiersze bywają męczące w czytaniu. Ustal też marginesy po bokach, aby tekst nie dotykał krawędzi ekranu. Następnie wybierz jedną linię początku dla głównych nagłówków, akapitów i istotnych elementów na podstronach o podobnej budowie.
Nie wszystko trzeba wyrównywać do jednej krawędzi. Zdjęcie może zajmować większą szerokość niż tekst, a panel z krótką informacją może stać obok artykułu. Ważne, by takie odstępstwa były zamierzone i powtarzalne. Na stronie firmowej opisy usług mogą mieć wspólną szerokość, na blogu wpisy — stałą szerokość tekstu, a w katalogu karty — równe krawędzie i podobny układ danych. Są to przykłady zastosowania zasad, nie gotowe wzory odpowiednie dla każdej witryny.
Ustal rytm odstępów i elementów
Spójność zależy nie tylko od kolumn, lecz także od pustej przestrzeni. Wybierz niewielki zestaw odstępów i przypisz im zadania: mniejszy między nagłówkiem a związanym z nim akapitem, większy między osobnymi sekcjami. Jeśli dwie rzeczy tworzą grupę, powinny wyglądać na bliższe sobie niż elementy należące do różnych grup. Taka zasada pomaga również wtedy, gdy treść podstron ma różną długość.
Przyjrzyj się powtarzalnym częściom witryny: kartom wpisów, opisom usług, polom formularza i przyciskom. Ustal, czy ich tytuły, teksty i działania zaczynają się w podobnych miejscach. Nie wyrównuj jednak wszystkiego kosztem czytelności. Przyciski w kartach o różnej ilości tekstu nie muszą tworzyć idealnie prostej linii, jeśli wymagałoby to dużych, pustych pól. Lepiej zadbać o czytelną kolejność informacji i rozsądne odstępy niż o geometryczną równość za wszelką cenę.
Dopasuj układ do małych ekranów i różnych potrzeb
Siatka powinna się zmieniać wraz z dostępnym miejscem. Kilka kolumn kart może na telefonie przejść w jedną, a panel boczny znaleźć się pod główną treścią. Zachowaj wtedy logiczną kolejność: najważniejsza informacja powinna pozostać łatwa do znalezienia bez przeszukiwania ozdobnych bloków. Sprawdź też, czy tekst, formularze i przyciski nie wychodzą poza ekran oraz czy obok siebie nie stoją elementy zbyt ciasne do wygodnego użycia.
Przetestuj podstrony przy powiększeniu tekstu lub całej strony. Sztywno ustalone wysokości pól i kart mogą wtedy ucinać treść, nawet jeśli wyglądały poprawnie w pierwotnym widoku. Samo wyrównanie nie zastąpi dostępności: potrzebne są również czytelne nagłówki, odpowiedni kontrast oraz zrozumiałe nazwy linków i przycisków. Dobra siatka wspiera te rozwiązania, bo pozwala treści układać się bez utraty kolejności i znaczenia.
Jak sprawdzić spójność podstron
Wybierz kilka różnych widoków: stronę główną, typową podstronę z tekstem oraz widok z powtarzalnymi elementami, na przykład listę wpisów lub kart katalogu. Otwórz je obok siebie i porównaj początek treści, szerokość akapitów, odstępy między sekcjami oraz położenie podobnych przycisków. Zapisz zauważone różnice i popraw najpierw te, które utrudniają czytanie lub znalezienie informacji.
Na koniec sformułuj krótkie zasady do wykorzystania przy kolejnych podstronach: jaka jest szerokość głównej treści, kiedy stosujesz kolumny, jakie odstępy oddzielają sekcje i jak układ zachowuje się na telefonie. Nie musi to być rozbudowana dokumentacja. Kilka konsekwentnie stosowanych decyzji ułatwi rozwijanie witryny i pomoże zachować spójny wygląd, gdy pojawią się nowe treści.
