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.
Trendy webdesignu 2021: 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!
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.
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.
- 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ů.
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.
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.
Dokonce i v mobilní verzi efekt neztrácí svou přitažlivost.
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.
2. Designová kompozice a layout
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
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.
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.
3. 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
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.
Nebo jako statický nebo animovaný prvek, jak je vidět v následujícím příkladu.
E-commerce
Augmented Reality se v minulosti již pro e-commerce účely používala. Stejně jako u aplikace IKEA.
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:
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.
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.
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.
Načtením tweetu přijímáte zásady ochrany osobních údajů Twitteru.
Zjistěte více
Komentáře k tomuto článku