1

Každý správný webdesignér ví, že web by měl být stejně harmonický jako funkční. Někteří designéři, i ti s bohatými zkušenostmi, nedokážou vysvětlit, co je hlavním pravidlem harmonického webu. Instinktivně chápou, co je třeba udělat, aby web vypadal dobře. Možná, aniž by to věděli, přišli na metodu použití zlatého řezu ve webdesignu.

Každý, kdo používá zlatý řez ve webdesignu, pracuje se stejným konceptem, který znali umělci a architekti před staletími. Tento koncept je založen na pravidle přirozené proporce, které si ceníme pro dokonalost.

2

Přirozený poměr je základem zlatého řezu, známého také jako Phi z řeckého písmene, které slouží jako symbol. Jedná se o matematický vztah, který je někdy označován jako zlatý řez nebo zlatá střední cesta. Když se zlatý řez použije v jakémkoli typu webdesignu, vždy vytvoří kompozici, která vypadá velmi přirozeně a je maximálně příjemná na pohled.

V přírodě se zlatý řez objevuje u mnoha živých organismů, včetně tvaru lidského těla. Dokonce i ve starověku jej filozofové uznávali jako božskou proporci a používal se při tvorbě všeho od soch po architektonické návrhy. Možná si to ne vždy připouštíme, ale zlatý řez je všude kolem nás – v budovách, které známe, v umění, designu a dokonce ve všem živém, co se v přírodě nachází.

Definice

Phi je symbol, který představuje zlaté číslo 1.618 a vztahuje se k Fibonacciho posloupnosti. To je matematika související se zlatým řezem. Zlatý řez je poměr dvou veličin, rovný poměru jejich součtu k větší z daných veličin. Posloupnost začínající 0, následovaná 1 a každé následující číslo je součtem dvou předchozích čísel. Po 1 a 2 přichází 3, pak 5, další – 8, 13, 21 a tak dále.

Zlaté číslo představuje ideální poměr v designu, kde jsou alespoň dva segmenty a poměr menšího k většímu je stejný jako poměr většího k součtu dvou segmentů.

Zlatý obdélník je například obdélník libovolné velikosti, který obsahuje menší obdélník, přičemž velikost vnitřního obdélníku byla vypočtena pomocí principu zlatého řezu, takže je ve správném poměru k většímu obdélníku.

Pravidlo třetin

Pro ty, kteří jazyku matematiky příliš nerozumí, existuje jednodušší způsob, jak uplatnit pravidlo zlatého řezu ve webdesignu. Toto je známé jako pravidlo třetin. Nezahrnuje přesné matematické výpočty, ale pomáhá dosáhnout správných proporcí.

ČTĚTE VÍCE
Jak správně určit velikost moskytiéry?

Vše, co potřebujete, abyste se řídili pravidlem třetin, je rozdělit svůj počáteční náčrt rozvržení na devět stejných částí. K tomu stačí umístit dvě stejně vzdálené čáry přes rozvržení a dvě svislé čáry oddělené stejnou vzdáleností.

Body, kde se čáry setkávají v mřížce, budou hlavními body vašeho návrhu, ze kterého budete dále stavět. Máte tedy 4 body, do kterých byste měli umístit nejdůležitější obsahové prvky.

Pokud rozdělíte každý sloupec v mřížce tak, abyste měli dvě stejné poloviny, budete mít mřížku pro práci s designem webu. Můžete například umístit znak nebo logo do pravého horního čtverce na levé straně. Méně důležité informace, které budou uspořádány svisle shora dolů, mohou pocházet z pravého horního čtverce.

Použití zlatého poměru ve webdesignu

Ve zlatém řezu není žádná magie a pomocí čísla 1.618 ve svých výpočtech nezískáte magický výsledek.

Pokud vás nebaví matematika a počítání, pak stačí při výpočtu zlatého řezu použít poměr 3:5. Výsledek nebude tak přesný, ale bude se blížit proporcím, které budou potřeba při práci s designem.

Existuje přesnější metoda, kterou lze použít při použití zlatého řezu ve webdesignu. Šířka může být pevná nebo flexibilní, ale než použijete zlatý řez, budete potřebovat číslo, se kterým začnete pracovat. U webdesignu se toto číslo bude rovnat počtu pixelů na šířku rozvržení.

Pokud například pracujete na rozložení 1200 pixelů, musíte toto číslo vydělit Phi. Pro zjednodušení problému lze číslo Phi snížit na 1.62. Když 1200 vydělíte 1.62, dostanete šířku hlavního sloupce, která v našem případě bude 740 pixelů.

Chcete-li určit šířku druhého sloupce, jednoduše odečtěte šířku hlavního sloupce od celkové šířky. Výsledkem tohoto příkladu je 460 pixelů.

Nyní máte dva sloupce 740 pixelů a 460. Pomocí tohoto jednoduchého výpočtu můžete vždy určit ideální proporce pro sloupce vašeho webu.

Pro flexibilní rozvržení je třeba brát výpočty v procentech. Vydělte 100 % 1.62 a získáte hlavní sloupec, který bude zabírat 62 %, respektive druhý 38 %. Dále můžete pracovat na základě tohoto poměru.

Zlatý řez lze efektivně využít při vytváření malých obdélníků v rámci celkového designu. Tento prostor lze použít pro navigační tlačítka, názvy obrázků, reklamní prostor nebo text, který se kolem obrázku zobrazuje. Bez ohledu na to, jak jsou použity, tyto mini zlaté obdélníky budou v proporcích a konečný vzhled designu bude pěkným zakončením práce.

ČTĚTE VÍCE
Kolik metrů od domu by měla být umístěna žumpa?

Zlatý řez není všelék

4

Použití zlatého řezu v designu nezaručuje dokonalé rozložení a úspěch webu. Někteří webdesignéři si myslí, že použití matematického vzorce je příliš časově náročné nebo příliš komplikované, takže ne všichni souhlasí s tím, že zlatý řez je univerzální lék.

Zlatý obdélník může být efektní součástí harmonického designu s atraktivním vzhledem. Obrázky, bloky textu a rámečky lze dobře prezentovat v malých zlatých obdélnících, které vytvářejí pěkný, vyvážený vzhled, ale počet obdélníků na každé stránce by měl být omezený. Nic ve webdesignu by nemělo být příliš.

Je také důležité pamatovat na to, že při vytváření návrhu, který bude zapadat do celkového cíle projektu, je třeba vzít v úvahu mnoho dalších faktorů.

Nástroje zlatého poměru

Phi kalkulačka

5

Když do tohoto nástroje, který používá Phi ve všech výpočtech, zadáte číslo, dostanete výsledek, který potřebujete pro zlatý řez. Tato služba je zdarma a velmi snadno se používá na počítačích PC i Mac.

Pearsonizovaná typografická kalkulačka

6

Toto je online nástroj s tlačítkem „Nastavit můj typ“. Jednoduše na něj kliknete po zadání šířky obsahu a/nebo velikosti písma a služba vám vybere nejlepší typografické řešení. Máte také možnost zadat hodnotu CPL. Optimalizuje velikost znaků podél řádků.

Spouštěče UX služby Golden Relationship

7

Pomocí této bezplatné služby můžete zkontrolovat jakoukoli webovou stránku a rychle zjistit, zda je v návrhu použita Fibonacciho sekvence.

Závěrečné myšlenky

Webové stránky vypadají harmoničtěji, když jsou vytvořeny pomocí principů zlatého řezu. Toto je jediný poměr, který se používal před dvěma tisíci lety ke stejným účelům jako dnes. Návštěvník intuitivně pocítí komfort harmonické rovnováhy rozhraní, protože je již obeznámen s klasickými proporcemi architektonických struktur a dalších uměleckých děl.

Použití zlatých obdélníků dává pocit řádu každému designovému projektu. Ale musíte být opatrní a vyhnout se zneužití těchto obdélníků. Příliš mnoho bude mít opačný efekt a design bude vypadat příliš nenápadně a méně atraktivní.

Kombinace matematických výpočtů a organické struktury ve webovém designu může přinést vynikající výsledky. Není nutné, aby celý návrh vycházel ze všech zmíněných principů, postačí, když se pokusíte použít buď pravidlo třetin, nebo zlatý řez. To vám pomůže udržet správné proporce a umístit složky obsahu na jejich místa.