{"id":8950,"date":"2021-04-08T18:46:41","date_gmt":"2021-04-08T16:46:41","guid":{"rendered":"http:\/\/blog.webshark.hu\/?p=8950"},"modified":"2021-04-08T18:46:42","modified_gmt":"2021-04-08T16:46:42","slug":"weboldaltervezes-gondolkodas","status":"publish","type":"post","link":"https:\/\/blog.webshark.hu\/2021\/04\/08\/weboldaltervezes-gondolkodas\/","title":{"rendered":"Mi\u00e9rt fontos el\u0151re gondolkodni, amikor a weboldalad tervezed?"},"content":{"rendered":"\n

Az, hogy egy weboldal k\u00f6zepes vagy nagyszer\u0171 lesz-e \u00e1ltal\u00e1ban m\u00e9g azel\u0151tt eld\u0151l, hogy a vizu\u00e1lis design megrajzol\u00e1sa elkezd\u0151dne. Ha nem gondolkodunk el\u0151re, csak akkor szembes\u00fcl\u00fcnk a probl\u00e9m\u00e1kkal, ha m\u00e1r majdnem k\u00e9sz a weboldal.<\/strong><\/p>\n\n\n\n\n\n\n\n

Az alapos \u00e1tgondolts\u00e1g n\u00e9lk\u00fcl k\u00e9sz\u00fcl\u0151 weboldalak elk\u00e9sz\u00edt\u00e9s\u00e9nek utols\u00f3 f\u00e1zisaiban fog csak kider\u00fclni, hogy k\u00e9nyszerp\u00e1ly\u00e1n mozognak, beleragadtak egy rossz megold\u00e1sba, amib\u0151l m\u00e1r neh\u00e9z kisz\u00e1llni, hiszen dobni kellene az eg\u00e9sz addig elk\u00e9sz\u00fclt munk\u00e1t. \u00cdgy maradnak a m\u00e9g elfogadhat\u00f3 m\u00e9rt\u00e9k\u0171 korrekci\u00f3k, jav\u00edtgat\u00e1sok, melyek eredm\u00e9nyek\u00e9nt lesz egy olyan oldal, ami komoly kompromisszumot jelent az elv\u00e1r\u00e1sokhoz k\u00e9pest. Ennek persze hat\u00e1sa lesz az oldal hat\u00e9konys\u00e1g\u00e1ra \u00e9s teljes\u00edtm\u00e9ny\u00e9re, nem fogja azt az eredm\u00e9nyt hozni, amit elk\u00e9pzelt\u00fcnk. <\/p>\n\n\n\n

Mindez a kell\u0151 \u00e1tgondolts\u00e1g hi\u00e1nya miatt t\u00f6rt\u00e9nik. Ami k\u00f6nnyen elker\u00fclhet\u0151, ha hajland\u00f3ak vagyunk m\u00e9g azt megel\u0151z\u0151en tervezni, hogy grafikus designer elkezden\u00e9 \u00f6sszerakni az oldalt. De mi az, amit aj\u00e1nlatos \u00e1tgondolni m\u00e9g az indul\u00e1s el\u0151tt?<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Az egyes elemek \u00e9s funkci\u00f3k fognak-e m\u0171k\u00f6dni a k\u00fcl\u00f6nb\u00f6z\u0151 m\u00e9ret\u0171 kijelz\u0151k\u00f6n?<\/h3>\n\n\n\n

Nem v\u00e9letlen\u00fcl besz\u00e9lt\u00fcnk annyit reszponz\u00edv webdesignr\u00f3l az elm\u00falt \u00e9vtizedben. Ma m\u00e1r term\u00e9szetess\u00e9 v\u00e1lt a mobilos b\u00f6ng\u00e9sz\u00e9s, m\u00e9gis, amikor weboldalr\u00f3l van sz\u00f3, sokan azon m\u00e9ret\u0171 kijelz\u0151re \u00e1lmodj\u00e1k meg a weboldalukat, amit a leggyakrabban haszn\u00e1lnak. \u00dagy gondolj\u00e1k, hogy a t\u00f6bbi kijelz\u0151re majd csak lehet adapt\u00e1lni az elk\u00e9pzel\u00e9st. <\/p>\n\n\n\n

Pedig elk\u00e9pzelhet\u0151, hogy a meg\u00e1lmodott weboldal-elem vagy funkci\u00f3 nem fog, vagy nem \u00fagy fog m\u0171k\u00f6dni minden kijelz\u0151m\u00e9retn\u00e9l. Ez\u00e9rt miel\u0151tt egy weboldal elem vagy funkci\u00f3 mellett leragadn\u00e1nk, gondoljuk \u00e1t, hogy az fog-e m\u0171k\u00f6dni minden kijelz\u0151m\u00e9retn\u00e9l, vagy csak er\u0151s kompromisszumokkal. <\/p>\n\n\n\n

El\u00e9g itt olyan egyszer\u0171 dolgokra gondolni, mint egy f\u0151oldali slider, amin megfogalmazzuk az \u00fczeneteinket, meg\u00e1lmodjuk a k\u00e9peket, azt\u00e1n amikor elk\u00e9sz\u00fcl az oldal, kider\u00fcl, hogy ez mobilos megjelen\u00e9sn\u00e9l sehogy sem j\u00f3: a k\u00e9pek nem hat\u00e1sosak, a sz\u00f6vegek kil\u00f3gnak, a mozg\u00e1s akadozik. Ennek megold\u00e1sak\u00e9nt a mobilos verzi\u00f3ban persze elhagyhat\u00f3 a slider, de az m\u00e1r nem ugyanaz, mint amit elk\u00e9pzelt\u00fcnk, \u00e9s nem is azonos a weboldal megjelen\u00e9se k\u00e9t eszk\u00f6z\u00f6n.<\/p>\n\n\n\n

Olvashat\u00f3k lesznek a sz\u00f6vegek minden esetben?<\/h3>\n\n\n\n

Egy weboldal tervez\u00e9s\u00e9n\u00e9l az els\u0151k k\u00f6z\u00f6tt szerepel a sz\u00ednek \u00e9s a bet\u0171t\u00edpusok meghat\u00e1roz\u00e1sa. Ezeknek egyr\u00e9szt igazodniuk kell a m\u00e1rk\u00e1hoz, m\u00e1sr\u00e9szt olvashat\u00f3v\u00e1 kell tenni\u00fck a sz\u00f6vegeket. Sokan szeretn\u00e9nek egyedi megjelen\u00e9st, \u00edgy kital\u00e1lnak egy l\u00e1tv\u00e1nyos bet\u0171t\u00edpust, \u00e9s csak a megval\u00f3s\u00edt\u00e1s ut\u00e1n szembes\u00fclnek azzal, hogy mobilon, kis m\u00e9retben a leny\u0171g\u00f6z\u0151 hat\u00e1s egy\u00e1ltal\u00e1n nem m\u0171k\u00f6dik, s\u0151t szinte alig olvashat\u00f3 a sz\u00f6veg.<\/p>\n\n\n\n

Ugyanez a helyzet a sz\u00ednekn\u00e9l is, ahol a sz\u00ednkontrasztok k\u00fcl\u00f6n\u00f6sen fontosak. A h\u00e1tt\u00e9r \u00e9s a bet\u0171k k\u00f6z\u00f6tti kontrasztar\u00e1ny meghat\u00e1rozza az olvashat\u00f3s\u00e1got. Ha nem gondoljuk alaposan v\u00e9gig, hogy az elk\u00e9pzelt kontrasztar\u00e1ny mindenhol m\u0171k\u00f6dni fog-e, akkor lehet, hogy ut\u00f3lag kell beleny\u00falni a sz\u00ednekbe, \u00e9s a weboldal ak\u00e1r k\u00f6vetkezetess\u00e9g\u00e9t is elvesz\u00edtheti az itt-ott megjelen\u0151 v\u00e1ltoztat\u00e1sokkal.<\/p>\n\n\n\n

Kompatibilis lesz-e a r\u00e9gi b\u00f6ng\u00e9sz\u0151kkel?<\/h3>\n\n\n\n

Hab\u00e1r ez m\u00e1r ink\u00e1bb technikai k\u00e9rd\u00e9s, mindenk\u00e9ppen \u00e1t kell gondolni, hogy egy-egy elk\u00e9pzelt megjelen\u00e9s m\u0171k\u00f6dni fog-e minden b\u00f6ng\u00e9sz\u0151 eset\u00e9ben. Elk\u00e9pzelhet\u0151, hogy vannak olyan r\u00e9gi b\u00f6ng\u00e9sz\u0151k, ahol sz\u00e9tesik a design, \u00e9s m\u00e9g ha csak kevesen is haszn\u00e1lj\u00e1k azt a b\u00f6ng\u00e9sz\u0151t, az eredm\u00e9nyeket tekintve sz\u00e1m\u00edtani fog, hogy ezek a felhaszn\u00e1l\u00f3k nem tudnak konvert\u00e1lni a weboldalon.<\/p>\n\n\n\n

Gondolt\u00e1l a k\u00e9s\u0151bbi b\u0151v\u00edthet\u0151s\u00e9gre?<\/h3>\n\n\n\n

Sokan \u00fagy \u00e1llnak hozz\u00e1 az indul\u00f3 weboldalukhoz, hogy az elk\u00e9sz\u00fcl, \u00e9s \u00fagy t\u00f6k\u00e9letes, ahogy van, soha t\u00f6bbet nem kell hozz\u00e1ny\u00falni. A val\u00f3s\u00e1g azonban az, hogy egy weboldalon el\u00e9g hamar \u00faj elemekre, funkci\u00f3kra lehet sz\u00fcks\u00e9g. A k\u00e9rd\u00e9s, hogy egy ilyen b\u0151v\u00edt\u00e9s be volt-e tervezre, vagy hat\u00e1s\u00e1ra sz\u00e9tesik az eg\u00e9sz design, de legal\u00e1bbis kompromisszumos megold\u00e1sok sz\u00fcletnek, ahol semmi nem az igazi.<\/p>\n\n\n\n

Gondolj p\u00e9ld\u00e1ul arra, hogy van egy sz\u00f6vegekb\u0151l \u00e9s k\u00e9pekb\u0151l \u00e1ll\u00f3 weboldalad, de k\u00e9s\u0151bb r\u00e1j\u00f6ssz, hogy szeretn\u00e9l vide\u00f3kat is elhelyezni rajta, ak\u00e1r a f\u0151oldalon, ak\u00e1r h\u00e1tt\u00e9rvide\u00f3k\u00e9nt. Nem azzal lesz a gond, hogy felt\u00f6ltsd majd a vide\u00f3t, hanem azzal, hogy hogyan passzol a megl\u00e9v\u0151 oldalba, nem fesz\u00edti-e sz\u00e9t a kereteket, nem rontja-e a k\u00f6vetkezetess\u00e9get.<\/p>\n\n\n\n

Term\u00e9szetesen a j\u00f6v\u0151t neh\u00e9z megj\u00f3solni, azonban \u00e1t kell gondolni a lehet\u0151 legt\u00f6bb forgat\u00f3k\u00f6nyvet, melyek megval\u00f3sulhatnak majd egyszer. \u00c9rdemes egy designrendszerben gondolkodni, mert ahhoz igazodni lehet majd a k\u00e9s\u0151bbiekben is. Mindenesetre az biztos, hogy amit most megtervezel, v\u00e1ltozni fog n\u00e9h\u00e1ny \u00e9v m\u00falva. <\/p>\n\n\n\n

Gondolkodj!<\/h3>\n\n\n\n

\u00d6sszess\u00e9g\u00e9ben elmondhat\u00f3, hogy az a vizu\u00e1lis v\u00e1zlat, ami k\u00e9sz\u00fcl a weboldaladr\u00f3l, nem csak arr\u00f3l kellene, hogy sz\u00f3ljon, hogy milyen j\u00f3l n\u00e9z ki most, tervez\u0151asztalon, adott m\u00e9retben. Egy weboldal ugyanis egy dinamikusan v\u00e1ltoz\u00f3 fel\u00fclet, aminek el kell b\u00edrnia a v\u00e1ltoztat\u00e1sokat, minden m\u00e9retben egyform\u00e1n j\u00f3l kell m\u0171k\u00f6dnie, a funkci\u00f3knak haszn\u00e1lhat\u00f3knak kell lenni\u00fck minden eszk\u00f6z\u00f6n, hogy hozza az optim\u00e1lis eredm\u00e9nyeket. <\/p>\n\r\n