{"id":4312,"date":"2019-12-18T15:14:43","date_gmt":"2019-12-18T14:14:43","guid":{"rendered":"http:\/\/blog.webshark.hu\/?p=4312"},"modified":"2020-03-02T08:40:07","modified_gmt":"2020-03-02T07:40:07","slug":"merre-tartanak-a-webdesign-trendek-2020-ban","status":"publish","type":"post","link":"https:\/\/blog.webshark.hu\/2019\/12\/18\/merre-tartanak-a-webdesign-trendek-2020-ban\/","title":{"rendered":"Merre tartanak a webdesign trendek 2020-ban?"},"content":{"rendered":"\n

Minden \u00e9vben k\u00e9sz\u00edt\u00fcnk egy \u00f6sszefoglal\u00f3t a kibontakoz\u00f3 designtrendekr\u0151l, melyek uralkod\u00f3ak lesznek. Id\u00e9n sincs ez m\u00e1sk\u00e9nt, b\u00e1r nem sok minden v\u00e1ltozott tavaly \u00f3ta. <\/strong>(Friss\u00edt\u00e9s, 2020.03.02. – Melyek a trendi sz\u00ednek 2020-ban a weboldalakon?<\/a>)<\/em><\/p>\n\n\n\n\n\n\n\n

Mik\u00f6zben ezek a trendek \u00e1ltal\u00e1ban nem szolg\u00e1ltnak senkinek t\u00fal nagy meglepet\u00e9ssel, hiszen a cs\u00edr\u00e1juk m\u00e1r ak\u00e1r \u00e9vekkel kor\u00e1bban kibontakozott, az\u00e9rt \u00e9rdemes tudatos\u00edtani a helyzetet.<\/p>\n\n\n\n

Egyszer\u0171s\u00e9g<\/h3>\n\n\n\n
Tal\u00e1n m\u00e1r mindenki unja, de az egyszer\u0171s\u00e9g, a minimalizmus ir\u00e1ny\u00e1ba val\u00f3 t\u00f6rekv\u00e9s tov\u00e1bbra is er\u0151s trend. M\u00e9g mindig nem jutott el ugyanis mindenhov\u00e1 az a megk\u00f6zel\u00edt\u00e9s a webdesignban, hogy a kevesebb n\u00e9ha t\u00f6bb. Az embereknek egyre kev\u00e9sb\u00e9 van idej\u00fck arra, hogy bonyolult \u00e9s zs\u00fafolt weboldalak \u00e9relm\u00e9t pr\u00f3b\u00e1lj\u00e1k meg kibogozni, ahogy azt sem v\u00e1rj\u00e1k meg, hogy egy neh\u00e9z weboldal bet\u00f6lt\u0151dj\u00f6n. Pont emiatt nemigen sz\u00e1m\u00edthatunk arra, hogy ism\u00e9t elinduln\u00e1nk weboldalak a bonyolults\u00e1g \u00e9s s\u00falyoss\u00e1g ir\u00e1ny\u00e1ba. <\/p>\n\n\n\n
Aszimmetrikus elrendez\u00e9s \u00e9s osztott kijelz\u0151<\/h3>\n\n\n\n
A k\u00f6vetkez\u0151 r\u00e9g\u00f3ta vel\u00fcnk \u00e9l\u0151, de m\u00e9g mindig trendinek hat\u00f3 designelem az aszimmetrikus elrendez\u00e9s, mely tavalyi list\u00e1nk<\/a> els\u0151 hely\u00e9n szerepelt. \u00dagy t\u0171nik, hogy egyre mer\u00e9szebben t\u00e1volodnak el a designerek a szimmetrikus, szigor\u00faan r\u00e1cshoz k\u00f6t\u00f6tt elrendez\u00e9sekt\u0151l, \u00e9s ez csak tov\u00e1bb fokoz\u00f3dik a j\u00f6v\u0151ben – hiszen j\u00f3l lehet vele hangs\u00falyozni bizonyos elemeket az oldalon -, annak ellen\u00e9re, hogy j\u00f3val nagyobb hozz\u00e1\u00e9rt\u00e9st ig\u00e9nyel, mint egy szimmetrikus design elk\u00e9sz\u00edt\u00e9se. Az aszimmetrikus egyens\u00falyr\u00f3l, annak el\u0151nyeir\u0151l itt \u00edrtunk<\/a> b\u0151vebben. <\/p>\n\n\n\n
Az osztott kijelz\u0151 kor\u00e1bban olyan weboldalakon jelent meg els\u0151sorban, melyek elt\u00e9r\u0151 inform\u00e1ci\u00f3s egys\u00e9geket tartalmaztak, \u00e9s ezeket egy oldalon k\u00edv\u00e1nt\u00e1k bemutatni. M\u00e1ra azonban m\u00e1r b\u00e1rmilyen weboldalon megjelennek a vizu\u00e1lisan rendhagy\u00f3 megjelen\u00e9s miatt.<\/p>\n\n\n\n
$\"\"$ <\/figure>\n\n\n\n
Sz\u00edn\u00e1tmenetek haszn\u00e1lata<\/h3>\n\n\n\n
Nem is tudjuk, hogy ezzel \u00e9rdemes-e m\u00e9g el\u0151\u00e1llni, hiszen ezen bejegyz\u00e9s\u00fcnk<\/a> eredeti d\u00e1tum\u00e1t n\u00e9zve, m\u00e1r m\u00e1sf\u00e9l \u00e9ve \u00edrtunk a sz\u00edn\u00e1tmenetekr\u0151l, azaz gradiensekr\u0151l, ennek ellen\u00e9re m\u00e9g mindig \u00fagy tekinthet\u00fcnk a sz\u00edn\u00e1tmenetekre, mint amelyek meghat\u00e1rozz\u00e1k a vizu\u00e1lis design vil\u00e1g\u00e1t. Nagyon nem ragozn\u00e1nk a t\u00e9m\u00e1t, hiszen m\u00e1r el\u00e9g sokat \u00edrtunk r\u00f3la, el\u00e9g annyi, hogy 2020-ban v\u00e1rhat\u00f3an m\u00e9g t\u00f6bb gradiensbe fogunk belefutni, k\u00fcl\u00f6n\u00f6sen ami az illusztr\u00e1ci\u00f3kat illeti. Ugyanakkor ezek a gradiensek a sz\u00edneiket tekintve egyre kifinomultabbak, halv\u00e1nyabbak lesznek. <\/p>\n\n\n\n
$\"\"$ <\/figure>\n\n\n\n
L\u00e1tv\u00e1nyos tipogr\u00e1fia<\/h3>\n\n\n\n
A m\u00e1sik el\u00e9g nyilv\u00e1nval\u00f3 trend, mely m\u00e1r \u00e9vek \u00f3ta tartja mag\u00e1t \u00e9s v\u00e1lik egyre hangs\u00falyosabb\u00e1, az a l\u00e1tv\u00e1nyos tipogr\u00e1fia megjelen\u00e9se a weboldalakon. Persze bet\u0171k a kezdetek \u00f3ta vannak a weben, ugyanakkor a t\u00falhangs\u00falyozott, hatalmasra n\u00f6velt, t\u00f6bbnyire sans serif bet\u0171k az elm\u00falt \u00e9vek term\u00e9kei. Ezek a bet\u0171k m\u00e1r annyira l\u00e1tv\u00e1nyosak, hogy sokszor m\u00e9g k\u00e9pre sincs sz\u00fcks\u00e9g a weboldalon, mert \u00e1tveszik a hely\u00fcket. A bet\u0171kr\u0151l sz\u00f3l\u00f3 bejegyz\u00e9s\u00fcnket itt tal\u00e1lod<\/a>.<\/p>\n\n\n\n
$\"\"$ <\/figure>\n\n\n\n
Illusztr\u00e1ci\u00f3k<\/h3>\n\n\n\n
Tov\u00e1bb h\u00f3d\u00edtanak az illusztr\u00e1ci\u00f3k is, melyekkel m\u00e1r rengetegszer foglalkoztunk egy kor\u00e1bbi bejegyz\u00e9s\u00fcnkben<\/a>. Az illusztr\u00e1ci\u00f3k ugyanis nem csak modern megjelen\u00e9s\u0171v\u00e9 tudnak tenni egy weboldalt, hanem egyediv\u00e9 is. <\/p>\n\n\n\n
Nagyon \u00fagy t\u0171nik, hogy egyre t\u00f6bb nagy m\u00e1rka tal\u00e1lja meg saj\u00e1t illusztr\u00e1ci\u00f3s st\u00edlus\u00e1t, \u00e9s jelen\u00edti azt meg a fel\u00fcletein. Tal\u00e1n az\u00e9rt, mert ezekkel az egyedi illusztr\u00e1ci\u00f3kkal sokkal er\u0151sebben ki tudj\u00e1k fejezni a m\u00e1rka szem\u00e9lyis\u00e9g\u00e9t, k\u00fcl\u00f6nb\u00f6z\u0151s\u00e9g\u00e9t a t\u00f6bbiekt\u0151l. T\u00e9ny ugyanakkor, hogy j\u00f3val dr\u00e1g\u00e1bb \u00e9s nagyobb er\u0151fesz\u00edt\u00e9st ig\u00e9nyel, \u00edgy csak a nagyobb m\u00e1rk\u00e1k engedhetik meg maguknak.<\/p>\n\n\n\n
$\"\"$ <\/figure>\n\n\n\n
3D-s illusztr\u00e1ci\u00f3k<\/h3>\n\n\n\n
Szint\u00e9n szerepelt a tavalyi list\u00e1nkban a 3D-s illusztr\u00e1ci\u00f3k el\u0151ret\u00f6r\u00e9se, \u00fagyhogy \u00fagy t\u0171nik hely\u00e9nval\u00f3 volt megeml\u00edteni, ha id\u00e9n is azt l\u00e1tjuk, hogy a trend egyre fejl\u0151dik. A l\u00e9nyege, hogy a sok flat ut\u00e1n valamif\u00e9le realizmust, m\u00e9lys\u00e9get csemp\u00e9sznek a designba. A fel\u00fcletek lehetnek olyanok, mint \u00fcveg, f\u00e9m vagy m\u0171anyag, ugyanakkor olyan dolgok jelennek meg val\u00f3szer\u0171en \u00e1br\u00e1zolva, melyek egy\u00e9bk\u00e9nt nem l\u00e9teznek a val\u00f3s\u00e1gban. <\/p>\n\n\n\n
Izometrikus k\u00e9pek<\/h3>\n\n\n\n
Izometrikus k\u00e9pr\u0151l akkor besz\u00e9l\u00fcnk, amikor a 2D grafik\u00e1k 3D form\u00e1kk\u00e1 alakulnak, \u00edgy pedig egy saj\u00e1tos, realisztikus megjelen\u00e9st kapnak az illusztr\u00e1ci\u00f3k. Hab\u00e1r ezek \u00e1gyaztak meg a 3D-s k\u00e9peknek, tov\u00e1bbra is gyakran tal\u00e1lkozunk ezzel a megold\u00e1ssal, f\u0151leg infografik\u00e1kban.<\/p>\n\n\n\n
Anim\u00e1ci\u00f3k<\/h3>\n\n\n\n
Egy szint\u00e9n nagyon er\u0151s trend, a mikro– \u00e9s makroanim\u00e1ci\u00f3k\u00e9, melyek kapcs\u00e1n ugyanakkor sokan m\u00e1r t\u00falz\u00e1sokba esnek, \u00e9s a sok, illetve t\u00fal er\u0151teljes anim\u00e1ci\u00f3 a haszn\u00e1lhat\u00f3s\u00e1g rov\u00e1s\u00e1ra megy. Mindenesetre az anim\u00e1ci\u00f3kkal hat\u00e9konyan fel lehet h\u00edvni a figyelmet bizonyos dolgokra a weboldalon, mik\u00f6zben a haszn\u00e1lhat\u00f3s\u00e1g is jav\u00edthat\u00f3 vel\u00fck. <\/p>\n\n\n\n
Az \u00e1tlagos weboldalakon persze m\u00e9g nem t\u00fal gyakran tal\u00e1lkozunk vel\u00fck, \u00edgy van hov\u00e1 er\u0151s\u00f6dnie a trendnek. Ha Te is vinn\u00e9l egy kis \u00e9letet a weboldaladba, akkor \u00e9rdemes anim\u00e1ci\u00f3kkal k\u00eds\u00e9rletezni. Az anim\u00e1ci\u00f3kr\u00f3l b\u0151 egy \u00e9v itt \u00edrtunk<\/a>.<\/p>\n\n\n\n
\u00dcres t\u00e9r<\/h3>\n\n\n\n
Igen, a j\u00f3l ismert whitespace vagy negat\u00edv t\u00e9r, ami tov\u00e1bbra is tartja mag\u00e1t. Hiszen, ha sok elemnek kell megk\u00fczdenie a figyelem\u00e9rt egy weboldalon, akkor egyik sem fogja mag\u00e1ra vonni az \u00e1h\u00edtott figyelmet. Ez\u00e9rt a legfontosabbat kell kiv\u00e1lasztani, \u00e9s adni neki egy kis teret, hogy \u00e9szrevegy\u00e9k a l\u00e1togat\u00f3k. <\/p>\n\n\n\n
$\"\"$ <\/figure>\n\n\n\n
Retro<\/h3>\n\n\n\n
Ahogy a tavalyi \u00e9vben is m\u00e1r emlegett\u00fck a retr\u00f3t, \u00fagy az id\u00e9n is ezt kell tenn\u00fcnk, mert a m\u00faltid\u00e9z\u00e9s egy moderniz\u00e1lt, \u00e1t\u00e9rtelmezett form\u00e1ban egyre t\u00f6bb fel\u00fcleten jelenik meg, nem csak a webdesignban. \u00c9s ebbe beletartozik a r\u00e9gm\u00falt illusztr\u00e1ci\u00f3s technik\u00e1inak haszn\u00e1lata, valamint a sz\u00ednek \u00e9s a r\u00e9gies bet\u0171t\u00edpusok.<\/p>\n\n\n\n
Melyek a trendi sz\u00ednek 2020-ban a weboldalakon?<\/h2>\n\n\n\n
Hab\u00e1r tudjuk, hogy egy weboldal sz\u00edneit a m\u00e1rka sz\u00ednei hat\u00e1rozz\u00e1k meg, de ez nem z\u00e1rja ki, hogy figyelembe vegy\u00fck az \u00faj trendeket. Ez\u00e9rt \u00e9rdemes egy pillant\u00e1st vetni arra, hogy milyen ir\u00e1nyzatok jelentek meg, v\u00e1ltak uralkod\u00f3v\u00e1 a sz\u00ednekn\u00e9l az idei \u00e9vben.<\/p>\n\n\n\n
Monokr\u00f3m paletta<\/h3>\n\n\n\n
Ahogy tavaly is, id\u00e9n is meg kell eml\u00e9kezn\u00fcnk a monokr\u00f3m oldalak terjed\u00e9s\u00e9r\u0151l. Ezek l\u00e9nyege nev\u00fckben rejlik: egy sz\u00edn jelenik meg a semleges sz\u00ednek mellett a weboldalon. A monokr\u00f3m palett\u00e1n\u00e1l megmaradhatunk a m\u00e1rka f\u0151 sz\u00edn\u00e9n\u00e9l, ennek \u00e1rnyalatait lehet haszn\u00e1lni a weboldalon, \u00edgy er\u0151s\u00edtve a m\u00e1rk\u00e1t.<\/p>\n\n\n\n
Mivel egy sz\u00edn jelenik meg, \u00edgy nem hib\u00e1zhatunk a sz\u00ednek v\u00e1logat\u00e1s\u00e1n\u00e1l, mindenk\u00e9ppen egy harmonikus designt kapunk a sz\u00edneket tekintve. Ugyanakkor egy-egy elem kiemel\u00e9s\u00e9n\u00e9l korl\u00e1tozottabbak az eszk\u00f6zeink, de persze ez sem megoldhatatlan feladat.<\/p>\n\n\n\n
$\"\"$ <\/figure><\/div>\n\n\n\n
Halv\u00e1nyabb, term\u00e9szetesebb sz\u00ednek<\/h3>\n\n\n\n
Egy trend, mely szembe megy az \u00e9l\u00e9nk sz\u00edn\u0171 gradiensekkel, a halv\u00e1ny \u00e9s term\u00e9szetes sz\u00ednek haszn\u00e1lata, melyek j\u00f3l mutatnak a semleges sz\u00ednek mellett, illetve az ilyen h\u00e1ttereken, legyenek azok s\u00f6t\u00e9tek vagy vil\u00e1gosak. Az er\u0151s sz\u00ednek \u00e9vei ut\u00e1n jellemz\u0151bb\u00e9 v\u00e1lnak ezek a kifinomultabb, tomp\u00e1bb, term\u00e9szetes sz\u00ednek.<\/p>\n\n\n\n
Hab\u00e1r er\u0151s sz\u00ednekkel jobban ki lehet emelni valamit, n\u00e9ha jobb v\u00e1laszt\u00e1s kev\u00e9sb\u00e9 er\u0151s, halv\u00e1nyabb, kellemesebb sz\u00edneket haszn\u00e1lni. Ezek mellett r\u00e1ad\u00e1sul nagyobb figyelmet kaphat a term\u00e9k\u00fcnk fot\u00f3ja, hiszen a sz\u00ednek nem vonj\u00e1k el r\u00f3la a figyelmet.<\/p>\n\n\n\n
$\"\"$ <\/figure><\/div>\n\n\n\n
F\u00f6ldsz\u00ednek<\/h3>\n\n\n\n
Hasonl\u00f3 az el\u0151z\u0151h\u00f6z, hiszen a f\u00f6ldsz\u00ednek is term\u00e9szetesk\u00e9nt hat\u00f3 sz\u00ednek. K\u00fcl\u00f6n\u00f6sen olyan weboldalakon j\u00f3 v\u00e1laszt\u00e1s, ahol figyelnek a k\u00f6rnyezetv\u00e9delemre. A sz\u00ednek \u00e1ltal is nagyobb bizalmat kell \u00edgy a weboldal a sz\u00e1nd\u00e9k\u00e1t, c\u00e9ljait illet\u0151en, mint hars\u00e1ny, \u00e9l\u00e9nk sz\u00ednekkel tenn\u00e9.<\/p>\n\n\n\n
A f\u00f6ldsz\u00ednek megnyugtat\u00f3ak \u00e9s pihentet\u0151ek, ha r\u00e1juk tekint\u00fcnk, \u00e9s azt az \u00e9rz\u00e9st keltik, mintha valamik\u00e9ppen kapcsol\u00f3dn\u00e1nk a term\u00e9szethez.<\/p>\n\n\n\n
$\"\"$ <\/figure><\/div>\n\n\n\n
Korall \u00e9s t\u00fcrkiz<\/h3>\n\n\n\n
Igaz, hogy a korall a 2019-es \u00e9v sz\u00edne volt a pantone szerint, de m\u00e9g mindig trendi. K\u00fcl\u00f6n\u00f6sen a t\u00fcrkizzel kombin\u00e1lva, hiszen a kett\u0151 k\u00f6z\u00f6tt j\u00f3 a kontraszt, \u00e9s nagyon eredetinek hat egy\u00fctt. Ugyanakkor a korall mell\u00e9 a k\u00e9k m\u00e1s \u00e1rnyalatai is elhelyezhet\u0151k.<\/p>\n\n\n\n
$\"\"$ <\/figure>\n\n\n\n
Neon sz\u00ednek<\/h3>\n\n\n\n
De az \u00e9l\u00e9nk sz\u00ednek kedvel\u0151i sem maradnak lehet\u0151s\u00e9gek n\u00e9lk\u00fcl, hiszen a neon sz\u00ednek m\u00e9g mindig n\u00e9pszer\u0171ek. Persze mer\u00e9sz h\u00faz\u00e1s egy weboldalon neon sz\u00edneket haszn\u00e1lni, ugyanakkor figyelemfelkelt\u0151 \u00e9s megk\u00fcl\u00f6nb\u00f6ztet a t\u00f6bbiekt\u0151l, akik megmaradnak a hagyom\u00e1nyos sz\u00ednv\u00e1laszt\u00e1sn\u00e1l.<\/p>\n\n\n\n
$\"\"$ <\/figure>\n\r\n