Ačkoliv se to nezdá, umět udělat návrh pro uživatele atraktivním není snadná věc. Podívejte se na pár tipů, díky kterým budou vaše návrhy pro uživatelovo oko zajímavější.
Existují designéři, kteří mají talent od přírody a kreativní nápady jim jdou od ruky, ale pak existují takoví, kterým kreativní duch nebyl nadělen. Mezi ně se řadím i já. Není to špatně, ale musíme se naučit pracovat více systematicky a kreativu trochu více vynutit a osvojit. Dobrá zpráva je, že se to dá naučit.
Minimalismus ano, ale s mírou
Já osobně mám raději minimalistické návrhy založené spíše na typografii. Písmena a texty jsou totiž také grafickými prvky a jdou vykouzlit nádherné věci i bez použití další grafiky.
Takový přístup mohu ale využít pouze u svých projektů, kde mě nikdo nelimituje. Při návrhu webu nebo aplikace pro klienta je potřeba své myšlení trochu ohnout. Za prvé uživatelské rozhraní od vás poptává klient a za druhé ho budou používat uživatelé z dané cílové skupiny. Ne vy.
Uživatel a klient jsou vždy na prvním místě
Na prvním místě jsou vždy uživatelé a měli byste návrh přizpůsobit jejich představám a očekáváním. Ne svým. Pokud bude web zacílený pro ženy na dětské potřeby, asi není nejlepší cesta použít minimalistický styl s bílým pozadím, černými texty a obrovskými plochami volného místa, přestože jste to dobře zamýšleli.
Uživatel ale i klient očekávají trochu něco jiného. Uživatel ani klient nejsou designéři. Musíte se naučit přiblížit jejich představám. Neříkám, že by dodané návrhy měly být škaredé. Měly by být designově správné, avšak blíže představám uživatelů a klienta.
Pokorně přijměte kritiku
Jedna věc, kterou jsem se naučil, je nesednout si z klientovy kritiky na zadek. Klient sice designu zpravidla nerozumí, ale zato dá vám lidštější zpětnou vazbu. Měli byste ho vyslechnout a pokusit se mu vyhovět ve věcech, které ho trápí.
Neznamená to ale, že byste měli přistoupit na klasické požadavky typu „udělejte logo větší“. Z pohledu designové správnosti byste si měli stát za svým názorem. Měli byste ale sklopit uši, vyslechnout klienta a pokusit se mu vyhovět v oprávněných případech.
Když klient neví
Někdy se stane, že dostanete od klienta neurčitou zpětnou vazbu na vámi dodaný návrh. Uvedu pár výroků, se kterými klient může přijít a nad kterými byste se mohli zamýšlet:
- „Ten web mi přijde nudný.“
- „Něčím bych to ozvláštnil.“
- „Všechno mi to přijde stejné“.
- „Není to úplně ono.“
- „Něčím bych ten návrh rozbil.“
Setkali jste se s takovými výroky? Když se zeptáte klienta nebo uživatele proč mu něco nesedí, většinou vám neodpoví. Sám totiž neví, co by udělal jinak, a je na vás, abyste mu s tím pomohli a dodali lepší řešení.
Ukažme si několik tipů a principů, jak vaše návrhy posunout a udělat je zajímavějšími.
Jak udělat design zajímavější
Jako designér máte ve svém zásobníku různé zbraně od designových principů až po různé tipy a triky. Neznamená, že vždy musíte použít všechny. Potřebujete vybrat vhodné nástroje a pro danou situaci je zkombinovat.
Větší písmo, méně textu
V oboru copywritingu platí pravidlo „čím méně textu, tím lépe“. Nikdo nechce louskat složité a dlouhé texty. Krátké výrazné texty vypadají lépe a uživatel je rychleji zpracuje. Snažte se texty co nejvíce zkrátit a nebojte se pracovat i s velkými velikostmi písma, které se snadněji čtou.
Překrývejte prvky
Pokud chcete docílit živějšího návrhu a navodit pocit pohybu, můžete vyzkoušet překrývat prvky. Vznikne vám tak mnohem dynamičtější design. Ne vždy je to ale žádoucí. Záleží na značce projektu. Abyste zaručili jednotnost a provázanost designu, je dobré se při překrývání prvků držet gridu.
Posun nebo natočení prvků pro navození pohybu
Dalším tipem, jak můžete oživit váš návrh, je úmyslně natočení prvků nebo jejich posunutí. Navodíte tím pocit pohybu a návrh se stane dynamičtější. Důležité ale je, zda je to v rámci značky a cílové skupiny v pořádku. Někdy totiž značka vyžaduje klidnější a stabilnější kompozici.
Kontrast je nejlepší pomocník
Pokud se trochu zajímáte o design, určitě jste slyšeli o principu kontrastu. Ten je jednoduše o tom, že některé prvky v kompozici designu uděláte jiné. Díky tomu si zaručíte, že si uživatelé prvků všimnou. Použitím principu kontrastu velmi snadno rozbijete kompozici.
Člověk si velmi rychle zvykne na jeden stav a začne se velmi rychle nudit. Proto ho potřebujete šokovat a znovu zaujmout. Prvky tedy můžete od sebe odlišit. Možností, jak princip kontrastu využít, je nespočet. Mezi dvěma prvky můžete řešit, jestli je jeden malý nebo velký, tmavý nebo světlý, černý nebo bílý, tučný nebo tenký, hranatý nebo kulatý, apod.
Střídejte barvy pozadí sekcí UI
V návaznosti na princip kontrastu je dobrou praktikou, když větší počet sekcí webu nebo aplikace proložíte sekcemi s jinou barvou pozadí. Návrh nebude vypadat tak jednolitě, bude vypadat zajímavěji, protože uživatel bude muset očima přeostřovat z jedné sekce na druhou a tím lépe si všimne i dalšího obsahu. Neznamená to ale, že když střídání barev nepoužijete, že je to špatně. Záleží na designových cílech a dalších okolnostech.
Použijte inverzní barvu pozadí
V podstatě podobná myšlenka jako se střídáním barevných sekcí. Pokud potřebujete udělat blok obsahu odlišný od zbytku prvků, udělejte barvu pozadí a textu bloku inverzní.
Více barev je plus
Nebojte se pracovat s barvami. Přestože jsou některé designy záměrně laděné do jedné barvy, nebojte se paletu barev rozšířit i o další, které budou dokreslovat vedlejší prvky. I jednobarevný design může obsahovat více barev. Barvy musí být samozřejmě vhodně vybrané, aby ladily k hlavní.
Grafické prvky na pozadí
Někdy jsou návrhy příliš ploché a potřebuje docílit jakési hloubky. Obvykle se to děje na velkých plochách pozadí sekcí UI. Použijte grafické prvky a nenápadně je vložte do pozadí. Celý design získá větší hloubku. Je dobré, když prvky vychází ze samotné značky. Pokud takové prvky nejsou, i jednoduché geometrické tvary mohou posloužit. Jsou totiž univerzální. Nikdy prvky nepoužívejte za každou cenu. Přidávejte prvky s rozvahou a pokud to designu opravdu pomůže. Prvky jsou často dekorativní povahy. Ideální stav je, kdy pomocné grafické prvky pomohou objasnit myšlenku, o čem dané téma webu nebo aplikace je.
Grafické prvky pro vizuální rovnováhu
Často můžete u designérů vidět malé grafické prvky. Ty mají sloužit především k vyrovnání vizuální rovnováhy a měly by se do návrhu umisťovat s jasným úmyslem. Nezkušený designér vidí u kolegů u nadpisů barevnou čárku a bezhlavě ji potom kopíruje do svých designů. Zmíněný prvek by měl ale být umístěn do designu vždy z nějakého důvodu
Textury a vzory
Pro získání větší hloubky návrhu můžete využít i různých textur nebo vzorů. Umístit je můžete na pozadí nebo pouze do částí vybraných prvků.
Vhodné fotografie
Fotografie často tvoří obsah webu. Na co si dát u výběru fotografií pozor?
- Použijte dostatečně kvalitní zdrojové fotky.
- Vyberte takové, které mají význam a předají uživateli nějakou myšlenku týkající se tématu webu nebo aplikace.
- Fotografii volte s vhodnou kompozicí. Měla by být správně ořezána.
- Na fotografii volte raději jeden hlavní objekt. Vždy je lepší mít na fotografii např. jednu postavu člověka se záběrem na jeho hlavu než hromadnou fotografii 50 lidí, ze které si uživatel nic neodnese.
- Všechny fotografie by měly mít stejnou barevnou teplotu, která by měla ladit ke zbytku designu.
- Někdy pro ozvláštnění pomůže i barevný filtr.
Ilustrace
Pokud v projektu nejsou k dispozici fotografie a jde třeba o abstraktnější téma, je možnost pracovat s ilustracemi, které návrh zaručeně oživí. Ilustrace by měla opět ideálně podporovat myšlenku tématu webu nebo aplikace. Ilustrace můžete nakreslit vy, můžete je nechat vytvořit u ilustrátora a nebo si je můžete stáhnout ať už zdarma nebo za peníze. Další variantou, jak nahradit realistické ilustrace je tvorba 3D grafiky.
Ikony
Ikony jsou výborným pomocníkem. Nebojte se je používat. Grafické prvky totiž lidské oko zpracuje dříve než text. Ikony mohou pomoct pochopit myšlenku a zároveň udělají návrh atraktivnější. Ikony můžete používat samostatně nebo je i ohraničit. Můžete je použít v menu. Můžete je použít v seznamech místo běžných odrážek. Můžete s nimi uvádět bloky textů. Využití je nespočet. Pokuste se u každého prvku popřemýšlet (text, tlačítko, údaj, …), zda by se hodilo oživit jej ikonou.
Číslice
Je dokázáno, že lidé rychleji skenují číslice než texty. I číslice jsou v podstatě geometrické tvary, a proto je jako grafické prvky uživatel ihned rozpozná. Takové číslice na webu se nebojte pořádně zvětšit, aby zaujmuly. Můžete je použít u různých statistik, grafů nebo číslovaných seznamech.
Lidské obličeje zaujmou
Je dokázáno, že jako lidé si mnohem rychleji všimneme lidských obličejů. Proto reklamy, na kterých jsou umístění lidé a jejich obličeje fungují mnohem lépe. Nebojte se v návrzích použít lidské tváře. Návrhy nejenže přitáhnou uživatelovo oko, ale budou více důvěryhodnější a atraktivnější.
Loga a profilové fotky uživatelů
Stejně jako větší fotografie lidí může jako dekorativní prvky využít profilové fotografie uživatelů produktu nebo služby. Nejenže získáte univerzální grafické prvky, ale zároveň se zvýší důvěryhodnost prezentace. Ideální samozřejmě je, pokud jsou uživatelé opravdoví.
Na vašem webu nebo aplikaci můžete chtít často zobrazit loga firem nebo služeb. To je skvělá příležitost, jak získat další grafické prvky. Loga mohou být barevná nebo jednobarevná. Nebojte se použít barevná a dostat do vašeho designu více barevnosti. Zajistěte, aby loga byla v dostatečné kvalitě, ideálně vektorovém formátu.
Barevné přechody
Barevné přechody tvoří jednoduchý kompromis, kdy chcete vytvořit hloubku v návrhu, ale nechcete použít textury, vzory nebo fotografie. Díky barevným přechodům docílíte v designu hloubky a stane se tak živějším. Barevné přechody můžete skvěle využít i k simulaci světelných podmínek.
Stíny
Stíny jsou opravdovým pomocníkem v UI designu a jste díky nim schopni vytvořit realističtější návrhy. Nejenže objekty mohou vypadat jako z reálného světa, ale můžete díky nim nasimulovat situace, kdy některé prvky vystupují do popředí blíže k uživateli a díky tomu si jich může lépe všimnout.
Prvky vystupující do popředí
Pokud je design nudný, jde i z nudných prvků vykouzlit velké divadlo. Hodně oblíbená metoda UI designérů je vypichování určitých prvků do popředí nebo pozadí UI. Dobře se to dá vysvětlit na příkladu:
Představte si web, který prezentuje mobilní aplikaci. Tato aplikace beze sporu krásně funguje a je užitečná. Sama o sobě je však vizuálně nudná. Vy potřebujete na prezentačním webu aplikace ukázat mockup s aplikací a tak jej na web vložíte. Celé to ale vypadá nudně. Jak mockup oživit? Vyřízněte malé nudné ale důležité prvky mobilní aplikace a vytáhněte je ven z mockupu ve větším měřítku k uživateli. Z nudného mockupu tak můžete tak vytvořit krásné kompozice.
Průhlednosti a rozmazání
Další metodou jak přinést do designu hloubku je pracovat s rozmazáváním prvků nebo změnou jejich průhlednosti.
V pozadí můžete rozmazat některé prvky a tím docílíte podobného efektu jako při fotografování.
Rozmazat a částečně zprůhlednit můžete i obsah pod obsahovými bloky. Vznikne vám efekt mléčného skla. Kromě zajímavého vizuálu dáte najevo, že v pozadí existuje i další obsah, který ale není upřednostněn.
Všeho s mírou, méně je více, naslouchejte
Dejte si pozor, abyste to se šperkováním designu nepřehnali. Někdy je lepší udělat méně okrasných prvků než více. Začněte s málem a po krocích návrh vylepšujte. Vždy zhodnoťte, jestli vede k lepšímu výsledku. Snažte se získat zpětnou vazbu jak od uživatelů, tak i od klienta. Design by měl zůstat čistý, čitelný a měl by podpořit dosažení uživatelových cílů.