Design Principles: Compositional, Symmetrical And Asymmetrical Balance

Steven Bradley

About The Author

Steven Bradley jest autorem książki Design Fundamentals: Elements, Attributes, & Principles oraz CSS Animations and Transitions for the Modern Web. When not …More aboutSteven Bradley↬

  • 18 min read
  • Inspiracja,Projektowanie,Kreatywność,Zasady projektowania
  • Zapisane do czytania w trybie offline
  • Share on Twitter, LinkedIn
Zrównoważona kompozycja czuje się dobrze. Czuje się stabilna i estetycznie przyjemna. Podczas gdy niektóre z jej elementów mogą być punktami centralnymi i przyciągać wzrok, żaden z obszarów kompozycji nie przyciąga wzroku tak bardzo, że nie można zobaczyć innych obszarów.Równoważenie kompozycji polega na rozmieszczeniu zarówno pozytywnych elementów, jak i negatywnej przestrzeni w taki sposób, że żaden obszar projektu nie przytłacza innych obszarów. Wszystko działa razem i pasuje do siebie w płynną całość. Poszczególne części przyczyniają się do ich sumy, ale nie próbują stać się sumą.

Zrównoważona kompozycja czuje się dobrze. Czuje się stabilny i estetycznie przyjemny. Podczas gdy niektóre z jej elementów mogą być punktami centralnymi i przyciągać wzrok, żaden z obszarów kompozycji nie przyciąga wzroku tak bardzo, że nie można zobaczyć innych obszarów.

Zrównoważenie kompozycji polega na rozmieszczeniu zarówno pozytywnych elementów, jak i negatywnej przestrzeni w taki sposób, że żaden z obszarów projektu nie dominuje nad innymi. Wszystko działa razem i pasuje do siebie w płynną całość. Poszczególne części przyczyniają się do ich sumy, ale nie próbują stać się sumą.

Niezrównoważona kompozycja może prowadzić do napięcia. Kiedy projekt jest niezrównoważony, poszczególne elementy dominują nad całością, a kompozycja staje się mniejsza niż suma jej części. W niektórych projektach, brak równowagi może być odpowiedni dla przekazu, który próbujesz przekazać, ale generalnie chcesz kompozycji zrównoważonych.

Uwaga: To jest siódmy i ostatni post w serii na temat zasad projektowania. Pierwsze sześć postów można znaleźć tutaj:

  • Zasady projektowania: Percepcja wzrokowa i zasady Gestalt
  • Zasady projektowania: Przestrzeń i relacja figura – ziemia
  • Zasady projektowania: Łączenie i rozdzielanie
  • Zasady projektowania: Waga wizualna i kierunek wizualny
  • Zasady projektowania: Dominacja, Punkty Centralne i Hierarchia
  • Zasady Projektowania: Compositional Flow and Rhythm

Szczęście nie jest kwestią intensywności, ale równowagi, porządku, rytmu i harmonii.- Thomas Merton

Physical And Visual Balance

Balans jest łatwy do zrozumienia w świecie fizycznym, ponieważ doświadczamy go cały czas. Kiedy coś jest niezrównoważone, ma tendencję do przewracania się. Ty prawdopodobnie byłeś na huśtawce lub teeter-totter przy niektóre czasem w twój życiu – ty na jednej stronie i przyjaciel na innej.

Zakładając, że oboje byliście wokoło ten sam rozmiar, ty byłeś sprawnie balansować na huśtawce. Poniższy obrazek wydaje się być w równowadze, z dwoma jednakowej wielkości ludźmi, równie odległymi od punktu podparcia, na którym huśtawka balansuje.

Design Principles: Compositional, Symmetrical And Asymmetrical Balance
Symetrycznie zrównoważona huśtawka.

Osoba po lewej stronie powoduje, że huśtawka obraca się w kierunku przeciwnym do ruchu wskazówek zegara, a osoba po prawej stronie powoduje, że huśtawka obraca się w kierunku zgodnym z ruchem wskazówek zegara o taką samą wartość. Siła każdej z osób działa w innym kierunku, a ich suma wynosi zero.

Gdyby jednak jedna z osób była znacznie większa, równowaga zostałaby zachwiana.

Nierównowaga na huśtawce
Nierównowaga na huśtawce.

Ten obraz nie jest prawidłowy, ponieważ wiemy, że osoba po lewej stronie nie jest wystarczająco duża, aby zrównoważyć osobę po prawej. Siła ruchu wskazówek zegara powinna być znacznie większa, a huśtawka powinna dotykać ziemi po prawej stronie.

Jednakże, jeśli większa osoba wsunie się do środka, huśtawka znów będzie w równowadze.

Asymetrycznie zbalansowana huśtawka
Asymetrycznie zbalansowana huśtawka.

W tym przypadku siła większej osoby jest mniejsza przez to, że znajduje się ona bliżej fulcrum, na którym huśtawka się balansuje. I’ll trust you’ve been on a seesaw before or at least watched others play on one and that you have a pretty good sense of what’s going on.

Visual balance is similar. Fizyczny ciężar jest zastąpiony przez ciężar wizualny. Kierunek, w którym działa fizyczna waga jest zastąpiony przez kierunek wizualny.

Dla przypomnienia, poniżej znajdują się definicje wagi wizualnej i kierunku wizualnego, chociaż odsyłam Cię do czwartego postu w tej serii po więcej szczegółów.

  • Waga wizualna. Jest to postrzegana waga elementu wizualnego. Jest to miara tego, jak bardzo coś na stronie przyciąga wzrok odbiorcy.
  • kierunek wizualny. Jest to postrzegany kierunek siły wizualnej. Jest to kierunek, w którym naszym zdaniem element powinien się poruszać, gdyby miał szansę poruszać się zgodnie z działającymi na niego siłami.

Nie używasz przyrządów do mierzenia sił. Nie używasz wzorów, aby obliczyć, czy wszystko jest w równowadze. Raczej, ty używasz twój oko określać czy kompozycja jest zrównoważona.

Why Visual Balance Is Important

Tak jak w fizycznym świecie, wizualna równowaga jest dobrą rzeczą. Jest pożądana sama w sobie. Niezrównoważona kompozycja może czuć się niekomfortowo dla widza. Spójrz na drugi z trzech obrazów huśtawki – wygląda źle, ponieważ możemy stwierdzić, że huśtawka nie powinna być w równowadze.

Waga wizualna jest miarą wizualnego zainteresowania elementem lub obszarem w projekcie. Kiedy kompozycja jest wizualnie zrównoważona, każda jej część jest interesująca. Zainteresowanie wizualne jest zrównoważone, co utrzymuje widzów zaangażowanych w projekt.

Bez równowagi wizualnej, widzowie mogą nie zobaczyć wszystkich obszarów projektu. Prawdopodobnie nie będą spędzać czasu w obszarach o mniejszej wadze wizualnej lub zainteresowaniu. Każda informacja w tych obszarach może łatwo pozostać niezauważona.

Wyrównasz projekt wizualnie, ponieważ chcesz zrównoważyć punkty zainteresowania w kompozycji, tak aby widzowie spędzili czas z wszystkimi informacjami, które chcesz przekazać.

Cztery rodzaje równowagi

Jest więcej niż jeden sposób na zrównoważenie kompozycji. Obrazy w poprzedniej sekcji pokazują dwa z nich. Pierwszy obraz jest przykładem symetrycznego balansu, a drugi jest przykładem asymetrycznego balansu. Dwa inne rodzaje równowagi to radialna i mozaikowa.

Równowaga symetryczna
Równowaga symetryczna.

Równowaga symetryczna występuje, gdy równe wagi znajdują się po równych stronach kompozycji, zrównoważone wokół punktu podparcia lub osi w centrum. Równowaga symetryczna wywołuje uczucia formalności (czasami nazywana jest równowagą formalną) i elegancji. Zaproszenie ślubne jest dobrym przykładem kompozycji, która prawdopodobnie chciałaby być symetrycznie zrównoważona.

Wadą symetrycznej równowagi jest to, że jest statyczna i czasami uważana za nudną. Ponieważ połowa kompozycji odzwierciedla drugą połowę, co najmniej połowa kompozycji będzie raczej przewidywalna.

Równowaga symetryczna
Równowaga symetryczna.

Równowaga asymetryczna wynika z nierównej wagi wizualnej każdej ze stron kompozycji. Jedna strona kompozycji może zawierać dominujący element, który może być zrównoważony przez kilka lub więcej mniej istotnych punktów po drugiej stronie. Jeden wizualnie ciężki element na jednej stronie może być zrównoważony przez garść lżejszych elementów na drugiej.

Asymetryczna równowaga jest bardziej dynamiczna i interesująca. To wywołuje uczucia modernizmu, ruchu, energii i witalności. Asymetryczna równowaga oferuje więcej wizualnej różnorodności, choć może być trudniejsza do osiągnięcia, ponieważ relacje między elementami są bardziej złożone.

Radial balance
Radial balance.

Radial balance występuje, gdy elementy promieniują od wspólnego centrum. Promienie słoneczne i fale w stawie po tym jak kamień jest rzucony w są przykładami promienistej równowagi. Utrzymanie punktu centralnego (fulcrum) jest łatwe, ponieważ zawsze jest to centrum.

Ponieważ wszystko promieniuje od wspólnego centrum, wszystko również prowadzi do tego centrum, co czyni go silnym punktem przyciągania.

Równowaga mozaikowa
Równowaga mozaikowa.

Równowaga mozaikowa (lub równowaga krystalograficzna) wynika ze zrównoważonego chaosu. Pomyśl o obrazach Jacksona Pollacka. Kompozycji brakuje wyraźnych punktów centralnych, a elementy dzielą się jednolitym akcentem. Brak hierarchii prowadzi do wizualnego hałasu na pierwszy rzut oka. Jakoś, chociaż, to wszystko działa razem.

Symetria i asymetria

Zarówno symetria i asymetria mogą być używane w całej kompozycji, niezależnie od, ale przyczyniając się do, końcowej równowagi. Możesz mieć symetryczne formy w asymetrycznie zrównoważonej kompozycji i vice versa.

Symetria jest zwykle postrzegana jako piękna i zharmonizowana; jednakże, może być również postrzegana jako statyczna i nudna. Asymetria ma tendencję do bycia bardziej interesującą i dynamiczną, mimo że nie jest uważana za wewnętrznie piękną.

Symetria

Są trzy podstawowe typy symetrii.

Symetria odbicia (lub symetria dwustronna) występuje, gdy wszystko jest odbite wokół osi centralnej. Jest to prawdopodobnie pierwsza rzecz, o której myślisz, gdy słyszysz słowo „symetria”. Oś może być w dowolnym kierunku lub orientacji, choć często jest pionowa lub pozioma.

Wszystko po jednej stronie osi jest odzwierciedlone po drugiej stronie. Naturalne formy, które rosną lub poruszają się po powierzchni ziemi rozwijają symetrię odbicia. Ludzka twarz i motyl są przykładami.

Gdy odbicie jest doskonałym lustrzanym odbiciem, symetrię określa się jako czystą. Dużo czas ono no będzie perfect i each strona będzie mieć nieznacznie wariacje. To jest bliska symetria, i to jest bardziej powszechne niż czysta symetria.

Symetria może nawet wystąpić na wielu osiach w tym samym czasie. Na przykład, lewa i prawa połowa kompozycji może być lustrzanym odbiciem siebie nawzajem, podczas gdy góra i dół również odzwierciedlają się nawzajem. Płatki śniegu pokazują symetrię odbicia na więcej niż dwóch osiach.

Symetria obrotowa (lub symetria radialna) występuje, gdy wszystko obraca się wokół wspólnego centrum. To może zdarzać się przy dowolnym kącie lub częstotliwości, tak długo jak jest wspólne centrum. Naturalne formy, które rosną lub poruszają się prostopadle do powierzchni ziemi, rozwijają symetrię obrotową. Przykładem są płatki słonecznika. Obrót bez odbicia może być wykorzystany do pokazania ruchu, prędkości lub dynamicznej akcji. Pomyśl o wirujących kołach poruszającego się samochodu.

Symetria translacyjna (lub symetria krystalograficzna) występuje, gdy elementy są powtarzane w różnych miejscach w przestrzeni. Powtarzające się słupki ogrodzeniowe są tego przykładem. Powtórzenie tworzy symetrię translacyjną. Może ona występować w dowolnym kierunku i w dowolnej odległości, tak długo jak podstawowa orientacja jest taka sama. Naturalne formy rozwijaj± symetrię translacyjn± poprzez reprodukcję. Możesz stworzyć rytm, ruch, prędkość i dynamiczne działanie poprzez symetrię translacyjną.

Motyl jest przykładem symetrii odbiciowej, słupki ogrodzenia pokazują symetrię translacyjną, a słonecznik jest przykładem symetrii radialnej
Motyl jest przykładem symetrii odbiciowej, słupki ogrodzenia pokazują symetrię translacyjną, a słonecznik jest przykładem symetrii radialnej.

Symetryczne formy są powszechnie postrzegane jako figura, w przeciwieństwie do ziemi. Symetryczna forma będzie miała większą wagę niż podobnej wielkości i kształtu forma asymetryczna.

Symetryczne formy przekazują równowagę same w sobie, ale mogą wydawać się zbyt stabilne i zbyt zrównoważone, co prowadzi do braku zainteresowania. Symetryczne formy prowadzą również do pasywnej przestrzeni, ponieważ przestrzeń negatywna jest równa wokół formy.

Asymetria

Asymetryczne formy nie mają równowagi form symetrycznych, chociaż można asymetrycznie zrównoważyć całą kompozycję. Asymetria jest dość powszechna w formach naturalnych: prawdopodobnie jesteś prawo- lub leworęczny; kraby skrzypłocze mają różnej wielkości pazury; gałęzie drzew rosną w różnych kierunkach; chmury mają przypadkowe kształty.

Asymetria tworzy bardziej złożone relacje między elementami, a więc ma tendencję do bycia bardziej interesującą niż symetria. Ponieważ jest bardziej interesująca, asymetria może być użyta do przyciągnięcia uwagi.

Przestrzeń wokół form asymetrycznych jest bardziej aktywna. Tworzone są nieprzewidywalne wzory i ogólnie rzecz biorąc masz więcej swobody ekspresji z asymetrią niż z symetrią. Kompromisem jest to, że jest to trudniejsze do osiągnięcia.

W podobny sposób, jak podobieństwo i kontrast działają razem, możesz połączyć symetrię i asymetrię, aby uzyskać dobry efekt. Zrównoważ symetryczne formy w asymetryczny sposób, lub zrównoważyć asymetryczne formy symetrycznie. Rozbij symetryczne formy przypadkowym znakiem, aby dodać zainteresowania. Kontrastuj symetrię i asymetrię w swojej kompozycji, aby elementy przyciągały więcej uwagi.

Zasady gestalt

Przez całą tą serię starałem się wskazać jak wiele zasad projektowania wynika z zasad gestalt. Mam również nadzieję, że śledząc ten temat, zauważyłeś, jak różne zasady projektowania opierają się na sobie nawzajem.

Jedna z zasad gestalt odnosi się w szczególności do symetrii i porządku i z pewnością ma zastosowanie do równowagi kompozycyjnej. Nie jest to jedyna zasada, która ma zastosowanie, chociaż.

Prostota form symetrycznych jest przewidziana przez prawo Prägnanz. Zasady Gestalt takie jak punkty centralne i podobieństwo przyczyniają się do wizualnej wagi. Zasady takie jak kontynuacja, wspólne przeznaczenie i paralelizm nadają kierunek wizualny. Wspomniałem również, że formy symetryczne są częściej postrzegane jako figury niż jako ziemia.

Mam nadzieję, że pomysł, że zasady gestalt prowadzą do wielu zasad projektowania, które nami kierują, stał się jaśniejszy po przeczytaniu tej serii. Zasady projektowania, którymi się kierujemy, nie wzięły się z powietrza; wyłoniły się z psychologii sposobu, w jaki postrzegamy nasze środowisko wizualne.

Przykłady

Czas na zrzuty ekranu. Mam kilka stron internetowych więcej niż zwykle do tego ostatniego artykułu w serii, i pogrupowałem je zgodnie z czterema typami równowagi.

Jak już powtarzałem w całej serii, to co następuje jest moją opinią. To jest jak widzę równowagę w tych projektach. Ty możesz widzieć to inaczej, co jest w porządku. Krytyczne myślenie o projektach jest ważniejsze niż nasze zgadzanie się o tym co myślimy.

Przykłady symetrycznej równowagi

Projekt całej strony internetowej Helen & Hard jest symetrycznie zrównoważony. Zrzut ekranu tutaj jest ze strony „O”, ale inne strony witryny są podobnie zrównoważone.

Zrzut ekranu strony Helen Hard's
Zrzut ekranu strony „O” Helen & Hard’s. (Zobacz dużą wersję)

Wszystko odbija się wokół pionowej osi w dół środka strony. Logo jest wyśrodkowane, pasek nawigacyjny jest wyśrodkowany, okrągłe obrazki są wyśrodkowane, nagłówek jest wyśrodkowany, a trzy kolumny tekstu są wyśrodkowane.

Równowaga nie jest idealnie symetryczna. Kolumny mają różne ilości tekstu, na przykład.

Jednakże, zauważ górę strony. Zarówno logo jak i pasek nawigacyjny są wyśrodkowane, ale nie wydają się być wizualnie wyśrodkowane. Moje oko chciałoby, aby logo było wyśrodkowane na ampersandzie, lub przynajmniej bliżej niego. Trzy pozycje menu po prawej stronie paska nawigacyjnego mają więcej liter niż te po lewej. Moje oko chce, aby były takie same i chce, aby centrum znajdowało się pomiędzy linkami „O” i „Ludzie”.

Myślę, że przesunięcie tych dwóch elementów poza centrum, aby wyglądały jak wizualnie wyśrodkowane, zrównoważyłoby kompozycję trochę lepiej.

Strona główna Tilde jest kolejnym projektem, który jest symetrycznie zrównoważony. Podobnie jak Helen & Hard, wszystko tutaj obraca się wokół pionowej osi biegnącej w dół przez środek strony: nawigacja, tekst, ludzie na zdjęciu. To jest to samo, gdy przewijasz stronę w dół.

0Zrzut ekranu ze strony głównej Tilde
Zrzut ekranu ze strony głównej Tilde. (Zobacz dużą wersję)

Tak jak w przypadku Helen & Hard, symetria nie jest czysta. Wyśrodkowane linie tekstu nie są lustrzanymi odbiciami, dla jednej rzeczy. Ponadto, kilka elementów jest wyłączonych: strzałka „Poznaj zespół” skierowana w prawo oraz tekst na dole strony zakończony inną strzałką skierowaną w prawo.

Oba są wezwaniami do działania i oba łamią symetrię, zwracając na siebie dodatkową uwagę. Zauważ jak obie strzałki używają kolorów, które kontrastują z ich tłem, dodatkowo zwiększając atrakcyjność tych elementów.

Przykłady asymetrycznej równowagi

Strona główna portfolio Carrie Voldengen wykazuje ogólną asymetryczną równowagę wokół dominującej symetrycznej formy. Patrząc na ogólną kompozycję, widzę kilka dyskretnych kształtów.

Zrzut ekranu ze strony Carrie Voldengen
Zrzut ekranu ze strony Carrie Voldengen. (Zobacz dużą wersję)

Masa strony to duży prostokąt, który składa się z siatki mniejszych prostokątnych obrazków. Sama siatka jest symetryczna wokół osi pionowej i poziomej. Sprawia wrażenie bardzo mocnej i stabilnej. Sama w sobie jest bardzo zrównoważona i wygląda jakby nigdzie się nie wybierała.

Po prawej stronie, blok tekstu ciągnie w dół kształt. Jest on równoważony przez tekst i okrągłe logo w lewym górnym rogu. Oba zapewniają względnie równą ilość wizualnego ciężaru działającego na siatkę w przeciwnych kierunkach.

Odległość do wyobrażonego punktu podparcia jest mniej więcej taka sama jak ciężary. Tekst po prawej stronie jest większy i ciemniejszy, ale niebieskie okrągłe logo nadaje większą wagę jego ogólnemu obszarowi. Koło nawet łączy się z lewym górnym rogiem siatki poprzez jeden kolor.

Tekst poniżej siatki wydaje się z niej zwisać, i jest wystarczająco lekki sam w sobie, aby nie wytrącić kompozycji z równowagi.

Zauważ, że przestrzeń również wydaje się zrównoważona. Obszary na dole po lewej, wzdłuż prawego górnego rogu i na dole po prawej, w tym trochę na dole po prawej, równoważą się nawzajem. Obszar po lewej jest większy niż obszar po prawej, ale po prawej ma dodatkową przestrzeń na górze i na dole.

Obrazy na górze strony głównej Hirondelle USA obracają się. Zrobiłem zrzut ekranu specjalnie po to, aby porozmawiać o asymetrycznej równowadze ustanowionej na górze strony.

Zrzut ekranu z Hirondelle USA
Zrzut ekranu z Hirondelle USA. (View large version)

Kolumna na zdjęciu jest nieco poza centrum i zakotwicza kompozycję mocną pionową linią – to obiekt, o którym wiemy, że dużo waży. Barierka po lewej stronie zapewnia silne połączenie z lewą krawędzią ekranu. Również ona sprawia wrażenie zakotwiczonej. Trudno sobie wyobrazić, aby jakikolwiek element projektu na stronie wytrącił któryś z nich z równowagi.

Tekst powyżej barierki czuje się przez nią podtrzymywany; jednakże jest on również wizualnie zrównoważony przez obraz chłopca po prawej stronie. Możesz zobaczyć poręcz jako zwisającą z lewej strony słupa, wytrącając go z równowagi, ale myślę, że wewnętrzne zainteresowanie chłopca, jak również ciemniejsze wartości w tle za nim równoważą zarówno poręcz, jak i tekst po lewej stronie i utrzymują rzeczy w równowadze.

Jest poczucie symetrii tłumaczenia, ponieważ złote linie tekstu powtarzają się w lewym górnym i prawym dolnym rogu obrazu, jak również w przycisku dalej w dół strony. Biały tekst jest również powtarzany.

Przykłady Równowagi Radialnej

Strona główna Vlog.it wykazuje równowagę radialną, co mam nadzieję jest jasne na zrzucie ekranu. Poza kształtem w prawym górnym rogu, wszystko kręci się wokół środka strony, jak trzy pierścienie obrazów obracają się wokół koła.

Zrzut ekranu z Vlog.it
Zrzut ekranu z Vlog.it. (Zobacz dużą wersję)

To, czego nie widać na zrzucie ekranu, to sposób ładowania strony. Linia jest rysowana od lewego dolnego rogu do środka strony. Od tego momentu prawie wszystko, co pojawia się na stronie, obraca się wokół centrum lub promieniuje od niego, jak fale w stawie.

Mniejsze koło w prawym górnym rogu dodaje trochę symetrii i asymetrii, zwiększając wizualne zainteresowanie kompozycją.

Strona główna Shiny Demos Opery nie jest okrągła, ale wszystkie linki tekstowe wydają się emanować ze wspólnego lub bliskiego wspólnego centrum. Łatwo sobie wyobrazić, że cały kształt kręci się wokół jednego z kwadratów w środku lub może jednego z rogów, gdzie spotykają się cztery kwadraty.

Zrzut ekranu z Shiny Demos Opery
Zrzut ekranu z Shiny Demos Opery. (Zobacz dużą wersję)

Nagłówek Shiny Demos w lewym górnym rogu i logo Opery w prawym dolnym równoważą się wzajemnie i wydają się promieniować z tego samego środka co linki tekstowe.

Jest to dobry przykład jak równowaga radialna niekoniecznie wymaga użycia okręgów.

Przykłady Równowagi Mozaikowej

Można by się spodziewać, że równowaga mozaikowa jest najmniej używana w sieci, szczególnie po tym jak zaproponowałem obrazy Jacksona Pollacka jako przykład równowagi mozaikowej. Wiele więcej przykładów jest online niż możesz sobie uświadomić.

Strona główna Rabbit’s Tale była dobrym przykładem. Był tam z pewnością przypadkowy i chaotyczny nastrój z literami rozrzuconymi wokół, ale równowaga w kompozycji działa.

Zrzut ekranu z Rabbit's Tale
Zrzut ekranu z Rabbit’s Tale. (View large version)

Po obu stronach (prawej i lewej) znajdują się niemal równe obszary kolorów i przestrzeni, które wzajemnie się równoważą. Królik na środku służy nawet jako punkt podparcia. Może się też trochę wyróżniać po tym, jak go zobaczysz, ale ogólnie elementy nie zwracają na siebie uwagi indywidualnie.

Nie będę próbował dowiedzieć się, które elementy równoważą się nawzajem, jeden element na raz, ale mam nadzieję, że zgodzisz się, że istnieje ogólna równowaga. Jeśli cokolwiek, chaos jest ważniejszy po prawej stronie, ale nie do punktu wytrącenia z równowagi.

Strony internetowe o dużej zawartości treści, takie jak serwisy informacyjne i magazyny, również wykazują równowagę mozaikową. Możesz rozpoznać stronę główną The Onion. Na zrzucie ekranu, usunąłem obraz tła za górną częścią strony.

Zrzut ekranu z The Onion
Zrzut ekranu z The Onion. (Zobacz dużą wersję)

Jest na co popatrzeć. Układ nie jest symetryczny. Kolumny nie są równej wielkości. Trudno określić, co jest przeciwwagą dla czego. Bloki treści mają różną ilość treści w środku, a co za tym idzie, są różnej wielkości. Nic nie promieniuje ze wspólnego centrum.

Jest trochę chaosu i przypadkowości w blokach o różnych rozmiarach, niektóre gęstsze niż inne. Ponieważ historie na stronie zmieniają się codziennie, każdego dnia pojawi się inny chaos. Ogólnie rzecz biorąc, to działa.

Może to przesada powiedzieć, że jest to równowaga mozaikowa, ale ponownie twierdzę, że tak jest i że wiele stron internetowych wykazuje ten rodzaj chaotycznej równowagi, chociaż coś mi mówi, że wiele z chaosu, który widzimy w sieci nie było zaplanowane.

Podsumowanie

Trochę to trwało, zanim tu dotarliśmy, ale to kończy naszą serię na temat zasad projektowania. Mam nadzieję, że Ci się podobało, nauczyłeś się czegoś nowego lub uznałeś tę serię za dobry przegląd podstawowych zasad projektowania.

Jak możesz się domyślić, uważam, że podstawy są ważne. Rozpocząłem tę serię, aby pokazać, jak wszystkie te zasady wynikają z ludzkiej percepcji i teorii gestalt. Nie wymyśliłem ich. Zasady te opierają się na tym, jak wszyscy postrzegamy i interpretujemy nasze środowisko wizualne.

Na przykład, jednym z powodów, dla których zauważamy punkty centralne jest to, że kontrastują one z otaczającymi je elementami. Wyróżniają się jako inne. Jest to ważne, gdy trzeba szybko określić, kto jest przyjacielem, a kto wrogiem. Ta umiejętność była ważna dla naszego przetrwania jako gatunku, dlatego nasze oczy rozwinęły się, aby szybko to stwierdzić.

Jednakże zasady projektowania nie są twardymi i szybkimi regułami. To wskazówki. Nie ma jednego słusznego sposobu, aby zakomunikować, że dwa elementy są podobne lub różne, na przykład. Nie musisz przestrzegać żadnej z tych zasad, chociaż powinieneś je rozumieć i mieć powód, aby je łamać.

Powtarzam, mam nadzieję, że podobała Ci się ta seria, a jeszcze bardziej mam nadzieję, że coś z tej serii dało Ci większą kontrolę nad komunikacją wizualną w Twoich projektach.

Dodatkowe zasoby

  • „Is Your Web Design Balanced?”, Steven Bradley
  • „A Study of Symmetry: When, Where, and Why to Use It,” James George
  • „Visual Balance,” Cheryl Qian
  • „Balance – Symmetry,” James T. Saw
  • „Understanding the Importance of Balance in Graphic Design,” Mark Masters
  • „Photography Rules of Composition: Visual Weight,” Julie Waterhouse
  • „Zasady projektowania: Balance,” Charlotte Jirousek
  • „A Fine Balance,” Erik Spiekermann
  • „Art and Visual Perception by Rudolph Arnheim: Notes by Frederic F. Leymarie” (PDF) Notatki Leymarie’go dotyczące książki Arnheima.
  • „Map Design” (PDF), z Cartography: Thematic Map Design, Borden Dent and Jeff Torguson Ten rozdział książki dotyczy zasad projektowania omawianych w tej serii.
Smashing Editorial(il, ml, al)

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *