Webdesigner leszel s katona, vadakat terelő juhász… 2

brainA DTP – webdesign segédlet ebben a részében főleg azokat a pontokat járjuk végig, hogy melyek azok a területek ahol máshogyan kell gondolkozniuk az alkotóknak ha munkájukat a webre szánják nem pedig papírra. Öveket becsatolni, (legalábbis első egypár olvasatra) kreativitást gátló szabályok következnek.

Lefelé minden nyúlik

A következő specialitás az, hogy a honlapok többnyire lefelé nyúlékonyak, azaz ahogy növekszik bennük a különböző alkatrészekbe elhelyezett szöveg, a magasságuk úgy változik. Tehát ha van a design tervben egy kis képecske a bejegyzésből és mellette a cikkből egy bevezető szöveg, akkor biztosak lehetünk benne, hogy a valóságban a szöveg nem pont akkora helyen fog elterülni mint a design tervben. Vagy hosszabb lesz, vagy rövidebb, de biztosan nem akkorra, főleg nem tetszőleges monitor felbontás esetén.

Ezzel egyetemben a nyomtatással ellentétben a betűk mérete könnyedén átméretezhető a user oldaláról. Mostanra minden böngésző (oprendszer) rendelkezik azzal a funkcióval, hogy user átméretezheti a honlap szövegét amikor csak kedve tartja.

Emiatt a designereknek tudatosnak kell lenniük arról, hogy a gondosan elhelyezett szöveg elemek nem feltétlenül pontosan úgy jelennek majd meg mindenkinél mint ahogy az a tervben szerepel.

Akik pedig implementálják a desingt azoknak arra kell figyelni, hogy 2 betűméret növelésig ne hulljon darabjaira az oldal.

A lefelé nyúlás a hátterek esetében is problémákat szül, de erről a következő pontban lesz szó.

Hátterek

A megfelelő háttér kiválasztása szintén fontos a nyomtatott médiák és a weblapok esetében is. Azonban a kettő igényei között jelentős eltérések vannak.

Nyomtatásban egy elhalványított fotó a háttérben általában szépen néz ki. Monitoron az emberek 30%-ának komoly problémákat okoz egy ilyen hátterű weblap szövegének olvasása. Ezért a szövegek alá ne használjunk képeket, csak homogén hátteret. Ezzel együtt arra is figyelni kell, hogy monitoron valamivel nagyobb kontraszt különbségnek kell lennie a háttér és a szöveg között mint nyomtatásban ahhoz, hogy könnyen olvasható maradjon.

Kifutó

A mi van a nyúlon túl kérdés miatt azt hiszem nem szorul már különösebb magyarázatra de a kifutók a weben nem működnek csak bizonyos megszorításokkal. Egy balra igazított lap esetében lehet kifutóra tenni a bal oldalon fent és lent de jobb oldalon (illetve a jobb felső és jobb alsó sarkokba) nem, mivel itt a papírral ellentétben lesz a monitoron folytatás.
Középre igazított weblap esetén csak fent és lent lehetnek kifutók, oldalt és a sarkokban nem.
Ha mindenáron ragaszkodunk a kifutóhoz akkor kell az oldalnak egy vizuális keretet adni amihez kifut a kifutó.
Kifutós weblap
Például ez a fenti weblapterv a jobb felső sarokban lévő kifutón lévő cicmójával csak akkor lesz működőképes, ha az itt megjelenő tervre ráteszünk egy külső keretet. A papírnak ugye fix a mérete, a böngészőablaknak viszont nem. Akkor ha nagyobb a böngészőablak mi van a kifutótól jobbra? Le van vágva a cicmó és folytatódik ez a ciklámenes szín? Hát elég furán nézne ki.

Befolyatás

Papíron bármilyen forma körülfolyatható szöveggel. Weben csak a téglalap alapú befolyatás él egyenlőre (ha jól rémlik a CSS3 változtatna ezen). Ez van.

Színátmenetek

A színátmenetek a méretek rugalmassága és a nyúlon túli problémák miatt kerülnek terítékre. Ha mondjuk a design terv szerint a háttér a tetején citromsárga, az alján narancssárga akkor az egy bizonyos magasságra fog csak teljesülni. Ha a tartalom rövidebb, akkor maga a eboldal is “alacsonyabb” lesz, azaz a színátmenet nem fog eljutni a végéig. Ennél rosszabb ha a tartalom hosszabb mint ahogy azt a design terven gondolták és az oldal magasabb mint a színátmenet, mert akkor egyből kezelni kell azt a kérdést, hogy mi van a színátmenet befejeződése után. Az, hogy folytatódjon az alsó, azaz a vég szín jó megközelítés, de nem minden esetben ad szép eredményt.

Ezért a magam javaslata a függőleges (fentről lefelé futó) színátmenetekre az, hogy az átmenet a rendelkezésre álló hely felső 1/3-ában, maximum felében fejeződjön be. Azaz maradva a hátteres példánál a várható legkisebb magasság, illetve az egy képernyőre kiférő rész felső egyharmadánál.

A vízszintes színátmenetek (amik balról jobbra futnak) az átméretezhetőség miatt szintén macerásak általánosságban jobb kerülni őket, ha nagyon vágyunk rájuk akkor itt is marad az 1/3-os szabály.

Interaktivitás

A nyúlon túlihoz hasonló arányokkal az a pont amire a designerek sokszor nem gondolnak. Kivettük a kezükből a design eszközök jó részét, de cserébe itt a kezükbe adunk valamit a a nyomtatott formában nem létezik, az ineraktivitás.

Egy weblapon vannak gombok amiket benyomhatunk, linkek amikre rámutatunk, menük amikre kattintunk. Az interaktivitás a weblapok alapvető járuléka. Egyrészt nem szabad kihagynunk azt a lehetőséget, hogy a designerek az interaktivitást biztosító elemekkel is szépítsék a weblap megjelenését, másrészt a működő weblapnak meg kell felelnie a látogatók konvencióinak.

A linkek többnyire alá vannak húzva, vagy valamilyen más módon kiemelkednek a szövegből, máskülönben soha senki nem találja meg őket. A linkeknek reagálni kell arra, hogy ha valaki az egérrel rájuk mutat, úgy hogy megváltozik a színük vagy az aláhúzásuk főléhúzássá alakul vagy valami tesznek.
Ha a user rámutat egy menüre annak is jeleznie kell vizuálisan, hogy igen, énrám lehet kattintani. Ezért ezekre is ki kell dolgozni, hogy mi hogyan néz ki ha rámutatnak az egérrel, vagy rákattintanak.

One thought on “Webdesigner leszel s katona, vadakat terelő juhász… 2

  1. “Weben csak a téglalap alapú befolyatás él egyenlőre”

    Alapvetően igaz, bár trükközéssel megoldható (pl. különböző szélességű, floatolt divekkel ívre, görbére is folyathatunk szöveget).
    Apróság még: nem egyenlőre, hanem egyelőre (bocs, gondolom elütés).

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.