Webshark Blog

Bármilyen webdesignról legyen szó, ma már mindenhol rács alapon szerveződő designba futhatunk bele. (Frissítés, 2022.08.26. – Több ponton is bővítettük a bejegyzést, így ezzel a fejezettel is: Milyen elemekből épül fel a rács?)

A rácsszerkezetre épülő design sokkal régebb óta létezik, mint a rács-alapú weboldalak. Hiszen a sorokba rendeződő írás is rácsszerkezetre épül: vonalakra, melyekre ráülnek a sorok. A könyveknél, majd a nyomtatott újságoknál aztán az alapvonalú rács mellett megjelenik a hasábokba rendezés, hogy aztán a 20. században váljon igazán izgalmassá a dolog, amikor már megjelennek a moduláris, elforgatott, sőt sugárirányú rácsrendszerek, ami aztán végül a rács elleni ellenállásba torkollott. Ugyanez a folyamat lezajlott később a webdesignban is, így jutottunk el mára a brutalizmusig, illetve antidesignig.

Mi az a rács?

A designban a rács egy olyan rendszer, mely a felület elemeinek elrendezésére szolgál, a felhasználói felület kialakításának az alapja. Felület lehet egy könyv, egy magazin oldala vagy egy weboldal. A rács rácsegységekből épül fel, és egy bizonyos számú oszlopból áll. Az oszlopoknak van egy meghatározott méretű szegélye és egymástól való távolságuk.

Legegyszerűbb formájában a rács vonalak hálózata, melyek egymást keresztezik, hogy ezáltal négyzetek sorozatát alakítsák ki. A webdesignban a rács vízszintesen és függőlegesen osztja fel az oldalakat, így létrejönnek hasábok és a hasábok közötti terek.

A rács egy olyan keretrendszert alakít ki, mely meghatározza, hogy miként rendezhetők el az elemek az oldalon. Ezáltal biztosítja, hogy a felhasználói felület olyan elemei, mint a navigációs menü, a képek, a szövegdobozok és a címsorok rendezetten, megfelelő méretben és térközzel helyezkedjenek el.

Milyen előnyei és hátrányai vannak a rácsnak?

A rácsrendszerek korlátot jelentenek a szabadon szárnyaló fantázia számára, de segítenek is azzal, hogy egy mederbe terelik azt. Csökkenti a lehetőségek számát, mert a designt a rácsra kell építeni. A rács ugyanakkor sok hasonló oldal megszületését eredményezi, melyek úgy néznek ki, mintha egymást másolták volna.

Ez egy 22-es csapdája: a designerek nem tudnak weboldalak létrehozni rácsrendszer nélkül, mert az komoly nehézségeket okozna a tervezés folyamatában, miközben a rácshoz ragaszkodás monoton, sablonszerű weboldalakat eredményez.

A rács, bár megköt, mégis egy stabil kiindulópontot jelent minden design számára, ahonnan el lehet rugaszkodni, és új megoldásokat találni. Így a designer nem légüres térben lebeg, ahol nincsenek viszonyítási pontok. A rács tehát kreatív korlátot jelent, és ugyanúgy segíti, nem pedig korlátozza egy webdesign megvalósulását, ahogy az előzetes tervek, elvárások rögzítése is.

A legtöbb designer ma egyetért abban, hogy egy jó rácsrendszer a jó felhasználói felület alapja. Segítségével kialakítható a rend és a hierarchia az oldalon, létrejön egy olyan alap, melyre lehet építkezni.

Arról nem beszélve, hogy a rácsra épülő felületek könnyen alkalmazkodnak minden kijelzőmérethez, sőt a gyakorlatban a reszponzív webdesign elengedhetetlen része. A reszponzív design töréspontokat használ, melyek meghatározzák, hogy milyen kijelzőméretnél milyen elrendezés jelenjen meg a felhasználó számára. Vagyis míg egy desktop kijelzőnél 12 hasábot határoznak meg, addig mobilkijelzőnél csak 4-et.

Milyen előnyei vannak a rácsnak a felhasználók számára?

De nem csak a designerek számára teszi egyszerűbbé a munkát, hiszen a rács célja mégiscsak az, hogy a felhasználónak kínáljon bizonyos előnyöket. Ilyen előny például az, hogy a rácsba rendezett tartalmak könnyebben átláthatók, átfuthatók, javítják az olvashatóságot, így jobban használhatók, mint egy rendezetlen felület.

Mivel struktúrát kínál a felhasználóknak, ami vezeti őket, ezáltal hatékonyabban elérhetik azt a célt, amit egy oldalon keresnek.

Milyen elemekből épül fel a rács?

A vonalas rácson kívül bármilyen rácsot is választasz, az alábbi három elem mindegyikben megjelenik:

Hasábok vagy oszlopok: a legnagyobb helyet foglalják el a rácsban. Az elemeket és a tartalmakat a hasábokban helyezzük el. Annak érdekében, hogy bármely kijelzőmérethez igazodni tudjanak, az oszlopok szélességét most már általában százalékosan adják meg, nem pedig fix értékekkel, illetve az oszlopok száma is rugalmasan változik. Tehát például mobileszköz esetében a rács négy oszlopból áll, míg ugyanez a rács desktopon 12 oszlopból.

Hasábközök (gutter): a tér az egyes hasábok között az egyes oszlopokban elhelyezett elemeket és tartalmakat választja el egymástól. A hasábköz általában rögzített szélességű, ugyanakkor bizonyos töréspontoknál változhat a szélesség. Tehát például nagyobb kijelzők esetében szélesebb hasábközt alkalmazunk, míg kisebb kijelzőknél, például mobilon, jóval kisebb is elegendő.

Margók: a bal és jobb oldali széle az oldalnak, ahová nem kerül tartalom. Mérete lehet fix vagy a kijelzőméret adott százalékaként is megadható, de változhat töréspontok alapján is.

Milyen típusai vannak?

A rácsrendszereknek különböző típusai vannak, melyek közül felsorolunk néhányat.

Vonalas

Ez a legegyszerűbb rácsszerkezet, mely már a könyvnyomtatás előtti írásoknál megjelent. Vízszintes vonalak egymás alatt, egyenlő távolságban. Ezek a vonalak határozzák meg, hogy hová kerül egy-egy sor.

Hasábok

A vonalakat gyakran kombináljuk hasábokkal, ez a leggyakoribb megoldás a webdesignban, ahogy az újságoknál is. Annyit jelent, hogy az oldalt több függőleges mezőre osztjuk, melyek mentén elrendezzük az elemeket. A webdesignban ezt használják a leggyakrabban. Akad néhány népszerűbb típusa, így például a 960-as rács, ami 960 px széles, és tartalmazhat 12 hasábot, melynél az egyes hasábok 60 px-esek, 20-px-es térközökkel. Ha 16 hasábot tartalmaz, akkor 40 px-esek a hasábok, 20 px-es térközökkel.

Sok designer azonban jobban szereti a hasábot sorokkal is kombinálni, ami a moduláris rács.

Moduláris rács

A hasáb alapú rács egy kiterjesztése a moduláris rács, melyben megjelennek a sorok is a hasábokban. Az egymást keresztező hasábok és sorok révén létrejönnek a modulok. Ezeket jellemzően webáruházakban használják.

Hierarchikus rács

Így nevezhetünk bármilyen szabálytalan rácsot, melyet egy adott tartalom speciális igényeinek megfelelően alakítottak. Egy hierarchikus rács lehet akár teljesen szabad formájú, de állhat két egymásra helyezett rácsból, vagy hozzátehetők további rácselemek. Az előnye az, hogy a tartalom fontosság alapján rendezhető el a rácson belül, vagyis a legfontosabb elemek kapják a legnagyobb helyet a rácsban.

Hogyan válaszd ki a megfelelő rácsszerkezetet?

A megfelelő rácstípus kiválasztása és alkalmazása meghatározza azt, hogy mennyire lesz jól használható a weboldalad, és milyen lesz a felhasználói élménye.

Olyan rácsot kell tehát választani, mely pontosan megfelel a tartalmaidnak. Szánj rá némi időt, hogy átgondold, hogy vonal vagy hasáb, esetleg moduláris vagy hierarchikus rács lenne számodra az optimális választás. Ha a weboldaladon vannak olyan elemek, melyeket szeretnél kiemelni, a többi elem fölé helyezni fontosságban, akkor egy hierarchikus rács lesz a megfelelő. Tipikusan ilyen eset például egy online híroldal, ahol vannak úgynevezett vezető hírek, melyek nagyobb teret kapnak.

Ha viszont a tartalmadra leginkább az jellemző, hogy gyakran változik, akkor egy hasáb-alapú vagy egy moduláris rács lehet jó megoldás, ami könnyen adaptálódik bármilyen kijelzőmérethez. Ezek nagyfokú rugalmasságot engednek meg a tervezésnél is. Már csak azért is, mivel egyes tartalmak több oszlopot is átfoghatnak, vagyis nem kell ragaszkodni szigorúan az oszlopszélességhez.

Néhány tipp a rács kialakításához

Ha kitaláltad, melyik a megfelelő rácsszerkezet számodra, akkor át kell gondolnod, hogy hány hasábja legyen, mekkorák legyenek a hasábközök, illetve a margók a kijelzőmérethez viszonyítva. Alapvetően desktop, tablet és mobil méretekben kell gondolkodni, és egy 12 hasábos elrendezés általában megfelelő monitorra vagy notebook kijelzőre. A hasábok száma attól függően fog csökkenni, hogy ennél mennyivel kisebb kijelzőn jelenik meg az oldal. A drótváz-készítő eszközökkel viszonylag könnyen és gyorsan szerkesztheted a rácsot, még akkor is, ha már elkezdted a tervezést.

Gondold át, miként viszonyul a rács az oldalhoz!

Ebben az esetben arról van szó, hogy át kell gondolnod, hogy hová kerül a rács az oldalon belül, mekkorák lesznek a távolságok. Ennek fontos szerepe van abban, hogyan is működik majd a rács, mennyire teljesít jól funkcionálisan és esztétikailag.

A rácsot is tervezd meg!

Amikor egy üres oldalból indulsz ki, hogy létrehozz rajta egy használható weboldalt, akkor nyilván adja magát, hogy a megszokott rácsot használd alapként: azaz a megszokott számú hasábból és köztük a már jól ismert távolságokból álljon össze majd az oldal. Pedig érdemes átgondolni minden projekt esetében, hogy milyen rácskialakítás lenne optimális. Így elkerülheted, hogy egy olyan rácsra tervezz, ami adott esetben nem működik.

Gondold át, hogy hány oszlopra van szükséged!

Habár egy 12 oszlopos Bootstrap szerű rács a legnépszerűbb választás, nem kötelező ebben gondolkodni. Amikor tervezed a rácsot, akkor mindig azt gondold át, hogy hány oszlop felhasználásával tudod megoldani a designt.

Ismerd meg a korlátokat!

Mindig vedd figyelembe a kijelzőket, melyekre tervezed a rácsot. Nem árt azt sem tudni, hogy hogyan fogják használni az emberek. A leggyakoribb felbontások pixelben: asztali gépen 1440×1024 px, tableten 768×1024 px, mobilon 320×640 px. Alapvetően azonban 8 pixeles rácsrendszerben kell gondolkodni, ugyanis a legtöbb eszköznél a kijelzőméret pixelben meghatározva a 8 szorzata. Tehát a rácsod elemeinek értéke a 8 valamilyen szorzata legyen, mert így könnyebben kezelhető a rács. A lényeg, hogy a rácsodnak mindegyik kijelzőmérethez és törésponthoz jól kell igazodnia. Mindig ellenőrizd le a különböző kijelzőméreteknél a rács megjelenését!

Mindig a hasábokhoz igazítsd a tartalmad!

A hasábközök határozzák meg, hogy milyen távol vannak egymástól a hasábjaid, ezek választják el őket egymástól. Ami fontos, hogy amikor szöveg vagy kép több hasábon is átnyúlik, akkor azok kezdete és vége a hasáb szélénél legyen, és ne lógjon rá a szegélyre, vagy ne csak félig foglalja el a hasábot. Utóbbi is egy lehetőség, ha meg akarod törni a rácsot, amiről mindjárt szó lesz, de óvatosan kell vele bánni.

Legyél következetes a függőleges és vízszintes távolságoknál!

Gyakran előfordul weboldalakon, hogy bizonyos elemek között kisebb, más elemek között nagyobb távolságot alakítanak ki. Ez azonban rontja a design vizuális megjelenését.

Ne feledkezz meg a függőleges ritmusról!

Egy hasáb alapú designban az alapvonalakat használod a sorok elrendezésénél. Ha eltérsz ettől – vagyis nem a sorokra illeszted rá a tartalmat, hanem elcsúszva kerül alá vagy fölé -, akkor az a harmónia és a rendezettség kárára válik. A betű magasságának is illeszkednie kell az alapvonal rácshoz.

Tehát, ha mondjuk 4 pixeles egységet használsz a rácsnál, akkor olyan betűmagasságot kell választanod, mely ennek többszöröse, tehát lehet 4, 12, 32, 64 px-es magasságú.

Ne feledkezz meg a keret és a szín fontosságáról!

A keretek révén felhívhatod a weboldal egy elemére a felhasználók figyelmét. A színekkel ugyanígy vizuális súlyt adhatsz annak a területnek, ahol ez szükséges.

Kiléphetsz a rácsból!

A rácshoz nem muszáj mindig mereven ragaszkodni, bizonyos elemek elmozdulhatnak a rácsszerkezettől. Az ilyen törések kiemelik az adott elemet a weboldalból azzal, hogy nagyobb vizuális súlyt adnak neki a ritmus megtörésével.

Nem muszáj rácsban gondolkodnod

Kisebb projekteknél nem feltétlenül van szükség rács használatára, ráadásul az a legjobb, ha rács felrajzolása nélkül meg tudod tervezni a rács alapú felületet. Időről-időre mindig érdemes megnézni egy elrendezést rács nélkül is, hogy a legeredetibb megoldásokat hozd létre.

Mikor és hogyan érdemes kitörni a rácsból?

A rács tehát, mint láttuk, segítséget jelent a weboldalad elemeinek elrendezésében. Ugyanakkor, ha a weboldalba némi kreativitást csempésznél, esetleg valami kiemelnél, vagy egy kicsit mozgalmasabbá tennéd, akkor ki kell mozdulni a rácsból.

A rács használata nem jelenti azt, hogy mereven kellene ragaszkodni hozzá, inkább csak iránymutatást jelent. Ugyanakkor sokkal jobb megoldás egy-egy elemet a rácsrendszerből kiszakadva megjeleníteni, mint teljesen elhagyni a világosan meghatározott struktúrát.

Ha a rács már megvan, akkor csak a designeren múlik, hogy mikor és hogyan tör ki belőle. Ami nem azt jelenti, hogy innentől a rácsot teljes mértékben figyelmen kívül kellene hagyni. Egy-egy elem esetében viszont előfordulhat, hogy azok több oszlopot is metszenek vagy akár túlnyúlnak a rácson.

Tehát például, ha egy weboldalon a hajtás felett el kell helyezni egy bannert, akkor a designernek két lehetősége van: vagy elkezd a banner köré építkezni, és annak méreteihez igazodva alakít ki rácsot, vagy pedig a meglévő rácsrendszert megtöri a bannerrel. Utóbbi egyszerűbb lehet, és ráirányítja a figyelmet a bannerre.

Milyen elemekkel szokták általában megtörni a rácsot? Például egy animációval, mely egyébként is némi mozgást visz a weboldalba. Az animáció révén egy adott elem kiemelkedővé válik és bátorítja az interakciót. Ugyancsak a vízszintes rács megtörését eredményezi egy parallax effektus, mely azt eredményezi, hogy a weboldal háttere lassabban mozog, mint az előtérben lévő elemek. Így létrejön a 3D-hatás.

Szintén megtörhető a rács úgy, ha egy képre szöveget vagy ikonokat helyezünk. Jó kivitelezés esetén a szövegek vagy ikonok egy kép feletti rétegként jelennek meg, kiszakadva a rácsból. Ez az elkülönítés érzetét kelti és mélységet hoz létre a designban.

Nagyobb negatív tér használatával is túlléphetünk a rácson, így az az érintett elemre irányítja a figyelmet. A kontrasztos elemek vagy színek is ezt érik el: interakcióra ösztönzik a felhasználót. Jellemzően a CTA-knál és más kattintható elemeknél jelenik ez meg. A kiemelt elemek révén vonzóbbá válik a design, és finoman végigvezetik a felhasználót a tartalmon.