9 alapelv a jó webdizájnhoz, Igazítás

Zina — Mon, 25 Aug 2008 06:00:44 +0000

Csakúgy, mint a nyomtatott formában, a webes megjelenésben is igen fontos, hogy a dolgok szépen rendezettek legyenek. Persze nem azt mondom, hogy legyen minden egy vonalban, de igenis legyenek a dolgok következetesen elhelyezve az oldalon. A szépen beigazított dizájn rendezettséget és kezelhetőséget tükröz.

Ha lehet, akkor készíts egy rácsos hálót (Photoshopban igen egyszerűen ezek behúzgálhatók), és építsd ahhoz a többi elemet. Angolul tudóknak találtam néhány jó forrást a témában.

Designing With Grid-Based Approach – itt nagyon jó példák vannak, illetve a folyamat is szemléltetve.
Design By Grid – ők pedig egy egész weboldalt szántak a rácshoz épített dizájnnak.

9 alapelv a jó webdizájnhoz, Építkezés

Zina — Thu, 14 Aug 2008 06:30:31 +0000

Mióta a a dizájnerek áttértek a CSS-sel való építkezésre, hála égnek, kicsit könnyebb lett az élet. Ennek ellenére vannak dolgok, amit figyelembe kell venni még akkor, amikor az oldalt a Photoshopban építgetjük.

Például:

Meg lehet-e csinálni?

Kiválasztottunk egy nagyon szép betűtípust, de vajon közte van-e a HTML-ben használtak közt? Mindenki látni fogja-e azt a típust? Még a leggyakoribbaknál is az alábbi módon érdemes a betűtípust megadni:

body {font-family: Verdana, Arial, Sans-Serif;}

Ha van Verdana betű a gépén, azzal fog látszani. Ha nem, akkor Arial-lal. Ha netalántán az sincsen, akkor az alapértelmezett Sans-Serif típussal fog megjelenni.

Figyelni kell arra is, hogy bár gyönyörűnek tűnhet az 1100px széles dizájn, az viszonylag sok látogatóknál kilóg a képből, és vízszintesen is görgetniük kell majd a képernyőt. Fontos tudni, mit tudunk megcsinálni és mit nem.

Mi történik, ha a böngésző ablakot átméretezik?

Ismétlődő hátterünk lesz? Hogyan fognak azok működni? Középre van igazítva vagy balra?

Vágjunk-e bele technikailag bonyolult dolgokba?

Még a CSS-ben is adódnak nehézségek, pl. a pozícionálás, ott is leginkább a függőleges igazítás. Nehézkes, bonyolult, így jobb azt kihagyni.

Az apró változtatások megkönnyíthetik az építő munkánkat?

Ha egy objektumot különböző helyekre téve próbálkozunk annak elhelyezésével, gondoljunk arra is, hogy azt később hogy kell majd lekódolnunk a CSS-ben. Pl.: Ha egyes elemek keresztezik egymást, már egy fokkal nehezebb dolgunk lesz. Meg kell találni az egyensúlyt a szép dizájn és a kódolás között. Erre is gondoljunk, amikor elhelyezzünk a Photoshopban az elemeket.

Hogyan egyszerűsítsük meg a dolgunkat, különösen a nagy oldalaknál?

Régebben az oldalaimhoz még én is csináltam kép alapú gombokat. Ha például volt egy letöltés gomb, akkor csináltam neki egy kis ikont, és azt szúrtam be a megfelelő helyekre. Mostanában, ha már ilyesmiről van szó, akkor CSS-ben elkészítem a gombot, aztán onnantól kezdve nem is foglalkozom vele. Lehet, nem olyan rugalmas így csinálni, de nem kis időt meg lehet vele spórolni.

.letoltes { background: url(images/download.png) no-repeat left; width:50px; height:50px; display:block; }