Akadnak, akik \u00fagy v\u00e9lik<\/a>, hogy a webdesign is egyre ink\u00e1bb elkezdett mer\u00edteni a web els\u0151 \u00e9veib\u0151l, ahogy a divat is visszany\u00falt mostan\u00e1ban a ’90-es \u00e9vekhez. A designerek az egyre megszokottabb\u00e1 v\u00e1l\u00f3 fot\u00f3-k\u00f6zpont\u00fa megjelen\u00e9s helyett m\u00e1shonnan pr\u00f3b\u00e1lnak inspir\u00e1ci\u00f3t mer\u00edteni. Ez azonban nem jelent retrohull\u00e1mot, mivel a sz\u00ednek, a kifinomult mint\u00e1k, a serif bet\u0171t\u00edpusok r\u00e9v\u00e9n egy \u00faj st\u00edlus alakul ki. Ann\u00e1l is ink\u00e1bb, mert k\u00f6zben a webdesign a j\u00f6v\u0151be is tekint, \u00e9s olyan \u00faj technik\u00e1kat haszn\u00e1l, mint a kifinomult anim\u00e1ci\u00f3k vagy olyan effekteket, mint a glassmorfizmus. De l\u00e1ssuk akkor a trendeket!<\/p>\n\n\n\n M\u00e1r \u00e9vekkel kor\u00e1bban is \u00edrtunk az egyoldalas weboldalak kialak\u00edt\u00e1s\u00e1r\u00f3l.<\/a> A trend az olyan egyoldalas webdesignokkal kezdett terjedni, mint amelyet a k\u00f6z\u00f6ss\u00e9gi m\u00e9dia csatorn\u00e1k k\u00edn\u00e1ltak. \u00dagy t\u0171nik azonban, hogy az egyszer\u0171s\u00e9g, amit egy egyoldalas weboldal tud k\u00edn\u00e1lni, tov\u00e1bbra is vonz\u00f3 a weboldaltulajdonosok sz\u00e1m\u00e1ra, \u00edgy egyre t\u00f6bb ilyen oldallal lehet tal\u00e1lkozni a weben.<\/p>\n\n\n\n Ezek a weboldalak lemondanak a navig\u00e1ci\u00f3s men\u00fcr\u0151l az egyszer\u0171 g\u00f6rget\u00e9salap\u00fa navig\u00e1ci\u00f3 kedv\u00e9\u00e9rt. Ugyanakkor, ahogy kor\u00e1bban is utaltunk r\u00e1, az egyoldalas weboldalak csak akkor tudnak m\u0171k\u00f6dni, ha nem pr\u00f3b\u00e1lnak meg sokat fogni, nem akarj\u00e1k t\u00e9m\u00e1k sz\u00e9les k\u00f6r\u00e9t bemutatni. Ezek a weboldalak olyanok, mint egy plak\u00e1t vagy poszter: minden inform\u00e1ci\u00f3, ami adott t\u00e9m\u00e1ban fontos, az a navig\u00e1ci\u00f3s men\u00fc \u00e9s a sok oldal zavar\u00f3 hat\u00e1sa n\u00e9lk\u00fcl jelenik meg. Ilyen lehet p\u00e9ld\u00e1ul egy portf\u00f3li\u00f3-oldal. <\/p>\n\n\n\n Vannak, akik szerint a j\u00f6v\u0151t a kisebb, \u00e9lm\u00e9ny-k\u00f6zpont\u00fa weboldalak jelentik. Jeremy Beyt, a ThreeSixtyEight t\u00e1rsalap\u00edt\u00f3ja szerint p\u00e9ld\u00e1ul egy teljesen \u00faj m\u00f3don fogjuk haszn\u00e1lni hamarosan a webet, \u00fagy, ahogy azt kor\u00e1bban sohasem: ez az alkalmaz\u00e1s-szer\u0171 \u00e9lm\u00e9ny. <\/p>\n\n\n\n Az emberek az okostelefonjaik \u00e1ltal egyre t\u00f6bb applik\u00e1ci\u00f3t haszn\u00e1lnak, melyekn\u00e9l az interakci\u00f3k, az anim\u00e1ci\u00f3k \u00e9s a dinamikus \u00e9lm\u00e9ny v\u00e1lt alapvet\u0151 jellemz\u0151v\u00e9. Logikus l\u00e9p\u00e9s, hogy ugyanez az \u00e9lm\u00e9ny jelenjen meg a weboldalakon is, egy kor\u00e1bbin\u00e1l egyedibb \u00e9lm\u00e9nyt k\u00edn\u00e1lva. <\/p>\n\n\n\n Mi is foglalkoztunk nemr\u00e9g azzal a trenddel<\/a>, hogy m\u00edg az elm\u00falt \u00e9veket a hajt\u00e1s feletti hero image-ek uralt\u00e1k, addig az ut\u00f3bbi id\u0151ben egyre ink\u00e1bb megjelennek a k\u00e9p n\u00e9lk\u00fcli weboldalak. Ennek a megold\u00e1snak t\u00f6bb el\u0151nye is van. Az egyik az, hogy k\u00f6nnyebben ir\u00e1ny\u00edthat\u00f3 a f\u00f3kusz a fontos sz\u00f6veges inform\u00e1ci\u00f3kra, a m\u00e1sik pedig, hogy a nagy k\u00e9pek n\u00e9lk\u00fcl gyorsabb\u00e1 v\u00e1lik az oldal bet\u00f6lt\u00e9se. <\/p>\n\n\n\n Mivel nincs k\u00e9p, \u00edgy j\u00f3val nagyobb hangs\u00faly helyez\u0151dik a vizu\u00e1lis design egy\u00e9b elemeire, \u00edgy a tipogr\u00e1fi\u00e1ra, a sz\u00ednekre \u00e9s a form\u00e1kra, melyekkel kommunik\u00e1lni kell a m\u00e1rka identit\u00e1s\u00e1t. Akadnak, akik szerint a fels\u0151 r\u00e9szen elhelyezett k\u00e9p hi\u00e1nya miatt rejt\u00e9lyesebb\u00e9 v\u00e1lik az oldal, mely arra \u00f6szt\u00f6nzi az embereket, hogy lejjebb g\u00f6rgessenek a weboldalon, jobban megismerve azt.<\/p>\n\n\n\n Az el\u0151bbi trendhez kapcsol\u00f3dhat a szokatlan m\u00e9retben megjelen\u0151 sz\u00f6veg, mely egyre t\u00f6bb weboldal jellemez. Egy bizonyos m\u00e9ret felett a szavak m\u00e1r nem csak egy sz\u00f6veg r\u00e9szei, hanem grafikus elemm\u00e9 v\u00e1lnak. Egy sokoldal\u00fa technik\u00e1r\u00f3l van sz\u00f3, mely minimimalista weboldalak sz\u00e1m\u00e1ra ide\u00e1lis, de sokf\u00e9le st\u00edlushoz j\u00f3l illeszkedik.<\/p>\n\n\n\n Van, akik a bet\u0171kkel val\u00f3 j\u00e1t\u00e9kot m\u00e9g tov\u00e1bb viszi, \u00e9s interakt\u00edvv\u00e1 teszi a sz\u00f6vegeik egy r\u00e9sz\u00e9t, vagyis a felhaszn\u00e1l\u00f3k az eger\u00fck seg\u00edts\u00e9g\u00e9vel tudnak j\u00e1tszani a sz\u00f6veggel. Ennek legegyszer\u0171bb m\u00f3dja egy hover-\u00e1llapot\u00fa \u00e1tv\u00e1ltoz\u00e1s, mint p\u00e9ld\u00e1ul egy gombn\u00e1l. Ezek kialak\u00edt\u00e1s\u00e1t a gyorsan terjed\u0151, \u00fagynevezett k\u00f3dol\u00e1s n\u00e9lk\u00fcli platformok egyre egyszer\u0171bb\u00e9 teszik, hiszen manu\u00e1lis k\u00f3dol\u00e1ssal az\u00e9rt meglehet\u0151sen bonyolult \u00f6sszehozni interakt\u00edv sz\u00f6veg-anim\u00e1ci\u00f3kat.<\/p>\n\n\n\n Amire az ilyen sz\u00f6vegekn\u00e9l is figyelni kell, az az olvashat\u00f3s\u00e1g, mivel lesz n\u00e9h\u00e1ny l\u00e1togat\u00f3, akiket megzavarnak a mozg\u00f3 karakterek. Itt egy p\u00e9lda r\u00e1:<\/p>\n\n\n\n Tal\u00e1n a j\u00e1rv\u00e1ny miatti kevesebb utaz\u00e1st pr\u00f3b\u00e1lj\u00e1k meg egyesek kompenz\u00e1lni, de \u00fagy t\u0171nik, egyre t\u00f6bb weboldal jelen\u00edt meg fizikailag l\u00e9tez\u0151 helyeket fot\u00f3kon, vagy aloldalaikon h\u00edvj\u00e1k fel a figyelmet v\u00e1rosokra, helyekre, ahol az alkot\u00f3ik \u00e9lnek. <\/p>\n\n\n\n A web egy olyan \u00f6n\u00e1ll\u00f3 hely, melynek gyakran nincs kapcsolata azzal, ahonnan b\u00f6ng\u00e9sz\u00fcnk. Ugyanakkor egy f\u00f6ldrajzi hely eml\u00edt\u00e9se, vagy err\u0151l k\u00e9sz\u00fclt fot\u00f3k k\u00f6zz\u00e9t\u00e9tele seg\u00edt abban, hogy a l\u00e1togat\u00f3k a weboldal tulajdonos\u00e1t elhelyezz\u00e9k valahol a fizikai t\u00e9rben, \u00edgy val\u00f3sabb kapcsolat alakul ki k\u00f6z\u00f6tt\u00fck. <\/p>\n\n\n\n Nem csak a ’90-es \u00e9vek hat a webdesignra, hanem r\u00e9gebbi korok is. Az art deco mot\u00edvumok pedig j\u00f3l passzolnak a geometrikus megjelen\u00e9sekhez, melyek az elm\u00falt \u00e9vekben egyre ink\u00e1bb elterjedtek a weben. Ezek egyre ink\u00e1bb ihletet mer\u00edtenek az art deco letisztult, \u00edves vonalaib\u00f3l, az ism\u00e9tl\u0151d\u0151 grafikai form\u00e1kb\u00f3l, melyek a m\u00falt sz\u00e1zad ’20-as \u00e9veiben az illusztr\u00e1ci\u00f3kat \u00e9s az \u00e9p\u00edt\u00e9szetet jellemezt\u00e9k.<\/p>\n\n\n\n Illusztr\u00e1ci\u00f3s trendekr\u0151l egy k\u00fcl\u00f6n bejegyz\u00e9st is lehetne \u00edrni, azonban \u00e9rdemes egy pillant\u00e1st vetni a hat\u00e1rozottabban kirajzol\u00f3d\u00f3 technik\u00e1kra. Az egyik ilyen a koll\u00e1zs, mely tapinthat\u00f3 \u00e9rz\u00e9st adnak az illusztr\u00e1ci\u00f3nak, \u00e9s amelynek seg\u00edts\u00e9g\u00e9vel \u00fagy helyezhetsz el k\u00e9peket a weboldaladon, hogy az eg\u00e9sz designt egy fot\u00f3 k\u00f6r\u00e9 szervezed.<\/p>\n\n\n\n Arra figyelni kell, hogy elt\u00e9r\u0151 form\u00e1kat, mint\u00e1kat, sz\u00edneket tegy\u00e9l a koll\u00e1zsba. Adhatsz neki monokr\u00f3m megjelen\u00e9st, alkalmazhatsz valamilyen sz\u0171r\u0151t, \u00edgy jobban beilleszthet\u0151 a designba.<\/p>\n\n\n\n A m\u00e1sik illusztr\u00e1ci\u00f3s trend az absztrakt illusztr\u00e1ci\u00f3k\u00e9, melyek olyan hat\u00e1st keltenek, mintha term\u00e9szetesek lenn\u00e9nek, emberi k\u00e9z alkotta volna \u0151ket. Az emberek ugyanis a sok vektorgrafika ut\u00e1n olyan illusztr\u00e1ci\u00f3kat l\u00e1tnak sz\u00edvesen, melyek n\u00e9mileg kifinomultabbak, emberibbek.<\/p>\n\n\n\n Az ilyen illusztr\u00e1ci\u00f3k l\u00e9trehozhat\u00f3k ceruza \u00e9s pap\u00edr alkalmaz\u00e1s\u00e1val, de persze szoftveres \u00faton is. A l\u00e9nyeg a text\u00fara \u00e9s a term\u00e9szetes szab\u00e1lytalans\u00e1gok, amit p\u00e9ld\u00e1ul v\u00edzfest\u00e9kkel, tollal, ceruz\u00e1val el\u0151 lehet \u00e1ll\u00edtani. A vonalak is puh\u00e1bbak, vastags\u00e1guk v\u00e1ltoz\u00f3, ahogy egy k\u00e9zi rajzn\u00e1l is.<\/p>\n\n\n\n Az \u00e9vek \u00f3ta oly n\u00e9pszer\u0171 sz\u00edn\u00e1tmenetek sem t\u0171nnek el, csak szemcs\u00e9zetts\u00e9g\u00fck r\u00e9v\u00e9n m\u00e1r egy kicsit m\u00e1s hat\u00e1st keltenek. Ezek \u00e1ltal az eddigi sima gradiensek text\u00far\u00e1t kapnak \u00e9s \u00edgy sokkal term\u00e9szetesebbnek n\u00e9znek ki. A szemcs\u00e9zetts\u00e9g ut\u00e1nozhatja a filmeket, a r\u00e9gi fot\u00f3kat vagy ak\u00e1r a nyomtatott m\u00e9di\u00e1t. Haszn\u00e1lhat\u00f3 a teljes weboldalon – p\u00e9ld\u00e1ul h\u00e1tt\u00e9rk\u00e9nt -, vagy ak\u00e1r csak a egyes r\u00e9szekn\u00e9l. De hogy mir\u0151l is van sz\u00f3? Itt l\u00e1that\u00f3:<\/p>\n\n\n\n A neumorfizmusr\u00f3l sz\u00f3l\u00f3 bejegyz\u00e9s\u00fcnkben m\u00e1r k\u00f6r\u00fclj\u00e1rtuk a nagyj\u00e1b\u00f3l az idei \u00e9vben elterjed\u0151 glassmorfizmus jelens\u00e9g\u00e9t<\/a> a webdesignban. \u00dagy n\u00e9z ki azonban, hogy ez nem csak egy k\u00f3sza, r\u00f6vid \u00e9let\u0171 trend, mert az el\u0151rejelz\u00e9sek szerint j\u00f6v\u0151re m\u00e9g ink\u00e1bb ki fog bontakozni. L\u00e9nyege, hogy a matt\u00fcveg-hat\u00e1s r\u00e9v\u00e9n kap 3D-\u00e9rz\u00e9st a weboldal, ha alkalmazzuk a glassmorfizmust egyes elemein\u00e9l.<\/p>\n\n\n\n Ugyanakkor a neumorfizmus visszaszorul\u00f3ban van, aminek oka az, hogy az elm\u00falt egy-k\u00e9t \u00e9vben bebizonyosodott, hogy nehezebben haszn\u00e1lhat\u00f3v\u00e1 teszi a weboldalt, mint egy minimalista megold\u00e1s. A kontraszt hi\u00e1nya sokak sz\u00e1m\u00e1ra tett haszn\u00e1lhatatlann\u00e1 oldalakat vagy alkalmaz\u00e1sokat, m\u00edg az \u00e1rny\u00e9kolt elemek nem mutatt\u00e1k egy\u00e9rtelm\u0171en, hogy mi az, ami kattinthat\u00f3 \u00e9s, mi az, ami nem. <\/p>\n\n\n\n V\u00e9g\u00fcl \u00e9rdemes megeml\u00edteni, hogy a Google 2021-es algoritmus-v\u00e1ltoztat\u00e1sai r\u00e9v\u00e9n a kor\u00e1bbiakn\u00e1l is nagyobb hangs\u00faly helyez\u0151d\u00f6tt a weboldalsebess\u00e9gre. Mint azzal mi is sokat foglalkoztunk, az „oldal\u00e9lm\u00e9ny” \u00e9s azon bel\u00fcl a webes vitals mutat\u00f3k rangsorol\u00e1si t\u00e9nyez\u0151v\u00e9 v\u00e1ltak<\/strong><\/a>, ami \u00f6sszhangban van a felhaszn\u00e1l\u00f3k sebess\u00e9gre vonatkoz\u00f3 egyre komolyabb v\u00e1rakoz\u00e1saival. Elm\u00faltak azok az id\u0151k, amikor az emberek hossz\u00fa m\u00e1sodperceket voltak hajland\u00f3ak egy-egy weboldal megjelen\u00e9s\u00e9re v\u00e1rni. R\u00e1ad\u00e1sul meg\u00fajult a Google PageSpeed Insights is 2021-ben<\/strong><\/a>, \u00edgy gyakorlatilag egy \u00faj eszk\u00f6zzel vizsg\u00e1lgathatjuk weboldalunk teljes\u00edtm\u00e9ny\u00e9t, illetve azt, hogy megfelel-e 2022 k\u00f6vetelm\u00e9nyeinek. <\/p>\n\r\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/12\/webdesign.png\")
<\/figure><\/div>\n\n\n\nEgyoldalas weboldalak<\/h3>\n\n\n\n
App-szer\u0171 \u00e9lm\u00e9ny<\/h3>\n\n\n\n
Kevesebb k\u00e9p a hajt\u00e1s felett<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/12\/hero-image-kep-nelkul.jpg\")
<\/figure><\/div>\n\n\n\nT\u00falm\u00e9retezett tipogr\u00e1fia<\/h3>\n\n\n\n
Interakt\u00edv bet\u0171k<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/12\/interaktiv-betuk.png\")
<\/a><\/figure><\/div>\n\n\n\nHelyek bemutat\u00e1sa<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/12\/egy-hely.jpg\")
<\/figure><\/div>\n\n\n\nArt deco mot\u00edvumok<\/h3>\n\n\n\n
Koll\u00e1zs \u00e9s absztrakt illusztr\u00e1ci\u00f3<\/h3>\n\n\n\n
Szemcs\u00e9s sz\u00edn\u00e1tmenetek<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/12\/szemcsezett-gradiens.png\")
<\/a><\/figure><\/div>\n\n\n\nM\u00e9g t\u00f6bb glassmorfizmus, kevesebb neumorfizmus<\/h3>\n\n\n\n
Weboldalsebess\u00e9g a f\u00f3kuszban<\/h3>\n\n\n\n