9 trendů ve webovém designu důležitých v roce 2021

Co znamená webový design v roce 2021?

Za uplynulé roky jsme byli svědky posunu v praxi webového designu směrem k většímu důrazu na mobilní adaptace. Od web stránek se dnes očekává, že budou ještě efektivnější a uživatelsky přívětivé, aby se udržely na vysoce konkurenčním online trhu, a také musí být použitelné na všech typech displejů – ať už na počítači, tabletu nebo smartphonu. Obsáhlý a mírně přeplněný design typický pro nulté roky 21. století je minulostí; lidé ho už mají dost. Novým pravidlem je důraz na nevyhnutelné. 

Web stránky musí být “uživatelsky přívětivé”, ale “použitelnost” je v moderním webovém designu stejně důležitá. Responzivní webový design je důležitý trend na mobilním trhu. Zdůrazňuje technickou flexibilitu a zároveň zohledňuje i zařízení uživatele. Moderní webový design tedy znamená, že web stránka efektivně „reaguje“ na zařízení uživatele a s ohledem na něj se i zobrazuje. Responzivní webový design je úmyslně navržen tak, aby web stránky dokázaly dobře zareagovat na nové nebo doposud neznámé systémy. Weboví designéři už nevyvíjejí stránky jen pro prohlížeče – mnoho nejlepších provozovatelů web stránek umožňuje jednodušší používání na mobilních zařízeních prostřednictvím vlastních aplikací.

Několik webdesignerských buzzwordů (módních slov) nás provází i v roce 2021. Na jedné straně je tu internet věcí, se kterými souvisí rostoucí digitalizace každodenního života a chuť nabídnout uživatelům ještě více možností pro interakci. Na druhé straně jsme zaznamenali významné pokroky ve výzkumu umělé inteligence, jejichž důsledkem je zlepšení automatizovaných webových služeb; weboví designéři zřejmě naplno využívají i tuto oblast. Nakonec je tu čím dál silnější důraz na křupavý obsah, což znamená, že provozovatelé web stránek se snaží, aby jejich web stránky byly co nejatraktivnější a zároveň chtějí, aby byla přívětivost vůči uživatelům nejvyšší prioritou. Tyto digitální „chuťovky“ zároveň ukazují trend sahající zpět k jasné a přitažlivé vizi z období okolo roku 2000. Když spolu tyto dva trendy – zaměření na použitelnost a křupavý obsah – opravdu fungují a přidají se k nim další inovace a odvážné nápady, rok 2021 by měl být pro webové designéry opravdu vzrušující. 

Trendy a protitrendy ve webovém designu

Trendy ve webovém designu neexistují ve vakuu: objevují se i protitrendy, které tahají prvky designu jiným nebo opačným směrem. Někdy se protitrendy vyvinuly z reakce na určité trendy, když se staly úplně očividné. Weboví designéři se často spoléhají na protitrendy, když chtějí vyniknout jako designéři budoucnosti. Zde je několik příkladů trendů a jejich odpovídajících protitrendů, které nás čekají v roce 2021. 

 

9 trendů, které ovlivní webový design v roce 2021

Všeobecně se webový design bude i nadále vyvíjet stejným směrem jako v ostatních letech: zaměření na mobilní zařízení (responzivní design), křupavý obsah, účelově zaměřené rozhraní a reaktivní nebo interaktivní uživatelské rozhraní. Zároveň má vývoj v oblasti umělé inteligence čím dál silnější vliv na webové designéry a nové technologie jsou stále více dostupné. V roce 2021 uvidíme pokračování různých trendů ve webovém designu z předcházejících let, přičemž se internetový prostor radikálně nezmění. Některé trendy však naznačují další rozvoj v oblasti user experience (zkušenosti uživatele) na platformách a už dnes formují internet zítřka. 

Trend 1: Rychlost/výkon má čím dál větší význam

Spíše než o trend jde o základní princip dobře navržené stránky: rychlost načítání stránky je stále více důležitější, a to hlavně díky mobilní revoluci. Konec konců, všichni provozovatelé web stránek chtějí, aby byly jejich stránky snadno dostupné a kompaktní. Rychlejší načítání stránky znamená lepší zkušenost uživatele – to platilo před 10 lety. Weboví designéři však čím dál více eliminují prvky náročné na čas a paměť s cílem umožnit co nejrychlejší používání web stránky. 

Mnohé další trendy ve webovém designu mají kořeny zde. Například rostoucí minimalismus v designu web stránek znamená, že se designéři vyhýbají prostředkům náročným na paměť a upřednostňují formáty, které nepotřebují tolik prostoru. Rolovací web stránky, na kterých jsou všechny potřebné informace na jedné rolovatelné stránce, se dostávají do popředí, protože uživatel musí načítat pouze tuto jednu stránku, a ne mnoho dalších podstránek. Čím dál populárnější „bílá místa“ také zvýrazňují vyhýbání se prvkům, které by mohly zpomalit načítání webu.

Internet se výrazně zrychlil během relativně krátkého období. Stále však zaznívají hlasy kritiků, že není dost rychlý. Zejména mobilní datové sítě ještě nejsou v mnoha regionech dostatečně výkonné. Webový designéři si však dokážou poradit s těmito nedostatky tím, že navrhují web stránky, aby byly co nejjednodušší. 

Další trendy moderního webového designu, jako např. interaktivní animace, paralaktické efekty nebo dynamická pozadí vypadají skvěle a zlepšují příjem informací, když jsou použité efektivně. Komplexní design web stránek má však často negativní vliv na výkon. Weboví designéři proto musí pečlivě zvažovat, které multimediální prostředky a interaktivní obsah nabízejí přidanou hodnotu pro uživatele a zároveň zbytečně nezpomalují web stránku. Všeobecné pravidlo je: méně je více – což však nemusí nutně znamenat návrat k plochému designu. 

Poznámka: výkon web stránky má přímý vliv na zkušenost uživatele. Je potřeba rozlišovat mezi skutečným a uživateli vnímaným časem načítání. Zpomalení je problematické pouze tehdy, kdy ho vnímá uživatel. Weboví designéři proto používají mimo jiné i následující opatření, aby předešli dlouhému načítání:

Indikátor průběhu

Když už má uživatel čekat, měl by alespoň vědět, jak dlouho. Indikátor nezkrátí čas načítání, ale může být alespoň navržený zábavným, zajímavým způsobem. Cílem je, aby uživatel zůstal na stránce, i když musí čekat. Vždyť uživatelé internetu jsou dnes čím dál netrpělivější, když musí čekat na otevření web stránek. 

Indikátor průběhu může být zobrazený jako pásek, jako je zobrazeno zde. Zdroj: http://www.cssflow.com/snippets/animated-progress-bar/demo.

Načítání klíčových prvků na prvním místě 

Web stránky by měly být naprogramované tak, aby se nejprve načítal a v prohlížeči zobrazil obsah “nad zlomem stránky”. To jsou ty části stránky, které uživatel vidí, aniž by musel rolovat stránku níže. Pokud je tento obsah dostupný, uživateli nevadí, pokud je zbylý obsah („pod zlomem stránky“) načten později.

Progresivní JPEG formát

Obrázky nahrané jako progresivní JPEGy se nenačítají shora dolů v cílovém rozlišení. Namísto toho se používá progresivní skenování: uživateli se nejprve zobrazí náhled obrázku v nižší kvalitě, který se postupně vylepšuje, až dokud nejsou úplně načtena data obrázku v požadované kvalitě. 

Tip: Více triků na zlepšení výkonu Vaší web stránky můžete najít v našem článku o optimalizaci web stránek.

WebAssembly

Webové aplikace jsou důležitou součástí uživatelské praxe s internetem, a je k tomu dobrý důvod. JavaScript umožňuje návštěvníkům web stránek vstupovat se stránkami do vzájemné interakce, což zlepšuje jejich zkušenost. Mnoho webových aplikací však brzdí výkon. WebAssembly (Wasm) je nově vyvinutý jazyk, který v prohlížeči běží mnohem rychleji, protože je předkompilovaný. Wasm ještě není tak rozšířený, ale moderní prohlížeče už dokáží zacházet s jeho technologií. 

Trend 2: CSS Triky

CSS je dnes nezbytností u vývoje web stránek. Téměř každá web stránka využívá kaskádové styly na přizpůsobení designu. Naštěstí, CSS se stále vyvíjí a nabízí nové a inovativní možnosti jak navrhnout působivé web stránky. Nejnovější pokroky byly zaměřené na flexibilitu web stránky. Je to obzvláště důležité v případě stránek zobrazených na mobilních zařízeních, kde se od obrázků a jiných médií očekává, že budou mít rozumnou velikost a formu. 

CSS Grid & CSS Flexbox

Po spuštění CSS3 tento jazyk dnes zahrnuje i CSS Grid a CSS Flexbox. Obě metody otevírají dveře designům, které se automaticky přizpůsobují velikosti obrazovky. Jednotlivé prvky jsou rozložené a velikostně přizpůsobené prostřednictvím inteligentního systému, zároveň však musí weboví designéři stále manuálně přizpůsobovat jejich minimální a maximální rozměry. 

SVG

Formát obrázků SVG není ničím novým, ale nabízí některé výhody, které získávají na důležitosti. Tento formát totiž zachovává malou velikost souboru, je snadno škálovatelný a dá se formátovat prostřednictvím CSS. Díky tomu je SVG webdesignovým trendem na rok 2021. Protože jde v podstatě o XML datový formát, zdrojový kód (a grafika) se dají přizpůsobovat pomocí CSS. Tato kombinace umožňuje webovým designerům integrovat grafiku a přizpůsobit ji obrazovce zařízení nebo individuálním potřebám uživatele. 

Trend 3: Mikro interakce

Mikro interakce jsou trendem v UX designu, když jsou vybrané uživatelské interakce provázené drobnými animacemi. Jedná se například o tlačítko Líbí se mi, kdy při kliknutí na něj smartphone zavibruje. Pro UX experty, jako je např. Dan Saffer, jde o detaily, které představují rozdíl ve zkušenostech uživatele. 

Tip: Příklady úspěšných animací pro mikro interakce můžete najít na Awwwards.com nebo Dribbble.

Trend 4: Dlouhé/nekonečné rolování 

Přístup zaměřený v první řadě na mobilní zařízení se netýká jen aktuálního zobrazení nebo bezztrátového zobrazení webového obsahu na různých zařízeních, ale bude také čím dál více ovlivňovat webový obsah v budoucnosti. Jedním z nejvýznamnějších posunů v této oblasti je přechod od klikání k rolování. Rolovací stránka je v podstatě starý dobrý známý. Avšak designové trendy jako např. nekonečné rolování nebo paralaktický efekt budou stále populární a zůstanou trendy i pro rok 2021. 

Nekonečné rolování

Nekonečné rolování umožňuje návštěvníkům web stránek objevovat nový obsah rolováním namísto klikání. Když přijdete na konec zobrazení, automaticky se zobrazí jeho pokračování. Sociální sítě jako Facebook, Instagram, Reddit či Quora už dávno zavedly tuto metodu, aby její pomocí takto zobrazovaly svým uživatelům obsah v nepřetržitém newsfeedu (informačním kanálu). Nekonečné rolování se stalo také běžně používaným nástrojem v blozích a je jisté, že sehraje významnou roli i v budoucnosti.  

Nekonečné rolování je ideální pro web stránky se širokým spektrem informací. Zatímco blog, na kterém je 100 nebo 200 příspěvků, se dá snadno uspořádat do stránek, užitek takového rozdělení klesá s rostoucím objemem informací. Je dost nepravděpodobné, že čtenář vyhledá např. stránku 812 z 5782 stran. Oproti tomu se nekonečné rolování využívá společně se sofistikovanými algoritmy, které přefiltrují informace a nabídnou uživateli příspěvky, které budou považovat za nejrelevantnější z jeho pohledu. 

Provozovatelé web stránek, kteří chtějí naskočit v roce 2021 na vlak s nekonečným rolováním, by se měli nejprve ujistit, že tak učiní způsobem, který zohlední vyhledávače. Ačkoliv měl Google na začátku problémy s rolovacími stránkami, dnes se dá nekonečné rolování implementovat bez problémů díky podrobným designovým usměrněním od lídra na trhu v oblasti vyhledávání. Je potřeba přihlédnout k následujícím bodům: 

• Samostatná URL pro každou podstránku
• Překrývající se obsah by neměl vyskakovat 
• Návštěvníci by měli být schopni jednoduše identifikovat vyhledávanou informaci 
• Čas načítání by měl být přijatelný

Tip: Jedním z příkladů implementace nekonečného rolování způsobem zohledňujícím vyhledávací nástroje je demo web stránka od analytika trendů pro webmastery Johna Muellera.

Efekt paralaktického rolování

I když paralaktické rolování nepatří mezi nejnovější trendy ve webovém designu, v budoucnosti bude stále důležité kvůli svojí čím dál více populární funkci. Tato pohybová paralaxe je v ostatních letech základním stavebním kamenem moderních web stránek. Tato speciální schopnost pohybovat různými úrovněmi web stránky při různých rychlostech vytváří prostorové vidění. Tyto speciální vizuální efekty způsobují, že fascinovaný návštěvník dále roluje stránku a ve výsledku na ní zůstává déle. Nejlepší je, když jsou tyto efekty spojené i s prvky, které nabádají návštěvníka k vykonání žádoucí činnosti. Proto je nejlepší spojit paralaktické rolování s interaktivním vyprávěním. Vynikajícím příkladem na ilustraci těchto efektů je stránka “Every Last Drop”.

Trend 5: Personalizovaná uživatelská zkušenost

Cílená prezentace webového obsahu je jeden ze základních principů moderního webového designu. Výběr obsahu a jeho prezentace by měly být založené na požadavcích potenciálních zákazníků především v případě sektoru e-commerce. V minulosti byl kladen důraz na abstraktní skupiny lidí, avšak v roce 2021 se přenesl na uživatelskou zkušenost. 

Zatímco funke jako „Produkty, které by se Ti mohly líbit“ jsou používané prakticky všemi e-shopy, některé společnosti jsou ještě o krok dále a vykonávají personalizaci produktů na úrovni jednotlivých zákazníků. Hudební streamovací služby Spotify a streamovací služba pro audiovizuální obsah Netflix jsou příklady společností, které šijí své služby na míru zákazníkům. Znamená to, že dva různí uživatelé téměř nikdy neuvidí v rámci stejné služby identický výběr doporučených produktů. 

Web designovým trendem pro rok 2021 budou personalizované web stránky, jejichž návštěvníkům se zobrazí obsah podle jejich zvyklostí. Webové analytické nástroje jako Google Analytics či Matomo poskytují základy pro personalizované uživatelské rozhraní. Poskytují uživatelům obsahu komplexní přehled o tom, jakým způsobem přicházejí jednotliví uživatelé internetu do kontaktu s webovým obsahem. 

Trend 6: WebXR

Většina uživatelů se již střetla s virtuální realitou (VR) v kontextu zábavy. Například vývojáři počítačových her nebo her na mobilní zařízení zainvestovali hodně prostředků do VR technologií a výroby VR brýlí a her. Čím dál více smartphonů zároveň umožňuje rozšířenou realitu (AR) – propojení skutečného a digitálního světa. Stejně tak internet sleduje tyto trendy. Chybnou WebVR technologii aktuální nahrazuje WebXR technologie, která zobrazuje v prohlížečích obsahu VR a AR.  

Uživatelé mohou již nyní vidět speciálně naprogramované web stránky v 3D pomocí VR brýlí. Mohou se orientovat v možnostech menu či obsahu podobně jako se orientují v místnosti. Tato technologie je velmi slibná z perspektivy budoucnosti e-shopů, protože jim umožní zkopírovat zkušenost z kamenného obchodu v online prostoru. Když má někdo VR brýle, může si vyzkoušet WebXR od Mozilly.

Trend 7: Chatboty 

Komunikační programy nejsou ničím novým. Chatboty mají původ ve výzkumné oblasti umělá inteligence (AI) a už dnes je využívají korporátní web stránky nebo e-shopy. Většinou jde o malá dialogová okna, do kterých může uživatel zadat otázky a dostane automaticky vygenerovanou odpověď. Algoritmus pro strojové učení se vytváří personalizované odpovědi, které vzbuzují v uživateli dojem, že komunikuje s lidskou bytostí. Chatboty se využívají jako virtuální nákupní asistenti nebo jako alternativa ke klasickým FAQ. 

Chatboty jsou jen zřídka dotíravé, většinou jsou vykovávané malými interaktivními prvky. Proto má uživatel pocit, že s ním komunikuje v reálném čase zaměstnanec webové služby. Ve většině případů dokáže uživatel reagovat na požadavek, aniž by musel opustit web stránku. Nedůvěra vůči dialogovým oknům řízeným AI se pravděpodobně o něco snížila od doby úspěchů Siri, Alexy, Cortany atd. Ve většině případů jsou však chatboty (stále) jen vyhledávací panely, které dokážou dynamičtěji reagovat na vyhledávací poptávky. Bude zajímavé, jak se budou chatboti vyvíjet v roce 2021.  

Trend 8: Úhledné rozhraní

Dobře rozplánované projekty stránky se často kopírují a tento trend je znatelný i ve webovém designu. Uživatelské rozhraní web stránek a  webových aplikací je čím dál více založeno na ověřených praktikách v oblasti designu a uspořádání obsahu. Uspořádání stránky vždy ovlivňuje to, nakolik je uživatelsky přívětivá.

Obecně nemůžete s úhledným uživatelským rozhraním (UI) nic pokazit. Stejně tak se můžete držet dobře zavedeného designu portálů u větších stránek nebo blogového designu u menších stránek a být si jisti, že to zafunguje, protože tyto designy už byly vyzkoušené a otestované. Dva trendy v rozložení web stránek budeme v roce 2021 vidět v mnoha grafických uživatelských rozhraních. 

Hamburgerové tlačítko

Tento jev vznikl tak rychle, že mnozí uživatelé ho ve svém rozložení menu berou jako samozřejmost; malé menu tlačítko, známé také jako “hamburgerové tlačítko”. Nejprve se používalo u rolovacích menu na mobilních web stránkách a v aplikacích. Nyní se tento symbol používá jako menu tlačítko na mnoha stolních počítačích. Jak již název naznačuje, tento symbol připomíná hamburger s vícero vrstvami a bývá často vyjádřený matematickým znakem “≡”, který znamená “identický”.

Kartový design

Druhý, novější web designový trend ovlivňuje to, jak je obsah zobrazený. Kartový design představuje obsah založený na textu a/nebo obrázcích nebo “call to action” tlačítka v několika rámečcích, které jsou rozložené napříč uživatelským rozhraním. To přináší několik výhod: web stránky mohou být zobrazené jasným, vizuálním způsobem a z pragmatického hlediska fungují jednotlivé rámečky jako prostor pro webový obsah, což znamená, že se mohou jednoduše přemísťovat v rámci designové mřížky stránky. Redistribuce obsahu stránky je mnohem jednodušší u responzivního rozložení webu. Kartový design získal na popularitě hlavně díky platformám zaměřeným na image, jakou je např. Pinterest nebo web designovým platformám jako Dribbble.

Trend 9: Tmavý režim

Jedním z významných trendů, a to nejen v oblasti webu, ale celé oblasti softwaru, je tmavý režim. Rostoucí množství uživatelů oceňuje alternativu k jasným displayům. Když je světlo okolo nás ztlumené, mohou jasná rozhraní působit mimořádně rušivě. I když se dají mnohé aplikace a programy dnes již konfigurovat v tmavém režimu, je mnoho web stránek stále nastaveno v jasném režimu. 

Pomocí CSS a JavaScriptu dokážou weboví designéři nabídnout různé možnosti návštěvníkům stránek. Ať už jsou preference jednotlivých uživatelů jakékoliv, web stránky mohou být zobrazené jak v tmavém, tak i jasném režimu. Designéři mohou například integrovat tlačítko na rozsvícení obrazovky na domovskou stránku. Je tu však i elegantnější řešení: CSS příkaz “prefer-color-scheme” reaguje na nastavení prohlížeče uživatele. Když má uživatel například nastavený tmavý režim ve Firefox, Safari, Chrome či Edge, web stránka se automaticky přizpůsobí. Příslušné barevné schéma musí být přidáno ke zdrojovému kódu, ale tato práce se navíc odrazí ve zlepšení zkušeností uživatelů. 

Trendy ve webovém designu: cesta k úspěchu

Web designové trendy pro rok 2021 jsou zaměřené zejména na použitelnost. Navíc by web stránky měly být ještě více uživatelsky přívětivé a měly by se zároveň rychleji načítat. Webový obsah není odděleně šitý na míru různým zařízením, ale je optimalizovaný pomocí responzivního designu, a může tedy být správně zobrazený na všech zařízeních.

Moderní technologie webového designu poskytují webovým designérům příležitosti k vytvoření elegantních stránek, které uživatelé rádi navštěvují a vstupují s nimi do interakcí. Je však důležité pamatovat na to, že trendy se mění a rychle se vyvíjejí stále nové technologie. Zároveň je třeba dodat, že budoucí uživatel by měl být v centru pozornosti dobré designerské strategie. Design by měl sednout cílové skupině a automaticky se přizpůsobovat obsahu. 

Jestli tvoříte svoji vlastní web stránku nebo byste chtěli aktualizovat existující, můžete se nechat inspirovat web designovými trendy pro rok 2021 – připravit svoji web stránku na požadavky a očekávání zítřka.