Weboldal grafika tervezése elméleti síkon

Már régóta ígérgetem a cikket, amiben leírom opendir design cseréjét, de ebből már nem lesz semmi. Mivel elfelejtettem már a dolgot, ezért inkább elkezdem részletesebben előröl. A cikksorozat első részében néhány pontban a tervezés elméleti részéről lesz néhány gondolat. Utána svájci bicskát rántunk és megrajzoljuk GIMP-ben. Majd mint egy levezetésképpen összerakjuk a kész weboldal sablonját CSS és XHTML módon. Természetesen a végterméket bárki felhasználhatja, szabadon.

• A webgrafika gyakorlati megvalósítása
• Grafikából szabáványos CSS és XHTML sablon

Mielőtt bármilyen rajzolásba kezdenénk, néhány kérdésre meg kell találnunk a választ:

• Mi a célunk az oldallal most és a jövőben
• Monitorfelbontás, web-design széllessége
• Színek kiválasztása
• Elrendezés és megvalósítás
• Fejlécek, láblécek, oldalsávok
• Reklámok és űrlapok a sablonon (kereső, belépés..)
• Menük elhelyezése
• Látogatók száma és optimalizálás
• Kütyük
• Ötletelés
• ERROR(„M;T”)

A tervezés folyamatában eldöntendő kérdések:

Mi a célunk a weboldallal?
Fontos eldönteni rögtön az elején, mi a célunk a weboldalunkkal, vagy az új megjelenéssel. Ha marketing céljaink vannak a honlappal, vagyis szeretnénk egy kis népszerűségre szert tenni (kereső és látogatói oldalról), akkor érdemes tovább olvasni a leírást. Ezzel együtt a tervezés, megvalósítás és teszt időszakokban folyamatosan arra törekedjünk, hogy kezdő felhasználókat se riogasson az oldal.

Nagyon hasznos Link a témakörben:
http://www.nagygusztav.hu/


Céges honlapok tervezési tévedések:

Ha viszont csak az vezérel bennünket hogy a mi honlapunk legyen a legszebb, leginteraktívabb ahol még az egérkurzor is zászlóként lengedezik, komoly zenei aláfestés közepette, azzal valószínű marketing szempontból rögtön az elején megástuk a weboldal sírját. (Brávó) (Ez nem vonatkozik egy márka vagy egy önálló termék bemutatására, ott kifejezetten hasznos lehet) Bár manapság már a keresők indexelik az animációs tartalmakat is, de ezeket a tartalmakat nem kis csapás naprakészen tartani, ráadásul az effekten kívül szinte semmi haszna a legtöbb esetben.

Valószínű hogy ez a rész X időn belül már nem állja meg a helyét (lásd: SecondLife, Lively), de most 2008.-ban még ez a pálya. Hallottam már saját fülemmel olyat, hogy a megrendelő az új honlapjának az elkészültét tűzijátékkal szerette volna mindenkivel tudatni. (Értsd: Intró oldalon mindenkit egy tűzijáték fogadott volna, megfelelő csinnadrattával. Annyira aranyos volt, olyan jót mosolyogtam magamban, hogy már csak ezért is majdnem elkészítettem :-).
A félreértések elkerülése végett, nekem tetszenek ezek a dolgok mert nagyon vágányok, viszont a megfelelő helyen, időben és mennyiségben.

A másik tévedés az, mikor a céges weboldalt maga a tulaj szeretné elkészíteni, mert csak lementem Wordben és hurrá. Igen tényleg csak ennyi, mi is így csináljuk.. A második pont ahol megástuk a sírját a weboldalnak.

Van egy olyan ügyes titkárnőm, olyan szépeket rajzol, ő fogja elkészíteni a cégünk webes megjelenését (Mi az a kezeden kosz? Á nem csak pixeles lett.). De már kész is van.. die(„”);


A látogatóink mekkora monitorfelbontást használnak

Kapásból az ember le is hidalhatna ennél a kérdésnél, de szerencsére rengeteg statisztikai adatot találunk Interneten erről. Ha már működik az oldalunk akkor a Google Statisztikai rendszerében erről is szerezhetünk információt.




De miért is kell nekünk ez az információ?

Az új külsőnél fontos, hogy a lehető legtöbb látogató kényelmesen, mindenféle scrollozgatás nélkül megtekinthesse a weboldalunkat. Esztétikailag is elég gázos egy Frame-es, félig szétesős, tologatós oldal.



Régebben a honlapokat általában ~780 pixel körüli szélleségre tervezték, ez már több okból is kicsinek és indokolatlannak tűnhet. Egyre több Videó és reklám anyag jelenik meg a weboldalakon, a monitorok méret (15” ...22”...) növekedett így van elég helyünk egy nagyobb design megjelenítésére. Tehát a jelenlegi ideális méret amit bátran használhatunk az az 1024 pixel környéke. A végleges méreteknek ezeknél kisebbnek kell lennie.

• 1024 px – a grafika széllessége ne haladja meg az 960-1010 pixelt, inkább kisebb legyen
• 780 px – a grafika széllessége 700-760 pixelt ne haladja meg

Milyen platformról nézik a legtöbben az oldalunkat



Színek kiválasztása

Bármennyire furcsa a weboldal grafikában alkalmazott színeknek is nagy jelentősége van. Érdemes több időt eltölteni ennél a résznél, Interneten számtalan színséma található. Ha a kiválasztott színsémához ragaszkodunk a honlapunk megjelenítési részeinél (Linkek, szövegek, kiemelések, dobozok, doboz címek, felsorolások, ikonok), akkor egyfajta harmónia fog tükröződni már első ránézésre is.

• Látogatókra gyakorolt hatás
• Színek és az üzlet
• Megjelenítéssel kapcsolatos kérdések (sztenderd (rendszer) színek használata, vagy egyéb)
• Megvalósítási kérdések: Grafikai elem, CSS, CSS-el megjelenített grafikai elem
• Interneten fellelhető színsémák, segédletek

Néhány link a segédletek kereséséhez



Elrendezés és megvalósítás kérdése

A grafika tervezése közben figyelembe kell venni néhány szempontot amit a összerakásakor lehet hasznos. Vannak megjelenítési módok, amit kifejezetten nehéz megoldani úgy, hogy minden böngészőben azonos képet kapjunk, ráadásul a hactivityk miatt nőni fog a letöltési idő. Ebben az esetben el kell készíteni a különböző böngészőkre vonatkozó stílus beállításokat is. Mennyivel egyszerűbb volna az életünk ha a Firefox volna az egyetlen böngésző (40% hajrá) :-), de ez nem így van. Figyelembe kell vennünk az alábbi böngészőket:

• IE6, IE7 – A legtöbb fejtörést ezek okozzák
• Firefox – de szép volna :-)
• Opera
• Safari
• Konqueror
• Links2 - érdemes megnézni szöveges módban mennyire navigálható az oldalunk, a keresők is valami hasonlót látnak

Tesztelésükre Interneten on-line eszközöket is találhatunk.

A praktikusabb elrendezés ha kocka formákban gondolkozunk, így a legkevesebb a haszontalan, kieső terület. Az íves megoldások szépek, de elég sok holtterületet eredményeznek. A megoldás valahol a kettő között van. (maradj az úton)
Bármilyen elrendezést is választunk, ennél a résznél már figyelembe kell venni a bennük elhelyezendő tartalom szélleségét, milyenségét, az alkalmazott képek nagyságát. A későbbiekben sok macerától kíméljük meg magunkat, ha az elrendezésnél már betervezzük a reklámok, animációk, dobozok, címsávok, grafikai elemek helyét és méretét.

Táblázatos design (table tr td etc..):

Ingyenes sablonok:
Ingyenenes CSS és XHTML sablonok


Fejlécek, láblécek, oldalsávok

Nekem személy szerint tetszenek a nagy és szép fejlécképek (bevallom néhányszor bele is estem ebbe a hibába, cseresznyefa koromba), de igazából azonkívül hogy szép inkább csak zavaró. Mikor egy honlap úgy kezdődik hogy 550 pixel magas fejléc kép és görgetni kell mindig, hogy a tényleges tartalmat megtaláljuk, hát nagyon fontos kell hogy legyen ha folytatom a látogatást. A fejléc és a lábléc területek nagyon fontosak, tényleg komoly funkcionalitás lehet plántálni viszonylag pici területre is, anélkül hogy az domináljon az egész honlapon. A weboldalunkra gondoljunk úgy mint egy szuper asztali alkalmazásra amit bárki pillanatok alatt megtanulhat használni, nem kell hozzá tanfolyást végezni. Amitől valójában nem is vagyunk messze hála web 2.0-nak.

Fejléc:

• Férjünk bele 100-150 pixeles magasságba

Lábléc:

• Ha nem ruházzuk fel extra funkciókkal (kereső, stb..) akkor 100 pixelnél nagyobb ne legyen, ide úgy is a kapcsolati és egyéb információs linkek kerülnek.

Oldalsávok:

• Ne legyen túl keskeny, mert nyomorultul néz ki a hosszú címek, menük sortöréssel történő megjelenítése, viszont ne nyomja el a tartalmi részeket. Ha tanácstalanok vagyunk, keressünk rá a 960 Grid System, Layout Grid kifejezésekre.

Reklámok és űrlapok az sablonon (kereső, belépés..)

A honlapon elhelyezendő dobozokat, űrlapokat jó időben be kell tervezni. Később ezeket elég nehézkes bele bútorozni a kész oldalba. Mikor a grafikát rajzoljuk, ezeket az elemeket el kell helyezni rá.

Menük elhelyezése

Fontos hogy a menüt a felhasználó kapásból megtalálja, ezért érdemes feltűnő helyre cuccolni.
Az oldalon található menüket ne duplikáljuk, ugyanarra az oldalra nem mutasson más néven link.
Lehetőleg szöveges menüt használjuk, mert azt mindenki látja és indexelheti. A tipográfiai kérdések egy külön fejezet volna, viszont a www.webmania.cc oldalon van egy nagyszerű cikk sorozat példákkal ebben a témakörben.

Web Tipográfiai:
http://webmania.cc/web-tipografia-1/
http://webmania.cc/web-tipografia-2/
http://webmania.cc/web-tipografia-3/


Látogatók száma és komponensek optimalizálása

Azért az ember ki tudja kalkulálni, milyen látogatottságra számíthat (jön-e a Google forgalma vagy sem.) a honlapján. Ha kis látogatószámról van szó (céges honlap havi 3, hacsak nem kezdőlap az irodában), akkor nem kell paranoid módon optimalizálni a képeket és fájlokat. Ellenben ha nagyobb látogatottságú honlap boldog tulajdonosai vagyunk, oda kell figyelni komolyan az betöltendő adatok nagyságára. Ehhez mérten a grafikai elemeket, stílust fájlokat, Szkript fájlokat, kódot kegyetlen módon optimalizálni, tömöríteni kell. Megjegyzem profizmusra törekvő, túlbuzgó webmaistró erre is figyelmet fordít, így a felhasználónak picit hamarabb gurul le az oldal. (Igen a mai sávszélleségnél sem árt ha gondolunk erre na meg a szerverre)

A menteni kívánt képeket 75% tömörítéssel mentsük ki, ez elfogadható méretet és megjelenést ad. Ennél kisebb értékeknél már látható változásokra is számíthatunk.
Ha lehet kisebb, ismétlődő képelemekből legozzuk össze az oldalunkat. Ezeknek a mérete minimális és kis módosítással többször felhasználhatjuk az oldalon (címsávok, dobozok, sávok, hátterek, ívek, stb..), akár esemény hatására cserélhetjük is őket. A legprofibb webfejlesztő is hajlamos ezeket elhanyagolni, mert lustaság fél egészség.

Tekintsük célunknak azt, hogy az egész oldalunk megjelenését 64 K alá szorítjuk. (C=64-en milyen játékok voltak, most meg 1 MB alatt nincs grafika :-)

Egyéb kütyük alias csingilingi

A csak ami fontos, és segíti a látogatót a honlap használatában. Nem biztos, hogy mindenki Combos gépezettel nézi a kliensoldali scriptekkel megpakolt oldalunkat. Ráadásul egy jól megírt Script is működhet meglepő módon IE-6-ban, hibásan (bocs, ez nem meglepő :-), sőt az oldal betöltése is sokszorosára nőhet emiatt.


Ötletek:

Van úgy hogy az embernél beáll az agyhalál és nincs semmilyen ötlete az új megjelenéssel kapcsolatban. Nagyon hasznos, ha ennél a résznél körülnézünk, mik a trendek, egy hasonló témakörű honlap milyen megoldásokat használ. Nem ötlet vagy design lopásra biztatnék senkit, sőt rendkívüli módon elítélem ezt, de kezdőként fontos hogy inspirációt kapjál és közben összeálljon a kép, mit is akarsz. Ha végleg nincs ötleted arra, hogyan legyen egy bonyolult menü, vagy oldal, site struktúra, akkor nézd meg a nagy cégek honlapját (SUN, IBM, stb..).
Elmúlt már a lopkodós korszak, ha valamit fel szeretnénk használni, előtte kérdezünk meg az alkotót hogy lehetséges-e. Ez nem kerül semmibe és később rengeteg kellemetlenségtől kímélhetjük meg magunkat. Tiszteljük más munkáját annyira, hogy ha már felhasználtuk a produktumát, tegyük ki a linkjét az oldalunkra, ettől nem leszünk kevesebbek.

• Opendir Linkségek
• 50 szép CSS sablon 2006-ból
• Néhány gyöngyörű design 2007-ből
• Felhasználói interfész design
• Szabadon felhasználható sablonok
• Web-Design Idea/
• Web-design ötletek

Error Megrendelői (M) és Tervezői (T)

• T: Az elkészített designt fizikai lehetetlenség összerakni – CSS hekkerek előnyben
• T: Összerakja gondolkodás nélkül a felvázolt kéréseket – Gyors Pénz
• T: Mr. ART, tesz a szabványokra és tervezési mintákra egyszerűen alkot – Na össze tudod rakni?
• M: A megrendelő szava szent és sérthetetlen – Ez igaz, de ismertesd a lehetőségeket
• M: Adminisztrálható honlap kell – Van egy Új munkád :-)
• M: az elkészült honlap népszerűsítésére se idő sem pénz nincs. - Az utolsó frissítés IE. 400
• M: Nem veszek design mikor XY Open Source rendszerhez egy csomó grafika letölthető – És ez egyedi céges megjelenést biztosít?
• M: Nem akarom használni a cég zárt forráskódú rendszerét, helyette inkább telepítsenek fel egy XY nyílt forráskódú CMS rendszert. - Ez nem baj, de ezeket frissíteni kell, ha ez elmarad, az a baj (törékennyé válhat a rendszer).
• M: A megrendelő átmegy profi web-designer-be és mivel Basic-ben Commodore-on már profi volt megbírkozik a webfejlesztéssel is - Egy próbát megér
• M: Kész a site, de olyan üres - A honlap az elcseszés fázisába került, jöhetnek a mozgó és zenélő alkatrészek :-)

Ha találkoztál hasonlóval kérlek írd bele a bejegyzésekbe, had nevessek.

Bejegyzés küldése

A tartalomhoz nem tartozik bejegyzés

Top5 webes fájlmenedzser

A gyűjtésben szereplő elemek weben keresztül valósítanak meg fájlkezelést. A kiválasztásnál kiemelt szempont volt az egyszerű deszktop jellegű szoftverektől megszokott kényelem, a biztonság és a többfelhasználós beállítási lehetőség, egyszerű integrálhatóság és a felhasználhatósági (licenc) szempontok.

2009-5 kedvenc jQuery pluginje

2009-ben is vannak kedvenc jQuery plugin-jeim. Ezt szeretném veletek megosztani.
Úgy érzem kicsit változtam, a plugin választás a funkcionalitáson túl egy picit a parasztvakítás is bejátszik.

(Parasztvakítás (PW): olyan effektek aminek a gyakorlatban szinte semmi haszna nincs, de szemet gyönyörködtető)

Nem..

10 hasznos FireBug kiterjesztés

Hasznos FireBug képességeit kiterjesztő pluginek. Bár a FireBug önmagába is egy rendkívül jól használható Firefox kiterjesztés. De elérhető hozzá néhány nagyon profi kütyü, ami sokszor önálló funkciót valósít meg, de az esetek nagyobb részében a FirBug képességeit combosítják ki.

Ha még nem ismernéd a

50 Hasznos Firefox kiterjesztés Linuxra

Kedvenc Linuxon is működö Firefox kiterjesztések, mindennapos felhasználásra és webfejlesztőknek.

A addon-ok működnek Windows-os rendszereken is, de a cikk kifejezetten a Linuxra elérhető és hasznos Firefox kiterjesztésekből szemezget.

A Firefox 3.0 megjelenésekor már volt egy

350 hasznos Gimp effekt, Plugin, Script-Fu

Hasznos pluginek, Script-fu-k, effektekkel, technikai megoldások gyűjteménye Gimp 2.6.X verziójához.

A cikknek célja az, hogy egyszerű megoldást adjon Gimp-hez, pluginek beszerzésére.

Szerencsére vannak olyan önzetlen projektek ahol összegyűjtik számunkra ezeket a nélkülözhetetlen eszközöket. Így sikerült összehozni 5 bejegyzésben..

Szoftverek

ArtH2O Blog tartalmából: