8 lipca 2022 • 7 min. czytania

Stylowe zasady designu o paskudnym akronimie

W tym wpisie przyjrzymy się czterem, uniwersalnym zasadom designu, które mogą poprawić dowolną pracę graficzną: stronę internetową, slajd, dokument itp.

Zaktualizowano: 8 lipca 2022

Większość ludzi potrafi zauważyć zły design. Spoglądasz na stronę internetową i natychmiast stwierdzasz, że wygląda "profesjonalnie" albo "amatorsko"; "dobrze" lub "źle". Problem zaczyna się, gdy masz świadomie opisać co konkretnie jest z nią nie tak.

Design na raz, dwa, trzy

Wbrew pozorom, projektowanie graficzne nie musi być trudne. Design może być prosty jak raz, dwa, trzy:

• Naucz się zasad
• Zauważ kiedy ich nie używasz
• Zastosuj poznane zasady

Contrast (kontrast)

Zasada Kontrastu mówi: kontrastuj różne elementy projektu, aby przyciągnąć uwagę użytkownika. Kontrast możesz także wykorzystać do organizacji informacji, rozjaśnienia hierarchii i kierowania uwagą czytelnika. Kontrast może być stworzony na wiele sposobów. Wystarczy zestawić ze sobą elementy, które różnią się między sobą jakimiś właściwościami:

• duży rozmiar fontu (jak ten w nagłówku) - mały rozmiar fontu (jak ten w paragrafach)
• szeryfowy font - bezszeryfowy font
• prosty, geometryczny font - klasyczny i złożony font (taką kombinację możesz zobaczyć w jednym z moich projektów)
• gruba linia - cienka linia
• ciepły kolor - zimny kolor
• gładka tekstura - szorstka tektura
• itd.

Najciekawszy kontrast można stworzyć za pomocą fontów. Szczególnie kontrastując kilka atrybutów jednocześnie, np. wielkość, grubość i krój.

Jest to chyba najbardziej dramatyczna zasada - kilka zmian może zmienić przeciętny design w taki, który przyciąga wzrok.

Czego unikać? Słabego kontrastu. Jeżeli elementy nie są identyczne, niech się różnią! Słaby kontrast (np. kolorów) dodatkowo może stwarzać problemy z dostępnością. Do sprawdzenia kontrastu kolorów pod kątem dostępności polecam strony takie jak Colour Contrast.

Repetition (powtórzenie)

Zasada Powtórzenia mówi: powtarzaj niektóre aspekty designu w całej pracy. Powtórzenie - podobnie jak kontrast - można stworzyć na wiele sposobów. Może to być cokolwiek, co czytelnik rozpozna:

• ujednolicony rozmiar fontu
• powtarzający się element dekoracyjny
• relacje przestrzenne o stałych odstępach
• jednolita paleta kolorów
• wyrównanie jednego rodzaju
• itd.

Powtórzenie to także wyraz konsekwencji. Gdy spojrzysz na witrynę internetową, w której konsekwentnie, pomiędzy podstronami, pojawiają się te same elementy, łatwo możesz stwierdzić, że należą do tej samej strony. Zresztą, strona internetowa (czy inna praca) nie musi posiadać wiele stron. Nawet jednostronicowy dokument będzie wyglądał bardziej wyrafinowanie po zastosowaniu tej zasady. Powtórzenia dodają pracy profesjonalizmu i autorytetu. Czytelnik ma wrażenie, że ktoś panuje nad projektem, bo powtórzenia wskazują na przemyśle decyzje. Nic nie jest przypadkowe. Czasem możesz przełamać taką powtarzalność, wrzucając jakiś niespodziewany element. Zachowaj go dla rzeczy, które mają przyciągać szczególną uwagę.

Czego unikać? Nadmiernych powtórzeń. Element powtarzany zbyt często może stać się przytłaczający i denerwujący. Pamiętaj o wartości kontrastu.

Alignment (wyrównanie)

Zasada Wyrównania mówi: nie umieszczaj niczego w pracy arbitralnie. Każdy element projektu powinien mieć wizualne połączenie z innym. Zasada ta wymusza na tobie jeszcze większą świadomość podczas pracy - nie pozostawia miejsca na wrzucanie elementów gdziekolwiek. Umieszczaj w swojej pracy pomocnicze linie, które pokażą Ci, gdzie brakuje wizualnego połączenia. Edytory graficzne i tekstowe oferują różnego rodzaju linijki, marginesy i wyrównania - korzystaj z nich.

Wyrównanie tekstu jest również istotne. Cztery najczęściej występujące wyrównania to:

• Do lewej. Często zaznaczone domyślnie, w związku z tym - standardowe. Niewidoczna linia łączy lewą krawędź tekstu. Prawa krawędź jest za to poszarpana.
• Do prawej. Tu niewidoczna linia łączy prawą krawędź tekstu. Rzadziej używane. Za jego pomocą można uzyskać dramatyczny efekt.
• Wyśrodkowanie. Nie ma niewidocznych linii łączących, którąś z krawędzi tekstu. Dlatego wydaje się „słabsze” niż pozostałe. To wyrównanie wydaje się bezpieczne, dlatego jest nadużywane przez nowicjuszy. Może stworzyć formalny wygląd, ale jednocześnie nudny. Wycentrowany tekst warto dodatkowo wyróżnić.
• Wyjustowanie. Niewidzialna linia przebiega po obu stornach tekstu. Poprawia to jego czytelność. Dlatego wyrównanie to często wykorzystywane jest w książkach i pracach akademickich. Rzadziej na stronach internetowych. Przy jego stosowaniu warto zwracać uwagę na długość linii tekstu. Zbyt krótkie linie mogą stworzyć źle wyglądające luki. Praca bez jednolitego wyrównania najczęściej wydaje się nieprofesjonalna. Nawet drobne nierówności mogą wywołać wrażenie, że coś z nią jest nie tak.

Czego unikać? Nie stosuj wielu rodzajów wyrównania w jednej pracy. Nagłówek wycentrowany nad blokiem tekstu, który jest wyrównany do lewej, będzie wyglądał nieestetycznie i przypadkowo.

Proximity (sąsiedztwo)

Zasada Sąsiedztwa mówi: grupuj powiązane elementy razem. Zbliż je do siebie, aby były widoczne jako grupa, a nie zbiór niepowiązanych elementów. Fizyczne sąsiedztwo implikuje związek. Zasada ta nie mówi, aby wszystko było blisko siebie. Elementy, które są połączone ze sobą koncepcyjnie, powinny być również połączone wizualnie. Podstawową funkcją tej zasady jest organizacja. Zgrupowane elementy, łatwiej przetworzyć i przyswoić. Dobrym przykładem są paragrafy w tym wpisie. Łatwiej je przyswoić, bo nie tworzą jednego, zwartego bloku tekstu.

Czego unikać? Kilku rzeczy:

• Zbyt wielu samodzielnych elementów w pracy. Często wiele elementów można połączyć w logiczne grupy.
• Używania takiej samej ilości wolnego miejsca pomiędzy elementami - chyba, że wszystkie elementy są jedną grupą.
• Nie twórz połączeń pomiędzy niepowiązanymi ze sobą elementami. Jeżeli elementy nie są powiązane - rozsuń je.
• Nie wrzucaj elementów w miejsca, tylko dlatego, że są puste. Wielu projektantów nie docenia wartości wolnej przestrzeni.

Zasady w praktyce

Wymienione zasady działają najlepiej, gdy zastosujesz je wszystkie jednocześnie. Poniżej właśnie to zrobię - zastosuję wszystkie, wymienione zasady do istniejącej strony internetowej.

Szukając przykładów kiepskiego designu, natrafiłem na tę stronę lokalnego zakładu fryzjerskiego. Strona nie jest taka zła! Ale jest dobrym kandydatem do kilku zmian. Zatem poprawię ten projekt, ale nie zmienię go całkowicie. Wykorzystam istniejące asset'y i będę się starał trzymać oryginalnego układu. Treść pozostawię bez zmian.

Pierwszy problem, który rzuca się w oczy to słaba hierarchia. Da się zauważyć logo, nawigację, nagłówek i przyciski, ale wszystko się zlewa. Wykorzystałem zasadę sąsiedztwa, aby stworzyć trzy, główne grupy: logo, przyciski nawigacji i nagłówki z przyciskami CTA. Dodałem białej przestrzeni (lubię białą przestrzeń), aby rozsunąć te grupy. Jednocześnie zbliżyłem elementy do siebie w obrębie grupy.

Powyższa strona cierpi także z powodu słabego kontrastu. Większość tekstu ma niewystarczający kontrast kolorów. Sporo elementów ma podobny rozmiar. Psuje to hierarchię i psuje to dostępność. Zróżnicowałem elementy designu, kontrastując kolory, rozmiary fontów i ich grubości, a także zmieniając rozmiar innych części.

Brakuje także wyraźnej linii, która prowadziłaby użytkownika przez sekcje. Zbyt wiele tekstu jest wycentrowanego. Wycentrowany nagłówek nad paragrafem wyrównanym do lewej wygląda przypadkowo. Niektóre elementy nie są wyrównane z niczym. Naprawiłem to wyrównując teksty i przyciski na obu osiach. Przekształciłem sekcję "attention" w pop-up. To jest jedyny element, który nie jest wyrównany z główną osią. Ale myślę, że to jest właściwy wyjątek od reguły.

W pracy było zbyt wiele różnych odcieni, rozmiarów fontów i odległości. Ustaliłem kilka stylów, które powtarzałem w całej pracy. Daje to bardziej spójny wygląd.

Czy twierdzę, że mój projekt jest idealny? Nie, zdecydowanie nie. To jest po prostu moja propozycja, po ponad godzinie przeprojektowywania. Ale możemy się chyba zgodzić, że design został poprawiony. Z tymi poprawkami strona jest bardziej dostępna, czytelna, wygląda prefesjonalnie i ogólnie jest bardziej przyjazna dla użytkownika.

Nie bądź mięczakiem!

Stosując te zasady nie bądź mięczakiem. Jeżeli używasz kontrastu - spraw, aby elementy naprawdę się różniły. Zestaw czarną jak smoła czerń z jaskrawą żółcią. Wyrównaj treści co do piksela. Nie bój się wykorzystać tych samych elementów wielokrotnie. Ale co najważniejsze - nie bój się eksperymentować. Zasady są po to żeby je łamać. Z małym zastrzeżeniem - aby skutecznie i świadomie łamać zasady, trzeba je najpierw poznać. Mam nadzieję, że ten post spełnił właśnie to zadanie - pomógł Ci się z nimi zapoznać.

Wszystkie powyższe zasady pochodzą z książki Robin Williams (nie, nie aktora), The Non-Designer's Design Book. Zajrzyj do niej po więcej przydatnych rad. Z czystym sumieniem mogę ją polecić. Nie jest to reklama, ani link afiliacyjny. Moje strony internetowe po ich zastosowaniu wyglądają zwyczajnie lepiej.