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?

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.

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? Milyen típusai vannak?

A designban a rács egy olyan rendszer, mely a felület elemeinek elrendezésére szolgál. Ilyen felület lehet egy könyv, egy magazin oldala vagy egy weboldal. 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.

Hogyan dolgozz a ráccsal?

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, milyenek lesznek az oldaltá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 áll ö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.

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.

Ne feledkezz meg a vonalakról!

Egy hasáb alapú designban is a vonalakat 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.

Miért jó a rács?

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.

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.