nav line

Web design trends 2017

Odhadnutí vývoje designu, a to v jakémkoli odvětví, nejde bez výhledu do budoucna. Trendy se mění velice rychle – co bylo letos in, může být příští rok out.

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.

Webové trendy 2017

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í.

Písma od Google

Zdroje

Ukázky

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ů.

Jednoduchý vzhled

Zdroje

Ukázky

3. Dostatek prostoru

Úč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 dostatek prostoru využijeme:

  • k vyvážení vizuálních elementů (obrázky, ikony, textové bloky),
  • k vyvážení celkového rozvržení (typografie, vnitřní okraje prvků a okraje),
  • 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, dostatek prostoru působí skoro až blahodárně.

Dostatek prostoru

Zdroje

Ukázky

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:

  • mikro interakce – loaders, hovers, atd.,
  • animované přechody stránek (přechody stránek),
  • posun spustí animace (animace spuštěné skrolem),
  • líné načítání (slouží k postupnému načítání obsahu).

Animace

Zdroje

Ukázky

5. Video a vizuální vyprávnění

Video je králem obsahu – to je nepopiratelný fakt, za kterým stojí mnoho studií a statistik[1] . 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.

Vizuální vyprávění

Zdroje

Ukázky

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).

Karty

Zdroje

Ukázky

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.

Typografie

Zdroje

Ukázky

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ě.

Kreativní rozvržení

Zdroje

Ukázky

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 z jmenovaných trendů / principů. Z tohoto důvodu jsme se rozhodli neupozorňovat na jednotlivé aspekty v řešení konkrétních 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.

Ohodnoťte článek

Web design trends 2017

Související články

Vyhledávání na blogu

Webová integrace

Webová integrace jako nová oblast pro business „velkých" webových agentur.

o webové integraci

Profily blogujících