12 trendů tvorby webových stránek v roce 2013

 Vzhledem k tomu, že je půlka roku za námi, je na čase podívat na trendy pro webové stránky na rok 2013. Jsou tady úplně nové věci a nápady, přesto však jsou i věci které zůstávají „in“ i z roku 2012.

Je jedno jestli jste webové studio nebo vlastník malé firmy. Sledování trendů webových stránek pomůže udržet pozornost vašich zákazníků, resp. uspokojí vaše zákazníky.

Michal Voják

Product designer

Obsah nejdřív

Weboví designéři kladou čím dál více pozornosti na rozložení a strukturu obsahu, kterou vaši zákazníci na stránkách hledají místo toho, aby se umělý obsah „hlavně aby byl“ vkládal do hotových stránek. Obsah je zpravidla tvořen velmi jednoduše a minimalisticky. To dává možnost zákazníkům najít informace, které hledají. U webů kde je dodržena zásada myslet na obsah nejdřív mají výrazně větší konverzní poměr než stránky, kde se obsah doplňuje až na konec. Mnohdy ani není zřejmé jaká informace na daném místě má být.

Stonehenge Veterinary Hospital prodává svůj obsah.

Reponzivní design

Responzizní web začal více vystupovat jako nutnost v roce 2013 a není tomu jinak ani v roce 2013. Responzivní design zajistí pomocí CSS jednotný grafický vzhled , ale různé zobrazení na různých zařízeních. S čím dál větším rozšířením a samozřejmostí chytrých telefonů a tabletů je cílem firem zobrazovat stejný obsah na různých zařízeních bez nutnosti stahovaní speciálních aplikací či zobrazování speciálních „mobilních“ stránek. V neposlední řadě i obsah a jeho forma může mít různé formy (širokoúhlý monitor VS iphone na výšku).

Face používá uživatelský responzivní design pro doručení obsahu na různé typy zařízení a velikosti obrazovek.

Metro

S příchodem Windows 8 začal hon za jednoduchostí. Za takový je považován Metro design, který koresponduje se stylem vstupní obrazovky Windows 8. Metro vzhled umisťuje obsah do mřížky čtverců různých velikostí. Často jsou „dlaždice“ s obrázky, velkými ikonami a pohyblivými efekty.

Windows 8 inspiroval svým „Metro“ designem na Chrome Web Store

Podpora Retina rozlišení

Apple představil Retina Display v roce 2012 pro iPhone4, iPad a MacBookPro notebooky. Retina Display je obchodní označení pro nový display z tekutých krystalů (LCD), který se odlišuje vysokou hustotou pixelů. Apple deklaruje, že hustota pixelů je na hranici rozlišení bodu lidským okem. Většina lepších webových studií tak přišla s metodou kde pro zařízení s Retina Displayem zobrazuje pomocí CSS jiné obrázky (případně vektorová grafika) s vyšším rozlišením. Stejně tak se hojně používá knihovna Retina.js.

Retina.js pomáhá návrhářům poskytují snímky s vysokým rozlišením pro zařízení s displejem Retina.

Nekonečné posouvání

Mnoho populárních sociálních webů jako je Tumblr, Facebook, Pinterest používají nekonečné posouvání. Takto technika umožňuje automaticky načítat další obsah při dosažení konce stránky. Hlavním důvodem proč se tato technika stala populární, je že zvyšuje uživatelskou přívětivost, odstraňuje stránkování a umožňuje načítat další obsah aniž by návštěvník musel otevírat další stránku.

Langland používá nekonečné rolování.

Parallax

Další často používaný efekt při posouvání, který si také zachoval svou aktuálnost z roku 2012 je „Parallax“. Jedná se efekt kdy se dvě a více vrstev posouvá různou rychlostí. S dospíváním webových prohlížečů a škály možností, které nabízí se tento efekt stává více populární a nabízí vyšší interaktivitu a atraktivitu webové stránky.

D’Angelico Guitars používá paralaxy rolování.

Jednostránková prezentace

Metody Obsah napřed spolu s dalšími jako je nekonečné posouvání a Parallax vedli v roce 2013 k oblíbenosti jedno stránkových prezentací. Tyto stránky vynikají předvídavostí. Návštěvník ví, že vše co se může dozvědět se dozví na jedné stránce. Stránka je řešena pomocí interaktivních navigátorů a kotev. Působí tak dynamicky, moderně a energicky.

S4 Rally Team je vytvořena jako jediná stránka.

Fotka nebo Video přes celé pozadí

Minulý rok se stali velmi populární obrázky roztažené na celém pozadí stránky. Tento rok se navíc velice často objevují videa rozatažená na celé pozadí. Hlavním cílem této techniky je zaujmout relevantním videem pozornost návštěvníků. 

ebová stránka “i surf because…”používá na pozadí okolákající video surfaře.

Styl návrhů ladění do vzhledů aplikací

Popularita a oblíbenost vzhledu mobilních aplikací proniklo i do světa webových stránek. Vzhled webové stránky připomínající mobilní aplikaci je velice intuitivní a v kombinaci kde je použit responzivní design nabízí snadné ovládání a správné zobrazení na mobilních zařízeních.

Jackie Tran používá appstyle rozhraní pro své webové stránky.

CSS3 Efekty

Vzhledem k tomu, že podpora CSS3 začíná být v prohlížečích celkem standardem, začínají vývojáři používat více oku lahodících efektů, které nabízí prosté CSS3. 
CSS3 nabízí tvorbu hezkých odstínů, průhledných prvků a hezké animace s použitím skriptovacích jazyků namísto používání PNG obrázky nebo snad technologie Flash.
Blog Squarespace využívá CSS3 pro transparentnost.

Velké fonty a tučné nadpisy

Přerostlé, tučné a hranaté fonty hlavičkách webů nabírají také na popularitě. Tento styl jde ruku v ruce s trendem Obsah první a dělá weby pro návštěvníka přehledné. Informace na takovém webu zpravidla najde výrazně rychleji.
Osobní trenér Andy Hillier používá velké fonty k přitažení pozornosti návštěvníků.

Kruhový Vzhled Prvků

Mnoho vývojářů se přesouvá z čtvercového hranatého vzhledu do více přirozených kruhů. Kruhy přirozené zapadají do struktury webu a oživí vzhled stránek kde dominují pravé úhly a ostré rohy. Kruhy mohou být použity i v rámci Metro designu a to především jako velké ikony.

Digitální Atelier zdůrazňuje kruhy v jeho designu.

Zajimavé.. a co že je na ústupu?

Na úpadu v současné době je Skeuomorphism – t.j. weby které vypadají jako skutečné předměty. Ty jsou na ústupu proti vzhledu mobilních aplikaci s čistým plochým stylem a barvami (barvy nemají přechody). „Stuhy a nášivky“ se také objevují čím dál méně. [Zdroj: http://webmarketingtoday.com/articles/12-Web-Design-Trends-for-2013/ ]

 

O autorovi

Michal Voják

Product designer

Zavádím Product Discovery do firem a vedu startup s názvem userUP, který má za cíl pomoc firmám s Product discovery.

Podobné

Světové trendy ve webdesignu v roce 2014

Víte jaké byly v roce 2014 trendy ve webdesignu? Kdo je vlastně schopný říci jaké jsou trendy?
číst více

Facebook Instant Articles (FBIA)

  O AMP webech jste se u nás již mohli dočíst, ale slyšeli jste o Facebook Instant Articles (FBIA)? Další z možností, jak doručovat obsah z webu…
číst více

Registrace ve vyhledávačích

Často se na nás klienti obracejí s požadavkem registrace webových stránek ve vyhledávačích. Rozhodli jsme se proto připravit krátký článek, kde vysvětlíme jak…
číst více