Aplikujeme pravidlo tretín na Web Design

rule-of-thirds

Je to fascinujúca téma, o ktorej sa nie vždy hovorí v oblasti web dizajnu. Fotografi sú pravdepodobne oboznámení s pravidlom tretín a s tým súvisiacou fotografickou kompozíciou. Ale: ako môžu návrhári použiť pravidlo tretín na vytváranie zaujímavých grafických návrhov?

V tomto článku by som chcel vysvetliť pravidlo tretín a podeliť sa o niekoľko tipov, ako aplikovať toto pravidlo do grafického návrhu webových stránok. Pravidlo tretín je jeden zo základných konceptov, o ktorom rozhodne stojí za to sa niečo dozvedieť – ako funguje a ako to sa dá aplikovať na návrh obsahových blokov webových stránok.

Prečo deliť grafický návrh na časti?

Môžete sa pýtať sami seba: prečo je dobrý nápad rozdeliť návrh na tretiny? A odkiaľ sa zobrala táto myšlienka? Tak buďte radi, že v tom nie je veľa matematiky – aspoň nie s praktickou aplikáciou na grafický návrh.

Pravidlo tretín pochádza z tradičného umenia – najmä fotografie, kde sa dielo (fotografia) môže rozdeliť na 9 štvorcov / obdĺžnikov. To sa vykonáva s dvoma zvislými a dvoma vodorovnými čiarami. Pravidlo hovorí, že dôležité položky by sa mali nachádzať v blízkosti križovatiek týchto čiar, aby sme docielili najlepších výsledkov. Napr.: pri fotografickej kompozícii by sme mali fotografovaný objekt umiestniť tam, kde sa tieto čiary pretínajú.

Cieľom pri kompozícií fotografie je zachytiť fotografovaný objekt jedinečným spôsobom, ktorý upozorňuje na niektoré časti fotografie. Chceme vytvoriť asymetriu (nerovnováhu), pretože sa tým niektoré prvky zobrazia výraznejšie ako ostatné (aj keď je to len šikovnosť fotografa).

RuleOfThirds

Teraz sa dostávame k otázke webdesignu. Takže: ako sa dá pravidlo tretín aplikovať web design? Použiť sa dá rovnakým spôsobom: presne tak, ako upozorníte na niektoré časti fotografie – môžete rovnako zaujať pozornosť ľudí, aby sa sústredili na dôležité časti webu.

Pochopenie mriežky

Táto technika rozdelí vaše web stránky do 9 štvorcov so 4 kľúčovými priesečníkmi. Väčšina užívateľov bude „skenovať“ svojim pohľadom stránky podľa písmena F alebo Z. Takže oko bude nasledovať štruktúru písmena F alebo Z od hornej hlavičky stránky smerom k dolnej časti. Ľavý horný roh internetových stránok je jednou z prvých oblastí, ktoré majú upútať pozornosť.

To znamená, že ľavý horný priesečník čiar by mal byť v blízkosti významnej časti stránky. Priesečník nemusí byť nutne na vrchole odkazu alebo fotografii (aj keď by to tak mohlo byť). Mal by ale označovať dôležitú čas vášho grafického návrhu. Napríklad: záhlavie stránky sa môže zarovnať niekde k prvej vodorovnej čiare a pod ňou môžete umiestniť prezentáciu fotografií.

Ak vyskúšate túto techniku,odporúčal by som používať screenshot zo svojho prehliadača. Ak máte vytvorený len grafický návrh – urobte si z neho výrez s rozmermi typického monitora a aplikujte na tento obrázok mriežku. Grafický návrh kompletnej webovej stránky nepredstavuje relevantné výsledky, pretože je často oveľa vyšší ako rozlíšenie typických monitorov. Pravidlo rozdelenia na tretiny má poslúžiť ako koncept – nie ako princíp návrhu.

Keď užívateľ prvýkrát navštívi vaše webové stránky, kôli rozlíšeniu monitora uvidí len prvky a časť stránky, ktorá sa nachádza nad spodným okrajom monitora . Tento princíp sa používa na analýzu zobrazenia, aby sme mohli vyčleniť tie časti stránky, na ktoré chceme prirodzene upozorniť.

Vytvorte lepšie návrhy web stránok

Teraz, keď sme si povedali niečo viac o použití pravidla tretín v oblasti web dizajnu – chcem spomenúť jeden veľmi dôležitý bod. Pravidlo tretín nemá byť len štruktúrou mriežky pre vytváranie dokonalých grafických návrhov. Namiesto toho ho môžeme použiť ako nástroj na testovanie alebo ladenie existujúceho dizajnu.

Mriežka vám pomôže naplánovať rozloženie jednotlivých komponentov na web stránke, v grafickom návrhu alebo v nákrese. Pravidlo tretín by sme mali brať do úvahy ako hlavnú zásadu pri tvorbe dizajnu a pritiahnutí pozornosti na dôležité časti web stránky. Môžete si zvoliť, ako upravíte navigačnú lištu – či bude vyššia alebo nižšia, či presuniete logo bližšie alebo ďalej od priesečníka mriežky.

Našťastie si môžete vyskúšať túto techniku s takmer s každým kusom softvéru. Pokiaľ si odmyslím Photoshop (ako jeden z profi nástrojov na tvorbu grafiky) – moje preferencie má jeho open source alternatíva GIMP: ten má taktiež dostatok funkcií na tvorbu grafických návrhov a tým aj vytvorenie jednoduchej mriežky. Je to určite lepšie si pravidlo tretín vyskúšať – aspoň uvidíte, či sa váš projekt uberá správnym smerom.

Akonáhle budete mať hotový prvý grafický návrh s aplikovaným pravidlom tretín – začnete si všímať tohto pravidla aj na iných webových stránkach. To vám pomôže rozpoznať, kedy je čas na vykonanie rovnakých zmien vo svojich vlastných projektoch.

Manipulácia so symetriou

Existujú niektoré prípady, kedy môžu byť symetrické prvky na stránke užitočné. Ale keby to bolo pravidlo, potom by bolo umenie fádne a nezaujímavé. V skutočnosti – asymetria je veľmi bežná. Na fotografiách zobrazujeme viac pôdy než oblohy (alebo naopak), prípadne má fotografovaný predmet bližšie k jednej strane ako k druhej. Zdá sa, že je to nevyvážené – ale tento nesúlad je presne to, čo priťahuje našu pozornosť.

Pokiaľ ide o grafický návrh rozloženia stránky –  môžete zvážiť tento veľmi podobný princíp. V prípade, že záhlavie stránky používa veľký obrázok, môže hlavička zaberať až 2/3 celej mriežky. Podobne môžete umiestniť zväčšený text hlavičky nad menší titulok stránky pre dosiahnutie kontrastného efektu.

Tiež treba zvážiť umiestnenie a veľkosť fotografií na stránke. Pravidlo tretín nie je vždy o úplnom zložení jednotlivých častí. Môžete skúsiť umiestniť mriežku a sledovať, v ako pomere je hlavička voči samotnému obsahu s textom. To môže byť užitočné pri analýze veľkosti odsekov a výške riadkov vzhľadom k záhlaviu a obrázkom.

Tento princíp sa vzťahuje k rovnováhe a symetrii – oba pojmy sú základom dobrého dizajnu. Všetci tlačoví a weboví dizajnéri hľadajú tú správnu rovnováhu – to však nie je vždy znamená symetria. Nebojte sa pohrať s návrhom a urobiť aj nie celkom podarené nákresy. Najrýchlejší spôsob ako sa naučiť je ten, že svoje chyby dokážete následne korigovať.