Złoty podział, czyli boska proporcja

Cały wszechświat zbudowany jest w oparciu o jedną zasadę. Jedną tylko regułę, która rządzi wszelkim porządkiem i nadaje harmonię wszystkiemu istnieniu. Brzmi jak jakiś pseudonaukowy bełkot? Albo, co gorsza, reklama jakiejś sekty? Nie, to tylko złota proporcja, zwana również boską.

Złoty podział, boska proporcja, złota spirala…. wiele nazw, a pod każdą z nich kryje się matematyczny fenomen.
Źródło: depositphotos.com

Może przesadziłem trochę z powyższym stwierdzeniem, ale zależności, jakie można znaleźć w przyrodzie i wielu zjawiskach fizycznych, rzeczywiście pokazują ogromną harmonię i porządek w ukształtowaniu świata. Niemniej nie jest to blog popularnonaukowy, a blog o projektowaniu, zatem ten tekst będzie przede wszystkim o wykorzystaniu zasady złotej proporcji w budowaniu kompozycji we własnych projektach. Co bardziej doświadczeni graficy doskonale wiedzą, jak ważna jest geometria i wszelkie liczby w projektowaniu, warto więc przedstawić chociaż część tego zagadnienia początkującym. Zanim jednak przejdę dalej, w pierwszej kolejności powinienem wyjaśnić, czym w ogóle boska proporcja, czy też złoty podział jest.

Złota proporcja i ciąg Fibonacciego

Kształt spiralnych galaktyk również jest uporządkowany według boskiego porządku.
Źródło: depositphotos.com

Pewien włosi matematyk, znany też jako Leonardo z Pizy, na przełomie XII i XIII wieku opracował ciąg liczb, gdzie każda kolejna liczba w ciągu jest sumą dwóch poprzednich liczb. Wygląda to po prostu tak: „1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144 … Itd.”. Mało imponujące? W końcu to tylko liczby… Rzecz w tym, że to nie są zwykłe liczby – niezwykła jest ich proporcja. Stosunek każdych dwóch sąsiadujących ze sobą liczb w tym ciągu wynosi ~1,61. To właśnie ta proporcja, znana już od starożytności jako liczba φ (fi), jest kluczem do zrozumienia niesamowitej harmonii otaczającego nas świata. A gdzie można znaleźć tę harmonię? Chociażby w przyrodzie: kształty kwiatu słonecznika, kwiatu stokrotki, owocu ananasa, porządek ułożenia gałęzi na pniu drzewa. Ponoć również stosunek ilości pszczół męskich do żeńskich we wszystkich ulach świata także opisuje boska proporcja, na korzyść pszczół żeńskich. Idąc dalej – spirale galaktyk rozwijają się zgodnie ze złotą proporcją, ale z galaktyk zejdźmy na ziemię – spirale na muszli ślimaków również opisuje liczba fi. Przykładów z dziedziny przyrody jest naprawdę wiele, chociażby stosunek kości ludzkiego przedramienia, licząc od pojedynczych kości paliczków, poprzez długość dłoni w proporcji do kości promieniowej – tu cały czas obecny jest złoty podział. Szerzej opisuje to dzieło Leonardo da Vinci, zatytułowane „O boskich proporcjach”, czy też jego rysunek człowieka witruwiańskiego. Trzeba właśnie wspomnieć, że da Vinci poświęcił wiele czasu na badanie liczby fi.

Jak więc wspomniałem, ludzie już od dawna dostrzegali tę zależność. Doszukiwano się w tym rzecz jasna ingerencji Stwórcy, stąd właśnie nazwa „boska proporcja”. Czy rzeczywiście liczba fi jest odciskiem Boga w stworzeniu świata? Tego nie wiemy, jednak proporcje greckiego Panteonu, czy egipskich piramid, które powstały tysiące lat temu, także wpisują się w zasadę złotej proporcji. Również nowożytni artyści, tak architekci, malarze, jak i kompozytorzy muzyki swobodnie czerpali z tej zasady w swoich dziełach. Jeśli chodzi już o samo projektowanie graficzne, to warto wiedzieć, że przez kilka setek lat kanonicznym formatem książek był właśnie stosunek 2:3. Co ciekawe, wielu artystów mogło nieświadomie wykorzystywać złotą proporcję w swoich dziełach – dzięki wysoko rozwiniętemu zmysłowi estetyki mogli po prostu intuicyjnie stosować zasadę złotego podziału, kierując się po prostu pięknem własnych kompozycji. Dzieła oparte na złotej proporcji są po prostu uznawane za estetyczne, harmonijne i miłe dla oka.

Złoty podział w projektowaniu

spirala_1

Na stronie sieci sklepów Ikea wykorzystanie złotej proporcji dostrzeżmy w podziale zdjęcia w nagłówku.
Źródło: Ikea.pl Kliknij, aby powiększyć.

Czas zostawić teraz przyrodę, teorię i starożytnych mistrzów, a przejść po prostu do projektowania, bo w końcu to o budowaniu kompozycji z wykorzystaniem zasady złotego podziału miał być ten wpis. Najprostszym przykładem jest chyba podział treści na stronie internetowej, gdzie mamy treść główną i panel boczny, jak zostało to pokazane na ilustracji obok. Załóżmy, że nasza strona ma szerokość 1280px, zatem obszar przeznaczony na treść powinien mieć szerokość 800px, natomiast obszar boczny – 480px. W ten sposób oba te elementy pozostaną w stosunku do siebie w proporcji 1,61:1, czyli innymi słowy 8:5, co wpisuje się w zasadę złotego podziału. Na stronie sklepu Ikea możemy zauważyć, że główna ilustracja w nagłówku została podzielona właśnie w ten sposób. Szerokość części ze zdjęciem i tytułem w stosunku do części po prawej stronie, gdzie widzimy korzyści płynące z promocji, pozostaje również w relacji 8:5. Co więcej, przycisk „sprawdź”, który jest wezwaniem do akcji, umieszczony jest bardzo blisko centralnego punktu spirali wykreślonej zgodnie ze złotym podziałem.

spirala_2

Strona internetowa National Geographic to również przykład wykorzystania złotego podziału, ale w nieco inny sposób, niż w poprzednim przykładzie.
Źródło: national-geographic.pl Kliknij, aby powiększyć.

pepsi_zloty_podzial

W logo Pepsi okręgi, z których zbudowany jest znak, zachowują zasadę złotej proporcji.
Źródło: www.pepsi.pl/l / opracowanie własne
Kliknij, aby powiększyć.

Z kolei w przypadku strony internetowej National Geographic zastosowano nieco inny porządek. Główny podział strony na szerokości został poprowadzony według proporcji 8:3, co widzimy na ilustracji obok. Jednak widzimy również, że cały nagłówek strony wpisuje się dokładnie w złotą proporcję, jeśli chodzi o relację jego wysokości, do szerokości. I właśnie w ten sposób, kierując się złotym podziałem i ciągiem Fibonacciego, możemy dzielić pozostałe elementy strony. Możemy budować proporcje pomiędzy nagłówkiem i treścią główną, dolnym menu oraz stopką, proporcje elementów w bocznym panelu, wielkość przycisków… kombinacji, gdzie można zastosować złotą proporcję na stronie internetowej jest całe mnóstwo.

Z samym National Geographic sprawa jest o tyle ciekawa, że ich logo, żółty prostokąt, również zostało „dotknięte” złotym podziałem. Wewnętrzne boki tego prostokąta mają proporcję dokładnie 1:1,61. Logo NG to nie jedyny przykład słynnych marek i ich znaków, gdzie wykorzystana została boska proporcja. Logo BP, Pepsi, Toyota, czy iCloud to tylko niektóre z przykładów. Tutaj podobnie, jak w przypadku stron internetowych, złoty podział może odnosić się do całej kompozycji, jak również tylko pojedynczych elementów. Przestrzeń negatywna, w tym nawet po prostu odstęp między sygnetem i logotypem, także może zostać wykreślony za pomocą złotej proporcji. We wpisie Jak powstaje logo opisałem proces projektowania logo na przykładzie znaku stworzonego dla firmy Neat Bytes – to logo również oparłem na złotym podziale.

logo_final

Poszczególny elementy znaku Neat Bytes zostały opracowane na siatce przygotowanej z wykorzystaniem boskiej proporcji.
Źródło: opracowanie własne

W przypadku wspomnianego wcześniej logo iCloud w złoty podział wpisują się zarówno szerokość oraz wysokość chmury, jak i okręgi, które ją tworzą. Co bardziej dociekliwi sprawdzą, że chmura w tym logo nie oddaje idealnie złotego podziału, ale jest mu bardzo bliska. Co więcej, w sieci wisi artykuł, gdzie autor wyczerpująco podważa kształt chmury iCloud, przyznaje jednak, że odstępstwo od boskiej proporcji jest niewielkie. Wspominam jednak o tym dlatego, bo ciekawostką jest fakt, że komentarz pod tym artykułem zamieścił ktoś, kto podaje się za byłego projektanta Apple, mającego związek z tym logo. Co ów projektant napisał? Że zbliżenie tej ikony do złotego podziału jest czysto przypadkowe i nie było to zamiarem osób, które stoją za tym projektem. No cóż, jak napisałem wcześniej, boską proporcję można wykorzystywać nawet zupełnie nieświadomie, co dowodzi tylko wysokiej umiejętności budowania kompozycji. Przytoczony artykuł do znalezienia tutaj.

Wychodząc poza logo i strony internetowe, weźmy dla przykładu dowolny tekst, gdzie mamy nagłówek oraz akapit. Jeżeli treść w akapicie będzie miała wielkość 13pkt., to ustawienie dla nagłówka wielkości 21pkt. również spowoduje zachowanie złotej proporcji. Tak samo będzie w przypadku tekstu akapitowego 16pkt i nagłówka 26px. Dlaczego? Jeżeli 16 pomnożymy przez fi, czyli 1,61, otrzymamy dokładnie 25,76, co w zaokrągleniu da nam wartość 26. Stosowanie złotego podziału w składzie tekstu – wyznaczaniu marginesów, wysokości linii i szerokości akapitu pomaga upiększyć wizualnie tekst i uczynić go łatwiejszym w odbiorze. W tym celu odsyłam do specjalnego kalkulatora, który z wykorzystaniem złotego podziału znacznie ułatwi opracowanie lekkich i czytelnych akapitów – typograficzny kalkulator.

I w tym miejscu chciałbym zakończyć. Przykłady wykorzystania złotego podziału w projektach graficznych mógłbym mnożyć niemal w nieskończoność, ale chciałbym zachęcić was do samodzielnego zgłębienia tematu. Nie brakuje osób, które twierdzą, że cała teoria z boską proporcją jest naciągana i w rzeczywistości nie jest ona ani tak ciekawa, ani przede wszystkim tak powszechna, jak niektórzy by chcieli, aby była. Nie przekonuje ich nawet ogromna liczba przykładów działania tej liczby w naturze, bez ingerencji człowieka. A tych przykładów jest znacznie więcej, niż tu przytoczyłem. Dlatego zachęcam do własnych poszukiwań na ten temat, byście sami mogli lepiej poznać złożony świat liczby fi i wyrobić własne zdanie na ten temat.

Już na sam koniec udostępniam jeszcze do pobrania w formacie wektorowym szablon ze złotą spiralą. No i zachęcam rzecz jasna do eksperymentowania z tą zasadą we własnych kompozycjach.

złota spirala do pobrania

 

  • arko

    „Załóżmy, że nasza strona ma szerokość 1280px, zatem obszar przeznaczony na treść powinien mieć szerokość 800px, natomiast obszar boczny – 480px.”
    Dlaczego obszar przeznaczony na treść, powinien miec akurat 800px?

    • michalgosk

      Ta wartość wynika z podzielenia wyjściowej szerokości 1280px przez liczbę fi, czyli 1,61. Dokładnie wychodzi wtedy 795,03px, jednak po zaokrągleniu fi do 1,6, otrzymamy 800px. Liczby z ciągu Fibonacciego, dzielone kolejno przez siebie, również dają przybliżone wartości: np. 5/3 to 1,66, zaś 13/8 wynosi 1,625.

      • arko

        Myslisz, że do każdego logo można stosowac te proporcje? Spróbowałem coś takiego spróbowac u siebie, zeby sprawdzić jak to działa stosując takie propocje https://postimg.org/image/941o3pg63/
        I wygląda to tak – od góry wersja,w ktorej zastosowałem złoty poział, a u dołu wersja ktora była zrobiona na oko. Ktora lepsza? https://postimg.org/image/941o3pg63/

        • michalgosk

          Myślę, że warto się podpierać tymi proporcjami, ale nie ma potrzeby trzymania się ich za wszelką cenę. Z dwóch wersji, które przedstawiłeś, górna wydaje się być bardziej uporządkowana i regularna. W dolnej pojedyncze „klocki” sygnetu miały losowe szerokości. W górnej widać w tym miejscu jakiś porządek. Myślę jednak, że można jeszcze popracować nad tym znakiem – spróbuj może zróżnicować wielkość tekstu w obu liniach, by zbliżyć je szerokością, poeksperymentuj też z grubością linii tekstu i z samym charakterem fontu. Teraz logotyp zdaje się trochę odstawać od synegtu.