KOMPOZYCJA / LEKCJA 02

Hierarchia wizualna: jak kierować wzrokiem odbiorcy

Otwierasz projekt i nie wiesz, na co spojrzeć najpierw. Tytuł, zdjęcie, przycisk, opis — wszystko krzyczy naraz. To nie przypadek, tylko brak hierarchii: zasady, która decyduje, co odbiorca zobaczy jako pierwsze, a co dopiero potem.

Hierarchia wizualna to sposób, w jaki układasz elementy projektu tak, żeby prowadzić spojrzenie odbiorcy w konkretnej, zamierzonej kolejności. Dobry projekt nie zostawia tego przypadkowi — mówi wzrokowi, gdzie ma spojrzeć najpierw, gdzie potem, a co jest tylko dodatkiem.

Dlaczego mózg potrzebuje kolejności

Ludzki wzrok nie skanuje strony równomiernie — szuka punktu zaczepienia, najczęściej największego, najjaśniejszego albo najbardziej kontrastowego elementu. Jeśli projekt nie podpowiada, co jest tym punktem, oko błądzi po całości bez konkretnego celu, a odbiorca traci zainteresowanie szybciej, niż zdąży przeczytać treść. Brak hierarchii to jeden z powodów, dla których niektóre posty, prezentacje czy ulotki „nie działają”, mimo że pojedyncze elementy są zaprojektowane poprawnie.

Trzy podstawowe narzędzia budowania hierarchii

W praktyce hierarchię buduje się głównie trzema środkami — często stosowanymi razem:

• Rozmiar — większe elementy przyciągają uwagę pierwsze. To najprostsze i najbardziej intuicyjne narzędzie: nagłówek większy niż treść, główne zdjęcie większe niż miniatury poboczne.
• Kontrast — element wyróżniający się kolorem, jasnością albo grubością czcionki na tle reszty naturalnie przyciąga spojrzenie, nawet jeśli nie jest największy.
• Pozycja i odstęp — w kulturach czytających od lewej do prawej wzrok naturalnie zaczyna od górnego lewego rogu. Element umieszczony tam, albo oddzielony większym marginesem od reszty, automatycznie zyskuje priorytet.

Hierarchia to nie tylko tekst

Najczęściej mówi się o hierarchii w kontekście typografii — tytuł, podtytuł, treść — ale dotyczy każdego elementu projektu, także zdjęć, ikon i przycisków. W dobrze zaprojektowanej ulotce oko powinno trafić najpierw na główny nagłówek albo zdjęcie, potem na krótki opis, na końcu na przycisk akcji. Jeśli przycisk „Kup teraz” jest tak samo duży i kontrastowy jak logo w rogu, obie rzeczy konkurują o uwagę zamiast się uzupełniać.

Hierarchia buduje się na wyrównaniu

Hierarchia nie działa w oderwaniu od innych zasad kompozycji — potrzebuje solidnego wyrównania jako punktu wyjścia. Element może być duży i kontrastowy, ale jeśli jest źle wyrównany względem reszty, cały efekt hierarchii się rozmywa. Dlatego w module „Kompozycja” hierarchia jest drugą lekcją, zaraz po wyrównaniu — to naturalna kolejność, w jakiej te zasady się na siebie nakładają.

Warto przeczytać też o wyrównaniu w projektowaniu, hierarchii w CV i hierarchii typograficznej — te zasady wzajemnie się uzupełniają.