Nalaďte si web k dokonalosti

Ilustrační foto

Ilustrační foto Zdroj: Shutterstock.com

Současné trendy v online prezentacích a v aplikacích pro chytré telefony už dávno opustily zajeté koleje. Díky technologiím a rychlému internetu sází tvůrci webu na větší interaktivitu. Společně s Janem Pivoňkou ze společnosti Giant interactive jsme pro vás vybrali ty nejzajímavější trendy.

1) Flashové animace nahrazuje javascript

Nejdůležitějším trendem uplynulého roku je zvyšování počtu mobilních zařízení. Nejvýznamnější roli v tomto odvětví hraje společnost Apple, která se ve svých produktech iPhone a iPad vydala cestou nepodpory animací prostřednictvím technologie Flash. Tomu se postupně přizpůsobuje tvorba webů a pro animace se stále častěji využívá JavaScript. Razantní nástup JavaScriptu urychlily i frameworky MooTools a jQuery, které mají předpřipravené komponenty a zkracují tak dobu vývoje. Tato změna pak ovlivňuje i další současné trendy webdesignu. Větší pohyblivost a interaktivitu webů lze do budoucna očekávat i díky nastupující technologii HTML5.

diesel.com/denim

Animace, retro barvy a výrazné vizuály na webu
Dieseldiesel.com/denim Animace, retro barvy a výrazné vizuály na webu Diesel | diesel.com/denim

liptonicetea.pl

Kombinace několika moderních prvků (velké vizuály, animace, 3D prostor, typografie) na polském webu čajů Liptonliptonicetea.pl Kombinace několika moderních prvků (velké vizuály, animace, 3D prostor, typografie) na polském webu čajů Lipton | Lipton

seamco.be
Na stránkách Seamco prostupují javascriptové
animace celý webseamco.be Na stránkách Seamco prostupují javascriptové animace celý web | Seamco

2) Větší interaktivita prezentací v obsahové části

Nespornou výhodou JavaScriptu je možnost lepší správy obsahu a možnost indexace pomocí fulltextových vyhledávačů. Animace se tak z role prezentačního nástroje stále častěji dostávají na podstránky webů, kde usnadňují orientaci a umocňují uživatelský zážitek. S JavaScriptem se stále častěji setkáváme ve formě záložek nebo nejrůznějších rozbalovacích a navigačních prvků.

Muslimanie.cz

Pomocí javascriptového konfigurátoru si můžete na webu sestavit své vlastní müsliMuslimanie.cz Pomocí javascriptového konfigurátoru si můžete na webu sestavit své vlastní müsli | Muslimanie.cz

ds5.citroen.com

Rozsáhlé animace napříč webu Citroënds5.citroen.com Rozsáhlé animace napříč webu Citroën | Citroen

eurorscgcolombia.com/bogota
Euro RSCG Colombia se do paměti zapsalo nejen
animacemi ale i netradičním použitím 3D plocheurorscgcolombia.com/bogota Euro RSCG Colombia se do paměti zapsalo nejen animacemi ale i netradičním použitím 3D ploch | Euro RSCG Colombia

3) Navození 3D prostoru pomocí parallax efektu

Dalším prvkem, který je do značné míry ovlivněn nástupem JavaScriptu, je parallax efekt. Jedná se o techniku známou například z animovaných filmů, kdy se obraz rozdělí na jednotlivé vrstvy, které se pohybují různou rychlostí (rychleji ty v popředí a pomaleji v pozadí). Vzniká tak dojem 3D prostoru. U webů se tato technika používá nejčastěji v rámci navigace. Obrazovka postupně odjíždí na požadovaný obsah a uživateli se před očima vytváří 3D efekt za pomoci vrstev webu.

nikebetterworld.com
Jedním z průkopníků parallax efektu na webu byla společnost Nikenikebetterworld.com Jedním z průkopníků parallax efektu na webu byla společnost Nike | Nike

nintendo.com.au/gamesites/mariokartwii
V Austrálii Nintendo vsadilo na kombinaci parallax
efektu s horizontálním skrolovánímnintendo.com.au/gamesites/mariokartwii V Austrálii Nintendo vsadilo na kombinaci parallax efektu s horizontálním skrolováním | Nintendo

t-mobile-rodinanadlouho.cz

V Česku použila 3D efekt například společnost
T-Mobilet-mobile-rodinanadlouho.cz V Česku použila 3D efekt například společnost T-Mobile | T-Mobile

4) Do tvorby webů v České republice proniká větší důraz na vytváření wireframů a celkovou uživatelskou přívětivost

Wireframy jsou zjednodušené modely webu, které definují rozmístění obsahových, funkčních i navigačních prvků webu. Stále častěji se tyto prvky využívají jako základní element při návrzích webů. O větším zájmu o uživatelskou přívětivost webů svědčí množství odborných konferencí a velikost komunity, která se kolem tohoto tématu vytváří. Česká republika tak měla jedno z největších zastoupení na berlínském UX Campu a do významnějšího podvědomí se dostává i sdružení Prague ACM SIGCHI nebo vzrůstající zájem o uživatelské testování webů již průběhu samotného vývoje.

Náhled typického wireframuNáhled typického wireframu

5) Vzrůstající zájem o marketing ve vyhledávačích i u dominantních hráčů

Fulltextové vyhledávače umožňují přesné cílení. Pokud se web umístí na předních pozicích relevantních výsledků vyhledávání, je uživatel nabídkou osloven právě v momentě, kdy ji sám aktivně vyhledává a má čas se jí věnovat. Stále více firem si toto uvědomuje a do všeobecné známosti se dostávají zkratky jako SEO nebo PPC. Optimalizaci pro vyhledávače nyní stále častěji do marketingového mixu zařazují i dominantní hráči, pro které dříve byla podružnou.

hokej2011.cz

Společnost Henkel přivedla díky SEO na svůj web
více než milion návštěvníků v průběhu Mistrovství
světa v hokejihokej2011.cz Společnost Henkel přivedla díky SEO na svůj web více než milion návštěvníků v průběhu Mistrovství světa v hokeji | hokej2011.cz

skoda-auto.cz

Škoda Auto si nechala provést kompletní analýzy svých webůskoda-auto.cz Škoda Auto si nechala provést kompletní analýzy svých webů | Skoda Auto

citibank.cz

Banky a operátoři kladou stále větší důraz na
profesionální správu PPC kampanícitibank.cz Banky a operátoři kladou stále větší důraz na profesionální správu PPC kampaní | citibank.cz

Nejvýznamnější trendy v oblasti grafiky

6) Grafika stále častěji využívá plochu nad 1024 pixelů

Pryč jsou doby, kdy byl běžný monitor se zobrazením 1024 na 768 pixelů. Současné statistiky uvádějí, že tuto velikost má již méně než 12 % uživatelů. Tuto skupinu navíc podporují tablety a netbooky, které často nejsou pro uživatele primárním zařízením. Vzhledem k rozšíření velkých monitorů již tedy není důvod optimalizovat grafiku pro malé rozlišení. V módě jsou velké fotografie a weby roztažené přes celou šíři obrazovky.

kiario.co.za

Fullscreenové fotografie Kia Rio překvapí svou
velikostíkiario.co.za Fullscreenové fotografie Kia Rio překvapí svou velikostí | kiario.co.za

discover.store.sony.com

Výrazné vizuály na webu tabletu Sonydiscover.store.sony.com Výrazné vizuály na webu tabletu Sony | discover.store.sony.com

uzuri-zanzibar.com

Fotografie přes celý monitor dotvářejí příjemnou
atmosféru webuuzuri-zanzibar.com Fotografie přes celý monitor dotvářejí příjemnou atmosféru webu | uzuri-zanzibar.com

7) Výrazná typografie

Jedním z nejvýraznějších prvků se v roce 2011 stala propracovaná typografie. V dřívější době bylo možné na webu využít pouze fonty, u kterých byla záruka, že je má většina uživatelů nainstalované. Nyní se co chvíli objevují další a další metody jak tento nedostatek obejít. Stále častěji se tak ve webové typografii využívají atypické fonty. Rok 2011 byl ve znamení použití výrazných nadpisů a odklonu od velikosti běžného textu 12 pixelů směrem k velikosti 14. Ta je dle uživatelských testů na webu čitelná lépe.

dentsunetwork.comdentsunetwork.com | dentsunetwork.com

flywhitespace.comflywhitespace.com | flywhitespace.com

altron.czaltron.cz | altron.cz

8) Rozsáhlá vypadávací menu

S ohledem na uživatelskou přívětivost se na webech stále častěji využívají vypadávací menu, kde uživatel nalezne kompletní přehled o dané sekci. Nemusí se tak již zanořovat hlouběji do webu a vidí vše již na úvodní stránce při najetí na danou položku. Menu stále častěji obsahují také další doplňkové informace nebo kompletní náhledy produktů. Menu tak částečně nahrazují mapu webu nebo masivní navigační patičky, které byly oblíbené v předchozích letech.

ceskapojistovna.cz

Masivní menu na novém webu České pojišťovnyceskapojistovna.cz Masivní menu na novém webu České pojišťovny | ceskapojistovna.cz

iwc.com

Rozjížděcí menu obsahuje rovnou náhledy samotných
produktůiwc.com Rozjížděcí menu obsahuje rovnou náhledy samotných produktů | iwc.com

whitehouse.gov

Rozsáhlé menu Bílého domu společně s náhledy
nejdůležitějších článkůwhitehouse.gov Rozsáhlé menu Bílého domu společně s náhledy nejdůležitějších článků | whitehouse.gov

9) Další moderní prvky v grafice

Tak jako každý rok, přinesl i rok 2011 nové prvky webdesignu. Nejtypičtějším zástupcem těchto trendů je použití kreslené grafiky, retro barev a vzdušnosti. Dá se říci, že po éře zakulacených rohů jsou dnes v módě šikmé plochy a nazpět se vracejí rohy ostré. Významné je použití bohatých textur na pozadí. Na webech se používají vektorové ikony a ikony ve stylu aplikací Apple.

ipolecat.com

Výrazné ilustrace a ikonyipolecat.com Výrazné ilustrace a ikony | ipolecat.com

thisistommy.com

Retro styl a barvythisistommy.com Retro styl a barvy | thisistommy.com

versionsapp.com

Velké vektorové ikonyversionsapp.com Velké vektorové ikony | versionsapp.com

10) Vytváření infografik

Jednoznačným trendem roku 2011 je vytváření infografik. Infografiky většinou spojuje výrazná typografie, retro barvy, vektorové kresby a vysoký obdélníkový formát. Ve spojení se zajímavými statistickými údaji přenášejí svým tvůrcům především virální efekt. Infografiky jsou oblíbeným prvkem pro šíření napříč blogy a sociálními médii.