A\n 2020-as \u00e9v nem volt k\u00f6nny\u0171, el\u00e9g, ha csak arra gondolunk, hogy mennyire\n megv\u00e1ltoztatta az \u00e9let\u00fcnket a j\u00e1rv\u00e1ny, \u00e9s h\u00e1t 2021 sem lesz k\u00f6nny\u0171. \nMindez azonban nem akasztja meg a webdesign v\u00e1ltoz\u00e1s\u00e1t. L\u00e1ssuk a \ntrendeket! <\/p>\n\n\n\n
Retro bet\u0171t\u00edpusok <\/h3>\n\n\n\n
A r\u00e9gi dolgok \u00fajb\u00f3li megjelen\u00e9se, majd ism\u00e9t feled\u00e9sbe mer\u00fcl\u00e9se egy \u00e1lland\u00f3 jelens\u00e9g, \u00e9s \u00e9let\u00fcnk minden ter\u00fclet\u00e9n felbukkan. \u00cdgy van ez a webdesignban is, ahol mostan\u00e1ban az \u00fagynevezett retro bet\u0171t\u00edpusok t\u0171ntek fel. De nem csak egyszer\u0171en \u00fajra megjelennek a weboldalakon a kor\u00e1bban trendi fontok, hanem kapnak egy kis csavart is. Erre lehet p\u00e9lda a Spotify Carnival<\/a> oldala, ahol az elavult \u00e9s k\u00f6zhelyesnek t\u0171n\u0151 ism\u00e9telget\u00e9s helyett \u00faj \u00e9letet leheltek hagyom\u00e1nyos bet\u0171t\u00edpusokba. De tal\u00e1n m\u00e9g jobban \u00e1tj\u00f6n a trend ezen az oldalon: <\/p>\n\n\n\n Hab\u00e1r\n kor\u00e1bban nem igaz\u00e1n volt javasolt a v\u00edzszintes g\u00f6rget\u00e9s haszn\u00e1lata, \negyre t\u00f6bb weboldalon bukkan fel. \u00c9s nem felt\u00e9tlen\u00fcl az\u00e9rt, mert a \nweboldal nagyon k\u00fcl\u00f6nb\u00f6zni akarna a t\u00f6bbiekt\u0151l, ink\u00e1bb olyan praktikus \nok miatt, hogy tov\u00e1bbi inform\u00e1ci\u00f3kat ez\u00e1ltal egy jobb megold\u00e1ssal \njuttathat el a felhaszn\u00e1l\u00f3khoz. Ilyen lehet p\u00e9ld\u00e1ul az alkalmaz\u00e1sa egy \nk\u00e9pgal\u00e9ri\u00e1ban, ahol term\u00e9szetesebbnek t\u0171nik a v\u00edzszintes, mint a \nf\u00fcgg\u0151leges mozg\u00e1s. <\/p>\n\n\n\n Ugyanakkor, ha Te is kipr\u00f3b\u00e1ln\u00e1d, van n\u00e9h\u00e1ny dolog, amire nem \u00e1rt figyelni a v\u00edzszintes g\u00f6rget\u00e9sn\u00e9l. Az egyik ilyen, hogy ne er\u0151ltesd a felhaszn\u00e1l\u00f3kn\u00e1l a v\u00edzszintes g\u00f6rget\u00e9st, tegy\u00e9l el\u00e9rhet\u0151v\u00e9 sz\u00e1mukra alternat\u00edv \u00fatvonalakat, p\u00e9ld\u00e1ul nyilat form\u00e1z\u00f3 gombokkal. Vil\u00e1gosan jelezned kell azt is, hogy hol haszn\u00e1lsz a tartalmadn\u00e1l v\u00edzszintes g\u00f6rget\u00e9st. \u00c9s persze azt is gondold \u00e1t alaposan, hogy milyen t\u00edpus\u00fa tartalom sz\u00e1m\u00e1ra el\u0151ny\u00f6s, mert nem minden esetben \u00e1llja meg a hely\u00e9t, \u00edgy p\u00e9ld\u00e1ul sz\u00f6vegekn\u00e9l \u00e9rdemes tart\u00f3zkodni t\u0151le. Egy j\u00f3 p\u00e9lda a megold\u00e1sra a Momento oldala<\/a>, ahol egy ny\u00edl jelzi az ir\u00e1nyt, illetve a k\u00e9p f\u00e9lbev\u00e1g\u00e1sa is mutatja, hogy merre tal\u00e1lhat\u00f3 tov\u00e1bbi tartalom.<\/p>\n\n\n\n Hab\u00e1r m\u00e1r \u00e9vek \u00f3ta vel\u00fcnk vannak a parallax weboldalak, nem lehet \u0151ket megunni. 2021-ben v\u00e1rhat\u00f3an m\u00e9g bonyolultabbak lesznek a parallax anim\u00e1ci\u00f3k, ez\u00e1ltal m\u00e9g ink\u00e1bb magukkal ragadja majd a felhaszn\u00e1l\u00f3kat a h\u00e1tt\u00e9r \u00e9s az el\u0151t\u00e9rben l\u00e9v\u0151 elemek k\u00fcl\u00f6nv\u00e1laszt\u00e1s\u00e1val. <\/p>\n\n\n\n A\n nagyobb felbont\u00e1s\u00fa kijelz\u0151k megjelen\u00e9se lehet\u0151v\u00e9 tette, hogy a kor\u00e1bbi,\n kiss\u00e9 darabos megjelen\u00e9s ut\u00e1n kiv\u00e1l\u00f3 min\u0151s\u00e9g\u0171 3D-grafik\u00e1kkal \ntal\u00e1lkozzunk, melyek azt\u00e1n z\u00f6kken\u0151 n\u00e9lk\u00fcl simulnak be a weboldalakba. \nEzek m\u00e1r nem zavar\u00f3 t\u00e9nyez\u0151k\u00e9nt jelennek meg, hanem jav\u00edtanak a \nfelhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyen. A 3D elemek pedig egyedis\u00e9get adnak a \nweboldalakhoz. <\/p>\n\n\n\n A neumorfizmus egy viszonylag \u00faj design-ir\u00e1nyzat, melyr\u0151l m\u00e1r \u00edrtunk az \u00e9v elej\u00e9n<\/a>, \u00e9s v\u00e1rhat\u00f3an 2021-ben is vel\u00fcnk marad. Nem szakad el teljesen az el\u0151z\u0151 \u00e9vekben uralkod\u00f3 minimalizmust\u00f3l, ugyanakkor mer\u00edt el\u0151dj\u00e9b\u0151l, a szkeuomorfizmusb\u00f3l is. \u00c1rny\u00e9kokat \u00e9s flat sz\u00edneket haszn\u00e1lva imit\u00e1lja a fizikai vil\u00e1got, dombor\u00fanak \u00e9s homor\u00fanak t\u0171n\u0151 elemeket alak\u00edtva ki. Ezzel a designtrenddel pr\u00f3b\u00e1lj\u00e1k visszahozni a designerek az tapint\u00e1s \u00e9rz\u00e9s\u00e9t, ami a flat vil\u00e1g\u00e1ban elveszett. <\/p>\n\n\n\n A n\u00f6vekv\u0151 s\u00e1vsz\u00e9less\u00e9g most m\u00e1r lehet\u0151v\u00e9 teszi, hogy vizu\u00e1lis elemek, sz\u00f6vegek, vide\u00f3 \u00e9s audi\u00f3\n fon\u00f3djon \u00f6ssze a weboldalakon, fokozva a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt. Ha Te is\n ilyesmivel pr\u00f3b\u00e1lkozn\u00e1l, akkor figyelj arra, hogy t\u00f6rekedj az \negyszer\u0171s\u00e9gre, mert ha t\u00fal sok lesz a mozg\u00e1s \u00e9s a hang, az zavar\u00f3 a \nfelhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra. <\/p>\n\n\n\n Az is fontos, hogy els\u0151sorban a tartalom hozz\u00e1f\u00e9rhet\u0151s\u00e9g\u00e9nek jav\u00edt\u00e1s\u00e1ra haszn\u00e1ld a k\u00fcl\u00f6nb\u00f6z\u0151 m\u00e9diaform\u00e1tumokat, ne pedig \u00f6nc\u00e9l\u00faan! V\u00e9g\u00fcl pedig ker\u00fcld az automatikusan indul\u00f3 vide\u00f3kat, hangokat, ink\u00e1bb helyezz el egy j\u00f3l l\u00e1that\u00f3 \u201clej\u00e1tsz\u00e1s\u201d gombot, amivel elind\u00edthatj\u00e1k azt! Itt tal\u00e1lsz r\u00e1 egy j\u00f3 p\u00e9ld\u00e1t<\/a>. <\/p>\n\n\n\n Mik\u00f6zben a merev r\u00e1csok \u00e9s a flat-sz\u00ednek\n t\u00f6mbjei elsz\u00edvj\u00e1k az egy\u00e9nis\u00e9get a weboldalakb\u00f3l, addig n\u00e9mi szemcs\u00e9s \ntext\u00fara alkalmaz\u00e1sa r\u00e9szben visszahozhatja azt. Ezek olyan lo-fi\n elemek, melyek durv\u00e1bb\u00e1 teszik a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt, \u00edgy pedig \nval\u00f3s\u00e1gosabb\u00e1, mint a v\u00e9gletekig csiszolt t\u00f6k\u00e9letess\u00e9g, amit sok \nweboldalon l\u00e1tunk. <\/p>\n\n\n\n Ahogy\n a szemcs\u00e9ss\u00e9g a term\u00e9szetess\u00e9g \u00e9rz\u00e9s\u00e9hez viszi k\u00f6zelebb a weboldalakat,\n \u00fagy a visszafogott sz\u00ednek is. R\u00e1ad\u00e1sul az ilyen tomp\u00e1bb sz\u00ednek nem \nterhelik annyira a felhaszn\u00e1l\u00f3k szem\u00e9t, mint az er\u0151s vagy nagyon \nkontrasztos sz\u00ednek. A webdesignerek\n egyre ink\u00e1bb azt \u00e9rzik, hogy sem a kor\u00e1bbi \u00e9vek feh\u00e9rs\u00e9g-m\u00e1ni\u00e1ja, sem \naz arra reag\u00e1l\u00f3 s\u00f6t\u00e9t m\u00f3d \u0151r\u00fclet nem igaz\u00e1n j\u00f3, ez\u00e9rt az arany k\u00f6z\u00e9putat\n kezdik keresni, \u00e9s a pasztellsz\u00ednek k\u00f6z\u00fcl v\u00e1logatnak. <\/p>\n\n\n\n A Gauss-f\u00e9le elmos\u00f3d\u00e1s remek eszk\u00f6z arra, hogy tomp\u00edtsuk a f\u00f3kuszt \u00e9s a gradienseket. Nem \u00faj effektr\u0151l van sz\u00f3, de a designerek csak most kezdt\u00e9k el komolyabb weboldalakon is haszn\u00e1lni. <\/p>\n\n\n\n Nem is olyan r\u00e9gen a weboldalak m\u00e9g sz\u00f6vegekb\u0151l \u00e9s fot\u00f3kb\u00f3l \u00e1lltak \u00f6ssze. Ez volt a bevett s\u00e9ma, ami n\u00e9h\u00e1ny \u00e9ve elkezdett v\u00e1ltozni az\u00e1ltal, hogy megjelentek a rajzolt illusztr\u00e1ci\u00f3k<\/a>, \u00e9s emberibb\u00e9 tett\u00e9k a weboldalakat. \u00dagy t\u0171nik, hogy j\u00f6v\u0151re is vel\u00fcnk maradnak. <\/p>\n\n\n\n A\n rajzolt illusztr\u00e1ci\u00f3k m\u00e1r nem csak k\u00fcl\u00f6n\u00e1ll\u00f3 k\u00e9pk\u00e9nt jelennek meg a \nweboldalakon, hanem az egyes elemek, p\u00e9ld\u00e1ul gombok is rajzk\u00e9nt t\u0171nnek \nfel. Ezek egyediv\u00e9 \u00e9s m\u00e9g emberibb\u00e9 tudj\u00e1k tenni a weboldalt az\u00e1ltal, \nhogy kit\u00f6rnek a weboldalak merev strukt\u00far\u00e1j\u00e1b\u00f3l. <\/p>\n\n\n\n 2021-ben\n m\u00e1r nem el\u00e9g egy egyszer\u0171, nagy fot\u00f3 a weboldalak f\u0151oldal\u00e1ra. Egyre \nink\u00e1bb kombin\u00e1lni kell grafikai elemekkel, melyek valamik\u00e9ppen \nkieg\u00e9sz\u00edtik azt \u00e9s megmutatj\u00e1k a weboldal kreat\u00edv oldal\u00e1t, nem \nmell\u00e9kesen pedig l\u00e1tv\u00e1nyosak. A fot\u00f3kra helyezett grafik\u00e1k emellett \nszem\u00e9lyis\u00e9get adnak a designnak, er\u0151s\u00edtik a m\u00e1rka megjelen\u00e9s\u00e9t, hiszen a\n log\u00f3ban megjelen\u0151 sz\u00edneket \u00e9s form\u00e1kat haszn\u00e1lhatod a grafik\u00e1ban. <\/p>\n\n\n\n A\n r\u00e1csoknak nem musz\u00e1j a laikus szeml\u00e9l\u0151 sz\u00e1m\u00e1ra l\u00e1thatatlannak \nmaradniuk. Ha megjelen\u00edtj\u00fck a r\u00e1csot vonalakkal, akkor az m\u00e9g ink\u00e1bb \nk\u00e9pes struktur\u00e1lni a weboldalt, megjelennek a blokkok mind a navig\u00e1ci\u00f3s \nelemekn\u00e9l, mind a f\u0151 tartalomn\u00e1l, a kialakul\u00f3 nagy, sz\u00ednes n\u00e9gyzetek \npedig felkeltik a figyelmet. A r\u00e1csnak azonban nem kell szimmetrikusnak \nvagy szab\u00e1lyosnak lenni. Aszimmetrikusan megjelen\u00edtett, keretnek hat\u00f3 \nr\u00e1cs is egyedi megjelen\u00e9s k\u00f6lcs\u00f6n\u00f6z a weboldalnak. <\/p>\n\n\n\n A kurzorok eddig nem kaptak k\u00fcl\u00f6n\u00f6sebb figyelmet a webdesignban, \u00e9s a mindenhol maradt az alap\u00e9rtelmezett ny\u00edl. Ugyanakkor a ny\u00edl a weboldalakon megv\u00e1ltoztathat\u00f3, ami hirtelen \u00e9rdekess\u00e9 teheti a weboldalt. N\u00e9zd meg p\u00e9ld\u00e1ul ezt az oldalt<\/a> monitoron, \u00e9s megl\u00e1tod, mir\u0151l besz\u00e9l\u00fcnk. <\/p>\n\n\n\n \u00dagy t\u0171nik, hogy egyre t\u00f6bb weboldalnak v\u00e1lnak r\u00e9szeiv\u00e9 a g\u00f6rgethet\u0151 k\u00e1rty\u00e1k, legyen sz\u00f3 f\u00fcgg\u0151leges vagy v\u00edzszintes g\u00f6rget\u00e9sr\u0151l. Izgalmas mozg\u00e1st jelen\u00edtenek meg, mik\u00f6zben remek\u00fcl adj\u00e1k \u00e1t az inform\u00e1ci\u00f3kat. Itt l\u00e1thatsz r\u00e1 egy p\u00e9ld\u00e1t<\/a>. <\/p>\n\r\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/12\/retro-betutipusok.png\")
<\/figure>\n\n\n\nV\u00edzszintes g\u00f6rget\u00e9s <\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/12\/vizszintes-gorgetes.png\")
<\/figure>\n\n\n\nParallax anim\u00e1ci\u00f3 <\/h3>\n\n\n\n
3D-grafik\u00e1k <\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/12\/3d-grafikak.png\")
<\/figure>\n\n\n\nNeumorfizmus <\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/12\/Neumorfizmus.png\")
<\/figure>\n\n\n\nMultim\u00e9dia-\u00e9lm\u00e9nyek <\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/12\/multimedia.png\")
<\/figure>\n\n\n\nSzemcs\u00e9s text\u00far\u00e1k <\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/12\/szemcses-weboldal.png\")
<\/figure>\n\n\n\nVisszafogott sz\u00ednek <\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/12\/visszafogott-szinek.png\")
<\/figure>\n\n\n\nGauss-f\u00e9le elmos\u00f3d\u00e1s <\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/12\/gauss-fele-elmosodas.png\")
<\/figure>\n\n\n\nRajzolt illusztr\u00e1ci\u00f3k <\/h3>\n\n\n\n
K\u00e9zzel rajzolt elemek <\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/12\/kezzel-rajzolt-elemek.jpg\")
<\/figure><\/div>\n\n\n\nGrafika \u00e9s fot\u00f3k kevered\u00e9se <\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/12\/grafika-foto-keveredese.png\")
<\/figure>\n\n\n\nGeometrikus r\u00e1csok <\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/12\/geometrikus-racsok-1024x578.jpg\")
<\/figure><\/div>\n\n\n\nEgyedi kurzorok <\/h3>\n\n\n\n
G\u00f6rgethet\u0151 k\u00e1rty\u00e1k <\/h3>\n\n\n\n