Trendy vo web designe pre rok 2020 [Galéria]

V tomto článku vyberáme 10 práve nastupujúcich i aktuálne kraľujúcich trendov: 3D ilustrácie, absolútny minimalizmus, masívne texty a mnohé ďalšie. Pripravte sa na parádnu dizajnovú prehliadku s bonusom na záver!

Trendy vo web designe pre rok 2020 [Galéria]

Nové trendy vo web designe idú ruka v ruke s možnosťami, ktoré nám webdizajnérom a developerom ponúkajú technológie. Teraz, keď máme v majorite prehliadačov k dispozícii CSS Grid, variabilné fonty a ďalšie vychytávky, sú tieto možnosti ešte otvorenejšíe. Nikdy nebolo jednoduchšie vytvoriť layout od minimalistického, cez komplexný magazínový, až po vyslovene experimentálny. 
Trendy určujú:

  • CSS Grid
  • Dostupnosť rozmanitých fontov
  • Dizajnové systémy naberajú na popularite
  • Čo nadizajnujú Slack, Stripe, AirBnB, Dropbox a Intercom
  • UX –
    • Miktotexty (brandová komunikácia)
    • Gamefikácia (zábavné elementy)
    • Rýchlosť načítavania v popredí dôležitosti

Je veľmi pozitívne, že spoločnosti myslia na svojho používateľa a jeho pohodlnosť – veď v stávke sú ich príjmy. Konečne sme v bode, kedy sa originalita nemusí vylučovať s ľahkosťou ovládania, či rýchlosťou načítania stránky.

Trendy na vzostupe

CSS Grid

Je to nová technológia dostupná vo všetkých moderných prehliadačoch. Vďaka nej sa teraz čoraz častejšie stretneme s dizajnom na webe, ktorý referuje na tradičný tlačený dizajn magazínov alebo posterov.

Ako developerka, ktorá začínala v čase, keď možnosti štýlovania webov boli obmedzené na rôzne hacky a triky, som nadšená, že dnešná doba ponúka takéto široké možnosti.

S layoutom môžeme dnes fantasticky kúzliť a kód, ktorý na to treba vyprodukovať, zostáva čistý a logický.

https://labs.jensimmons.com/
https://www.wismutlabs.com/
https://codepen.io/oliviale/full/GRKQoKM
https://css-irl.info/

3D ilustrácie

V čase, keď už takmer každá softwarová firma či startup používajú roztomilé ploché ilustrácie postavičiek pri práci na vyjadrenie priateľskosti ich brandu, či ľahkosti používania ich produktu, je dôležité sa aspoň nejako odlíšiť.

Keďže 3D v hravom štýle je momentálne ešte neokukané, ľahká zmena z plochosti do priestoru dokáže spôsobiť veľký efekt.

https://www.art4web.co/sk
https://specifyapp.com/
https://www.sendinblue.com/
Web Illustrations webdesign photoshop icon adobe colors website web ux geometric cgi cinema4d render set branding vector ui design illustration c4d 3d
Ilustrácie od https://dribbble.com/tarka

Brutalizmus

Tento trend si už minulý rok užil svoj veľký vzostup a zatiaľ sa nikam nechystá. Pôsobí úderne, je vhodný pre odvážne, moderné, mladé brandy. Všade, kde chýbajú iné výrazové prostriedky, je i v tomto štýle typografia hlavným hráčom.

http://www.vlnc.studio/
VLNC Studio
https://nelsonheinemann.com/
https://dappboi.com/

Masívne nadpisy

Nie tak celkom brutalizmus, no rozhodne využíva jeho úderný prístup. Masívne nadpisy využívajú množstvo prázdneho priestoru okolo, a preto samy osebe predstavujú hlavný a často jediný grafický prvok na stránke.

https://violenceisnotmyculture.com/
https://www.designembraced.com/
https://www.oliverfreundlich.com/
https://www.kanarys.com/

Odvážne farebné schémy

Gradienty, ktoré evokujú farby prírody: more, západ slnka, pastelové farby ako ružová a tyrkysová, ale i výrazná žltá, prípadne úplne nečakané farebné kombinácie dominovali roku 2019.

Konieckoncov, koralová sa stala farbou roka:

Súvisiaci obrázok

Predikcia farby roka 2020 je opäť v súvislosti s farbami mora:

Gradienty do tyrkysova aj naďalej dominujú tech sektoru:

https://stripe.com/

Ružová je taktiež v kurze, a nie iba ako ženská farba:

https://gruev.space/

Brandy sa neboja veselých farebných kombinácií:

https://happymoney.com/
https://starface.world
https://thesunproject.fr/

Zjednodušenie e-commerce

V popredí predajných webov stojí.. produkt! Veľa bieleho miesta, veľké a kvalitné fotografie, žiadne nepotrebné informácie naviac.

https://piskacie.sk/kategoria-produktu/damske/
http://www.deplacemaison.com/
https://grovemade.com/
https://www.therugbycompany.co.uk/

Prístupnosť (accessibility)

Zdá sa, že prístuponosť je konečne v móde. Veď skôr či neskôr nastane v živote každého z nás situácia, kedy sa ocitneme v roli s obmedzenými možnosťami, napr.:

  • Môžeme používať len jednu ruku
  • Nedovidíme na malé alebo málo kontrastné písmenká
  • Chceme v tichosti pozerať video a potrebujeme titulky
  • Večer neznesieme biele pozadie
  • … a podobne! A to som ani nezmienila ľudí so skutočnými obmedzeniami, ktorí používajú čítačky alebo im môže uškodiť pohyb na stránke (grafická animácia alebo samo-spúšťacie video).

Výsledkom sú snahy spoločností o zahrnutie nás všetkých do pohodlného používania ich produktov.

Tvoria sa tmavé módy. Testuje sa kontrast. Vypínajú sa animácie. Nespúšťajú sa automaticky videá či zvuky. Pridávajú sa titulky.

Je to veľmi pozitívny trend, z ktorého mám radosť.

Svetlý a tmavý režim môjho Twitter účtu https://twitter.com/darinka_design

Aj vy si na svojom mobile alebo počítači môžete aktivovať tmavý mód.

Ako zapnúť tmavý režim na Macu:

https://support.apple.com/sk-sk/HT208976

Ako zapnúť tmavý režim na Windowse:


Absolútny minimalizmus

Vyjadrenie pomocou priestoru, bez zbytočných barličiek v podobe emotívnych farieb alebo roztomilých ilustrácií. Stručne a k veci. Aj to môže byť súčasťou brandu.

https://www.lundqvistdallyn.studio/
https://www.ouiwill.com/
https://www.cahnwilson.com/
https://www.nikolastype.com

Návrat osobných blogov

Niekdajšia veľká popularita osobných blogov bola v posledných rokoch zatienená sociálnymi sieťami a publikačnými webmi ako Medium a podobne. Tieto totiž ponúkajú lákavú vidinu vyššej čitateľskej základne, vlastné publikačné nástroje (teda nemusíte nastavovať WordPress alebo podobne na svojom serveri), lajky a srdiečka, šírenie obsahu…

Veľa bloggerov si však postupne začína uvedomovať, že to má aj svoje nevýhody:

  • Nevlastníte svoj obsah
  • Tieto portály robia zmeny, pretože sa snažia monetizovať
  • Zatvárajú obsah za platené brány
  • Pridávajú reklamu
  • Znižujú viditeľnosť vašich príspevkov, aby ste museli boostovať
  • Dlhodobo nebudujete vlastné SEO, ale SEO niekeho iného

A preto opäť nastávajú zlaté časy osobných webstránok.

Z dlhodobého hľadiska je to síce náročnejšie (musíte budovať mailing list, platiť reklamu za návštevnosť, stránku si sami vytvoriť i updatovať, budovať SEO), ale máte úplnú kontrolu nad vlastným obsahom a jeho vzhľadom.

Keď sa naučíte vytvoriť svoj vlastný web a začnete na ňom zarábať, zistíte, že máte do života cennú schopnosť, ktorá nie je závislá na nejakom konglomeráte a jeho vrtochoch.

Áno, možete stále využívať Facebook a Google Ads, môžete kopírovať svoje články alebo ich časti do publikačných webov s pridaním odkazu na svoj web, prípadne guest blogovať.

S vlastným webom zostávate sebestační a flexibiliní.


Trendy na ústupe

Web design je umenie – dáva nám možnosť vyjadriť svoj brand mnohorakými spôsobmi. Je to priestor na experimentáciu. Niektoré trendy prišli a odišli, niektoré ešte stále neustúpili, aj keď je už najvyšší čas.

Čo myslíte, ktorý trend zostane a ktorý postupne vymizne v dejinách?

Slidery na hlavných stránkach

Poznáte to?

Načítavate stránku a ak máte aspoň 10 sekúnd trpezlivosti, zobrazí sa vám masívny slider obsahujúci viacero veľkých obrázkov. 

Načítavam, vydržte…

Tento pred pár rokmi a dodnes sa urdržiavajúci trend je už konečne na ústupe. Nahradujú ho hravé ilustrácie a SVG animácie vedľa úvodného textu. Je to modernejšie i rýchlejšie načítané.

https://www.intercom.com/
https://slack.com/

Animované kurzory

Aj keď na mnohých stránkach ich ešte nachádzam, ako dizajnový prvok je to fajn, ale ako praktický prvok je to hrôza. Fancy kurzory sú pomalé, ťažkopádne a otravné. Tak ako hlučné samo-spúšťacie videá na celú obrazovku, neviem sa dočkať, kedy aj tento trend zapadne prachom.

Nenatívne skrolovanie

Volá sa to „únos skrollbaru„. Áno, medzi nami webdevelopermi sa to neslávne preslávilo a dostalo vlastné pomenovanie. Rovnako ako animované kurzory, skriptom ovládané skrolovanie ovplyvňuje použiteľnosť a rýchlosť stránky.

Nie je dôvod, aby sa skrýval pôvodný skrollbar a potom rôznymi hackmi umelo vytváral nový, vyžadujúc si tak množstvo skriptov navyše. Dnes už máme možnosti, ako upraviť vzhľad skrollbaru podľa štýlu webstránky v CSS.

Helvetikovanie lôg

Spoločnosti prerábajú svoje logá a prechádzajú na font, ktorý sa výrazne podobá na Helveticu, jeden z najikonickejších fontov našej generácie. Svorne tvrdia, že v dnešnej dobe mobilných zariadení je potrebné mať logo, ktoré aj na malých rozlíšeniach vyzerá rozlíšiteľne – ale majú pravdu, keď sú všetky nakoniec rovnaké?

relates to Why Fashion Brands All Seem to Be Using the Same Font

Tie isté ilustrácie všade

Tieto ilustrácie, ktoré prvýkrát zaviedol Slack vďaka geniálnej ilustrátorke Alice Lee spôsobili vo webdesignverse ošiaľ. Mimikovať ich začal každý start-up, každý landing page

Tie isté roztomilé postavičky dokola

Zdvihla sa vlna kritiky ohľadom homogénnych typov postavičiek – štíhlych a bielych nahradili všetky farby pleti, všetky veľkosti tiel. 

Momentálne sa väčšie, trendyurčujúce firmy snažia odlíšiť ztrojrozmernením týchto postavičiek. Kreslených ľudí si však radi na svojich weboch ešte dlho ponechajú, pretože im pomáhajú poľudšťovať ich brand.


Bonus: Design Tools

Kedysi vládca webdesignového kráľovstva, všeho-schopný Photoshop, v ktorom som i ja desaťročie tvorila všetky svoje a klientske weby, je nahradený novými nástrojmi na tvorbu webových stránok, určenými práve na to: UI a UX.

Sketch bol jedným z prvých nástrojov, ktoré si dovolili konkurovať Photoshopu, a robil tak dlhé roky veľmi schopne. Je tu však opäť nová éra a Sketch už nestačí dobiehať.

Ktoré nástroje sú teda momentálne na tvorbu web designu najobľúbenejšie?

Figma

Figma je online vektorový „kreslič“ určený na dizajn webstránok a aplikácií. Je veľmi jednoduchá a robí sa mi v nej pohodlne a rýchlo. Takto rýchlo som vo Photoshope nikdy nevedela vytvoriť nový dizajn. Navyše, netrvalo mi ani hodinu sa naučiť v nej pracovať.

Figma dokáže:

  • Poslať dizajn klientovi ešte skôr, než je naprogramovaný, ale vyzerá ako by už bol.
  • Pridať ďalších dizajnérov, ktorí môžu v rovnakom čase pracovať na tom istom dizajne, ale každý na svojom počítači.
  • Figmu netreba inštalovať, funguje z prehliadača. Stačí sa zaregistrovať.
  • Prepojiť dizajny tak, že sa medzi nimi dá preklikávať (vytvorí tzv. „prototyp“).

Figma neustále rastie v počte fanúšikov a jej výhodou je skvelý vývojársky tím, ktorí dokáže rýchlo integrovať nové, alebo vylepšené funkcie.

Nesnaží sa dokázať všetko naraz, ale dizajnovať weby, to sa v nej robí skvele.

Moja Figma, v prehliadači

Webflow

Pred dvadsiatimi rokmi, keď som prvýkrát na počítači v otcovej kancelárii skúšala Microsoft Word, bolo možné uložiť moju stránku ako HTML – vytvorila som vo Worde svoju prvú webstránku! Bolo to vzrušujúce obdobie, ktoré pokračovalo ďalšími podobnými nástrojmi: Macromedia Dreamweaver, Fireworks, „strihanie“ dizajnov vo Photoshope…

Nič z nich však nedokázalo exportovať stránku naozaj poriadne. Stránky boli rozpadnuté, tu nefungovali, tam nefungovali, nakoniec ich aj tak bolo treba poriadne ručne napgrogramovať.

S tým je však skutočne koniec.

Webflow je ďalší online nástroj na dizajn webov, v tomto prípade však aj s hotovým HTML a CSS kódom v pozadí.

Pridávate na stránku elementy, bloky, texty, obrázky, nastavujete im miesto a vzhľad, ale nástroj vám dovolí len to, čo je možné aj u skutočného developera: Tu nastav flexbox, tu chcem grid, tu absolute position, tam chcem ul zoznam…

Aby ste mohli takto dizajnovať, je potrebné ovládať základy HTML a CSS, ale nemusíte byť žiaden expert. Webflow vám poradí a navedie vás.

Navyše, môžete začať so šablónou a dodizajnovať ju podľa potrieb.

Éra nástrojov vytvorených špecificky pre naše potreby je tu a je to veľmi vzrušujúce obdobie. Dnes je skutočne skvelé byť webdizajnérom!

Prostredie Webflowu, v prehliadači

Slovo na záver: Ako vyčmuchať najnovšie trendy

Všetko, čo som vám predstavila, spolu s ďalšími desiatkami článkov o najaktuálnejších trendoch vo webdizajne, ktoré začiatkom roka pribudnú ako huby po daždi, je len moja subjektívna projekcia.

Ak si na najnovšie trendy chcete prísť sami, v akomkoľvek období roka, choďte na miesta, kde sa združujú dizajnéri.

Dribbble.com

https://dribbble.com/shots/popular/web-design?timeframe=month
Zoradené podľa „Popular“ a „This month“

Behance.net

https://www.behance.net/galleries/Interaction/UI/UX
Galéria UI/UX dizajnov

Na tieto stránky sa musíte zaregistrovať – sú obmedzené pre prihlásených, no na dôvažok získate prístup k dizajnom i dizajnérom.

Awwwards.com

https://www.awwwards.com/websites/
Stránky, ktoré oceňuje expertná porota

CSS Design Awards

https://www.cssdesignawards.com/

Tak, to by sme mali.

A čo vy a trendy? Aký trend ste si všimli a páči sa vám, prípadne vás prekvapil?

Nechajte mi komentár a ak sa vám článok páčil, zdieľajte ho na Facebooku, alebo sa prihláste na odber noviniek – všetko o webdizajne a o tom, ako vám môže pomôcť zlepšiť vaše podnikanie.

Napísať prvý komentár

Pridaj komentár

Vaša e-mailová adresa nebude zverejnená. Vyžadované polia sú označené *

Chcem

Váš email je u nás v bezpečí. Pozrite si zásady ochrany osobných údajov. Audit vykonáme do 72 hodín a odošleme vám na email PDF s reportom.