A webdesign-ban rendkívül sok eszköz, megközelítés létezik. Ilyenek például a minimalizmus, a flatdesign, a megfelelő kontraszt alkalmazása. Viszont van egy szintén kiemelkedően fontos eszköze, ez pedig nem más, mint a white space.
Ha egyszerűen akarjuk megfogalmazni, akkor ez az a terület, amely körülveszi a tartalmaidat. Pontosabban? A széles margók a weboldaladon, a képeiden belüli, szövegblokkjaid, valamint még a betűk közti üres terek is ide tartoznak.
A „white space” elnevezés Kínából származik, ahol a festészet, kalligráfia és a kerttervezés egyik alapelve a negatív tér használata, amelyet „kóng bái” (空白) néven ismernek. Ez a kifejezés szó szerint „üres helyet” jelent,
de a kínai művészetben mélyebb jelentéssel bír: az üres tér nemcsak a kompozíció egy része, hanem egyenrangú azzal, ami látható.
A kínai művészetben az üres tér szimbolikus szerepet is betölt, lehetőséget ad a nézőnek arra, hogy a képzeletével töltse ki a hiányzó részeket, és segít egyensúlyt teremteni a telített és üres részek között. Ez az esztétikai elv átemelődött más művészeti ágakba és kultúrákba, beleértve a modern grafikai tervezést és webdesignt is.
A minimalizmus és a Bauhaus mozgalom is átvett hasonló koncepciókat, amelyek később a nyugati design-ban is elterjedtek. A whitespace, mint tervezési alapelv tehát erős filozófiai és kulturális hátteret hordoz, ami Kínából indult, majd globálisan elismertté vált.
Kínában például egy, az ebben a szemléletben működő múzeum is található:
A white space megléte kiegenysúlyozottá, átláthatóvá teszi a tartalmaidat. És félreértés ne essék, a white space nem azért fehér, mert fehér színűnek kell lennie. A lényeg, hogy ez egy olyan terület,
amely nem tartalmaz elemeket. Egy képen belül is lehet ilyen üres, negative terület.
A webdesignban és a grafikai tervezésben az üres tér két fő kategóriára osztható: mikro és makro whitespace.
Ezek eltérő szinteken hatnak a vizuális elrendezésre és a felhasználói élményre, de mindkettő fontos szerepet játszik a design harmóniájában.
1. Mikro whitespace
A mikro whitespace a kisebb üres terekre utal, amelyek az elemek között közvetlenül helyezkednek el. Ez a tér szövegek, bekezdések, sorok, karakterek és kisebb grafikai elemek között jelenik meg.
Például a betűk közötti távolság (kerning), a sorok közötti tér (leading), és a gombok körüli puffer tér mind mikro whitespace-nek számít.
Célja és hatása:
2. Makro whitespace
A makro whitespace a nagyobb üres területekre vonatkozik, amelyek a fő elrendezési blokkok, elemek körül találhatók, mint például a képek, szövegek és modulok körüli tér. Ez az a tér, amely a nagyobb struktúrákat választja el egymástól, és meghatározza az egész elrendezés vizuális ritmusát.
Célja és hatása:
A passzív és aktív whitespace a designban két különböző célt szolgáló üres tértípus, amelyek más-más módon segítenek a vizuális struktúrák kialakításában és a felhasználói élmény javításában.
1. Passzív whitespace (passive white space)
A passzív whitespace azok a természetes üres terek, amelyek a design alapvető elemei körül alakulnak ki, és amelyek nem kifejezetten a vizuális hierarchia vagy a figyelem irányításának céljával kerültek elhelyezésre.
Ezek a terek automatikusan megjelennek a szövegek, képek és más elemek között a tartalom olvashatóságának biztosítása érdekében.
2. Aktív whitespace (active white space)
Az aktív whitespace szándékosan létrehozott üres tér, amelyet a designerek tudatosan használnak a figyelem irányítására, a vizuális hierarchia kialakítására, valamint a struktúra és a kompozíció javítására.
Ez a fajta whitespace segít az egyes elemek kiemelésében, és a designban egyensúlyt, fókuszt teremt.
Nagy üres területek, amelyek egy fontos elem körül vannak, például egy címsor vagy gomb körül, hogy kiemeljék azt.
Üres terület használata egy oldal szélén, hogy légiesebbé tegye a layoutot.
Jellemzői:
A legjobb példa erre a Google kezdőoldala!
Nem is gondolnád, hogy míg ezek az üres terek „láthatatlanok”, még is kulcsfontosságúak. Ha túl keveset vagy használsz, túlzsúfoltak, átláthatatlanok és olvashatatlanok lesznek a tartalmaid, ha pedig túl sokat, akkor
előfordulhat, hogy nem azt az üzenetet közvetíti majd weboldalad, amit szeretnél.
A megfelelő alkalmazásra jó példa:
Nézzük, hogy hol tudod alkalmazni:
Annak érdekében, hogy eldöntsd, megfelelő mennyiséget használsz ezekből a terekből, tegyél fel magadnak néhány egyszerű kérdést:
Könnyű eligazodni a tartalmaim között, nem túl zsúfult?
Könnyen el lehet olvasni a szövegeimet, nem fárasztja a szemet?
Nem túl sok az üres tér, érvényesülnek megfelelően a tartalmi elemek?
Igyekezz megfelelően hangsúlyozni a weboldalad tartalmi hierarchiáját. A különböző blokkok között is hagyj megfelelő helyet, illetve figyelj, hogy a CTA (cselekvésre ösztönző) gombokon belül is hagyj megfelelő helyet, hogy egyértelmű legyen a látogató számára, mi a dolga.
AMIRE KIEMELTEN FIGYELJ!
Az, hogy asztali verzión valami jól néz ki, még nem jelenti azt, hogy telefonon is jól fog működni! A mai világban az emberek 80%-a használja mobilját böngészésre, így felelőtlen döntés lenne ezt figyelmen kívül hagyni!
Telefonon tartsd szem előtt a felhasználói élményt, ha szükség van rá, rövidítsd le a tartalmaidat, emeld ki a lényeget, rendezd át a sorrendet! Majd ha ez megvan, kezdj el kísérletezni az üres terekkel.
Szia! Évi vagyok, webdesigner! A blog, ahol most jársz azért készül, hogy összegyűjtsem azt a tudásanyagot, amelyet bátran fel tudsz használni, ha elakadnál vagy nem értenél valamit a design területet illetően. Igyekszem a lehető legérthetőbben, tippekkel, trükkökkel érdekességekkel izgalmassá tenni az itt töltött időt.
Ha úgy érzed, van olyan téma, amiről szívesen olvasnál, írd meg nekem!
Ha úgy érzed, segítségre lenne szükséged, keress bátran és segítek neked. ÁTbeszéljük az elakadásaidat és megtaláljuk a megfelelő megoldást. Legyen szó akár weboldal készítésről vagy egyéb problémáról.
