Siatka projektowa: dlaczego dobre strony wyglądają spokojnie

Kiedy strona wygląda na chaotyczną, zwykle winne nie są kolory ani zdjęcia, tylko to, że elementy nie stoją względem siebie w żadnym porządku. Nagłówek zaczyna się kilka pikseli dalej niż tekst pod nim, każda sekcja ma inne odstępy, a karty w jednym rzędzie mają różne szerokości. Pojedynczo to drobiazgi. Razem sprawiają, że oko nie wie, gdzie odpocząć.

Siatka projektowa to zestaw niewidocznych linii, do których wyrównuje się wszystko na stronie. Nie jest ograniczeniem kreatywności. Jest powodem, dla którego odstępstwa od niej, jak duże zdjęcie na całą szerokość ekranu, robią wrażenie.

Z czego składa się siatka

• Kolumny. Najczęściej 12 na komputerze, bo dwunastkę można podzielić na 2, 3, 4 i 6. Treść zajmuje wybraną liczbę kolumn, a nie dowolną szerokość w pikselach.
• Odstępy między kolumnami, zawsze te same.
• Marginesy, czyli odległość treści od krawędzi ekranu.
• Skala odstępów w pionie. Zamiast dowolnych wartości kilka stałych, zwykle wielokrotności 4 albo 8 pikseli. Dzięki temu sekcje mają rytm.

Siatka na telefonie i komputerze

Jedna siatka nie pasuje do wszystkich ekranów. Popularna konwencja to 4 kolumny na telefonie, 8 na tablecie i 12 na komputerze. Karta, która na komputerze zajmuje 4 z 12 kolumn, czyli trzecią część szerokości, na telefonie zajmuje wszystkie 4 i staje na pełną szerokość.

Ważne, żeby marginesy na telefonie były stałe na całej stronie. Jeśli jedna sekcja dotyka krawędzi ekranu, a druga ma 24 piksele odstępu, strona od razu wygląda na złożoną z kawałków.

Długość wiersza

Siatka decyduje też o tym, jak długie są wiersze tekstu. Klasyczne zalecenia typograficzne mówią o 45–75 znakach w wierszu. Dłuższe wiersze męczą, bo oko gubi się, przeskakując do następnego. Dlatego tekst artykułu nie powinien rozciągać się na całą szerokość dużego monitora, nawet jeśli zdjęcia obok to robią.

Odstępy są ważniejsze, niż się wydaje

Elementy, które stoją blisko siebie, odbieramy jako powiązane. Jeśli odstęp między nagłówkiem a tekstem jest taki sam jak między tekstem a następnym nagłówkiem, czytelnik nie wie, do czego należy nagłówek. Prosta zasada: odstęp wewnątrz grupy powinien być wyraźnie mniejszy niż odstęp między grupami.

Stała skala odstępów pomaga też w pracy zespołu. Projektant i programista nie dyskutują o 22 czy 24 pikselach, tylko wybierają kolejny stopień skali.

Siatka a design system

Siatka jest fundamentem design systemu. Komponenty, takie jak karty, formularze czy sekcje z tekstem i zdjęciem, projektuje się tak, żeby zajmowały pełne kolumny i korzystały ze skali odstępów. Wtedy nowa podstrona składa się z gotowych elementów, które pasują do siebie bez poprawiania. To jeden z powodów, dla których strona oparta na systemie jest tańsza w rozwoju.

Jak sprawdzić swoją stronę w pięć minut

1. Lewe krawędzie. Przyłóż linijkę do ekranu albo narysuj pionową linię w dowolnym programie. Czy nagłówki, tekst i przyciski zaczynają się w tym samym miejscu?
2. Liczba różnych odstępów. Policz, ile różnych odległości między sekcjami widzisz. Trzy albo cztery to porządek, dziesięć to przypadek.
3. Długość wiersza. Otwórz artykuł na dużym monitorze. Jeśli wiersz ma ponad sto znaków, tekst jest za szeroki.
4. Telefon. Przewiń stronę i patrz tylko na marginesy po bokach. Czy są wszędzie takie same?
5. Karty w rzędzie. Czy mają te same szerokości i czy ich zawartość zaczyna się na tej samej wysokości?

Porządek w siatce to połowa wrażenia „profesjonalnej” strony. Druga połowa to spójne kolory i kontrast, o których pisaliśmy w artykule o kolorach marki. Jak łączymy jedno z drugim w projektach, przeczytasz na stronie stron internetowych.