Czas czytania: 03:31 min

Witaj w nowym cyklu poświęconym projektowaniu! :) Celem tego cyklu jest przedstawienie podstaw projektowania w taki sposób, abyś, moja droga Czytelniczko/mój drogi Czytelniku, mógł/mogła samodzielnie ocenić swoje projekty i w prosty sposób je poprawić. Mam nadzieję, że zwiększy się Twoja świadomość na temat tego, dlaczego to, co widzisz, wydaje Ci się dobre, a dlaczego coś innego nie. Wierzę, że wzrost tej świadomości pozwoli mi zrealizować mój cel, czyli poprawić estetykę otaczającego nas świata. :)

Co nas czeka?

Moją ideą jest przejście zarówno przez podstawy projektowania, typografię, jak i teorię koloru. Zaczniemy od podstaw projektowania, gdyż uważam, że to pomoże Ci najszybciej.

Pierwsze lekcje oprę na książce Robin Williams pt. "The Non-Designer's Design Book", ponieważ uważam, że w prosty sposób wyjaśnia ona fundamenty designu. Jeżeli będziesz zainteresowana/zainteresowany głębszym poznaniem przedstawionych tematów, zachęcam Cię do zapoznania się z tą lekturą.

Skupimy się na czterech elementach projektowania wymienionych w tej książce:

• Bliskość (Proximity): Grupowanie powiązanych ze sobą elementów. Dzięki temu odbiorca łatwiej rozumie, które informacje do siebie należą.
• Wyrównanie (Alignment): Określa, jak elementy są ułożone względem siebie na stronie. Świadome wyrównanie tworzy porządek i profesjonalny wygląd.
• Powtarzalność (Repetition): Polega na konsekwentnym używaniu tych samych elementów (np. kolorów, czcionek, kształtów) w całym projekcie. Wzmacnia spójność i organizację.
• Kontrast (Contrast): Sprawia, że elementy na stronie są wizualnie od siebie różne. Dzięki kontrastowi przyciągamy uwagę do najważniejszych informacji i tworzymy hierarchię wizualną.

W dzisiejszej lekcji omówimy Bliskość.

Zainspirował Cię artykuł?

Masz przemyślenia, pytania, a może chcesz dowiedzieć się, jak mogę Ci pomóc?

Napisz do mnie – chętnie porozmawiam!

Bliskość - ważna w życiu i designie :)

Zasada bliskości to fundament klarownej i intuicyjnej komunikacji wizualnej. Jak już wspomnieliśmy, polega ona na celowym grupowaniu elementów, które są ze sobą powiązane. To proste działanie ma ogromny wpływ na to, jak odbiorca odbiera informacje. Zamiast traktować każdy element jako oddzielną jednostkę, nasz mózg naturalnie łączy te, które znajdują się blisko siebie, tworząc logiczne grupy i ułatwiając zrozumienie ich wzajemnych relacji.

Spójrzmy na te dwie ilustracje:

Na lewej ilustracji odległość między postaciami uniemożliwia nam jasne określenie relacji między nimi. Natomiast, patrząc na drugą ilustrację, ich bliskość sprawia, że możemy przyjąć, że coś je łączy.

Tak samo dzieje się z elementami, które projektujemy. Jeżeli mają bliską relację, dobrze, aby znajdowały się blisko siebie, aby odbiorca od razu to zauważył i nie musiał się domyślać.

Wyobraźmy sobie kilka konkretnych sytuacji:

• Na stronie internetowej: Menu nawigacyjne zazwyczaj grupuje powiązane ze sobą linki (np. "O nas", "Produkty", "Kontakt"). Dzięki temu użytkownik od razu wie, gdzie szukać konkretnych informacji. Podobnie, w bloku z opisem produktu, zdjęcie, nazwa, cena i przycisk "Dodaj do koszyka" znajdują się blisko siebie, tworząc logiczną całość.
• W wizytówce: Imię i nazwisko, stanowisko, numer telefonu, adres e-mail i strona internetowa są umieszczone blisko siebie, tworząc blok informacji kontaktowych jednej osoby. Gdyby te dane były rozrzucone po całej wizytówce, odczytanie ich byłoby znacznie trudniejsze.
• W broszurze: Sekcje tekstu opisujące dany produkt lub usługę są zazwyczaj umieszczone w pobliżu odpowiadających im zdjęć lub ilustracji. To ułatwia czytelnikowi powiązanie tekstu z wizualizacją i lepsze zrozumienie przekazu.
• W prezentacji: Tytuł slajdu, punkty wypunktowania i ewentualne wykresy czy diagramy są grupowane razem, aby przedstawić spójną myśl lub informację. Dzięki temu publiczność łatwiej śledzi tok prezentacji.
• W interfejsie aplikacji mobilnej: Ikony i ich opisy są zwykle umieszczane blisko siebie, aby użytkownik wiedział, jaką funkcję pełni dana ikona.

Podałem kilka przykładów słownie, jednak nic nie zastąpi wizualnego przedstawienia. Zilustrujmy to na przykładzie wizytówki.

W powyższym przykładzie zapewne jako pierwsze popatrzyłaś/eś na logo na środku, jednak co dalej? Wzrok nie wie, gdzie podążać, ponieważ wszystko jest rozłożone równomiernie, a wszystkie teksty mają tę samą wielkość. Powoduje to chaos i niechęć do zapoznania się z treścią. 

A teraz przyjrzyjmy się, co się stanie, gdy pogrupujemy informacje.

Mamy tutaj trzy grupy:

• Logo
• Dane właściciela wizytówki i jego stanowisko
• Dane kontaktowe

Teraz łatwiej zapamiętać, czyja to wizytówka, ponieważ nasz mózg widzi hierarchię i wie, gdzie skierować wzrok.

Dlaczego bliskość jest tak ważna?

Grupowanie elementów za pomocą bliskości:

• Ułatwia zrozumienie: Odbiorca od razu widzi, które elementy do siebie należą, bez konieczności dodatkowego wysiłku.
• Tworzy porządek: Nawet złożone informacje stają się bardziej uporządkowane i czytelne.
• Buduje hierarchię: Możemy wizualnie oddzielać od siebie różne sekcje informacji, co pomaga w ustaleniu, co jest najważniejsze.
• Poprawia estetykę: Dobrze zastosowana bliskość sprawia, że projekt wygląda bardziej profesjonalnie i spójnie.

Co się stanie, gdy zignorujemy zasadę bliskości?

Brak odpowiedniej bliskości może prowadzić do chaosu, dezorientacji i trudności w zrozumieniu przekazu. Elementy, które powinny być powiązane, mogą wydawać się od siebie oddzielne i niepowiązane, co negatywnie wpływa na odbiór projektu. Odbiorca będzie zagubiony, a tym samym nie uda nam się dotrzeć z naszym przekazem.

Dlatego unikajmy:

• Zbyt wielu osobnych elementów.
• Łączenia elementów, które nie mają ze sobą nic wspólnego; zachowajmy jasne rozdzielenie.
• Upychania elementów w rogi czy na środek strony tylko dlatego, że jest tam miejsce. Dajmy oddech naszym grupom elementów.
• Pozostawiania równych odstępów między elementami; starajmy się zawsze jasno rozdzielić grupy elementów, które mają ze sobą relacje.

Podsumujmy

Bliskość to proste, ale potężne narzędzie, które pozwala nam organizować informacje w sposób logiczny i intuicyjny. Pamiętając o grupowaniu powiązanych elementów, możemy znacząco poprawić czytelność, przejrzystość i profesjonalizm naszych projektów, niezależnie od tego, czy tworzymy stronę internetową, ulotkę, prezentację, czy jakikolwiek inny materiał wizualny. Już sama ta zasada sprawi, że łatwiej będzie nam kierować wzrok odbiorcy i opowiadać mu historię tak, jak my tego chcemy. Bo nawet najprostsza ulotka opowiada historię, o której oprawę powinniśmy zadbać ;)

W następnej lekcji przyjrzymy się Wyrównaniu.

Zapraszam i do zobaczenia :)

Twoja kawa = moja inspiracja

Każda kawa to dla mnie zastrzyk energii i motywacji do dalszej pracy.

Dzięki Twojemu wsparciu mogę poświęcić więcej czasu na tworzenie wartościowych treści dla Ciebie!

Polityka Prywatności

Regulamin

Śledź mnie i bądź na bieżąco z kreatywnymi pomysłami!

Zainspiruj się – dołącz do newslettera!