Spójna strona nie musi być wyszukana. Powinna za to powtarzać te same decyzje: jeden kolor dla najważniejszych działań, rozpoznawalne poziomy nagłówków i stały rytm odstępów. Gdy każdy element wygląda inaczej, odbiorca musi za każdym razem odgadywać, co jest ważne. Prosty system zmniejsza ten chaos i ułatwia późniejsze rozbudowywanie strony.
Zamiast poprawiać osobno każdy przycisk, akapit i sekcję, przygotuj krótką „kartę zasad”. Wystarczy jedna strona dokumentu z rolami kolorów, hierarchią tekstu i kilkoma wartościami odstępów. Potem zastosuj ją na jednej podstronie i dopiero po teście przenieś na resztę witryny.
1. Wpisz paletę do karty zasad
Jeśli masz już wybrane kolory, nie dobieraj ich ponownie dla każdej sekcji. Zapisz w karcie trzy podstawowe role: tło, tekst i akcent dla najważniejszego działania. Opcjonalne tło pomocnicze dodaj tylko wtedy, gdy rzeczywiście oddziela grupę treści.
Przy każdej próbce zanotuj nie tylko kod, lecz także zastosowanie. Zapis „#2457C5 — główny przycisk i link tekstowy” jest użyteczniejszy niż sam rząd kolorów. Jeżeli akcent oznacza główne działanie, nie wykorzystuj go równocześnie do przypadkowych ramek i ozdobników.
Dobór odcieni oraz sprawdzanie par tekst–tło opisuje osobny poradnik Jak dobrać kolory strony internetowej, żeby była spójna i czytelna. W tym systemie ważne jest, aby zatwierdzoną paletę połączyć z zasadami tekstu i odstępów, a nie tworzyć kolejną paletę dla każdej podstrony.
2. Zbuduj prostą hierarchię tekstu
Krój pisma nie naprawi niejasnej struktury. Najpierw zdecyduj, jakie poziomy tekstu występują na stronie:
- główny tytuł podstrony;
- nagłówki sekcji;
- tekst podstawowy;
- informacje pomocnicze, na przykład podpis zdjęcia.
Dla każdego poziomu zapisz krój, rozmiar, grubość i odstęp między wierszami. Nie potrzebujesz wielu fontów. Jeden dobrze dobrany krój może obsłużyć całą stronę dzięki różnym rozmiarom i grubościom. Jeśli łączysz dwa kroje, przypisz im stałe zadania, na przykład jeden do nagłówków, drugi do akapitów.
Unikaj różnic, które są prawie niewidoczne. Nagłówek powinien wyraźnie odróżniać się od akapitu, ale nie musi być ogromny. Z kolei tekst pomocniczy nie może być tak mały i blady, że trudno go przeczytać. Oceniaj prawdziwe zdania, a nie sam alfabet w próbniku — długi polski nagłówek szybciej pokaże, czy wybrany krój i rozmiar działają.
Przykład fikcyjny: lokalna pracownia ustala jeden bezszeryfowy krój dla całej strony. Tekst podstawowy ma 18 px i interlinię 28 px, nagłówki sekcji 28 px i 36 px, a główny tytuł 36 px i 44 px. To punkt startowy do sprawdzenia na telefonie i komputerze, nie uniwersalna recepta. Jeśli tytuł łamie się niezgrabnie albo akapit jest męczący, wartości trzeba skorygować.
3. Ogranicz odstępy do jednej skali
Przypadkowe marginesy sprawiają, że elementy wyglądają jak niepowiązane. Łatwiej zachować rytm, gdy korzystasz z krótkiej skali, na przykład: 8, 16, 24, 32 i 48 px. To również przykład, nie obowiązujący standard.
Mniejsze wartości stosuj wewnątrz jednego elementu: między etykietą a polem albo tytułem karty a opisem. Większe — między oddzielnymi grupami i sekcjami. Dzięki temu odstęp komunikuje relację: rzeczy blisko siebie należą do jednej całości, a większa przerwa rozpoczyna nowy fragment.
Rozróżnij trzy pojęcia:
- interlinia porządkuje wiersze w akapicie;
- odstęp elementu oddziela na przykład nagłówek od tekstu;
- margines sekcji tworzy oddech między większymi częściami strony.
Nie zwiększaj wszystkiego jednocześnie. Jeśli strona wydaje się ciasna, najpierw sprawdź marginesy sekcji i odstępy między grupami. Jeśli trudno czytać akapity, popraw interlinię i szerokość kolumny tekstu.
Pamiętaj też, że użytkownik może zmienić sposób wyświetlania tekstu. Kryterium WCAG dotyczące odstępów nie nakazuje ustawienia konkretnych wartości domyślnych. Wymaga jednak, aby po zwiększeniu odstępów między wierszami, akapitami, literami i słowami treść nie została ucięta ani nie nachodziła na inne elementy.
Przykład do dostosowania: gotowa karta zasad dla sekcji oferty
Firma sprzątająca pokazuje trzy usługi w kartach. Wcześniej każda karta miała inny kolor przycisku, nagłówki miały przypadkowe rozmiary, a odstęp pod opisem wynosił raz 12 px, raz 37 px. Zamiast poprawiać każdą kartę osobno, właściciel zapisuje jeden zestaw decyzji:
| Obszar | Decyzja | Zastosowanie |
|---|---|---|
| Kolory | jasne tło, ciemny tekst, jeden niebieski akcent | akcent tylko w głównych przyciskach; karty nie dostają osobnych kolorów |
| Tekst podstawowy | 18 px, interlinia 28 px | wszystkie opisy usług |
| Nagłówek karty | 28 px, interlinia 36 px, większa grubość tego samego kroju | nazwy trzech usług |
| Odstępy w karcie | 8 px między krótką etykietą a nazwą; 16 px między nazwą a opisem; 24 px przed przyciskiem | każda karta |
| Odstęp między grupami | 48 px | między zestawem kart a następną sekcją |
Główna usługa nie otrzymuje czwartego koloru. Wyróżnia ją etykieta „Najszerszy zakres” i pierwsza pozycja, dzięki czemu kolor akcentowy nadal oznacza działanie, a nie rangę oferty. Jeżeli na telefonie długi nagłówek zajmie zbyt wiele wierszy, najpierw skróć nazwę albo skoryguj poziom nagłówka w całym zestawie — nie tylko w jednej karcie.
Taka karta nie jest uniwersalnym standardem. To spójny punkt startowy do sprawdzenia na prawdziwej treści. Po teście można zmienić wartość, ale należy zmienić ją jako regułę dla danego poziomu, a nie jako wyjątek w przypadkowej karcie.
Sprawdź system na jednej podstronie
Wybierz podstronę zawierającą tytuł, akapity, przycisk, zdjęcie i kilka sekcji. Przeprowadź jedną kontrolę:
- zaznacz każdy użyty kolor i sprawdź, czy ma rolę zapisaną w karcie;
- porównaj wszystkie nagłówki oraz tekst podstawowy z ustalonymi poziomami;
- zmierz powtarzające się odstępy i usuń wartości, które nie mają osobnego zadania;
- sprawdź kontrast każdej pary tekst–tło;
- obejrzyj podstronę na telefonie i komputerze;
- zwiększ odstępy tekstu i upewnij się, że treść nie jest ucięta ani nie nachodzi na inne elementy.
Jeżeli problemy powtarzają się w kilku elementach, popraw regułę w karcie i ponów test. Jeżeli podstrona korzysta z zapisanych ról, poziomów i skali bez wyjątków, dopiero wtedy przenieś system na kolejne podstrony. Nie chodzi o rozbudowany brandbook, lecz o zestaw decyzji, do którego można wrócić przy każdej zmianie.
