nov
25
Írta: Tupacko, 2007-11-25, (Blogolok, Design, Web)

Az első részben szó esett az általános jellemzőkről, az oldal elrendezéséről, méreteiről és a szövegek formálásáról. Ez a rész egy más megközelítésből szemlélteti a webkettes karaktersziszikákat.

Pozitív egyszerűség

Elkülönített fejléc

Régebb is említettem, hogy az egyszerűség egy etalon a web 2.0 világában. Ezt most mélyebben is elemezném: mit is értek a pozitív egyszerűség alatt. Vegyük alapul a valós életet: ha van egy megoldásra váró feladat és két megoldási lehetőség, melyiket választjuk? Természetesen az egyszerűbb nyeri el a tetszésünk! Így van ez a weben is: a böngészőt nem érdekli, hogy mennyi mindent lehet belemocskolni egy jó, tartalmas, weboldalba. A látogatókat a tartalom érdekli; az, hogy egyszerűen megtalálja, szinte elvárássá vált.
Ha például egy weboldalt teleszúrkálunk mindenféle widgettekkel, annak nem lesz jó vége, mivel a látogató a csicsás dolgokra fog odafigyelni és nem lesz már türelme/ideje az igazi tartalom megtalálására. A hasonló kellemetlenségek elkerülésére több egyszerüsítő módszer is van a gyakorlatban. Egy bevált eljárás, ha eltüntetjük a fő tartalomhoz szorosan nem tartozó elemeket vagy kevesebb figyelemfelkeltést biztosítunk ezeknek az elemeknek. Ugyancsak ide tartoznak a sokak szerint dekorálásnak tartott, úgynevezett webkettes megbélyegzések. Az ikonok, kitűzők és egyébb szemkápráztató elemek fő célja a figyelemfelkeltés: a fontos információra való figyelmeztetés.
Web 2.0 jellegzetességWeb 2.0 jellegzetességWeb 2.0 jellegzetességWeb 2.0 jellegzetesség

Díszítés versus díszítés

A fentebb leírt bekezdésekben arról szóltam, hogy legyen egyszerű, amennyiben lehet, egy weboldal és koncnentráljunk a tartalomra. Ez a rész is oda tart, csupán a fontosságát tekintve külön alcímet kapott. A lényeg: ne az oldalt díszítsük, hanem a tartalmat. Nagyon egyszerű ezen kitétel elérése: hagyjuk a madarakra a weboldal nem fontos elemeinek komplex tervezését, pl. háttér és egyéb állandó grafikai elemek. A tervezésünk célja legyen a tartalom, fektessük a tartalom dekorálására a nagyobb hangsúlyt.
A tartalom pompálására használjunk:

  • szövegformálást: szlogenek, főcímek, alcímek, kövér és/vagy dölt betűk, kontraszt
  • háttérszíneket: hiba és információ kiemelés halvány színekkel
  • ikonokat: letisztult, érthető miniképek
  • kitűzőket: árak, verziószámok kiemelése éles körvonalú, tartalomból kiugró grafikai elemekkel
  • tükröződéseket: fényforrásos és tükör-asztalos
  • üres részeket: kellemes, tágasság érzést nyújtó tartalommentes helyek (nem szabad túlzásba vinni)

Elválasztott részek

Elkülönített fejléc

Ugyancsak az egyszerüsítést szolgálja az oldal fő részeinek szembetűnő elkülönítése is. Itt persze nem arra utalok, hogy legyen az oldal fejléce lila, a közepe citromzöld és a lábléc valami lehetetlen cián árnyalat kell legyen. A webkettő jellegzetessége az ízlésesen elkülönített fejléc és/vagy lábléc is. Természetesen régen is a legtöbb oldal törekedett a fejléc és a tartalmi egység elkülönítésére, de az csak kevés esetben nyilvánúlt meg egyértelműen. Mivel a webkettő design szempontból azt jelenti, hogy: erős, letisztult, tartalomformált, a nagy kontrasztok már nem jelentnek akadályt a webgrafikusok előtt. Miért hasznos az elkülönítés? Nagyba segíti a navigálást, ugyanis az olvasó különösebb odafigyelés nélkül látja, hogy hol van a menü és hol kezdődik a lényeges tartalom.
Mit érdemes a fejlécbe tenni: logót és a hozza tartozó szlogent és esetleg a menüt.
Mit érdemes a tartalmi részbe ágyazni: esetleg a menüt, ha azt nem helyeztük a fejlécbe, de ügyelni kell, hogy megfelelően elkülönűlt legyen az oldal tartalmától: látszoljon, hogy az a menü.
Mit érdemes a láblécbe tenni: kapcsolat felvételi információ, a logó, fontos menüelemek, RSS feliratkozási lehetőség, egyebek.

Elkülönített fejléc

Ennyi fért ebbe a részbe, de hamarosan folytatás következik!

Ezek az ikonok ún. közösségi könyvjelző oldalakra mutatnak, ahol meg lehet osztani másokkal is amit fontosnak találsz.
  • description
  • blogtercimlap
  • Linkter
  • bodytext
  • del.icio.us
  • NewsVine
  • Furl
  • Reddit
  • Spurl
  • Technorati
  • YahooMyWeb
  • co.mments
  • Google
  • Live
  • Ma.gnolia
  • TwitThis
( szavazat)
Loading ... Loading ...



Hozzaszólások:
2 hozzaszólás a "A Web 2.0 designer szemmel (második rész)" bejegyzéshez.
NormY, weboldala, 2008. április 20., 13:49

Gratula! Szuper ez a cikk, nagyon tetszet, teljesen egyetértek a leirtakkal, nagyon fontosnak találom webdesign szempontból a jól elkülönített, átlátható tartalmat.
u.i. az oldal is vagány, tetszik hogy már nálunk is lehet színvonalas magyar leírást találni.. csak igy tovább


Tupacko, weboldala, 2008. április 20., 14:07

Köszi a szép szavakat. Igyekszem az oldalra csak olyan bejegyzéseket kitenni, ami megérdemli az olvasóim figyelmét :)


Szólj hozza!

Név: 
Email: 
Weboldal *
Hozzaszólás: 
*Nem kötelező megadni, ha nincs weboldalad, akkor hagyd üresen!