Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2020-04-010 komment

Rács a webdesignban: mi az a rácsszerkezet? És hogyan érdemes használni?

Tartalomjegyzék
Bővített tartalomjegyzék

Bármilyen webdesignról legyen szó, ma már mindenhol rács alapon szerveződő designba futhatunk bele. A rács-alapú design nem új, ennek ellenére még nem igazán foglalkoztunk vele a blogban, így most megtesszük. (Frissítés, 2021.07.13. – Kibővítettük néhány újabb tanáccsal ezt a fejezetet: Néhány tipp a rács kialakításához)

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. De lássuk először azt, hogy:

Mi az a rács? Miért hasznos?

A designban a rács egy olyan rendszer, mely a felület elemeinek elrendezésére szolgál, a felhasználó 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.

A rácsrendszerek korlátot jelentenek a szabadon szárnyaló fantázia számára, ugyanakkor segítenek is azzal, hogy egy rendszerbe terelik azt. Csökkenti a lehetőségek számát, mert a designt a rácsra kell építeni.

A rács ezért, 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.

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.

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.

Pixel rács

A digitális kijelzők rengeteg pixelt tartalmazó rácsok, és olykor a designerek is pixelről pixelre terveznek meg képeket. Ha a Photoshopban közel zoomolsz egy dokumentumra, akkor egy pixelrács fog megjelenni.

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.

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

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. 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 az induló és a záró elemek helyzetét vedd figyelembe!

A szegélyek 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.

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.

Kategória: Design | Címke: , ,

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.

Comments are closed.