Złoty podział: ostateczny przewodnik po jego zrozumieniu i użyciu

Projektanci na całym świecie powinni wiedzieć o Złotym Raporcie. Jest to matematyczna proporcja, która tworzy estetyczne projekty. Ponieważ Złoty podział tak często występuje w przyrodzie, nie jest niespodzianką, że jego wyniki wyglądają naturalnie.

Zdjęcie Bogomila Mihaylova na Unsplash

Złoty podział ma również kilka innych nazw:

• Boska proporcja
• Złoty środek
• Złota sekcja
• Phi (litera grecka)

Matematyka stojąca za złotym podziałem

Wyjaśnię matematykę Złotego Podziału tak prosto, jak to możliwe i bez wchodzenia w szczegóły, których właściwie nie musisz znać. Jeśli nadążasz za matematyką, świetnie. Ale jeśli nie możesz, to w porządku – nadal będziesz mógł wykorzystać tę koncepcję w swoich projektach.

Aby zrozumieć Złoty Podział, musisz najpierw zrozumieć Złoty Prostokąt

Złoty prostokąt to duży prostokąt, w którym znajduje się kwadrat. Boki kwadratu są równe najkrótszej długości prostokąta:

Źródło: Wikipedia

Złoty podział to liczba (w pewnym sensie) równa 1,618, tak jak pi jest w przybliżeniu równe 3,14, ale nie dokładnie.

Bierzesz linię i dzielisz ją na dwie części – długą (a) i krótką (b). Cała długość (a + b) podzielona przez (a) równa się (a) podzielona przez (b). I obie te liczby to 1,618. Tak więc (a + b) podzielone przez (a) równa się 1,618, a (a) podzielone przez (b) również równa się 1,618.

Wracając do Złotego Prostokąta, bo jest o wiele łatwiejszy do zrozumienia

Kiedy umieścisz kwadrat wewnątrz prostokąta, utworzy się kolejny, mniejszy prostokąt. Zignoruj ​​czarne linie i spójrz na czerwone i zielone pola:

Czerwony kwadrat ma cztery boki równe długości, a długość ta jest równa najkrótszej długości prostokąta. Odcinając ten kwadrat, automatycznie tworzysz kolejny, mniejszy prostokąt (zaznaczony na zielono). Razem tworzą kompletny układ Golden Ratio i podstawę dla Złotej Spirali.

Możesz także zrobić nowy złoty prostokąt z mniejszego prostokąta, takiego jak ten, który nakreśliłem na niebiesko:

Tradycyjny diagram złotego podziału ma osiem złotych prostokątów:

A oto najmniejszy Złoty Prostokąt, #8:

Jeśli zaczniesz w lewym dolnym rogu i wykonasz łuk, aby połączyć dalszą stronę każdego przekroju kwadratowego i małego prostokąta, otrzymasz Złotą Spiralę.

Sekwencja Fibonacciego

Sekwencja Fibonacciego jest dość prosta do zrozumienia: zaczynasz od zera i 1, a następnie otrzymujesz następną liczbę, dodając dwie liczby przed nią. 0 + 1 = 1, potem 1 + 1 = 2 itd. Pierwsze kilka liczb w sekwencji to 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.

Jeśli użyjesz tych liczb do stworzenia kwadratów o tych szerokościach, możesz prawie stworzyć Złotą Spiralę:

Źródło: Matematyka to zabawa

Złote Kręgi

Czasami zamiast lub oprócz spirali zobaczysz narysowane w kwadratach kółka. Jeśli narysujesz idealne okręgi w polach nakładki Golden Ratio, będą miały stosunek 1:1,618 z jednym sąsiednim okręgiem.

Źródło: Wydział Oświetlenia

Logo Pepsi i Twitter wykorzystują Złote Kręgi:

Źródło: Rozmowy o hybrydach

Widziałeś to wcześniej, dużo

Natura jest pełna Złotego Podziału. Jest w florze, muszlach, pogodzie…

Źródło: Zdjęcie Annie Spratt na Unsplash

Źródło: Zdjęcie NASA na Unsplash

A ponieważ widzimy to tak często, nasze mózgi to wolą. Ta wrodzona atrakcja sprawia, że ​​jest to tak potężny układ, z którego mogą korzystać projektanci.

Złoty podział w sztuce i designie

Czasami Golden Ratio jest bardzo łatwe do rozpoznania:

Źródło: staceysdetailinginc.com

Czasami mówisz: „Nie mam pojęcia, o czym mówisz… och, czekaj. Teraz to widzę. Myślę."

Źródło: Marketing Insiders

Innym razem można by oszaleć patrząc na to…

Źródło: Widewalls

…ale jeśli skupisz się na głównym złotym prostokącie, stanie się to trochę bardziej jasne:

Przyjrzyjmy się powszechnie przywoływanemu przykładowi: Partenon

Źródło: Creative Bloq

Na początku możesz to zobaczyć i powiedzieć: „Dla mnie wygląda to po prostu symetrycznie. Jak to, na co patrzę, pasuje do tej złotej spirali prostokąta?

Golden Ratio nie dotyczy tego, jak każda część projektu pasuje całkowicie i tylko do określonych sekcji. Gdyby o to chodziło, prawa strona Partenonu byłaby jednym wielkim blokiem, a lewa podzielona byłaby na mniejsze bloki.

Zamiast tego stosunek jest używany do tworzenia harmonii i proporcji, co można interpretować na kilka różnych sposobów.

Chociaż Złoty podział jest ugruntowany w matematyce, można go dostosować w kreatywny sposób. W przypadku Partenonu Złoty podział określa wysokość i rozmieszczenie elementów konstrukcyjnych. Ponadto istnieje kilka sposobów nałożenia na niego diagramów złotego podziału:

Źródło: Archinect

Źródło: Esther Sugihto na Medium

Źródło: GoldenNumber.net

Złoty podział i projektowanie stron internetowych

Niezależnie od tego, czy interesujesz się matematyką, czy twoja głowa zaraz eksploduje, Golden Ratio jest nieco łatwiejszy do zrozumienia pod względem projektowania. Zrobiłeś ciężkie podnoszenie. Teraz nadszedł czas, aby wziąć podstawową nakładkę i sprawić, by Twoje komponenty sieciowe były idealnie przyjemne.

Złoty podział i układ

Jeśli chcesz uzyskać idealny układ Golden Ratio, ustaw wymiary na 1:1.618. Na przykład możesz ustawić szerokość na 960 pikseli, a wysokość na 594 piksele. Złoty prostokąt ma 594 piksele z każdej strony, a prostokąt zajmuje resztę układu (594 x 366).

Zupa Kalkulator ma pomocny kalkulator złotego podziału, w którym możesz ustawić dowolny termin (A, B lub A + B), aby znaleźć prawidłowe wartości złotego podziału.

Możesz też po prostu użyć tego typu układu dwukolumnowego, w którym jedna kolumna jest nieco szersza niż druga. Jest uporządkowany i jasno pokazuje hierarchię.

Źródło: National Geographic

Używam tego na mojej stronie, ponieważ strona główna jest zbiorem moich postów na blogu i wydaje mi się, że jest to jeden z najbardziej rozpoznawalnych układów dla blogów:

Moim zdaniem jednak symetryczny układ, którego używamy w Elegant Themes, jest bardziej nowoczesny:

Złoty podział i odstępy

Golden Ratio pomoże Ci określić, gdzie umieścić elementy Twojego projektu, jakich proporcji użyć i gdzie zostawić negatywną przestrzeń. Oto prosty przykład i możesz prawie zobaczyć nakładkę Golden Ratio bez konieczności umieszczania jej na wierzchu:

Źródło: Digiarts 2011

Oto jak to wygląda, gdy nakładam Złotą Spiralę w Photoshopie:

Ponownie, Golden Ratio jest ugruntowany w matematyce, ale jeśli chodzi o zastosowanie go w projektowaniu, nie jest doskonały. Ten projekt nie jest tworzony na złotym prostokącie, więc złota spirala nie ma normalnych proporcji. Możesz jednak zobaczyć, jak może pomóc projektantowi wybrać, gdzie umieścić największy element projektu, a także najmniejsze elementy i negatywną przestrzeń.

Możesz także nakładać nakładkę Golden Ratio, aby zastosować ją do różnych elementów tego samego projektu:

Źródło: Branding Lemongraphic. Przykład z serwisu Canva.

Złoty podział i treść

Kiedy myślisz o układzie i odstępach Golden Ratio, możesz zacząć decydować, gdzie umieścić treść na swojej stronie.

Spójrzmy ponownie na witrynę National Geographic, tym razem z nakładką Golden Ratio w serwisie Canva:

Układ jest podzielony w taki sposób, że zawartość jest wyrównana wzdłuż linii środkowej spirali. Po lewej stronie znajduje się duży blok treści. Po prawej zawartość staje się gęstsza i jest o wiele więcej miejsca na negatywy. W kierunku środkowego zakrętu spirali zobaczysz drugie logo National Geographic – nie ma lepszego sposobu na promowanie marki domu niż umieszczenie go tam, gdzie naturalnie podąża oko.

Oto świetny przykład tego, jak Złota Spirala może prowadzić Twoje oko przez projekt, nawet poza jego głównym elementem. Jest to przydatne, jeśli masz dużo treści do ściągnięcia na jednej stronie. Zauważysz również, że nawet przy tak upakowanym i szczegółowym projekcie nadal jest w nim negatywna przestrzeń.

Źródło: Design by Helms Workshop. Przykład z serwisu Canva.

Wyróżnienie: Złoty podział i obrazy

Złoty podział jest również używany w kompozycji fotograficznej. Zamiast tworzyć złotą spiralę, Golden Ratio dzieli obraz na sześć bloków. Ten sam Golden Ratio jest używany w tego typu siatkach: szerokości i wysokości sekcji wynoszą 1 lub 0,618.

Źródło: Canva

Następnie użyj skrzyżowań, aby skomponować ujęcie. Celem jest umieszczenie obiektu lub głównej części obiektu na jednej z przecinających się linii – obiekt nie powinien być wyśrodkowany, a niektóre bloki powinny pozostać puste (przynajmniej w większości przypadków – makrofotografie i portrety z bliska wypełni prawie całą ramkę). W ten sposób tworzysz ciekawszy portret, niż gdyby obiekt był wyśrodkowany.

O wiele prostszym i bardziej przystępnym sposobem przestrzegania tej zasady jest użycie siatki Reguła Trzecich, którą prawdopodobnie masz na wbudowanej kamerze telefonu lub lustrzance cyfrowej.

Oto zdjęcie, które zrobiłem synowi mojego kuzyna. Nałożyłem na nią siatkę Reguła trójpodziału, aby pokazać, gdzie obiekt wypełnia ramkę, a gdzie nie.

Zobacz także, jak Złota Spirala niemal idealnie owija się wokół tematu:

Złoty podział różni się od zasady trójpodziału, ponieważ siatka zasady trójpodziału zawiera sekcje o jednakowych długościach i szerokościach. Jest jednak tak blisko – i o wiele łatwiej – że to jest to, czego fotografowie często używają podczas komponowania lub edycji zdjęcia.

Zawijanie

Golden Ratio może być używany tak, jak jest lub dostosowany do twoich celów i dostosowany do rozmiaru – matematyka może mieć twarde i szybkie zasady, ale kreatywność nie. Chociaż możesz użyć Złotego współczynnika od samego początku, aby kierować swoim projektem, możesz go również użyć po rozpoczęciu projektowania, aby wprowadzić poprawki i ulepszenia. Celem jest, aby proporcje Cię prowadziły, a nie na siłę dopasowywać do nich projekt.

Gotowy do jeszcze większej zabawy z układem strony? Zapoznaj się z naszym artykułem na temat korzystania z nowych opcji wysokości i szerokości Divi do tworzenia responsywnych projektów.