Jak budou vypadat weby za pár let?

obrazek01

O tom jak trendy nekopírujeme, ale formujeme – kopírováním. 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 přicházejí i odcházejí – zároveň však formují prostředí kolem nás.

Je třeba si uvědomit, že slovo trend popisuje něco, co se mění. 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 slouž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 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 nadčasových trendů, které bychom za náš team designérů v Lundegaardu tímto rádi povýšili na principy, kterým věříme a které má smysl dál rozvíjet a jimi se řídit. Pokud byste se pak chtěli inspirovat dále, co se trendů u grafiky a vývoje webů týče, mrkněte na Designshack.net.


obrazek02

1. Inovation

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. 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: Dont make me think by Steve Krug

Ukázky: fonts.google.com/


obrazek03

2. Simplicity is clarity

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, snadno čitelných bloků.

Zdroje: Ten principles for good design by Dieter Rams

Ukázky: compliments.dk/pumperlgsund-bio.de/de/simple.com/


obrazek04

3. White space

Úč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: UXmythsWhy white space is crucial to UX design

Ukázky: mylapka.com/designmodo.com/qards/


obrazek05

4. Animation

Ž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 toto…).

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 / hra.

Animace rozdělujeme na:

  • micro interactions – loaders, hovers, etc.
  • animated page transitions (přechody stránek)
  • scroll-triggered animations (animace spuštěné skrolem)
  • lazy loading (postupné načítání obsahu)

Zdroje: Functional animation in UX DesignThe ultimate guide to Web animation

Ukázky: locomotive.ca/engoogle.com/inbox/designmodo.com/slides/anonymoushamburger.com/


obrazek06

5. Video and visual storytelling

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ů/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 designVideo Content is King

Ukázky: waaark.com/curvy.dk/beagle/site/google.com/search/about/designmodo.com/qards/fantasy.co/warsawrising.eu/serioussituations.com/


obrazek07

6. Cards

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

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 RightUXpin definitive guide

Ukázky: formerlyyes.com/beoplay.com/


obrazek08

7. Big bold Typography

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/nenápadnou nebo i pompézní/silnou formou.

Zdroje: Space your selfThe future of typography in Web designMinimalism & Typography

Ukázky: hugeinc.com/duhaihang.com/bff.co/mariarigolordi.com/radoorco.dk/


obrazek09

8. Creative layouts

Layout webu půjde vždy ruku v ruce s obsahem a v ideálním případě bude mít určité aspekty storytellingu. Účelem je 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 Unique Layouts4 essential layout trends

Ukázky: ortizleon.es/, zerofinancial.com/hellomonday.com/homeandoverforktruckservices.co.uk/norgram.co/reputationsquad.com/

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.

Jsem jedním z těch, kteří chtějí dělat design pro lidi a ne pro klienty. Snažím se řídit heslem: Design má být jednoduchý a návodný – určitě ne popisný a překombinovaný. Jelikož smyslem dobrého designu je nejen aby člověka okouzlil, ale i vedl ke kýžené akci či informaci jasně a intuitivně, je mnohdy třeba zastat jasné stanovisko a design obhájit za každou cenu. Webové grafice a motion designu se věnuji přes 6 let, aktuálně pomáhám navrhovat hezčí a funkčnější weby pro Lundegaard. LinkedIn

Komentáře

Nahoru