12 principů vizuální hierarchie, které potřebuje znát každý nedesignér

Vizuální hierarchie je metoda uspořádání prvků designu podle důležitosti. Jinými slovy je to soubor zásad, které ovlivňují pořadí, v jakém si všímáme toho, co vidíme.

V tomto průvodci uvádíme 12 zásad vizuální hierarchie, které musí znát každý začínající designér.

Máme toho hodně, takže začneme.

Obsah

Co je to vizuální hierarchie?

Princip č. 1: Velikost ovlivňuje viditelnost

Princip č. 2: Perspektiva vytváří iluzi hloubky

Princip č. 3: Barva a kontrast přitahují pozornost

Princip č. 4: Písmo organizuje design

Princip č. 5: Prostor poskytuje důraz a pohyb

Princip č. 6: Blízkost naznačuje vztahy

Principle #7: Negativní prostor zdůrazňuje

Principle #8: Zarovnání směruje oči

Principle #9: Liché skupiny vytvářejí soustředění

Principle #10: Opakování sjednocuje kompozici

Principle #11: Linie naznačují pohyb

Princip #12: Mřížky organizují design

Infografika vizuální hierarchie

Co je vizuální hierarchie?

Vizuální hierarchie je princip designu, který označuje způsob uspořádání prvků v designu. Vizuální hierarchie pomáhá návrhářům a vývojářům rozvrhnout jednotlivé prvky logickým způsobem, který napomáhá správnému strávení vizuálu.

V návrhu to znamená, že záhlaví bude nahoře největším písmem a každý další prvek bude mít velikost podle důležitosti. To pomáhá uživateli lépe pochopit tok, aby věděl, kam se má podívat jako první.

Důvod, proč je vizuální hierarchie tak důležitým principem, který je třeba pochopit, spočívá v tom, že je na návrháři, aby vytvořil hierarchii takovým způsobem, aby divák ani nemusel přemýšlet, kam se má podívat jako první. Jeho oko je automaticky přitahováno k jednotlivým prvkům přesně v tom pořadí, v jakém si je má prohlížet.

Vytvořili jsme také videoverzi tohoto příspěvku na blogu, která vám pomůže vizuální hierarchii lépe pochopit. Můžete se na ni podívat níže.

1 Velikost ovlivňuje viditelnost

Větší je lepší, že? I když se o tomto klasickém přísloví stále diskutuje, velikost je pravděpodobně nejúčinnějším způsobem, jak zdůraznit vizuální prvky. Jednoduše řečeno, větší prvky přitahují větší pozornost než prvky menší.

Je to přesně ten důvod, proč se novinové titulky zobrazují větším písmem a hlavní články mají často ještě větší titulky než články na zbytku stránky. V jakémkoli designu budou větší prvky – ať už se jedná o slova nebo obrázky – nejen nejvíce nápadné, ale také ponesou nejsilnější sdělení.

Všimněte si ve výše uvedeném příkladu, jak je největší slovo zároveň nejvýraznější a nejemotivnější. Čtenáři mnohem rychleji zareagují na slovo „praskání“ než na druhé největší slovo, základní „výkon“. Návrh by nebyl zdaleka tak účinný, kdyby byla slova stejně velká nebo kdyby jiné slovo na stránce, například „akt“ nebo „čas“, bylo ještě větší.

Dalším důležitým principem souvisejícím s tímto konceptem je měřítko, což je velikost objektu ve vztahu k jinému. Jednotlivý objekt, bez ohledu na to, jak je velký nebo malý, nemá žádné měřítko, dokud není porovnán s jiným. To nám umožňuje vytvořit v designu rovnováhu a zaměřit se na dominantní prvky. Čím větší měřítko, tím větší důraz.

2 Perspektiva vytváří iluzi hloubky

Pomocí perspektivy mohou designéři vytvořit iluzi hloubky od několika centimetrů až po několik kilometrů. Protože podobné iluze vidíme i v reálném světě, vnímáme obecně větší objekty jako bližší než podobné menší objekty, a proto obvykle upoutají pozornost dříve než jakýkoli jiný objekt na stránce.

Například ilustrace silnice bude obvykle širší v nejnižším bodě a postupně se bude zužovat, čím výše se bude táhnout po plátně. Stejně tak objekt, který je nejblíže k divákovi, bude vždy vypadat větší než stejný objekt vzdálenější.

Správná perspektiva využije jak měřítko, tak proporce, aby přesně sdělila odpovídající vzdálenost. Kresba pětikilometrového úseku silnice bude ustupovat mnohem výrazněji než půlkilometrový úsek nakreslený na plátně stejné velikosti.

3 Barva a kontrast přitahují pozornost

Stejně jako jsou větší prvky vnímány jako důležitější než prvky menší, jasné barvy obvykle přitahují větší pozornost než matnější odstíny. Pokud je například jediná věta v bloku textu zvýrazněna jasnou barvou, okamžitě upoutá pozornost čtenářů.

Podívejte se na výše uvedený design. Všimli jste si, jak daleko větší pozornost upoutá, když byly přirozené tóny zvýrazněny na neonové barvy? Toto barevné schéma je známé jako duotone, což je stále populárnější trend webdesignu. Tento efekt, kdy se na fotografii navrství dvojice kontrastních barev, propůjčuje výrazné návrhy, které obrazně řečeno vyskakují ze stránky nebo obrazovky.

Dramaticky kontrastní barvy mohou také zdůraznit konkrétní prvky než spektrum v jemnější škále. Umístění červeného objektu na zelené nebo černé pozadí přitáhne větší pozornost než stejný červený objekt na oranžovém nebo fialovém pozadí.

Barevné kombinace použité v návrhu a jejich vzájemný vztah se označují jako barevné schéma. Výběr barevného schématu designérem může v rámci výtvoru vytvořit jednotu, harmonii, rytmus a rovnováhu, ale také kontrast a zdůraznění.

Design, který používá příliš mnoho kontrastních barev, často působí neuspořádaně a nesourodě. Totéž lze někdy říci o návrzích, které používají barevné schéma, jež se nedrží teorie barev. Výběr nejlepší palety však zahrnuje mnohem více než jen náhodný výběr monochromatické, komplementární nebo tetradické kombinace.

Podobné barvy lze použít k seskupení souvisejících prvků v designu a výběr barev může dokonce naznačovat váhu a vzdálenost. Teplejší barvy, jako je červená a žlutá, postupují v designu s tmavým pozadím do popředí, zatímco chladné barvy, jako je modrá nebo zelená, obvykle ustupují do pozadí. U designu na světlém pozadí je tomu naopak: Chladné barvy, jako je modrá a zelená, se objevují blíže než teplé barvy. Tak to prostě vnímá lidské oko.

Výběr barev tedy může skutečně ovlivnit schopnost diváků rozpoznat v designu postavu od pozadí. Míchání teplých a studených barev může vytvořit hloubku, stejně jako perspektiva.

Efektivní kombinace barev závisí nejen na pozici každého odstínu na barevném kole, ale také na jeho teplosti a kontrastu s okolními barvami. Podívejte se na návod společnosti Visme o výběru působivých barevných schémat.

4 písma organizují design

Přemýšlejte o osnově, tradičním životopisu nebo obsahu. Obecně se každý z nich skládá z několika velikostí písma, přičemž hlavní nadpisy mají větší velikost bodu než podsekce a menší detaily. Použití různých velikostí písma nejen zdůrazňuje to nejdůležitější, ale také organizuje celkový design dokumentu.

Hierarchie písma lze vytvořit pomocí textu různých velikostí, hmotností a rozestupů – nebo kombinací jednotlivých prvků. I když je v celém návrhu použito jediné písmo, změna jeho velikosti a váhy nejen upozorní na důležitější prvky, ale vytvoří celkovou kompozici, která je snadno čitelná a srozumitelná.

Představte si životopis, který používá větší a tučnější písmo pro reference než pro jméno uchazeče. Nejenže by to mohlo působit nedbale, ale pravděpodobně by to způsobilo i značný zmatek u těch, kteří rychle pročítají horu žádostí.

Stejně tak návrh, který obsahuje řadu písem, která mají všechna stejnou velikost, písmo a váhu, nebude efektivně přitahovat pozornost k ničemu – což je výzva, kterou je třeba rychle splnit, když tolik posluchačů stráví zlomky vteřin posuzováním kvality vašeho návrhu.

Z tohoto důvodu většina programů pro tvorbu webových stránek nabízí nejen ruční výběr atributů písma, ale také přednastavenou hierarchii, která se kromě základního kopírovacího textu skládá z písma nadpisu, podnadpisu a odstupňovaných nadpisů.

Podívejte se na výše uvedený návrh? Působí přehledněji a čitelněji, když jsou všechna slova stejně velká, nebo když jsou použity zásady hierarchie?

5 Prostor zajišťuje důraz a pohyb

Pravidlo prostoru

Jedna z nejzákladnějších zásad vizuální kompozice se týká toho, co z návrhu vynecháte. Podle pravidla prostoru vyžaduje esteticky působivý design přiměřený podíl nepřehledného negativního prostoru, často označovaného jako „bílé místo“, bez ohledu na skutečnou barvu pozadí návrhu.

Při uspořádání prvků kompozice mohou návrháři využít prostor kolem obsahu k tomu, aby upozornili na konkrétní prvky – vzpomeňte si na jediný prvek na prázdné stránce – nebo aby vyslali zcela samostatné vizuální sdělení, jako je například skrytá „šipka“, která se nachází ve slavném logu FedEx.

Strategické rozestupy mohou dokonce přitáhnout oči diváků po stránce v cílené sekvenci tím, že přispějí ke vzorcům skenování stránek.

Vzorce skenování stránek

Čtenáři mají tendenci skenovat stránky na základě určitých vzorců, které lze pozorovat prostřednictvím pohybu očí. Když designéři chtějí, aby si publikum všimlo prvků v určitém pořadí, často se spoléhají na nejběžnější vzory.

Například rodilí mluvčí angličtiny čtou zleva doprava. Proto obvykle prezentují podobný vzorec skenování, když mají před sebou stránku textu. Arabština je naproti tomu psána zprava doleva. Ti, kteří jsou zvyklí číst v tomto jazyce, budou s větší pravděpodobností skenovat stránky v tomto „opačném“ směru. Designéři by na tyto rozdíly měli pamatovat při vytváření obsahu pro globální publikum.

F-vzorce

Nejčastějším vzorcem pohybu očí anglických čtenářů je F-vzorek. Proč? Protože přesně tak čteme knihu, dopis nebo webovou stránku. Stránku skenujeme zleva doprava podél horního okraje a znovu u každého řádku textu, dokud nedosáhneme dolního okraje stránky.

Vzhledem k této přirozené tendenci designéři nejčastěji využívají vzor F při tvorbě webových stránek a dalších ilustrací, které jsou z velké části založeny na textu. Protože čtení v jiném směru je prostě nepohodlné, když na něj nejsme zvyklí.

Z-vzor

Designy, které se více spoléhají na obrázky, jsou často komponovány v Z-vzoru. Protože mozek zpracovává obrázky rychleji než text, mohou čtenáři rychle skenovat stránku tak, že přejedou pohledem zleva doprava přes horní okraj, pak diagonálně dolů po stránce a pak skenování dokončí opětovným přejetím zleva doprava (nebo zprava doleva, pokud publikum obvykle čte tímto směrem).

Designéři mohou zdůraznit určité prvky kompozice tím, že je umístí podél tohoto běžného vzorce pohybu očí „Z“. Představte si nadpis, obrázek a podnadpis.

6 Blízkost naznačuje vztahy

Blízkost, neboli kde se prvky objevují ve vzájemném vztahu, je jedním z nejzákladnějších prvků kompozice. Zjednodušeně řečeno, umístění souvisejících prvků blízko sebe čtenářům naznačuje, že spolu skutečně souvisejí.

Představte si bílou obrazovku se skupinou pěti bodů na jedné straně a jedním bodem na straně druhé. Naším prvním předpokladem bude vždy to, že těch pět je skutečně skupina.

Umístění prvků blízko sebe může vysílat i další zprávy. Například umístění prvků na určitá místa na mapě může divákům poskytnout představu o vzdálenosti, ať už blízké, nebo vzdálené. To samozřejmě závisí také na velikosti a měřítku mapy. Palec není vždy míle.

Umístěním prvků v určité vzájemné blízkosti lze vytvořit přidané obrazy a sdělení. Vzpomeňte si, jak často vidíte tři kruhy a čáru umístěné tak, aby naznačovaly tvar veselé nebo smutné tváře? Navržený obrázek pak často získá větší pozornost než jeho jednotlivé prvky. Vidíte šťastnou tvář, nebo tři kruhy a čáru?“

7 Negativní prostor zdůrazňuje

Stejně jako seskupení prvků blízko sebe naznačuje jejich vztah, zařazení bílého prostoru kolem prvků je vyčleňuje jako samostatné skupiny informací. Záporný, prázdný prostor nejenže usnadňuje čtenáři strávení informací tím, že je seskupuje do oddílů, ale také vytváří soustředění, protože pomáhá očím zaměřit se na jednotlivé položky.

Kompozice, které nemají dostatek záporného prostoru, mohou mít za následek nepřehledný, zmatený a chaotický design. Jinými slovy, méně je více. Šikovní designéři mohou dokonce využít prázdný prostor k naznačení dalšího vizuálního sdělení. Stačí si vzpomenout na „šipku“ naznačenou ve středu slavného loga FedEx nebo na výše uvedený design společnosti Coca-Cola.

8 Zarovnání usměrňuje pohled

Zarovnání je součástí struktury, podle které jsou prvky v designu umístěny. Nařizuje, aby vizuální komponenty, ať už jde o text nebo obrázky, nebyly v celé kompozici rozmístěny libovolně. Například typická stránka s textem je zarovnána doleva, takže objekty sdílejí levý okraj.

Mnoho vizuálních návrhů je vycentrováno nebo zarovnáno, což znamená, že jsou rozmístěny po stránce tak, že sdílejí levý i pravý okraj. Kdyby byla slova náhodně rozeseta po stránce všemi směry, vytvořila by nepřehledný scénář.

V návrzích se vzorem F jsou objekty obvykle zarovnány vlevo, zatímco vzory Z často využívají kombinaci zarovnání vlevo, na střed a vpravo, jako například ve výše uvedené reklamě.

Jednoduché vizuální návrhy se nejčastěji zarovnávají na střed snímku, což je formát, který zajišťuje rovnováhu a harmonii a je také esteticky příjemný.

Většina západních čtenářů je zvyklá číst z levé do pravé velikosti stránky. Proto se návrhy obsahující text často zarovnávají stejným způsobem k levému okraji.

Zarovnání vpravo se často používá k zajištění rovnováhy celkového návrhu, který může být na levé straně vizuálně těžší. Stejně tak může zarovnání vlevo nabídnout stejný efekt v opačném scénáři.

9 Liché skupiny vytvářejí důraz

Pravidlo lichých skupin umožňuje návrhářům zdůraznit určité obrázky tím, že je umístí do středu skupiny. Umístěním stejného počtu sousedních objektů po obou stranách hlavního ohniska – tedy vytvořením skupiny s lichým počtem – výsledek jasně poukazuje na nejdůležitější vizuální prvek, který se nachází uprostřed.

Například skupina jednoho nebo tří prvků je výraznější než jedna dvojice. Stejně tak skupiny složené z lichého počtu objektů jsou téměř vždy považovány za zajímavější a estetičtější než skupiny se sudým počtem. Proč? Lidé se cítí lépe v rovnováze.

10 Opakování sjednocuje kompozici

Stejně jako kontrast zdůrazňuje a upozorňuje na prvky designu, opakování vytváří jednotu, která zvyšuje porozumění a rozpoznání.

Přemýšlejte o většině publikovaných textů. Návrhy stránek jsou uspořádány tak, že hlavní text je celý psán jedním písmem, nadpisy kapitol jiným a poznámky pod čarou třetím odlišným písmem – to vše konzistentně v celé publikaci. Toto opakování stylu vytváří soudržné dílo, které je rozpoznatelné jako celek.

Pro jednotný design opakujte nějaký prvek – ať už je to písmo, barva, tvar nebo velikost – v celé kompozici. Konzistentní styly pomáhají jasně definovat vizuální hierarchii jakéhokoli designu.

Podívejte se například na infografiku v úvodu, která obsahuje našich 12 zásad vizuální hierarchie. Opakování stejných písem a stylů v celém dokumentu jasně sjednocuje seznam a říká čtenářům, že každá položka je součástí celku.

Zopakování může také dát prvkům nový význam. Jak často vidíte na stránce vyniknout modře podtržený text? Dostatečně na to, abyste toto písmo okamžitě rozpoznali jako hypertextový odkaz, že? Opakováním tohoto stylu v designu sdělíte svému publiku, kam má kliknout pro další informace. Jaké další oblíbené styly mohou dát vašemu designu další význam?“

11 Čáry naznačují pohyb

Pohyb je jedním z nejúčinnějších způsobů, jak upoutat pozornost diváků, zejména pokud je naznačen v rámci nehybného designu. Čáry samozřejmě účinně ukazují na položky, na které je třeba klást důraz – stačí si vzpomenout na šipku – ale nemusí se na stránce fyzicky objevit, aby dokázaly tento trik.

Vedoucí čáry lze implikovat pomocí opakujících se prvků – vzpomeňte si na řadu teček -, blízkosti objektů nebo tvarů a také vztahu pozitivního a negativního prostoru. Například nakloněním objektu nahoru nebo dolů lze vytvořit linie, které naznačují let nebo sestup.

12 mřížek organizuje design

Nejúčinnější designy jsou komponovány prostřednictvím nějakého typu mřížky. Nejtypičtější mřížkou je klasická modulární kompozice křížících se svislých a vodorovných čar.

Umělci, fotografové a grafici již dlouho používají pravidlo třetin, aby zlepšili celkovou vyváženost svých kompozic. Pravidlo spočívá v myšlenkovém rozdělení kompozice do mřížky složené ze dvou vodorovných a dvou svislých čar – neboli devíti samostatných úseků.

Důležité vizuální prvky jsou umístěny podél čar a zdůrazňují čtyři body, kde se čáry setkávají. Kompozice mimo střed jsou obecně považovány za estetičtější ve srovnání s návrhy, v nichž je hlavní ústřední bod umístěn ve středu rámu. Pravidlo podporuje využití negativního prostoru, promyšlenou blízkost prvků a efektivní zarovnání.

Nejenže je nejběžnější, ale modulární mřížka je obecně nejčitelnějším designem. Přesto je někdy nejlepším způsobem, jak vytvořit důraz, porušení pravidel.

Alternativní návrhy mřížky

Místo klasické vertikálně-horizontální mřížky mohou designéři zvolit diagonálně orientovanou kompozici, aby zajistili, že jejich výtvor na stránce vynikne a přitáhne celkovou pozornost diváků.

Narušení mřížky

Někteří designéři se rozhodnou mřížku zcela porušit a náhodně rozmístí vizuální prvky po stránce tak, aby se co nejlépe odlišily od okolního textu v mřížce. Tento okolní text může být ve stejném designu nebo na okolní stránce.

Nenechte se zmást konceptem náhodnosti. Náhodné rozptýlení prvků po pozadí podle žádného konkrétního důvodu nebo strategie se zázračně nepromění v mistrovské dílo Jacksona Pollocka. Při rozbíjení mřížky musí být každá volba stále promyšlená a účelná.

Zásady vizuální hierarchie jsou jedny z nejúčinnějších strategií pro zdůraznění prvků designu a objasnění vizuálního sdělení. Ale stejně jako v mnoha jiných oblastech života, i zde platí, že dobrého může být příliš mnoho.

Designéři musí moudře vybírat, které principy použijí, jinak riskují, že rozmělní jakýkoli důraz a naruší vizuální hierarchii. Pokud vynikne všechno, nevynikne nic.

Jste si jisti, zda je vaše hierarchie účinná? Pak ji otestujte. Jednoduše se dívejte na prostor před stránkou nebo obrazovkou a nechte skutečný design ustupovat do pozadí, dokud se z něj nestane rozmazaná změť tvarů a barev. Co vynikne?

Nebo, abyste nemuseli šilhat, můžete použít test rozmazání tak, že pořídíte snímek obrazovky svého návrhu, otevřete jej ve Photoshopu a použijete filtr Gaussovské rozmazání.

Pokud je hlavní atrakcí stále prvek (prvky), který jste plánovali zdůraznit, je vaše vizuální hierarchie účinná.

Visual Hierarchy Infographic

Get an at-a-glance understanding of what visual hierarchy means and how it can be implemented by scrolling through this infographic below.

Embed on your site:
<script src=“//my.visme.co/visme.js“></script><div class=“visme_d“ data-url=“ep88eydm-12-visual-hierarchy-principles-every-non-designer-needs-to-know“ data-w=“800″ data-h=“6404″></div><p style=“font-family: Arial; font-size: 10px; color: #333333″ >Created using <a href=“http://www.visme.co/make-infographics“ target=“_blank“ style=“color: #30a0ea“><strong>Visme</strong></a>. An easy-to-use Infographic Maker.</p>