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 |
liptonicetea.pl Kombinace několika moderních prvků (velké vizuály, animace, 3D prostor, typografie) na polském webu čajů Lipton |
seamco.be Na stránkách Seamco prostupují javascriptové animace celý web |
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 |
ds5.citroen.com Rozsáhlé animace napříč webu Citroën |
eurorscgcolombia.com/bogota Euro RSCG Colombia se do paměti zapsalo nejen animacemi ale i netradičním použitím 3D ploch |
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 |
nintendo.com.au/gamesites/mariokartwii V Austrálii Nintendo vsadilo na kombinaci parallax efektu s horizontálním skrolováním |
t-mobile-rodinanadlouho.cz V Česku použila 3D efekt například společnost 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
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 |
skoda-auto.cz Škoda Auto si nechala provést kompletní analýzy svých webů |
citibank.cz Banky a operátoři kladou stále větší důraz na profesionální správu PPC kampaní |
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í |
discover.store.sony.com Výrazné vizuály na webu tabletu Sony |
uzuri-zanzibar.com Fotografie přes celý monitor dotvářejí příjemnou atmosféru webu |
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 |
flywhitespace.com |
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 |
iwc.com Rozjížděcí menu obsahuje rovnou náhledy samotných produktů |
whitehouse.gov Rozsáhlé menu Bílého domu společně s náhledy nejdůležitějších článků |
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 |
thisistommy.com Retro styl a barvy |
versionsapp.com Velké vektorové ikony |
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.