\u00d6t tipikus design hiba \u00e9s a megold\u00e1saik<\/p>\n\n\n\n
B\u00f6ng\u00e9sz\u00fcnk az interneten, vagy keres\u00fcnk valamit, \u00e9szre sem vessz\u00fck, hogy mennyire fontos amit l\u00e1tunk: avagy a vizu\u00e1lis \u00e9lm\u00e9ny \u00e9s am m\u00f6g\u00f6tte van. <\/p>\n\n\n\n
Egy-egy oldal megnyit\u00e1sakor kb 3 m\u00e1sodperc alatt eld\u0151l, hogy a l\u00e1togat\u00f3nk marad-e a honlapunkon vagy csal\u00f3dottan tov\u00e1bbl\u00e9p. Term\u00e9szetesen egyik\u00fcnk sem ezt szeretn\u00e9, hiszen a legfontosabb sz\u00e1munkra, hogy a felhaszn\u00e1l\u00f3nk el\u00e9gedetten t\u00e1vozzon az oldalunkr\u00f3l, miut\u00e1n- v\u00e9gighaladva a gondosan elk\u00e9sz\u00edtett marketing t\u00f6lcs\u00e9r\u00fcnk\u00f6n- v\u00e1s\u00e1roljon, foglaljon id\u0151pontot vagy l\u00e9pjen kapcsolatba vel\u00fcnk; att\u00f3l f\u00fcgg\u0151en, hogy mi a honlapunk c\u00e9lja.<\/p>\n\n\n\n
N\u00e9zz\u00fcnk n\u00e9h\u00e1ny tipikus hib\u00e1t, ami er\u0151sen korl\u00e1tozza a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt:<\/p>\n\n\n\n
1, Amikor nem l\u00e1tod a bet\u0171t\u0151l a sz\u00f6veget.<\/p>\n\n\n\n
Tal\u00e1n az els\u0151 \u00e9s legfontosabb- \u00e9s nem gy\u0151z\u00f6m eleget hangs\u00falyozni- az olvashat\u00f3s\u00e1g. A v\u00e1lasztott bet\u0171t\u00edpusok legyenek kellemesen olvashat\u00f3ak, ne menjen a design a funkci\u00f3 rov\u00e1s\u00e1ra. A kevesebb t\u00f6bb elv\u00e9t k\u00f6vetve, ne pakoljuk tele az oldalunkat k\u00f3dexekbe ill\u0151 cikorny\u00e1s bet\u0171kkel.T\u00f6rekedj\u00fcnk a letisztult, \u00e1tl\u00e1that\u00f3 munk\u00e1ra. \u00c9rdemes s\u00f6t\u00e9t h\u00e1tt\u00e9rre vil\u00e1gos sz\u00f6veget tenni \u00e9s ford\u00edtva, szem el\u0151tt tartva, hogy ne legyen a k\u00e9t \u00e1rnyalat t\u00fal kontrasztos. A bet\u0171m\u00e9ret eset\u00e9ben is max 3-4 m\u00e9rettel dolgozzunk weboldalank\u00e9nt, ker\u00fclj\u00fck el, hogy egy hatalmas rendetlens\u00e9g l\u00e1tszat\u00e1t kelts\u00e9k a c\u00edmsorok \u00e9s a sz\u00f6vegek.<\/p>\n\n\n\n
2, Sz\u00edneknek \u00e1ll a vil\u00e1g- vegy\u00fck le a r\u00f3zsasz\u00edn szem\u00fcveget<\/p>\n\n\n\n
Amikor arculatot tervez\u00fcnk, az els\u0151 feladatok k\u00f6z\u00f6tt van a weboldalon haszn\u00e1lt sz\u00ednek meghat\u00e1roz\u00e1sa. 4-8 sz\u00edn haszn\u00e1lata a legt\u00f6bb esetben elegend\u0151(persze mindig vannak kiv\u00e9telek, de \u00e1ltal\u00e1noss\u00e1gban ez elmondhat\u00f3). T\u00f6rekedj\u00fcnk a homog\u00e9n sz\u00ednhat\u00e1sra, ker\u00fclj\u00fck a rik\u00edt\u00f3, neon \u00e1rnyalatokat vagy tomp\u00edtsuk \u0151ket a semlegesebb hat\u00e1s \u00e9rdek\u00e9ben. Nagyon j\u00f3l tud mutatni egy \u00e9l\u00e9nkebb narancs \u00e1rnyalat egy fak\u00f3bb z\u00f6lddel. Itt is fektess\u00fcnk nagy hangs\u00falyt a m\u00e9rt\u00e9kre. <\/p>\n\n\n\n
\u00c9rdemes els\u0151dleges \u00e9s m\u00e1sodlagos sz\u00ednpalett\u00e1t is k\u00e9sz\u00edteni, miel\u0151tt nekies\u00fcnk a design \u00e9p\u00edt\u00e9snek. A k\u00fcl\u00f6nb\u00f6z\u0151 szekci\u00f3k sz\u00ednei remek\u00fcl tudj\u00e1k vezetni a l\u00e1togat\u00f3kat az \u00e1ltalunk prefer\u00e1lt tartalmak ir\u00e1ny\u00e1ba, haszn\u00e1ljuk ki ezt az \u00e9rt\u00e9kes tulajdons\u00e1gukat. <\/p>\n\n\n\n
3, Mint egy zsibv\u00e1s\u00e1r- a t\u00falzs\u00fafolt design<\/p>\n\n\n\n
Err\u0151l mindig Hermione t\u00e1sk\u00e1ja jut eszembe a Harry Potterb\u0151l, amiben eg\u00e9sz egyszer\u0171en minden volt, a tollt\u00f3l eg\u00e9szen az \u00f3ri\u00e1si s\u00e1torig. A design tervez\u00e9s sor\u00e1n gyakori hiba, hogy mindent bele akarunk tuszkolni az arculatba, ami esz\u00fcnkbe jut.<\/p>\n\n\n\n
Ha t\u00fal sok inger \u00e9ri a l\u00e1togat\u00f3t, eg\u00e9sz egyszer\u0171en elvesz\u00edti az \u00e9rdekl\u0151d\u00e9s\u00e9t. Ez nem azt jelenti, hogy az \u00fcgyfel\u00fcnk nem k\u00e9pes ezt megugrani, hanem azt, hogy t\u00fal sok ingert kap, egyszer\u0171en nem tudja feldolgozni. <\/p>\n\n\n\n
Tov\u00e1bbl\u00e9p, miel\u0151tt v\u00e9giggondolta volna. Fontos, hogy az egyes elemek k\u00f6z\u00f6tt hagyjunk el\u00e9g teret,legyen hely az inform\u00e1ci\u00f3knak. A design a k\u00e9pek, bet\u0171t\u00edpusok,<\/p>\n\n\n\n
sz\u00f6vegek \u00e9s gombok \u00f6sszess\u00e9ge, fontos, hogy megmaradjon az egyens\u00faly. Hagyjunk helyet az \u00fcgyfel\u00fcnknek, hogy be tudja fogadni, amit l\u00e1t.<\/p>\n\n\n\n
4, K\u00e9pmin\u0151s\u00e9g- ez legyen az alap <\/p>\n\n\n\n
Igen, biztosan Te is tal\u00e1lkozt\u00e1l m\u00e1r olyan weboldallal, ami egy\u00e9bk\u00e9nt rendben lett volna, de a felhaszn\u00e1lt k\u00e9p olyan pixeles volt, mint egy creeper a Minecraftban. M\u00e1sik v\u00e9glet, amikor olyan magas min\u0151s\u00e9g\u0171, de hatalmas k\u00e9peket haszn\u00e1lunk, amik hossz\u00fa m\u00e1sodpercekig t\u00f6lt\u0151dnek be, ha egy\u00e1ltal\u00e1n bet\u00f6lt\u0151dnek. Felgyorsult vil\u00e1gunkban nem tudunk v\u00e1rni, megszoktuk, hogy minden ott van azonnal,designerk\u00e9nt ehhez kell alkalmazkodnunk. A felhaszn\u00e1lt k\u00e9pek legyenek j\u00f3 min\u0151s\u00e9g\u0171ek, optimaliz\u00e1ljuk \u0151ket, amennyire lehet,<\/p>\n\n\n\n
vesztes\u00e9g n\u00e9lk\u00fcl; ne adjuk lejjebb a PNG form\u00e1tumn\u00e1l, \u00e9n szem\u00e9ly szerint azonban az igazi nagy\u00e1gy\u00fat a Webp-t prefer\u00e1lom. Gyakorlatilag vizu\u00e1lis vesztes\u00e9g n\u00e9lk\u00fcl, p\u00e1r sz\u00e1z kilob\u00e1jtosra lehet t\u00f6m\u00f6r\u00edteni egy-egy k\u00e9pet. Az olvas\u00f3d boldog lesz,<\/p>\n\n\n\n
Te pedig b\u00fcszke lehetsz magadra, mert csod\u00e1san megoldott\u00e1l egy nagy feladatot, ami \u00edgy kis helyen is elf\u00e9r.<\/p>\n\n\n\n
5. \u201cWhite space\u201d- avagy a negat\u00edv t\u00e9r<\/p>\n\n\n\n
Ez egy kicsit a kakukktoj\u00e1s kateg\u00f3ria, mert ez l\u00e9nyeg\u00e9ben a l\u00e1thatatlan elhelyez\u00e9se l\u00e1that\u00f3k\u00e9nt. A negat\u00edv t\u00e9r abban seg\u00edt nek\u00fcnk, hogy tudjon a szem\u00fcnk b\u00f6ng\u00e9sz\u00e9s k\u00f6zben egy kicsit pihenni. Seg\u00edts\u00e9g\u00e9vel sz\u00e9pen tudjuk tagolni a tartalmakat, elker\u00fclhetj\u00fck a design zs\u00fafolts\u00e1g\u00e1t. Ez a white space a tervez\u00e9s sor\u00e1n haszn\u00e1lt marg\u00f3k mellett legyen meg a k\u00e9pek \u00e9s sz\u00f6vegek k\u00f6z\u00f6tt is- egyfajta elv\u00e1laszt\u00f3k\u00e9nt, \u00edgy biztos\u00edtva a teret \u00e9s az \u00e1ttekinthet\u0151s\u00e9get.<\/p>\n\n\n\n
\u00d6sszess\u00e9g\u00e9ben elmondhat\u00f3, hogy a kevesebb t\u00f6bb, t\u00f6rekedj\u00fcnk a letisztult, minim\u00e1lra hajaz\u00f3 megold\u00e1sokra (persze itt szeretn\u00e9m elmondani, hogy az\u00e9rt mindig vannak szab\u00e1lyt er\u0151s\u00edt\u0151 kiv\u00e9telek).<\/p>\n\n\n\n
Ha ezt az 5 t\u00edpushib\u00e1t igyekszel elker\u00fclni UI\/UX design tervez\u00e9s k\u00f6zben, sokkal szebb weboldalak fognak sz\u00fcletni, \u00e9s egy sokkal boldogabb internet haszn\u00e1l\u00f3 t\u00e1rsadalmunk<\/p>\n\n\n\n
Tov\u00e1bbi inspir\u00e1ci\u00f3k\u00e9rt maradjunk kapcsolatban!<\/p>\n\n\n