V súčasnosti je vývoj web dizajnu veľmi dynamický. Každoročne pribúdajú nové techniky a rôzne trendy, ktoré posúvajú web dizajn na ďalšiu úroveň. V tomto článku sú opísané trendy, z ktorých sú tu niektoré už dlhšiu dobu, ale stále sú veľmi významné a spôsobili určitú revolúciu vo web dizajne. V prvej kapitole sa nachádza zopár technologických trendov, ktoré opísala spoločnosť Webguru infosystems. V ďalších troch kapitolách sa nachádzajú postupne web dizajnové trendy Responsive design, Flat design a Material design.
1 .Technologické trendy
Spoločnosť Webguru infosystems, ktorá sa zaoberá web dizajnom opísala vo svojej informatívnej e-knihe, zopár technologických trendov súčasnosti.
Pohyblivá grafika môže vplývať na používateľské rozhranie a rozloženie stránky. Použitie pohyblivej grafiky by malo záležať na cieľovej skupine ľudí, ktorú chceme zaujať. Môže byť lepšie prijatá na zábavne orientovaných web stránkach. Na web stránkach s formálnejším zameraním, ako napríklad business, alebo vládne stránky, môže tento dizajn rozptyľovať a byť zbytočný. To ale neznamená, že obsah týchto stránok nemôže byť podporený videom, alebo animovanou prezentáciou, ktorá má význam k obsahu.
Interaktívny a používateľsky zážitkový dizajn záleží na tom, aký je obsah a ako web stránka funguje. Tento zážitkový dizajn pre užívateľa je spojený s označovaním, jasnými inštrukciami a usporiadaním na stránke. Interaktívny dizajn ovplyvňuje mieru pochopenia používateľov, ktorý pracujú s web stránkou. Ak používateľ považuje web stránku za užitočnú pokračuje v jej používaní. Pre menej skúseného používateľa, môže byť mnoho krát náročné nájsť užitočnosť web stránok. Preto sa kladie veľký dôraz na jednoduchú navigáciu a jednoduché používateľské rozhranie. Pri tvorbe používateľsky zážitkového dizajnu leží otázka, či použiť interaktivitu, ktorá vyžaduje plug-in, alebo nie. Ak tento plug-in nebol nainštalovaný spolu s prehliadačom, môže tu nastať risk, či používateľ bude ochotný si nainštalovať tento plug-in, alebo nie.
Dizajn používateľského rozhrania záleží na kvalite rozloženia stránky. Šírka stránky v pixeloch, je dôležitým faktorom rozloženia pre zarovnanie objektov. Najpopulárnejšie stránky s fixnou šírkou majú rovnako nastavenú šírku aby súhlasila s najpopulárnejšími webovými prehliadačmi, poslednými najlepšími rozlíšeniami obrazovky na najväčších dostupných monitoroch. Väčšina web stránok je zarovnaných na stred kvôli estetickým obavám na väčších obrazovkách.
Marketingový a komunikačný dizajn na web stránkach pomáha identifikovať všetky funkcie, ktoré fungujú pre ich cieľový trh. To môže byť napríklad veková skupina, alebo kultúrne príslušenstvo a podobne. Je veľmi dôležité pozorne naplánovať dizajn stránky. Marketingový a komunikačný dizajn, by ale nemal zasahovať do rýchlosti a jasnosti navigácie a obsahu na stránke.(1)
2. Responsive design
Keďže v súčasnosti číslo používateľov mobilných zariadení surfujúcich online prekonáva každoročne rekordy a zároveň spoločnosť Google vydala príručku pre vlastníkov web stránok, v ktorej stojí, že responzívny dizajn je preferovaná konfigurácia pre mobilné web stránky a každý chce byť na dobrej strane Google, pretože to môže ovplyvniť poradie web stránky vo vyhľadávaní a podobne, práve preto je v súčasnosti responzívny dizajn web stránok veľmi dôležitý. V roku 2015 bude responzívny dizajn pokračovať vo svojej dôležitosti, ale väčší dôraz sa bude klásť na výkon web stránok. To znamená, že pri tvorbe responzívnej web stránky by sme mali obsiahnuť iba tie elementy, ktoré sú dôležité a zoptimalizovať tieto elementy.
Na základe štúdie spoločnosti Aberdeen Group sa zistilo, že web stránky s responzívnym dizajnom dosahujú až 11 percentnú konverziu návštevníkov na kupujúcich, oproti web stránkam bez responzívneho dizajnu, ktoré dosahujú len 2,7 percentnú konverziu. Taktiež povedomie značky u používateľov pri web stránkach s responzívnym dizajnom, je až 34,7 percenta, zatiaľ čo pri web stránkach bez responzívneho dizajnu je to len 4,8 percenta. Ročný obrat spoločnosti je pri web stránkach s responzívnym dizajnom takmer o 100 percent vyšší ako pri web stránkach bez neho.(2)
V roku 2015 sa dá očakávať viacero trendov v oblasti responzívneho dizajnu, napríklad vertikálne rozdelenie obrazovky, kde používatelia budú prehľadávať web stránku vo vertikálnom smere. Využívanie jednej jedinej dlhej stránky, po ktorej sa používateľ pohybuje rolovaním, alebo dizajn rozprávania príbehu, keďže obsah web stránok je v dizajne veľmi dôležitý a môže to byť výborný nástroj na podporu a reklamu produktov a služieb. Dizajn vyplnenia celej obrazovky, čo dá používateľom mobilných zariadení lepší pohľad na web stránku, alebo aj skryté hlavné menu, ktoré sa zobrazí po kliknutí na ikonku na obrazovke, čím vlastníci web stránok získajú viacej miesta na zobrazenie obsahu, týkajúceho sa organizácie.(3)
Obrázok : Príklad riešenia responzívneho dizajnu web stránky teehan+lax(4)
3. Flat Design
Flat design je v posledných rokoch veľmi populárny, prevzal celý dizajnový svet. Spoločnosti ako Microsoft, Google a Apple si adaptovali tento dizajn a množstvo ďalších dizajnérov ich následovalo. Niektorý dizajnéri, ale vidia Flat design ako začiatok revolúcie. Napríklad Marci Ikeler zakladateľ Little Arrows, čo je dizajnérska spoločnosť, verí, že Flat design je príznakom rastúcej zrelosti v oblasti webu a dizajnu rozhraní. Táto zrelosť sa odzrkadľuje v lepšom vytváraní rozhraní, ktoré podporujú interaktivitu.(4)
Flat design umožňuje v mnohých prípadoch zvyšovať konverziu web stránky. Napríklad na základe prípadovej štúdie, kde sa skúmal vplyv Flat gombíka oproti klasickému s rôznymi tieňmi a gradientami sa zistilo, že Flat gombík spôsoboval nárast konverzie web stránky o 35,81 percenta. Výsledkom bolo nevyužívanie rôznych tieňov a gradientov, ale jednoduchý Flat dizajn s použitím kontrastu.(5)
Obrázok : Flat gombík zvyšuje konverziu(5)
Ďalšia prípadová štúdia, ktorá poukazuje na zvyšovanie konverzie používaním Flat dizajnu, sa týka spoločnosti Underwater Audio, ktorá sa rozhodla prerobiť svoju web stránku s využitím Flat dizajnu. Dizajn ich novej stránky bol podstatne jednoduchší, pretože odstránili niektoré produktové informácie a obrázky a využili Flat usporiadanie jednotlivých elementov. Pomocou A/B testu porovnali ich pôvodnú web stránku s novou minimalistickou, ktorá využíva Flat design. Výsledkom bolo, že jednoduchšia verzia s Flat dizajnom mala nárast konverzie o 261 percent.
Na druhej strane zlý Flat design môže spôsobovať znižovanie rozpoznávania rôznych elementov na stránke. Príkladom je Windows 8 Metro štýl používateľského rozhrania, kde bez jasného oddelenia prvkov, vrátane oblastí kam sa dá kliknúť, je pre používateľa ťažké si uvedomiť kam treba kliknúť.
Keď dizajny web stránok využívajú Flat design, sú jednoduché a obsah je zameraný na dobré zážitkové čítanie, môžu výrazne zvýšiť pravdepodobnosť používateľov, že dokončia požadované úlohy na stránke.(5)
Obrázok : Príklad stránky s adaptovaným Flat dizajnom(4)
4. Material Design
Material design je dizajnový jazyk, ktorý bol vytvorený pre nový operačný systém Android od Google. Tento dizajn bol predstavený v lete roku 2014, takže je pomerne novinkou vo svete dizajnu. Material design sa zameriava na fyzický materiál, napríklad ako interiérový dizajnéri. Digitálne rozhranie ale nie je vytvorené z rovnakého materiálu ako napríklad záclony, alebo závesy. Material design od Google považuje za materiál homogénnu digitálnu „tkaninu“, ktorá je vytvorená z pixelov. Používateľ môže kliknúť, posúvať, alebo pripnúť túto materiálovú „tkaninu“ a ona sa bude pohybovať podľa interakcie s používateľom. Mobilné rozhrania sú vytvorené z vrstvených materíalových objektov, ako sú rôzne obdĺžnikové bloky, alebo kruhové gombíky. Obsah, ako je text, video a podobne, je položený na príslušnom materiály. Dôležité je, že Material design je jazyk. Nie je to iba súprava používateľského rozhrania, alebo kolekcia elementov rozhrania, ale skôr nový spôsob pozerania sa na rozhranie.(6)
Obrázok : Material design od Googlu(6)
Zoznam zdrojov:
1: WebGuru infosystems. FUNDAMENTALS OF WEBSITE BUILDING & WEB DESIGN TRENDS 2014. [online e-book]. [cit. 2015-04-19]. Dostupné na: <http://www.webguru-india.com/free-webdesign-ebook.php?msg=success#msg>
2: Kuno Creative. Why does responsive website design have higher conversion rate?. [online]. [cit. 2015-04-19]. Dostupné na: <http://www.kunocreative.com/blog/responsive-website-design-higher-conversion-rates>
3: Narga. Responsive Web Design Trends That Will Rule 2015. [online]. [cit. 2015-04-19]. Dostupné na:<http://www.narga.net/responsive-web-design-trends-that-will-rule-2015/>
4: Marcin Treder, Robert Warych, Sebastian Witman. WEB DESIGN BOOK OF TRENDS 2013-2014. [online e-book]. [cit. 2015-04-19]. Dostupné na: < http://www.uxpin.com/web-design-book-of-trends-2013-2014.html>
5: Giles, T. How Flat Design Increases Conversion Rates. [online]. [cit. 2015-04-19]. Dostupné na: <http://speckyboy.com/2014/09/17/flat-design-increases-conversion-rates/>
6: Google. Material design. [online]. [cit. 2015-04-19]. Dostupné na: <http://www.google.com/design/spec/material-design/introduction.html>
Autor: Michal Barč
