Ulepsz swoje projekty za pomocą zasad zamknięcia i figury-ziemi (część 2)

• 12 min Czytaj
• Inspiracja,projektowanie,kreatywność,zasady projektowania
• zapisany do czytania offline
• Udostępnij na Twitterze, LinkedIn

w pierwszej części tej serii skupiliśmy się na zasadach podobieństwa i bliskości, aby zrozumieć, w jaki sposób zasady Gestalt działają w tworzeniu relacji między elementami., Dziś skupimy się na zasadach zamknięcia i figure-ground, które bawią się pozytywną i negatywną przestrzenią, budując relacje i tworząc całość sumą swoich części. Podobnie jak w pierwszym artykule, przyjrzymy się, jak działają zasady, a następnie przejdziemy do rzeczywistych przykładów, aby zilustrować je w użyciu.

Czy kiedykolwiek zastanawiałeś się, jak elementy łączą się, aby stworzyć udane projekty? To nie przypadek, że atrakcyjny design po prostu wydaje się działać., To, co większość z tych projektów ma ze sobą wspólnego, to wykorzystanie zasad grupowania gestalt do organizowania informacji, które pomagają nam zrozumieć relacje i różnice między elementami. Jako projektanci możemy wykorzystać te zasady do stworzenia własnej angażującej i udanej pracy.

Zacznijmy od Gestalt zasady zamknięcia.

Zamknięcie

zgodnie z uniwersalnymi zasadami projektowania zasada ta stwierdza, że mamy tendencję do postrzegania zbioru poszczególnych elementów jako jednego, rozpoznawalnego wzoru, a nie wielu, pojedynczych części., Zastosowanie zamknięcia skutecznie zmniejsza złożoność poprzez redukcję elementów do jak najmniejszej liczby części potrzebnych do wykonania obiektu. Pod warunkiem wystarczającej ilości informacji, wypełnimy brakujące części, aby utworzyć całość. Osiąga się to dzięki wykorzystaniu przestrzeni pozytywnej i negatywnej.

w poniższym przykładzie nasze umysły uzupełniają linie, tworząc okrąg, mimo że kształt nie istnieje. Pozytywna i negatywna przestrzeń łączą się, tworząc nasze postrzeganie kręgu.,

zamknięcie może być używane do postrzegania obiektów lub wzorców przy użyciu najmniejszej ilości informacji. Nasze umysły są tak chętne do uzupełnienia brakujących informacji, że można to zrobić przy użyciu bardzo niewielu elementów. Jednakże, jeśli nie dostarczymy wystarczającej ilości informacji, aby ukończyć wzór, to nie możemy dostrzec przedmiotu i zamknięcie zawodzi, co znacznie utrudnia formowanie okręgu w naszych umysłach. Spójrz i zobacz, czy możesz to zakończyć w swoim umyśle. To o wiele trudniejsze, prawda?, Nie możemy tego teraz połączyć z niewielką ilością podanych informacji.

Tworzenie skutecznego zamknięcia

powyższe przykłady są bardzo podstawowymi ilustracjami, w jaki sposób postrzegamy wzory do tworzenia zamknięcia. W rzeczywistości istnieje wiele elementów wizualnych, które możemy wykorzystać, aby pomóc nam stworzyć skuteczne zamknięcie:

• przestrzeń pozytywna i negatywna. Jak wspomniano wcześniej, przestrzeń pozytywna i negatywna łączą się w Zamknięcie, tworząc całość., Można to osiągnąć poprzez poszukiwanie ukrytych form w negatywnej przestrzeni projektu lub w obrębie typu. Dodatkowo usunięcie elementów z pierwszego planu może stworzyć interesujące negatywne kształty, a tym samym uprościć projekt.
• kontrast. Kluczem do tworzenia zamknięcia jest stworzenie silnego kontrastu między elementami pierwszego planu i tłem. Jak zawsze czerń i biel tworzą najlepszy kontrast, ale możesz również eksperymentować z kolorami uzupełniającymi, aby uzyskać silny kontrast.
• Kolor., Kolor nie tylko dodaje życia projektowi, ale może być również używany do wzmacniania relacji, zwłaszcza jeśli używa abstrakcyjnych kształtów do reprezentowania form.

wszystkie zamknięcia wykorzystują wiele, jeśli nie wszystkie z powyższych elementów wizualnych. Korzystanie z nich i eksperymentowanie z redukcją w swoich projektach pomoże Ci odkryć nowe formy. Spójrzmy teraz na zamknięcie w realnym świecie i zobaczmy, jak to wszystko razem.

zamknięcie w praktyce

za pomocą zamknięcia możemy zredukować elementy potrzebne do przekazywania informacji wizualnych, zmniejszając złożoność i czyniąc projekty bardziej angażującymi., Jednym z bardziej powszechnych zastosowań zamknięcia jest projektowanie logo firmy, właśnie dlatego, że zamknięcie może uprościć projekt, aby szybko przekazać tożsamość marki.

Poniżej znajduje się słynne logo, które rozpoznajemy jako Paw NBC. Porównując obecne logo (po prawej stronie) ze starym logo, widać, że nie są one szalenie różne. Ale redukując elementy i pracując z negatywną przestrzenią, obecne logo staje się znacznie bardziej uproszczone i eleganckie., Zamknięcie z powodzeniem osiąga się za pomocą ściśle zgrupowanych, pozytywnych kształtów jak pióra, z naszym postrzeganiem ciała Pawia uformowanym poprzez wykorzystanie negatywnej białej przestrzeni pośrodku.

kolejnym dobrze rozpoznawalnym logo, które z powodzeniem wykorzystuje zamknięcie, jest firma FedEx., W tym logo zamknięcie uzyskuje się za pomocą ujemnej białej spacji, używając części wielkiej litery E i małej litery x do utworzenia znanej strzałki poruszającej się do przodu. Projektant eksperymentował z wieloma projektami, w końcu ciągnąc litery bliżej siebie, aż zobaczył strzałkę tworzącą się między e i X. pokazuje to, że eksperymentowanie z redukcją projektów i szukanie przestrzeni pomiędzy nimi może przynieść fantastyczne rezultaty. Aby dowiedzieć się więcej o tworzeniu logo, zapoznaj się z świetnym artykułem Matthew Maya w Fast Company. Czy widzisz strzałkę w logo?, Od teraz już nigdy tego nie przegapisz!

powyższe przykłady to dobrze znane logo, które używają zamknięcia w dość oczywisty sposób. Istnieją jednak mniej znane logo, które subtelniej wykorzystują zamknięcie. Na przykład Houzz stosuje zamknięcie bardziej koncepcyjnie. Na pierwszy rzut oka zielone, czarno-białe kształty mogą przypominać półkę, część budynku lub wzór ściany, sugerując, o czym jest strona internetowa., Ale bliższe spojrzenie ujawnia również coś innego. Pragnienie naszego umysłu, aby wypełnić przestrzenie i kompletne wzory pozwala nam łączyć poszczególne kształty w całość, tworząc wielkie H w przestrzeni trójwymiarowej.

chociaż zamknięcie jest Świetne do tworzenia ciekawych logo, może działać również na inne sposoby., Strony internetowe mogą również wykorzystywać przestrzeń pozytywną i Negatywną w projektowaniu swoich interfejsów w celu skutecznego zamknięcia. Poniżej logo Uncrate wykorzystuje pozytywną przestrzeń na czarnym, negatywnym tle, tworząc litery swojego logo i tworząc branding strony. Jest to również dobry przykład figure-ground, do którego przejdziemy wkrótce.

używanie zamknięcia podczas tworzenia ikon

ikony są przydatne, gdy musimy przekazać wiadomość lub wzmocnić koncepcję na małej przestrzeni. Muszą być proste i zredukowane do podstawowych elementów, aby pomóc ludziom szybko zrozumieć ich znaczenie. Zamknięcie sprawdza się dobrze w tworzeniu ikon, wykorzystując pozytywną i negatywną przestrzeń, aby zmniejszyć złożoność, jednocześnie sugerując kształty lub obiekty, które postrzegamy jako całość, jak w tych przykładach ze strony Noun Project.,

Zamknięcie abstrakcyjne

zamknięcie może stać się dość abstrakcyjne i nadal pozwala nam tworzyć rozpoznawalne wzory. Jednym z moich ulubionych zastosowań zamknięcia jest Google Doodle., Google często wykorzystuje zamknięcie w swoich bazgrołach, polegając na naszej nieodłącznej potrzebie uzupełnienia brakujących informacji, aby utworzyć cały obiekt. Google doodles zależy od naszej znajomości logo Google, które pozwala nam czytać poniższy obraz, mimo że zawiera bardzo abstrakcyjne kształty. Tutaj Kolor pomaga wzmocnić związek między każdą literą logo Google, jak również.,

jak widać, kreatywnie wykorzystując przestrzeń pozytywną i negatywną oraz redukując elementy w naszych projektach, możemy stworzyć naprawdę ciekawe projekty z zamknięciem. Możemy skorzystać z potrzeby uzupełnienia brakujących części, aby zmniejszyć złożoność i uprościć nasze projekty., Następnie przyjrzymy się, w jaki sposób możemy wykorzystać pozytywną i negatywną przestrzeń do tworzenia dobrych relacji figura-Grunt.

figura-Grunt

Jaka jest zasada figury-Grunt? Zgodnie z uniwersalnymi zasadami projektowania, figura-grunt to stan, w którym elementy postrzegamy albo jako obiekty skupienia, albo jako tło. Podobnie jak zamknięcie, figura-Grunt działa poprzez wykorzystanie przestrzeni pozytywnej i negatywnej. Figura-Grunt istnieje praktycznie we wszystkim, co postrzegamy wizualnie, czy to w scenie, kompozycji, witrynie internetowej, logo czy ikonie.,

figure-ground jest stabilny, gdy obiekty są odróżnialne od tła, a tło nie interesuje. Stabilna figura-podłoże zapewnia ustawienie obiektów i pozwala skupić uwagę tam, gdzie chcemy. Na przykład, postrzegamy poniższy obraz jako okrąg na tle. Krąg jest skupiony i trzyma naszą uwagę, podczas gdy tło jest mało interesujące. Przykład ten wykazuje dużą stabilność figury-podłoża, ponieważ postać ma kształt i jest postrzegana jako z przodu, podczas gdy tło jest bezkształtne, kontynuując postać na większej głębokości.,

gdy podłoże liczbowe nie jest stabilne, jak w poniższym przykładzie, wprowadza się niejednoznaczność percepcyjną i relacje między elementami stają się niejasne. W tym celowo uproszczonym przykładzie figura i podłoże są odwracalne, powodując, że na przemian widzimy jeden przedmiot, a następnie drugi jako figurę, a następnie ziemię.

jednak dwuznaczność niekoniecznie jest zła., Ten brak stabilności może być wykorzystany na naszą korzyść podczas projektowania. Celowe destabilizowanie relacji figura-grunt może wprowadzić niezgodę lub napięcie, dodając emocji i zainteresowania naszym projektom. Jednym z moich ulubionych zastosowań tego napięcia w figure-ground jest seria plakatów przestępczego podziemia autorstwa Simona C. Page ' a. Tutaj Page celowo destabilizuje figurę i ziemię, rzucając zasadę przeciwko sobie, ponieważ figura i ziemia walczą o naszą uwagę, podobnie jak bohater i złoczyńca w walce plakatu przeciwko sobie.,

tworzenie dobrych relacji figura-Ziemia

istnieje wiele elementów wizualnych, które możemy wykorzystać do wzmocnienia relacji figura-ziemia w naszych projektach. Korzystanie z tych elementów może pomóc nam skupić uwagę tam, gdzie chcemy, pomagając w zapamiętywaniu strony internetowej lub innego projektu:

• kontrast., Biały lub czarny, w połączeniu z kolorem, Jak widać na plakatach przestępczego półświatka, tworzy bardzo silny kontrast. Podobnie komplementarne kolory doskonale nadają się do tworzenia kontrastu. Jeśli czyste kolory są zbyt intensywne, zmień wartość (jak ciemny lub jasny jest kolor), aby stworzyć bardziej efektywny kontrast.
• Kolor. Ciepłe kolory, takie jak Żółcie, pomarańcze i czerwienie, są postrzegane jako Zbliżające się i mogą być używane do wzmocnienia sylwetki. Chłodne kolory, takie jak Purpury, Błękity i zielenie, są postrzegane jako cofające się i mogą być używane do wzmocnienia podłoża.
• Rozmiar., Gdy duży element wypełnia większość ziemi, będzie postrzegany jako postać. I odwrotnie, mały element w dużej ziemi będzie postrzegany jako postać.
• pozycja. Elementy umieszczone w dolnych obszarach będą postrzegane jako rysunek, natomiast elementy umieszczone w górnych obszarach będą postrzegane jako podłoże. Gra to z naszym postrzeganiem odległości, ponieważ postrzegamy obiekty umieszczone w niższych obszarach, aby być bliżej nas, a obiekty umieszczone w górnych obszarach, aby być dalej.
• Focus., Elementy, które są w centrum uwagi będą postrzegane jako rysunek, podczas gdy elementy, które są nieostre, rozmyte, wyblakłe lub przyciemnione, będą postrzegane jako grunt.

większość dobrych relacji figura-Grunt powstaje z połączenia wielu z tych elementów wizualnych. Następnie przyjrzyjmy się przykładom z prawdziwego świata i zobaczmy, jak te elementy współpracują ze sobą, aby stworzyć udaną sylwetkę.,

figura-Ziemia w praktyce

przykład figury-Ziemia w serii plakatów przestępczego podziemia powyżej pokazuje zasadę w niestabilnym stanie, gdzie postać i ziemia walczą ze sobą o uwagę. Niestabilna figura-Grunt działa dobrze, gdy jest mało elementów, a konstrukcja jest prosta. Jednak niekoniecznie musi to być pożądane wykorzystanie zasady podczas projektowania stron internetowych, chociaż zależy to od treści i kontekstu witryny. Strony internetowe muszą przekazywać złożone informacje i nadal być jasne i użyteczne., Dzięki stabilnej figurze możemy skierować uwagę tam, gdzie chcemy i uniknąć niejednoznaczności przekazu, który staramy się przekazać.

spójrz na poniższy przykład ze strony Apple Music. Najprawdopodobniej twoje oko jest przyciągane do obrazu smartfona, który wraz z kopią po lewej stronie są elementami figury. Podczas gdy tło zaczyna walczyć o naszą uwagę, elementy figury są ulepszane poprzez wykorzystanie wielu elementów wizualnych. Po pierwsze, postać jest wzmocniona przez dużą kopię i duży rozmiar smartfona., Pozycjonowanie smartfona u dołu ekranu pomaga również w przybliżaniu sylwetki. Postać jest dodatkowo ulepszana przez przyciemnianie animacji wideo w tle, powodując cofanie się podłoża. Na koniec kontrast między jasnym ekranem a ciemnym tłem zapewnia dobrą separację między figurą a podłożem.

w następnym przykładzie, ze strony internetowej Naya, rozmiar figury jest najsilniejszym elementem wizualnym używanym do tworzenia dobrej figury-podłoża. Tutaj dostrzegamy kobietę (i jej bardzo duży kapelusz!) jako postać wypełniająca większość ziemi. Co więcej, zastosowanie chłodnego koloru w tle, a także sprytne wykorzystanie nakładających się elementów, pomaga w cofaniu się tła. Wreszcie, jak w przykładzie Apple Music, jest dobry kontrast oddzielający pierwszy plan od tła.,

wreszcie, doskonały kontrast między figurą a podłożem jest siłą strony internetowej R/M Design School. Tutaj menu wykazuje silny kontrast, używając jasnego koloru i czerni, aby oddzielić figurę od ziemi. Ponadto ciepły kolor służy do wzmocnienia percepcji zbliżającej się do nas figury. Nie chcesz po prostu sięgnąć po te czerwone płytki!,

podsumowanie

zrozumienie, jak korzystać z zamknięcia i podstawy rysunku, pomoże Ci zbudować silne relacje i różnice między elementami w twoich projektach.,

• patrz na przestrzeń negatywną tak samo jak na przestrzeń pozytywną, aby odkryć ciekawe formy;
• baw się usuwaniem elementów na pierwszym planie i używaj przestrzeni negatywnej do tworzenia kształtów;
• na koniec mieszaj elementy wizualne, takie jak kontrast, kolor, rozmiar, położenie i ostrość, aby stworzyć stabilne i niestabilne relacje figura-Grunt.

teraz, gdy wiesz, jak wykorzystać te dwie zasady w swojej pracy, idź naprzód i twórz własne angażujące i udane projekty!,

w trzeciej i ostatniej części tej serii skupimy się na zasadach kontynuacji i wspólnego losu, które polegają na ruchu, zarówno implikowanym, jak i animowanym, aby tworzyć relacje.

zasoby i dobre odczyty

• „Zasady Gestalt” na Scholarpedia.
• uniwersalne zasady projektowania poprawione i zaktualizowane: 125 sposobów na zwiększenie użyteczności, wpływ na postrzeganie, zwiększenie atrakcyjności, podejmowanie lepszych decyzji projektowych i nauczanie poprzez projektowanie przez Williama Lidwella, kritinę Holden i Jill Butler. Rockport Pub 2010,
• Information visualization: perception for design by Colin Ware. Elsevier, 2012.

• zasady projektowania: percepcja wzrokowa i zasady Gestalt
• łączenie i oddzielanie elementów poprzez kontrast i podobieństwo
• równowaga kompozycji, symetria i asymetria
• Jak poprawić przepływ pracy poczty e-mail dzięki modułowemu projektowi

(ml, da, og, jb, il)