Weboldal építésekor az ösztön az, hogy kitöltsd a helyet. Még egy szekció, még egy kiemelés, még egy sor szöveg. Az ösztön, amely jobb weboldalakat hoz létre, az ellenkezője: hagyj teret. A fehér tér nem üres hely. Ettől lesz minden más az oldalon olvasható, megbízható, és könnyen cselekvésre ösztönző.
A fehér tér a dizájnban az oldalon lévő elemek közötti és körüli üres területeket jelenti. Idetartozik a szövegsorok közötti hely, a gomb belső margója, a címsor és az alatta lévő bekezdés közötti rés, és a szekciók körüli margók. Egyik sem elpazarolt. Mindegyik dolgozik.
A név kissé megtévesztő: a fehér térnek nem kell fehérnek lennie. Az oldal minden olyan területe az, amelyet nem foglal el tartalom. A sötét háttér a szekciók közötti bőséges térközzel ugyanolyan hatékonyan használ fehér teret, mint egy fehér háttér.
Miért fontos a fehér tér egy weboldalon?
A fehér tér befolyásolja, hogyan érzékelik és dolgozzák fel a látogatók a tartalmat. A bőséges térközű oldalak könnyebben olvashatónak, professzionálisabbnak és megbízhatóbbnak hatnak. A kevés térközű oldalak zsúfoltnak és nehezebben követhetőnek tűnnek, bármilyen jó is a tartalom.
Az észlelési ok egyszerű. Ha az elemek közel vannak egymáshoz, az agynak többet kell dolgoznia, hogy eldöntse, hol ér véget az egyik és hol kezdődik a másik. Ha az elemek körül van hely, a szem erőlködés nélkül, természetesen halad végig az oldalon. A látogató kisebb erőfeszítése azt jelenti, hogy több figyelme marad a tényleges tartalomra és a cselekvésre ösztönző elemekre.
A fehér tér a márka pozicionálását is kifejezi. A prémium és luxusmárkák következetesen több fehér teret használnak, mint a költségvetési vagy árra építő márkák. A bőséges térköz és a minőség közötti asszociáció mélyen belénk ivódott. Az a vállalati weboldal, amely zsúfoltnak tűnik, szándékolatlan jelet küld a márkáról, bármit mond is a szöveg.
Milyen típusú fehér tér van a webdizájnban?
Makro fehér tér
A makro fehér tér az oldal nagyobb szekciói közötti nagy léptékű hely. A nyitószekció és a funkciók szekció közötti rés, a tartalom két oldalán lévő margók, az utolsó szekció és a lábléc közötti hely. A makro fehér tér adja az oldal általános levegősségét, és meghatározza, mennyire nyitottnak vagy sűrűnek hat az elrendezés első pillantásra.
Mikro fehér tér
A mikro fehér tér a tartalmon belüli kis léptékű térköz: a szövegsorok közötti hely (sormagasság), az űrlapon a címke és a beviteli mező közötti rés, a gomb belső margója. A mikro fehér tér határozza meg, mennyire olvashatók az egyes elemek. A szűk sortávolságú bekezdés nehezebben olvasható, mint ugyanaz a bekezdés bőséges térközzel, akkor is, ha a betűméret azonos.
Aktív fehér tér
Az aktív fehér tér az a hely, amelyet szándékosan hagynak a figyelem irányítására vagy a hangsúly megteremtésére. A cselekvésre ösztönző gomb körüli bőséges hely például vizuálisan elszigeteli, és kiemeli a környező tartalomból. Ez a fehér tér mint dizájneszköz, nem csupán mint levegő.
Passzív fehér tér
A passzív fehér tér az a természetes hely, amely az elrendezés következtében van a tartalom körül, nem szándékos dizájndöntés eredményeként. A bekezdés vége és a tartalmi oszlop széle közötti rés, az oldal alján a lábléc előtti hely. Szükséges, de nem stratégiai.
Mennyi fehér tér elég?
Nincs rögzített szabály, de a leggyakoribb hiba, hogy túl keveset használnak, nem túl sokat. Ha bizonytalan vagy, növeld a térközt, és nézd meg, jobban érzi-e magát az oldal. Szinte mindig így van.
A működő fehér tér mennyisége a tartalom típusától és a közönségtől függ. Egy technikai felhasználóknak szóló dokumentációs oldal lehet sűrűbb, mint egy általános látogatóknak szóló kezdőlap. Egy luxustermék oldalának több levegő kell, mint egy összehasonlító táblázatnak. A megfelelő mennyiség az, amitől a tartalom a legkönnyebben olvasható, és a legfontosabb elemek a legkönnyebben észrevehetők.
Gyakorlati teszt: ha hunyorítva nézed az oldalt, és minden összemosódik, nincs elég fehér tér. Ha a szemed azonnal megtalálja a főcímet és a cselekvésre ösztönző elemet, amikor az oldalt egészében nézed, a térköz működik. A mi a vizuális hierarchia cikk elmagyarázza, hogyan működik a térköz a mérettel, a színnel és a kontraszttal együtt a látogató szemének irányításában.
Gyakori fehértér-hibák a vállalati weboldalakon
A leggyakoribb probléma az egymásra zsúfolt, vizuális elválasztás nélküli szekciók. Ha a nyitószekció, a funkciók szekció, a vásárlói vélemények és a cselekvésre ösztönző elem levegő nélkül folynak egymásba, a látogatók nem látják, hol ér véget az egyik téma és hol kezdődik a másik. A szekciók közötti függőleges hely hozzáadása általában az az egyetlen változtatás, amely a legtöbbet javít egy zsúfolt kezdőlapon.
A törzsszöveg szűk sortávolsága nehezebben olvashatóvá teszi a bekezdéseket, különösen mobilon, ahol a sorhossz rövidebb, és a szemnek gyakrabban kell irányt váltania. A betűméret legalább 1,5-szeresének megfelelő sormagasság a weben az olvashatóság széles körben használt szabványa.
A túl kevés belső margóval rendelkező gombok kicsinek és nehezen koppinthatónak hatnak. Az a gomb, amely technikailag megfelelő méretű, de alig van margó a szöveg körül, vizuálisan kisebbnek tűnik, mint amekkora, és kevesebb kattintást kap. A bőséges belső margó fontosnak és könnyen használhatónak érezteti a gombokat.
Az élről élre futó, oldalmargó nélküli tartalom kellemetlenül olvasható, és befejezetlennek mutatja az oldalt. Minden tartalmi területnek jót tesz az egységes margó, amely távol tartja a szöveget a képernyő szélétől, különösen mobilon. A hogyan tedd mobilbaráttá a weboldalad cikk a térközt a kisebb képernyőkre vonatkozó tágabb dizájnszempontok részeként tárgyalja.
Hogyan hat a fehér tér a SEO-ra?
A fehér tér közvetve hat a SEO-ra az általa teremtett felhasználói élményjeleken keresztül. A könnyebben olvasható oldalaknak alacsonyabb a lepattanási arányuk, és hosszabb az oldalon töltött idő. Ezek a viselkedési jelek azt üzenik a keresőknek, hogy az oldal jól szolgálja a látogatóit, ami idővel hozzájárul a helyezésekhez.
Az oldalsebesség is releváns. A fehér térnek nincs fájlmérete, ezért a több térköz nem lassítja az oldalt. De azok a dizájndöntések, amelyek néha a sűrű elrendezésekkel járnak, például a szorosan egymás mellé rakott nagy képek, a szekciók közötti nehéz animációk, a túlzott tartalom, mind hathatnak a betöltési időre. A letisztultabb, levegősebb elrendezés gyakran egybeesik a gyorsabbal. A mi a SEO cikk bemutatja, hogyan kapcsolódik a felhasználói élmény és a technikai teljesítmény a keresési helyezésekhez.
Hogyan kezeli a WEMASY a fehér teret
A WEMASY weboldalépítőjének sablonjai egységes alapértelmezett térközökkel készülnek, amelyek kézi beállítás nélkül is olvasható, professzionális elrendezést adnak. A szekciók belső margói, a sormagasságok és az elemek közötti térközök olyan értékekre vannak állítva, amelyek minden eszközön működnek. A vizuális szerkesztővel az egyes szekciók térközét módosíthatod, ha az alapértelmezés nem illik a tartalmadhoz, így kontrollt kapsz anélkül, hogy a nulláról kellene kezdened.
Nézd meg, mi tartozik bele a WEMASY weboldalépítőbe, vagy tekintsd át a csomagokat az árak oldalon.
Gyakran ismételt kérdések
Több fehér tér kevesebb tartalmat jelent?
Nem feltétlenül. A fehér tér az elemek közötti és körüli térközről szól, nem a tartalom elhagyásáról. Lehet tartalomban gazdag oldalad, amely mégis hatékonyan használja a fehér teret: egyértelműen csoportosítja a kapcsolódó tartalmakat, teret ad a szekcióknak, és nem próbál mindent egyszerre megmutatni. Az a vélekedés, hogy a fehér tér hozzáadása tartalom elhagyását jelenti, az egyik oka annak, hogy a vállalati weboldalak túl sűrűek lesznek. A több fehér tér általában jobban rendezett tartalmat jelent, nem kevesebbet. A WEMASY weboldalépítőjével ezt közvetlenül a saját weboldaladon beállíthatod.
Fontos a fehér tér mobilon?
Igen, és vitathatatlanul még fontosabb, mint asztali gépen. Kis képernyőn a túl sűrű tartalom nehezebben olvasható, és nehezebb pontosan rákoppintani. A koppintási felületek körül térköz kell, hogy megbízhatóan működjenek. A sormagasságoknak bőségesnek kell lenniük, hogy a rövid, tördelt szövegsorok olvashatók maradjanak. A mobilon keskenyebb képernyő azt jelenti, hogy minden térközdöntés közvetlenebbül hat az élményre, mint egy széles asztali elrendezésben. Közzététel előtt ellenőrizd az összes térközt egy valódi telefonon.
Lassíthatja a fehér tér a weboldalamat?
Nem. A fehér tér CSS-térköz, amelynek nincs jelentős fájlmérete. Ha több belső margót, külső margót vagy sormagasságot adsz egy oldalhoz, az nem növeli a betöltési időt. A betöltési időt az a tartalom befolyásolhatja, amely kitölti a helyet: nagy képek, beágyazott videók, nehéz szkriptek. Az optimalizált tartalommal teli, levegős elrendezés ugyanolyan gyorsan betöltődik, mint a sűrű, ugyanazzal a tartalommal, és általában lényegesen jobb használni.
Honnan tudom, hogy a weboldalamon túl kevés a fehér tér?
A legegyértelműbb jel, hogy az oldal egészében nézve zsúfoltnak vagy nehezen olvashatónak tűnik. Konkrét jelek: a szöveg közel fut a képernyő széléhez, a szekciók vizuálisan összeolvadnak egyértelmű törés nélkül, a gombok kicsinek látszanak, bár technikailag elég nagyok, és a bekezdések fárasztók olvasni. Az egyik legmegbízhatóbb módszer a fehértér-problémák azonosítására az, ha megmutatod az oldalt valakinek, aki még nem látta, és megfigyeled, hova néz először a szeme, mert a tartalom ismerősége láthatatlanná teheti a sűrűséget a dizájner számára.
Mi a különbség a padding és a margin között a webdizájnban?
A padding az elem belső tere, a tartalom és a szegély között. A margin az elem külső tere, az elem és a körülötte lévő elemek között. A gyakorlatban mindkettő hozzájárul a fehér térhez. A gomb belső paddingje határozza meg, mennyi hely van a gomb szövege körül. A címsor alatti margin határozza meg, milyen közel van a következő bekezdés. Mindkét tulajdonságot úgy állítják be, hogy olyan térközt hozzanak létre, amelytől az oldal olvasható és jól rendezett.