Czujesz, że z Twoim projektem jest coś nie tak, ale nie potrafisz zidentyfikować, gdzie popełniłaś błąd? Chcesz mieć pewność, że Twoje grafiki na Social Media są tak skuteczne, jak to tylko możliwe? Przybywam z pomocą, a dokładniej — strategicznymi wskazówkami co zrobić, by odbiorca nie mógł oderwać wzroku od Twoich projektów.
Hierarchia wizualna - co to takiego?
Hierarchia wizualna to metoda porządkowania elementów projektu według ich ważności z wykorzystaniem między innymi kolorów, kontrastu, typografii. Dzięki niej jesteśmy w stanie podkreślić na projekcie istotne elementy i uporządkować jego zawartość, ułatwiając użytkownikowi czytanie przekazu, który zawiera.
Dlaczego hierarchia wizualna jest ważna?
Grafika powinna być stworzona w taki sposób, by odbiorca nie musiał zastanawiać się gdzie ma znaleźć poszczególne informacje. Przy dobrze zrobionym projekcie wzrok odbiorcy powinien przesuwać się po każdy elemencie w takiej kolejności, w jakiej powinien go zobaczyć. Bez odpowiednio zbudowanej hierarchii wizualnej odbiorca będzie czuł się zagubiony i przytłoczony, a w efekcie — może niczego nie przyswoić i zwyczajnie pominąć męczącą go grafikę.
Eyetracking - czyli w jaki sposób wzrok przesuwa się po projektach?
W przypadku większości kultur czytamy zaczynając od góry i kierując się w dół, i od lewej do prawej. Odczytywanie wizualnych informacji funkcjonuje w podobny sposób. A dzięki technologii śledzenia wzorku — eyetrackingowi — jesteśmy w stanie prześledzić wzorce przetwarzania przez nas informacji wizualnych. Poniżej znajdziesz dwa główne wzorce, które występują najczęściej.
Schemat F
Ten schemat pojawia się najczęściej w przypadku projektów z dużą ilością tekstu. Jak się pewnie już domyślasz — oczy przesuwają się po grafice w kształcie litery F, zaczynając w lewym górnym rogu, przesuwając się poziomo do prawego. Następnie przesuwamy wzrokiem pionowo w dół w poszukiwaniu kolejnych nagłówków lub podtytułów, aby następnie znów przesunąć wzrok w poziomie w prawo.
Schemat Z
Jeśli na grafice znajduje się mniej tekstu — wzrok podąża po niej w kształcie litery Z. Zaczynamy od lewego górnego rogu, przesuwając wzrokiem poziomo w prawo, następnie spoglądamy po przekątnej w dolny lewy róg, a na końcu przesuwamy wzrok poziomo do prawego dolnego rogu.
Schematy są szeroko wykorzystywane w marketingu, informatyce czy psychologii. Wiedza o nich może być bardzo przydatna również w przypadku projektowania grafik. Stanowią dobry początek i wskazówkę do tego, w jakich miejscach umieścić najważniejsze elementy projektu.
Hierarchia wizualna - od czego zacząć?
Głównym zadaniem zbalansowanej hierarchii wizualnej jest pomoc Twojemu odbiorcy w nawigacji po projekcie i znalezieniu na nim najważniejszych informacji.
Poniżej znajdziesz kilka najważniejszych technik, które pomogą Ci stworzyć bardziej przejrzyste projekty.
rozmiar
Jednym z najskuteczniejszych sposobów na nadanie wizualnego ciężaru elementom projektu jest zadbanie o ich odpowiedni rozmiar i skalę w stosunku do pozostałych. Większe elementy szybciej przyciągają nasz wzrok, mają silniejszy przekaz i większy priorytet. Dla naszego mózgu mniejsze elementy pełnią drugorzędne znaczenie i znajdują się niżej w hierarchii.
Mówiąc o rozmiarze muszę również wspomnieć o skali. Skala to wielkość jednego elementu w stosunku do drugiego. Obiekt na projekcie nie posiada skali, dopóki nie możemy go porównać z innym. Dzięki odpowiedniemu zastosowaniu skali możemy tworzyć równowagę w projekcie i pozwolić odbiorcy skupić się na dominujących elementach.
Jak w przypadku każdej z zasad projektowania — umiar i równowaga są kluczowe. Zbyt duże elementy mogą przytłoczyć projekt, a zbyt małe elementy — sprawić, że będzie trudny w odbiorze.
Kontrast i kolory - czyli jak przyciągnąć uwagę odbiorcy
Nic nie przyciąga tak naszej uwagi jak dobrze wykorzystane kolory. Nie oznacza to, że powinniśmy zalewać projekty wszystkimi kolorami tęczy, ale dobierać je w celowy sposób. Ale jak odpowiednio dobierać kolory?
Temperatura
Wyróżniamy kolory ciepłe (np. pomarańczowy, żółty, czerwony), chłodne (np. zielony i niebieski) i neutralne (np. biały, szary, czarny). Do przyciągnięcia uwagi odbiorcy możemy mieszać kontrastujące kolory o różnej temperaturze. Drugą opcją jest użycie kolorów o podobnej temperaturze barwowej, co powoduje, że projekt wygląda bardziej spójnie.
Kolejną ważną funkcją temperatury jest to, że cieplejsze kolory użyte na ciemniejszym tle wysuwają elementy projektu na pierwszy plan. Chłodne kolory na ciemnym tle zwykle “oddalają” od nas elementy. Odwrotnie wygląda to na jasnym tle – chłodne kolory są dla nas wizualnie bliższe, a ciepłe dalsze. Dzięki mieszaniu ciepłych i chłodnych kolorów możemy tworzyć głębię, podobnie jak za pomocą perspektywy na ilustracji.
Nasycenie
Najjaśniejszy i “najczystszy” kolor to taki, który ma 100% nasycenia. Zmniejszając nasycenie powodujemy, że kolor jest bardziej szary. Aby tworzyć miejsca o wysokim lub niskim kontraście możemy stosować jasne lub stonowane kolory – razem lub oddzielnie.
Jasne kolory zwykle przyciągają większą uwagę, niż ciemniejsze – pojedyncze zdanie wyróżnione jasnym, nasyconym odcieniem automatycznie przyciąga uwagę odbiorcy.
Wartość
Wartość to jasność / ciemność koloru. By uzyskać wyższy kontrast zestawiamy kolory o dużej różnicy w wartości. Podobnie jak w przypadku temperatury – kolory o podobnej wartości sprawiają, że projekt jest bardziej zrównoważony.
Schematy kolorystyczne
Wzajemne relacje kolorów i ich kombinacje nazywane są schematami kolorystycznymi. O schematach pisałam już wcześniej, w tym wpisie. Wybór palety kolorów wpływa na to, jak projekt jest odbierany – schematy mogą tworzyć harmonię i równowagę, ale również kontrast i nacisk na pojedyncze elementy. Jednak ze zbyt dużym kontrastem również trzeba uważać – użycie zbyt wielu kontrastujących kolorów może spowodować, że projekt będzie wydawał się chaotyczny i niespójny. Dodatkowo będzie męczył wzrok odbiorcy i może spowodować, że niechętnie skupi na nim swoją uwagę. Należy pamiętać, że wybór kolorów, to nie tylko losowy wybór palety zgodnej z danym schematem.
Typografia
O hierarchii typograficznej powstanie cały osobny wpis, ponieważ jest to bardziej rozbudowany temat. Jeśli nie chcesz go przegapić, zapisz się na newsletter.
Większość projektów zawiera tekst – a więc możemy stwierdzić, że hierarchia typograficzna jest nieodłącznym elementem hierarchii wizualnej. Jak w najprostszy sposób zrozumieć na czym polega? Wyobraź sobie gazetę – lub jeśli masz jakąś pod ręką przejrzyj ją. Każdy artykuł ma nagłówek, podtytuł i treść – trzy poziomy. I to podstawowe podejście możemy zastosować do każdego rodzaju projektu – od prostych wizytówek, po strony internetowe. Wyjaśniając po krótce:
- Poziom pierwszy to najważniejsza treść – ten element powinien być najbardziej widoczny.
- Poziom drugi nie powinien wyróźniać się bardziej, niż pierwszy – to tzw. podtytuły, które porządkują treść projektu.
- Poziom trzeci to dłuższe bloki tekstu, które w bardziej szczegółowy sposób omawiają treści zawarte na projekcie.
Kolejną ogólnie przyjętą zasadą jest, że w projekcie nie powinno się znajdować więcej, niż 2-3 kroje pisma, więc dobieraj je rozważnie.
Przestrzeń negatywna
Bardzo częstym błędem jest zaniedbywanie przestrzeni negatywnej w projektach. A to właśnie dzięki niej projekty zyskują “flow” i pozwalają oczom odbiorcy przez chwilę odpocząć.
Czym jest przestrzeń negatywna?
To puste przestrzenie w projekcie, które sprawiają, że jest on bardziej uporządkowany. Dzięki odpowiednio zaplanowanej pustej przestrzeni, projekt jest bardziej czytelny, oddziela informacje i elementy od siebie, i sprawia, że jest bardziej wyważony. Z drugiej strony brak przestrzeni powoduje, że projekt jest mylący, napakowany informacjami, tekstem i obrazami, co zwykle prowadzi do tego, że czytelnik nie wie od czego zacząć i może porzucić próbę przeczytania go.
Przestrzeń negatywna pozwala na:
- odpoczynek dla oczu odbiorcy,
- prowadzi wzrok odbiorcy przez projekt,
- rozdziela projekt na sekcje – elementy położone bliżej siebie są domyślnie grupowane przez mózg, te oddalone traktowane są jak osobne informacje,
- wprowadza porządek w projekcie.
Linie wiodące
Ruch jest jednym z najskuteczniejszych sposobów na przyciągnięcie uwagi odbiorcy, zwłaszcza gdy sugerujemy go na nieruchomym projekcie. Pomyśl o strzałce – niepozorna linia zakończona trójkątem automatycznie kieruje wzrok odbiorcy w miejsce, które wskazuje. Jednak linie nie muszą fizycznie pojawiać się w projekcie, by wskazywać elementy nacisku.
Linie wiodące możemy tworzyć w różny sposób. Na przykład – za pomocą powtarzających się elementów – rzędu kropek, bliskości obiektów lub kształtów, negatywnej przestrzeni lub pochylając obiekt. Eksperymentując w ten sposób sprawiasz, że wprowadzasz do projektu ruch.
Testowanie efektywności hierarchii wizualnej
Techniki, które tu wymieniłam świetnie działają w podkreślaniu ważnych części projektu. Jednak jak ze wszystkim – nadużywanie ich może skutkować odwrotnym efektem do zamierzonego. Należy pamiętać, by nie podkreślać zbyt wielu elementów – zwyczajnie sprawimy, że wszystko będzie wyglądało na ważne i nic nie będzie się wyróżniać.
Jak łatwo sprawdzić czy hierarchia działa? Odsuń się od ekranu komputera i zmruż oczy tak, by elementy lekko się zamazały. Co się wyróżnia? Czy jest to coś, co chciałabyś, żeby odbiorca zobaczył jako pierwsze? Jeśli tak – super, jeśli nie – może trzeba coś zmienić.
Mam nadzieję, że nauczyłaś się czegoś nowego z tego wpisu i od dzisiaj będziesz tworzyć skuteczne grafiki. Powodzenia i miłego projektowania!
