Proč je tento UI design tak zatraceně dobrý?

Vizuální obsah

Při první návštěvě webu si určitě všimnete úvodního obrázku květiny. Obrázek je ve vysoké kvalitě, je oříznutý a kontrastně vložený na černé pozadí. V kompozici obrázku je pouze jeden květ, takže přesně víte, na co se máte soustředit a neruší vás další prvky. Obecně je dobré pracovat s co nejjednoduššími fotografiemi nebo ilustracemi.

Typografie

V návrhu je použita především kombinace 2 písem, které jsou vůči sobě v kontrastu. Jedno písmo patkové pro nadpisy a druhé bezpatkové pro ostatní texty.

Patkové písmo určené pro nadpisy je vybrané takové, aby navozovalo spíše „přírodní“ pocit. Mění se tloušťka tahů písmen a jejich tvary jsou zajímavě zakřiveny. Oproti druhému bezpatkovému písmu není tak geometricky dokonalé.

Hierarchie informací

Při skenování designu očima si jistě všimnete prvků v určitém pořadí. Nejprve vás zarazí hlavní nadpis a obrázek. Potom se zastavíte na velkých plochách prázdného místa a až poté začnete zkoumat okolní vedlejší prvky, jako jsou hlavní menu, logo, navigační prvky a další odkazy. Každý si je může začít prohlížet v jiném pořadí. Jsou na podobné informační úrovni.

Kontrast prvků

Kontrast je základní designový princip, který zaručuje úspěšný vizuální návrh. Pokud jsou prvky mezi sebou v dostatečném kontrastu a zaručí se jejich dostatečné rozlišení, pro oči se stanou mnohem atraktivnější.

Cest, jak dosáhnout kontrastu mezi prvky, je mnoho. Jaké strategie jsou použity v tomto návrhu? Tady je pár příkladů:

Dostatečně odlišná hlavní písma (patkové vs. bezpatkové)

Velikost hlavního nadpisu vs. velikost ostatních textů

Světlý obsah vs. tmavé pozadí

Přírodní tvary vs. geometrické linie

Prázdný prostor vs. zaplněný prostor

Textura obrázku vs. jednolité pozadí

Normální odkazy vs. zakroužkovaný odkaz

Prázdný prostor

Prázdný prostor je také prvek. Jeho použití je záměr. V tomto designu obklopuje hlavní objekty a tím je zvýrazňuje. Uživatele tak nic nevyruší a prázdný prostor ho navede přímo na hlavní myšlenku. Stejně tak prázdný prostor odděluje jednotlivé skupiny odkazů na stránce.

Jednotný styl

Aby design vypadal jednotně a svázaně, prvky se vizuálně navzájem doplňují. Tvary přírodního obrázku jsou doplněny tvary „přírodních“ písmen nadpisu. Navigační šipky nejsou rovné, ale jsou také navrženy tak, aby působily zakulaceně a „přírodně“. Stejně tak je to u zakroužkování odkazu „email“, kdy kroužky nejsou geometricky dokonalé a jsou nepravidelně natočené.

Opakování

Princip opakování zaručí jednotnost a svázanost. Co se všechno se opakuje?

• Vizuální vzhled odkazů.
• Velikosti plochy prázdných míst.
• Navigační šipky.
• Geometrické linie (v ikoně pro menu nebo v navigačních šipkách).
• Černá a bílá barva.

Hloubka pozadí

Aby celý design více „vynikl“ a působil více rozměrně a přirozeněji, je hlavní nadpis a obrázek zarámován do oblého tmavého tvaru. Zbytek tmavého pozadí je prolnutý paprsky, které napodobují světlo.

Vizuální provázanost prvků

Design je pravděpodobně postavený na nějakém gridu, který lze těžce z návrhu odhadnout. Nicméně jsou jasně definované hranice, kde začíná a končí obsahová část webu. Jednotlivé skupiny prvků se dotýkají okrajů mřížky, čímž je zaručena vizuální provázanost.

Jednoduchost

Jednoduchost je jedním z předpokladů úspěšného designů. Tento web obsahuje pouze opravdu důležité prvky, které jsou vizuálně podpořeny jedním grafickým objektem. Jednoduchost se promítá i do samotného znění textů. Krátký a výstižný nadpis jasně sděluje celou myšlenku bez zbytečného balastu. Obsahuje pouze několik slov, kdy každé z nich má svůj význam.

Zvýraznění důležitých prvků

Aby autor zvýraznil důležitost určitých prvků, porušil jednotnost jinými nečekanými prvky. Odkaz „email“ je psaný patkovým písmem a navíc velkými písmeny. Odkaz „subscribe“ narozdíl od ostatních odkazů zakroužkoval. Obě řešení porušují zaběhlý systém, díky kterým si uživatel prvků více všimne.