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!
Webdesign Trendy 2021: Posouvání
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?
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.
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.
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.
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é.
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ě.
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?
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ů.
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
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.
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.
Webdesign Trendy 2021: Vzrušující rozvržení
Integrace fyzikálních vlastností výrobku, který je na prodej
Ora London prodává mimo jiné lak na nehty. Používají texturu svého produktu pro design layout svých webových stránek.
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.
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:
- Neomorfismus je obtížné reprodukovat. Není-li správně vytvořen, způsobí design rychle zcela neprofesionálně.
- 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.
Tutoriál: Jak vytvořit prvky neomorfismu
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.
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.
Webdesign Trendy 2021: Barvy
Organicky a nenápadně
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á
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
Webdesign Trendy 2021: 3D efekty
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.
Nebo jako statický, přesněji animovaný prvek, jak je znázorněno v dalším příkladu.
E-commerce
Rozšířená realita byla v minulosti sporadicky využívána pro účely elektronického obchodování.
Diesel o proti tomu sází více na interaktivní 3D variantu.
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:
Webdesign Trendy 2021: 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.
Na Madwells je každý grafický prvek interaktivní.
Se spoustou osobnosti nabízí Sennep své služby.
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
Závěr o trendech webdesignu 2021
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.
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.
