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? Az arculati elemek tervezése Színek Látványelemek Navigációs elemek Elrendezés Arányok (pl. aranymetszés) Alkalmazkodás a különböző felbontásokhoz Keretek, hátterek, ablakok Tipográfia és ergonómia Szövegtulajdonságok Az aktív elemek kiemelése Áttekinthetőség Arculati elemek tervezése Színek Látványelemek Navigációs elemek Védjegyként elfogadott séma ez a lényege egy cég, termék, közösség, szervezet stb... arculatának. Fontos, hogy a különböző elemeken (logó, weblapok, névjegykártyák, levélpapírok, e- mailek stb.) egységes színek, motívumok (léniák, egyéb díszítő elemek) legyenek. Színek: 3-4 jellemző színből, és azok árnyalataiból elkészíthető egy teljes arculat. A megválasztott színeknél ügyelnünk kell arra, hogy -amennyiben ez lehetséges- legyen releváns az arculat által képviselt céget (terméket, stb), illetve hogy ízlésesen legyenek ezek a színek keverve. Az, hogy milyen alapon választunk színeket egy munkához elsősorban a saját ill. a megrendelő döntéshozóinak ízlésvilágától fog függeni. Többnyire ez a jellemző(sajnos).ez nem túl megalapozott választás, így már a kezdet kezdetén lemondunk az egyik legfontosabb eszközünk adta előnyökről. Ahhoz, hogy tisztában legyünk vele, hogy mik ezek, és esetleg érvelni is tudjunk miért ezeket választjuk, érdemes megvizsgálni a színeket közelebbről. Ha egy színt bármely oknál fogva kiválasztunk, ahhoz különböző értéket,jelentést, kiváltott érzelmeket is kapunk egy csomagban, úgyhogy egyáltalán nem mindegy mit választunk. Ahogy mindenben itt is vannak hagyományok un. konvenciók az egyes területeken használandó színekben is. Például a vállalati honlapokon jellemzően az acélkék, fehér, és grafit szürke színek a jellemzőek, ezek stabilitást, megbízhatóságot, biztonságot, üzleti jelleget sugároznak. Egészséggel kapcsolatos weboldalak a természetesség, vitalitás jegyében sok zöldet, napsárgát, és ég éket alkalmaznak, míg az éttermek egyik kedvence a bordó, mélyvörös, csokoládébarna, és fekete - ezeken jól mutatnak az ételfotók,kellemes, meleg, barátságos környezettel, és a jóllakottság érzésével kecsegtetnek. Még csak a színeknél tartunk, de máris üzeneteket közvetítünk egy non-verbáliscsatornán. A színeket ez alapján 3 csoportba osztjuk: elsődleges, másodlagos, és harmadlagos színek. A három elsődleges szín a vörös, a kék és a sárga. Ezek az alapszínek, az összes többi szín ezek keveréséből jön létre. Ha ezekből bármely kettőt
összekeverjük, létrejönnek a másodlagos színek, mint a zöld, a lila, és a narancs. A harmadlagos színek pedig az elsődleges és másodlagos színek keverékei. A színkör egymással szemben álló színei (piros-zöld, sárga-kék, lilásvörös-sárgászöld, narancsvörös-kékeszöld, sárgásnarancs-liláskék) a komplementer színek, amelyek nagyon jól kiegészítik egymást. Kontrasztjuk akkor érvényesül igazán, ha az egyik túlsúlyba kerül kiemelésekhez használjuk őket. FEHÉR egyszerű, tiszta, érintetlen FEKETE súlyos, nehéz, sötét, titkos, elegáns, drága, halál PIROS szerelem, szenvedély, veszély, figyelmeztetés, izgalom, az élelmiszer-,impulzus, akció, kaland KÉK megbízhatóság, siker, komolyság, nyugalom, erő, szakszerűség, hatalom SÁRGA a kíváncsiság, játékosság, vidámság, szórakozás, irigység LILA igazságosság, luxus, fantázia, álmok, kétértelműség, bizonytalanság, öregség, vagyon ZÖLD pénz, a természet, állatok, egészségügy, gyógyítás, élet, harmónia, frissesség RÓZSASZÍN lágyság, édesség, ártatlanság, fiatalság, gyengédség NARANCS erő, energia, dominancia, boldogság, kényelem, kreativitás, ünneplés, szórakozás, ifjúság, melegség SZÜRKE általánosság, közönyösség, fenntartás, visszafogottság, unalom BARNA föld, természet, lágyság, termékenység, kényelem, stabilitás schmittelve: http://www.scribd.com/doc/50051545/webdesign-tanfolyam-1-lecke-szinek kipróbálható: http://colorschemedesigner.com/ Látványelemek és navigációs elemek: A Tipográfia és ergonómia részben. Elrendezés Arányok (pl. aranymetszés) Alkalmazkodás a különböző felbontásokhoz Keretek, hátterek, ablakok Arányok: A tipográfiai építőelemek meghatározott rend és szabályok szerinti egymáshoz való
méretviszonyát tipográfiai arányoknak nevezzük (pl. betűfokozatok, sorhosszúságok, üresen hagyott terek). Az arányok helyes meghatározására jól bevált módszer az aranymetszet néven ismert arányszabály alkalmazása. A tipográfiai arányok a termék esztétikai értékét határozzák meg. Az arányokra vonatkozó szabályok a természetben szerzett tapasztalatokra vezethetők vissza. A legismertebb arányszabályok az emberi test méreteire és szimmetriájára vonatkozó szabályok. A tipográfia művészetével kapcsolatos arányszabályokkal a 14-16. században (renaissance idején) kezdtek el foglalkozni. Az arányokra vonatkozóan több geometriai szabály látott napvilágot, amelyek közül a legjelentősebb az aranymetszet (lat. sectio aurea), felállítása Polükleitosz görög szobrász nevéhez fűződik. //Schmittelve: m.blog.hu/gr/grafikus/image/fajlok/a07_tipografiai_aranyok.doc Az aranymetszés vagy aranyarány egy olyan arányosság, ami a természetben és művészetben is gyakran megjelenik, természetes egyensúlyt teremtve a szimmetria és az aszimmetria között. Aranymetszési arányok találhatók számos ókori épületen, középkori és reneszánsz képzőművészeti alkotásokon. Az ókori pütagoreusok (Püthagorasz és követői), akik szerint a valóság matematikai alapokon nyugszik, az aranymetszésben a létezés egyik alaptörvényét vélték felfedezni, ugyanis ez az arány felismerhető a természetben is (például az emberi testen vagy csigák mészvázán). Az aranymetszés arányait tartalmazó formák máig nagy esztétikai értékkel bírnak, számos területen (például a tipográfiában vagy a fényképészetben) alkalmazzák őket. Az aranyarányt numerikusan kifejező irracionális Φ 1,618 számnak (görög nagy fí) számos érdekes matematikai tulajdonsága van. ftp://witch.pmmk.pte.hu:2001/tanszeki_anyagok/rendszer%20es%20szoftvertechnologia %20Tanszek/Lenart_Anett/Webdesign/Eloadas/Webdesign_9ea_Aranymetszes_LenartAnett_1112.ppsx Alkalmazkodás a különböző felbontásokhoz: Nem hagyható figyelmen kívül a monitorok és a tabletek, okostelefonok képi felbontásának növekedése. http://www.hwsw.hu/hirek/48273/apple-ipad-3-felbontas-web-fejlesztes-grafika-vektor.html Az ehhez való alkalmazkodás körültekintő fejlesztést, platformonként esetlegesen változó designt kíván. Nehéz egyszerre alkalmazkodni egy asztali 16:9-es 22 -os monitorhoz, egy 4:3-as projectorhoz és egy 16:9-es, de kétszeres felbontású (2560x1440) 10,0 -os kijelzőhöz. Keretek, hátterek, ablakok: 1. Csoportosítás 2. Elhelyezés 3. Kontraszt 4. Ismétlés
Csoportosítás: Ne féljünk az üres terektől! A tartalmilag összetartozó elemeket ezek szeparálják a legjobban. Esztétikusabb, mint csak eltérő vizuális környezetet, hátteret, más betűtípust alkalmazni! A jó arányban használt térközök nem fognak zavaró űrt alkotni. A jól összefoglalt információ és a jól elválasztott témák a megfelelően megválasztott és alkalmazott vizuális környezettel feszes eleganciát fog tükrözni. Elhelyezés: Fontos tudnunk, mi az észlelési sorrend! Egy nyugati szem a bal-felső sarokból indul, vagy a belátható terület közepétől, ha oda irányítjuk a figyelmét. Jobb oldalra áthúzott hangsúlyok zavaros oldalhoz vezetnek. Egy ázsiai vagy közel-keleti szemnek azonban ez fordítva is működhet. (a nyugati struktúrákhoz hozzászoktak, így nekik nem jelent problémát a balról-jobbra mutató észlelési sorrend) Emellett fontos, hogy az olvasó/megtekintő végig tudja követni a szabályosan elhelyezett elemeken keresztül a belátható területet, hogy felismerje minden szövegrész vagy egység szerepét. Persze látszólag rendezetlen oldalakkal is lehet pozitívan hatni a látogatóra, ha kevés információt helyezünk el, és kiprovokáljuk, hogy azt a keveset is keresse, így az információ megszerzésével több időt tölt, az informálódás motiváltabb és a szerzett információ magasabb prioritást élvez a későbbiekben. (ld.: reklámok, névjegykártyák) Ebből következik, hogy semmit, sem helyezünk el véletlenszerűen. Még ami annak is tűnik, egy ötletből származó funkciója miatt kapja meg a helyét. Kontraszt: Nem olyan egyszerű túlzásba esni az eltérő elemek méret- és színbeli kontrasztjait illetően. Tervezéskor kifejezetten előnyös némi túlzás, de orbitális eltérések ritkán érhetőek el. Azonban nem kontrasztos egy 10-20%-al nagyobb betűtípus. Az érdeklődés felkeltéséhez bátran kell használni az adott területet. Az adalék információk ha már olvashatók, a sikeresen felkeltett érdeklődés után úgy is elolvasásra kerülnek. Jó eszköz egy speciális írásjel, egy speciális betűtípus (típusok keverése lejjebb!!!) vagy egy egyszerű piktogram használata extrém nagy méretben. (írott betűtípus, világos színnel beillesztve a címsor hátterébe; & @ $ {} []?! % stb. jelek használata a háttérben. Jó kontrasztot teremt egy ritkított betűköz (csak címben, egy-két sor erejéig!), dőlt betű (csak címben, nem generált, hanem eredeti döntött) és bold (ebből is eredeti, de ez folyó szövegben is megállja a helyét). Ismétlés: Azonos, ismétlődő funkcióval rendelkező elemeknek egységes arculatra van szüksége. Például egy cikket követő lénia, iniciálé, vagy egy, a cikkből kiemelt idézet keretezése, margója, háttere egységes kell, hogy legyen, így amint a látogató egyszer már megtapasztalta az adott funkciót később könnyebben értelmezi a statikus formák ilyen jellegű bontását, illetve szükség esetén tudja, hol keresse a funkciót. Tipográfia és ergonómia Szövegtulajdonságok Az aktív elemek kiemelése Áttekinthetőség Betűtípus használat
Szövegtulajdonságok Fontos a jól megválasztott betűtípus használata! Függően attól, hogy milyen tartalommal és terjedelemmel bír a szöveg kell választanunk olyan betűtípust, amely ergonomikussá teszi a weblapot. Rendszerint az minimalistább típusok (lineáris vonalvezetés, talpatlan, kiskapitális, Arial) könnyebben alkalmazható eltérő vizuális környezetben, azonban hosszabb távon nehezebben olvasható. A talpak hiánya, a vezető és segédvonalak azonos vastagsága, esetlegesen a kis- és nagybetűk azonos alakja fárasztja a szemet. Ennek következtében gyorsan érdektelenné válik az olvasó a hordozott tartalommal szemben. Ha hosszabb terjedelmű szövegünk van, érdemes egy hosszabb távon könnyebben olvasható típust használni, például barokk antikvát (Times New Roman). Jellemzően nehezebben keverhető, stílusában eltérő környezettel, viszont hosszabb szövegek könnyebben olvashatóak. Tartalmi szempontból is megközelíthető a típus választás, így esetlegesen használható egy kevésbé szokványos, törtvonalú (GothicE) vagy egy designelt (Comic Sans-tól a legcsilivilibb giccsparádékig bezárólag) típus. Sajátos betűtípus használata weblapon @font-face segítégével történhet. (http://www.fontface.com/) Betűtípusok keverése Egy weblap teljesen azonos betűtípusokból felépítve gyorsan unalmassá vagy rosszul tagolttá válik. Legalább egy logóban érdemes a cikkektől és menüpontoktól eltérő típus(ok) hangsúlyozása (relevánsan a folytatott tevékenységre, bár ez sem szigorú feltétel). Az ideális esetben különböző típussal írnak egy cikket, emelnek ki egy hasábot, illetve egy, a cikkbe beletört mezőben egy idézetet a cikkből. Egy Egyptienne (rendszerint minimalista, lineáris, talpatlan) típus -jelenleg igen divatos egyéb funkciók ellátására- könnyen átvezet két egymással keverhetetlen típust. (pl.: Reneszánsz antikva kézzel írott típussal, designelt-, reklám típussal) Jelenleg már-már klisé számba mennek az Egyptienne-kézírásos kevert logók, mely kombináció különösebb fantázia nélkül is jól fest együtt. Érdemes alkalmazni alkotói válság esetén. :) Aktív elemek és szöveg kiemelés A kiemelésre számtalan lehetőségünk van egy szövegben. Kézírásban nagybetűt vagy aláhúzást alkalmazunk, mely utóbbi nyomtatásban nem vagy csak indokolt esetben fogadható el. Kézírásban használt még a szöveg bekarikázása, melynek alkalmazása nyomtatásban igen erőteljes hatású (pl. reklámokban). A félkövér vagy aláhúzott kiemelés alapvetően vizuális jellegével (sötétebb) hívja fel magára a figyelmet, a betűritkítás, kurziválás, verzál kiemelés a betűváltozat szokatlansága miatt lassabban olvasható, így lassítja is az olvasást, és ezzel (is) nyomatékosít: az olvasó automatikusan lassabban, figyelmesebben olvassa ezt a szakaszt. A nyomtatott betűknél más eszközeink vannak kiemelésre. A leggyakoribb - szépirodalmi szövegben kizárólagos - a dőlt betűs, mely nem borítja föl a szöveg képének egyensúlyát. Aktív navigációs elemeket továbbá kiemelhetünk az alapszínük módosításával (árnyalat, komplementer), vagy akár a keret és a betűtípus vastagabb vonalvezetésűre váltásával. Áttekinthetőség Térközök Alapvetően a betűtípusokat úgy rajzolják, hogy szimpla sorköz esetén se érjenek össze. Azonban a szimpla sorköz sokszor nehezen olvasható szöveget eredményez, ezért érdemes nagyobb sorközt megadni. Abban az esetben, hogy ha több soros címet adunk meg folyamatos nagybetűkkel -hacsak ennek az ellenkezőjét a cím stílusa nem követeli meg- tovább kell növelnünk a sorközök méretét.
Margók Szeparálnak és egységes keretbe foglalják a szöveget. Érdemes megfontolni, milyen arányokat használunk egy cikk, egy cikkbe tört vagy süllyesztett szöveg, kép, táblázat stb. szeparálására. Vizuális környezetek A rosszul megválasztott vizuális környezet egy jó elosztás és tagolás ellenére is tönkreteheti az oldal vizuális élményét! Négy dolgot kell tisztáznunk, amikor létrehozunk a meglévő oldalon egy új vizuális környezettel rendelkező területet. Az első a legfontosabb, hogy ez a terület milyen célt fog szolgálni? Terjedelmes szöveg, galéria, rövid szöveg, idézet, reklám vagy egyéb informatív felület (pl. lábléc, impresszum, elérhetőségek). Ez a kérdés határozza meg, hogy az oldal alap vizualitásához hogyan fog viszonyulni az új terület kinézete. A második kérdés a háttér megválasztása. Ez az alaptextúra vagy alapszín, esetleg konkrét kép jó eszköz arra, hogy valamire felhívjuk a figyelmet, a háttérbe tegyük, vagy csak díszítsünk vele. Fontos a háttér mintázatát és színét úgy megválasztani, hogy az előtte lévő szöveg pontosan olvasható maradjon. (pl. generált zaj, alacsony kontraszttal, szürke-árnyalattal, előtte fehér szöveg árnyékkal.) A harmadik lépés a betűtípus kiválasztása. Előnyös, ha releváns a közölt információra, viszont a korábban említett szabályoknak meg kell felelnie. (pl. jó kompromisszumos megoldás egy törvénykezéssel foglalkozó weblapon, egy tartalmas, de nem túl hosszú, betört cikknél a címet kézzel írott típussal, a szöveget talpatlan lineárissal megadni. A szövegezésnél egy barokk antikva nem adna szeparált érzetet a főcikktől. A lineáris típus rövid távon olvasható marad és könnyebb átmenetet biztosít a kézírásos és a barokk antikva között. Ebben az esetben a kézírásos típus használata releváns a törvényhozatal történelembe tekintő múltjával és tekintélyével.) A negyedik a színek összhangja. Nem mindegy, hogy a háttér és előtér milyen színeket kap, mennyire akarjuk kiemelni az előteret vagy annak egy-egy részét, egy címet, egy hivatkozást stb, ahogy az sem, hogy az adott vizuális környezettel megegyező fontosságú új elemet hozunk létre, fontosabbat vagy éppen csak egy megjegyzést. (megfelelő színekkel elérhetjük, hogy az elemek egy csoportja törjön ki, de egymással egy prioritást képviseljenek a figyelemfelkeltés szempontjából)