A Web 2.0 designer szemmel (harmadik rész)

Írta: | 2007. november 28. | kategóriák: Blogolok, Design, Web

Ízléses web 2.0A webkettes design elemek leírása elég hosszúra sikerült. Az elöző részekben szó volt a lényeges, nagy elemekeről. A jelen, harmadik és talán befelyező részben az apróságokra próbálom fektetni a hangsúlyt. Mint afféle bevezetés, megragadnám a lehetőséget egy, az elöző leírásokban nem szereplő, nagy elem ecsetelésére. Arról van szó, hogy minden webkettes oldalon megfigyelhetőek az elkülönített részek a tartalmi egységeben is. Reményeim szerint ezt a tulajdonságot tovább boncolva minden említésre érdemes elemet érinteni fogok.
A részek elkülönítése nagyon egyszerű dolog (nak tűnhet): fogok egy oda nem illő háttérszínt, nem találó szövegelemeket és készen is vagyok. Rossz! A lényeg, hogy megtartsuk az oldal áttekinthetőségét, egyszerűségét, vagyis a letisztultságot. Első lépés, hogy különítsük el az állandó navigációs elemeket. Ez álltalában a főmenü. Használjunk a designba találó, de mégis összetéveszthetetlen formákat és színeket, tisztán olvasható betűket az elkészítéshez. Ez azért fontos, hogy tudassuk a böngésző személlyel, hogy: hol van és hová mehet.

Letisztult menü
A letisztúlt menü elkészítése után fordítsunk figyelmet a tartalom fontos elemeinek kiemelésére: újdonságok, népszerű dolgok, stb. Ahogyan azt a menü készítésénél is említettem, fontos, hogy a formák és a színek az oldalba illőek legyenek. Az eltérés a menütervezés és a tartalmi díszelemek közt abban áll, hogy tartalmi elemek egységes formatervet kell kövessenek. Ez azért van, mert míg menü egy van, addig tartalmi elem több és valamilyen formában egységesség kell, hogy jellemezze a tartalmi részeket. Az egységesség elmulasztása az oldal szétesését, túlkomplikáltságát és rossz karakterét vonja magaután.

Egységes színátmenet

A sok elválasztás után kötelességemnek érzem, hogy az egybeolvasztásokról is szóljak egy néhány szót. Mivel nem jó a túl nagy el elkülönítés sem, sok technika kifejlődött a illesztések simítására. Ezekkel nap, mint nap találkozhatsz, csupán nem fordítasz figyelmet rájuk, vagy nem ilyen formálag. Néhány példa: árnyék, 3d, színátmenet, tükröződés, fényesség, stb. Mit érünk el a kellemes illesztések mellett az említett effektekkel? Sokkal inkább lelki jellege van az egésznek: szépnek látjuk a hasonló elemeket, mivel azok a valós életet tükrözik (valamilyen formában). Vegyük példaképpen a fényes gombokat. Látjuk hogy szép és szeretjük. A magyarázat egyszerű: a valós életben jó minőségű anyagokat és mesterien megmunkált felületeket látunk ezekkel kapcsolatban, pl: sima, tetszetős üvegasztal, kristálygömb, kellemes tapintás, stb.

Mit és mire használjunk

Fényes logóAz árnyék, lehetőleg egy halovány változat, jól mutat, amikor szintkülönbséget akarunk elérni. Érdemes használni példáúl 3ds logók alatt. A 3d jó szolgálatot tesz logó esetében és gyakori használatuk az ikon iparban is. Ügyelni kell, hogy ne essünk túlzásba, nem szabad sok dimenziótágító elem az oldalba. A kedvezőbb eredményért érdemes, ha egy keveset kilóg a keretből, példáúl egy figura felső része túllóg az oldalsávon, így egyrészt egységesítí az oldal részeit, másrészt interdimenzionális hatást kelt. A színátmenetek is közvetíthetnek halvány 3d hatást. Használatunknak két fő területe van: az obiektum lágyítás, pl. nagy egységek háttérszínében jól fog vagy menük esetében. A másik a tükröződések elérése. Itt tovább oszlik a dolog: fénybeesés és csillogás, illetve asztal effekt. Az fényes felület eléréséhez általában egy átlátszó-kevésébé átlátszó éles színátmenet jön segítségünkre, az utóbbi elérése valamelyest komplexebb. Az elem tükörmását megfelelő képpen térbe kell igazítani, majd egy maszkolás segítségével folyamatosan halványítani, majd áttetszővé tenni. Az oldal gyengédségének eléréséhez, a színátmenetek mellett, érdemes lekerekített formákat alkalmazni.

Érdemes figyelni!

  • Sok esetben túlzásokba esik a kedves webszerkesztő úr. A leggyakoribb hibákat egy korábbi írásomban is elemeztem, és itt talán webkettes szemmel is megemlítenék néhány dolgot.
  • Egységes legyen a mű: ha élessek a formák, a színek is azok legyenek, ha gyengéd a design, akkor a színek is lágyabbak legyenek.
  • Oda kell figyelni, hogy legyen egyértelmű különbség a szöveg és a navigálást megvalósító linkek közt.Jól formált linkek
  • Óvakodjunk a túlefektelésektől: sok árnyék, 3d, csillógás, színátmenet, stb.
  • Egyedi fényforrás, szintén árnyék, 3d, csillogás és színátmenet, illetve hasonló szépítések esetén.
  • Megfelelő kontraszt, a letisztultság segítéségéhez, az olvashatóság eléréséhez.
  • Ne használjunk sokirányú színátmenetet, és lehetőleg a függőlegeset részesítsül előnyben.

Egy szép példa a letisztult oldalakra:

Letisztultságot bemutató weboldal



Értékeld a bejegyzést!

Loading ... Loading ...

A bejegyzésre érkező kommenteket elérheted RSS 2.0 formájában vagy emailben is:

A bejegyzéshez tartozó trackback cím, illetve a permalink.

A megjegyzéseket kérlek, tedd fel érthető és illendő módon, ne fikázz le másokat, mert nem tudnak valamit, amit te már igen. A kommentár lehetőleg függjön a bejegyzéshez :)

kötelező
kötelező, titok marad
ha nincs, maradjon üres