{"id":2574,"date":"2017-12-20T15:18:55","date_gmt":"2017-12-20T14:18:55","guid":{"rendered":"http:\/\/blog.webshark.hu\/?p=2574"},"modified":"2020-07-15T15:14:05","modified_gmt":"2020-07-15T13:14:05","slug":"webdesign-trendek-2018","status":"publish","type":"post","link":"http:\/\/blog.webshark.hu\/2017\/12\/20\/webdesign-trendek-2018\/","title":{"rendered":"Merre tart a webdesign 2018-ban? Trendek, ir\u00e1nyok"},"content":{"rendered":"

Nagy meglepet\u00e9sekre term\u00e9szetesen nem kell sz\u00e1m\u00edtani, hiszen a folyamatok jelenleg is l\u00e1that\u00f3k, mind\u00f6ssze a hangs\u00falyok tol\u00f3dnak el. A 2018-as webdesign trendek \u00e1ltal\u00e1ban kor\u00e1bbi \u00e9vekben m\u00e1r megfigyelt folyamatok er\u0151s\u00f6d\u00e9s\u00e9b\u0151l – mint p\u00e9ld\u00e1ul az \u00e9l\u00e9nk sz\u00ednek \u00e9s az anim\u00e1ci\u00f3k -, illetve gyeng\u00fcl\u00e9s\u00e9b\u0151l – p\u00e9ld\u00e1ul a flat \u00e9s a szellemgombok – \u00e1llnak \u00f6ssze.<\/strong><\/p>\n

Osztott weboldalak<\/h3>\n

2015 \u00f3ta vel\u00fcnk vannak, de a\u00a0kett\u00e9osztott weboldalak m\u00e9g mindig<\/a> nagyon felkapottak, \u00e9s \u00fagy t\u0171nik a trend az elk\u00f6vetkez\u0151 \u00e9vekben is maradni fog. A kett\u00e9osztott weboldal felsz\u00e1molta a megszokott weboldal-hierarchi\u00e1t. A tekintet ahelyett, hogy fel\u00fclr\u0151l lefel\u00e9 mozogna, kiss\u00e9 bizonytalanul csapong az oldalon, mivel az emberek nem tudj\u00e1k, hov\u00e1 is n\u00e9zzenek.<\/p>\n

\"\"<\/p>\n

Ugyanakkor t\u00f6bb m\u00e1s el\u0151nye is van, \u00edgy a j\u00f3 kompatibilit\u00e1s a mobilokkal \u00e9s a felhaszn\u00e1l\u00f3bar\u00e1t haszn\u00e1lat. R\u00e1ad\u00e1sul j\u00f3l is n\u00e9z ki, eredeti, nincs m\u00e9g t\u00fal sok bel\u0151l\u00fck. Nem v\u00e9letlen teh\u00e1t, hogy egyre n\u00f6vekszik a n\u00e9pszer\u0171s\u00e9ge.<\/p>\n

Nagyon j\u00f3l haszn\u00e1lhat\u00f3k olyan weboldalakon, ahol k\u00e9t vagy h\u00e1rom, jelent\u0151sen k\u00fcl\u00f6nb\u00f6z\u0151 vagy megk\u00fcl\u00f6nb\u00f6ztethet\u0151 tartalom van, melyekre egyar\u00e1nt k\u00edv\u00e1ncsiak lehetnek a c\u00e9g \u00fcgyfelei. Ugyan\u00fagy m\u0171k\u00f6dik a dolog, mint azokn\u00e1l a tartalmakn\u00e1l, ahol el\u0151re el kell d\u00f6nteni, melyik \u00faton induljunk el.<\/p>\n

Emellett j\u00f3l haszn\u00e1lhat\u00f3k reszponz\u00edv megold\u00e1sk\u00e9nt, hiszen m\u00edg desktopon egym\u00e1s mell\u00e9 ker\u00fclnek a blokkok, addig mobilon egym\u00e1s al\u00e1. A felhaszn\u00e1l\u00f3k \u00edgy nem \u00e9rzik, hogy b\u00e1rmivel is kevesebbet kapn\u00e1nak egy kisebb kijelz\u0151s megjelen\u00e9sn\u00e9l.<\/p>\n

M\u00e9g t\u00f6bb \u00e9l\u00e9nk sz\u00edn<\/h3>\n

\u00dagy t\u0171nik, hogy az \u00e9l\u00e9nk sz\u00ednek kitartanak, s\u0151t egyre t\u00f6bbet l\u00e1thatunk bel\u0151l\u00fck. Az er\u0151teljes sz\u00ednek magukra vonj\u00e1k a figyelmet, \u00e9s seg\u00edtenek bevonzani a felhaszn\u00e1l\u00f3kat. Friss \u00e9rzetet keltenek, \u00e9s k\u00fcl\u00f6n\u00f6sen a fiatalabbak sz\u00e1m\u00e1ra vonz\u00f3ak. Ez\u00e1ltal olyan c\u00e9gek is haszn\u00e1lni kezdik, akikt\u0151l meglep\u0151nek fog t\u0171nni ez a vid\u00e1m hangulat. Mint p\u00e9ld\u00e1ul a Ford, mely a Make it Driveable landing oldal\u00e1n rendk\u00edv\u00fcl \u00e9l\u00e9nk sz\u00edneket haszn\u00e1l.<\/p>\n

\"\"<\/p>\n

Ragad\u00f3s elemek a weboldal tetej\u00e9n is alj\u00e1n<\/h3>\n

Semmi \u00faj nincs abban, hogy egy men\u00fc v\u00e9gig k\u00f6veti a felhaszn\u00e1l\u00f3t az oldal tetej\u00e9re ragadva, mik\u00f6zben leg\u00f6rget rajta. M\u00e9gis, egyre tov\u00e1bb n\u0151 a ragad\u00f3s navig\u00e1ci\u00f3t haszn\u00e1l\u00f3 oldalak sz\u00e1ma.<\/p>\n

Ugyan\u00edgy rekl\u00e1mok, chatablak, felugr\u00f3k, \u00fczenetek ragadnak egyre nagyobb sz\u00e1mban a weboldalak alj\u00e1ra. Els\u0151sorban az\u00e9rt ide, mert ez a legkev\u00e9sb\u00e9 zavar\u00f3, \u00e9s mobilon is elfogadhat\u00f3 elhelyez\u00e9s, mik\u00f6zben a weboldaltulajdonosok szeretn\u00e9k valamire felh\u00edvni a figyelmet.<\/p>\n

\u00cdvelt form\u00e1k<\/h3>\n

A hat\u00e1rozott, geometrikus, \u00e9les kont\u00far\u00fa form\u00e1k helyett egyre jellemz\u0151bb\u00e9 v\u00e1lnak a puh\u00e1bb \u00e9s rugalmasabb form\u00e1k. Legink\u00e1bb a l\u00e1gy vonalak hat\u00e1rozz\u00e1k meg a megjelen\u00e9st, melyekben kev\u00e9s a t\u00f6r\u00e9s \u00e9s az \u00e9l. B\u00e1rhov\u00e1 n\u00e9zel, egyre t\u00f6bb \u00edves vonalat l\u00e1tsz. Ez t\u00f6rt\u00e9nik a k\u00f6z\u00f6ss\u00e9gi oldalakon, ahol a profilfot\u00f3k m\u00e1r k\u00f6r alak\u00faak, de a Google mobilos oldal\u00e1n is lekerek\u00edtett sarkokkal \u00e9s k\u00f6r\u00f6kkel tal\u00e1lkozol.<\/p>\n

\"\"<\/p>\n

Finom anim\u00e1ci\u00f3k<\/h3>\n

Az apr\u00f3 \u00e9s egyszer\u0171 anim\u00e1ci\u00f3kat szeretik az emberek<\/a>. Ha j\u00f3l vannak megtervezve, akkor seg\u00edti \u0151ket a weboldal haszn\u00e1lat\u00e1ban. Nem csak arra val\u00f3k, hogy valamik\u00e9ppen \u00e1tv\u00e9szelj\u00fck azt az id\u0151szakot, am\u00edg a bet\u00f6lt\u0151d\u00e9sre v\u00e1runk. Beletartoznak nem csak az \u00e9letre kelt illusztr\u00e1ci\u00f3k, hanem ak\u00e1r a cinemagraph is.<\/p>\n

\"\"<\/p>\n

Ut\u00f3bbi elterjed\u00e9se m\u00e9g v\u00e1rat mag\u00e1ra, pedig nem 2017-ben hallottunk r\u00f3la el\u0151sz\u00f6r. A cinemagraph egyfajta kombin\u00e1ci\u00f3ja a vide\u00f3nak \u00e9s a fot\u00f3nak, ahol a kiv\u00e1l\u00f3 min\u0151s\u00e9g\u0171 fot\u00f3 kap egy loopolt vide\u00f3-effektet, melynek r\u00e9v\u00e9n azt az ill\u00fazi\u00f3t kelti az emberekben, hogy \u00e9letre kel a fot\u00f3. Nem statikus a k\u00e9p, mint egy fot\u00f3n, ugyanakkor nem ig\u00e9nyel annyi figyelmet \u00e9s helyet sem, mint egy vide\u00f3. K\u00e9pes felkelteni a figyelmet, \u00e9rzelmeket v\u00e1lt ki, \u00e9s van egyfajta megnyugtat\u00f3, s\u0151t ink\u00e1bb hipnotikus hat\u00e1sa. Annak ellen\u00e9re, hogy nem t\u00f6rt\u00e9nik semmi a k\u00e9pen, az embereket megragadja.<\/p>\n

Parallax g\u00f6rget\u00e9s<\/h3>\n

Hab\u00e1r sokan panaszkodnak amiatt, hogy lassul a bet\u00f6lt\u00e9si id\u0151 \u00e9s romlik a haszn\u00e1lhat\u00f3s\u00e1g miatta, m\u00e1r \u00e9vek \u00f3ta tal\u00e1lkozhatunk a parallax effektekkel a weboldalakon<\/a>, melyek g\u00f6rget\u00e9skor jelennek meg. \u00c9s \u00fagy t\u0171nik, hogy egy darabig m\u00e9g vel\u00fcnk maradnak. Igaz kicsit finomabb, kev\u00e9sb\u00e9 t\u00falhajtott form\u00e1ban, hiszen a felhaszn\u00e1l\u00f3k felfigyelnek r\u00e1 \u00e9s szeretik a vel\u00fck val\u00f3 j\u00e1t\u00e9kot.<\/p>\n

\"\"<\/p>\n

Elt\u0171n\u0151 flat design \u00e9s szellemgombok<\/h3>\n

A Nielsen Norman Group 2017 v\u00e9g\u00e9n k\u00f6zz\u00e9tett vizsg\u00e1lata<\/a> m\u00e1r jelezte, hogy a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra probl\u00e9m\u00e1t okoz, ha tiszta flat design keretek k\u00f6z\u00f6tt kell navig\u00e1lniuk: 22 sz\u00e1zal\u00e9kkal tart tov\u00e1bb egy feladat v\u00e9grehajt\u00e1sa.<\/p>\n

Az NNG a vizsg\u00e1latai egy r\u00e9sz\u00e9n\u00e9l szellemgombokat haszn\u00e1lt, melyek ugyan\u00fagy probl\u00e9m\u00e1t okoznak, mint a flat design, legal\u00e1bbis az esetek egy r\u00e9sz\u00e9ben. De nem csak \u0151k, hanem a ConversionXL is 20 sz\u00e1zal\u00e9kos elt\u00e9r\u00e9st tal\u00e1lt<\/a> a szellemgombok k\u00e1r\u00e1ra, amikor ezekkel k\u00eds\u00e9rletezett a CTA-j\u00e1n\u00e1l.<\/p>\n

Nem v\u00e9letlen, hogy egyre t\u00f6bbet hallhatunk a designerek r\u00e9sz\u00e9r\u0151l az \u00fajra megjelen\u0151 \u00e1rny\u00e9kokr\u00f3l \u00e9s sz\u00edn\u00e1tmenetekr\u0151l. De persze m\u00e1r a material design \u00e9s a flat 2.0 is jelezte, hogy a UX-et tekintve komoly kih\u00edv\u00e1sokkal k\u00fczd a flat.<\/p>\n

Vide\u00f3k, h\u00e1tt\u00e9rvide\u00f3k<\/h3>\n

Hab\u00e1r lass\u00edthatj\u00e1k a weboldalt, \u00e9s adott esetben zavar\u00f3ak is lehetnek a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra – sokan \u00fagy v\u00e9lik, hogy egy kateg\u00f3ri\u00e1ba esnek a karuszelekkel -, m\u00e9gis mivel mindenhol ott vannak, nem maradhatnak ki a webdesignb\u00f3l sem. Haszn\u00e1lhat\u00f3s\u00e1guk j\u00f3r\u00e9szt att\u00f3l f\u00fcgg, hogy milyen weboldalon alkalmazz\u00e1k, mire \u00e9s hogyan pr\u00f3b\u00e1lj\u00e1k meg alkalmazni \u0151ket. Fontos, hogy els\u0151sorban desktop fel\u00fcleteken lehet l\u00e9tjogosults\u00e1guk a vide\u00f3knak. K\u00fcl\u00f6n\u00f6sen, hogy \u00f6sszetett inform\u00e1ci\u00f3kat viszonylag k\u00f6nnyen \u00e9s gyorsan \u00e1t lehet vel\u00fck adni<\/a>.<\/p>\n

Brutalizmus<\/h3>\n

Hab\u00e1r a brutalizmus egyel\u0151re m\u00e9g alapvet\u0151en a kreat\u00edv emberek j\u00e1t\u00e9kszere a weben, egyre t\u00f6bb p\u00e9ld\u00e1t tal\u00e1lunk arra, hogy bet\u00f6r a mainstreambe. Ilyen p\u00e9ld\u00e1ul a Balenciaga web\u00e1ruh\u00e1za, mely mer\u00e9szen belev\u00e1gott a haszn\u00e1lat\u00e1ba. A Nielsen Norman is elemezte a brutalizmust<\/a> – mik\u00f6zben elv\u00e1lasztotta az aintidesignt\u00f3l -, valamint megtette aj\u00e1nl\u00e1sait a haszn\u00e1lat\u00e1ra vonatkoz\u00f3an.<\/p>\n

\"\"<\/p>\n

Egyel\u0151re a legf\u0151bb indok a haszn\u00e1lat\u00e1ra az, hogy eredeti, hiszen m\u00e9g kevesen v\u00e1gtak bele, \u00edgy felkelti a figyelmet. Pedig olyan el\u0151nyei is vannak, mint a gyorsabb bet\u00f6lt\u0151d\u00e9s, az egyszer\u0171bb navig\u00e1ci\u00f3 \u00e9s a kevesebb zavar\u00f3 t\u00e9nyez\u0151. Nyilv\u00e1nval\u00f3an nem mindenki \u00e1ltal alkalmazhat\u00f3 ir\u00e1nyzat, ennek ellen\u00e9re egyre t\u00f6bbsz\u00f6r fogsz tal\u00e1lkozni vele 2018-ban. Els\u0151sorban olyan weboldalak r\u00e9sz\u00e9r\u0151l, akik a fiatalokat c\u00e9lozz\u00e1k.
\n