Webdesign
Konstantinusz Kft. © 2011
Mit kell tudni egy webdesignernek?
1 Tartalomjegyzék 1 2 3 4
Tartalomjegyzék .......................................................................................................................2 Bevezetés ................................................................................................................................3 Honlapkészítés célja ................................................................................................................4 Webdesign sajátosságai...........................................................................................................5 4.1 Ívek és görbületek, árnyékok .............................................................................................5 4.2 Átmenetek .........................................................................................................................6 4.3 Szövegek ..........................................................................................................................7 4.4 Elrendezés ........................................................................................................................8 4.5 Animációk .........................................................................................................................9 4.6 Szín világ ..........................................................................................................................9 4.7 Flash .................................................................................................................................9 4.8 Képméret ........................................................................................................................10 4.9 Használható formátumok.................................................................................................10 5 Képszerkesztők ......................................................................................................................12
2 / 12
Mit kell tudni egy webdesignernek?
2 Bevezetés Az esettanulmányban ismertetni fogom, hogy milyen ismeretekre van szüksége annak aki webdesigner akar lenni.
A webdesign nem azonos egy “sima” design-al. Egy jó desing-ból nem mindig lehet jó honlapot csinálni: vagy nagyon nehézkes, vagy egyáltalán nem lehet.
Egy designer munkaeszköze valamilyen képszerkesztő program, ahhoz is szeretnék tanácsot adni, hogy melyiket válasszuk. Főként olyan információkkal szeretnék segíteni, amelyek nem csak közvetlenül a design készítését, hanem a design, mint munkafolyamat megszervezésében segít.
Célom, hogy adjak egy olyan átfogó képet amely segítségével, hozzá kezdhet egy designer webdesign készítéséhez. Természetesen a design az egy kreatív munka marad, és mint ilyen meglehetősen szubjektív. Lesz olyan ügyfél akinek semelyik verzió nem tetszik, de amikor a designer megcsinál egy önmagának nem tetsző design-t akkor az ügyfél azt fogja választani.
A különböző képszerkesztő programok részletes ismertetésétől eltekintek, hiszen számtalan szerkesztő, van és ezek minden verziója más. Ezek általában hozzáférhetőek a hivatalos oldalon vagy a megvett termék mellé adják, esetleg külön beszerezhetőek.
3 / 12
Mit kell tudni egy webdesignernek?
3 Honlap készítés célja Ha honlapot készítünk, akkor azt egyfajta reklám céllal tesszük. Napjainkban ez egy viszonylag olcsó reklámozási forma, amivel sok potenciális ügyfélhez lehet a segítségével eljutni.
Ezért célszerű arra is gondolni, hogy az oldalon el lehessen olvasni a feliratokat, és nem szerencsés, ha minden animálódik folyamatosan, vagy villog, mert ez nagyban nehezíti az olvashatóságot.
Emellett azt is célszerű figyelembe venni, hogy aki az oldalra téved az valamit keres valamit célszerű úgy kialakítani elrendezésben az oldalt, hogy megtalálja. Ez nem olyan szorosan kötődik a designhoz, de a menüpontok, vagy esetleg kereső elhelyezkedése a designon látszik.
Tipikus probléma, hogy olyan rendszerű menüt talál ki a designer ami nem bővíthető, vagy csak nehézkesen módosítható. Ezzel az a probléma, hogy miután elindítottuk az oldalt, a statisztikából látszik, hogy milyen kulcsszavakra keresve jutnak el az oldalunkra. Ekkor szükség lehet, a menüpontok átnevezésére, illetve átrendezésére.
Alapvetően ma egy oldalnak segítenie kell, hogy a változásnak meg tudjunk felelni, ha látjuk hogy az “abc” szóra keresve jutnak el az oldalra, akkor lehet célszerű olyan menüpontot feltenni az oldalra aminek „abc” a neve.
4 / 12
Mit kell tudni egy webdesignernek?
4 Webdesign sajátosságai Alapvetően a webdesign arról szól, hogy amit készítünk abból előbb utóbb egy HTML+CSS alapokon megjelenő weboldal fog készülni. Ezt figyelembe kell venni a kialakítás elkészítésénél. Ellenkező esetben megtörténhet, hogy lesz egy szép design amiből nem lehet weboldalt készíteni.
Célszerű az egyszerűségre törekedni, nem célszerű nagyon összetett és sok színt tartalmazó design-t készíteni. És kerüljük a az erős kontrasztokat, ezek olyan zavaróak lehetnek.
A designnál oda kell figyelni arra, hogy használjunk rétegeket, szövegeknek gomboknak mindenképpen legyen külön rétege. Ezzel később megkönnyítjük a dolgunkat. Mindenképpen tudnunk kell a designból könnyen olyan verziót kiadni, hogy nincsenek rajta szövegek, hiszen azokat HTML-el helyezzük el az oldalon.
Arra is figyeljünk, oda, hogy mekkora képernyőn és milyen felbontáson néznek az emberek honlapot, mostanában 1024x768, és 1440x900 as felbontások népszerűek. Találkoztam olyan designerrel, aki megtervezte a weboldalt a grafikai gépén ami 1920x1080-as felbontásra volt beállítva. Ennek eredménye ként ha valaki 1024x768 as felbontással látogatta meg az oldalt az jobbra és balra görgethette az oldalt. Vagyis számára ez az oldal használhatatlan.
4.1 Ívek és görbületek, árnyékok A HTML sajátossága, hogy “doboz”-okban gondolkodik. Vagyis alapvetően minden elem négyszögletes. Ez persze nem jelenti azt, hogy nem lehetnek ívek az oldalon, és lekerekítések. Ha ilyesmit szeretnénk az oldalba akkor az úgy oldható meg, hogy kivágjuk háttérrel együtt.
A honlap szempontjából az árnyék egy átmenet fekete vagy szürke színből a háttér szín irányába.
5 / 12
Mit kell tudni egy webdesignernek?
Az árnyékok esetében a legcélszerűbb, ha vagy azzal együtt vágjuk ki ami az árnyékot veti, nem célszerű az árnyékot külön odailleszteni az árnyékot vető doboz vagy gomb mellé. Ha a háttér változik (pl.: az oldal felett megjelenített üzenetablak esetén) az árnyéknál figyeljünk, hogy ne fix szín hanem az átlátszóság felé menjen.
4.2 Átmenetek Egy oldalon jól mutatnak az átmenetek de túlzásba esni nem szabad vele. Napjainkban nem szokás az, hogy az oldalon belül van egy gördítő sáv és ott van a tartalom, hanem az a szokás, hogy az oldal “nyúlik” hosszában és olyan hosszú ameddig szükséges ahhoz, hogy a tartalom kiférjen.
Amennyiben több irányban hosszú átmenetet tervezünk az oldalba akkor lehet, hogy lehetetlenné tesszük, hogy nyúljon az oldal.
Egy ilyen “nyúlós” oldalt úgy kell elképzelni, hogy három dobozból áll fejléc, a közepének a háttere, lábléc. Erre egy példa, hogy HTMLben hogy fog ez kinézni. HTML példa:
Fejléc
tartalom
Hozzátartozó CSS: .hirek_fejlec{ width: 168px; height: 24px; text-align: center; background: url(/box/fejlec.png) ; } .hirek_mid{ width: 168px; 6 / 12
Mit kell tudni egy webdesignernek?
background: url(/box/kozepso.png) ; } .hirek_bottom{ width: 168px; background: url(/box/lablec.png) ; height: 5px; line-height: 5px; }
Ahhoz, hogy ezt meglehessen tenni, a doboznak 3 darabra vághatónak kell lenni, és a középső résznek ismételhetőnek. A példában a “kozepso.png” 168x1 es méretű kép amiből ismétléssel lesz folytonos háttér.
4.3 Szövegek Mint az előzőekben írtam, egy honlapon a szövegeknek olvashatónak kell lenni. Ha nem olvashatóak, akkor az oldalunknak a használhatósága jelentősen lecsökken. Ahhoz, hogy eltudjuk dönteni, hogy milyen betűtípust használjunk az oldalon, ismernünk kell, hogy a megjelenő honlap hogyan is működik.
A honlapok úgy működnek, hogy elkészítjük a HTML kódot, ami majd a szerverről letöltődik a látogató gépére. A teljes megjelenítés a látogató számítógépén történik, ezért betűtípusnak olyat kell választanunk, amit a látogató számítógépe támogat.
Vannak módszerek ennek ellenére, amivel egyedi betűtípust tudunk megjeleníteni az oldalon, de ezek általában a szövegek újra rajzolását jelentik a megjelenítő gépen, és ez sok számítással járó művelet lehet. Ennek eredményeként a látogató, lehet nem is tudja rendesen használni az oldalunkat. Valamint az egyedi betűtípusokból általában hiányoznak az ékezetes karakterek.
Alternatívaként találkoztam olyan megoldással, amikor a szövegek képként kerültek fel az oldalra. Ezzel az a gond, hogy a kereső motorok nem értelmezik. Emiatt lehet, hogy az oldal nem ér el jó helyezést a keresőkben. Általában célszerű a legtöbb operációs rendszeren elérhető betűtípust választani. 7 / 12
Mit kell tudni egy webdesignernek?
4.4 Elrendezés Az interneten több weboldal is foglalkozik ezzel a kérdéssel. Alapvetően mind egyet ért abban, hogy az emberek többsége F alakban nézi meg az oldalt, és ez alapján dönt, hogy tettszik-e neki, vagy sem.
Ezt egy olyan oldallal kell kihasználni, amiben pont ezeken a helyeken vannak lényeges részek, például a menü. Az alábbi táblázatban mutatok be egy tipikus elrendezést.
Fejléc Vízszintes menü Bal oldali menü Tartalom
Lábléc
Arra is gondolni kell, hogy a vízszintes menü, hogyan bővíthető, általában azt a megoldást szokták választani, hogy ha felé viszi a látogató az egeret, akkor alatta megjelennek az almenüpontjai. Gyakran találkozom olyan oldalakkal, amelyen a felső vízszintes menü nem csak kétszintű, hanem jóval több, vagyis miután lefelé kinyílt, még jobbra vagy balra is ki tud nyílni. Ezt sem javaslom, hiszen a látogató elveszhet a számtalan menüpontban.
8 / 12
Mit kell tudni egy webdesignernek?
4.5 Animációk Egy oldalt nagyon fel tud dobni néhány animáció. Például, ha új tartalom úgy jelenik meg, hogy A régi tartalom elhalványul, az új tartalom pedig halványból (100% átlátszóság) jelenik meg. Arra azért figyeljünk, hogy a túl sok animáció azonban zavarhatja a látogatót.
Kerüljük a folyamatosan villogó, vagy forgó animációkat. Csak olyanokat használjunk amik rövidek és nem zavarják azt aki az oldalt el akarja olvasni.
4.6 Szín világ A szín világnál arra kell figyelni, hogy ne zavarja a látogatót az olvasásban, valamint, hogy el tudja olvasni. Sokan élnek apróbb látás zavarokkal, mint amilyen a színtévesztés, ennek egyik formája, hogy zöld alapon nem látja a piros színt. Más okok mellet ezért is kerüljük, el, hogy két élénk szín közel kerüljön egymáshoz az oldalon.
Célszerű általában világos alapon sötét szöveg megjelenítést alkalmazni. Találkoztam olyan oldallal, ami fekete alapon piros betűkkel volt írva, alapvetően még el lehetett volna olvasni, de az ablakon beszűrődő napfény teljesen olvashatatlanná tette az oldalt.
4.7 Flash A flash segítségével nagyon szép animációk készíthetőek. Itt is azt javaslom, hogy olyan legyen ami az oldal betöltésénél egyszer lejátszódik, és kerülni kell a folyamatos mozgást. Leginkább a fejléc elkészítésénél tartom hasznosnak a flash-t. Például a logo 2 része beúszik két oldalról és utána úgy marad.
Nem javaslom a menü flashben történő elkészítését, mert ekkor a keresők nem fogják tudni bejárni az oldalt, és nem lesz jó helyezésünk az oldal tartalmára.
9 / 12
Mit kell tudni egy webdesignernek?
Célszerű gondolni azokra is akiknek a gépén nincs flash, ezért a flash animáció alá el lehet helyezni a flash végső állapotát tartalmazó képet is. Ez által akinek nincs flash a gépén az csak a flash animációról kell lemondania, de a fejlécet még láthatja.
4.8 Képméret A képméretet úgy értem, mint az elkészült, képek file méretét. Itt oda kell figyelni arra, hogy ne tíz darab egy megabájtos képet tartalmazzon az oldal, hiszen nem mindenki rendelkezik több tíz megabites sávszélességgel.
Egy honlap design rész tartalmazó kép reális mérete 100 kilobájt alatt van. Vannak olyan oldalak, amiknél a főoldal megnyitása 1 megabájt adatforgalmat generál. Ma egy mobil internet csomag általában havi 100-500 megabájt adatforgalmat tartalmaz, vagyis ha az oldalunk 1 megabájt forgalmat generál minden lekérésnél akkor könnyen kiszámítható, hogy a látogatónak nagyon hamar el fog fogyni az internet kerete. A mobil internetnek általában a sebessége is szerényebb, vagyis a látogatónak lehet, hogy sokat kell várnia az oldal betöltésére.
4.9 Használható formátumok Általában a weboldalon a tömörített képformátumokat szokás használni. Általában használt formátumok: •
jpeg
•
png
•
gif
Ezek közül a png esetében figyeljünk oda, hogy az Internet Explorer 6 -os verziója nem támogatja a formátum átlátszóságát, csak ha ennek megoldására alkalmas szkriptet teszünk az oldalba.
10 / 12
Mit kell tudni egy webdesignernek?
A gif képek esetében az az érdekes, hogyha átlátszó háttér előtt átmenet van azt a böngészők nem jelenítik meg jól, vagyis a hibái ellenére, ha árnyékot akarunk akkor valószínűleg jobban járunk a png használatával gif helyett.
A jpeg egyáltalán nem támogatja az átlátszóságot, viszont ez az egyik legjobban tömörítő formátum, azért mert veszteségesen tömöríti a képet. Ennek következtében a kép nem lesz annyira éles mint eredetileg volt.
11 / 12
Mit kell tudni egy webdesignernek?
5 Képszerkesztők Sokféle képszerkesztő létezik, a legtöbb designer Adobe Photoshop -al találkozik először és így azt használja munkája során. Ezen kívül jó választás lehet a GIMP-is ami egy nyílt forráskódú képszerkesztő, rengeted funkciója van gyakorlatilag, ha megtanuljuk használni bármit meg lehet vele csinálni amit a fizetős programokkal. A képszerkesztők tipikus problémája, hogy az új verziók nem támogatják a régi formátumot, és néha nem tudjuk megnyitni az új verzióval a régi képeket. Ez sajnos a legtöbb képszerkesztőre is igaz mielőtt új verzióra váltanánk nézzük meg, hogy megnyitja-e a régi verzióval lementett képeket. A gyakorlatban mivel az oldalra jpg, vagy png file-ok kellenek, ezért úgy szokták megoldani, hogy egy nagy file-ban elmentik a teljes oldal tervét és abból vágnak ki részleteket. Ez jó megoldás, hiszen nem kell egy vagy két év múlva keresgetni, hogy melyik képfájlban van az az egy rész, amit módosítani kell. Általában célszerű a design tervet akkorában elkészíteni amekkorában azt az oldalon használni fogjuk, ekkor nem ütközünk olyan problémákba, hogy folyamatosan át kell méretezni a képeket ahhoz, hogy használni tudjuk őket. Valamint a designhoz használt betűtípusokat is mentsük el a design terv mellé és őrizzük meg, hogy ha később valamilyen módosítás kell akkor rendelkezésünkre álljon.
12 / 12
