Přidáno 21.7.2016

Trendy webdesignu v roce 2016

V oblasti internetu projektů přibývá a my se chceme v té záplavě webů odlišit, být vidět, chceme, aby naše webové stránky prodávaly. Pojďme se podívat, kam trendy webdesignu směřují v tomto roce. 

Za změnami stojí hlavně vývoj technologií, který posouvá hranice možností v oblasti webových stránek, ale také i zkušenosti s používáním webu. Webdesign se v posledních letech zaměřuje na uživatele, na usnadnění procházení stránkami, zaujetí a přivedení zákazníka k cíli (nákup, registrace...)

Tyto trendy představují populární techniky ze kterých můžeme čerpat inspiraci a pomáhají nám se orientovat v možnostech, abychom si mohli vybrat to nejlepší pro náš web.

Rolovací stránka, aneb využijte sílu příběhu

Dlouhé rolovací stránky známe již z minulých roků. Jsou koncipované jako příběh, který vede čtenáře po blocích. Zvyšuje se tak čtivost a poutavost. Rolování je jednoduché a přirozené, můžeme web koncipovat jako příběh, kterým uživatel prochází. Pro větší přehlednost se rozděluje do více zřetelných sekcí (pruhů).

Příklad: http://www.gillemore.com/home/

Rolovací stránka

Minimal design

Krátké stránky vyžadují klikání, menší stránka je ale jednodušší a přehlednější.  Dá se velmi dobře využít např. v procesu nákupu v int. obchodě. Kdy je uživatel veden po krocích až k odeslání objednávky. Méně údajů na jedné stránce se snadněji vyplňuje než vše dohromydy na jedné stránce. Také se využívá v procesech registrace, nebo všude tam, kde potřebujeme uživatele někam vést. 

Pracujeme také s prostorem. Nezřídka se setkáme se stránkou s jedním tlačítkem. Proč? Čím více volného prostoru okolo prvku, tím větší pozornost prvek upoutá. 

Rozvržení pomocí karet

Vypadá jako Metro ve windows. Používá například Pinterest. Můžeme tak dát dohromady více různých druhů obsahu. Každá karta představuje jednu jednotnou koncepci a chovají se jako kontejnery obsahu. Takový obsah se také dobře uspořádává pro různé typy zařízení, snadno se podle šířky zobrazení můžou přeskládat pod sebe, nebo vedle sebe.

Příklad: http://www.columnfivemedia.com/

Rozvržení pomocí karet

Plochý design

Plochý design se používá už nějakou dobu a stále je populární. Je čistý elegantní a vyniknou tlačítka akce a jiné výrazné prvky u kterých potřebujeme, aby upoutaly pozornost. Používáme výraznou typografii, jednoduché, často jednobarevné pozadí, loga a ikony jen v obrysech.

 Příklad: http://macquarie-park.com.au/

Flat design

Material design

Materiálový design je postavený na vrstvách materiálu, které jsou vrstvené na sebe a vrhají na sebe stíny za účelem znázornění hloubky a toho, že vrstvy jsou nad sebou. Umožňuje tak lépe uživateli pochopit obrázek, který se zkládá z více objektů nad sebou. Ale také to, kde se na webu konkrétně nachází. Nově otevřené malé okno vrhá stín a znázroňuje, že uživatel otevřel něco mimo stránku.  S materiálovým designem přišel v loňském roce Google.

https://www.google.com/landing/now/#whatisit

material design

 Responzivní design

Velice populární technika v posledních letech díky vzestupu používání mobilních zařízení, tabletů. Jedná se o design, který se přizpůsobuje zařízení, kde se zobrazuje. Karty, které jsou vedle sebe se v mobilních zařízeních skládají pod sebe, obrázky přizpůsobují svoji velikost. Velikosti se zadávají v relativních hodnotách, rozměry v procentech, velikost písma v em, mohou tak prvky přizpůsobovat automaticky velikost podle zařízení. 

Velké obrázky, výrazná typografie

Obrázky mají daleko větší schopnost upoutat než text a tohoto faktu využívají dnešní trendy webdesignu. Používá se jako hlavní obrázek velký obrázek v kombinaci s výraznou typografií. Důležité je, aby tento obrázek byl velmi kvalitní, jinak se efekt mine účinkem. Dobrých výsledků se dosahuje také s fotografiemi, kde je zachycen pohyb (padající shíh, stékající voda...) Takové fotografie jsou uživateli velmi dobře vnímány a přitahují pozornost.

Příklad: http://www.voltagenewmedia.com/

Typografie webových stránek

Vlastní fotografie

Hodně společností se zaměřuje na využívání hlavně vlastních fotografií oproti využívání dostupných zdrojů například fotobanky. Vlastní fotografie pomáhají být důvěryhodnější, promlouvat k uživatelům osobněji. 

Ilustrace místo obrázků

Ilustrace podněcují fantazii a umožňují uživateli vymyslet svůj vlastní výklad a vtáhnout do děje mnohdy snadněji než dokonalé fotografie. Dokážou k uživateli promlouvat lidštějším, osobním způsobem. Pro některé uživatele je daleko přitažlivější než fotografie znázorňující až nereálnou dokonalost. Protože cítí, že v reálném životě to tak dokonalé není, je z toho cítit iluze a klam. Kdežto obrázky oproti tomu jsou více osobní. Záleží ale na typu webu, který způsob zvolit, jak k divákům promlouvat.

Příklad: http://www.totallywaggedout.co.uk/ , https://www.fromparcel.com/

ilustrace

Nebo:

ilustrace

http://collettedinnigan.com/ 

Ilustrace na webových stránkách

Animace a parallax scrolling

Animace jsou v současné době na webech velmi využívány, protože mají větší dopad na uživatele. Ale je třeba si použití animace pečlivě rozmyslet a používat je jen tam, kde je to vhodné a také sladit s celkovým designem webu. Velmi populární je parallax scrolling, se kterým můžeme dosáhnout velmi krásných efektů, například pohyb prvků proti sobě různou rychlostí. Je velmi efektní a dokáže čtenáře vtáhnout do příběhu.

Příklady: http://www.harbor-suites.com/ , http://designups.com/ , http://www.onhive.io/#what-can-you-do

parallax scrolling  

Videa

U nás ještě málo používaným prvkem jsou videa jako výrazného grafického prvku. Současné technologie umožňují přehrávat video přímo ve stránce a webdesign na to zareagoval zakomponováním videa přimo do grafiky, kde si prohlížíte stránky a před vámi se přehrává video, které je hlavním grafickým prvkem, je sladěné s webem, zaměřuje se na detaily a přednosti firmy. Cílem je vtáhnout uživatele do děje, upoutat jeho pozornost a tímto způsobem se dosahuje velmi dobrých výsledků.

Příklady: http://bluestag.co.uk/ , http://www.timetochoose.com/ , http://baesman.com/

Videa na webových stránkách

Motion animace

Naši pozornost přitahuje pohyb, potřebujeme-li, aby pozornost upoutal nějaký prvek na stránce, můžeme toho využít a zobrat ho v pohybu jako animovaný gif. Samozřejmě dobře zpracovaný a zakomponovaný do celkového designu. Pryč jsou doby blikajících tlačítek a poskakujících nevkusných bannerů. 

Barvy webových stránek

Velký důraz je kladený také na barvy. Dobře barevně sladěné stránky také působí dobře na uživatele. Velmi dobrých výsledků se dosahuje omezením barevnosti, ale důležité prvky jsou vysoce kontrastní ve výrazných barvách. To upoutává a přitahuje pozornost. Můžeme si všimnout velkých výrazně barevných tlačítek k akci. Objevují se i monochromatické weby, kde tyto výrazné prvky ještě více vyniknou a přitáhnou pozornost. 

Příklad: http://inlayinsights.com/

  barvy webových stránek

http://studiodyxe.com/ 

barvy webových stránek

 


Zapojte se do diskuse

Máte-li dotazy, nebo se chcete vyjádřit k danému tématu, pište prosím zde do komentářů.

(c) 2017, IR-webdesign.com | Webdesign: Tvorba webů Vyškov - IR-webdesign