Při tvorbě designu UI musíte docílit konzistence a harmonie. Všechny prvky vůči sobě musí být vizuálně vyrovnány. Jak docílit toho, aby prvky mezi sebou ladily?
Co je vizuální rovnováha?
Když se jako UI/UX designér podíváte na design webu nebo aplikace a porovnáte mezi sebou prvky, nesmí se navzájem vizuálně přebíjet a působit rušně pro vaše oko. Při pohledu na ně musí každý prvek nést stejnou váhu vaší pozornosti. Tedy kromě těch prvků, které chceme, aby vynikly. Všechny prvky se musí navzájem doplňovat, musí spolu ladit a být v souhře.
Pro následující vysvětlování si vždy představujte dětskou houpačku. Ve fyzice se tomu říká „páka“. Na jednom rameni se nachází jeden objekt a na druhém rameni druhý. Pokud jsou oba od středu houpačky stejně vzdálené a oba váží stejně, nachází se v rovnováze.
Pokud bude jeden z objektů těžší, rovnováha se naruší. Jak dostat houpačku zpět do rovnováhy? Jsou tři možnosti:
1) Těžší objekt posunute více ke středu houpačky.
2) K lehčímu objektu přidáte další objekt/y, které jeho váhu dorovnají.
3) Posunete pevný střed, na kterém jsou ramena páky.
V grafickém designu je to podobné. Pokud mezi sebou porovnáváte prvky, vždy si na ramenech houpačky představte prvky UI. Nebudete pracovat s reálnou váhou tělesa ale s tzv. vizuální váhou.
Vizuální váha
Co si představit pod vizuální váhou? Vizuální váha udává, jak moc daný prvek v rozhraní zaujme vaše oko. Na některé prvky se zaměřujete více a na některé méně. Cílem je dostat prvky do vizuální rovnováhy.
Představte si pro demonstraci, že bychom vizuální váhu vyjadřovali kilogramy. Kolik by mohly vážit prvky rozhraní?
Faktory, které ovlivňují vizuální balanc
Abyste získali perfektní návrh a vyvážené prvky, můžete pracovat s několika faktory, které když vhodně nakombinujete, dosáhnete požadované vizuální rovnováhy.
U všech uvedených příkladů jsou demonstrovány pouze principy. Ukázané změny neznamenají, že jde o nejlepší řešení. Mají ukázat, jak se dá s prvky manipulovat a měnit mezi nimi vizuální balanc. Je pak na každém z vás a na vašem citu, s jakým řešením přijdete a co bude vypadat lépe.
Pozice prvků
Vizuální balanc ovlivňuje pozice prvků. Když si opět představíte páku (houpačku) a na obou koncích ramen prvky rozhraní, kde na jedné straně je prvek těžší, co musíte udělat, abyste mezi nimi získali rovnováhu? Můžete pomyslně protahovat délku ramen nebo pevný střed, na kterém je páka umístěna a pak po ramenech prvky posouvat.
Velikost prvků
Velké prvky jsou těžší a logicky budou poutat více vaší pozornosti.
Barva prvků
Některé barevné tóny navozují pocit, že jsou těžší a některé lehčí (např. červená je těžší než žlutá). Roli hraje sytost a tmavost. Sytější a tmavší barvy působí, že jsou vizuálně těžší než ty bledé a světlé.
Také dost záleží, na jakém pozadí barvy porovnáváme. Na světlém pozadí je sice červená vizuálně těžší než žlutá, ale pokud pod barevné objekty přidáme jiné pozadí, karty se mohou obrátit.
Textura na prvcích
Pokud existují stejné barevné prvky, ale jeden z nich má znázorněný povrch (obsahuje texturu), působí, že je těžší.
Tučnost / obsah prvků
Prvky, které na stejném povrchu zabírají více pixelů (zabírají větší plochu), jsou výraznější. Ty které zabírají menší plochu, jsou méně zřetelné. Například tučnější ikony nebo písmo vypadá, že je těžší a tím i výraznější.
Tvar prvků
Pravidelné tvary jako kruh nebo čtverec působí, že jsou těžší než nepravidelné. U pravidelného prvku je co nejvíce pozornosti směřováno k jeho centru a tím získává větší vizuální váhu. Nepravidelné tvary nabávají dojmu „ztráty hmoty“ a působí lehčeji.
Hustota prvků
Shluk více prvků se zdá být vizuálně těžší.
Bílý prostor okolo prvků
Pokud si představíte prázdný prostor, zřejmě vás nezaujme. Pokud ale tento prázdný (bílý) prostor přidáte kolem nějakého prvku, vizuální váha prvku se zvětší.
Platí, že prvky, které kolem sebe mají více bílého místa, jsou těžší než prvky, které kolem sebe tolik prostoru nemají.
Typy vizuální rovnováhy
Symetrická rovnováha
Symetrická rovnováha nastává v momentě, kdy na obou stranách houpačky máte dva totožné prvky nebo skupinu prvků o stejné váze a vlastnostech. Kompozice v rozhraní je zrcadlová. Proto jsme schopni druhou část rozhraní při skenování očima lehce předvídat.
Symetrická rovnováha je spíš formální a elegantní a nic jí nezkazíte. Použijete ji při vážnějších návrzích UI. Někdy působí až nudně. Ale to není na škodu.
Asymetrická rovnováha
Asymetrická rovnováha nastává, když na jedné straně houpačky existuje například dominantní prvek o nějaké vizuální váze a druhou stranu vyrovnává skupina jiných prvků o menší vizuální váze.
Asymetrická rovnováha je modernějšího rázu. Je dynamičtější, živější a méně nudná.
Radiální (paprskovitá) rovnováha
Radiální rovnováha nastává, když jsou prvky umístěny paprskovitě od pomyslného středu. Pomyslný střed je vždy předmětem vaší pozornosti.
Mozaicka / chaotická rovnováha
U mozaické rovnováhy jsou různé prvky náhodně rozmístěny. Jde o řízený chaos prvků. Nemusí existovat žádná pravidla. Prvky jsou ale rozmístěny dle svých vizuálních vah tak, že je kompozice celá v rovnováze a žádný prvek nevyčnívá.
Vizuální vlastnosti prvků vhodně kombinujte
Rovnováhy můžete dosáhnout mnoha kombinacemi vlastností prvků. Hrajte si s jejich umístěním, velikostí, barvou, tloušťkou, apod. Je pouze na vás, kterou kombinaci si vyberete, abyste rovnováhy dosáhli. To se hodí při přístupu navrhování od středu.
Při úpravě optického balancu si řekněte, co vás limituje
Často se stává, že s určitou vlastností daného prvku nemůžete pohnout. Skvělé na tom je to, že můžete pohnout s těmi ostatními. Optického balancu lze dosáhnout vždy.
Při navrhování je potřeba si říct, se kterými vlastnostmi prvků můžete hýbat a se kterými ne.
Dobrými příklady, kde narazíte na limity, jsou použité sady ikon nebo písma. Můžete si u těchto prvků klást tyto otázky.
Limity ikon
Budete používat již hotovou sadu ikon? Jste schopni změnit tloušťku jejich čar? Můžete upravit barvu ikon? Můžete je bez problému zvětšovat nebo zmenšovat? Pokud ne, budete muset optické rovnováhy docílit úpravou ostatních prvků.
Limity textu
Máte k dispozici dostatek řezů, díky kterým text zjemníte nebo ho naopak zvýrazníte? Pokud ne, můžete pravděpodobně hýbat s velikostí textu, jeho barvou nebo s vlastnostmi ostatních prvků.
Zvýraznit prvky znamená porušit vizuální balanc
Na každém webu nebo v aplikaci máte nějaký cíl. Chcete uživatele někam navést. Pokud by byl každý prvek v rovnováze, uviděl by uživatel sice krásné plátno s rozhraním, ale nikam by ho nevedlo. Musíte zvýraznit důležité prvky (hlavní obsah). Nadpisy, texty, tlačítka, apod. Vždy při navrhování přemýšlejte a u každého prvku si řekněte: „Potřebuji, aby si tohoto prvku uživatel všimnul a nepřehlédnul ho?“. Pokud ano, zvýrazněte ho změnou jeho vlastností (velikost, barva, …). Porušte vizuální rovnováhu.
Jak se naučit tvořit vizuální balanc?
Do začátku je dobré, abyste pochopili alespoň základní principy. Naučit se tvořit vizuální balanc chce trochu cviku. Pravidla vám v tom mohou pomoct. Časem to začnete dělat „od oka“. Čím víc budete navrhovat, tím víc začnete tvořit návrhy automaticky v rovnováze.
Při navrhování se nezaměřujte očima pouze na jediný prvek. Dívejte se rovnoměrně očima na celé plátno. Představujte si na plátně pomyslné váhy. Kontrolujte, kde něco vizuálně vyčnívá. Pokud vás do očí něco bije a není to záměrem, abyste designem webu nebo aplikace zaujmuli, už víte, pomocí jakých principů dosáhnout toho, abyste daný prvek utlumili.