Jak wykorzystać negatywną przestrzeń do tworzenia wspaniałych stron internetowych?

Strony internetowe i aplikacje mają różnego rodzaju elementy wizualne, które muszą ze sobą współistnieć – przyciski, kolumny, ikony, obrazy, linie, media i typografię. Wszystkie te elementy wymagają kanwy (pustej strony internetowej), a ta kanwa potrzebuje pustej przestrzeni, tj. negatywu lub białej spacji. Oko widza nie może bez niego przetworzyć tego, co widzi.

Subskrybuj nasz kanał YouTube

Co to jest ujemna przestrzeń?

Pozytywna przestrzeń to część pracy wypełniona tematem lub innymi centralnymi punktami. Negatywna przestrzeń zajmuje resztę. Może być pusty lub biały, kontrastujący kolorem lub wzorem, subtelny obraz tła – cokolwiek to jest, będzie wydawać się pusty, a nie pełny lub zagracony. Jednak tylko dlatego, że przestrzeń ujemna jest pusta, nie oznacza to, że jest nieistotna – zwraca uwagę na przestrzeń pozytywną, a czasami nawet sama staje się przestrzenią pozytywną, gdy patrzy się na nią inaczej.

Przykłady negatywnej przestrzeni

Przestrzeń negatywna – i jej odpowiednik, przestrzeń pozytywna – występuje we wszelkiego rodzaju sztuce i projektowaniu, w tym w projektowaniu stron internetowych. Spójrzmy na logo FedEx. Widzisz fioletowe i pomarańczowe litery, prawda? Jest tam jednak strzałka w białej przestrzeni:

Ta ukryta strzałka FedEx wykorzystuje przestrzeń ujemną w podobny sposób jak rysowanie i malowanie – kontur jest tworzony tak, jak powstaje przestrzeń dodatnia. W takim przykładzie ujemna przestrzeń nie jest tworzona tylko dlatego, że jest tam, gdzie dodatnia przestrzeń nie jest .

Paw NBC robi to samo:

Podczas gdy celem negatywnej przestrzeni jest zwykle skupienie się na pozytywnej przestrzeni, czasami staje się ona celem w sprytnych projektach. Oto kolejny przykład – spójrz, jak zęby wilka tworzą drzewo:

Jest na to określenie: odwrócenie figura-ziemia. Zasadniczo oznacza to, że kolory pierwszego planu i tła zamieniają się miejscami, aby zmienić perspektywę i interpretacje. Jeśli cię to interesuje, sprawdź prace MC Eschera, zwłaszcza jego odciski transformacji.

Negatywna przestrzeń odgrywa tę samą rolę w fotografii. Spójrz na ten portret syna mojego kuzyna, Juliana, który zrobiłem. Czarne tło skupia na nim całą uwagę:

Negatywną przestrzeń odnajdziemy w naturze, jak w przestrzeni między płatkami kwiatów, iw funkcjonalnym designie, jak w przestrzeni przez uchwyt kubka do kawy.

Używamy go również na naszej stronie internetowej. Nasza strona główna zawiera mnóstwo informacji, ale nie jest to przytłaczające ze względu na sposób, w jaki je rozmieściliśmy. I chociaż tło ma ślady koloru i kilka kształtów, które można dodać do projektu, w żaden sposób nie rozprasza – nadal sprawia wrażenie przyjemnie pustego, ale nie jest nudne ( i jest markowe).

Rodzaje negatywnej przestrzeni

Istnieje kilka rodzajów przestrzeni negatywnej. Mikro i makro odnoszą się do wielkości przestrzeni ujemnej w kompozycji. Aktywne i pasywne odnoszą się do tego, co te obszary robią dla użytkownika.

Przestrzeń negatywna w skali mikro i makro

Przestrzeń mikroujemna odnosi się do małych odstępów między elementami – odstępów między wierszami tekstu lub obszaru między linkami w menu nawigacyjnym. Ma to wpływ na czytelność treści dla czytelnika. Jeśli nie ma wystarczającej przestrzeni między wierszami lub tekst wykracza poza marginesy, użytkownik będzie miał trudności z odczytaniem i zrozumieniem tego.

Przestrzeń ujemna makro jest większa; to przestrzeń wokół układu i przestrzenie między dużymi elementami projektu. Przykładem jest obszar pomiędzy blokami treści. To puste części pojemnika zawierają cały projekt.

Strony internetowe z niewielką ilością makronegatywnej przestrzeni są zazwyczaj bardzo pouczające. Strony internetowe z dużą ilością makronegatywnej przestrzeni są często minimalistyczne lub prezentują luksus. Pierwszy przykład dotyczy małej makro ujemnej przestrzeni, a drugi dużej makro ujemnej przestrzeni:

Aktywna i pasywna przestrzeń ujemna

Aktywna negatywna przestrzeń wzbogaca strukturę strony, usprawnia przepływ treści i prowadzi użytkownika tam, gdzie chcesz. Pasywna przestrzeń negatywna poprawia wygląd strony, ale nie przenosi użytkownika przez żaden konkretny przepływ. Kiedy przestrzeń jest niecentryczna i asymetryczna, zwykle jest aktywna. Kiedy jest zrównoważony i symetryczny, zwykle jest pasywny – wywołuje mniej ruchu, co nie zmusza użytkownika do patrzenia na niego w określony sposób. Oto przykład aktywnej przestrzeni ujemnej:

A oto przykład pasywnej przestrzeni ujemnej:

Negatywna przestrzeń i kompozycja

Negatywna przestrzeń jest ważna dla kompozycji z kilku powodów:

• Trzeba widzieć przestrzeń w kompozycji, żeby zachować odpowiednie proporcje.
• Pozwala także bawić się relacjami między różnymi obiektami w projekcie.
• W projektowaniu stron internetowych może odgrywać ważną rolę w utrzymaniu ludzi na Twojej stronie.
• Ilość miejsca wokół elementu określa stopień skupienia na elemencie – więcej miejsca oznacza większe skupienie.

Wybór odpowiedniej równowagi między negatywną i pozytywną przestrzenią

To, ile negatywnej i pozytywnej przestrzeni wykorzystasz, będzie zależało od tego, jaki wygląd chcesz uzyskać i co chcesz wywołać w widzu.

• Jeśli chcesz uzyskać estetyczny projekt, prawdopodobnie użyjesz równych części ujemnej i dodatniej przestrzeni.
• W przypadku projektu, który wygląda celowo surowo i minimalistycznie, wybierzesz więcej negatywnej przestrzeni.
• Aby wyglądać przytłaczająco i prosto w twarz, możesz zdecydować się na bardziej pozytywną przestrzeń.

Projektanci muszą bawić się spacjami, dopóki nie znajdą właściwej równowagi dla marki i zamierzonych celów witryny.

Usuwanie zaśmiecania witryn z dużą ilością tekstu z ujemną przestrzenią

Kiedy musisz wycisnąć mnóstwo informacji na jednej stronie, ustalenie, gdzie umieścić negatywną przestrzeń, staje się trudne – zwłaszcza jeśli informacje te zawierają dużo tekstu, co może szybko wyglądać na zaśmiecone. HostingDude to świetny przykład zbyt dużej pozytywnej przestrzeni:

Z drugiej strony The New York Times wymyślił, jak zapakować swoją stronę główną wiadomościami bez doprowadzania wzroku do szaleństwa, a to wszystko dzięki odstępom (i wyborom kolorów). Chociaż nie ma dużo miejsca na makroprzestrzeń, wykorzystali mikroprzestrzeń:

Mimo że elementy na HostingDude są bliżej siebie, elementy na stronie New York Times wyglądają na bardziej ujednolicone dzięki dodatkowej przestrzeni między nimi. Oczom łatwiej jest zrozumieć stronę, co daje jej pełniejszy, spójniejszy projekt. Kiedy oko ma okazję odpocząć, może lepiej przyjrzeć się temu, co widzi. Negatywna przestrzeń wierzy, że mniej znaczy więcej.

Dzielenie tekstu ujemną spacją

Widziałeś, jak projektanci mogą stworzyć estetyczną stronę główną z dużą ilością tekstu, ale co z samymi dłuższymi blokami tekstu? Mieszanie krótkich akapitów z długimi, pogrubianie nagłówków, tworzenie list i dodawanie multimediów w całym artykule pomaga budować negatywną przestrzeń wokół słów, dzięki czemu jest bardziej zachęcający dla czytelnika. Wygląd ma znaczenie, nawet w przypadku kopii, a wspaniali projektanci biorą to pod uwagę.

Wyjaśnianie Klientom punktu negatywnej przestrzeni

Projektanci stron internetowych mogą kłócić się z klientami o negatywną przestrzeń. Klienci widzą jeszcze więcej miejsca na wciśnięcie ważnych, przynoszących pieniądze informacji. Czują, że pusta przestrzeń to marnowanie przestrzeni. Z drugiej strony projektanci widzą, że wizualność łamie oko, aby wchłonąć informacje, które już istnieją. Wiedzą, że cała przestrzeń na stronie jest ważna, nawet ta wolna od treści.

Tutaj przydają się narzędzia do tworzenia makiet i prototypowania. Pokaż klientowi dwie wersje jego strony internetowej, jedną z przyjemną ilością negatywnej przestrzeni i drugą przeładowaną pozytywną przestrzenią. Niech spojrzą na strony internetowe obok siebie i poproszą, aby się z nimi pobawili. Domyślam się, że będą mieli łatwy czas na poruszanie się po dobrze zaprojektowanej stronie internetowej i poczują się zagubieni na źle zaprojektowanej.

Zawijanie

Strony internetowe składają się z wielu różnych elementów, a jeśli chcesz, aby te elementy harmonijnie współgrały i przyciągały widza, potrzebujesz wokół nich białej przestrzeni. Ilość używanej przestrzeni i sposób jej funkcjonowania zależą od (a) Twojej marki i (b) tego, jakie działania chcesz, aby wykonał użytkownik. Możesz też wykazać się kreatywnością z białą przestrzenią, na przykład odwracając kolory lub rysując negatywną przestrzeń, aby zdefiniować ją w interesujący lub przykuwający wzrok sposób.

Niezależnie od przyjętego podejścia, biała przestrzeń powinna być zrównoważona – nie musi to jednak oznaczać symetryczności. Zamiast tego oznacza to, że elementy istnieją na stronie, nie konkurując ze sobą i przykuwając uwagę, jakiej oczekujesz. Dla widza równowaga oznacza możliwość oglądania strony internetowej bez pomieszania lub przytłoczenia.

Poeksperymentuj z białą przestrzenią na swojej stronie. Dodaj trochę, trochę usuń. Zmniejsz makro i zwiększ mikro lub odwrotnie. Sprawdź, jak mniej lub bardziej biała przestrzeń wokół niektórych elementów zachęca użytkownika do działania. Piękno białej przestrzeni polega na tym, że jest to technika artystyczna, co oznacza, że ​​nie ma sztywnych reguł.

Projektujesz stronę podróżniczą? Prawdopodobnie użyjesz dużo miejsca na makra. Sprawdź nasze zestawienie tematów Divi Child dla stron internetowych o podróżach.

Polecane zdjęcie za pośrednictwem StockVector / Shutterstock.com