Trendy webového designu 2021

Webdesign Trends 2021: 3D efekty, rolování a další interakce

Po roce, jako je ten, který jsme právě zažili, odvaha podívat se na nadcházející trendy nabývá téměř utopických rysů. Koneckonců, kdo by si v roce 2020 pomyslel, jak rychle se svět může a bude měnit? A jak rychle se dokážeme změnám přizpůsobit. Pojďme se společně podívat na trendy webového designu 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.

Mezi dimenzí a interakcí

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!

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.
  • Snažte se co nejvíce zavázat k jednomu směru. Přepínání mezi směry příliš často mate uživatele.
  • Buďte opatrní s kombinací dlouhých textů a horizontálního posouvání. Toto rozvržení může způsobit, že vaše texty budou méně čitelné.

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.

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.

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

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.

Ikony a obrázky

Stejně jako u virtuální reality (VR) jsme nějakou dobu čekali, až 3D objekty konečně zažijí svůj velký průlom. Stejně jako na začátku každého roku se očekává, že 3D prvky a VR budou od nynějška hrát větší roli. V roce 2021 to nebude vidět jinak.

3D prvky budou v roce 2021 stále více využívány: například jako náhrada za 2D ikony a ilustrace, pro reprezentaci 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ý, přesněji animovaný prvek, jak je znázorněno v dalším příkladu.

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

E-commerce

Rozšířená realita byla v minulosti sporadicky využívána pro účely elektronického obchodování. 

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:

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.

"*" povinný údaj

Rád bych se přihlásil k odběru newsletteru, abych byl informován o nových článcích na blogu, e-knihách, funkcích a novinkách ve WordPressu. Svůj souhlas mohu kdykoli odvolat. Více informací v našich Zásadách ochrany osobních údajů.
Toto pole slouží k ověření a nemělo by se měnit.

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 proto obzvláště důležitá – také proto, že konkurence je mnohem větší. A v budoucnu si již nebudeme moci dovolit ignorovat témata, jako je přístupnost.

Videohovor samozřejmě nemůže nahradit důležitou osobní schůzku. Snad se ale v současné situaci naučíme rozlišovat, co jsou opravdu důležitá setkání a co se dá pomocí hovoru udělat. 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č mobilní design, výkon, použitelnost a spol. zůstanou důležitými faktory při tvorbě vašich webových stránek v roce 2021.

Trendy webového designu 2021

Vaše dotazy týkající se trendů webdesignu 2021

Řekněte nám své dotazy a prognózy o trendech webového designu 2021 v níže uvedených komentářích - jsme zvědaví. Chcete být informováni o nových příspěvcích o WordPressu? Pak sledujte Raidboxes na Twitteru, Facebooku a prostřednictvím našeho newsletteru.

Líbil se vám tento článek?

Svou recenzí nám pomůžete zlepšit náš obsah.

Napsat komentář

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