Trendy webdesignu roku 2021: Scrollytelling, 3D efekty a více interakce

Sonja Hoffmann Poslední aktualizace 17.05.2021
9 min.
Trendy webového designu 2021
Poslední aktualizace 17.05.2021

Po roce jako tom, který jsme právě zažili, je odvážit se vyhlížet na nadcházející trendy téměř utopické. Protože kdo by si v roce 2020 pomyslel, jak rychle se svět může a bude měnit? A jak rychle se dokážeme přizpůsobit změnám. Podívejme se společně na trendy webdesignu 2021!

Nový normál nás všechny pevně ovládá: Technologie se pro nás staly důležitějšími a jsou pevněji integrovány do našeho každodenního života. To znamená, že se naše technologie musí ubírat směrem, který umožňuje větší personalizaci, integraci a interakci. A to pro nás pro všechny. 

Lockdown, home office a spol. převedly náš fokus více na digitální svět. Tento trend však také způsobuje rychlý růst digitálních produktů. Totéž platí pro oblast e-commerce. To vše vyžaduje více individuality a dovedností, abyste se mohli prosadit většímu počtu konkurentů.

Právě teď je důležité zaměřit se na koncové uživatele. Jde o to je uchvátit, integrovat a personalizovat internet. A vždy zaměřit na maximální funkčnost.

V novém roce proto vidíme více příležitostí personalizace. Vidíme častěji možnost měnit mezi dark/light režimem, nebo dokonce upravit barvy designu sami.

Vidíme odvážnější a méně symetrické návrhy. Protichůdný trend integrace organických barev a prvků zůstává zachován. Více osobitosti dosáhneme pomocí koláží, smíšených médií a začleněním animačních efektů. Pojďme se nyní podrobně podívat na trendy webdesignu pro rok 2021!

1. Scrolling

Parallax a Parallax Scroll animace

Paralax používáme, zejména s jednoduchými obrázky, již několik let. Nedávno byly přidány komplexní parallax scroll animace. Při správném použití přetvoří vaše webové stránky z plochého 2D pozadí na interaktivní digitální svět - srovnatelné s divadelní scénou.

Co je to paralaxní efekt?

Paralaxní efekty vznikají, když se prvky od sebe nachazí v různých vzdálenostech. Pokud se pohybují posouváním, vnímáme jejich pohyb jako rozdílně rychlý.

Upozornění: Pro uživatele, kteří se potýkají se závratěmi, může vést příliš mnoho pohybu na vašich webových stránkách k nevolnosti.

Několik tipů pro úspěšnou integraci paralaxního efektu:

  • Ujistěte se, že jsou důležité informace vždy jasně viditelné a nejsou přetrumfnuty efektem.
  • Ujistěte se, že jsou všechny funkce stránky zachovány na všech zařízeních, a to i za neoptimálních podmínek, jako je špatný internetový signál.
  • Minimalizujte použití paralaxních efektů.
  • Zvažte integraci možnosti deaktivace efektu.
Trendy webového designu 2021

Webová stránka hry Firewatch používá v záhlaví osm různých PNG obrázků, které společně animují pocit skutečné krajiny. V mobilní verzi je však paralaxní efekt nahrazen statickým obrazem.

Scroll animace

Také ne zcela nové, ale zatím přehlížené, jsou extenzivní animace pro posouvání – pravděpodobně v neposlední řadě proto, že jejich kompozice vyžaduje dovednost kreslení. Jako vždy platí, že méně je více. Dobře používané scroll animace dodávají vašim webovým stránkám harmonický flow. 

Trendy webového designu 2021

ToyFight je je kreativní agentura z Manchesteru. Prostřednictvím šikovného používání animací spouštěných scrollováním dodává agentura svým webovým stránkám živost a osobnost. Animace fungují také na menších zařízeních - i když je doba načítání negativně ovlivněna.

Trendy webového designu 2021

Společnost Prevint poskytuje koncept proti sexuálně motivovanému násilí. Minimální použití animace pro posouvání vizualizuje tři nejdůležitější preventivní opatření. Zvláštní je použití vertikálního a horizontálního posouvání: hlavní navigace je na svislé úrovni, zatímco horizontální scrollování jde hlouběji do příslušného tématu.

Navigační šipky v dolní části obrazovky poskytují další orientaci. Na mobilní straně se navigace provádí výhradně klepnutím na tlačítka.

Horizontální scrollování

Ačkoli se názory na horizontální scrollování v minulosti značně lišily, vidíme ho na stále více webových stránek. Zejména z hlediska uživatelské zkušenosti bylo jejich použití dříve považováno za poněkud sporné.

Trendy webového designu 2021

Internetová stránka od Home Société, která je vytvořena jako one pager, je zcela horizontálně orientovaná. Sticky Navigation, kterou obvykle najdeme nahoře, se nachází vlevo. Funguje stejně s anchor odkazy jako vertikálně pořádaný one pager. Na mobilním telefonu se stránka zobrazí vertikálně.

Trendy webového designu 2021

Webová stránka od Kwok Yin Makje designové portfolio, které se pohybuje vodorovně všemi integrovanými stránkami. Rozdíl k Home Société je zde použití Infinite Scrolling: Pokud se dostanete na konec stránky, dostanete se zpět na začátek, aniž byste si toho všimli. I tato stránka využívá v mobilním znázornění svislé scrollování.

Několik tipů pro úspěšnou integraci vodorovného posouvání:

  • Poskytněte uživatelům a uživatelkám plán B, například šipky nebo sticky menu pro navigaci na stránce.
  • Zamyslete se nad tím, jaký obsah vašich stránek z horizontálního posouvání profituje.
  • Ustanovte si jeden směr. Příliš častá změna směrů mate vaše uživatele.
  • Buďte opatrní při kombinaci dlouhého textu a vodorovného posouvání. Toto rozložení může způsobit horší čitelnost textu.
Jaké písmo se hodí k mému webu?

Vhodné písmo vaše webové stránky dělá nejen mnohem zajímavější. Písma mají rozhodující vliv na to, zda uživatelé části textu ignorují nebo čtou. V tomto příspěvku vám ukážu, jak najít perfektní písmo pro vaše webové stránky!

Scrollytelling

Scrollytelling znamená vizuální vyprávění (storytelling) prostřednictvím animovaného posouvání. To dává webové stránce osobnost a uživatelům pocit interaktivity. Dlouhý obsah je snadno stravitelný. Příběhy jsou zajímavěji sestavěny a přitažlivěji komunikovány. Internet je stále více používán jako prostředek pro interaktivní vyprávění příběhů. 

Trendy webového designu 2021

The New York Times používá relativně minimalistický přístup. Obrázek záhlaví se skládá z paralaxního efektu, za nímž následuje velké množství textu. To je zabaleno do jasných odstavců a je vizuálně podporováno paralaxovými sekcemi v komickém stylu.

Doporučené postupy, tipy a pokyny v oblasti webového designu

Co tvoří dobrý webdesign? A co definujeme jako designový standard? Nejdůležitější tipy pro úspěšné webové stránky lze nalézt v mém článku na téma Best Practices ve webdesignu.

Trendy webového designu 2021

Zajímavým příkladem je také Webflow. Webová stránka vás zve na cestu historií umění při hledání trendů budoucnosti webdesignu.

Trendy webového designu 2021

Dokonce i v mobilní verzi efekt neztrácí svou přitažlivost.

Trendy webového designu 2021

canals-amsterdam.nl kombinuje scrollytelling s horizontální navigací, animací a paralaxou. Zvláštní detail: Sticky menu mění barvu pozadí v závislosti na barvě aktuální polohy. Více informací na toto téma naleznete v Scrollytelling Guide.

Scrolling Cards

Posouváním karet máme na mysli svislé nebo vodorovné posouvání, které se přichytí do dalšíhookna, než budeme pokračovat v navigaci. Vizuálně to můžete zvýraznit například barevnými separacemi, které dávají více pocitu karet, jako v příkladu Zelené louky.

Trendy webového designu 2021

Další zvláštností jsou zde textové animace, které se načítají stále nanovo, stejně jako infinite scrolling, což nám dává pocit nekonečné webové stránky.

2. Designová kompozice a layout

Integrace fyzikálních vlastností výrobku, který je na prodej

Trendy webového designu 2021

Ora London prodává mimo jiné lak na nehty. Používají texturu svého produktu pro design layout svých webových stránek.

Trendy webového designu 2021

Na webové stránce od Main Squeeze Juice se nacházejí barevné skvrny, které by mohly připomínat vybledlou verzi jejich ovocných šťáv. Tento efekt používají také pro některé nadpisy.

Trendy webového designu 2021

Ora The Floral Agency vizuálně podtrhla své webové stránky květinami z jejich sortimentu. 

Neomorfismus

Neomorfismus je již dlouho prohlášen za trend. Ale proč vůči těmto minimalistickým návrhům dosud tvůrčí scéna měla averzi? Zde jsou hlavní dva důvody:

  1. Neomorfismus je obtížné reprodukovat. Není-li správně vytvořen, způsobí design rychle zcela neprofesionálně.
  2. S měkkými stíny a malým kontrastem mohou prvky v designu neomorfismu způsobit problémy u koncového uživatele. 

V roce 2021 se očekává, že trend neomorfismu bude působit o něco silněji. Template Neu Vision ukazuje každodenní integraci neomorfismu.

Trendy webového designu 2021
Tutoriál: Jak vytvořit prvky neomorfismu

S nástrojem Neumorphism.io si můžete vyzkoušet neumorfismus sami. Odpovídající CSS kód vám bude rovnou poskytnut. Další informace na toto téma naleznete zde v tomto článku.

Abstraktní kompozice, koláž a mixed media

Jak jsem již zmínila, smí webové stránky ukázat více osobnosti. Jedním ze způsobů, jak toho dosáhnout, je prostřednictvím abstraktních kompozic nebo koláží. Je také povoleno míchání různých médií – třeba ručně kreslených ilustrací ve spojení s dokonalými geometrickými tvary.

Trendy webového designu 2021

City Circus používá koláže všude na vlastních webových stránkách.

Rozostření a Frosted Glass Effect

Frosted Glass Effect je ideální pro čtení textu v obrázcích. Efekt je také vhodný jako hover efekt. Pokyny k uplatnění Frosted Glass Effect na CSS naleznete zde.

Trendy webového designu 2021
Zdroj: Codepen.io

3. Barvy

Organicky a nenápadně

Trendy webového designu 2021

Webová stránka pureorganix.ca používá poměrně málo barev, a to především světlých a přírodních. Organické barvy jsou již nějakou dobu na vzestupu a tématem zůstanou i v roce 2021.

Černá a bílá

Trendy webového designu 2021
Webové stránky: UX Database

Když se zřeknete barev, budou vaše webové stránky vypadat minimalisticky, uklizeně a jasně. UX Database vykompenzovala seriózní dojem, který stránka dělá kvůli použití pouze černé a bílé, použitím ilustrací.

UX Design & Web Usability

Proč by vás jako webdesignér(k)y měla zajímat obzvláště usability a user experience? A jak dosáhnete pro své uživatele skutečné přidané hodnoty díky dobrému UX? To a ještě více vám prozradím v tomto článku.

4. 3D

Ikony a obrázky

Stejně jako u virtuální reality (VR) už dlouho čekáme i na velký průlom 3D objektů. Jako na začátku každého roku se očekává, že 3D prvky a VR budou od teď hrát větší roli. To platí i pro rok 2021.

3D prvky budou v roce 2021 stále více využívány: například jako náhrada za 2D ikony a ilustrace, pro zobrazování výrobků a jako geometrické konstrukční prvky.

3D budeme používat také jako interaktivní součást webových stránek, stejně jako u agentury Dogstudio.

Trendy webového designu 2021

Nebo jako statický nebo animovaný prvek, jak je vidět v následujícím příkladu.

Trendy webového designu 2021
Webové stránky: https://www.yaya.co/

E-commerce

Augmented Reality se v minulosti již pro e-commerce účely používala. Stejně jako u aplikace IKEA.

Trendy webového designu 2021

Diesel o proti tomu sází více na interaktivní 3D variantu.

Trendy webového designu 2021

Oba přístupy mají u příslušného produktu smysl. Možnost testovat nábytek prakticky ve svém budoucím domově nejen snižuje šance chybného nákupu. Aplikace je také zábavná a poskytuje podněty pro dekoraci a nákup.

Diesel se zase snaží vytvořit jakýsi 3D feel tím, že si koncový uživatel může produkt prohlédnout a virtuálně cítit, než si ho koupí.

V minulosti byla integrace prvků rozšířené/virtuální reality a 3D prvků často velmi nákladná, a proto byla vyhrazena větším společnostem. S novými nástroji je nyní integrace rozšířené reality (AR) možná i pro menší společnosti.

Zde jsou dva příklady:

5. Obsah

Web je stále osobnější, interaktivnější a přizpůsobuje se nám

Google nabízí příklad interaktivity se svou Blob Opera. Vlastní výtvory lze také zaznamenat a sdílet s ostatními.

Trendy webového designu 2021

Na Madwells je každý grafický prvek interaktivní.

Trendy webového designu 2021

Se spoustou osobnosti nabízí Sennep své služby.

Trendy webového designu 2021

Webdesign for Causes

Právě rok 2020 navíc ukázal, že se můžeme, a částečně dokonce musíme, vzájemně spojit. Web je stále lidštější. Webdesign for Causes je více a více relevantní. Etické webové stránky, zelené webové stránky, webové stránky, které se za nás a naše blízké postavily (abychom jmenovali jen několik témat), byly v uplynulém roce více důležité. Můžeme očekávat, že tento trend bude pokračovat alespoň v roce 2021.

Závěr

Zůstat v kontaktu s přáteli z celého světa, pracovat na dálku, nabízet produkty a služby online - to není nic nového. A přesto to zatím bylo realitou jen pro menšinu obyvatelstva. 

Mnoho společností a lidí se tímto tématem zabývalo spíše tradičním způsobem: Máme sice možnosti pro webovou prezenci a konektivitu, je pro nás ale druhořadá. Osobní kontakt byl na prvním místě. 

Funkčnost našich online produktů je obzvláště důležitá – také proto, že konkurence stále roste. A v budoucnu si již nemůžeme dovolit vynechat téma, jako je dostupnost.

Videohovor samozřejmě nemůže nahradit důležitou osobní schůzku. Ale možná nám současná situace pomůže rozlišit, co jsou skutečně důležitá setkání a co lze vyřešit přes video. Tento přístup se často odrážel v kvalitě digitální přítomnosti. 

Fráze jako "Pokud to někdo chce vědět, tak nám zavolá nebo se nás zeptá" jsem slyšela v minulosti při plánování online projektů častěji. S novým zaměřením na izolaci a home office už tento luxus nemáme.

To je důvod, proč Mobile Design, Performance, Usability a co. zůstávají důležitými faktory při vytváření vašich webových stránek i v roce 2021.

Trendy webového designu 2021
Twitter

Načtením tweetu přijímáte zásady ochrany osobních údajů Twitteru.
Zjistěte více

Načíst obsah

PGJsb2NrcXVvdGUgY2xhc3M9InR3aXR0ZXItdHdlZXQiIGRhdGEtd2lkdGg9IjU1MCIgZGF0YS1kbnQ9InRydWUiPjxwIGxhbmc9ImVuIiBkaXI9Imx0ciI+UGVvcGxlIG9mdGVuIGZvcmdldCBhYm91dCBjb2duaXRpdmUgaW1wYWlybWVudC4gIE5vLCB0aGF0JiMzOTtzIG5vdCBhbiBpbnRlbnRpb25hbCBwdW4uIDxicj5OaWNlIGV4dGVuc2lvbiBvZiA8YSBocmVmPSJodHRwczovL3R3aXR0ZXIuY29tL01pY3Jvc29mdD9yZWZfc3JjPXR3c3JjJTVFdGZ3Ij5AbWljcm9zb2Z0PC9hPiBpbmNsdXNpdmUgZGVzaWduIHdlIGRpZCBhdCB0aGUgPGEgaHJlZj0iaHR0cHM6Ly90d2l0dGVyLmNvbS9Nb0pHb3ZVSz9yZWZfc3JjPXR3c3JjJTVFdGZ3Ij5ATW9KR292VUs8L2E+LiAoYXBvbG9naWVzIHRvIGxhcnJ5IG1pbGVzLCB0b21hc3oga29sZWNraSwgamVuIGxlbW9uIGV0IGFsIGNhbiYjMzk7dCBmaW5kIHlvdSBvbiB0d2l0dGVyISkgPGEgaHJlZj0iaHR0cHM6Ly90LmNvL3NkU0hQMDRGeWYiPnBpYy50d2l0dGVyLmNvbS9zZFNIUDA0RnlmPC9hPjwvcD4mbWRhc2g7IE1hcmsgTWNFbGhhdyAoQG1hcmttY2VsaGF3KSA8YSBocmVmPSJodHRwczovL3R3aXR0ZXIuY29tL21hcmttY2VsaGF3L3N0YXR1cy85ODkwNDk5MzM4MTc5NjI0OTc/cmVmX3NyYz10d3NyYyU1RXRmdyI+QXByaWwgMjUsIDIwMTg8L2E+PC9ibG9ja3F1b3RlPjxzY3JpcHQgYXN5bmMgc3JjPSJodHRwczovL3BsYXRmb3JtLnR3aXR0ZXIuY29tL3dpZGdldHMuanMiIGNoYXJzZXQ9InV0Zi04Ij48L3NjcmlwdD4=
Vaše dotazy týkající se trendů webdesignu 2021
Sdílejte s námi vaše dotazy a předpovědi k trendům webdesignu 2021 níže v komentářích - budeme se těšit. Chcete být informováni o nových příspěvcích okolo WordPress? Pak sledujte RAIDBOXES na Twitteru, Facebooku a přes náš Newsletter.

Po studiu game designu a creative writingu v zeleném Aucklandu se Sonja specializovala na design webových aplikací a jeho vývoj. Zaměřuje se na gamification a výzkum motivace uživatelů a jejích zkušeností, spolu s vášní a zvědavostí pro technologické trendy.

Podobné články

Komentáře k tomuto článku

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinná pole jsou označena *.