A webdesignerek feladata a tervez\u00e9s sor\u00e1n tulajdonk\u00e9ppen az, hogy a lehet\u0151 legkreat\u00edvabb m\u00f3don t\u00e1vol\u00edts\u00e1k el a weboldalakr\u00f3l a whitespace-t, t\u00f6ltsenek a nagy, feh\u00e9r lapra tartalmat. Mindezt \u00fagy, hogy azt\u00e1n ne hasson az oldal sem t\u00fal zs\u00fafoltnak, sem t\u00fal \u00fcresnek. Hab\u00e1r ez a webdesign egyik \u00e1lland\u00f3 \u00e9s legfontosabb feladata, m\u00e9gis az egyik legnehezebb is.<\/p>\n\n\n\n
Sokan k\u00f6vetik el azt a hib\u00e1t, hogy t\u00falzs\u00fafoltt\u00e1, t\u00fal sz\u00edness\u00e9 teszik a weboldalt azon t\u00f6rekv\u00e9s\u00fckben, hogy a rendelkez\u00e9s\u00fckre \u00e1ll\u00f3 teret megt\u00f6lts\u00e9k. \u00c9s nem is felt\u00e9tlen\u00fcl sz\u00e1nd\u00e9kosan teszik ezt, egyszer\u0171en \u00edgy m\u0171k\u00f6dik az ember. Pedig figyelni kell arra, hogy elker\u00fcld a t\u00fals\u00e1gosan \u00f6sszetett fel\u00fcleteket, \u00e9s nagyobb \u00fcres tereket haszn\u00e1lj.<\/p>\n\n\n\n
Mi az a whitespace \u00e9s mi\u00e9rt fontos?<\/h2>\n\n\n\n
A whitespace a webdesignban a negat\u00edv vagy \u00fcres teret jelenti<\/strong> a design egyes elemei k\u00f6z\u00f6tt, vagyis mag\u00e1nak a tartalomnak az ellent\u00e9te: fel nem haszn\u00e1lt ter\u00fclet egy weboldalon. Negat\u00edv t\u00e9r tal\u00e1lhat\u00f3 minden gomb, k\u00e9p link \u00e9s sz\u00f6veg k\u00f6r\u00fcl. Semmik\u00e9ppen nem vonja mag\u00e1ra a felhaszn\u00e1l\u00f3 figyelm\u00e9t. Seg\u00edts\u00e9g\u00e9vel a tartalom l\u00e9legzethez jut, strukt\u00far\u00e1t \u00e9s jelent\u00e9st ad a weboldalnak. Vezeti a felhaszn\u00e1l\u00f3t an\u00e9lk\u00fcl, hogy felh\u00edvn\u00e1 mag\u00e1ra a figyelm\u00e9t.<\/p>\n\n\n\n Hib\u00e1s megk\u00f6zel\u00edt\u00e9s, amikor \u00fagy tekint\u00fcnk a whitespace-re, mint arra a t\u00e9rre, ami a megtervezett elemek k\u00f6z\u00f6tt \u00fcresen marad. Az\u00e9rt hib\u00e1s, mert az \u00fcres t\u00e9r is egy designelem<\/strong>, amit gondosan meg kell tervezni. Gyakori hiba, hogy a whitespace-szel nem foglalkoznak egy weboldal tervez\u00e9se sor\u00e1n, vagy pedig ki akarj\u00e1k t\u00f6lteni az \u00fcresen maradt teret.<\/p>\n\n\n\n A whitespace az egyik legt\u00f6bb vit\u00e1t kiv\u00e1lt\u00f3 vonatkoz\u00e1sa a webdesignnak, hiszen a designerek szeretik haszn\u00e1lni, m\u00edg a weboldaltulajdonosok megt\u00f6lten\u00e9k tartalommal. Ut\u00f3bbiak szerint elpazarolt fel\u00fclet, m\u00edg a designerek tudj\u00e1k, hogy \u00e1ltala jav\u00edthat\u00f3 a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny.<\/p>\n\n\n\n \u00dagy \u00e9rdemes gondolni r\u00e1, mint a habarcsra a t\u00e9gl\u00e1k, vagy a ragaszt\u00f3anyagra az \u00fcvegmozaik darabk\u00e1i k\u00f6z\u00f6tt. Hab\u00e1r a szem\u00fcnk a t\u00e9gl\u00e1kat veszi \u00e9szre, illetve azokat tekinti l\u00e9nyegesnek, az eg\u00e9szet a k\u00f6t\u0151anyag, vagyis a whitespace fogja \u00f6ssze, \u00e9s seg\u00edt form\u00e1ba \u00f6nteni a designt<\/strong>. Ha a mozaik csak sz\u00ednes elemekb\u0151l \u00e1ll, t\u00e9rk\u00f6z\u00f6k n\u00e9lk\u00fcl, akkor a mozaik sokkal ink\u00e1bb valami sz\u00ednes z\u0171rzavarnak t\u0171nik, nem pedig valamit \u00e1br\u00e1zol\u00f3 k\u00e9pnek.<\/p>\n\n\n\n A haszn\u00e1lat\u00e1t tekintve a fel\u00fcleten a whitespace-t k\u00e9t t\u00edpusba tudjuk sorolni:<\/p>\n\n\n\n Amikor teh\u00e1t a whitespace megtervez\u00e9s\u00e9r\u0151l van sz\u00f3, akkor akt\u00edv whitespace-t \u00e9rt\u00fcnk alatt, \u00e9s ebbe kell munk\u00e1t fektetni, mik\u00f6zben az\u00e9rt nem szabad elfeledkezni a passz\u00edv negat\u00edv t\u00e9rr\u0151l, \u00e9s hogy az mik\u00e9nt befoly\u00e1solja a designt.<\/p>\n\n\n\n Egy tov\u00e1bbi feloszt\u00e1sa a whitespace-nek a tartalomhoz viszony\u00edtott m\u00e9ret \u00e9s s\u0171r\u0171s\u00e9g szerinti csoportos\u00edt\u00e1s:<\/p>\n\n\n\n A negat\u00edv t\u00e9rnek k\u00e9t szintje van: mikr\u00f3 \u00e9s makr\u00f3<\/strong> szint. A mikr\u00f3 negat\u00edv t\u00e9r az olyan kisebb weboldalelemek k\u00f6z\u00f6tt tal\u00e1lhat\u00f3, mint a sorok, a szavak, a bet\u0171k, a bekezd\u00e9sek. De mikr\u00f3 t\u00e9rr\u0151l besz\u00e9l\u00fcnk a r\u00e1csba rendezett k\u00e9pek k\u00f6z\u00f6tti t\u00e9r vagy a men\u00fc linkjei k\u00f6z\u00f6tt elhelyezked\u0151 t\u00e9r eset\u00e9ben is.<\/p>\n\n\n\n A mikro whitespace<\/strong>-nek legink\u00e1bb az olvashat\u00f3s\u00e1gra van jelent\u0151s hat\u00e1sa. Teh\u00e1t egy bekezd\u00e9s k\u00f6r\u00fcl elhelyezett t\u00e9r befoly\u00e1solja azt, hogy milyen gyorsan k\u00e9pes a felhaszn\u00e1l\u00f3 befogadni a sz\u00f6veget. Ha a megszokottn\u00e1l kisebb a t\u00e9r, akkor az emberek lassabban tudj\u00e1k elolvasni. <\/p>\n\n\n\n Ezzel szemben a makr\u00f3 negat\u00edv t\u00e9r<\/strong> a nagyobb m\u00e9ret\u0171 blokkok, elemek k\u00f6r\u00fcl tal\u00e1lhat\u00f3. Ez jellemz\u0151en nagyobb t\u00e9r a nagyobb r\u00e9szek k\u00f6z\u00f6tt. Ilyen makr\u00f3 t\u00e9r tal\u00e1lhat\u00f3 p\u00e9ld\u00e1ul a weboldalak tartalmi r\u00e9sz\u00e9nek jobb \u00e9s bal oldal\u00e1n, vagy a nagyobb tartalmi blokkok k\u00f6z\u00f6tt. A makr\u00f3 whitespace t\u00e1rol\u00f3k\u00e9nt funkcion\u00e1l, \u00e9s k\u00f6nnyebb \u00e9szrevenni, mint a mikr\u00f3t. <\/p>\n\n\n\n Hab\u00e1r whitspace-nek h\u00edvjuk, azaz a nev\u00e9ben benne van a white, vagyis a feh\u00e9r, m\u00e9gsem arr\u00f3l van sz\u00f3, hogy minden esetben feh\u00e9rnek kellene lennie. Arra nincsen semmif\u00e9le szab\u00e1ly a webdesignban, hogy az egyes weboldalelemek k\u00f6z\u00f6tti t\u00e9rnek milyen sz\u00edn\u0171nek kell lennie. Adott esetben teh\u00e1t a whitespace lehet fekete, sz\u00fcrke, sz\u00ednes vagy ak\u00e1r mint\u00e1s.<\/p>\n\n\n\n S\u0151t, a most divatos egyoldalas honlapok eset\u00e9n a weblapon bel\u00fcl ak\u00e1r v\u00e1ltani is lehet sz\u00ednt, vagyis v\u00e1ltakozhat az \u00fcres t\u00e9r sz\u00edne annak \u00e9rdek\u00e9ben, hogy hat\u00e9konyan elk\u00fcl\u00f6n\u00edts\u00fcnk r\u00e9szeket a hosszan h\u00f6mp\u00f6lyg\u0151 tartalmon bel\u00fcl. De hogy a helyzetet tov\u00e1bb bonyol\u00edtsuk, whitspace-r\u0151l besz\u00e9lhet\u00fcnk akkor is, ha minta, text\u00fara, s\u0151t egy h\u00e1tt\u00e9rk\u00e9p van az egy egyes weboldalelemek m\u00f6g\u00f6tt.<\/p>\n\n\n\n Miut\u00e1n m\u00e1r l\u00e1tjuk a fontoss\u00e1g\u00e1t, \u00e9rdemes azzal is foglalkozni, hogy milyen funkci\u00f3i vannak a webdesignban. Ha j\u00f3l haszn\u00e1ljuk, akkor teljesen megv\u00e1ltoztathat egy designt, \u00e9s sokkal haszn\u00e1lhat\u00f3bb\u00e1 teszi. A weboldalakon arra van sz\u00fcks\u00e9g, hogy olyan fel\u00fcletet alak\u00edtsunk ki, melyet k\u00f6nnyen befogad a felhaszn\u00e1l\u00f3k tekintete, \u00e9s nem riasztja el a l\u00e1togat\u00f3kat. <\/p>\n\n\n\n A rendelkez\u00e9sre \u00e1ll\u00f3 t\u00e9r megfelel\u0151 feloszt\u00e1sa rendk\u00edv\u00fcl fontos dolog a webdesignban. Amikor egy weboldalon t\u00fal sok az inform\u00e1ci\u00f3, de t\u00fal kev\u00e9s a t\u00e9r, akkor nagyon neh\u00e9z a felhaszn\u00e1l\u00f3knak a l\u00e9nyeget megtal\u00e1lniuk. A negat\u00edv t\u00e9r id\u0151t ad a felhaszn\u00e1l\u00f3nak arra, hogy feldolgozza azt az inform\u00e1ci\u00f3t, amit a weboldalon tal\u00e1l.<\/p>\n\n\n\n Ahogy egy sz\u00f6veg eset\u00e9ben is haszn\u00e1ljuk az egyes bekezd\u00e9sek elk\u00fcl\u00f6n\u00edt\u00e9s\u00e9re, hogy azok k\u00f6nnyebben befogadhat\u00f3k legyenek, \u00fagy minden m\u00e1s designelem elrendez\u00e9s\u00e9re is megfelel\u0151 eszk\u00f6z.<\/p>\n\n\n\n Fontos azonban, hogy mindig k\u00f6vetkezetesen haszn\u00e1ljuk<\/strong>, vagyis mindig azonos m\u00e9ret\u0171 legyen a marg\u00f3kn\u00e1l, az egyes szakaszokn\u00e1l, a sz\u00f6vegek mellett \u00e9s a grafikai elemekn\u00e9l. A whitespeace nagy el\u0151nye, hogy k\u00f6nnyen lehet igaz\u00edtani a m\u00e9ret\u00e9n, ugyanakkor eg\u00e9szen komoly hat\u00e1ssal lesz egy-egy v\u00e1ltoztat\u00e1s a designra. Lehet b\u00e1tran k\u00eds\u00e9rletezni!<\/p>\n\n\n\n Ennek meg\u00e9rt\u00e9s\u00e9hez gondolj a Google keres\u0151j\u00e9nek weboldal\u00e1ra! Hab\u00e1r a szem\u00fcnk hagyom\u00e1nyosan a weboldalak tetej\u00e9t p\u00e1szt\u00e1zza el\u0151sz\u00f6r, m\u00e9gis nagyon gyorsan megtal\u00e1ljuk a k\u00f6z\u00e9pen l\u00e9v\u0151 Google log\u00f3t. Mi\u00e9rt? A k\u00f6r\u00fcl\u00f6tte l\u00e9v\u0151 whitespace miatt.<\/p>\n\n\n\n A Google oldal\u00e1n rendk\u00edv\u00fcl nagy \u00fcres t\u00e9r tal\u00e1lhat\u00f3 a fontos r\u00e9sznek sz\u00e1m\u00edt\u00f3 log\u00f3 \u00e9s keres\u0151mez\u0151 felett. Ez vezeti a tekintetet a sz\u00ednes feliratig. Teh\u00e1t, ha egy nagyobb, \u00fcres t\u00e9rbe helyezz\u00fck a fontosnak sz\u00e1m\u00edt\u00f3 tartalmunkat, akkor arra a whitespace seg\u00edts\u00e9g\u00e9vel k\u00f6nnyen r\u00e1 tudjuk ir\u00e1ny\u00edtani a felhaszn\u00e1l\u00f3k figyelm\u00e9t<\/strong>, mintegy kiemelve azt.<\/p>\n\n\n\n Ezzel tulajdonk\u00e9ppen ki is alak\u00edtottunk m\u00e1r egy egyszer\u0171 vizu\u00e1lis hierarchi\u00e1t, mely a whitespace feladata. Hiszen seg\u00edts\u00e9g\u00e9vel alak\u00edthatjuk \u00e9s elv\u00e1laszthatjuk a fel\u00fclet elemeit, \u00edgy hozva l\u00e9tre hat\u00e9konyabb weboldal designt.<\/p>\n\n\n\n Azokat az elemeket, melyek egym\u00e1shoz k\u00f6zelebb helyezkednek el, hasonl\u00f3nak \u00e9s egy csoportba tartoz\u00f3nak, \u00e9s hasonl\u00f3nak \u00e9rz\u00e9keli az emberi szem. A legegyszer\u0171bb p\u00e9lda erre egy bekezd\u00e9s, mely egy inform\u00e1ci\u00f3egys\u00e9get testes\u00edt meg, \u00edgy vizu\u00e1lisan is \u00f6sszetartoz\u00f3v\u00e1 alak\u00edtjuk a benne szerepl\u0151 szavakat \u00e9s bet\u0171ket.<\/p>\n\n\n\n K\u00f6sz\u00f6nhet\u0151en a whitespace kor\u00e1bban m\u00e1r eml\u00edtett tulajdons\u00e1g\u00e1nak, miszerint k\u00f6nnyen tudjuk vezetni a seg\u00edts\u00e9g\u00e9vel a felhaszn\u00e1l\u00f3 tekintet\u00e9t, abban is k\u00f6zrem\u0171k\u00f6dik, hogy r\u00e1ir\u00e1ny\u00edtsuk a figyelm\u00e9t az \u00e1ltalunk fontosnak tartott dolgokra. Arra \u00e9p\u00edtve, hogy a weboldalelemek elrendez\u00e9se eset\u00e9n k\u00f6vetkezetesen, szinte ritmusosan alkalmazzuk, amikor megt\u00f6rj\u00fck a mint\u00e1t<\/strong>, az egyb\u0151l felkelti a felhaszn\u00e1l\u00f3 figyelm\u00e9t.<\/p>\n\n\n\n Egy j\u00f3 p\u00e9lda erre tal\u00e1n az, amikor egy egybef\u00fcgg\u0151 sz\u00f6vegben egyetlen sz\u00f3n\u00e1l a bet\u0171k k\u00f6z\u00f6tt nagyobb t\u00e9rk\u00f6zt hagyunk, \u00edgy egyb\u0151l kiemelkedik a sz\u00f6vegb\u0151l az adott sz\u00f3. Ugyan\u00edgy az egyes kiemelend\u0151 weboldal-elemekn\u00e9l is \u00e9rdemes pr\u00f3b\u00e1lkozni az \u00fcres t\u00e9r n\u00f6vel\u00e9s\u00e9vel.<\/p>\n\n\n\n Egy j\u00f3 design k\u00e9pes vezetni a felhaszn\u00e1l\u00f3 tekintet\u00e9t a tartalomban, \u00e9s r\u00e1ir\u00e1ny\u00edtani a figyelmet a legfontosabb \u00fczenetre. Mivel k\u00f6nny\u0171 t\u00fal-tervezni egy weboldalt, fontos, hogy elker\u00fcld a sz\u00fcks\u00e9gtelen zs\u00fafolts\u00e1got, mert \u00edgy elt\u0171nnek a kiemelend\u0151 elemek a zajban. A letisztults\u00e1g nem unalmat jelent, hanem a fontos dolgok kihangs\u00falyoz\u00e1s\u00e1nak lehet\u0151s\u00e9g\u00e9t. <\/p>\n\n\n\n A whitespace seg\u00edts\u00e9g\u00e9vel teheted felhaszn\u00e1l\u00f3bar\u00e1tabb\u00e1 a weboldalad. \u00c9s persze tudjuk, hogy a j\u00f3 haszn\u00e1lhat\u00f3s\u00e1g elengedhetetlen egy j\u00f3l m\u0171k\u00f6d\u0151 weboldalhoz. Ehhez tudnod kell, hogy kik a felhaszn\u00e1l\u00f3id, mit n\u00e9znek meg a weboldaladon, milyen feladatot akarnak v\u00e9grehajtani rajta? Ezekre a k\u00e9rd\u00e9sekre kell v\u00e1laszt adnod m\u00e9g azel\u0151tt, hogy belev\u00e1gn\u00e1l a desginba. Ha m\u00e1r megvan a c\u00e9l, akkor a whitespace-t egy hat\u00e9kony eszk\u00f6zk\u00e9nt haszn\u00e1lhatod arra, hogy az embereket ir\u00e1ny\u00edtsd a weboldalalon, \u00e9s seg\u00edts nekik el\u00e9rni a c\u00e9ljaikat.<\/p>\n\n\n\n A weboldalad j\u00f3 haszn\u00e1lhat\u00f3s\u00e1g\u00e1nak kulcsa az olvashat\u00f3s\u00e1g. Ehhez persze sok t\u00e9nyez\u0151 hozz\u00e1j\u00e1rul: a bet\u0171t\u00edpus, m\u00e9ret, sz\u00edn, bekezd\u00e9sek m\u00e9rete, sorok hossza, stb. K\u00f6zt\u00fck van azonban a negat\u00edv t\u00e9r is, melynek seg\u00edts\u00e9g\u00e9vel elrendezheted az egyes sz\u00f6vegelemeket a bet\u0171kt\u0151l a bekezd\u00e9sekig.<\/p>\n\n\n\n A k\u00e9t legfontosabb dolog a k\u00f6nny\u0171 olvashat\u00f3s\u00e1g szempontj\u00e1b\u00f3l a bekezd\u00e9s marg\u00f3inak kialak\u00edt\u00e1sa \u00e9s a sorok k\u00f6z\u00f6tti t\u00e1vols\u00e1g. Ut\u00f3bbi a teljes sz\u00f6veg olvashat\u00f3s\u00e1g\u00e1nak nagym\u00e9rt\u00e9kben jav\u00edthat.<\/p>\n\n\n\n Kutat\u00e1sok szerint a whitespace megfelel\u0151 haszn\u00e1lata a sorok \u00e9s a bekezd\u00e9sek k\u00f6z\u00f6tt, valamint a jobb \u00e9s a bal marg\u00f3 eset\u00e9ben 20 sz\u00e1zal\u00e9kkal jav\u00edtja a meg\u00e9rt\u00e9s\u00e9t egy sz\u00f6veges tartalomnak.<\/p>\n\n\n\n Fontos teh\u00e1t, hogy hagyd a tartalmad l\u00e9legezni! Tudatosan hat\u00e1rozd meg a sorok \u00e9s a bet\u0171k k\u00f6z\u00f6tti t\u00e1vols\u00e1gokat, hogy az embereknek min\u00e9l k\u00f6nnyebb legyen olvasni a sz\u00f6vegedet.<\/p>\n\n\n\n A web egyre bonyolultabb\u00e1 v\u00e1lik, egyre t\u00f6bb rajta az inform\u00e1ci\u00f3, mely terheli az embereket. N\u00e9ha t\u00fal sok lesz nekik. Mi\u00e9rt ne adn\u00e1l nekik egy l\u00e9legzetv\u00e9telnyi sz\u00fcnetet azzal, hogy a weboldalad egyszer\u0171v\u00e9, \u00e9s csak a fontos dolgokat emeled ki rajta a whitespace seg\u00edts\u00e9g\u00e9vel? Ne zavard \u00f6ssze a felhaszn\u00e1l\u00f3kat, csak azt mutasd nekik, ami fontos lehet sz\u00e1mukra! K\u00f6r\u00fcl\u00f6tt\u00fck pedig hagyd meg a teret.<\/p>\n\n\n\n A zs\u00fafolt dolgok f\u00e1rasztj\u00e1k az embereket, \u00e9s tal\u00e1n nem is tudatosan, de ker\u00fclni fogj\u00e1k az oldalad, ha az t\u00falzs\u00fafolt. A nagy whitespace alkalmaz\u00e1s\u00e1ra az egyik legjobb p\u00e9lda a Google f\u0151oldala. Amikor elk\u00e9sz\u00fclt, azon kev\u00e9s weboldal k\u00f6z\u00e9 tartozott, mely sok whitespace-t haszn\u00e1lt. Ennek oka pedig az volt, hogy a tesztek sor\u00e1n bebizonyosodott: jobban kedvelik ezt a megold\u00e1st a felhaszn\u00e1l\u00f3k. Mindenesetre a tesztek sor\u00e1n az oldal legalj\u00e1ra elhelyezt\u00e9k az adatv\u00e9delmi linket a tervez\u0151k, hogy a felhaszn\u00e1l\u00f3k meg\u00e9rts\u00e9k: ott v\u00e9ge is az oldalnak.<\/p>\n\n\n\n Egy egyszer\u0171 webdesign sok-sok whitespace-szel nem csak haszn\u00e1lhat\u00f3bb\u00e1 teszi a weboldalad, hanem vonz\u00f3bb\u00e1 is. Azok a weboldalak, melyek sok negat\u00edv teret haszn\u00e1lnak \u00e1ltal\u00e1ban profibbnak \u00e9s megb\u00edzhat\u00f3bbnak n\u00e9znek ki. K\u00fcl\u00f6n\u00f6sen, ha web\u00e1ruh\u00e1zakr\u00f3l van sz\u00f3, fontos, hogy a term\u00e9kek k\u00f6r\u00fcl legyen egy plusz t\u00e9r, melyek \u00e1ltal m\u00e9g k\u00fcl\u00f6nlegesebbnek t\u0171nnek.<\/p>\n\n\n\n A whitespace sok weboldalnak a k\u00f6zponti elem\u00e9v\u00e9 v\u00e1lik, mivel azok egy bizonyos hangulatot, \u00e9rz\u00e9st akarnak kifejezni. A sok whitespace-r\u0151l \u00e1ltal\u00e1ban a luxusra \u00e9s a kifinomults\u00e1gra asszoci\u00e1lunk.<\/p>\n\n\n\n V\u00e9g\u00fcl pedig a negat\u00edv t\u00e9r arra is k\u00e9pes, hogy egy \u00e9rzelmi elemet vigyen bele a weboldaladhoz. Ezt \u00fagy \u00e9ri el, hogy szabadon sz\u00e1rnyal\u00f3v\u00e1 teszi a k\u00e9pzeletet, melynek r\u00e9v\u00e9n azt\u00e1n er\u0151sebb lesz a weboldal tartalm\u00e1ra adott \u00e9rzelmi v\u00e1laszt. Ha egy k\u00e9p k\u00f6r\u00fcl nagy a negat\u00edv t\u00e9r, akkor k\u00f6nnyebben elkalandozik vele kapcsolatban a k\u00e9pzelet.<\/p>\n\n\n\n Ebb\u0151l a szempontb\u00f3l lesz fontos az is, hogy a whitespace-nek nem musz\u00e1j feh\u00e9rnek lennie: lehet b\u00e1rmilyen sz\u00edne, form\u00e1ja, mint\u00e1ja. Ak\u00e1r egy h\u00e1tt\u00e9rk\u00e9pnek, ak\u00e1r a h\u00e1tt\u00e9rsz\u00edneknek is jelent\u0151s \u00e9rzelmi hat\u00e1sa lehet a felhaszn\u00e1l\u00f3ra.<\/p>\n\n\n\n Emellett alkalmazhatsz m\u00e9g k\u00fcl\u00f6nf\u00e9le effekteket, p\u00e9ld\u00e1ul a parallax g\u00f6rget\u00e9st, hogy a whitespace interakt\u00edvv\u00e1 \u00e9s sz\u00f3rakoztat\u00f3bb\u00e1 v\u00e1ljon. Vagy egyszer\u0171en csak haszn\u00e1lhatsz sz\u00edn\u00e1tmeneteket, mint\u00e1kat. Az a t\u00f3nus, amit a whitespace-szel meghat\u00e1rozol, hat\u00e1ssal lesz arra, hogy az emberek mik\u00e9nt fogadj\u00e1k be a tartalmaidat.<\/p>\n\n\n\n Aki eddig nem ismerte a whitespace-t, most rem\u00e9lhet\u0151leg m\u00e1sk\u00e9nt l\u00e1tja m\u00e1r szerep\u00e9t. Egy olyan elemk\u00e9nt, melynek funkci\u00f3ja van a webdesingban. \u00c9s b\u00e1tran tekintse a k\u00eds\u00e9rletez\u00e9s terep\u00e9nek a t\u00e9rrel val\u00f3 j\u00e1t\u00e9kot.<\/p>\n\n\n\n A whitespace kialak\u00edt\u00e1sa mindig att\u00f3l f\u00fcgg, hogy hol alkalmazzuk. Ez azt is jelenti egyben, hogy nem igaz\u00e1n vannak \u00f6k\u00f6lszab\u00e1lyok arra vonatkoz\u00f3an, hogy mikor, hol mennyi whitespace-t kell vagy \u00e9rdemes haszn\u00e1lni egy weboldalon. Ugyanakkor n\u00e9h\u00e1ny tan\u00e1csot \u00e9rdemes megfontolni a whitespace haszn\u00e1lata sor\u00e1n:<\/p>\n\n\n\n Ez Paul Boag<\/a> designer javaslata, aki szerint minden elem, amit a weboldaladhoz adsz, egy pontot \u00e9r. Ha azonban van olyan elem a weboldaladon, mely fontosabb a t\u00f6bbin\u00e9l, akkor ahhoz rendelj tov\u00e1bbi pontokat, hiszen kiemelked\u0151v\u00e9 akarod tenni. Ha ilyen pontrendszert alkalmazva tervezed a weboldalad, akkor mindj\u00e1rt vil\u00e1gos lesz, hogy nem fogsz tudni minden elmondani rajta, amit csak szeretn\u00e9l<\/strong>.<\/p>\n\n\n\n Hogy ez pontosan mik\u00e9nt n\u00e9z ki a gyakorlatban? A UX Planet<\/a> egy \u00e1br\u00e1n \u00edgy szeml\u00e9lteti:<\/p>\n\n\n\n Ha ezen a 14 ponton k\u00edv\u00fcl tov\u00e1bbiakat kellene hozz\u00e1adni, akkor m\u00e1s elemeket el kell venni az oldalb\u00f3l. A pontrendszer alkalmaz\u00e1sa r\u00e9v\u00e9n teh\u00e1t megval\u00f3s\u00edthat\u00f3, hogy ne zs\u00fafolj t\u00fal sok dolgot egyetlen weboldalra.<\/p>\n\n\n\n Miel\u0151tt neki\u00e1lln\u00e1l a weboldalad tervez\u00e9s\u00e9nek, \u00e9rdemes l\u00e9trehoznod egy interface-list\u00e1t. Ez egy olyan gy\u0171jtem\u00e9ny, melynek darabjaib\u00f3l \u00e1ll \u00f6sssze a weboldalad fel\u00fclete. Ez lista nem csak megteremti az alapj\u00e1t a designnak \u00e9s a k\u00f6vetkezetess\u00e9gnek, hanem a tartalom is l\u00e1that\u00f3v\u00e1 v\u00e1lik \u00e1ltala.<\/p>\n\n\n\n A k\u00f6vetkez\u0151 l\u00e9p\u00e9s a tartalom dr\u00f3tv\u00e1z\u00e1nak kialak\u00edt\u00e1sa, hogy felm\u00e9rhesd, mekkora t\u00e9rre van sz\u00fcks\u00e9ged, mik\u00f6zben megtartod az olvashat\u00f3s\u00e1got. Az olvashat\u00f3s\u00e9gba beletartozik az egyes bet\u0171k \u00e9s szavak j\u00f3 olvashat\u00f3s\u00e1ga, valamint a tartalom k\u00f6nny\u0171 \u00e1tfuthat\u00f3s\u00e1ga.<\/p>\n\n\n\n K\u00e9t fontos dolog, amit a sz\u00f6veg optimaliz\u00e1l\u00e1sa sor\u00e1n figyelembe kell venni: a bekezd\u00e9sek k\u00f6z\u00f6tti t\u00e1vols\u00e1g \u00e9s a sork\u00f6z\u00f6k<\/strong>. A sork\u00f6z\u00f6k n\u00f6vel\u00e9s\u00e9vel jelent\u0151s m\u00e9rt\u00e9kben tudsz jav\u00edtani a keny\u00e9rsz\u00f6veg olvashat\u00f3s\u00e1g\u00e1n. \u00c1ltal\u00e1ban min\u00e9l nagyobb a sorok k\u00f6z\u00f6tt a t\u00e1vols\u00e1g, ann\u00e1l jobb a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny olvas\u00e1s k\u00f6zben. Nyilv\u00e1n t\u00falz\u00e1sokba nem kell esni, mert t\u00fal nagy t\u00e1vols\u00e1gok eset\u00e9n megszakad a sz\u00f6veg egys\u00e9ge. A megfelel\u0151 egyens\u00falyt kell teh\u00e1t megtal\u00e1lni. L\u00e1tod a k\u00fcl\u00f6nbs\u00e9get?<\/p>\n\n\n\n Az eszt\u00e9tika csak az egyik vonatkoz\u00e1sa a whitespace-nek, hiszen mint kor\u00e1bban m\u00e1r jelezt\u00fck: j\u00f3 n\u00e9h\u00e1ny funkci\u00f3ja van. Az egyik legfontosabb az, hogy felh\u00edvjuk a figyelmet az \u00fczenet\u00fcnkre vagy a call to actionre. Hogy ezt a feladatot ell\u00e1tja-e, els\u0151sorban a felhaszn\u00e1l\u00f3i tesztek mutathatj\u00e1k meg<\/strong>.<\/p>\n\n\n\n V\u00e9g\u00fcl pedig azt sem \u00e1rt tudni, hogy a megfelel\u0151 whitespace-t kialak\u00edt\u00e1s\u00e1hoz meglehet\u0151sen nagy gyakorlatra van sz\u00fcks\u00e9g. \u00cdgy ha ezzel k\u00eds\u00e9rletezel, lehet, hogy \u00e9rdemes ink\u00e1bb egy gyakorlott webdesigner<\/a> seg\u00edts\u00e9g\u00e9t ig\u00e9nybe venni.<\/p>\n\r\nK\u00e9t t\u00edpusa van<\/h3>\n\n\n\n
A whitespace k\u00e9t szintje<\/h3>\n\n\n\n
A whitespace nem felt\u00e9tlen\u00fcl feh\u00e9r<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/08\/whitespace-apple.jpg\")
<\/figure><\/div>\n\n\n\nMire haszn\u00e1lhatjuk?<\/h2>\n\n\n\n
Felosztja a teret<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/08\/elrendezes.jpg\")
<\/figure><\/div>\n\n\n\n <\/h3>\n\n\n\n
![\"beatboxacademy\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2015\/05\/beatboxacademy.jpg\")
<\/figure><\/div>\n\n\n\nVezeti a tekintetet<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/08\/Google.png\")
<\/figure><\/div>\n\n\n\nMegmutatja, hogy mi tartozik \u00f6ssze<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/08\/osszetartozo-elemek.jpg\")
<\/figure><\/div>\n\n\n\nFelh\u00edvja a figyelmet valamire<\/h4>\n\n\n\n
Jav\u00edtja a haszn\u00e1lhat\u00f3s\u00e1got<\/h4>\n\n\n\n
![\"A](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2015\/05\/mailchimp-oldala.jpg\")
Seg\u00edti a meg\u00e9rt\u00e9st \u00e9s az olvashat\u00f3s\u00e1got<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/08\/sorok-kozotti-whitespace.png\")
<\/figure><\/div>\n\n\n\nEgy kis pihen\u0151 a felhaszn\u00e1l\u00f3knak<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/07\/google-fooldal.jpg\")
<\/figure>\n\n\n\nVonz\u00f3 \u00e9s eleganci\u00e1t, megb\u00edzhat\u00f3s\u00e1got, profizmust jelez<\/h4>\n\n\n\n
![\"Whitespace](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2015\/05\/whitespace-partywear.jpg\")
Beind\u00edtja a k\u00e9pzeletet, \u00e9rzelemteliv\u00e9 teszi a designt<\/h4>\n\n\n\n
Hogyan alak\u00edtsd ki a whitespace-t?<\/h2>\n\n\n\n
Legfeljebb 15 olyan pont legyen a weboldalon, melyre fel akarod h\u00edvni a l\u00e1togat\u00f3k figyelm\u00e9t!<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2016\/11\/whitespace-elemek-mailchimp.jpg\")
<\/figure><\/div>\n\n\n\nTartsd szem el\u0151tt az olvashat\u00f3s\u00e1got!<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2016\/11\/sortavolsag-peldak.jpg\")
<\/figure><\/div>\n\n\n\nLegyen c\u00e9lja a whitespace-nek!<\/h3>\n\n\n\n