Mint minden \u00e9vben, id\u00e9n is \u00e1ttekintj\u00fck az uralkod\u00f3 vagy kialakul\u00f3 webdesingtrendeket, azaz merre tartanak a weboldalak, milyen technik\u00e1kat \u00e9s eszk\u00f6z\u00f6ket haszn\u00e1lunk majd 2019-ban, \u00e9s persze m\u00e9g j\u00f3 p\u00e1r \u00e9vig.<\/strong><\/p>\n

Mik\u00f6zben azt nem neh\u00e9z megmondani, hogy \u00e9pp milyen trendek uralkod\u00f3k a webdesignban, azt m\u00e1r nehezebb, hogy mi\u00e9rt ezek bukkantak fel \u00e9s mik\u00e9nt haszn\u00e1lhat\u00f3k fel. A trendek megmutatj\u00e1k, hogy mit szeret\u00fcnk, mit ut\u00e1lunk, \u00e9s merre tartunk. \u00c9s min\u00e9l pontosabban tudjuk, ann\u00e1l jobban meg\u00e9rtj\u00fck a k\u00f6z\u00f6ns\u00e9g\u00fcnk ig\u00e9nyeit is.<\/p>\n

Megt\u00f6rt r\u00e1csok \u00e9s aszimmetrikus elrendez\u00e9s<\/h3>\n

Igaz\u00e1b\u00f3l semmi \u00faj nincs benne, \u00e9vek \u00f3ta jelen van a webdesignban, de \u00fagy t\u0171nik, hogy mind gyakrabban fogunk tal\u00e1lkozni vele a weboldalakon 2019-ben. A megt\u00f6rt r\u00e1cs abban k\u00fcl\u00f6nb\u00f6zik a szab\u00e1lyos r\u00e1cst\u00f3l, hogy nem a megszokott rendet k\u00f6vetik a weboldal egyes elemei. Ez\u00e1ltal k\u00fcl\u00f6nb\u00f6zni tudnak a t\u00f6bbiekt\u0151l az ezt alkalmaz\u00f3 weboldalak, k\u00f6nnyebben felh\u00edvj\u00e1k magukra a figyelmet.<\/p>\n

<\/p>\n

Szab\u00e1lytalan elemek a designban<\/h3>\n

Egyre jobban t\u00e1volodunk az egyenes vonalakt\u00f3l \u00e9s szab\u00e1lyos form\u00e1kt\u00f3l, hely\u00fcket \u00e1tveszik a nem m\u00e9rtani form\u00e1k. Ezek nem a megszokott n\u00e9gysz\u00f6gek, k\u00f6r\u00f6k vagy h\u00e1romsz\u00f6gek, vagy b\u00e1rmilyen egyenes k\u00f6rvonalakkal behat\u00e1rolhat\u00f3 elemek, hanem szervesnek t\u0171n\u0151 alakzatok. \u00c9s hogy ez mi\u00e9rt j\u00f3? Mert az ilyen form\u00e1k \u00e1ltal megk\u00f6zel\u00edthet\u0151bb\u00e9 v\u00e1lik a weboldal, k\u00f6zelebb ker\u00fcl az emberhez.<\/p>\n

<\/p>\n

Retr\u00f3<\/h3>\n

Ahogy t\u00fall\u00e9pt\u00fcnk a flat designon, sokan az azt megel\u0151z\u0151 korok forma- \u00e9s sz\u00ednvil\u00e1g\u00e1hoz ny\u00faltak vissza. A jelenlegi designtrendekkel keverve eg\u00e9sz \u00e9rdekes \u00f6sszhat\u00e1s alakul ki.<\/p>\n

<\/p>\n

Sz\u00ednek n\u00e9lk\u00fcli, monokr\u00f3m weboldalak<\/h3>\n

Err\u0151l is m\u00e1r \u00e9vek \u00f3ta \u00edrunk, ennek ellen\u00e9re terjednek az ilyen weboldalak, mert hat\u00e9konyabban felh\u00edvj\u00e1k magukra a figyelmet, mint ha a megszokott m\u00f3don 2-5 sz\u00edn felhaszn\u00e1l\u00e1s\u00e1val \u00e9p\u00fcln\u00e9nek fel. R\u00e1ad\u00e1sul, ha mind\u00f6ssze egy f\u0151 sz\u00ednt haszn\u00e1lsz a designban, akkor azzal m\u00e9g ink\u00e1bb er\u0151s\u00edtheted a m\u00e1rk\u00e1d. Tov\u00e1bb is egyszer\u0171s\u00edtheted a dolgot, ha elhagyod valamennyi sz\u00ednt (a fekete, feh\u00e9r \u00e9s sz\u00fcrke semleges sz\u00ednek, nem sz\u00e1m\u00edtanak sz\u00ednnek a designban) a weboldaladr\u00f3l.<\/p>\n

Megv\u00e1ltoz\u00f3 hajt\u00e1s feletti r\u00e9sz<\/h3>\n

Az unalomig ismert nagy k\u00e9p, c\u00edmsor, alc\u00edm, men\u00fcsor elrendez\u00e9s helyett m\u00e1s kialak\u00edt\u00e1sokkal kezdenek k\u00eds\u00e9rletezni a weboldalak. Itt nincs meghat\u00e1rozott ir\u00e1ny, csak annyi, hogy elhagyj\u00e1k a megszokott, unalmas – \u00e9s persze j\u00f3l haszn\u00e1lhat\u00f3 – s\u00e9m\u00e1t. Erre mindig is l\u00e1ttunk p\u00e9ld\u00e1kat, de mivel egyre ink\u00e1bb uniformiz\u00e1l\u00f3dnak a weboldalak, \u00edgy sokkal szembet\u0171n\u0151bb, ha valaki kil\u00f3g a sorb\u00f3l.<\/p>\n

\u00d3ri\u00e1si navig\u00e1ci\u00f3s men\u00fc<\/h3>\n

Sok \u00faj ebben sincs, m\u00e1r \u00e9vek \u00f3ta l\u00e1thatunk pr\u00f3b\u00e1lkoz\u00e1sokat eg\u00e9sz oldalt bet\u00f6lt\u0151 vagy m\u00e1s m\u00f3don szokatlan navig\u00e1ci\u00f3s men\u00fckre. Ezekb\u0151l is egyre t\u00f6bb lesz, ann\u00e1l is ink\u00e1bb, mert nem neh\u00e9z megoldani. Ugyanakkor arra figyelni kell, hogy ne csak j\u00f3l n\u00e9zzen ki, hanem haszn\u00e1lhat\u00f3 is maradjon a navig\u00e1ci\u00f3s men\u00fc.<\/p>\n

<\/p>\n

Feleslegesen naggy\u00e1 v\u00e1l\u00f3 whitespace<\/h3>\n

Hossz\u00fa \u00e9vek \u00f3ta megfigyelhet\u0151 a whitespace egyre fontosabb\u00e1 v\u00e1l\u00e1sa \u00e9s folyamatos n\u00f6veked\u00e9se. A whitespace-nek ugyanis funkci\u00f3ja van a designban. Ugyanakkor sokan azzal k\u00eds\u00e9rleteznek, hogy a funkci\u00f3ra fittyet h\u00e1nyva, \u00f6nmag\u00e1\u00e9rt, designelemk\u00e9nt kezdik alkalmazni a hatalmasra n\u00f6velt negat\u00edv teret. Ez\u00e1ltal a whiespace nem valami m\u00e1sra h\u00edvja fel a figyelmet, hanem \u00f6nmag\u00e1ra. A haszn\u00e1lhat\u00f3s\u00e1got tekintve nincs sz\u00fcks\u00e9g ilyen m\u00e9retekre, mind\u00f6ssze a k\u00fcl\u00f6nb\u00f6zni v\u00e1gy\u00e1s indokolja.<\/p>\n

<\/p>\n

3D-s illusztr\u00e1ci\u00f3k<\/h3>\n

Sokaknak m\u00e9g a flat design is \u00faj, m\u00e1ris akadnak akik tov\u00e1bbl\u00e9pnek, \u00e9s \u00fajra a 3d-s illusztr\u00e1ci\u00f3kkal k\u00eds\u00e9rleteznek. A designerek megpr\u00f3b\u00e1lnak min\u00e9l t\u00f6bb m\u00e9lys\u00e9get \u00e9s val\u00f3s\u00e1goss\u00e1got belecsemp\u00e9szni a megjelen\u00e9sbe, elmosva a hat\u00e1rt a digit\u00e1lis \u00e9s a fizikai vil\u00e1g k\u00f6z\u00f6tt.<\/p>\n

A flatb\u0151l is deep flat lesz, amelyben t\u00f6bb r\u00e9teg rak\u00f3dik egym\u00e1sra, ami m\u00e1r majdnem 3d-s megjelen\u00e9s. Megmaradnak a flat jellegzetess\u00e9gei, de \u00e1thatja a szkeuomorfizmus.<\/p>\n

<\/p>\n

Sz\u00fcrre\u00e1lis design<\/h3>\n

A rajzfilmszer\u0171 illusztr\u00e1ci\u00f3knak \u00e9s felhaszn\u00e1l\u00f3i fel\u00fcleteknek egy c\u00e9lja van: ne legyen unalmas, \u00fajszer\u0171nek hasson. Nem sz\u00e1m\u00edt, hogy kit sz\u00f3l\u00edtanak meg ezek a grafik\u00e1k, a l\u00e9nyeg, hogy \u00e9rdekes legyen, vagy ak\u00e1r kifejezetten ronda. Ezt persze nem minden c\u00e9g engedheti meg mag\u00e1nak. Min\u00e9l sz\u00e9lesebb a k\u00f6z\u00f6ns\u00e9g\u00fck, ann\u00e1l semlegesebbnek kell lennie a designnak.<\/p>\n

<\/p>\n

Egyre komolyabb\u00e1 v\u00e1l\u00f3 log\u00f3k<\/h3>\n

Ez l\u00e1tszik abb\u00f3l is, hogy j\u00f3 p\u00e1r olyan c\u00e9ggel tal\u00e1lkozhattunk 2018-ban, amelyik komolyabb\u00e1 v\u00e1lt a log\u00f3j\u00e1t tekintve is. V\u00e1ltottak a k\u00f6nnyen felismerhet\u0151, karakteres, de kicsit furcsa vizu\u00e1lis megjelen\u00e9st\u0151l a konformista, unalmasabb, nagyv\u00e1llalati ir\u00e1nyba. Ezzel jelezve, hogy a c\u00e9g feln\u0151tt, \u00e9rett\u00e9 v\u00e1lt. \u00c9s val\u00f3sz\u00edn\u0171, hogy a k\u00f6vetkez\u0151 \u00e9vekben is tal\u00e1lkozunk hasonl\u00f3 \u00e1talakul\u00e1sokkal.<\/p>\n

<\/p>\n

2.0-\u00e1s gradiensek<\/h3>\n

M\u00e1r a gradiensek sem a r\u00e9giek. Az egyre jobb kijelz\u0151ket kihaszn\u00e1lva a designerek feszegetik a hat\u00e1rokat a gradiensekn\u00e9l is. M\u00e1r nem csak a figyelmet keltik fel, hanem m\u00e9lys\u00e9get \u00e9s egy \u00faj dimenzi\u00f3t adnak a fel\u00fcletnek. A 2.0-\u00e1s gradiensek finomak \u00e9s egyszer\u0171ek. Nem \u00fctk\u00f6znek a sz\u00ednek, a form\u00e1khoz igazodnak.<\/p>\n

<\/p>\n

S\u00f6t\u00e9t h\u00e1tterek<\/h3>\n

A vibr\u00e1l\u00f3 sz\u00ednek \u00e9s a jelent\u0151s\u00e9gteljes gradiensek persze a s\u00f6t\u00e9t fel\u00fcleteken mutatnak a legjobban. A s\u00f6t\u00e9t t\u00e9m\u00e1k maradnak vel\u00fcnk<\/a>, csak egyre kifinomultabb\u00e1 v\u00e1lnak. Mindez persze a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny rov\u00e1s\u00e1ra v\u00e1lhat, hiszen, ha minden sz\u00ednes, akkor hogyan emel\u00fcnk ki elemeket a weboldalon? \u00c9s persze nem mindenki haszn\u00e1l OLED kijelz\u0151s mobilt, \u00edgy sokakn\u00e1l elvesznek a gradiensek. De aki megoldja ezeket a probl\u00e9m\u00e1kat, nagyon el\u0151remutat\u00f3 weboldallal \u00e1ll el\u0151.<\/p>\n

Tov\u00e1bbra is brutalizmus<\/h3>\n

Valami vonz\u00f3 m\u00e9giscsak lehet a brutalizmusban<\/a>. Lehet persze, hogy csak egy reakci\u00f3 a minimalizmus letisztults\u00e1g\u00e1ra vagy a bar\u00e1ts\u00e1gos, bens\u0151s\u00e9ges, h\u00edvogat\u00f3 grafik\u00e1kkal k\u00e9sz\u00fclt weboldalakra. \u00c9s m\u00e1r nem csak egy sz\u0171k csoport haszn\u00e1lja, hanem nagy m\u00e1rk\u00e1k is.<\/p>\n

<\/p>\n

M\u00e9g mer\u00e9szebb \u00e9s retr\u00f3bb bet\u0171t\u00edpusok<\/h3>\n

El\u00e9g, ha r\u00e1n\u00e9zel a Mailchimp \u00e1ltal v\u00e1lasztott Cooper Black bet\u0171t\u00edpusra. Egyre t\u00f6bb serif fontot l\u00e1thatt\u00e1l 2018-ban, \u00e9s val\u00f3sz\u00edn\u0171leg m\u00e9g t\u00f6bbel tal\u00e1lkozol 2019-ben. Legal\u00e1bbis, ami a c\u00edmsorokat illeti.<\/p>\n

<\/p>\n

Egyre t\u00f6bb anim\u00e1ci\u00f3<\/h3>\n

A trend tov\u00e1bbra is az anim\u00e1lt \u00e9s interakt\u00edv elemek<\/a> ir\u00e1ny\u00e1ba mutat. Nincs is ezzel semmi baj, eg\u00e9szen addig, am\u00edg az anim\u00e1ci\u00f3k seg\u00edtik az embereket a weboldalak haszn\u00e1lat\u00e1ban, nem pedig akad\u00e1lyozz\u00e1k \u0151ket. Csak a trend kedv\u00e9\u00e9rt viszont nincs \u00e9rtelme anim\u00e1ci\u00f3kat haszn\u00e1lni, mert csak rontja a weboldal haszn\u00e1lhat\u00f3s\u00e1g\u00e1t.<\/p>\n

\u00d3ri\u00e1si, eg\u00e9sz kijelz\u0151t bet\u00f6lt\u0151 sz\u00f6vegek<\/h3>\n

\u00dagy t\u0171nik, hogy most m\u00e1r egyre t\u00f6bben r\u00e1j\u00f6nnek: a tartalom a legfontosabb a designban. \u00cdgy vannak ezzel a vizu\u00e1lis designerek is, akik egyre ink\u00e1bb k\u00f6z\u00e9ppontba helyezik a sz\u00f6vegeket. L\u00e1tt\u00e1l m\u00e1r ekkora kos\u00e1rba gombot?<\/p>\n

<\/p>\n

De ma m\u00e1r egy h\u00edrsite is \u00edgy n\u00e9z ki:<\/p>\n

<\/p>\n

\u00c9s nem csak a CTA-k vagy a c\u00edmsorok n\u0151nek nagyra, hanem a men\u00fc is.<\/p>\n

Egym\u00e1sra helyezett elemek<\/h3>\n

Eddig a whitespace kialak\u00edt\u00e1sa volt hivatott arra, hogy jelezze a kapcsolatot egyes elemek k\u00f6z\u00f6tt a weboldalon. Most m\u00e1r azonban nem egyszer\u0171en k\u00f6zel ker\u00fclnek egym\u00e1shoz az \u00f6sszetartoz\u00f3 dolgok, hanem egym\u00e1sra helyezik \u0151ket a designerek.<\/p>\n

<\/p>\n

 
\n