11. Ön részt vesz egy túlnyomórészt szövegalapú információs portál fejlesztésében. Milyen tipográfiai és ergonómiai szempontokat kell figyelembe vennie a portál arculatának, navigációs rendszerének tervezése során Arculati elemek tervezése Színek Látványelemek Navigációs elemek Elrendezés Arányok (Pl.: aranymetszés) Különböző felbontásokhoz való alkalmazkodás Keretek, hátterek, ablakok Tipográfia és ergonómia Szövegtulajdonságok Aktív elemek kiemelése Áttekinthetőség Színek Egy webdesign készítése nem igazán mondható lineáris lépéssorozatnak, könnyen előfordulhat hogy egy szín kiválasztásról a design végleges változatakor derül ki hogy nem lesz jó, emiatt át kell színezni a designt. Ilyen előfordulhat, de általánosságban azt mondhatjuk hogy a szín választás egy első (vagy első között lévő) lépés a design elkészítésekor. A színválasztásnak több módszere van: megrendelő igénye szerint: a legegyszerűbb ha a megrendelőnek már van konkrét elképzelése színekre, ez persze még csak támpont lehet mert a legtöbb esetben nem rendelkeznek kész arculattal amihez konkrét RGB kódokat tudnak diktálni, de már az is jó kiindulópont ha nagyjából megmondják a színeket, ebben az esetben viszont mindenképpen érdemes a további módszereket is kipróbálni. színséma generáló szoftverrel: a legtöbb ilyen szoftver online webes alkalmazás (pl http://colorschemedesigner.com/, http://kuler.adobe.com/ ) ezekkel eljátszva könnyen lehet találni jó kiindulópontot. fotó alapján színséma készítése: erre is léteznek online webes alkalmazások (pl.: http://www.palettefx.com/ ) de erre a photoshop is tökéletesen alkalmas. Ha van egy jó fotónk amiben a színek nagyon szép összhangban vannak akkor kényelmes abból szedni a színeket. kézzel kiválasztva: a legegyszerűbb módszer ha a színválasztást találomra próbáljuk megoldani, ez azonban nem túl előnyös, nem biztos hogy beválik elsőre. 1
Az elkészített színsémákat általánosságban több csoportba sorolhatjuk: Monokróm : egyszínű, de nem egy darab RGB szín van csak az oldalban, annak az egy színnek lehet több árnyalata is. Analóg a színkör egy szelete, lehetőleg egy negyednél sose legyen szélesebb. Komplementer : amikor két ellentétes színt használnak a designhoz. Szétválasztott komplementer az előzőhöz hasonló de itt az egyik színt felbontjuk két ahhoz közeli színre. Háromszöges a színkör három pontja, arányos osztásban. Négyszöges (dupla komplementer) a dupla komplementer változata, ahol mindkét ágat szétbontjuk. Témához igazodó színek Rendkívül fontos a színeket úgy megválasztani hogy az adott témához igazodjanak. Ha van egy konkrét téma (pl. fogászati rendelő honlapja) akkor érdemes először néhány kész példát keresni az interneten, hogy ötletet merítsünk. A legegyszerűbb rákeresni (és ajánlott is) de logikusan átgondolva is ki lehet találni hogy egy orvosi rendelő honlapjánál kellemesebbek a zöld, fehér, és egyéb világos színek, mint például a fekete, szürke és ehhez hasonlók, amik viszont tökéletesek lennének például egy temetkezési vállalat arculatának. Ha a színeket nem gondoljuk át következetesen a munka már az elején kárba vész. Látványelemek Minden olyan elem ami a látványt fokozza, feldobja a honlap designját, ebből következően látványelem lehet akár egy darab gomb is (pl.: Buy Now ) ha az látványos helyen, kiemelten van elhelyezve. A legsűrűbben használt látványelem a banner, ami körülbelül 400px magas, és a honlap teljes szélességét kitölti. Előszeretettel alkalmazzák nyitólapon, ezen összefoglalják a honlap tartalmát, legfrissebb híreket, termékeket, vagy az éppen hirdetni kívánt egyéb tartalmat. (pl.: apple.com ) A honlap grafikai tervezésén túl, sűrűn használatos az oldalt mozgékonyabbá tevő jquery (javascript) modulok beépítése, de a HTML5 is rendelkezik animációra alkalmas tag-ekkel. Ezeknek a használata egy mai piacképes honlapnál elengedhetetlen. A Flash/Silverlight alkalmazások beépítése is megoldás lehet de ezek az ismert problémák (processzor felhasználás, keresőoptimalizálás) miatt nem ajánlottak. 2
További látványelemek (igényektől függően) : Képgaléria Eseménynaptár Kereső sáv Nyelv választás Tag cloud Who s online Web 2.0, social network kapcsolat (RSS, facebook, twitter iconok) stb. Navigációs elemek Ezek segítségével tudunk navigálni az oldalon belül. A navigálás megoldására is több módszer létezik, a legelterjedtebb a menüvel való navigálás, ha általános honlapról beszélünk. (pl a wikipédián keresővel, vagy a szövegben lévő hiperlinkekkel navigálunk az oldalon) A menü lehet egyszerű felsorolás, lenyíló, kinyíló, szétnyíló, stb ezekhez minden esetben valami jquery vagy html5 technológiára van szükség. A lenyíló menü legnagyobb problémája a hover-es megoldás, ami azt jelenti hogy a menü akkor nyílik le ha fölé visszük az egeret. Ez asztali számítógépeknél nem okoz gondot, de egy touchscreenes eszközön (tablet, okostelefon) hibásan működhet ezért ha ilyen technológiát használunk számoljunk vele hogy aki ilyen eszközön nézi nem fog tudni navigálni az oldalon vagy csak nagyon nehézkesen. Erre egy jó megoldás lehet ha lekérdezzük a kliens böngészőjének típusát, és ha bebizonyosodott hogy okos telefonról nézi az oldalt, akkor neki egy olyan verzójú CSS-t küldünk ki ahol nincsenek hover-es megoldások. Sitemap (oldaltérkép): akár egy sitemap beépítése is megoldás az okostelefon/tablet problémára. a Sitemap egy külön oldalon blokkokba szedve rendezetten struktúráltan felsorolással jeleníti meg a teljes honlap menü/almenü rendszerét (pl.: http://www.apple.com/sitemap/ ) Tag cloud (címkefelhő): a tag cloud egy érdekes formája a navigálásnak, úgy működik hogy szófelhőben megjeleníti az oldalon használt leggyakoribb tartalmakat, legsűrűbben használt szavakat. Külön blokként is használják a honlapba beépítve pl a menürendszer alá, de külonálló oldalon is állhat (pl.: http://www.flickr.com/photos/tags/ ) Path bar(elérési útvonal): több almenüvel rendelkező oldalnál hasznos lehet ha path bart alkalmazunk. Ez minden oldalon egy sorban megjeleníti az éppen aktuális helyet ahol vagyunk. pl. : Címlap->Termékeink->Könyvek->Egri Csillagok. Külön design elemként is jól mutat, azon kívül hogy hasznos is. (például.: http://www.forrai.hu/hu/iskola/tanfolyam/120125-intezmenyikommunikator-esti ) Keresők: egy kereső blokk is használható navigálásra, akár az oldalon belüli tartalomra keresünk akár egy google keresőt integrálunk a saját oldalunkba. 3
Elrendezés Általában az elrendezés egy szabványos nem túl formabontó honlap esetében nagyjából egységes: Fejléc: a honlap tetején van minden, itt található a logó, a szlogen, és a cég/honlap név. Mindig jól láthatóan van elhelyezve. Bevált szokás hogy a logóra kattintva egyből a honlap nyitó oldalára navigálhatunk. Menü: vertikális vagy horizontális de általában a fejléc közelében helyezkedik el, mindenképpen ez is jól látható helyre kell hogy kerüljön Tartalmi rész: az oldal közép része, a legnagyobb területet általában ez foglalja el (szövegorientált oldalnál legalábbis biztosan) Lábléc (footer): minden honlap rendelkezik valamilyen lábléccel ahol a honlapot üzemeltető cég, a honlap készítő cég, illetve a honlap tulajdonosának elérhetősége, linkje jelenik meg, és egy elkészítési évszám. A lábléc legtöbbször legalul van, nem túl feltűnően, de mindenképp ott van, ha szükség van rá tudjuk hol keressük. Egyéb elemek: az egyéb elemek szétszórva szabadon választhatóan elrendezhetőek, nincsen különösebb megkötésük. Arányok Rossz arányokkal elkészíteni egy designt, egyenlő a csőddel. Ez egy ugyanúgy jó előre átgondolandó téma mint a színválasztás. 960px szélesség Hogy jó arányokkal dolgozzunk válasszunk nem kell mást tennünk mint megnézni néhány igényesen megrajzolt honlapot és figyelni (lemérni) az ott használt arányokat. A legtöbb honlap fix szélességűre van rajzolva, ami azt jelenti hogy a honlap tartalmi része (ebbe az a rész értendő hol a TARTALOM van, nem a teljes honlap szélessége ami a tartalom + hátteret jelenti, azaz a honlap tartalmi része csak a tartalmat jelenti, a hátteret nem) körülbelül 960px széles kell hogy legyen. Ezen túl a háttér már tetszőleges méretű lehet, tehát a 960px szélességhez még hozzájöhet kétoldalt bármekkora méret, de ez már egy tökéletes kiindulópont. Azért ezt a szélességet mondják szabványosnak mert az általános monitor méret világviszonylatban nézve még mindig túlnyomórészt az 1024 x 768. Amikor a photoshopban webdesignt tervezünk érdemes minél nagyobb lapon dolgozni (pl.: 1900x1200) mert arra kényelmesen elfér a tartalmi (960px) rész és kétoldalt bőven van még hely a háttérbeli design elemek megtervezésére. http://www.hobo-web.co.uk/best-screen-size/ A honlap további részére vonatkozóan a legjobban a szövegek arányát lehet meghatározni, ezek betűtípustól függően: (az adatok Photoshop méretben vannak) Általános szöveg: 12-14pt Alcím: 15-20pt Cím: 20-30pt Menüpont: 15-20pt 4
Aranymetszés: http://hu.wikipedia.org/wiki/aranymetsz%c3%a9s (csak érdekességként) Különböző Felbontásokhoz való alkalmazkodás Egy honlap tervezésénél szintén elsődleges kérdés hogy milyen platformon fog futni az oldal. Általában manapság már elvárás hogy jól nézzen ki telefonon/tableten is, ne csak asztali gépen, illetve asztali gépen is több felbontás alatt. Ezeknek a kompatibilitási problémáknak két megoldása van. 1. Külön CSS file A webcím meghívásakor a szerver kiolvassa a böngésző típusát és annak megfelelően választ css file-t az oldal betöltéséhez. Egyes esetekben a külön CSS kódot egy darab file-ba rakják és a file-on belül bizonyos kódrészek futnak le attól függően hogy milyen platformon nézzük, de ez a megoldás nem ajánlott. 2. Reszponzív webdesign A weboldal olyan technológiával van megoldva hogy design elemek blokkokból állnak, és ezek a blokkkok a böngésző ablak átméretezésekor átrendeződnek, átméreteződnek, így dinamikusan változik az oldal kinézete attól függően hogy milyen felbontásban nézzük. (pl.: http://templatic.com/demos/responsive/ ) Keretek hátterek ablakok A honlap háttere lehet: egyszinű (solid color) mintázatos (pattern) Egyéb grafika, vagy fotó, ebben az esetben viszont nehéz a különböző felbontásokhoz igazodás. Ablakok: Egy webes alkalmazás, vagy weboldal, elkészíthető olyan ablaktechnológiával amit az asztali alkalmazásoknál megszokhattunk, vagyis az előugró ablakokat lecsukhatjuk, kinagyíthatjuk, elmozgathatjuk, de ezek az elemek a böngésző ablakból nem juthatnak ki. 5
Tipográfia és ergonómia Az weben böngésző információt kereső emberek nagyon hamar elnavigálnak egy oldalról ha az általuk keresett információt nem kapják meg másodpercek alatt. Ezek alatt a másodpercek alatt nagyon sok minden dől el, (az oldal betöltődés ideje, a design átláthatósága, a navigációk, a tartalom szöveges megfogalmazása, de) többek között a tipográfia az, ami nagyon leronthatja, vagy nagyon feljavíthatja az információ keresést, és az olvashatóságot. Ergonómia:a munkafolyamatokkal, illetve ezeknek az ember számára gazdaságos és a legkisebb erőkifejtést igénylő kialakításával foglalkozó tudomány Egy igényesen megrajzolt web oldal, rossz tipográfiával = rossz design. A tipográfia több dologból áll mint egyszerű betűtípus választásból, a szövegnek több tulajdonságát is módosíthatjuk, ami mind segíti az olvasást, vezeti a szemet. Szövegtulajdonságok Közök: betűköz: a betűköz rossz megválasztása azt eredményezheti hogy a betűk egybefolynak. szóközméret: ha túl nagy szóközméretet választunk akkor úgynevezett utcák alakulhatnak ki a szövegben, ha viszont túl kicsit, akkor a szavak egybefolyhatnak. sorköz: (képek) 6
hasábköz A közökön kívül van néhány tipográfiai szabály amit betűtípus választásakor mérlegelni kell A kisebb betűméret tágabb közt igényel. A modernebb betűtípusoknak kisebb köz kell mint a régebbi (talpas) betűtípusoknak A betűtípusok x magassága (x betű magassága) betűtípusonként változó, más méret szükséges nekik. Alapvető internetes etikett szabály hogy a CSUPA NAGYBETŰS szöveg kiabálásnak számít, ezért ilyet ne alkalmazzunk a szövegben. 7
A betűk vastagságát is figyelembe kell venni, és ahhoz mérten a megfelelő szövegben alkalmazni. Ha túl vastag, elvesznek a szünetek a betűk között, ha túl vékony akkor pedig nagyon megnőnek. A túl egyedi betűtípusokat mindenképp érdemes leellenőrizni a hosszú ű és ő betűk miatt, mert nem biztos hogy minden betűtípus készítő gondolt a magyar ékezetekre. A betűtípus választásakor figyelembe kell venni a betűtípusok hatásait, és az olvashatóságot is. Egy étlap címsorainál (előételek, levesek, főételek, stb ) nem a legfőbb dolog az olvashatóság, mert mindenki ki tudja találni mi van odaírva akár kevés betűből is, ezért ott például indokolt lehet a túlcsicsázott betűtípus. De egy hosszú szövegnél ahol az a célunk hogy minél könnyebben elolvassa azt valaki, ha nem jó betűtípust választunk, senki nem fogja elolvasni a szöveget, és csökkenni fog a weboldalunk nézettsége. Aktív elemek kiemelése - Áttekinthetőség Minden szövegorientált weboldalnak (pl hírportál) van egy úgynevezett ritmikája, amitől a weboldal még áttekinthetőbbé válik. Ez azt jelenti hogy a különböző tartalmak (cím, szerző, beküldési idő, tartalom, stb) különböző betűtípussal, színnel, mérettel, jelennek meg az oldalon. Rengeteget tudunk segíteni az olvasónak jól átgondolt tipográfiával. A betűtípusokat egymáshoz igazodva válasszuk ne legyenek túlságosan különbözőek. 8