Blog

O zlatom reze a jeho aplikáciách v dizajne

Ľudovít Nastišin - 11.04.2021 - Vzdělávání

V dizajne ako takom je veľmi dôležité, aby bol výsledok práce jasný a každý mu chápal. Či už je to vo forme zalomenia textu, orezania fotografie alebo navrhnutia loga. Za týmto účelom sa okrem iných pomôcok často využíva aj aplikácia zlatého rezu, o ktorom si teraz niečo povieme. 

Z angl. „Golden ratio“  hovoríme o konkrétnom matematickom pomere, ktorý sa veľmi často vyskytuje aj v prírode a dizajnové odvetvie sa nim inšpiruje. Zlatý rez nám pomáha dosiahnuť čo najprirodzenejšie pôsobiace proporcie, tvary či štruktúry.

Zlatý rez vznikol už v starovekom Grécku

Ide o veľmi špeciálne číslo – 1,618. Vychádza zo známej Fibonacciho postupnosti a jeho aplikáciu môžeme nájsť aj v prírode, napríklad v tvare morskej mušle či vo formácii oblakov pri hurikánoch. Táto postupnosť  je tvorená vždy sumou dvoch predchádzajúcich čísel (0-1-1-2-3-5-8-13-21-...). A práve z tejto sekvencie odvodili už v starovekom Grécku zlatý rez (golden ratio), aby vedeli lepšie vyjadriť rozdiely medzi číslami sekvencie.

Ako používať zlatý rez v dizajne

Aplikácie zlatého rezu do dizajnérskej profesie vôbec nie je tak náročná, ako by sa mohlo na prvý pohľad zdať. Jeho využitím môžeme vytvárať napríklad proporcionálne layouty na web. Ak chceme navrhnúť web, ktorý má vedľa priestoru pre hlavný obsah aj sidebar, tak práve s využitím zlatého rezu vieme stanoviť ich presnú šírku

Ak by sa jednalo povedzme o priestor so šírkou 960px, tak priestor pre hlavný obsah by mal mať šírku 593px (960px / 1,618) a sidebar šírku 367px (593px / 1,618). Samozrejme, že v praxi do toho vstupuje viacero ďalších faktorov (napr. padding), no logiku tohto pomeru to deklaruje vynikajúco.


A keďže toto číslo vychádza zo sekvencie nekonečného množstva čísel, tak jeho opakovaným aplikovaním získame rôzne veľkosti (dĺžky, šírky,...), s ktorými môžeme v dizajne pracovať a vyskladať z nich funkčné a intuitívne UI.

Ako sme si už hovorili, zlatý rez sa dá aplikovať v podstate na všetky oblasti dizajnu či kreatívy. Ukážeme si k tomu niekoľko príkladov.

Orezávanie obrázkov

Ak ide iba o orez prázdneho priestoru na kraji fotografie, vec je jednoznačná. Ale ak treba orezať aj samotný obsah fotografie či obrázku, situácia sa mení. Výsledok musí ostať vyvážený a tie najdôležitejšie veci na obrázku by mali mať svoje miesto. Práve s tým nám vie pomôcť zlatý rez.

(Zdroj: industrydev.com)

Typografia a hierarchia

Vieme si tiež pomôcť pri výbere správnej kombinácie veľkosti použitých fontov. Takto bude mať názov, podnázov a samotný text tú správnu veľkosť a hierarchia medzi nimi bude okamžite jasná.

(Zdroj: Invisionapp)

UI Webdizajn

Rozloženie jednotlivých elementov a plôch na webe rozhoduje o tom, ako intuitívne sa bude návštevník webu cítiť. A rovnako aj, či sa mu to bude páčiť. Ako sme už skôr písali v článku, napríklad šírka jednotlivých stĺpcov je vďaka zlatému rezu jasne stanovená.

(Zdroj: Apiumhub)

Logo

A posledným príkladom je využívanie zlatého rezu pri tvorbe loga. Tu to možno na prvý pohľad nie je až tak očividné. No verte, že zlatý rez sa tu aplikuje veľmi často a aj tie najznámejšie logá boli vytvorené práve s jeho pomocou.

(Zdroj: Twitter, NatGeo)

Niekedy ho v logu nájdete jednoducho (National Geographic logo), inokedy je to trošku skryté (Twitter logo). Práve v tom druhom prípade bolo logo vytvárané za pomoci série kružníc s jasne danými veľkosťami. Tie pomáhali vytvárať všetky krivky a záhyby loga, až kým z neho nevzniklo ikonické logo, ktoré pôsobí prirodzene a pekne. A nie je to náhoda.

Zlatý rez je nie je technika, je to skôr myšlienkový proces. Vedieť ho aplikovať efektívne chce svoj čas. Určite sa však oplatí pohrať sa s ním a skúšať podľa neho vytvárať nejaké layouty či orezávať dôležité fotografie. Šikovnú pomôcku v podobe špirály zlatého rezu nájdeš tu.


119081443 10216423191122173 6479893006684948438 n

Ľudovít Nastišin


Študijný plán pre budúceho JavaScript programátora

Vzdělávání

Ľudia sa nás často pýtajú, ako sa stať frontend developerom, aké technológie by mali ovládať, čo všetko vedieť, kde začať a aká je správna postupnosť...

Kotlin Raw String

Vzdělávání

String je základný dátový typ v programovacích jazykoch. Slúži na uchovanie textu. Ak chceme napísať String tak text vložíme medzi dvojité...

Ako na vlastný Virtuálny privátny server - časť 1.

Vzdělávání

Každý týždeň jeden blog. Také som si dal predsavzatie do nového roka. Hneď prvý týždeň sa to nepodarilo, ale čo už 🤦🏻‍♂️ . V tomto texte (alebo...