Nalaďte si web k dokonalosti | E15.cz

Nalaďte si web k dokonalosti

Ilustrační foto
Ilustrační foto
• 
ZDROJ: Shutterstock.com

Jan Novák

Sdílet na Facebook Messenger Sdílet na LinkedIn
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 Diesel Autor: diesel.com/denim

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

seamco.be Na stránkách Seamco prostupují javascriptové animace celý web Autor: 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üsli Autor: Muslimanie.cz

ds5.citroen.com Rozsáhlé animace napříč webu Citroën Autor: Citroen

eurorscgcolombia.com/bogota Euro RSCG Colombia se do paměti zapsalo nejen animacemi ale i netradičním použitím 3D ploch Autor: 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 Nike Autor: Nike

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

t-mobile-rodinanadlouho.cz V Česku použila 3D efekt například společnost T-Mobile Autor: 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 wireframu Autor:

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 hokeji Autor: hokej2011.cz

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

citibank.cz Banky a operátoři kladou stále větší důraz na profesionální správu PPC kampaní Autor: 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í Autor: kiario.co.za

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

uzuri-zanzibar.com Fotografie přes celý monitor dotvářejí příjemnou atmosféru webu Autor: 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.com Autor: dentsunetwork.com

flywhitespace.com Autor: flywhitespace.com

altron.cz Autor: 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šťovny Autor: ceskapojistovna.cz

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

whitehouse.gov Rozsáhlé menu Bílého domu společně s náhledy nejdůležitějších článků Autor: 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 ikony Autor: ipolecat.com

thisistommy.com Retro styl a barvy Autor: thisistommy.com

versionsapp.com Velké vektorové ikony Autor: 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.

Autor: Jan Novák

S předplatným můžete mít i tento exkluzivní obsah