zasady projektowania: przestrzeń i relacja figura-Ziemia

jeśli widzisz projektowanie graficzne jako proces układania kształtów na płótnie, to widzisz tylko połowę tego, z czym pracujesz. Negatywna przestrzeń płótna jest tak samo ważna jak pozytywne elementy, które umieszczamy na płótnie.,

projekt jest układem zarówno kształtów, jak i przestrzeni. Aby pracować bardziej efektywnie z przestrzenią, musisz najpierw uświadomić sobie ją i nauczyć się ją widzieć-nauczyć się widzieć kształty, które tworzy przestrzeń i jak przestrzeń się komunikuje. Jest to druga część serii o zasadach projektowania dla początkujących. Pierwsza część obejmowała wprowadzenie do gestalt; reszta serii (w tym ten post) będzie opierać się na tych zasadach gestalt i pokazać, jak wiele z podstawowych zasad, z którymi pracujemy jako projektanci mają swoje pochodzenie.,

relacja figura-Ziemia

zasada gestalt, która ma największe zastosowanie w przestrzeni, to zasada figura-Ziemia. Wszystko w Twoim projekcie będzie postrzegane jako jedno lub drugie, a relacje między nimi wzajemnie się wykluczają. Żadne z nich nie może być postrzegane inaczej niż w stosunku do drugiego, a zmiana jednego jest niemożliwa bez zmiany drugiego również.

relacja figura-grunt jest również komplementarna. Rysunek i podłoże mogą wzmacniać lub pomniejszać się od siebie, a organizowanie tych dwóch w stosunku do siebie jest jednym z ważniejszych aspektów projektowania., Ustawia kontekst komunikowania się Twojego projektu i jego interpretacji.

„białą spację należy traktować jako aktywny element, a nie pasywne tło.”
— Jan Tschichold

w trzecim panelu usunięto dwie czarne linie. To aktywuje przestrzeń, sprawiając, że wydaje się, że siedzi na szarym polu., Podłoże stało się figurą i dodaje więcej głębi projektowi.

istnieją trzy rodzaje relacji figura-Grunt:

• stabilny (powyżej po lewej)
  jest jasne, co jest figurą, a co gruntem. Jedna lub druga zazwyczaj dominuje w kompozycji.
• odwracalne (powyżej środka)
  zarówno postać, jak i podłoże przyciągają jednakowo uwagę widza., Tworzy to napięcie, dzięki czemu jeden może wyprzedzić drugiego, co prowadzi do dynamicznego projektu.
• wieloznaczne (powyżej po prawej)
  elementy mogą wydawać się jednocześnie figurą i ziemią. Tworzą równie ciekawe kształty, a widzowi pozostaje znaleźć swój własny punkt wejścia w kompozycję.

w zależności od tego, jaką relację skonfigurujesz i jak zrównoważysz zarówno figurę, jak i grunt, kierujesz odbiorców do spojrzenia na różne części projektu i zinterpretowania tego, co widzą w różnych kontekstach.,

figura-ziemia nie jest jedyną zasadą gestaltu, w której przestrzeń odgrywa znaczącą rolę. Dwie inne to:

• Proximity
  Proximity wykorzystuje przestrzeń do łączenia i oddzielania elementów poprzez umieszczenie niektórych elementów w przestrzeni. Przykładem, który możemy uznać za oczywisty, są akapity tekstu na stronie. Odstęp między akapitami jest większy niż odstęp między wierszami tekstu w akapicie.
• Zamknięcie
  wykorzystuje to przestrzeń jako odstępy między elementami. Widzowie wypełniają luki własnymi informacjami, aby uzupełnić całość z części. Za dużo miejsca i nie ma zamknięcia., Za mało miejsca i nie trzeba zamykać. Tylko prawidłowa równowaga między przestrzenią a wypełnioną przestrzenią uaktywni przestrzeń i doprowadzi do zamknięcia.

przestrzeń jako element projektu

pomyśl przez chwilę o muzyce. Gdyby każda nuta lub akord były odtwarzane w tym samym czasie, nie miałbyś muzyki. Będziesz miał hałas. Muzyka występuje wtedy, gdy dźwięki są kontrastowane z ciszą. Zmienność wzoru dźwięku i ciszy tworzy rytm i melodię., Bez ciszy nie ma muzyki.

Spacja wykonuje tę samą funkcję wizualnie. Daje pozytywne elementy przestrzeń do oddychania. Daje oko swobodę poruszania się po projekcie i odkrywania elementów, których szuka. Pozytyw jest postrzegany tylko w kontraście z negatywem. Bez przestrzeni nie masz projektu. Masz hałas wzrokowy.

O ile hałas nie jest tym, co próbujesz komunikować, pochyl się w stronę przestrzeni. Ludzie rzadziej narzekają na zbyt dużo miejsca niż na zbyt mało.,

Spacja może wykonać następujące czynności:

• ustanowić kontrast, nacisk i hierarchię;
• generować dramat i napięcie;
• zapewnić wizualny odpoczynek między grupami elementów.

jak wynika z relacji figura-Ziemia, masz przestrzeń tylko wtedy, gdy coś jest w niej obecne. Przed dodaniem elementów dodatnich przestrzeń jest nieokreślona. Relacja figura-ziemia musi zostać ustalona, zanim przestrzeń może istnieć i zaczyna się jej komunikacja.

jedną z ważniejszych funkcji przestrzeni jest poprawa czytelności i czytelności., Makro-spacja sprawia, że tekst jest bardziej zachęcający. Mikro-przestrzeń sprawia, że jest bardziej czytelna.

• mikro-przestrzeń
  jest to przestrzeń wewnątrz elementów w grupie. To przestrzeń między literami, słowami i akapitami.
• makro-przestrzeń
  jest to przestrzeń między głównymi elementami. Oddziela elementy lub grupy elementów i zapewnia drogę dla oka do naśladowania i miejsca do odpoczynku między elementami.

przestrzeń koreluje z jakością. Więcej miejsca wiąże się z mniejszą ilością elementów lub rzadkością elementów. Porównaj wysokiej klasy i zniżki sklepów detalicznych., Który z nich zazwyczaj ma więcej miejsca w środku, a który pakuje produkty do każdego dostępnego miejsca? Co komunikuje ci przestrzeń?

przestrzeń może również przekazywać atrybuty inne niż jakość, takie jak:

• wyrafinowanie,
• prostota,
• Luksus,
• czystość,
• samotność,
• otwartość.

marnujesz miejsce, gdy nie bierzesz tego pod uwagę. Możesz marnować miejsce, przepełniając je. Można marnować przestrzeń, zalewając ją wewnątrz elementów projektu i nie pozwalając na połączenie z inną przestrzenią w projekcie.,

projekt jest ostatecznie układem kształtów, który obejmuje kształty utworzone przez przestrzeń. Nie bój się korzystać z przestrzeni. Zobacz go jako ważny element projektu pod twoją kontrolą.

kilka przykładów przestrzeni w witrynach internetowych

aby lepiej wykorzystać przestrzeń, najpierw musisz być jej świadomie świadomy. Naucz się rozpoznawać przestrzeń w różnych projektach. Zwróć uwagę na kształt, który tworzy, i pomyśl o tym, co przestrzeń komunikuje. W tym celu przyjrzyjmy się projektowi niektórych stron internetowych, zwracając uwagę na sposób wykorzystania przestrzeni.,

Old Guard

projekt Tom Johnson ' s Old Guard wykorzystuje dużo białej przestrzeni, dając tekstowi i innym elementom przestrzeń do oddychania. Nie ma wątpliwości, co jest figurą, a co ziemią.

informacje są zawarte i oddzielone spacją( przypomnijmy zasadę bliskości), rozróżniając grupy elementów., Możesz łatwo określić, gdzie kończy się jeden post, a zaczyna następny, wyłącznie po odstępie między nimi.

główna Zawartość jest nieco poza centrum na stronie, z dużą przestrzenią po obu stronach. Przestrzeń ta jest czasami przerywana przez elementy, aktywując zarówno przestrzeń, jak i elementy przerywające. Pomaga to zwrócić uwagę na obszar, a zwłaszcza elementy wewnątrz.

strona Heroku ' s Staus

poniższy obrazek pokazuje część strony statusu Heroku jako głównie przestrzeń., Zdarzyło mi się złapać stronę w szczególnie dobry dzień, ponieważ dodatkowe pozytywne elementy oznaczałyby więcej zgłaszanych incydentów na platformie. Tutaj więcej białej przestrzeni oznacza lepszą obsługę.

zauważ, że biała spacja nie musi być biała. Chociaż strona jest zbyt obszerna, jest mało prawdopodobne, aby narzekać, że jest jej zbyt dużo., Tylko ważne informacje — w tym przypadku aktualizacje statusu i raporty o incydentach — przerywają przestrzeń.

Introducing the Novel

przestrzeń na górze Introducing the Novel jest asymetryczna i aktywna. Zauważ, jak duży blok miejsca po lewej stronie prowadzi oko bezpośrednio do treści. Jeśli klikniesz na witrynę i przewiń w dół od góry, zobaczysz, że miejsce jest również używane do oddzielania i grupowania bloków informacji.

cienkie linie świetlne są również używane do grupowania i oddzielania tych bloków. Podczas przeglądania strony zauważ, że linie nie zawsze się dotykają, pozwalając przestrzeni przepływać wokół nich i łączyć się z inną przestrzenią. Zapobiega to uwięzieniu przestrzeni.

Elliot Jay Stocks

strona Elliot Jay Stocks powinna być wam wszystkim znana, ponieważ to on stoi za projektem tej. Asymetryczna przestrzeń na stronie Elliota ponownie prowadzi do przestrzeni aktywnej.,

duży obraz na górze tej strony może potencjalnie stać jako tymczasowy blok dostępu do treści Poniżej; jednak duża ilość miejsca obok obrazu zapewnia duże i zachęcające miejsce dla oka, aby poruszać się wokół niego., Jeśli pasek boczny po lewej stronie miał ten sam kolor tła co główna treść, prawdopodobnie łatwiej byłoby oko poruszać się po obrazie, ale zmiana koloru nie sprawia, że jest to trudne.

podobnie jak w przypadku powyższych stron internetowych, przestrzeń służy zarówno do zamykania, jak i oddzielania grup różnych informacji, pozwalając każdej grupie wyróżniać się i pozwalając oku znaleźć to, czego chce i odpocząć pomiędzy nimi.

Phil Coffman

treść na stronie Phila Coffmana tworzy pojedynczy kształt, który znajduje się w większości pustej przestrzeni., Brak wielu pozytywnych elementów zwiększa znaczenie tych, które są obecne.

nawet wewnątrz kolorowego prostokątnego tła tekst ma wystarczająco dużo miejsca wokół niego, aby można go było łatwo odczytać i nie pomylić z inną kategorią tekstu na stronie.,

pozytywny kształt (i kształt przestrzeni) dostosowuje się responsywnie do różnych szerokości przeglądarki, ale wzór pojedynczego dużego kształtu otoczonego przestrzenią pozostaje.

New Adventures in Web Design

podobnie jak wiele witryn tutaj, Strona 2013 na konferencji New Adventures in Web Design pozostawia dużo miejsca wokół elementów. Różne grupy informacji są zawarte w przestrzeni, a przestrzeń jest aktywna w całym projekcie.

warto zwrócić uwagę na szare okrągłe strzałki między obrazem w lewym górnym rogu a główną treścią po prawej stronie.

czy te strzałki blokują przepływ przestrzeni? Ponieważ nie dotykają się i ponieważ każdy jest przerywany tam, gdzie przerywa przestrzeń, przestrzeń może przepływać, chociaż jest wyraźnie bardziej ograniczona w tym przepływie.

pomaga jaśniejszy-szary kolor. Zapobiega to dominacji strzałek i nietrudno wyobrazić sobie przestrzeń przepływającą przez linie.,

szczerze mówiąc, gdyby moja przeglądarka była szersza, gdy chwyciłem zrzut ekranu, strzałki nie pokrywałyby się z główną treścią. Jednak około 1280 pikseli w dół do miejsca, w którym projekt staje się jedną kolumną, robią to. Ogólnie to działa, chociaż zastanawiam się, czy przestrzeń płynęłaby lepiej bez obecnych strzałek.

kilka przykładów logotypów

zostawiam wam kilka logotypów, w których przestrzeń jest wkomponowana jako integralna część projektu. Zamiast wskazywać na wykorzystanie przestrzeni w każdym z nich, zrobię kilka ogólnych komentarzy, a następnie pozwolę ci zbadać przestrzenie dla siebie.,

zauważ, jak poniższe loga wykorzystują relację figura-Grunt. Z niektórymi, dopóki nie zobaczysz zarówno figury, jak i podłoża, nie zobaczysz pełnego logo. Oba są niezbędne do tego, co jest przekazywane.

kilka z tych logotypów opiera się na zasadzie zamknięcia. Tego, co masz zobaczyć, nie ma, ale widzisz to i tak. Niektóre z tych logotypów również bawią się figurą i podłożem. To, co jest figurą, gdy bierzesz całe logo na jego tle, staje się podstawą dla mniejszej figury wewnątrz., Ta odwracalna relacja figura-grunt jest kluczowa dla tego, co jest komunikowane.

• Cloud Bed
• Black Cat Lounge
• Shift
• Dolphin & Seal Logo Designer
• Przewodnik po implantach dentystycznych
• Wineforest

podsumowanie

mam nadzieję, że odbierzesz dwie główne rzeczy z tego postu., Pierwszy to związek między wykorzystaniem przestrzeni w projektowaniu a zasadą gestalt figury-ziemi. Gestalt zasady poniżej wiele z tego, co robimy jako projektanci.

Po Drugie, a może co ważniejsze, Postaraj się poświęcić czas na obserwację wykorzystania przestrzeni w projektowaniu. Nie pozwól, aby przestrzeń była produktem ubocznym twoich pozytywnych elementów. Naucz się projektować przestrzeń jak najwięcej, jeśli nie więcej niż pozytywne elementy. Układ dowolnej strony jest ostatecznie organizacją przestrzeni.

świadomie analizuj tę przestrzeń i świadomie wykorzystuj ją do stworzenia lepszego projektu. Nie pozwól, żeby to zostało., Zobacz go jako istotny element projektu, a następnie zobacz relację między przestrzenią a elementami pozytywnymi jako element projektu, który kształtujesz.

następnym razem dodamy więcej zasad gestalt i zbadamy, w jaki sposób punkty skupienia, kontynuacja i wspólny los prowadzą nas do takich pomysłów, jak waga wizualna i równowaga kompozycji.

• uważaj na myślniki En I Em: Etykieta typograficzna
• zasady projektowania: Waga wizualna i kierunek
• jak geometria wpływa na projektowanie Logo
• o sztuce

(al, ml, il)