img

13.2.2017

Odhadnout jak se bude vyvíjet design v jakémkoli odvětví nejde bez toho, abychom se podívali do vzdálenější budoucnosti, než je jen příští rok. Trendy totiž přicházejí a odcházejí a velice rychle se tak mění. To, co bylo in minulý rok může být považováno za zastaralé řešení a naopak.

A proto čím více se spoléháme na trendy, tím rychleji nám naše práce stárne pod rukama. Cílem designéra by tedy nemělo být kopírování trendů, ale jejich formování. Trend je třeba umět odhadnout a zpracovat, aby posloužil pokud možno co nejdéle.

Prostředí internetu a trendy ve web designu se dnes mění tak rychle, že problém často vzniká již při samotné implementaci návrhu. Ta u větších projektů může trvat třeba i rok a déle, designér tak musí umět přemýšlet i na několik let dopředu, aby výsledek nepůsobil zastarale již při svém spuštění.

Zde jsme pro vás připravili seznam, podle nás grafiků v Lundegaardu nadčasových trendů, které bychom tímto rádi povýšili na principy, kterým věříme a které má smysl dál rozvíjet a jimi se řídit.

 
1.       
Inovace
Navrhnout inovativní řešení bude zřejmě cílem každého designéra, nicméně je třeba si uvědomit, že takové řešení s sebou nese i svá rizika. Co nechceme, je, aby se uživatel musel zorientovat a přemýšlet nad jednotlivými funkčními prvky.  Proto je dobré se řídit poučkou: “Don’t make users think!”

Zažité funkční řešení eliminuje míru nutného soustředění a může nám často dobře posloužit. Inovativní řešení použijeme jen tehdy, když víme, že je opravdu lepší než zažité. Pokud si nejsme jistí, využijme raději výhod zažitého řešení.

(Zdroje – Don’t make me think by Steve Krug)


2.      Jednoduchý znamená srozumitelný
Za poslední roky prošel web design velkými změnami. Technologie se vyvíjejí, nároky rostou, funkcí přibývá. Co z toho má uživatel? Často zmatek. Přehlcení stránek všemožnými funkčními prvky způsobuje nejen to, že zabírají více a více místa, ale především odvádí uživatelovu pozornost od toho nejdůležitějšího – obsahu samotného. 

Při první návštěvě webu se uživatel vždy snaží obsah webové stránky rychle proskenovat a hierarchicky roztřídit do menších, lépe stravitelných bloků. Proto je důležité, aby byl obsah pokud možno stručný, spíše heslovitý, ale také systematicky dělený do jednotlivých a snadno čitelných bloků.
(Zdroje – The principles for good design by Dieter Rams)


3.       
Dostatek místa
Účelem prázdného prostoru nejsou jen jeho pozitivní estetické vlastnosti, ale jeho vliv na zpřehlednění informací, upevnění vzájemných vztahů jednotlivých částí a bloků a nasměrování uživatelovy pozornosti konkrétním směrem.

Kde white space využijeme:
        
k vyvážení vizuálních elementů (obrázky, ikony, textové bloky),
        
k vyvážení celkového rozvržení (margins, paddings, and gutters).
        
v textu (řádkový proklad, separace jednotlivých textových bloků).

Není náhoda, že se o tomto fenoménu v poslední době tolik mluví. V době, kdy je člověk doslova přesycen informacemi, white space působí skoro až blahodárně.
(Zdroje – Uxmyths, Why white space is crucial to UX design)

 

4.        Animace
Žhavým trendem posledních pár let, který se stále vyvíjí a zdokonaluje, jsou zcela jistě animace a přechody stránek. Animace nám poskytují vizuální kontinuitu a kontext ve smyslu akce / reakce (jsem zde, kliknu na toto a stane se tohle...).

Lépe pomohou s prezentací daného myšlenkového toku. Čím dál tím více webů dnes již vypadá jako jedna interaktivní animace, video či hra.

Dnes se nejčastěji používají animace jako:
        
micro interactions – loaders, hovers, etc.,
        
animated page transitions (přechody stránek),
        
scroll-triggered animations (animace spuštěné skrolem),
        
lazy loading (slouží k postupnému načítání obsahu).
(Zdroje – Functional animation in UX Design, The ultimate guide to Web animation)


5.       
Video a vizuální vyprávění
Video je králem obsahu – to je nepopiratelný fakt, za kterým stojí mnoho studií a statistik. Ať už použijeme video jako hlavní formu přenosu myšlenky nebo jen jako background na hlavní stránce, je jisté, že se uživateli vryje do paměti.

Za zmínku stojí určitě také trend, kterému říkáme  “visual storytelling”.

Tím myslíme prezentaci, ve které uživateli obsah postupně odkrýváme tak, aby byl co nejsrozumitelnější a myšlenku předával co nejefektivněji. Obsah můžeme třeba seřadit do jednotlivých bloků a slajdů – často animovaných, které uživatel prolistuje jako interaktivní knihu (vertikálně nebo horizontálně).

Ale možností je mnoho, i chytře navržený layout statické stránky může splňovat aspekty storytellingu.
(Zdroje - Storytelling web design, Video Content is King)


6.       
Karty
Hlavním účelem karet je uspořádání obsahu do přehledných bloků, které jsou pro uživatele snadno čitelné a se kterými se dá v rámci celku velmi efektivně pracovat, ať už vizuálně nebo v rámci implementace do responzivního designu.

Karty mají mnoho podob. Nejde jen o karty s orámováním, jak si je může mnoho lidí představit.

Karta nemusí mít žádné rámování, jde jen o to karty od sebe jasně vizuálně oddělit. Kartu může například definovat až hover efekt, který se objeví při najetí myši. Jde jen o srozumitelně definované bloky obsahu, které jsou od sebe jasně dělené (i když třeba jen prázdným prostorem).
(Zdroje – Play Your Cards Right, UXpin definitive guide)


7.       
Typografie
Typografie je dnes konečně brána seriózně a práce s ní o dost jednodušší. Možností, kde font pořídit a služeb, které fonty poskytují pro užití na internetu, je mnoho. V rukou zkušeného designéra je typografie nejen formou přenosu informací čtením, ale i přenosu atmosféry nebo charakteru obsahu.

Typografie je zcela jistě výborným nositelem vizuální identity společnosti, ať už tichou a nenápadnou nebo i pompézní a silnou formou.
(Zdroje – Space your self, The future of typography in Web design, Minimalism & Typoraphy)


8.       
Kreativní rozvržení
Po dlouhé době, kdy web designu jasně dominoval tzv. flat design, jsme se dostali do fáze přesycení tímto stylem. Flat design je i přes svou sofistikovanost a nadčasovost tak výrazným trendem, že se prostě okoukal. Jelikož se projevil i ve formách jako je icon design, je vidět opravdu všude. Co jasně definuje flat design a co je i důvodem jeho úspěchu je jeho jednoduchost, ta v hodně případech ovšem hraničí až s nudou.

I když dává flat design svou jednoduchostí mnoho možností jak nechat vyznít vizuální identitu společnosti, rukama nezkušených designérů vzniká často mnoho webů sobě navzájem velmi podobných, což určitě není aspekt, který bychom od webu čekali nebo chtěli – v ideálním případě se chce každá společnost svou webovou prezentací od své konkurence naopak odlišit.

Mnoho designérů se dnes opět snaží pracovat kreativněji, aby sofistikovanou uhlazenost trochu oživili. K tomu ovšem není za každou cenu potřeba další grafické prvky, stačí jen chytře, leč inspirativně rozvrhnout základní layout stránky tak, aby svou formou definoval tok uživatelovy pozornosti konkrétním směrem a zároveň působil kreativně a intuitivně.
(Zdroje – 25 Websites with Creative and Unigue Layouts, 4 essential layout trends)

 
Hlavní je se vždy zamyslet
Sdělením tohoto článku není, abychom se vyhýbali trendům, ale abychom se zamysleli nad tím, jestli chceme být jen ovce, které se trendy řídí nebo jestli chceme být těmi, co stávající trendy formují a posouvají směrem k lepšímu UX.

Jelikož vzájemné vazby mezi jednotlivými aspekty dobrého designu spolu vždy souvisí, není náhoda, že mnoho ukázek v článku v sobě nese více než jeden ze jmenovaných trendů / principů, Z toho důvodu jsme se rozhodli neupozorňovat na jednotlivé aspekty v řešení konkrétnímu webů – nechceme totiž odvádět vaši pozornost konkrétním směrem a omezovat tak vaše vnímání, Chceme, aby každý našel v jednotlivých ukázkách to své a sám odhalil, co je příčinou dobrého výsledku konkrétního webu.

Nechceme vás vodit za ručičku, chceme vás inspirovat.