Webdesign trendy na rok 2015 – Zápisky z konference Daily Web 2014 – 4.část
V novém roce pokračujeme reporty ze skvělé konference Daily Web 2014, které jsme se zúčastnili. V dnešním blogpostu si představíme webdesign trendy na letošní rok – přednášku na toto téma odprezentoval Tobias Gebauer z Německa. Top 5 grafických prvků, které budou letos kralovat webdesignu jsme načrtli i v našem newsletteru. Podle webdesignéra a webdevelopera Tobiase se jedná o:
1. Responzivní web design
Pokud patříte mezi naše stálé čtenáře, nepochybně pojem responzivní web design znáte. Obsah Vašeho webu se automaticky přizpůsobí šířce obrazovky používaného zařízení.
responzivní web design – montesaline.com
2. Obrázek / video nebo odkaz
Návštěvníci Vašich stránek by měli pochopit, co jim nabízíte v průběhu 5 vteřin. Jak usnadnit pochopení Vašeho reklamního poselství?
- zvolte vhodný obrázek nebo krátké video
- krátký nadpis
- 1 – 2 vety výstižně popisující Vaše podnikání
bluhomes.com – ukázka ideálně koncipované titulní stránky
3. Design na celou šířku obrazovky
Pokud na Vašich stránkách použijete obrázky nebo videa na celou šířku, tedy 1920 px a více, umocníte tím reklamní poselství. Vhodné je zakomponovat video nebo obrázek i do headeru, příp. využít barvy pozadí do obsahových bloků, aby web působil vzdušně.
šířka web stránky , e-shopu na celou obrazovku
4. Velké obsahové bloky
Tobias tvrdí, že obsah musí „dýchat“ 🙂 – vyčleňte mu proto dostatek prostoru. Samozřejmě, že každý běžný eshop si asi nemůže dovolit nechat svůj e-shop „dýchat“ jako např. swellspecialized.com 🙂, ale jako inspirace skvělý příklad. Respektujte délku Vašeho webu a v žádném případě ji nepřekračujte. Zredukujte nepotřebné informace – např. z bočních sloupců. Minimalizujte rozvrstvené menu na stránku O nás, Home, Produkty. Přidejte call-to-action prvky. Dodržujte pravidlo – jedno reklamní poselství na 1 stránku.
5. Typografie a webfonty
Pro dobrou web stránku nebo e-shop je typografie jedním z nejdůležitějších faktorů. Nezaškodí zopakovat si pravidla typografie na web stránce:
- ideální velikost fontu je 16 px se 150% výškou řádku
- 11 – 16 slov na řádek, tedy 55 – 80 znaků
- používejte webfonty s vysokou čitelností
typografie na web stránce
6. Jednostránkové web stránky
Jak zefektivnit šíření Vašeho reklamního poselství? – prostřednictvím microsites. Díky jednostránkovým web stránkám usnadníte Vašim zákazníkům proces rozhodování o výběru Vašich produktů nebo služeb. Tento způsob je vhodné využít u produktů, softwaru, aplikacích, rovněž u menších firem, u projektů nebo kampaních.
one page site – simplygum.com
7. Výprávění příběhů
Vyprávějte působivé příběhy, ukažte manipulaci nebo zážitky s Vašimi produkty. V centru Vašeho zájmu by měl být samotný produkt nebo Váš zákazník. Tobias přidává ukázky stránek, které vědí, jal na dokonalé příběhy:
storytelling National Geographic
8. Mřížkový layout
Je vhodné využít v případě, že provozujete stránky s množstvím fotografií. Zvolte fixní nebo automaticky se přizpůsobující velikost mřížky. Samozřejmostí je přidání popisu a alternativních popisků k obrázkům, odkaz na Homepage nebo portfólio Vašich služeb.
mřížkový layout
9. Off-canvas navigace
Navigační prvky jako např. ikonka menu v mobilní verzi web stránky nebo e-shopu, příp. vyrolování kategorií např. na Youtube.com
off canvas navigace
dokáží ušetřit místo pro cenný obsah.
10. Animace
Využijete jak pro Vaše tabulky, grafy nebo obrázky, tak i pro samotný obsah. Skvělé efekty, které rovněž můžete zakomponovat do Vašeho webdesignu jsou např. hover efekt nebo zoom-in:
příklad zoomování na ByznysWeb.cz
Příklady stránek se skvělými animacemi od Tobiase:
- http://lamingtondrive.com/
- http://www.aimyapp.com/
- http://www.gazeboshop.co.uk/classic-cars-big-screen/
- http://www.paneedesign.com/
Na závěr si dovolím ještě poznamenat, že rok 2015 bude více zaměřen na UX (user experience), konkrétně na osobní uživatelský zážitek, takže by jsme se měli soustředit na osobní přístup a spokojené zákazníky. Zahraniční zdroje upozorňují na stránky s delším scrollováním a to nejen na Home page, ale např. i na stránce O nás nebo na produktových stránkách – skvělým příkladem je např. http://www.apple.com/iphone-6/
tvorba www stránky, webové stránky, tvorba e-shopu
