{"id":4642,"date":"2020-04-01T20:21:59","date_gmt":"2020-04-01T18:21:59","guid":{"rendered":"http:\/\/blog.webshark.hu\/?p=4642"},"modified":"2022-08-26T07:25:34","modified_gmt":"2022-08-26T05:25:34","slug":"racs-webdesignban","status":"publish","type":"post","link":"http:\/\/blog.webshark.hu\/2020\/04\/01\/racs-webdesignban\/","title":{"rendered":"R\u00e1cs a webdesignban: mi az a r\u00e1csszerkezet? \u00c9s hogyan \u00e9rdemes haszn\u00e1lni? (Friss\u00edtve, 2022.08.26.)"},"content":{"rendered":"\n

B\u00e1rmilyen webdesignr\u00f3l legyen sz\u00f3, ma m\u00e1r mindenhol r\u00e1cs alapon szervez\u0151d\u0151 designba futhatunk bele.<\/strong> (Friss\u00edt\u00e9s, 2022.08.26. – T\u00f6bb ponton is b\u0151v\u00edtett\u00fck a bejegyz\u00e9st, \u00edgy ezzel a fejezettel is: Milyen elemekb\u0151l \u00e9p\u00fcl fel a r\u00e1cs?<\/a>)<\/em><\/p>\n\n\n\n\n\n\n\n

A r\u00e1csszerkezetre \u00e9p\u00fcl\u0151 design sokkal r\u00e9gebb \u00f3ta l\u00e9tezik, mint a r\u00e1cs-alap\u00fa weboldalak. Hiszen a sorokba rendez\u0151d\u0151 \u00edr\u00e1s is r\u00e1csszerkezetre \u00e9p\u00fcl: vonalakra, melyekre r\u00e1\u00fclnek a sorok. A k\u00f6nyvekn\u00e9l, majd a nyomtatott \u00fajs\u00e1gokn\u00e1l azt\u00e1n az alapvonal\u00fa r\u00e1cs mellett megjelenik a has\u00e1bokba rendez\u00e9s, hogy azt\u00e1n a 20. sz\u00e1zadban v\u00e1ljon igaz\u00e1n izgalmass\u00e1 a dolog, amikor m\u00e1r megjelennek a modul\u00e1ris, elforgatott, s\u0151t sug\u00e1rir\u00e1ny\u00fa r\u00e1csrendszerek, ami azt\u00e1n v\u00e9g\u00fcl a r\u00e1cs elleni ellen\u00e1ll\u00e1sba torkollott. Ugyanez a folyamat lezajlott k\u00e9s\u0151bb a webdesignban is, \u00edgy jutottunk el m\u00e1ra a brutalizmusig, illetve antidesignig<\/a>. <\/p>\n\n\n\n

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

Mi az a r\u00e1cs?<\/h2>\n\n\n\n

A designban a r\u00e1cs egy olyan rendszer, mely a fel\u00fclet elemeinek elrendez\u00e9s\u00e9re szolg\u00e1l, a felhaszn\u00e1l\u00f3i fel\u00fclet kialak\u00edt\u00e1s\u00e1nak az alapja. Fel\u00fclet lehet egy k\u00f6nyv, egy magazin oldala vagy egy weboldal. A r\u00e1cs r\u00e1csegys\u00e9gekb\u0151l \u00e9p\u00fcl fel, \u00e9s egy bizonyos sz\u00e1m\u00fa oszlopb\u00f3l \u00e1ll. Az oszlopoknak van egy meghat\u00e1rozott m\u00e9ret\u0171 szeg\u00e9lye \u00e9s egym\u00e1st\u00f3l val\u00f3 t\u00e1vols\u00e1guk.<\/p>\n\n\n\n

Legegyszer\u0171bb form\u00e1j\u00e1ban a r\u00e1cs vonalak h\u00e1l\u00f3zata, melyek egym\u00e1st keresztezik, hogy ez\u00e1ltal n\u00e9gyzetek sorozat\u00e1t alak\u00edts\u00e1k ki. A webdesignban a r\u00e1cs v\u00edzszintesen \u00e9s f\u00fcgg\u0151legesen osztja fel az oldalakat, \u00edgy l\u00e9trej\u00f6nnek has\u00e1bok \u00e9s a has\u00e1bok k\u00f6z\u00f6tti terek.<\/p>\n\n\n\n

A r\u00e1cs egy olyan keretrendszert alak\u00edt ki, mely meghat\u00e1rozza, hogy mik\u00e9nt rendezhet\u0151k el az elemek az oldalon. Ez\u00e1ltal biztos\u00edtja, hogy a felhaszn\u00e1l\u00f3i fel\u00fclet olyan elemei, mint a navig\u00e1ci\u00f3s men\u00fc, a k\u00e9pek, a sz\u00f6vegdobozok \u00e9s a c\u00edmsorok rendezetten, megfelel\u0151 m\u00e9retben \u00e9s t\u00e9rk\u00f6zzel helyezkedjenek el. <\/p>\n\n\n\n

Milyen el\u0151nyei \u00e9s h\u00e1tr\u00e1nyai vannak a r\u00e1csnak?<\/h2>\n\n\n\n

A r\u00e1csrendszerek korl\u00e1tot jelentenek a szabadon sz\u00e1rnyal\u00f3 fant\u00e1zia sz\u00e1m\u00e1ra, de seg\u00edtenek is azzal, hogy egy mederbe terelik azt. Cs\u00f6kkenti a lehet\u0151s\u00e9gek sz\u00e1m\u00e1t, mert a designt a r\u00e1csra kell \u00e9p\u00edteni. A r\u00e1cs ugyanakkor sok hasonl\u00f3 oldal megsz\u00fclet\u00e9s\u00e9t eredm\u00e9nyezi, melyek \u00fagy n\u00e9znek ki, mintha egym\u00e1st m\u00e1solt\u00e1k volna. <\/p>\n\n\n\n

Ez egy 22-es csapd\u00e1ja: a designerek nem tudnak weboldalak l\u00e9trehozni r\u00e1csrendszer n\u00e9lk\u00fcl, mert az komoly neh\u00e9zs\u00e9geket okozna a tervez\u00e9s folyamat\u00e1ban, mik\u00f6zben a r\u00e1cshoz ragaszkod\u00e1s monoton, sablonszer\u0171 weboldalakat eredm\u00e9nyez.<\/p>\n\n\n\n

A r\u00e1cs, b\u00e1r megk\u00f6t, m\u00e9gis egy stabil kiindul\u00f3pontot jelent minden design sz\u00e1m\u00e1ra, ahonnan el lehet rugaszkodni, \u00e9s \u00faj megold\u00e1sokat tal\u00e1lni. \u00cdgy a designer nem l\u00e9g\u00fcres t\u00e9rben lebeg, ahol nincsenek viszony\u00edt\u00e1si pontok. A r\u00e1cs teh\u00e1t kreat\u00edv korl\u00e1tot jelent, \u00e9s ugyan\u00fagy seg\u00edti, nem pedig korl\u00e1tozza egy webdesign megval\u00f3sul\u00e1s\u00e1t, ahogy az el\u0151zetes tervek, elv\u00e1r\u00e1sok r\u00f6gz\u00edt\u00e9se is.<\/p>\n\n\n\n

A legt\u00f6bb designer ma egyet\u00e9rt abban, hogy egy j\u00f3 r\u00e1csrendszer a j\u00f3 felhaszn\u00e1l\u00f3i fel\u00fclet alapja. Seg\u00edts\u00e9g\u00e9vel kialak\u00edthat\u00f3 a rend \u00e9s a hierarchia az oldalon, l\u00e9trej\u00f6n egy olyan alap, melyre lehet \u00e9p\u00edtkezni.<\/p>\n\n\n\n

Arr\u00f3l nem besz\u00e9lve, hogy a r\u00e1csra \u00e9p\u00fcl\u0151 fel\u00fcletek k\u00f6nnyen alkalmazkodnak minden kijelz\u0151m\u00e9rethez, s\u0151t a gyakorlatban a reszponz\u00edv webdesign<\/a> elengedhetetlen r\u00e9sze. A reszponz\u00edv design t\u00f6r\u00e9spontokat haszn\u00e1l, melyek meghat\u00e1rozz\u00e1k, hogy milyen kijelz\u0151m\u00e9retn\u00e9l milyen elrendez\u00e9s jelenjen meg a felhaszn\u00e1l\u00f3 sz\u00e1m\u00e1ra. Vagyis m\u00edg egy desktop kijelz\u0151n\u00e9l 12 has\u00e1bot hat\u00e1roznak meg, addig mobilkijelz\u0151n\u00e9l csak 4-et.<\/p>\n\n\n\n

\"\"<\/a>
A bal oldalon mobilkijelz\u0151n, a jobb oldalon asztali g\u00e9pen l\u00e1that\u00f3 a Behance modul\u00e1ris r\u00e1csszerkezete<\/figcaption><\/figure><\/div>\n\n\n\n

Milyen el\u0151nyei vannak a r\u00e1csnak a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra?<\/h3>\n\n\n\n

De nem csak a designerek sz\u00e1m\u00e1ra teszi egyszer\u0171bb\u00e9 a munk\u00e1t, hiszen a r\u00e1cs c\u00e9lja m\u00e9giscsak az, hogy a felhaszn\u00e1l\u00f3nak k\u00edn\u00e1ljon bizonyos el\u0151ny\u00f6ket. Ilyen el\u0151ny p\u00e9ld\u00e1ul az, hogy a r\u00e1csba rendezett tartalmak k\u00f6nnyebben \u00e1tl\u00e1that\u00f3k, \u00e1tfuthat\u00f3k,<\/strong> jav\u00edtj\u00e1k az olvashat\u00f3s\u00e1got, \u00edgy jobban haszn\u00e1lhat\u00f3k, mint egy rendezetlen fel\u00fclet. <\/p>\n\n\n\n

Mivel strukt\u00far\u00e1t k\u00edn\u00e1l a felhaszn\u00e1l\u00f3knak, ami vezeti \u0151ket, ez\u00e1ltal hat\u00e9konyabban el\u00e9rhetik azt a c\u00e9lt, amit egy oldalon keresnek.<\/p>\n\n\n\n

Milyen elemekb\u0151l \u00e9p\u00fcl fel a r\u00e1cs?<\/h2>\n\n\n\n

A vonalas r\u00e1cson k\u00edv\u00fcl b\u00e1rmilyen r\u00e1csot is v\u00e1lasztasz, az al\u00e1bbi h\u00e1rom elem mindegyikben megjelenik:<\/p>\n\n\n\n

Has\u00e1bok vagy oszlopok<\/strong>: a legnagyobb helyet foglalj\u00e1k el a r\u00e1csban. Az elemeket \u00e9s a tartalmakat a has\u00e1bokban helyezz\u00fck el. Annak \u00e9rdek\u00e9ben, hogy b\u00e1rmely kijelz\u0151m\u00e9rethez igazodni tudjanak, az oszlopok sz\u00e9less\u00e9g\u00e9t most m\u00e1r \u00e1ltal\u00e1ban sz\u00e1zal\u00e9kosan adj\u00e1k meg, nem pedig fix \u00e9rt\u00e9kekkel, illetve az oszlopok sz\u00e1ma is rugalmasan v\u00e1ltozik. Teh\u00e1t p\u00e9ld\u00e1ul mobileszk\u00f6z eset\u00e9ben a r\u00e1cs n\u00e9gy oszlopb\u00f3l \u00e1ll, m\u00edg ugyanez a r\u00e1cs desktopon 12 oszlopb\u00f3l.<\/p>\n\n\n\n

Has\u00e1bk\u00f6z\u00f6k (gutter)<\/strong>: a t\u00e9r az egyes has\u00e1bok k\u00f6z\u00f6tt az egyes oszlopokban elhelyezett elemeket \u00e9s tartalmakat v\u00e1lasztja el egym\u00e1st\u00f3l. A has\u00e1bk\u00f6z \u00e1ltal\u00e1ban r\u00f6gz\u00edtett sz\u00e9less\u00e9g\u0171, ugyanakkor bizonyos t\u00f6r\u00e9spontokn\u00e1l v\u00e1ltozhat a sz\u00e9less\u00e9g. Teh\u00e1t p\u00e9ld\u00e1ul nagyobb kijelz\u0151k eset\u00e9ben sz\u00e9lesebb has\u00e1bk\u00f6zt alkalmazunk, m\u00edg kisebb kijelz\u0151kn\u00e9l, p\u00e9ld\u00e1ul mobilon, j\u00f3val kisebb is elegend\u0151.<\/p>\n\n\n\n

Marg\u00f3k<\/strong>: a bal \u00e9s jobb oldali sz\u00e9le az oldalnak, ahov\u00e1 nem ker\u00fcl tartalom. M\u00e9rete lehet fix vagy a kijelz\u0151m\u00e9ret adott sz\u00e1zal\u00e9kak\u00e9nt is megadhat\u00f3, de v\u00e1ltozhat t\u00f6r\u00e9spontok alapj\u00e1n is.<\/p>\n\n\n\n

Milyen t\u00edpusai vannak?<\/h2>\n\n\n\n

A r\u00e1csrendszereknek k\u00fcl\u00f6nb\u00f6z\u0151 t\u00edpusai vannak, melyek k\u00f6z\u00fcl felsorolunk n\u00e9h\u00e1nyat.<\/p>\n\n\n\n

Vonalas<\/h4>\n\n\n\n

Ez a legegyszer\u0171bb r\u00e1csszerkezet, mely m\u00e1r a k\u00f6nyvnyomtat\u00e1s el\u0151tti \u00edr\u00e1sokn\u00e1l megjelent. V\u00edzszintes vonalak egym\u00e1s alatt, egyenl\u0151 t\u00e1vols\u00e1gban. Ezek a vonalak hat\u00e1rozz\u00e1k meg, hogy hov\u00e1 ker\u00fcl egy-egy sor. <\/p>\n\n\n\n

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

Has\u00e1bok<\/h4>\n\n\n\n

A vonalakat gyakran kombin\u00e1ljuk has\u00e1bokkal, ez a leggyakoribb megold\u00e1s a webdesignban, ahogy az \u00fajs\u00e1gokn\u00e1l is. Annyit jelent, hogy az oldalt t\u00f6bb f\u00fcgg\u0151leges mez\u0151re osztjuk, melyek ment\u00e9n elrendezz\u00fck az elemeket. A webdesignban ezt haszn\u00e1lj\u00e1k a leggyakrabban. Akad n\u00e9h\u00e1ny n\u00e9pszer\u0171bb t\u00edpusa, \u00edgy p\u00e9ld\u00e1ul a 960-as r\u00e1cs, ami 960 px sz\u00e9les, \u00e9s tartalmazhat 12 has\u00e1bot, melyn\u00e9l az egyes has\u00e1bok 60 px-esek, 20-px-es t\u00e9rk\u00f6z\u00f6kkel. Ha 16 has\u00e1bot tartalmaz, akkor 40 px-esek a has\u00e1bok, 20 px-es t\u00e9rk\u00f6z\u00f6kkel.<\/p>\n\n\n\n

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

Sok designer azonban jobban szereti a has\u00e1bot sorokkal is kombin\u00e1lni, ami a modul\u00e1ris r\u00e1cs.<\/p>\n\n\n\n

Modul\u00e1ris r\u00e1cs<\/h4>\n\n\n\n

A has\u00e1b alap\u00fa r\u00e1cs egy kiterjeszt\u00e9se a modul\u00e1ris r\u00e1cs, melyben megjelennek a sorok is a has\u00e1bokban. Az egym\u00e1st keresztez\u0151 has\u00e1bok \u00e9s sorok r\u00e9v\u00e9n l\u00e9trej\u00f6nnek a modulok. Ezeket jellemz\u0151en web\u00e1ruh\u00e1zakban haszn\u00e1lj\u00e1k.<\/p>\n\n\n\n

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

Hierarchikus r\u00e1cs<\/h4>\n\n\n\n

\u00cdgy nevezhet\u00fcnk b\u00e1rmilyen szab\u00e1lytalan r\u00e1csot, melyet egy adott tartalom speci\u00e1lis ig\u00e9nyeinek megfelel\u0151en alak\u00edtottak. Egy hierarchikus r\u00e1cs lehet ak\u00e1r teljesen szabad form\u00e1j\u00fa, de \u00e1llhat k\u00e9t egym\u00e1sra helyezett r\u00e1csb\u00f3l, vagy hozz\u00e1tehet\u0151k tov\u00e1bbi r\u00e1cselemek. Az el\u0151nye az, hogy a tartalom fontoss\u00e1g alapj\u00e1n rendezhet\u0151 el a r\u00e1cson bel\u00fcl<\/strong>, vagyis a legfontosabb elemek kapj\u00e1k a legnagyobb helyet a r\u00e1csban.<\/p>\n\n\n\n

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

Hogyan v\u00e1laszd ki a megfelel\u0151 r\u00e1csszerkezetet?<\/h2>\n\n\n\n

A megfelel\u0151 r\u00e1cst\u00edpus kiv\u00e1laszt\u00e1sa \u00e9s alkalmaz\u00e1sa meghat\u00e1rozza azt, hogy mennyire lesz j\u00f3l haszn\u00e1lhat\u00f3 a weboldalad, \u00e9s milyen lesz a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nye.<\/p>\n\n\n\n

Olyan r\u00e1csot kell teh\u00e1t v\u00e1lasztani, mely pontosan megfelel a tartalmaidnak. Sz\u00e1nj r\u00e1 n\u00e9mi id\u0151t, hogy \u00e1tgondold, hogy vonal vagy has\u00e1b, esetleg modul\u00e1ris vagy hierarchikus r\u00e1cs lenne sz\u00e1modra az optim\u00e1lis v\u00e1laszt\u00e1s. Ha a weboldaladon vannak olyan elemek, melyeket szeretn\u00e9l kiemelni, a t\u00f6bbi elem f\u00f6l\u00e9 helyezni fontoss\u00e1gban, akkor egy hierarchikus r\u00e1cs lesz a megfelel\u0151. Tipikusan ilyen eset p\u00e9ld\u00e1ul egy online h\u00edroldal, ahol vannak \u00fagynevezett vezet\u0151 h\u00edrek, melyek nagyobb teret kapnak. <\/p>\n\n\n\n

Ha viszont a tartalmadra legink\u00e1bb az jellemz\u0151, hogy gyakran v\u00e1ltozik, akkor egy has\u00e1b-alap\u00fa vagy egy modul\u00e1ris r\u00e1cs lehet j\u00f3 megold\u00e1s, ami k\u00f6nnyen adapt\u00e1l\u00f3dik b\u00e1rmilyen kijelz\u0151m\u00e9rethez. Ezek nagyfok\u00fa rugalmass\u00e1got engednek meg a tervez\u00e9sn\u00e9l is. M\u00e1r csak az\u00e9rt is, mivel egyes tartalmak t\u00f6bb oszlopot is \u00e1tfoghatnak, vagyis nem kell ragaszkodni szigor\u00faan az oszlopsz\u00e9less\u00e9ghez.<\/p>\n\n\n\n

N\u00e9h\u00e1ny tipp a r\u00e1cs kialak\u00edt\u00e1s\u00e1hoz<\/h2>\n\n\n\n

Ha kital\u00e1ltad, melyik a megfelel\u0151 r\u00e1csszerkezet sz\u00e1modra, akkor \u00e1t kell gondolnod, hogy h\u00e1ny has\u00e1bja legyen, mekkor\u00e1k legyenek a has\u00e1bk\u00f6z\u00f6k, illetve a marg\u00f3k a kijelz\u0151m\u00e9rethez viszony\u00edtva. Alapvet\u0151en desktop, tablet \u00e9s mobil m\u00e9retekben kell gondolkodni, \u00e9s egy 12 has\u00e1bos elrendez\u00e9s \u00e1ltal\u00e1ban megfelel\u0151 monitorra vagy notebook kijelz\u0151re. A has\u00e1bok sz\u00e1ma att\u00f3l f\u00fcgg\u0151en fog cs\u00f6kkenni, hogy enn\u00e9l mennyivel kisebb kijelz\u0151n jelenik meg az oldal. A dr\u00f3tv\u00e1z-k\u00e9sz\u00edt\u0151 eszk\u00f6z\u00f6kkel viszonylag k\u00f6nnyen \u00e9s gyorsan szerkesztheted a r\u00e1csot, m\u00e9g akkor is, ha m\u00e1r elkezdted a tervez\u00e9st.<\/p>\n\n\n\n

Gondold \u00e1t, mik\u00e9nt viszonyul a r\u00e1cs az oldalhoz!<\/h4>\n\n\n\n

Ebben az esetben arr\u00f3l van sz\u00f3, hogy \u00e1t kell gondolnod, hogy hov\u00e1 ker\u00fcl a r\u00e1cs az oldalon bel\u00fcl, mekkor\u00e1k lesznek a t\u00e1vols\u00e1gok. Ennek fontos szerepe van abban, hogyan is m\u0171k\u00f6dik majd a r\u00e1cs, mennyire teljes\u00edt j\u00f3l funkcion\u00e1lisan \u00e9s eszt\u00e9tikailag.<\/p>\n\n\n\n

A r\u00e1csot is tervezd meg!<\/h4>\n\n\n\n

Amikor egy \u00fcres oldalb\u00f3l indulsz ki, hogy l\u00e9trehozz rajta egy haszn\u00e1lhat\u00f3 weboldalt, akkor nyilv\u00e1n adja mag\u00e1t, hogy a megszokott r\u00e1csot haszn\u00e1ld alapk\u00e9nt: azaz a megszokott sz\u00e1m\u00fa has\u00e1bb\u00f3l \u00e9s k\u00f6zt\u00fck a m\u00e1r j\u00f3l ismert t\u00e1vols\u00e1gokb\u00f3l \u00e1lljon \u00f6ssze majd az oldal. Pedig \u00e9rdemes \u00e1tgondolni minden projekt eset\u00e9ben, hogy milyen r\u00e1cskialak\u00edt\u00e1s lenne optim\u00e1lis. \u00cdgy elker\u00fclheted, hogy egy olyan r\u00e1csra tervezz, ami adott esetben nem m\u0171k\u00f6dik.<\/p>\n\n\n\n

Gondold \u00e1t, hogy h\u00e1ny oszlopra van sz\u00fcks\u00e9ged!<\/h4>\n\n\n\n

Hab\u00e1r egy 12 oszlopos Bootstrap szer\u0171 r\u00e1cs a legn\u00e9pszer\u0171bb v\u00e1laszt\u00e1s, nem k\u00f6telez\u0151 ebben gondolkodni. Amikor tervezed a r\u00e1csot, akkor mindig azt gondold \u00e1t, hogy h\u00e1ny oszlop felhaszn\u00e1l\u00e1s\u00e1val tudod megoldani a designt.<\/p>\n\n\n\n

Ismerd meg a korl\u00e1tokat!<\/h4>\n\n\n\n

Mindig vedd figyelembe a kijelz\u0151ket, melyekre tervezed a r\u00e1csot. Nem \u00e1rt azt sem tudni, hogy hogyan fogj\u00e1k haszn\u00e1lni az emberek. A leggyakoribb felbont\u00e1sok pixelben: asztali g\u00e9pen 1440×1024 px, tableten 768×1024 px, mobilon 320×640 px. Alapvet\u0151en azonban 8 pixeles r\u00e1csrendszerben kell gondolkodni<\/strong>, ugyanis a legt\u00f6bb eszk\u00f6zn\u00e9l a kijelz\u0151m\u00e9ret pixelben meghat\u00e1rozva a 8 szorzata. Teh\u00e1t a r\u00e1csod elemeinek \u00e9rt\u00e9ke a 8 valamilyen szorzata legyen, mert \u00edgy k\u00f6nnyebben kezelhet\u0151 a r\u00e1cs. A l\u00e9nyeg, hogy a r\u00e1csodnak mindegyik kijelz\u0151m\u00e9rethez \u00e9s t\u00f6r\u00e9sponthoz j\u00f3l kell igazodnia. Mindig ellen\u0151rizd le a k\u00fcl\u00f6nb\u00f6z\u0151 kijelz\u0151m\u00e9retekn\u00e9l a r\u00e1cs megjelen\u00e9s\u00e9t!<\/p>\n\n\n\n

Mindig a has\u00e1bokhoz igaz\u00edtsd a tartalmad!<\/h4>\n\n\n\n

A has\u00e1bk\u00f6z\u00f6k hat\u00e1rozz\u00e1k meg, hogy milyen t\u00e1vol vannak egym\u00e1st\u00f3l a has\u00e1bjaid, ezek v\u00e1lasztj\u00e1k el \u0151ket egym\u00e1st\u00f3l. Ami fontos, hogy amikor sz\u00f6veg vagy k\u00e9p t\u00f6bb has\u00e1bon is \u00e1tny\u00falik, akkor azok kezdete \u00e9s v\u00e9ge a has\u00e1b sz\u00e9l\u00e9n\u00e9l legyen, \u00e9s ne l\u00f3gjon r\u00e1 a szeg\u00e9lyre, vagy ne csak f\u00e9lig foglalja el a has\u00e1bot. Ut\u00f3bbi is egy lehet\u0151s\u00e9g, ha meg akarod t\u00f6rni a r\u00e1csot, amir\u0151l mindj\u00e1rt sz\u00f3 lesz, de \u00f3vatosan kell vele b\u00e1nni.<\/p>\n\n\n\n

Legy\u00e9l k\u00f6vetkezetes a f\u00fcgg\u0151leges \u00e9s v\u00edzszintes t\u00e1vols\u00e1gokn\u00e1l!<\/h4>\n\n\n\n

Gyakran el\u0151fordul weboldalakon, hogy bizonyos elemek k\u00f6z\u00f6tt kisebb, m\u00e1s elemek k\u00f6z\u00f6tt nagyobb t\u00e1vols\u00e1got alak\u00edtanak ki. Ez azonban rontja a design vizu\u00e1lis megjelen\u00e9s\u00e9t.<\/p>\n\n\n\n

Ne feledkezz meg a f\u00fcgg\u0151leges ritmusr\u00f3l!<\/h4>\n\n\n\n

Egy has\u00e1b alap\u00fa designban az alapvonalakat haszn\u00e1lod a sorok elrendez\u00e9s\u00e9n\u00e9l. Ha elt\u00e9rsz ett\u0151l – vagyis nem a sorokra illeszted r\u00e1 a tartalmat, hanem elcs\u00faszva ker\u00fcl al\u00e1 vagy f\u00f6l\u00e9 -, akkor az a harm\u00f3nia \u00e9s a rendezetts\u00e9g k\u00e1r\u00e1ra v\u00e1lik. A bet\u0171 magass\u00e1g\u00e1nak is illeszkednie kell az alapvonal r\u00e1cshoz.<\/p>\n\n\n\n

Teh\u00e1t, ha mondjuk 4 pixeles egys\u00e9get haszn\u00e1lsz a r\u00e1csn\u00e1l, akkor olyan bet\u0171magass\u00e1got kell v\u00e1lasztanod, mely ennek t\u00f6bbsz\u00f6r\u00f6se, teh\u00e1t lehet 4, 12, 32, 64 px-es magass\u00e1g\u00fa.<\/p>\n\n\n\n

Ne feledkezz meg a keret \u00e9s a sz\u00edn fontoss\u00e1g\u00e1r\u00f3l!<\/h4>\n\n\n\n

A keretek r\u00e9v\u00e9n felh\u00edvhatod a weboldal egy elem\u00e9re a felhaszn\u00e1l\u00f3k figyelm\u00e9t. A sz\u00ednekkel ugyan\u00edgy vizu\u00e1lis s\u00falyt adhatsz annak a ter\u00fcletnek, ahol ez sz\u00fcks\u00e9ges.<\/p>\n\n\n\n

Kil\u00e9phetsz a r\u00e1csb\u00f3l!<\/h4>\n\n\n\n

A r\u00e1cshoz nem musz\u00e1j mindig mereven ragaszkodni, bizonyos elemek elmozdulhatnak a r\u00e1csszerkezett\u0151l. Az ilyen t\u00f6r\u00e9sek kiemelik az adott elemet a weboldalb\u00f3l azzal, hogy nagyobb vizu\u00e1lis s\u00falyt adnak neki a ritmus megt\u00f6r\u00e9s\u00e9vel.<\/p>\n\n\n\n

Nem musz\u00e1j r\u00e1csban gondolkodnod<\/h4>\n\n\n\n

Kisebb projektekn\u00e9l nem felt\u00e9tlen\u00fcl van sz\u00fcks\u00e9g r\u00e1cs haszn\u00e1lat\u00e1ra, r\u00e1ad\u00e1sul az a legjobb, ha r\u00e1cs felrajzol\u00e1sa n\u00e9lk\u00fcl meg tudod tervezni a r\u00e1cs alap\u00fa fel\u00fcletet. Id\u0151r\u0151l-id\u0151re mindig \u00e9rdemes megn\u00e9zni egy elrendez\u00e9st r\u00e1cs n\u00e9lk\u00fcl is, hogy a legeredetibb megold\u00e1sokat hozd l\u00e9tre.<\/p>\n\n\n\n

Mikor \u00e9s hogyan \u00e9rdemes kit\u00f6rni a r\u00e1csb\u00f3l?<\/h2>\n\n\n\n

A r\u00e1cs teh\u00e1t, mint l\u00e1ttuk, seg\u00edts\u00e9get jelent a weboldalad elemeinek elrendez\u00e9s\u00e9ben. Ugyanakkor, ha a weboldalba n\u00e9mi kreativit\u00e1st csemp\u00e9szn\u00e9l, esetleg valami kiemeln\u00e9l, vagy egy kicsit mozgalmasabb\u00e1 tenn\u00e9d, akkor ki kell mozdulni a r\u00e1csb\u00f3l.<\/p>\n\n\n\n

A r\u00e1cs haszn\u00e1lata nem jelenti azt, hogy mereven kellene ragaszkodni hozz\u00e1, ink\u00e1bb csak ir\u00e1nymutat\u00e1st jelent. Ugyanakkor sokkal jobb megold\u00e1s egy-egy elemet a r\u00e1csrendszerb\u0151l kiszakadva megjelen\u00edteni, mint teljesen elhagyni a vil\u00e1gosan meghat\u00e1rozott strukt\u00far\u00e1t.<\/p>\n\n\n\n

Ha a r\u00e1cs m\u00e1r megvan, akkor csak a designeren m\u00falik, hogy mikor \u00e9s hogyan t\u00f6r ki bel\u0151le. Ami nem azt jelenti, hogy innent\u0151l a r\u00e1csot teljes m\u00e9rt\u00e9kben figyelmen k\u00edv\u00fcl kellene hagyni. Egy-egy elem eset\u00e9ben viszont el\u0151fordulhat, hogy azok t\u00f6bb oszlopot is metszenek vagy ak\u00e1r t\u00falny\u00falnak a r\u00e1cson.<\/p>\n\n\n\n

Teh\u00e1t p\u00e9ld\u00e1ul, ha egy weboldalon a hajt\u00e1s felett el kell helyezni egy bannert, akkor a designernek k\u00e9t lehet\u0151s\u00e9ge van: vagy elkezd a banner k\u00f6r\u00e9 \u00e9p\u00edtkezni, \u00e9s annak m\u00e9reteihez igazodva alak\u00edt ki r\u00e1csot, vagy pedig a megl\u00e9v\u0151 r\u00e1csrendszert megt\u00f6ri a bannerrel. Ut\u00f3bbi egyszer\u0171bb lehet, \u00e9s r\u00e1ir\u00e1ny\u00edtja a figyelmet a bannerre.<\/p>\n\n\n\n

Milyen elemekkel szokt\u00e1k \u00e1ltal\u00e1ban megt\u00f6rni a r\u00e1csot? P\u00e9ld\u00e1ul egy anim\u00e1ci\u00f3val<\/strong>, mely egy\u00e9bk\u00e9nt is n\u00e9mi mozg\u00e1st visz a weboldalba. Az anim\u00e1ci\u00f3 r\u00e9v\u00e9n egy adott elem kiemelked\u0151v\u00e9 v\u00e1lik \u00e9s b\u00e1tor\u00edtja az interakci\u00f3t. Ugyancsak a v\u00edzszintes r\u00e1cs megt\u00f6r\u00e9s\u00e9t eredm\u00e9nyezi egy parallax effektus<\/strong>, mely azt eredm\u00e9nyezi, hogy a weboldal h\u00e1ttere lassabban mozog, mint az el\u0151t\u00e9rben l\u00e9v\u0151 elemek. \u00cdgy l\u00e9trej\u00f6n a 3D-hat\u00e1s.<\/p>\n\n\n\n

Szint\u00e9n megt\u00f6rhet\u0151 a r\u00e1cs \u00fagy, ha egy k\u00e9pre sz\u00f6veget vagy ikonokat helyez\u00fcnk. J\u00f3 kivitelez\u00e9s eset\u00e9n a sz\u00f6vegek vagy ikonok egy k\u00e9p feletti r\u00e9tegk\u00e9nt<\/strong> jelennek meg, kiszakadva a r\u00e1csb\u00f3l. Ez az elk\u00fcl\u00f6n\u00edt\u00e9s \u00e9rzet\u00e9t kelti \u00e9s m\u00e9lys\u00e9get hoz l\u00e9tre a designban. <\/p>\n\n\n\n

Nagyobb negat\u00edv t\u00e9r<\/strong> haszn\u00e1lat\u00e1val is t\u00fall\u00e9phet\u00fcnk a r\u00e1cson, \u00edgy az az \u00e9rintett elemre ir\u00e1ny\u00edtja a figyelmet. A kontrasztos elemek vagy sz\u00ednek<\/strong> is ezt \u00e9rik el: interakci\u00f3ra \u00f6szt\u00f6nzik a felhaszn\u00e1l\u00f3t. Jellemz\u0151en a CTA-kn\u00e1l \u00e9s m\u00e1s kattinthat\u00f3 elemekn\u00e9l jelenik ez meg. A kiemelt elemek r\u00e9v\u00e9n vonz\u00f3bb\u00e1 v\u00e1lik a design, \u00e9s finoman v\u00e9gigvezetik a felhaszn\u00e1l\u00f3t a tartalmon. <\/p>\n\r\n