Informatika | Grafika » Lonovics László - Vizuális elmélet, vizuális tervezés

VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Vizuális elmélet, vizuális tervezés modulfüzet Verzió: 1.0 VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Összeállította: Lonovics László Lektor: A modul címe: Vizuális elmélet, vizuális tervezés A Tessedik Sámuel Főiskola és a Békéscsabai Regionális Munkaerőfejlesztő és Képző Központ az Európai Közösség pénzügyi támogatásának segítségével a Phare2000 HU 0008-02-01-0031 program keretében indított Informatikai reklámgrafikus, web tervező tanfolyam tananyaga. Szarvas, 2003. VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Tartalomjegyzék VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Bevezető A webes tervezést illetően két szemlélet állítható szembe egymással az egyik az un. mérnöki, praktikus a másik a művészi, önkifejező

Az elsőt illetően meg kell jegyezni, hogy a tudományosan elemzett hatás mechanizmusok, és felmérések azt igazolják, hogy a tervezést mindenképpen ezek alapján kell elkezdeni. Nem lehet vita tárgya az, hogy egy 80 %-os szürke árnyalatú alapon a fekete szöveg nehezen olvasható. Nyilván az sem vitatható, hogy a web oldal háttér színének olyannak kell lennie, hogy a rajta elhelyezett vizuális információk minél jobban befogadhatóbbak legyenek. A kékes-ibolya színű felirat, vagy grafika sötétkék alapra helyezve alig látható Ez a színkombináció ugyanakkor egy sálon, vagy más egyéb ruhaneműn igazán elegáns lehet. Ezeken, és hasonló (tipográfia, tartalomszerkesztés stb) szabályokon alapulhat az igazán jó webtervezés is De ez még nem elegendő feltétel A szabályok mechanikus alkalmazása eredményezhet jó, és használható megoldásokat De ha csak azokra hagyatkozunk, túlságosan egyforma jellegtelen weblapot láthatnánk. Holott

alapvető marketing elvárás például a sajátos arculat létrehozása, az esztétikai normáknak megfelelő megformálás, nem beszélve az egyéb figyelemfelkeltő vizuális eszközökről. Ehhez kellő kreativitás és intuíció szükséges. Ettől válnak olyan változatossá például a csupán egyszerű fekete-fehér színben nyomtatott sajtókiadványok, könyvek stb. is Az előbbi gondolatokat Márai Sándor Füvészkert című könyvében költőibb módon, és nagyon szemléletesen így fogalmazza meg. „Ahhoz, hogy egy emberi alkotás remekbe sikerüljön, s időtlen ragyogással kápráztassa és gyönyörködtesse az embereket, a tehetség, a téma, a kivitelezés tökéletessége mellet kell valami más is. A remekműben van valamilyen tündéri elem is, mely csodálatos fényével átsugárzik az egészen, oly gyöngéden és megejtően, mint ahogyan az északi fény világít a nyári éjszakban, valószínűtlenül s mégis fényszerűen, mert látni és olvasni is

lehet mellette. A remekmű legyen valóságos, pontos, okos, céltudatos, arányos, gondosan kivitelezett – s legyen még valami más is. Tündéri is legyen S minden öntudatosság mellet önfeledt is legyen Mérnöki szabályok szerint épüljön De káosz is legyen benne, egy kávéskanálra való az ősködből, mely a csillagképek nyomában porzik, arany szemcsékkel. Tündéri nélkül csak „nagy” vagy „tökéletes” művek vannak” A web lapok készítésével először a számítástechnikával foglalkozó szakemberek próbálkoztak, annak ellenére, hogy ahhoz alapos grafikai , tipográfiai stb. szakmai tudás is szükséges. Ennek az volt az oka, hogy az utóbb említett szakmával foglalkozók nem voltak birtokában azoknak a számítástechnikai ismereteknek, amelyek szükségesek lettek volna ahhoz, hogy sikerrel próbálkozzanak. Sőt 5. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ többen közülük el is

zárkóztak attól, hogy közelebbi ismeretséget kössenek a számítógépes képalakítással, tervezéssel. Olyan gyorsan, és nagy sebességgel történtek a változások a számítástechnikában, hogy a még érdeklődő grafikus tervezők többsége is elriadt a számítógép alkalmazásától. A kényszerítő szükségszerűség, és a lehetőségek elsősorban a kibernetika szakembereit mozgósították a kísérletezésre. A próbálkozások a tapasztalatok eredményeként, egyre hatékonyabb és jól használható honlapok készültek. Az is törvényszerű, hogy a webtervezéssel foglalkozók között voltak jó vizuális adottságokkal rendelkezők is, akik fokozatosan megismerkedtek a vizuális kommunikáció szabályaival. Így azt kell megállapítani, hogy e tekintetben ezen az úton nem a vizuális területen képzett szakemberek voltak az úttörők, hanem a számítástechnikusok. Azért ne feledjük, hogy az évszázadokon felhalmozott grafikai, színelméleti,

pszichológiai, tipográfiai stb. ismeret híján ma nem ott tartana az internetes web design, ahol most van. Az is valószínű, hogy egyre több grafikus, design sőt marketing szakember kapcsolódott be ebbe a szakmába. Az egyre inkább felhasználóbarát szoftverek lehetővé tették, hogy a más szakmabeliek is megismerjék, és használják a kibernetika által felkínált alkalmazásokat. Egy olyan szakmai tudással felvértezett szakembergárda kezd kialakulni, amely komplex ismeretekkel rendelkezik. Valószínű, hogy ők vannak kevesebben, és többen azok akik szakmai tudása még nem felel meg annak az elvárásnak, amely ennél a szakmánál elvárható lenne. Ez valószínű, hogy azért van így, mert e szakmának célirányos komplex képzésének gyakorlatával nemigen találkozhatunk a honi oktatásban. A képzések tartalma inkább egy-egy részterületre korlátozódik (grafikus szerkesztő és képfeldolgozó programok, multimédia stb. tanfolyamok) Még az

Iparművészeti Egyetemen is úgy oktatják a web lap tervezést, hogy a hallgatók nincsenek tisztában azokkal a hardver és szoftver adottságokkal, amelyek elengedhetetlenül szükségesek a jó és használható tervek készítéshez. Nyilván azzal sem, hogy a webtervezés nem csupán statikus oldalak létrehozását jelenti. Ezek dinamikus összekapcsolása egyfajta webes gondolkodásmódot kíván, amely a lineáris helyett a hálószerű kapcsolatokra helyezi a hangsúlyt, és nagyban a számít a felhasználó interaktivitására. Csak néhány észrevétel arra vonatkozóan, hogy mennyire összetett szakterületről, vagy szakmáról van szó Ebben a modulfüzetben kísérlet történik arra, hogy a tervezés során figyelembe veendő szempontok és ismeretek, minél nagyobb körét bevonja. Meg kell jegyezni, hogy a modul oktatására rendelkezésre álló idő, korlátokat szab az anyag terjedelmében. 6. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI

REKLÁMGRAFIKUS, WEB TERVEZŐ A vizuális nyelv Habár a web tervezés mind a verbális, mind a vizuális kommunikáció szabályain, és alkalmazásának gyakorlatán alapul, mégis a vizuális a meghatározó. Meg kell jegyezni azonban, hogy az interneten történő szöveg és tartalomszerkesztés sajátosan más mint például a hagyományos nyomtatott sajtó esetében. Ennek a témának bővebb ismertetésére a modul, tartalomtervezés fejezete tér ki részletesebben A vizuális kommunikáció nyelve sajátosan különbözik a verbálistól. Paradoxon, hogy a vizuális közléseket, nagyon sok esetben verbálisan próbáljuk megfogalmazni. Egy képről akár regényt is lehet írni és akkor sem biztos, hogy sikerül feltárni a képről leolvasható összes információt. Egy szkenner több millió adatot tud rögzíteni egy festményről. Azon túl, hogy ez az információmennyiség alkalmas lesz például reprodukció készítésre, vagy arra, hogy egy restaurátort

segítsen munkájában, továbbá általa statisztikailag kimutatható a színek aránya, nem valószínű, hogy arról is információt kapunk, hogy a befogadóban milyen benyomást és milyen érzést kelt a vizsgált kép. Nagyon úgy tűnhet az előbbi példából, hogy a kép nemigen alkalmas arra, hogy tartamilag objektív információt nyújtson a befogadó számára. Hasonlóan a regény sem igazán, de egy tudományos cikk igen. Így van ez a vizuális kommunikációban is, vannak olyan közlésformák, amelyek alkalmasak arra, hogy egyértelmű üzenetet közvetítsenek Ilyenek például a műszaki rajzok, információs rendszerek, grafikonok stb. A műszaki jellegű és egyéb a közhasználatban elfogadott és gyakorolt vizuális közlések megértéséhez szükséges az ábrázolás konvencióinak ismerete A közlések pontos megfogalmazásához olyan kódrendszer kell, amelyet a közlő és a befogadó is ismer. A vizuális kommunikáció folyamatában az értelmezés

szempontjából, nagyon fontos szerepe van továbbá a kontextusnak Annak megváltozása esetén ugyanaz a vizuális jel más jelenthet, vagy félreérthető. A konzervdobozon látható mosolygós arcú gyermek képének láttán, nálunk senkinek sem az jut az eszébe, hogy a konzervdobozban, gyermekhúsból készült ételféleség lenne. Inkább az, hogy egy gyermekek számára gyártott termékkel van dolgunk Megtörtént esetként mesélik, hogy egy afrikai faluban hasonló képpel címkézett, egyébként kakaót tartalmazó konzervdoboz láttán , az ott lakók azt hitték, hogy abban gyermekhús van. Mivel előtte általában olyan konzervet kaptak, amelyben mindig az volt, amely a konzervdobozon látható kép mutatott, jutottak az előbbiekben említett következtetésre. Arra is jó példák említhetőek, hogy a látszat valóságát jól megjelenítő fotó nem mindenki számára alkalmas a képen szereplő személy azonosítására. Bennszülött törzs tagjai nem

ismerték fel társaikat az azokról készült fényképen A számunkra hihetetlen történet azt bizonyítja, hogy fotó vizuális nyelvét is meg kell tanulni ahhoz, hogy a képet értelmezni tudjuk. Köztudott, hogy Sztálin alacsony ember volt. A fényképeken mégis mindig úgy látszik, mintha magas és erőteljes alkatú ember lett volna. A magyarázat egyszerű, a propaganda képek készítésekor mindig derékmagasságból egy kicsit felfele irányított kamerával fényképezték. A képek megértéséhez és az általuk közölnivaló tartalom képi megfogalmazásához, szükséges a vizuális nyelv használatának elsajátítása, bármilyen vizuális megjelenési formájáról is van szó. A weboldalak tervezésénél komplex jelek, 7. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ vizuális nyelvi elemek halmazából kell olyan felhasználóbarát rendszert alkotnia a tervezőnek, hogy az a leghatékonyabban közvetítse az

információt. Nem szabad azonban arról sem megfeledkezni, hogy mint az étel esetében, fontos a jó tálalás. Esztétikailag kifogásolható megjelenés is elriaszthatja a befogadót, az igényes felhasználót. Mint tudjuk retinánkon csupán különböző optikai elemeket érzékelünk, amelyek az agykéregben tudatosulnak, ott válik belőlük értelmezett kép. Az érzékelés folyamán különböző vizuális minőségű foltokat (szín, minta, tónus stb.), azok találkozásának változó karakterű körvonalait (éles, puha, változó stb.) észleljük Ezek a nonfiguratív optikai elemek csak az alkotó látás folyamatában válnak vizuális nyelvi elemekké, és mint a betűkből a szavak, mondatok és komplex szövegek, úgy azokból képek születnek, ami persze nem jelent teljes analógiát a két nyelv között. Az retinális látás bizonytalanságát és kérgi érzékelés fontosságát teszik próbára azok a képfelismerési feladatok, amelyek egy tárgy vagy

jelenség olyan szokatlan nézetét ábrázolják, amely nem jellemző rá. A feladat megoldása nem is olyan könnyű. Egy kelkáposzta levél apró részletének felnagyított képe sokszor egészen más asszociációkat kelt (hegyvonulat, víz vájta kőzet, textilgyűrődés stb.) Visszatérve az optikai elemekre ezeket a képi ábrázolásokban a pont, a vonal és a folt különböző minőségeinek és mennyiségeinek a létrehozásával jelenítjük meg. Ezeket gyakorlatban vizuális nyelvi elemeknek nevezzük Lássuk sorjában, hogy milyen lehetőséget kínálnak a képalkotásban az előbb említett nyelvi elemek. A vizuális nyelvi elemek: pont, vonal, folt A pont „Az elvont gondolkodás szerint a pont eszményien kicsi kör” Vaszilij Kandinszkij A vizuális kommunikációban megjelenési formája rendkívül változatos lehet, attól függően, hogy milyen nyomhagyó eszközt használunk, illetve milyen céllal használjuk. Az ecset, a toll, kréta más-más

pontkaraktert hoz létre Különböző módon elrendezett együtteseikből számtalan vizuális hatás hozható létre Népművészeti és iparművészeti alkotások díszítményeinek gyakran alkalmazott vizuális eleme. Különböző sűrűségű halmazai segítségével plasztikus árnyalatos megjelenítést tudunk létrehozni grafikáinkon. A pont dekoratív alkalmazása a kékfestő mintán 8. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ A pont , vonal és a folt alkalmazásának példái egy témán belül. Grafikai transzpozíciós gyakorlat. Főiskolai hallgatói munka A nyomdaiparban az árnyalatos fényképeket egy speciális rácson keresztül fényképezve bontanak különböző nagyságú pontokra lehetővé téve az árnyalatos, sőt színes nyomtatást. Nem kell messzire mennünk ahhoz, hogy gyakorlati példaként a témánkhoz legközelebbi pont felhasználási módot, nevezetesen a digitális képmegjelenítést

említsük. A digitális kép különböző minőségű és mennyiségű pontokból áll A 9. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ szöveg képi megjelenítésének is fontos eszköze lehet a pont (felsorolások hangsúlyozása, pontsorral történő figyelemvezetés stb.) A pont helyzetei a képen: 1. 2. 3. 4. 5. 6. Az első és ötödik képmezőn a pont a felezőegyenesen helyezkedik el. Az első a kép mértani középpontjában a stabilitást és kiegyensúlyozottságot fejez ki, az ötödik a felső harmadban a néző figyelmét leginkább megfogó helyen található. Nem véletlen tehát az, hogy a könyvek címe általában ezen a helyen van. A második, harmadik és negyedik helyzete esetleges, ennek következtében bizonytalanságot fejez ki. Előfordul azonban, hogy a tervező pont ezt a hatást használja ki az alkotás során 10. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS,

WEB TERVEZŐ Lonovics László: Borítóterv A pont és vonal alkalmazása díszítő elemként egy könyvborítón. Raszterpontok alkalmazása árnyalatos és színes képek nyomtatására 11. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Egy jól megtervezett web oldal, ahol a pont két fajta alkalmazását láthatjuk. Az egyik esetben a pontokból álló nyíl a feliratra mutat, másiknál a felnagyított nyíl részlet a jobb felső oldal dekoratív, grafikailag a figyelmet felkeltő eleme lesz. A vonal: Az előzőekre visszautalva meg kell jegyeznünk, hogy pontnak elméletileg nincs kiterjedése. Ugyancsak bajban vagyunk a vonallal is, amelynek elméletileg ugye csak hossza van szélessége nincs. A gyakorlatban, amikor rajzolunk, természetesen nem elmélkedünk fölöslegesen ezekről Tudomásul vesszük, hogy az általában kisebb méretű foltokat pontként használjuk és a vonalnak is van vastagsága. A vonal a pont

mozgásából születik Egy pontszerű fényforrás gyorsan mozgatva egy fénylő vonal érzetét kelti. A toll a papírhoz érve először egy pontot hoz létre, majd kezünk mozgásának eredményeként folyamatos nyom keletkezik, a vonal. A vonal vastagságának megváltoztatásával, műszaki rajzainkban egyértelmű információt tudunk kódolni, pl. a vetületi ábrázolásnál; vetítő sugár (vékony vonal), a nézeti képek látható élei (vastag vonal). A látvány imitatív megjelenítésére törekvő rajzainkban, a vonaltónus (a vonal vastagságának a látványban megjelenő tárgy és háttér találkozásában érzékelhető körvonal optikai különbségeknek (fény, árnyék stb.) megfelelő megváltoztatásával, tónusozás nélkül is ki tudunk fejezni térbeliséget. 12. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Giovanni Battista Tiepolo: Lavírozott rajz A művész vonal vastagságának változtatásával a

test térbeliségét, plasztikusságát érzékelteti A vonalfajták végtelen nagy száma sokféle hatást jelenthet; vékony, vastag, lágy, kemény, lüktető, lendületes, széteső, bizonytalan, stb., mind más-más tartalmakat közvetíthetnek. Elég csak megemlíteni a kézírást, ahány ember annyiféle vonalhasználat Írásképünk alapján beazonosíthatók vagyunk, sőt a grafológia szerint az személyiségünkről is árulkodik. A gyermekrajzok vonalhasználatának módjából a pszichológusok a gyermek személyiségtulajdonságaira következtetnek. Sőt a katasztrófát, vagy más traumát átélt emberek sokszor nem tudnak szavakkal beszámolni orvosuknak lelkiállapotukról. A pszichiáter egyik módszere ilyenkor a rajzoltatás, olyan utak nyílnak meg a az orvos számára a beteghez, melyek máskülönben rejtve maradnának. Gyakran tisztán tárgy nélküli vonalakkal, formákkal és színekkel fejezik ki maguk ösztönösen a betegek. A vonalak, formák,

iránya, helyzete, minősége- laza vagy feszült, egyszerű vagy bonyolult, zárt vagy széteső, bizonytalan vagy határozott stb. vonalak, formák – mind más-más lelki folyamatot tesznek világossá az orvos számára. 13. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ A lélektani kísérletek is azt bizonyítják, hogy a tárgy nélküli vonalak rendkívül kifejezően jelenítik meg a kísérleti személy pillanatnyi hangulatát, temperamentumát, intellektualitását, ahogy ez a fenti rajzon is látható. Kifejezés vonalakkal. Gyermekrajzok A képzőművészetben és az iparművészet számtalan területén megfigyelhető a vonal tartalmi és érzelmi kifejeződésének tudatos alkalmazása. Főleg a reklámok nyomtatott és elektronikus formáiban, a díszítőművészet majd minden területén. 14. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Zenei témájú plakátok A

grafikus a zene ritmusát a vonalak ritmusával igyekezett kifejezni. 1. Bach Fesztivál plakát, grafikus; N Jenkins 2. Jazz hangverseny plakát, grafikus; B Gill Lonovics László: Összefonódás A képen a vonalak segítségével létrehozott térillúziót érzékelhetünk. Az egyszer bemélyedő formák tekintetváltás után kiemelkedni látszanak és e jelenség váltakozása teszi dinamikussá a grafikát 15. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Edward Munch: Sikoly Szép példája az expresszív vonalhasználatnak, ahol a vonal az érzelemkifejezés eszköze Hundertvasser, Tájkép arcképpel című képe jól szemlélteti a színes vonal dekoratív használatát. 16. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Victor Vasarely: Zint Kepes György: A Bostoni Rádió épületének homlokzati fényfestménye 17. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS

INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Orosz István: Színházi plakát Droppa Judit: Textil 18. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Roaul Dufy: Narancs koncert A festő a hegedő körvonalát a változó vastagságú vonalakkal rajzolta meg. Malonyai Dezső: A magyar népművészet című könyv emblémája A vonal és folt dekoratív alkalmazásának példája A vonal vastagságának, hosszúságának, színének, irányának, mennyiségének, egymáshoz való viszonyának, ritmusának számtalan variációja hozható létre. Csak tervező leleményességén és kreativitásán és szakmai tudásán múlik, hogy milyen eredmény születik. 19. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Optikai csalódások a. A párhuzamos vonalak íveseknek látszanak b. A párhuzamos egyenesek ha más irányú egyenesekkel metsszük őket, egymástól elhajlónak és nem

párhuzamosnak látszanak. c. A függőleges szakasz hosszabbnak látszik, mint a vízszintes d. Az „A” szakasz hosszabbnak látszik minta „B” szakasz Az optikai csalódások jelenségeit feltétlenül figyelembe kell venni a tervezés során, mert ha nem olyan vizuális hatások (arányváltozás, formatorzulás) jönnek létre, amelyek lerontják megvalósult alkotás minőségét A vonal mint a perspektíva eszköze Az egyenletesen vastag függőleges és vízszintes vonalak a sík forma érzetét keltik. Felhasználásuk statikusságot és nyugalmat fejeznek ki Az életben tőlünk térben távolodó párhuzamos egyeneseket összetartó vonalakként érzékeljük. Erre a tapasztalatra épül, hogy a síkra rajzolt összetartó egyeneseket is három dimenzióban észleljük Fokozhatjuk az előtérből a messzeségbe vezető hatást ha nem egyenletes vastag vonalakkal dolgozunk, hanem a vonal a vastagból elvékonyodik. A felénk vékonyodó vonalak, az összetartó helyett

szétnyíló vonalköteg tehát vonalperspektíva ellentétes értelmű felhasználása- megfordítja a távlatot Ezekkel az eszközökkel a térbeliség illúzióját, figyelemfelkeltést, tekintetvezetési irányt, feszültséget, stb. tudunk létrehozni 20. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ A függőleges és vízszintes egymással párhuzamos vonalak a síkjelleget és nyugalmat fejeznek ki Jacek Neugebauer: Lengyelország 21. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ A folt A folton általában kétdimenziós síkszerű formát értünk. Folt születik például ha a vonal kezdő és végpontját összekötjük A folt sokféle fajtája és minősége hozható létre, különböző módon. A képfelületen a folt létrehozható nyomtatással, festéssel, satírozással, minta kitöltéssel, textúra illetve faktúra létrehozásával stb. Ennek körvonala lehet

határozott szabályos, illetve szabálytalan elmosódott stb. attól függően, hogy milyen eszközt használtunk. Formája a szabályos geometrikus és organikus formától a szabálytalan amorf formáig, és az előbbiek kombinációiból létrehozható számtalan alakú lehet. A folt kifejezését erősen befolyásolja, hogy a képsíkon hol helyezkedik el. Az egyik esetben kép központi helyét elfoglalva főszereplőként szinte uralkodó ként jelenik meg, a kép alsó sarkában szinte sértődötten ki akarja dönteni a kép szélét, a harmadik esetben pedig kissé lebegős a mozgást is kifejező formává válik. Csupán a háromszög alakú forma helyzetének megváltoztatása, nyugalmat, pillanatnyi egyensúlyt és mozgást fejez ki. 22. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ A felső ábrán a négyzet alakú folt elhelyezkedési változatait láthatjuk a képmezőn. A kép szélével párhuzamos négyzetek

viszonylagos nyugalmat, a ferde helyzetűek inkább mozgást fejeznek ki. A képmező széle felé mutató négyzetsarkok erős kontrasztban vannak a kép széleinek egyeneseivel A folt, amely illetően elméletileg két dimenziójú, a gyakorlatban ha annak felületén tónusátmenet van szintén térszerű megjelenítésre is alkalmas. A számítógépes programok, egyre változatos formában nyújtanak lehetőséget arra, hogy a régebben inkább síkszerűen megjelenő betűket plasztikus hatásúvá tehessük. Ezzel kapcsolatosan meg kell jegyezni, hogy minden grafikai megoldás csak akkor indokolt, hogy ha az a kommunikáció hatékonyságát növeli. Sajnos sokszor a betűk szavak túlzó és és gyakran történő említett módon történő átalakítása egyszerűen „csak” az olvashatóságot akadályozza. 23. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Hermann-rács. Kartávolságból nézve a fehér csíkok

kereszteződéseiben kicsiny szürke foltokat látunk megjelenni. Feszültségkeltő grafikák (embléma, logo) készítésekor kiaknázható ez a fiziológiai jelenség. Összefoglalva az előzőeket meg kell jegyeznünk azt, hogy a vizuális nyelvi elemekből végtelen számú és minőségű kép hozható létre, amelyek az információ közvetítésén túl érzelmi hatást is közvetítenek a befogadókra. A művészi kifejezés mellet, elég csak a reklámokra gondolnunk, ahol a fogyasztók befolyásolása a pszichológiai eszköztárának tudományosan igazolt törvényszerűségeinek a latba vetésével történik. Az olvasóban joggal merülhet fel az a kérdés, hogy a háromdimenziós képalakításra (építészet, tárgykészítés, a környezetalakítás más formái) alkalmasak-e az előbb említett vizuális nyelvi elemek. A síkon történő tervezéskor mindenképpen igaz Ugyanakkor a háromdimenziós téri látvány befogadásakor is érzékelünk, például

körvonalakat, foltokat stb., amelyek változó minőségeinek észlelésekor érzékeljük a térbeli formákat, azok tömeghelyzeteit, térbeliségét, esztétikai minőségét. 24. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ A képmező és a vizuális nyelvi elemek A képmező formája A vizuális nyelvi elemekből létrejövő látványt, ami legyen kétdimenziós illetve háromdimenziós, minden esetben valamilyen képforma határolja le. Az ember látókúpja egy horizontálisan kiszélesedő határozatlan szélű ovális képformát eredményez. Ennek az ergonómiai szempontnak megfelelően a számítógép képernyője, filmvászon és a festmények, fotók zöme, fekvő téglalap alakú. Természetesen a gyakorlatban az ettől eltérő formájú képekkel is találkozunk nagy számmal (álló téglalap, kör, ovális, szabálytalan stb.) A képmező osztásai A képmezőn elhelyezkedő optikai elemek (vizuális nyelvi

elemek) különböző részekre oszthatják azt, amelyek lehetnek szabályosan vertikálisan és horizontálisan felezett, átlós, negyedelős, sávos ezek kombinációi, továbbá ezektől eltérő arányú és formájú osztások számtalan variációja. Ezek mindig a képi elemek téri, formai összetételétől és a közölni kívánt tartalomtól függően alakulnak ki. Máté András: Magyarország képeslap tervek 25. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ A képmező osztásainak alapesetei (horizontálisan és vertikálisan felezett, átlós, negyedelős, sávos, stb.) 26. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Fukuda: Plakátok A képmező osztásainak gyakorlati példái 27. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ A képmező osztásainak variációi 28. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS

INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Színházi plakát (Paraszt Hamlet) A képmező osztása a figyelemfelkeltés céljából, továbbá a pozitív és negatív foltok ellentétének szemléletes és jó gyakorlati megoldása 29. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ A fentebb látható ábrán az osztások különböző formájú területeket választanak el egymástól, amelyek egyensúlyos illetve kiegyensúlyozatlan viszonyban vannak egymással 30. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ A görkorcsolyapálya szabálytalanságát jól érzékelteti a plakát tervezője a cikkcakk vonalú osztás segítségével Keresztes Dóra: Gyermekszínházi Találkozó plakátja A tartalmat kifejező és hangsúlyozó képmező osztás 31. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Optikai súlyviszonyok A képen elhelyezkedő

vizuális nyelvi elemek az alább felsorolt szempontok szerint eredményeznek különböző optikai súlyviszonyokat: • nagy-kicsi • súlyos-könnyű • tömör-laza • sötét-világos • telített-üres A képmezőn előforduló irányok A képmezőn elhelyezkedő optikai elemek elhatárolódása következtében kialakuló osztások különböző irányokat eredményeznek. A képmezőn leggyakrabban előforduló irányok: • • • • • • • • Jobbra-balra Le-föl Jobbra föl Jobbra-le Balra-fel Törésekkel váltakozó Ívesen váltakozó Az előbbiekből létrehozható változatok 32. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ A képmezőn elhelyezkedő irányok lehetséges kifejeződésének példái, emelkedés, lejtés stb. 33. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ A képtér optikai elemeinek helyzetviszonylatai A képen elhelyezkedő optikai elemek

(pont, vonal folt forma fény stb.), a tartalomnak megfelelő rendben rendeződnek el, amelynek eredményeként, azok elhelyezkedései különböző képi kompozíciót eredményeznek. Az út szélén elhelyezkedő, tőlünk távolodni látsz egyforma nagyságú, de a perspektívának köszönhetően fokozatosan kisebbedő fák egy szabályos sorolást, ritmust eredményeznek. A kép síkján a fák körvonala egyre kisebb és más helyzetű lesz Egy tájképen a horizonton kirajzolódó város, vagy hegyvidék körvonala érdekes, nagy valószínűséggel váltakozó vonalritmust eredményez. A képsíkon elhelyezkedő optikai elemek helyzetüket illetően különböző kapcsolatban lehetnek. Például a képsíkon alul elhelyezkedő folt felett egy másik is megjelenhet. A perspektivikus ábrázolási konvenciónak megfelelően ez azt jelentheti, hogy amelyik lejjebb helyezkedik el az közelebb van hozzánk. Tartalmi szempontból viszont az alsó kisebb az alárendeltet, míg a

felső az uralkodót, gondoljunk egy földön csúszó szolgára és egy trónuson pöffeszkedő királyra. A képi helyzetviszonylatok fajtái: Sorolások és kapcsolások Sorolások lehetnek: ritmusosak és aritmikusak Ritmus fajtái: Formaritmus Tömegritmus Színritmus Foltritmus Vonalritmus Elemváltó ritmus Önmagába visszatérő ritmus Ritmus típusai: monoton Pulzáló Önmagába visszatérő, és elemváltó ritmus 34. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Art deco minta tervek (változatos ritmusok) Zahorán Mária Magyarország csomagolópapír (szín, forma és felirat ritmus) 35. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Lonovics László: Magyarország képeslap (betű ritmus) 36. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Lonovics László: Magyarország „EKG” (fény ritmus) 37. oldal VIZUÁLIS

ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Ritmusvariációk egy témára 38. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Ritmusvariációk egy témára 39. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Kapcsolások lehetnek: • kívül • Benne • Alatta • Felette • Mellette • Előtte • Mögötte • Körülötte Hans Arp: Konfiguráció (Forma elhelyezkedése belül és alatta, stb.) 40. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Henry Moore: A sisak (plasztikus formák kapcsolása, kívül belül) 41. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Képi minőségviszonylatok Az optikai elemek különböző minőségűek lehetnek. Ennek köszönhetően különülnek egymástól a képen látható alakok, tárgyak, felirat stb. A színpadon fekete

ruhában ugyanolyan háttér színű függöny előtt álló színész nem látható. Csak egy reflektor fény sugarába kerülve válik láthatóvá, mivel a háttér és a minta (színész) más minőségviszonylatba kerül egymással, mint a megelőző esetben. Valamit mindig az ellentéte emel ki legjobban, a kicsit a nagy, a sötétet a világos, a szabályos a szabálytalant és még hosszan sorolhatnánk tovább. A képi minőségviszonylatok három csoportra oszthatók: Ellentétek - Átmenetek -Áttünések 1. Ellentétek (kontrasztok): • Formakontrasztok • Színkontrasztok • Vonalkontrasztok • Fénykontrasztok • Felületkontrasztok • Karakterkontrasztok Archipenko: Ovális figura (szögletes és íves formák kontrasztja) 42. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Paizs László: Plasztika (Formakontraszt) Vonalkontraszt, Főiskolai hallgatói munka 43. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS

INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Faktúrakontraszt Faktúrakontraszt 44. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Vonalkontraszt, Főiskolai hallgatói munka Ellentétek típusai: kiegyensúlyozott, harmonikus kiegyensúlyozatlan, diszharmonikus A színkontrasztok jelenségei és törvényszerűségei a színelmélet fejezetben kerülnek részletes bemutatásra és ismertetésre 45. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ 2. Átmenetek: • Formaátmenetek • Színátmenetek • Tónusátmenetek • Vonalátmenetek • Textúraátmenetek • Mintaátmenetek • Faktúraátmenetek • Fényátmenetek Máté András: Magyarország plakát (formaátmenet, formaátalakulás) 46. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Szín, faktúra és struktúra kontrasztok és átmenetek 47. oldal VIZUÁLIS ELMÉLET,

VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Faktúraátmenet Faktúraátmenet 48. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Színátmenetek 49. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ 3. Áttünések Áttünések, Főiskolai hallgatói munka 50. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ A képhordozó anyag optikai szerepe A vizuális közlés elemei mindig valamilyen anyagban jelennek meg. Egyáltalán nem mindegy, hogy egy színt milyen papírra nyomtatunk Ugyanolyan anyagú és színű festék eltérő színárnyalatot mutat fényes illetve matt papíron. A fényes papíron sötétebbnek látszik ugyanaz a festék. Ezért van az, hogy a Pantone skálát két minőségű papírra is kinyomtatják, hogy a grafikusok figyelembe vehessék a tervezés során az eltérő papírminőségből eredő

színkülönbözőséget. A számítógép képernyőjén látható színek egy részét nem lehet a hagyományos, nyomdai úton, de még az újabb tintasugaras, vagy lézernyomtatókon sem kinyomtatni. Ez az eltérő színkeverésből adódik (szubsztraktív, additív) Bizonyos grafikai programok még figyelmeztetik is a felhasználót arra, hogy a választott szín eltérő lesz a nyomdai sokszorosításban, ha RGB színmódban dolgozunk. Még hosszasan lehetne sorolni a példákat, hiszen a mindennapi életben nagyon sokféle anyagot használunk, ezek függvényében más és más lesz ugyanannak a képnek a hatása megjelenése. De nemcsak az anyagtól, hanem annak megváltozott struktúrája is eltérő vizuális megjelenést eredményez Jó példa erre a kötés technikája. Ugyanolyan fonalból de különböző kötésmintával létrejövő textúra is más színhatást eredményez. Érdekes lenne még tovább sorolni az ilyen jellegű példákat, de mivel ez már nem tartozik

szorosan a témánkhoz eltekinthetünk azoktól. A webtervezéskor használhatunk különböző mintákat. Ezeket programok segítségével is létrehozhatjuk. A megrajzolt, vagy kiválasztott minta megsokszorozható, ami lehet egy érdekes színfolt, textúra nyom, valamilyen grafikai elem, piktogram, embléma stb. Az Adobe Photoshop, fill és pattern parancsával kitölthető egy kijelölt területet Vigyáznunk kell azonban arra, hogy a minta ne legyen hangsúlyosabb mint a rajta elhelyezett képelemek. Általában egészen világos árnyalatok használatát javasolhatjuk. A web oldal egy kisebb felületén, egy vékonyabb sávban célszerű a kontrasztosabb minta megjelenítése a kompozícióban Egy anyag vizuális megjelenése mint már említettük más és más lehet. Ez attól függ, hogy milyen a struktúrája, textúrája illetve faktúrális megjelenése. Az előbb említett három fogalom definíciója: Struktúra: Az anyag megváltozhatatlan felépítése, szerkezete. Igy

például a papírnak fémnek stb. különböző struktúrája van Textúra: A textúra a struktúra szervesen keletkezett zárófelülete (merített papír, fémek, fakéreg stb.) Faktúra: Az anyag különböző megmunkálásának eredményeként létrejövő felület. 51. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Különböző mintájú ( vonal, folt textúrák és faktúrák) papírokból kollázs technikával készült grafikák. Főiskolai hallgatói munka Az anyag különböző megmunkálásának eredményeként létrejövő plasztikai faktúra 52. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Függönyanyag textúrája Textilnyomat (textilfaktúra), Főiskolai hallgatói munka 53. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Transzpozíciós tanulmány különböző minták alkalmazásával. Főiskolai hallgatói munka 54. oldal

VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Faktúrából létrehozott minta Textúra minta 55. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Struktúra (fa) Struktúrából létrehozott minta 56. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Vonalfaktúrák 57. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Hasonló de különböző struktúra eredményeként létrejött textúrák 58. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Színelmélet A vizuális kommunikáció egyik legfontosabb eszköze a szín, ami természetesen önmagában még nem kommunikatív. Hiszen a szín hatása és jelentése csak egy tágabb eszközrendszerben válik értelmezhetővé. Például a forma, a tér, vagy a kontextus viszonylatában. Ahhoz, hogy a színeket

hatékonyan tudjuk alkalmazni a hétköznapi kommunikációban vagy művészetben, meg kell tanulni bizonyos törvényszerűségeket és konvenciókat. A színek keverése például köztudottan szabályokon alapul, de a színek hatékony és megfelelő használata is valamilyen esztétikai, pszichológiai, fiziológiai törvényszerűségen alapul. Továbbá vannak olyan konvenciók, amelyek ismerete hiányában a színek jelentése nem egyértelmű, vagy félreérthető. Elég csak a gyász színének szimbólumára gondolnunk. Európában a gyász meghatározó színe a fekete, ugyanakkor Indiában a fehér. Kontextus példára hivatkozva, érdekes megemlíteni, hogy ugyanaz a szín (vörös), jelentheti szerelmet, forradalmat, az erőszakot attól függően, hogy milyen összefüggés rendszerben reprezentálódik. Az előbb említett néhány kiragadott példa, remélhetőleg rávilágított arra, hogy színeknek a használata nem véletlenszerűségeken alapul. Szabályai vannak

és azok megtanulhatók. Meggyőződéssel állítható, hogy nagyrészt minden átlagképességekkel rendelkező ember is Természetesen vannak olyan személyiségek, akik az átlagtól eltérő adottságokkal bírnak, és ők magasabb művészi színvonalon tudnak bánni a színekkel. Gyakorlással a színérzékenység, a tervezési képesség nagyban fejleszthető. Világunk, mely körbevesz minket egyre színesebb. Tágabban értelmezve egyre több információ hat ránk, amely többek között színt is tartalmaz, illetve a színek közvetítésével jut el hozzánk. Ezek közé tartozik nevezetesen az internet képi világa, amely köztudottan egyre nagyobb szerepet kap az információ közvetítésben. Nem is olyan régen, még csak fekete-fehér monitorokon szerkesztettünk szöveget, képet, ábrákat stb. Ma már nemigen tudnánk boldogulni a színes monitorok nélkül Egyszerűen rengeteg információ nem közvetíthető szín nélkül Vagy próbáljuk meg fekete fehér

monitoron nézni a színes web oldalakat, azt tapasztaljuk, hogy bizonyos feliratok nehezen olvashatók, vagy legalábbis nem olyan gyorsan mint a színesen. A web odalak meghatározó sajátosságát, megkülönböztető jellegét többek azok színvilága határozza meg. Általában web oldalak tartalmi, szerkezeti összeállítása után az egyik legfontosabb lépés a színvilág megtervezése Ezt nagy vonalakban tartalomfüggő Egészen más színeket kell használni, ha egy óvodának, vagy egy bróker cégnek tervezünk. Ha figyelembe vesszük az óvódás korú gyermek színpreferenciáját, akkor a telített, köznapi kifejezéssel élve, élénk színeket kell választani. A bróker cégnél célszerű egy kicsit törtebb, vissza fogottabbak használata. Különböző kevert színek, színes szürke, egy-két meghatározó telített szín. A befektető szereti ha a pénze biztos helyen, van Ha bróker cég honlapja túlságosan tarka és hivalkodó, esetleg azt a benyomást

kelti, hogy az üzletmenet ötletszerű és a befektetett összeg nincs biztonságban. Általában gazdag ember sem dicsekedik fölöslegesen a pénzével. Figyelembe véve viszont az óvoda, mint 59. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ intézmény jellegét az élénk és esetleg sok színt tartalmazó honlap, kifejezi annak vidámságát az ott folyó pedagógiai változatosságát, stb. Természetesen hosszan sorolhatnánk a példákat, de ez kettő is eléggé bizonyítja a szín jelentőségét. Ezek után lássuk mik azok a törvényszerűségek, amelyek figyelembevételével sikeresebbek lehetünk a színek alkalmazása során. A tudatos színhasználat egyik feltétele a színkontrasztok ismeretén alapul. Természetesen vannak olyan szerencsés emberek, akik ösztönösen jól használják a következőkben ismertetett színkontrasztokat. Ők vannak kevesebben, így még a művésznövendékek számára is kötelező

stúdium a színkontrasztokon alapuló gyakorlatok végzése. Színkontrasztok A színkontraszt két, vagy több szín egymás melletti ellentétén alapul. Ezeknek az ellentéteknek számos praktikus és művészi felhasználási lehetősége van A szakirodalom hét színkontrasztot sorol fel, de általában nem utal arra, hogy egyszerre egy színkontraszt még több más színkontraszt is lehet. Így az olvasóban az a rossz beidegződés alakulhat ki, hogy a színkontrasztok minden esetben külön egymástól függetlenül létező megjelenési formát mutatnak. Például a komplementer kontraszt minden esetben hideg-meleg kontraszt is , de nem minden hidegmeleg kontraszt komplementer kontraszt A kontrasztok megkülönböztetése és különválasztása ugyanakkor indokolt, mert rendszerezi a színek egymáshoz való viszonyát. Magábanvaló, vagy más néven alapszín kontraszt A hét színkontraszt közül ez a legegyszerűbb, mert létrehozásához a színeket tisztán, szinte

keveretlenül használhatjuk. Előállításukhoz legalább három egymástól határozottan különböző telített szín szükséges. Ezeket a színkörön találhatjuk meg amelyeket az alapszínek keveréséből hozhatunk létre. Nem jön létre a jellegzetes kontraszt hatás abban az esetben, ha csupán a színkörön közvetlenül egymás melletti színeket ( sárga, narancssárga, vöröses- narancs) helyezzük egymás mellé, ilyen esetben nem az ellentétek kapnak hangsúlyt, hanem inkább a azonosságok. A három alapszín egymás mellet erőteljes kontrasztot eredményez A színkör másodlagos kevert színei, a narancs-zöld - ibolya már kevésbé. 60. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Tizenkéttagú színkör Alapszínkontraszton alapuló színkompozíció 61. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ A folytonos színkört, a fő és mellékszíneket, és

komplementer színpárokat bemutató ábra 62. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ A színgömb 63. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Alapszínkontraszt példák Az ellentétek a fekete és fehér szín bevonásával még inkább fokozhatók. Alkalmazásuk leginkább a gyerekeknek szánt kiadványokon (mesekönyv, gyermek folyóirat), gyermekjátékok és más fogyasztási cikkek csomagolásain találkozhatunk velük. Természetesen használatuk nem korosztály specifikus Alkalmazásuk segítségével erőteljes figyelemfelhívást tudunk elérni, ezért például a reklám majdnem minden területén láthatunk példákat. Expresszív hatásuk miatt a festészetben is gyakorta alkalmazzák a művészek Keresztes Dóra: Mesekönyv illusztrációk 64. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Ez a kontraszt egy

időben lehet hideg-meleg, mennyiségi, komplementer és részben minőségi kontraszt is.Web lap példa! Alapszínkontraszton alapuló színkompozíciók Főiskolai hallgatói munka 65. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Az alapszínkontrasztra épülő weboldalak 66. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Fény-árnyék vagy sötét-világos kontraszt A kontraszt a szín világos és sötét árnyalat különbségén alapul. Itt említést kell tennünk arról is, miként lehetséges a színek különböző világossági fokozatait létrehozni. A színek világosításához leggyakrabban a fehér színt használjuk Ezt a színek derítésének nevezzük. A sötétítéshez viszont a feketét Mindkét esetben a szín veszít a telítettségéből, és minél többet keverve színhez a szín egyre jobban elveszíti színerejét. A színek sötét és világossági

fokozatainak előállításához különböző szürkéket is használhatunk. Ennek a kontrasztnak a használatával az erőteljes sötét és világos ellentétek alkalmazására, illetve differenciált és sok árnyalatra épülő kontraszthatások is elérhetők. Tónus átmenetek és közelálló skálaszerű színalkalmazások segítségével, harmonikus, kiegyensúlyozott alkalmazásokra van lehetőség. Victor Vasarely: Arcturus 67. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ A sötét-világos ellentét alapja egyrészt a semleges színek tónuslépcsője, (fekete-szürke tónusok-fehér) amelynek két főpólusa a fekete és fehér; másrészt a tarka színek saját sötétségi, ill. világossági értéke, amelynek két főpólusa a liláskék, ibolya (a legsötétebb), ill a citromsárga (legvilágosabb) tarka színek E két pólus között helyezkedünk el az azonos sötétségű, ill. világosságú színpárok, mint pl.

a narancssárga-sárgászöld, vagy a cinóbervörös-krómoxid zöld vagy a bíborzöldeskék stb A színek tónusfokozatai A fehér-fekete, ill. a semleges szürke karakter nélküli indifferens szín, a fehéret és a szürke tónusokat viszont a színkontrasztok (hideg-meleg, komplementer, minőségi stb) egyidejű szimultán hatása kiválasztott szín kiegészítő értéke fele tolja. A sötét-világos ellentéten alapuló kompozíció viszonylag kis számú, 2-4 főértékre épül; ezenkívül az ismétlődés a ritmusrend, valamint a pozitív-negatív formaviszony szempontjából jelentős arányellentétek is szintén fontos alakító tényezők lehetnek e kontraszthatással való összekapcsolódásuk révén. 68. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ A sötét-világos kontraszt, mint említettük már, térbeli hatás kifejezésére is alkalmas. Érzékletes példáit találjuk a fény festőinek, pl Leonardo, Le

Nain Testvérek, Goya, Velazquez, Rembrandt, Watteau, az impresszionisták stb. alkotásai között Az így elért távlati hatás a képen sokszor bizonyos ellentmondást jelent a síkszerűség és a térbeliség vonatkozásában. Ugyanis nem mindig az előtér a legintenzívebb a világosság szempontjából; ez gyakran csak bevezetést jelent, és a középtérben helyeződik a főjelenség, amelyet 2-3 (a képsíkkal párhuzamos) sík fényértékeinek kiemelésével, fokozásával valósítanak meg. A XX. század festészetében (Braque, Picasso, Juan Gris, Leger, a konstruktivisták stb a sötétvilágos színellentétet inkább formák képzésére használják Jan Vermeer van Delft: Fiatal lány arcképe Nagyszerű példája a sötét-világos kontraszt alkalmazásának 69. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Rembrandt: Idős nő arcképe Honlap sötét-világos kontrasztú színekkel 70. oldal VIZUÁLIS ELMÉLET,

VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Hideg-meleg kontraszt Az egyik leggyakrabban alkalmazott festői kontraszthatás leghidegebb pólusú a színkörnek a zöldeskék (mangán-kék) és legmelegebb tarka szín a cinóbervörös. E színellentét optikai érzete hőmérsékleti érzéssel is társul; és az egyes színeket a szerint érezzük hidegnek vagy melegnek, hogy a kérdéses szín mennyi kék, vagy vörös tartalommal rendelkezik, azaz a színtestben milyen távolságra helyezkedik el a kék, ill. a vörös tarkaszín-ponthoz E színellentétet jellemezhetjük még árnyékos-napos, légies-földszerű, távoli-közeli, könnyű-nehéz stb. jelzőkkel is Ezek a párosítások egyben rámutatnak e kontraszt gazdag kifejezési lehetőségeire is. E festői hatás természetesen csak a hideg-meleg színek szimultán kapcsolata révén jöhet létre, mint ahogy a fekete 71. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS,

WEBTERVEZŐ látásához is a fehér egyidejű megjelenése, összehasonlítási lehetősége szükséges (ingerlés-gátlás kölcsönös indukciója). A hideg-meleg színek alkalmazásának gyakori példáit láthatjuk a web oldalakon. Kiváló eszköze lehet a figyelemfelhívásnak Általában a háttér és a minta, háttér és kép ellentéte ezen a kontraszton alapul. Hideg árnyalatú háttér szín (kék) jól kiemeli a meleg színű képelemeket. Mint már említettük, ez a színellentét máshol is megjelenhet. Történetesen ez a kontraszt az összes kontrasztban előfordulhat, kivéve a sötét-világos kontraszt olyan megjelenési formáját, ahol egy szín különböző árnyalatai szerepelnek. A Danone cég weboldalán jól megfigyelhető a hideg meleg, mennyiségi és komplementer kontraszt alkalmazása A hideg-meleg színkontraszt festői alkalmazásának legszebb példái többek között a gótikus üvegablakok (pl. a chartres-i katedrális üvegablakai), amelyek

a gótika arányrendjét váltják át az építészetből a festészetbe; a téri konstrukciókból transzponálja át a szerkezetességet fénybe és színbe. Igen gyakran alkalmazzák e színellentétet a reneszánsz festők (Leonardo, Michelangelo, Piero della Francesca stb.) is a színtávlat kifejezésre többek között, de igen gazdag variációs alkalmazását találjuk az impresszionista festők (Monet, „Londoni parlament”, Renoir Le moulin de la galette stb.) műveiben is Vagy a hideg-meleg színellentét derített és sötétített formáit alkalmazza Cézanne (Almák és narancsok c. képén), ill Picasso (Avignoni nők c kompozíciójában) is a képkonstrukció rendezésére a formák színbeli differenciálására, egyszerű felépítésére. A színek kompozíciós szerepére éppen Cézanne mutat rá festészetében, egyrészt a színek sötét-világos értékével, hideg-meleg ellentétével 72. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI

REKLÁMGRAFIKUS, WEB TERVEZŐ osztja, elválasztja a tárgyakat és a hátteret; majd a sötét-világos megosztott területeket a valőrök derített hideg-meleg értékével kapcsolja, felületileg modulálja. Tehát a színkompozíció fogalmában az elválasztás és kapcsolás dialektikája egyidejűleg jelentkező tényezők. Vincent van Gogh Varjak című képe, a hideg meleg kontraszt művészi alkalmazásának nagyszerű példája Kandinszkij: Improvizációk Hideg-meleg kontraszt 73. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Kiegészítő (komplementer) kontraszt A kiegészítő vagy komplementer színpárok,) a legnagyobb színellentétet képviselik, amelyek a színkörben diametriálisan (egymással átlósan szemben) helyezkednek el és (pigment vagy színezékanyag formájában) összekeverve semleges szürkét adnak. Fiziológiailag, mint kiderült komplementer színellentét szerepet játszik a szimultán és az

utókép kontraszt jelenlétében is. J Itten és P Klee harmóniáról szóló tanítása pedig (amelyet kritikai átértékeléssel részben elfogadhatunk), kiemeli a színellentét szerepét az egyensúlyi alaptörvény létrejöttében. Szerintük a helyes nagyságarány statikusan szilárd hatásképletet ad (a totális megvalósulása révén), azonban mindketten, Klee és Itten is hangsúlyozzák a klasszikus statikus hatás helyett a modern művészet dinamikus jellegét a színharmónia vonatkozásában. Ezt a dinamikus hatást segíti az is, ha az ellentét pároknak (mint a vöröszöld, zöldeskék-narancssárga stb.) nemcsak fizikai azonosságát vizsgáljuk (mármint hogy a kivonó keverés során semleges szürkét adnak meghatározott nagy74 oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ ságarány esetén), hanem más különböző optikai tulajdonságaikat (mind pl. a citromsárga és az ibolyakék világos-sötét

ellentétet képez). Vagy lélektani tulajdonságaikat is, (mint a zöldeskék, narancssárga, hideg-meleg, a vörös-zöld komplementer pár egyúttal aktív-passzív tulajdonságú is) Az egyes kiegészítő szín pár nagyságrendi kiemelése, hangsúlyozása az egyensúlyi állapotot megszünteti és ilyenkor mindig a kiemelt szín expresszív hatása érvényesül elsősorban. Sok esetben az egyes képek kiegészítő kontraszt hatását a kiegészítő értékek kevert változatai, a közbenső és kiegyenlítő tónusaival, azok a fehér-fekete, ill. szürke fokozatok különböző sötét-világos értékeinek összekapcsolásával valósítják meg. Minthogy ezek mindkét kiegészítő szín párhoz kapcsolódnak, egy színcsaládot alkotnak. E keverékszínek gyakran nagyobb arányban szerepelnek, mint a tiszta színek (különösen a természetben gyakran találunk ilyen példákat különböző növényeknél és virágoknál). A fenti ábrán a sárga és az ibolya és a

belőlük keverhető színes szürkék láthatók. Az utóbbiakból derítéssel, illetve sötétítéssel létrehozható szürkék és a két komplementer szín alkalmazásával harmonikus kompozíció hozható létre, úgy hogy a színek kontrasztja az olvashatóságot a betűk kiemelését is jól biztosítja. 75. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ A kiegészítő kontraszt festői alkalmazásával találkozunk a reneszánsz festők alkotásaiban (Jan van Eyck: Mária koronázása, Pierro della Francesca: arezzói freskóján Salamon fogadja Sába királynőjét), éppen úgy, mint a pointilista festők, (pl. Seurat, Signac stb) vagy Cézanne (St Victoir hegy c képén), vagy akár Picasso számos alkotásán. A vörös és zöld komplementer színekből keverhető szürkék és az azokból létrehozott grafikai kompozíció 76. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ

Bizonyos komplementer párok vizuálisan jól alkalmazhatóak, narancssárgakék, sárga-ibolya. Ugyanakkor a zöld-vörös közelálló tónusértékük miatt kevésbé alkalmazhatóak olyan esetekben, ahol valamit erőteljesen ki szeretnénk emelni. A narancssárga és kék komplementer párból keverhető szürkék és az azokból létrehozott grafikai kompozíció. A színvariánsok, és a kompozíció nagyon sok formában létrehozható, amelynek száma és minősége csak az alkotóképességen, képzelőerőn és kitartáson múlik. 77. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Színes szürkék keverése komplementer színekből Szimultán kontraszt A szimultán színellentét az egyidejűleg, egymás mellett elhelyezkedő színek egymásra való hatása (lásd e jelenség elektrofiziológiai magyarázatát, ill. a kontraszthatás szerepét a színlátás lélektani folyamatában) amely befolyásolja a két vagy több szín

együttes megjelenését, érzékelését. E színkontraszt így lényegében tekintve minden színellentét mellett a kiegészítő színellentéttel mutat szoros összefüggést (pl. minden ellenszínét igyekszik létrehozni, azaz a semleges hátteret színesre tagolja). De két tarka szín között is létrejöhet szimultán ellentét, amikor a valóságot karakterét mindkét szín elveszti és egy új, nem reális hatás (optikai csalódás) keletkezik. (Ezért célszerű egy kompozíció színvázlatainak elkészítése során egymásmellé helyezni a felhasználandó színeket, nagyságrendi összefüggéseik általános megfogalmazása alapján.) Mint azonban említettük, a kontraszthatás elsősorban a színességszíntelenség meghatározása szempontjából a legdöntőbb, amelynek határozott rendet kell teremteni a részletformák egymáshoz és a kompozíció egészéhez való viszonyában. Ezért a színellentét (mivel az egész kompozíció hangolását, hangulati,

érzelmi hatását befolyásolja), tudatos tanulmányozása, megfigyelése a művészi gyakorlat során elengedhetetlenül szükséges. 78. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Fontos tudnunk, hogy milyen feltételek között jön létre a szimultán hatás, s hogy hogyan hárítható el. Gyakran kerül az ember olyan színezési feladatok elé, amelyekben nem szabad szimultán kontraszthatásnak létrejönnie. Egy nyakkendőanyag-szövöde által gyártott több száz méter nyakkendőanyagot nem vett át a megrendelő, mert egy vörös alapra szőtt fekete csík nem feketének, hanem zöldnek hatott, s ezáltal az anyag nyugtalanná vált, vibrálni kezdett. Annyira erős volt ez a szimultán hatás, hogy az átvevő azt állította, a szövő fekete fonal helyett zöldet használt. Ha a szövő a szürkésfekete fonal helyett barnásfeketével dolgozik, megakadályozta volna a szimultán hatás létrejöttét, s elkerülhető

lett volna a nagy anyagi veszteség. E színbeli ellentét művészi alkalmazása a klasszikus történelmi példákban ugyanúgy felfedezhető Breughel, „Táj Ikarusz zuhanásával” és a modern festészet számtalan alkotásán (pl. Van Gogh „Esti kávéház terasza” E színellentét kifejezési lehetőségeinek legizgalmasabb művészi kísérleteit, sík- és térbeli megfogalmazásait mutatják Victor Vasarely magyar származású festő művei is, Vasarely életművének jelentős részét e problémakör gyakorlati és művészetelméleti vizsgálatának szentelte. 79. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Szimultán hatás: a vörös alapon a szürke zöldes, a zöld alapon vöröses színűnek látszik 80. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Victor Vasarely: Zett A kép a vörös és zöld komplementer szín pár szimultán kontrasz hatásán alapuló

kompozíció 81. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Vincent van Gogh: Arles-i kávéház terasza A szimultán és komplementer kontrasztban álló színek vibráló színhatást eredmményeznek 82. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Minőségi (kvalitás) kontraszt A „színkvalitás” fogalma alatt a színek tisztasági, telítettségi fokát értjük, így a minőségi színellentét a különböző világossági értékkel rendelkező, telített tarka színek kontrasztja (a kevert, derített vagy tompított értékkel). A tarka színek sugárzó, telített hatását négyféleképp változtathatjuk meg 1. A tiszta tarka színt keverhetjük fehérrel, a színkaraktert viszonylag a legtöbb szín okáig megőrzi, és fokozatosan felvilágosodnak. 2. A tarka szín feketével való törése különösen az erősebb, saját világosságú színek, (mint a sárga,

sárgászöld, narancssárga stb) esetében igen hamar a színjelleg megváltozását eredményezi és mindinkább elsötétülve megszünteti a színek sugárzó, világító erejét. 3. A telített szín szürkével való keverése a tarka színeket mindinkább semlegesítik 83. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ 4. Végül a tiszta színt letörhetjük a kiegészítő színek hozzáadása révén is a két szín között rokon tónusértékek különböző fokozatait nyerjük, középértékként a színegyensúlyi állapot eredményeként a semleges szürkét. E keverék színek fehérrel való keverése újabb „színes szürkék” létrejöttét eredményezi . Victor Vasarely:Ion-3 (minőségi kontraszt) „E színellentétből származó tompított-világító”, semleges színes optikai viszonylatok igen bonyolult téri, fény és lélektani hatások kifejezésére alkalmasak. A művészettörténet során

alkalmazásának igen szép példáit találjuk, többek között pl. Matisse: „A zongora”, Paul Klee: „Halvarázslat”, vagy „Fuga vörösben” c képén Számítógépes grafikai programok segítségével könnyedén létrehozhatunk színátmeneteket, amelyek egy szín minőségi különbözőségének folyamatos megjelenítésére alkalmas (felirat háttér színének kivilágosítása, a kép színtelítettségének megváltoztatása stb.) Ez a kontraszt színösszetételtől függően, még hideg-meleg, mennyiségi és sötét-világos ellentétet is mutathat. 84. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Moholy Nagy László: Kompozíció A 18. (minőségi kontraszt) 85. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Mennyiségi kontraszt A színek kiterjedésének, felületi nagyságának ellentéte, a nagy-kicsiny, a sok-kevés stb. fogalmának megfelelője, a

nagyságrend pedig a felületméretek között kapcsolatok rendezését jelenti. Ezt a rendteremtést segítheti a nagyságrendek egymáshoz való viszonyítása, a matematikai arányok alkalmazása , amely végül is az arányrendek létrejöttéhez vezet. Goethe szerint a sárga és ibolya 1: 3, a narancssárga és a kék 1:2 és a vörös és zöld 1:1 arányban eredményez kiegyensúlyozott szín összeállítást. Természetesen ezek a kifejezés , mondanivaló érdekében megváltoztathatóak. Ennek eredményeként dinamikus és figyelemfelkeltő kompozíciók hozhatók létre A mennyiségi kontraszt a színfelületek nagyságaránya, így egyrészt a kompozíció egésze szempontjából, másrészt a szimultán színellentét mellett, ez a színellentét is valamennyi más színkontraszthoz (mint a sötét-világos szín önkontraszt, hideg-meleg, kiegészítő stb.) kapcsolódó, igen lényeges hatástényező 86. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI

REKLÁMGRAFIKUS, WEB TERVEZŐ (amely a kontrasztláncolat mindenkori tagja). Ugyanis a színek nagyságarányának megváltoztatása a kompozíció, illetve egy adott színellentét optikai és lélektani hatását is változtathatja, fokozhatja vagy gyengítheti. Alkalmazásának szép példái többek között Breughel: „Táj Ikarusz zuhanásával”; P. Mondrian: „Kompozíció vörösben, sárgában és kékben” Piet Mondrian: Kompozíció vörösben, sárgában és kékben (mennyiségi kontraszt) 87. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ A színek harmóniája Aki a színek harmóniájáról beszél, két vagy több szín közös hatását ítéli meg. A szubjektív színakkordokkal kapcsolatos tapasztalatok és kísérletek azt bizonyítják, hogy a harmónia és díszharmónia megítélésében az emberek véleménye eltérhet egymástól. A laikusok többnyire azokat a színösszeállításokat nevezik

harmonikusaknak, amelyekben hasonló karakterű színek szerepelnek, vagy különböző színek azonos tónusértékei. Ezek a színek erős kontrasztok nélkül állnak egymás mellett A „harmóniá”-ra és „diszharmóniá”-ra vonatkozó kijelentések általában csak a „kellemes-kellemetlen” és „szimpatikus-antipatikus” benyomások érzelmi tartományára vonatkoznak. Az efféle ítéletek csupán egyszemélyes vélemények, és objektív értékük nincsen. Ki kell emelni a színharmónia fogalmát a szubjektívan meghatározott érzelmi kötődésből, és áthelyezni az objektív törvényszerűség birodalmába. A harmónia egyensúly, az erők szimmetriája. A színes látás közben lezajló fiziológiai folyamatok tanulmányozása közelebb visz a probléma megoldásához. Ha tekintetünket egy ideig egy zöld négyzetre függesztjük, majd behunyjuk a szemünket, megjelenik benne az utókép, egy vörös négyzet. Ha vörös négyzetre nézünk, utóképként

zöld négyzetet látunk. Elvégezhetjük ezt a kísérletet valamennyi színnel, s észre fogjuk venni, hogy utóképként mindig a komplementer szín jelenik meg. A szem megköveteli vagy létrehozza a komplementer színt Önmaga kezd cselekedni, megkísérli helyreállítani az egyensúlyt. Ezt a jelenséget szukcesszív kontrasztnak nevezik. Végezzünk el egy másik kísérletet. Tiszta szín közepébe helyezzünk vele egyenlő világosságú szürke négyzetet. Ez a szürke szín sárga alapon világos ibolyaszínként, narancs alapon kékes-szürkén, vörös alapon zöldesszürkén, zöld alapon vöröses-szürkén, kék alapon narancsos-szürkén és ibolya alapon sárgásszürkén hat. Valamennyi szín esetében a szürke a komplementer szín árnyalatával gazdagítva jelenik meg. A tiszta színek is hajlamosak arra, hogy egymást kölcsönösen a maguk komplementerje felé szorítsák Ezt a jelenséget szimultán kontrasztot ismertető részben található színes ábra

jól szemlélteti A szukcesszív kontraszt és a szimultán kontraszt azt bizonyítják, hogy az ember szeme csak akkor elégül ki, csak akkor van egyensúlyban, ha érvényesül a komplementer törvény. Ezeket a tényeket más irányban is követnünk kell majd Rumford fizikus 1707-ben elsőként állapította meg, hogy a színek akkor harmonikusak, ha keverékükből fehér jön létre. Fizikus volt, tehát a spektrumszínekből indult ki A fizikai színekről szóló fejezetben elmondottam, hogy a spektrum színszalagjából izolálni lehet valamelyik színt, például a vöröset, s hogy a maradék színes fénysugarak, a sárga, narancs, ibolya, kék és zöld egyesíthetőek egy lencse segítségével. E maradékszínek összege a zöld, vagyis létrejön az izolált vörös komplementer színe. Ha egy spektrumszínt a maga komplementer színével fizikai úton összekeverünk, létrejön a színek fizikai totalitása, vagyis a fehér. Ha a festék pigmenteket keverjük össze,

a keverék szürkésfekete lesz. Ewald Hering fiziológus a következőket mondta: „A középszürkének vagy semleges szürkének a látási szubsztancia azon állapota felel meg, amelyben a disszimiláció, tehát a szubsztancia látás közben való elhasználódása, és az asszimiláció, tehát e szubsztancia újratermelő88. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ dése mennyiségileg egyforma, úgyhogy a látási szubsztancia tömege változatlan marad. Ezek szerint ez a középszürke tökéletes egyensúlyi állapotot hoz létre a szemben.” Hering kimutatta, hogy a szem és az agy megkívánják a középszürkét, s ha nincs jelen, nyugtalanokká válnak. Ha egy fekete alapon fekvő fehér négyzetet nézünk, majd elfordítjuk róla a tekintetünket, utóképként fekete négyzet jelenik meg a szemünkben. Ha fehér alapon fekvő fekete négyzetre nézünk, utóképként fehér négyzet jelenik meg. Szemünkben az

egyensúlyi állapot megkísérli visszaállítani önmagát Ha azonban szürke alapon fekvő középszürke négyzetet figyelünk meg, nem jelenik meg olyan utókép, amely különböznék a szemügyre vett középszürkétől. A középszürke tehát a látóérzékünk által megkívánt egyensúlyi állapotnak felel meg. A látási szubsztanciában lejátszódó folyamatok létrehívják a nekik megfelelő pszichikai érzeteket. Látóérzékünk apparátusában tehát a harmónia az egyensúly pszichofizikai állapotát jelenti; ebben az egyensúlyban a látási szubsztancia disszimilációja és asszimilációja egymással mennyiségileg egyenlő. A semleges szürke szín hozza létre ezt az állapotot. Kikeverhető az ilyen szürke feketéből és fehérből vagy két komplementer színből és fehérből vagy több színből is, ha bennük a három alapszín, a sárga, a vörös és a kék a megfelelő keverési arányban fordul elő. Egy komplementer szín párban ugyanis

mindhárom alapszín jelen van: vörös: zöld = vörös: (sárga és kék) kék: narancs = kék: (sárga és vörös) sárga: ibolya = sárga: (vörös és kék) Ezért mondhatjuk, hogy mihelyt valamely két vagy több színből álló színkompozícióban a sárga, a vörös és a kék megfelelő mennyiségekben van jelen, keverékükből szürke keletkezik. A sárgát, a vöröset s a kéket az összes szín totalitásaként foghatjuk fel. A szem a maga kielégülése kedvéért megköveteli ezt a totalitást. Ha megkapja, harmonikus egyensúlyban nyugszik. Két vagy több szín akkor harmonikus, ha keverékükből semleges szürke jön létre. A másképpen csoportosított színek, amelyeknek keverékéből nem keletkezik szürke, minden esetben expresszív vagy diszharmonikus jellegűek. A festészet remekművei között számos egyoldalúan expresszív hangsúlyú kép van, olyan alkotások, amelyek színben nincsenek az iménti meghatározásnak megfelelően expresszív

hangsúlyú kép van, olyan alkotások, amelyek színben nincsenek az iménti meghatározásnak megfelelően, harmonikus módon komponálva. Feldúlják, felzaklatják az embert, mert egyoldalú hangsúllyal használják fel valamelyik színt, e szín kifejezőerejét. Nem kell tehát minden színkompozíciónak harmonikusnak lennie. Könnyen belátható, hogy nemcsak a színek egymáshoz való viszonyának van jelentősége, hanem tömegeik arányainak, valamint tisztaságuknak és világosságuknak is. A harmónia alapelve a fiziológiai szabályok megkövetelte komplementer törvényből vezethető le Színelméletében Goethe így ír a totalitásról és harmóniáról: „Mihelyt szemünk megpillantja a színt, tüstént működni kezd, és természetéből következően nyomban létrehoz egy másikat, öntudatlanul és szükségszerűen; és ez az új szín a már meglevővel együtt magába foglalja a teljes 89. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI

REKLÁMGRAFIKUS, WEBTERVEZŐ színkör totalitását. Egyetlen szín, egy sajátos érzet következtében szemünket az egyetemességre való törekvésre ösztökéli. S hogy e totalitást tapasztalhassa is, hogy kielégülhessen, minden színes tér mellett egy színtelent keres, hogy abban létrehozhassa a megkívánt színt. Ebben rejlik tehát minden színharmónia alaptörvénye” A színelmélettel foglalkozó Wilhelm Ostwald színkiskátéjában ezt írja: „A tapasztalat arra tanít, hogy a különböző színekből alkotott bizonyos összeállítások kellemesen, mások kellemetlenül vagy közömbösen hatnak ránk. Azt kérdezzük magunktól, mitől is függ ez? A válasz: azok a színek hatnak kellemesen, amelyek között törvényszerű összefüggés, vagyis valamilyen rend áll fenn. Ennek híján kellemetlenül vagy közömbösen hatnak. A kellemes hatású színcsoportokat harmonikusaknak nevezzük Felállíthatjuk tehát az alaptörvényt: a harmónia = rend

Expresszionista kiállítás plakátja A tervező szándékosan tér el a harmonikus színösszeállítás szabályaitól, pontosan azért, hogy a plakát kifejezze a művészeti stílus jellegzetességét és, hogy a plakát figyelemfelkeltő legyen 90. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ A harmónia definíciójából leraktuk a harmonikus színkompozíció alapkövét. Fontosak ebből a szempontból a színek mennyiségi arányai, ezeket a színek fényértékének számításba vétele alapján már Goethe a következőképpen határozta meg: sárga: vörös:kék = 3:6:8 Általában véve azt mondhatjuk, hogy mindazok a komplementer színpárok, mindazok a hármashangzatok, amelyeknek színei a tizenkét részű színkörben egyenlő oldalú vagy egyenlő szárú háromszöggel, négyzettel vagy téglalappal jelölhető vonatkozásban állnak egymással - harmonikusak. A sárga-vörös-kék harmonikus hármashangzat. Ha a

sárga, vörös és kék színt a tizenkét részű színkörben kapcsolatba hozzuk egymással, egyenlő oldalú háromszög keletkezik. Ebben a hármashangzatban fejeződik ki a színek legnagyobb, legharsányabb ereje E három szín mindegyikének jellegzetes, össze nem cserélhető karaktere van. Összecsendülésükben mindegyik szín önmagában véve statikusan hat, vagyis a sárga sárgának, a vörös vörösnek, a kék kéknek. Szemünk tehát nem kíván egyéb, kiegészítő színeket, és a három szín keverékéből szürkésfekete keletkezik. Az egyenlő szárú háromszög vonatkozási alakzatát a sárga, vörösesibolya és kékesibolya alkotja. A sárga, vöröses-narancs, ibolya és kékeszöld színek harmonikus négyeshangzatban csendülnek össze, vonatkozási alakzatuk a négyzet. A harmonikus téglalap színei a sárgásnarancs, a vöröses-ibolya, a kékes-ibolya és a sárgászöld Az itt alkalmazott vonatkozási alakzatokat, az egyenlő oldalú és egyenlő

szárú háromszöget, a négyzetet és téglalapot bármelyik megadott színből indulva kialakíthatjuk. Körbeforgathatjuk az alakzatokat, és megkapjuk például az egyenlő oldalú háromszögre a sárga-vörös-kék helyett a sárgásnarancs-vörösesibolyakékeszöld háromszöget vagy a narancs-ibolya-zöld háromszöget vagy a vörösesnarancs-kékesibolya-sársgászöld háromszöget. S elvégezhetjük ugyanezt az összes többi vonatkozási alakzattal is. Erről további fejtegetéseket az összhangzatokról szóló fejezetben talál az olvasó A színek összhangzattana A színek összhangzattana a színeknek a maguk törvényszerű kapcsolatai alapján való összeállítását jelenti. Ezeknek a kapcsolatoknak alapján készíthetjük el színes kompozícióinkat. Valamennyi akkordot leírni lehetetlen volna, ezért csupán a harmonikus akkordkapcsolatok kialakítását írjuk le. Színhangzatokat két, három, négy vagy több színből hozhatunk létre. Ennek

megfelelően kettőshangzatokról, hármashangzatokról, négyeshangzatokról, hatoshangzatokról stb beszélünk Kettőshangzatok A tizenkét színű színkörben az étmérővel összeköthető, szemben álló két szín mindig komplementer viszonyban van egymással. Ezek harmonikus kettőshangzatot alkotnak Ilyen kettőshangzatok a vörös-zöld, a kék-narancs, a sárgaibolya Ha a színgömb segítségével képezzük az akkordokat, szinte tetszésünk szerinti számban találhatunk harmonikus kettőshangzatokat. A feltétel csupán az, hogy a két szín szimmetrikusan álljon a színgömb középpontjához képest. Ha 91. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ tehát megvilágosított vöröset használunk, a neki megfelelő zöldet ugyanolyan mértékben el kell sötétíteni. Hármashangzatok Ha a tizenkét részű színkörből három olyan szint választunk ki, amely egyenlő oldalú háromszöggel kapcsolható össze,

akkor ezek a színek harmonikus hármashangzatokat alkotnak E hármashangzatok közül a sárga-vörös-kék a leginkább egyértelmű, a legerőteljesebb. Alaphármashangzatnak nevezhetnénk Jellegzetes hármashangzatot alkot a második rendbeli színek közül a narancs-ibolya-zöld is A sárgásnarancs-vörösesibolya-kékeszöld vagy a vörösesnarancskékesibolya-sárgászöld szintén olyan hármashangzatok, amelyek a színkörben egyenlő oldalú hárömszöggel kapcsolhatóak össze. Azt is megtehetjük, hogy a komplementer sárga-ibolya kettőshangzat egyik színét a két szomszédos színnel helyettesítjük. A sárgát tehát kékesibolyával és vörösesibolyával állíthatjuk szembe, az ibolyaszínt pedig sárgászölddel és sárgásnaranccsal Az ilyen hármashangzatok szintén harmonikus jellegűek Kapcsolódási alakzatuk egyenlő szárú háromszög, úgy Az egyenlő oldalú és az egyenlő szárú háromszög kapcsolódási alakzatait elgondolhatjuk színgömbbe

írt formákként is. Tetszésünk szerint forgathatjuk őket Ha középpontjuk a gömb középpontjában áll, a csúcsok által kapcsolatba hozott három szín harmonikus hármashangzatokat alkot. Ennek során két határeset is előállhat akkor, ha a háromszög egyik csúcsa a fehérre vagy a feketére mutat. Ha az egyenlő oldalú háromszöget használjuk, s ennek egyik hegye a fehéren áll, akkor a másik két hegye egy komplementer szín pár első, elsötétített fokozatára mutat. Létrejöhet például a fehér-elsötétített narancselsötétített kékeszöld hármashangzat Ennek megfelelően a feketéhez egy megvilágosított narancsszín és egy megvilágosított kékeszöld kapcsolódik Ezek a határesetek arra utalnak, hogy a fehér vagy fekete felhasználásakor a fény-árnyék kontraszt érvényesül. 92. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Négyeshangzatok Ha a tizenkét részű színkörből

kiválasztunk egy-két olyan komplementer színpárt, amelyeknek összekötő egyenesei egymásra merőlegesek, négyzetes formát kapunk, úgy, amint az 55. ábrán látható Ilyen módon három négyeshangzatot nyerhetünk: sárga-vörösesnarancs-ibolya-kékeszöld sárgásnarancs-vörös-kékesibolya-zöld narancs-vörösesibolya-kék-sárgászöld További négyeshangzatokhoz juthatunk egy olyan téglalap segítségével, amely két komplementer párt tartalmaz, ilyen például a sárgászöld-sárgásnarancs-vörösesibolya-kékesibolya vagy a sárga-narancs-ibolya-kék. Alkothatóak négyeshangzatok trapéz forma segítségével is. Ebben az esetben két szín egymás mellett áll, kettő pedig a komplementerjüktől balra meg jobbra helyezkedik el. Az így kialakított akkordok harmonikus viszonyban állnak egymással, de megvan bennük a szimultán színváltozásokra irányuló hajlam. Keverékükből ugyanis szürkésfekete jön létre. 93. oldal VIZUÁLIS ELMÉLET,

VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Hatoshangzatok Hatoshangzatokat kétféle módon találhatunk. A tizenkét részű színkörbe háromszög vagy négyszög helyett kapcsolódási alakzatként hatszöget is rajzolhatunk. Harmonikus hatoshangzat jön így létre, három pár komplementer színből Két ilyen hatoshangzatot hozhatunk létre ily módon: sárga-narancs-vörös-ibolya-kék-zöld és sárgásnarancs-vörösesnarancs-vörösesibolya-kékesibolya-kékeszöldsárgászöld. A színgömbben megforgathatjuk a hatszöget. Az így fellet, megvilágosított vagy elsötétített színtónusokból érdekes színösszefüggések adódnak. Hatoshangzatokat szerkesztés útján is létrehozhatunk a színgömbben akkor, ha négy tiszta színhez a fehéret és a feketét társítjuk. A színgömb egyenlítőjének síkjába kapcsolódási alakzatként négyzetet fektetünk, így két komplementer színpár négyeshangzatát kapjuk. Ezek után a négyzet

csúcsait összekötjük fölfelé a fehérrel, lefelé pedig a feketével, úgy, amint az 56. ábrán látható Oktaéder jön létre. Az egyenlítői síkban kialakítható valamennyi négyeshangzat tovább bővíthető fehérrel és feketével kombinált hatoshangzattá Használhatunk a négyzetes kapcsolódási alakzat helyett téglalapot is. 94. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Ha egy háromszöget mint alapalakzatot fehérrel és feketével kombinálunk, ötöshangzatot kapunk. Ilyen ötöshangzat lehet például a sárga-vörös-kék-fekete-fehér vagy a narancs-ibolya-zöld-fekete-fehér. Most, miután leírtuk a színek összhangzatának alapjait, még egyszer hangsúlyoznunk kell, hogy valamely akkordot és annak modulációját semmiképpen sem tehetjük meg önkényesen egy mű kiindulópontjául. Minden választásnak és elrendezésnek az adott tárgyias vagy absztrakt témából kell következnie. Egy akkord

kiválasztása és megvalósításának módja a szükségszerűség, nem pedig önkényes szándékból, felszínes spekulációból fakadó ténykedés. Különleges egyéniség minden egyes szín, minden színcsoport; a maguk törvényei szerint növekednek és élnek. Az összhangzattannak az az értelme, hogy ismeretében a színek ellentéteinek helyes kiválasztásával sikerüljön megtalálnunk a legerőteljesebb színhatásokat. Bemutató a sárga-vörös-kék alaphangzaton, hogy miként bontakoztathatjuk ki szerkesztés útján létrehívott akkordból a legkülönbözőbb variációkat és színhatásokat. Az egyik variáció például az lehet, hogy egy színsávban a sárga áll a kék meg a vörös közt, vagy a vörös a sárga meg a kék közt, vagy a kék a sárga meg a vörös közt. Kombinálhatjuk az alaphangzat színeit a tiszta színek tört 95. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ fokozataival is; így

minőségi kontraszt jön létre. Világos-sötét kontrasztként mindhárom színt megvilágosíthatjuk, és a tiszta színeket csak kis mennyiségekben szerepeltetjük, mennyiségi kontrasztban tartott akkord jön létre. Ha valamelyik színt a többinél nagyobb tömegben használjuk fel, expresszív hatású hangzatok születnek. Ha pedig azt is megkíséreljük, hogy az akkord valamelyik tiszta színét a színkörben tőle balra és jobbra álló színekkel helyettesítjük, ha tehát a sárgát sárgászölddel és sárgásnaranccsal vagy a vöröset vörösesnaranccsal és vörösesibolyával, vagy a kéket kékeszölddel és kékesibolyával helyettesítjük, akkor a hármashangzat négyeshangzattá bővül, s ezáltal az akkordvariációk gazdagsága lényegesen megnövekszik. Expresszív színelmélet Azoknak az optikai, elektromágneses és kémiai folyamatoknak, amelyeket szemünkben és agyunkban a színek látványa kivált, gyakran az ember lelkivilágában

lejátszódó párhuzamos folyamatok felelnek meg. Azok a megrázkódtatások, amelyeket a színek élménye kirobbant, továbbhatolhatnak a legbenső centrumig, s a lelki-szellemi élet legfontosabb régióit is megérinthetik. Goethe a színek érzékierkölcsi hatásáról beszélt Johannes Itten által leírt esemény, a tárgyak színének a természetes megjelenéstől szokatlan megváltoztatásának következményeiről számol be. Egy nagyiparos társaságot hívott meg magához vacsorára. Az érkező hölgyeket és urakat finom konyhai illatok fogadták, s már mindenki előre örült az ínyenc falatoknak. Amikor a vidám társaság körülötte a nagyszerűen elkészített ételekkel rakott asztalt, a házigazda vörös fényt kapcsolt be. Szép pirosra színeződött, és frissnek hatott a tányérokra kirakott hús, a paraj azonban feketének tűnt, a krumplik pedig pirosan világítottak. Mindenki meghökkent, de a vörös fény máris kékre váltott, s ettől a

pecsenyék mintha oszlófélben, a krumplik mintha rothadtak lettek volna. A vendégek étvágya egyszeriben elment Amikor erre még sárga fény következett, s a vörösbor olyan lett, mint a sötét olaj, az emberek pedig sárga félholtaknak látták a szomszédjukat, néhány érzékeny hölgy felállt és kisietett az ebédlőből. Senki sem volt képes enni, bár a jelenlévők mind tudták, hogy csak a megvilágítás színének változásai okozzák e különös érzéseket. Nevetve kapcsolta be a házigazda a fehér fényt, és nemsokára helyreállt a vidám hangulat az asztal körül. 96. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ A színek érzelmi, asszociációs, és gondolati hatásai ösztönző, felszabadító, megkönnyítő, kisugárzó, mozgásra ösztönző, szellemiség, intuició, kapcsolatfelvétel frissítő, irigy, napsütés, lámpafény ködben, forró homok, tengerparti strand, kikerics, arany,

idegesség, unszimpátia, téli nap, süket csend, villogó, keserű, betegség, fizikai fájdalom, rézkilincs, kínai, utazás, csillogó víz, vakító fény, napraforgó ünnepélyes, örvendező, melegítő, közlékeny, cselekvő, fény, gazdagság, nap, termékenység ünnepi öröm, csillogás, tűz, gyerekruha, meleg, díszhalak, hangzavar, kifestőkönyv, csillogás, gótikus festészet földszerű, száraz, mély, tapintható, valóság, pénz, föld-meleg, apám, ikonok, lösztalaj, kenyér, modern bútor, kényelem, érett gyümölcs, zavaros folyó, homok, tompa, halk, selyem anyag, tejes kávé, torta, falevél, belenyugvás, elöregedés, szüret, őszi lombhullás, ballon kabát, napszitta rét, nyárvég, lúg, őszi nap, dohány, sivatag, Braque. izgató, élénk, forró, szenvedélyes, akaraterő, tűz, hangos, közelség, veszély, szabadság, forradalom, minimum, fölvonulás, Gaugain, bohóc, pipacs, tűz, szerelem, textil, papírsárkány, bikaviadal,

anyaság, lángok, lelkesedés, figyelmeztető, ultiparti, huszár, szerteáradó öröm, mikulás, kertitörpe, szegedi paprika, férfias érettség, tűzmadár, trombitahang. erősítő, hatalmas, mozgékony, erőszakos, vér, erő, hatalom, szerelem, háború, orgia, kegyetlenség, vér, tobzódás, zászló, hősiesség, versenymotor, kifestett nő, vágóhíd, paradicsom. 97. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ kiemelkedő, méltóságos, pompás, parancsoló, magas tisztség, királyság, megkülönböztető, pompás, királyi, igazságosság, régi, Vatikán, papok, hölgy, nagymama, Moliere, érett meggy, bársony, mámor, rózsa, színházi nézőtér, alvadt vér, trolibusz. valószerű, szenvedélyes, szívós, háziasság, állandóság, anyaság, biztos, nyugodt, bársony, mélyhangú, cselló, szeretet, munka, paraszt, termőföld, meleg este, marhavagon, Danzig, séta, folyó éjszaka, pipa, munka, melyhez

kedvem van, mexikói, favágás, letargia, rozsdatemető, családi élet, öntvény, nyers hús, indián. földszerű, szilárd, elmozdíthatatlan, józan, titoktartó, diszkréció, szolidság, vénasszonyok nyara, szomorúság, bőrtárca, magány, tragikus, vibráló, mély, sűrű, kakaó, ronda, kabát, bőrtáska, vallás, unalom, kenyér, erdei út, hegedű, bölcsesség, öregember, iskolapad, börtön, gyárkémény, templom, gátlóérzés. finom, erőtlen, megkülönböztető, tartózkodó, édeskés, lányos, nőies, kecses, elkülönülő, gyerekes hangulat, parasztlányok szoknyái, májusfa, kellemetlen, fürdőruha, húsvét, illatszerbolt, francia, pikáns, Lautrec, púder, színházi öltözék, díszpárna, kislány, babaruha, gyerekbánat, szaloncukor, fiatal lány. misztikus, nyugtalan, terhelő, gond, különösség, mélység, öreges, szilva, iskolakötény, tábla, nyugalmas est, romantika, kordbársony, Cézanne, gyengülő mágia, fanyar illat, rokon

öregasszony, bélyegző párna, embertől eltávolodó, bizonytalan. hideg, izoláló, sötétség, bizonytalanság, szorongás, indigó, gyilkosság éjjel, csillagtalan éjszaka, az ismeretlenség határán, éjjeli vasút, betegség, áruha, rabló, letargia, szegénység, éhség, bánya, rideg, embertelen környezet. 98. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ elmélyülő, konstruktív, kontúrozó, komolyság, filozófia, kristály, est, öreg halász és a tenger, ünnepélyes, divatos, finom, iskolakötény, nyugalmas este, mély, „kék Duna keringő“ tinta, gond, hideg délután, földöntúli elmélyedés, vallásosság, orgonahang. kellemes, összhangot adó, ünnepélyes, finomság, fáradtság, divatos, jóízlés, acél, téli árnyék, Gerschwin, London hajnalban, szabadtéri hangverseny, füst, levendula, illat, havazás előtt. elbűvölő, meghasonuló, gyenge, szomorúság, fanyar illat, mámor, rokokó,

sírós pólyásgyerek, bársonyos tapintású, munka tiszta ruhában, tapéta, orgona, illatos. vágyódó, melegszívű, megkapó, távolságot adó, izoláló, világosság, égi messzeség, halk, béke, fürdés, tenger, Balaton, uszoda, üdülés, Japán, cián, műtő, tiszta égbolt, üde, élénkség, nevetés, feloldott hangulat, gyógyszertár, tiszta konyha, kellemes új ismeretség, álmában újra fiatal, repülőgép, olimpia, magasság, nyugalom, szárnyaló fuvola hangja. érzékeny, hideg, elvonatkoztatott, visszatartott, víz, jég, simaság, hidegség, síverseny, gyorsaság, levegő, reggel, mese, jégszínház, hidegszél, hűtőszekrény, tiszta üveg. kivánó, természetszerű, mérges, ösztönös, fogalom, hűvösség, nyirkos nyugalom, asztallap, fenyőerdő, tisztás, fű, ásványvizes üveg, biliárd asztal, ármány, gonosz mostoha, biztos, fenyőillat, karácsony, zöld szilva. 99. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI

REKLÁMGRAFIKUS, WEBTERVEZŐ természetszerű, ösztönös, gondozó, biztonságba helyező, anyaság, figyelmeztető, óvó, növény, görögdinnye, reménység, dicsőség, nyugodt, erdő, barátság, babérkoszorú, érzelem, egyedüllét, pihenés, spenót, finánc, domboldal, iskolaszünet, futbalmeccs, frissen mázolt, eső, önelégült, nyugalom, mozgás hiány, passzivitás. érzékeny, belső, puha, lecsillapító, életképes, ifjúság, bimbózás, ültetés, remény, méhek, átvilágított tavaszi lomb, rügy, méz, vasárnap délelőtt, vidámság, majális, vízinövény, debrői hárslevelű, zsenge, éretlen alma, március, gyenge vetés, savanyú. odaadó, derűs, feloldó, szerénység, értelem, problémátlanság, citrom, savanyú íz, fanyar derű, téli napsütés, virágporzó, kankalin, vanília krém, éles sikoly, kórház, limonádé, kanári, banán, trópus, irigység, féltékenység, beteg, sorvadás, dühroham, őrület, kémiai laboratórium.

élet, világosság, kisugárzó, fényteli, születés, fény, keletkezés, ártatlan, szűziesség, menyasszonyi ruha, mennyegző, higiénia, tisztaság, csend, amelyet hirtelen megérthetünk, egy kezdet, születés előtti semmi, orvos bácsi, tiszta öröm, jóság, angyali. semleges, ingert kioltó, egyensúly, ingerhiány, egyhangúság, közömbösség, mozdulatlanság, eseménytelen nap, erős őszi délután, ködben járás, nyugalom, börtönfala, egyedüllét. koncentrikus, statikus, sötét, gyász, szomorúság, reménytelenség, elmúlás, halál, ördög, végtelenség, kiégett ember, szén, félelem, piszkos ruha, iskolatábla, reményvesztett ember, gonoszság. 100. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ A héber vallás, a kaballa és a keresztény egyház színjelképei A szín FEHÉR VÖRÖS KÉK SÁRGA ARANY NARANCS BÍBOR ZÖLD FEKETE SZÜRKE A héber vallás Kaballa színszimbólumai

színjelképei A fehér fűz (vörös, Isteni fény kék+bíbor) Istenség, tisztaság, öröm, győzelem, Igád nemzetség (jele lovascsapat). Szeretet, szentség, Hatalom, erő érzékiség, tűz, üdv, bosszúálló Isten, Ruben nemzetség (jele az ember) Dicsőség, Úr színe, Isten Irgalom trónja, egy főpapi köntös, szentedények takarója, Czahar nemzetiség (jele szamár) Nafali nemzetség (jele szarvas fehér) föld, szépség, nap Simeon nemzetség (jele: a kard) Dicsőség ragyogás Zebulon nemzetség (jele: a hajó) Seré (jele: a kupa) víz, győzelem Elfram nemzetség (jele: ökör) Benjámin (jele: farkas) Dén (jele: sas) Keresztény egyház színjelképei színesség, ártatlanság, tisztaság, halandóság Szentlélek, felebaráti szeretet, mártíromság, Krisztus emberáldovére, zat=örökmécses színe Atyaisten, remény, isteni dolgok iránti szeretet, bizonyság, kegyesség, Szűz Mária, béke, tisztaság, keresztény büszkeség, isteni alkotás

szeretete Fiuisten, erő, dicsőség, hitvallók, glória, menny kapuja, megvetés, (zsidók, bűnözők jelképe) áldozat, álhatatosság, bűnbánat, fõpapi méltóság, előkelő Isten színe, hit, remény, halhatatlanság, szentek ruhái, kereszt értelem (minden fényt elnyel) Bölcsesség (az isteni fehér és az értelem feketéjének keveréke) halál, hallgatás, gyász, szomorúság feltámadás (a teremtő isteni tényének, az érzékinek és a halál homályának keveréke Az színek érzelmi és asszociatív hatásait és a színek szimbolikáját és jelentéseit bemutató ábrák azt bizonyítják, hogy azokat messzemenően figyelembe kell vennünk a weblapok tervezésekor. Így tudatosan alkalmazhatjuk a színeket a kívánt hatás elérése céljából. Hiszen tudjuk nem csak az információ közvetítés a cél, hanem a befogadó befolyásolása. Nagyon fontos, hogy ismerjük a célcsoport színpreferenciáját (színkedveltség) is. A fiatalok színkedveltsége

egészen más mint a az idősebb korosztályé. 101. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ A tartalom kifejezése színnel Kemény György: Frissen festve (képzőművészeti plakát) Bányai István: Filmplakát Balogh István: Filmplakát Mindhárom plakát jól, karakteresen szemlélteti a vizuális nyelvi elemek, és azok különböző minőségeinek a tartalom kifejezése érdekében történő alkalmazását. Mindegyiken erőteljes színkontrasztok figyelhetők meg, és a lendületes vonalhasználat más és más karakterben jelenik meg, bizonyítva azt, hogy a hasonló tartalom kifejezésérére különböző grafikai megoldások alkalmazhatók. Ez az alkotó szándékától tehetségétől függően egyéni stílusú művek létrejöttét eredményezheti. 102. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Máté András: In memoriam Franz Kafka, In memoriam Pilinszky János

Franz Kafka regényeinek szereplői állandó szorongással teli, a láthatatlan hatalomnak kiszolgáltatott élete élnek, ezt jól illusztrálják az alkalmazott sötét színek,és az egymásba kapaszkodó görcsös formák. Ugyancsak jól érzékeltetik a fehér színnel derített (minőségi kontraszt) főleg hideg árnyalatú színek Pilinszky költészetének légies, transzcendens világát. 103. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Naptárgrafikák, (január, november, szeptember) Dohányos Ágnes, Kovács Bernadett és Kovács Tímea középiskolai tanuló munkája 104. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Naptárgrafikák (március, július) Bándi Éva és Kovács Bernadett középiskolai tanulók munkája Belső tér színtervei Transzpozíciós gyakorlat, a lakásbelső hangulatának színekkel történő megváltoztatására. Főiskolai hallgatói munka

105. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ A fotó átalakításának néhány változata számítógépes grafikai program segítségével. Főiskolai hallgatói munka 106. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Színek használata a weben A szín egy erőteljes eszköz, amely kiválóan használható a figyelem felkeltésére, összetett információk egyszerűsítésére, és egy kigondolt arculat közvetítésére. Összefoglalóan vajon mire lehet hatékonyan alkalmazni a színeket nyomtatásban és a Weben egyaránt? Például ilyesmikre: Figyelem felkeltésére Szelektív hangsúlyok elhelyezésére Arculat közvetítésére Az érthetőség fokozására Dokumentum-sorozatok egységbe foglalására Tartalom, a mondanivaló közvetítésére A szemléletesség fokozására A befogadó meggyőzésére, befolyásolására A navigáció megkönnyítésére Site

látogatottság növelésére Profit növelésére Az ötletszerűen és átgondolatlan színhasználat következményei Nehezen olvasható szöveg Nehézkes navigáció Széteső zavaros oldalkép Az arculattal nem harmonizáló színek, A színek nem felelnek meg a közölni kívánt tartalomnak Kevés látogató Esztétikailag kifogásolható honlap 107. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Az fent látható, egyébként jól megtervezett honlap, kevésbé jól sikerült oldala, ahol a felület elrendezés, a kompozíció jó, viszont a fekete alapon elhelyezett piros kisméretű szöveg szinte olvashatatlan. Persze tudjuk, hogy a cég arculatának az alapszíne a vörös, de nem mindegy hogy azt milyen színekkel, és hogyan párosítjuk. A vörös és fekete szín az előbb említett módon történő alkalmazása színdinamikai szempontból sem ajánlatos A túl sok fekete nyomasztó hatást kelt a nézőben A hatásos

színhasználat fontos szerepet játszik weblapok sikerességében. A weblap alapszerkezetét alkotó négy építőelem - a háttér, a szöveg, a grafika és az „útjelző táblák“ - színeinek illeni kell egymáshoz, viszont különbözniük is kell annyira, hogy magukra vonják a figyelmet. Számos, színekkel kapcsolatos tervezési tévedés fordul elő, amiatt, hogy a színek a Weben ingyenesek: A nyomtatványokkal ellentétben, ahol minden egyes hozzáadott szín növeli a költségeket, a Weben korlátlanul használhatóak a színek ingyen. A Web-tervezők többsége ezért ész nélkül próbálja a szivárvány összes színét beépíteni a honlapokba. Legyünk mértékletesek! A Weben ez az egyik főszabály, ha színekkel dolgozunk. A mennyiség helyett törekedjünk inkább a minőségre! Repertoárunk álljon kevesebb, de figyelmesen összeválogatott színekből! Az sem tragédia, ha csak egy-két színt használunk fel, de azokat változatosan, és ötletesen

amennyire csak lehet. Ne használjunk túl sok élénk színt, túl sok feketét és fehéret! Egy tiszta fehér háttér roppant elegáns tud lenni, sőt mi több, figyelemfelkeltő és egyben jó 108. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ alap az olvasható szöveghez. De szörnyen ki is fárasztja a szemet Hogy melyik hatása érvényesül, az attól függ, vajon a háttér fehérségét módosíthatják-e finom vagy tompított színek. Egy tiszta fekete háttér lesújtóan drámai lehet, kivéve ha nagy lángoló, eleven színű területek tarkítják. Azért az ilyen vad kontrasztoktól is óvakodjunk, mert a Web-látogatók hamar felhagyhatnak a túl mozgalmas oldalak szemlélgetésével és hamar nyugalmasabb vizekre, eveznek. Bár nehéz a weblapok összehasonlítása, és mégis tanulságos lehet és fejleszti színérzékünket, minél több honlap színvilágát elemezzük. Célszerű azokat kinyomtatni és egymás

mellé téve nyilvánvalóvá válnak a különbségek, a jó követendő példák és a kifogásolni való esetek. Természetesen feltétlenül próbáljuk figyelembe venni azokat a törvényszerűségeket, amelyek színelmélet című fejezetben találhatók. A szabályok ismerete, mint már azt említettük csak feltétele a jó és hatékony színhasználatnak. A konkrét feladatnak mindig van olyan része, amelynek megoldására nekünk kell egyedi megoldást, vagy történetesen egy szabályt találnunk. Nem feledkezhetünk meg arról sem, hogy bizonyos esetekben alkalmazkodnunk kell, a változó színhasználati dívatokhoz, stílushoz. Ez persze nem jelenti azt, hogy szolgai módon lemásoljunk valamit, hanem azt, hogy az új más szemlélet keretein próbáljunk egyéni színhasználatra törekedni. A művészettörténet erre számtalan jó példát mutat. Az impresszionista, vagy a kubista festők nagyjából hasonló színeket alkalmaztak, mégis mindegyikük

színhasználata és festői stílusa egyéni, egymással nem összetéveszthető Mit figyeljünk meg a weblapokon? Néhány dolog, amit nem árt megfigyelni a színhasználat elemzésekor. A weblapokon megfigyelt tényezőkkel kapcsolatban válaszoljunk a következő kérdésekre: Hatás: A színhasználat hozzáad vagy levon a weblap értékéből? Könynyebbé teszi a szöveg olvasását, vagy megnehezíti az egyszínű (monokróm) fehéren fekete - nyomtatványokhoz képest? Harmónia: A színek jól illenek egymáshoz, vagy ütik egymást? Háttérszín: Kellemes ránézni? Vagy annyira harsogó, hogy elvonja a figyelmet a címről és a szövegről? A szöveg színe: Könnyű olvasni vagy hősies küzdelmet kell folytatni, hogy a szöveget kihámozzuk a háttérből? Színkódolás: Meghatározott céllal használják a színeket? A színezés segít-e beazonosítani és elkülöníteni a honlap egyes részeit? Egyediség: Néhány gondosan összeválogatott színnel egyedi

külsőt teremtettek? Tartalom: Kifejezi-e a szín mondanivalót? Arculat: Hogyan illenek a színek a cég, vállalat arculat színeihez? 109. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Egy nyomasztó lehangoló Weboldal. Olyan mintha egész Kalocsát leöntötték volna paprikával és szurokkal. A szándék persze érthető, hiszen Kalocsa a paprika egyik fellegvára Magyarországon. Így a piros szín választása helyes A fektével és a enyhén rózsaszínű háttérrel együtt elég furcsa színkompozíciónak lehetünk befogadói és elszenvedői. Mert hát nem csupán az a feladata egy tervezőnek, hogy azt a triviális információt jutassa eszünkbe, amit Magyarországon szinte minden halandó tud, hogy Kalocsa és a paprika egymástól elválaszthatatlan, hanem, hogy a városról pozitív arculatot alakítson ki. Más ergonómiai problémák is vannak(a szöveg nehezen olvasható, fölösleges kétszer szerepeltetni a város

címerét, stb.) Véletlenszerű színhasználat: Előfordult már, hogy eltérő színnel szedett szóra kattintott, mert egy linknek hitte, s aztán kiderült, hogy csupán egy bután színezett, kiemelt szó? A leggyakoribb probléma a Weben a szavak kiemelése színezéssel. Nehéz úgy megoldani, hogy a szörfösök ne véljék szöveges linknek. Kerüljük a véletlenszerű színezést! Győződjünk meg róla, hogy minden színezésbeli különbségnek határozott feladata van! Az ilyen jellegzetes ismertetőjelet használhatunk a képernyőn végighúzódó hosszanti panelen! (Amit általában a bal oldalra szokás rakni.) Eltérő színűre festve ezt a sávot webhely különböző részeire jellemző színkódként is felhasználható. Az egyes részeken belül a címsorokhoz és a grafikai hangsúlyokhoz is alkalmazhatjuk a bal oldali panel színét. Színkódolhatjuk ezeket a paneleket úgy is, hogy harmonizáljanak az ikonok vagy az eligazodást segítő eszközök

színével. Ez a színkódolás három célt is szolgálhat: csökkenti a sorhosszúságot, érdekesebbé teszi a látványt é s jelzi webhelyek különböző témaköreit. 110. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Weblapjaink háttere legyen alig észrevehető! Legyen olyan, mint a jó smink: hasson a szemlélőre, de az ne legyen ennek tudatában! A háttér biztosítsa a folyamatosságot anélkül, hogy fölöslegesen felhívná magára a figyelmet! . Linkszínek A legtöbb böngésző két színt használ a linkek megjelenítésére: az azokra az oldalakra mutató linkek, melyeket a felhasználó még nem látott, kékek, míg azokra mutatók, amelyeket már korábban meglátogatott, bordók vagy pirosak. A webes ergonómia szempontjából rendkívül fontos, hogy mi is ugyanezt a színkódot használjuk linkjeinkhez. Bár nem feltétlenül szükséges a kéknek ugyanazt az árnyalatát használni, mint a böngésző

alapértelmezése, a még nem látogatott linkeknek egyértelműen kéknek kell lenniük, a már meglátogatottaknak pedig egyértelműen pirosasnak vagy bordónak. Ha nem szabványos linkszíneket használunk, a felhasználók képtelenek lesznek megkülönböztetni, hogy a site mely részeit látogatták már meg és melyeket kell még felfedezniük. Nem kapnak világos képet a site felépítéséről és jelenlegi helyzetükről, ezáltal romlik a tájékozódási képességük. Néhányan ugyanazt az opciót többször választják ki, felesleges időt töltve el ezzel; mások túl korán adják fel abban a hiszemben, hogy már minden lehetőséget kipróbáltak, pedig még nem tették; végül néhányan nem találnak meg újra egy részt, amit korábban olvastak s hasznosnak találtak, mert a listában nincs megkülönböztetve. A kék szín pszichológiája Ha ma újra kellene tervezni a webet, kevés szakember jelölné kékkel a még meg nem látogatott linkeket. Az ilyen

szöveget kevésbé könnyű olvasni, mint bármely más színűt, például feketét vagy bordót, mivel az emberei szemnek kevesebb a két szín hullámhosszát felfogó receptora. E fiziológiai tény ellenére is a kék ajánlott alapértelmezett linkszínnek. Mégpedig azért, mert a felhasználók már hozzászoktak, így azonnal használni tudják az oldalt. Meglátják a kéket és rögtön, már kattintanak is! Azt a pár ezredmásodperces késedelmet, amelyet a kék szöveg olvasása okoz, bőven ellensúlyozza az a néhány másodperc, amelyet azzal nyerünk, hogy a felhasználó könnyebben tájékozódik egy nem szabvány színeket használó oldalon hiszen tudja, mely linkeken járt már. 111. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Tipográfia A tipográfia nem más, mint a szétszedhető betűk segítségével sokszorosított írás. (Kner Imre: A tipográfiai stílus elemei 1933) A nyomdásznak kell irányítania a

rajzolóművészt, a fényképészt, a klisékészítőt, a bekötés tervezőjét, s neki kell megválasztania a könyv szövegének kiegészítéséhez, a könyv díszítéséhez szükséges minden eszközt, eljárást és anyagot. Úgy lehetne meghatározni a nyomdász munkáját, hogy munkája minden elemét mástól, készen kapja. Amit ő ad a kész nyomtatványhoz, az a betűk közötti üres tér, mert ezekből a megadott elemekből ő építi fel a papiros fehér síkján a könyvet. (Kner Imre a Rádióban 1940 július 10-én) Jellegzetes 20. századi meghatározás Paul Rennertől: „mechanizált grafika” Tipográfia - ez a szó azt jelenti: típusokkal írni (tüpösz) görögül vert vagy vésett ábra (gráfó) pedig: írni. Ezt a kifejezést a 16 század közepétől használjuk; azelőtt azt a találmányt, amit Gutenbergnek tulajdonítanak, úgy nevezték: toll nélkül írni (scrivere sine penne). A betűszedés és nyomtatás, amely - joggal mondják -

megváltoztatta a világot, a 15. század közepén (1450 körül) vált ismertté, legalábbis a beavatottak előtt, akik aztán a történet szerint kiforgatták találmányából a mestert. Mivel foglalkozik a tipográfia? A szöveges közlés megformálásával, kép és szedett szöveg együttes elrendezésével. Hagyományosan a nyomtatott szövegek megtervezését tekintik tipográfiának, de ma már sok más technikája is van a szöveges közlésnek, például a képernyőre kiírt feliratok. A városképben, házfalakon megjelenő feliratok tervezése is tipográfiai ismereteket kíván Általában a közlemény síkbeli elrendezését kell megtervezni, hiszen a nyomtatványok lapjai síkok, s az egyéb feliratoknak is rendszerint van alapsíkjuk. Tehát a tipográfia síkművészet, bár térbeli esetei is előfordulnak. Így például vannak jellegzetesen térbeli nyomdatermékek, amelyek megtervezése - többnyire - a csomagolástervezés kategóriájába tartozik. Ehhez

is sok tipográfiai ismeretre van szükség, és bár az egész tárgy háromdimenziós, mégis síkokra bontva, kiterítve készítik el a tipográfiai tervet. A tipográfia legalapvetőbb alkotóelemei: betűk, nyomdai díszek, vonalak, foltok. Ezek általában eleve rendelkezésre állnak többszöri felhasználás céljára, és így nem teljesen egyedi alkotóelemei egy-egy nyomtatványnak vagy feliratnak. Az éppen alkalmazott elrendezés azonban mindig egyedivé válik. A képek már inkább egyediek. Egyre újabb és újabb képek (illusztrációk, ábrák) készülnek; ezek elrendezése, a szöveges környezetbe való beépítése vagy szöveggel való ellátása a tipográfus munkája. Ma, amikor a képekkel való közlés mind nagyobb jelentőségre tesz szert, a képeket is egyre inkább a tipográfia elemei közé soroljuk. 112. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Bizonyos veszélyeket rejt, amikor a képeket és a

szöveget egyaránt csak foltnak tekintik. Természetesen joggal beszélhetünk a képek folthatásáról, de a kép mindig ábrázol valamit, rendszerint érzelmeket is kivált, ezért a képhelyek megtervezése, a képelrendezés gondos mérlegelést kíván. A fedett és az üresen maradó részek hatása együttesen érvényesül, s ez meghatározó jelentőségű a tipográfiában. Az alkotást az elemek méretezésével és az üres helyek hozzáadásával hozzuk létre. Kevés üres hely zsúfoltságot eredményez és szegényesen hat (Persze, a gazdaságossági szempontokat figyelembe kell venni.) Bőséges üres helyek alkalmazásával tágasságot teremthetünk és ez elegáns hatású. (Van azonban olyan eset, amikor a sok üres hely egyszerűen csak pazarlás, mert a téma nem igényli vagy nem érdemli meg.) 113. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Az oldalon két nyomtatott kiadvány oldalát láthatjuk. Jól

érzékelhető a kétféle tartalomnak megfelelő betűtípus használata. Az elsőn a groteszk betűk erőteljes alkalmazását és kissé racionális tipográfiai szerkesztést láthatunk ami hatékony köntörfalazás nélküli információ közvetítését eredményez. A másik esetben a tervező igyekezett a képen látható épület stílusához alkalmazkodó betűtípust használni. Az oldal grafikája és tipográfiája sokkal lágyabb az elsőnél, helyesen, a tartalom kifejezését szolgálva. 114. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ A szövegfolt és grafika együttes alkalmazása egy folyóirat oldalon 115. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ A legelemibb tipográfia: egyetlen betű vagy más, közlésre szolgáló tipizált jel (piktogram). Szokás úgy is meghatározni a tipográfiát, mint ami két fő tevékenységre osztható: betűtervezés és a kész

betűvel való tervezés Ebben a könyvben a betűtervezéssel nem foglalkozunk, csak a tipográfiával mint betűalkalmazással Ritkán, de előfordul a gyakorlatban is, hogy csak egy-egy betű vagy jel a tipográfiai kompozíció szereplője, mint a bal oldali képen. Lenti összeállításunkhoz: sokféle szempontból ítélhetünk meg már egyetlen, közszemlére tett betűt Lehet inkább informatív, mint a két A közül a bal oldali (Helvetica félkövér) vagy inkább díszítő, mint a jobb oldali A (gótikus textúra: Linotext). Lehet közömbösítő hatású, mint a bal oldali B (Futura világos) vagy pedig vonzó, mint a jobb oldali B (kövér fraktúr). Végül lehet szakszerű és hivatalos, mint a bal oldali C (Serifa félkövér) vagy naiv és személyes, mint a jobb oldai C (nem létező betű). 116. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Betűköz Aki igazán jó minőségű szöveget akar előállítani, annak

meg kell küzdenie a gyártól által programozott betűközökkel (a karakterszélességek és az oldaltávolságok elve látható az ábrán). Évtizedek óta divat a betűközöket a lehető legszűkebbre venni Rossz divat, mert árt az olvashatóságnak Speciális problémákat is okozhat, például bizonyos betűtípusoknál az r összeolvadhat a rákövetkező betűvel, ahogy példáinkon megfigyelhető, amelyeket a Century Gothic betűtípusból szedtünk. EREDETI SZEDÉS Márna Ernő Kormos KORRIGÁLVA (máma) (Emő) (Konmos) márna Ernő kormos Egalizálás A betűközök egyenletessége alapvető esztétikai és olvashatósági követelmény. Nehéz elérni, mivel a betűk alakja nagyon különböző: négyszögletes, kerek, átlós lehet, sőt nyúlványokat is tartalmazhat. Emiatt, ha azonos távolságra helyeznénk egymás mellé a betűket, rossz ritmust kapnánk. A betűtervezők, illetve a gyártók eleve úgy programozzák a betűszoftvereket, hogy a betűk

között lineárisan mérve különböző, de felületileg közel azonos, optikailag egyenletes ritmust eredményező távolságok adódjanak. Kisbetűk esetében ez megfelelő, de nagybetűk és írásjelek, illetve nagybetűk és kisbetűk találkozása már igényli az egalizálást (pl T -Ta egalizálva Ta) Nagybetűk egalizálása Mikor jelentkezik a betűközök egyengetésének - az egalizálásnak - az igénye? A kisbetűk ritmusa jó esetben úgy, ahogy van, megfelelő. A csupa nagybetűs szedés általában már beavatkozást igényel, mert a nagybetűk geometriája szélsőségesebb különbségeket tartalmaz (a T, L vízszintes vonása, az A, V ferde szárai, de a kerek betűk is túl nagy űrt hagynak a betűk elképzelt befoglaló téglalapján, és ha egymás mellé kerülnek, ezek az üres felületek még össze is adódnak). 117. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ A második a felirat egalizált változata Az

egalizálás a szomszédos betűk közötti tér változtatásával - növelésével vagy csökkentésével - történik. Az ábrán fölül az látható, hogy milyen rossz ritmusú a szó, ha a betűk közei pontosan egyformák (a távolságot a betűk alatti kis fekete téglalapok mutatják). Alatta az egalizált szó látható Figyeljük meg, mely betűk között maradt közel azonos a távolság, mely helyeken kellett növelni, illetve csökkenteni. Általában a függőleges szárak találkozása kívánja a legerősebb távolítást (pl. HE); azután csökkenő mértékben: az elvi téglalapot jól kitöltõ, de nem zárt szélű betűt tartalmazó kapcsolat (EH, SH), utána a kerek és függőleges (DE), 118. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ majd amikor két nem zárt szélű kerül egymás mellé (ES); még tovább csökken a távolítás mértéke a nem zárt és a kerek találkozásakor (EC), a függőleges és a

ferde szomszédságánál (HA) vagy a függőleges és a teljesen nyitott között. Szóköz Mekkoraamegfelelőméretűszóköz?Akkora,amekkoraaszavakatmárészrevehe tőenelválasztja,denemolyannagy,amimárlassítjaaszövegfolyamatosolvasását,amon datokértelmezését.Ha folyamatosan növeljük a szóközöket nullától kezdve, amint azt ebben a szövegben tesszük, mindenki maga is megállapíthatja, hogy hol jutunk el a legkedvezőbb szóközméretig. A kisbetűs szedésben megfelel méretű szóköz nem elegendő a nagybetűkhöz: A KISBETŰS SZEDÉS SZÓKÖZEI NEM JÓK A NAGYBETŰKHÖZ. EBBEN A KÉT SORBAN MEGNÖVELT SZÓKÖZÖKET ALKALMAZTUNK. Sorköz A nyomdászatban századokon át az a méret volt a természetes sorköz, amelyet az egymás alatti összeér betűtörzsek lehetővé tettek: ez a tömör, szakkifejezéssel kompressz szedés. Ha kivételesen távolítani akarták a sorokat, vékony (egy, másfél, kép pont vastag) térzőket raktak a sorok közé, innen a

ritkítás angol megfelelője: leading, azaz „ólmozás, térzőzés”. Ma már úgy tartjuk, hogy a sűrűn szedett sorok olvashatóság szempontjából nem ideálisak, mert az éppen olvasott sor fölötti és alatti le- és felnyúló betűszárak túl közel érnek és zavaróan hatnak. Ha a szedés ráadásul széles, néha el is tévesztjük a következő sor elejét. A példa kedvéért ezt a bekezdést sűrűn szedtük („saját törzsre” ⎜⎜=⎜⎜ pt). Az utóbbi száz évben kialakult szokás, hogy a betűfokozathoz képest 1020%-os ritkítást lehet ideálisnak tekinteni: például 10/11, 10/11,5, 10/12 pt. Ez betűtípusonként változhat: a kisebb betűszemű típusnak kevesebb ritkítás elég, a nagyobb betűszemű valamivel erősebb ritkítást igényel. Rövidebb soroknál a kisebb ritkítás viszonylag nagyobbnak látszik, ezért a hosszabb sorokat nem árt egy kicsit jobban ritkítani. Ezt a bekezdést (11/13 pt) 18%-kal ritkítottuk Nagyon fontos szabály,

hogy az arány számít, tehát ha egy nyomtatványban többféle betűfokozatot is használunk, akkor mindegyiket azonos arányban, vagyis különböző mértékben kell ritkítani (például 10/12 főszöveghez 8/9,5 pt alárendelt szöveg illik), különben csúnya lesz az összkép. A sortávolság bizonyos fokig a divat függvénye is. Jelenleg - a huszadik században immár harmadízben - nagy divat az erős sorritkítás. Ez is nehezíti az olvasást, mint a sűrű szedés, de ez azzal, hogy a nagy távolság miatt a mondatok értelmének felfogását akadályozza, a gondolatok folyamatossága ellen hat. Ezt a bekezdést ennek érzékeltetésére divatosan megritkítottuk, 45%-kal (⎜⎜/16 pt). Folyamatos olvasásra szánt szöveg sokszorosítására nem javasolható, ilyen célra nem is nagyon terjed, hiszen óriási papírpazarlással jár. 119. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Olvashatóság Minden más –

tervezés, gyorsaság, tartalom – felesleges, ha a felhasználók nem tudják elolvasni a szöveget. Van néhány szabály, melyet az olvashatóság érdekében minden weboldalnak érdemes betartania: • Használjunk nagyon ellentétes színeket a háttér és a szöveg elkülönítésére! Az optimális olvashatóság eléréséhez a legjobb a fehér háttéren megjelenő fekete szöveg (úgynevezett pozitív szöveg). Majdnem olyan jó a fehér szöveg fekete háttérrel is (negatív, inverz szöveg). Bár a kontrasztarány majdnem ugyanakkora, mint a pozitív szövegnél, de a felhasználóknak szokatlanabb, így kissé lelassítja az olvasást. • A legrosszabb az olyan színösszeállítás, mint amilyen a bordó szöveg zöld háttéren: először is ez két kevéssé elütő szín, ráadásul a piros-zöld színtévesztők képtelenek lesznek elolvasni. • Használjunk egyszínű vagy nagyon finom mintájú hátteret! A háttérgrafika zavarja a szemet a sorok és a szavak

felismerésében. • Használjunk elég nagy betűket ahhoz, hogy még azok is el tudják olvasni, akik nem látnak tökéletesen! Csak a lábjegyzetek és a jogi kitételek készüljenek apró betűkkel, mert ezeket úgyis csak kevesen olvassák. • Használjunk mozdulatlan szöveget! A mozgó, villódzó, közeledő/távolodó szöveget sokkal nehezebben lehet elolvasni, mint a statikusat. Majdnem minden szöveget balra kell rendezni. Ha a felhasználónak van egy biztos kezdőpontja, amikor elkezdi átfutni a szöveget, sokkal gyorsabban halad, mintha középre vagy jobbra rendezett szöveggel találná szembe magát. Természetesen a hatás kedvéért néhány sort középre vagy jobbra is rendezhetünk, de egész szövegblokkokkal ez már nem ajánlatos. Hasonlóképpen, az olyan listákat a legkönnyebb átfutni, amelyeknek minden eleme a bal oldalon egy vonal mentén van elrendezve. A mai monitorok alacsony felbontása miatt a kis szövegek sans-serif (talp nélküli)

betűkészlettel (például Verdana, Helvetica, Ariel) könnyebben olvashatók. Egyszerűen nincs elég képpont ahhoz, hogy egy tíz pontos betű talpait elég részletesen jelenítsük meg. Ugyanakkor a legtöbben szívesebben olvasnak seriftípusú (talpas) betűkből álló szöveget (melyet e könyv legnagyobb részében is használtunk, például a most olvasottnál is), így a helyzet ellentmondásos. Az olvashatóságot kell azonban előtérbe helyezni minden olyan szövegnél, ami nagyon kicsi (például kilenc pontos vagy kisebb). Az ennyire kicsi szövegeket sans-serif betűkkel kell írni Amennyiben a jobban illik a site tipográfiájához, nagyobb szövegeket írhatunk serif betűkkel. 120. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ A szöveg és a háttér egymáshoz való viszonya Aki két mondatnál hosszabb szöveget inverz formában szed, az súlyos vétséget követ el az olvasó szemevilága ellen Aki két

mondatnál hosszabb szöveget inverz formában szed, az súlyos vétséget követ el az olvasó szemevilága ellen. 25 %-os szürke alapon, fekete betű (még jó) 75%-os szürke alapon fekete betű (rossz) Aki két mondatnál hosszabb szöveget inverz formában szed, az súlyos vétséget követ el az olvasó szemevilága ellen Aki két mondatnál hosszabb szöveget inverz formában szed, az súlyos vétséget követ el az olvasó szemevilága ellen. 50%-os szürke alapon fekete betű (rossz) 75%-os szürke alapon fehér betű (inverz) (rövid szövegnél jó) Aki két mondatnál hosszabb szöveget inverz formában szed, az súlyos vétséget követ el az olvasó szemevilága ellen Aki két mondatnál hosszabb szöveget inverz formában szed, az súlyos vétséget követ el az olvasó szemevilága ellen. 50%-os szürke alapon fehér betű (inverz) (nem jó) Fekete alapon fehér betű (inverz) (rövid szövegnél jó) 121. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS

INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Szövegközi kiemelés Szövegközi kiemelésre elsősorban a Betűváltozatok szolgálnak. Folyamatos szövegben kétféle kiemelést helyes használni: kurzívot (italic) és KISKAPITÁLIST (SMALL CAPS), ezek ugyanis nem bontják meg a szövegfolt egységes szürkéjét, mégis feltűnően eltérő betűfajták. B e t ű r i t k í t á s t ( l e t t e r - s p a c i n g ) nem szabad alkalmazni sem a kurzív sem az álló betűknél, mert esztétikailag káros („hígít”) és kiemelő értéke csekély. A csupa NAGYBETŰVEL való kiemelés a tipográfiában nem elfogadott, mert megbontja a szedés egységét, elsősorban a sortávolság megzavarásával. A félkövér (bold, valójában háromnegyedkövér) betűváltozat használata bizonyos korlátozás alá esik. Nem szép a szövegben elszórt kiemelésre használni, mint a kurzívot vagy a kiskapitálist, mert feltűnő sötét foltokat képez. Szótárakban, lexikonokban azonban a

címszavak kiemelésének ideális eszköze A kiskapitálist elsősorban személynevek kiemelésére való a tudományos munkákban, illetve a szereplők nevét szedhetjük belőle színdarabokban. Fontos helyesírási szabály az, hogy ha folyamatos szövegben használjuk, akkor a tulajdonnevek kezdőbetűje verzál: LEONARDO DA VINCI ( nem LEONARDO DA VINCI) A kiskapitálisnak jót tesz egy minimális ritkítás (egy egységgel) 122. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Betűtípusok 123. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ 124. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Betűkeverés Általában az a legbiztonságosabb, ha egy vagy két betűtípust, pontosabban betűcsaládot használunk, változataival együtt. Borzasztó és elrettentő megoldás az, hogy ha az alkotó mindenféle betűtípust felhasznál, úgymond

a művészi hatás fokozására. Az ilyen felhasználás persze nemcsak az jó ízlést sérti, hanem az olvashatóságot is alaposan nehezíti. Az alábbi példa jól szemlélteti az efféle tipográfiai törekvéseket. Krea-tív design Stúdió 1234 Budapest, Váci u.13 Tel.: 1567-563 Ecset István részére Tisztelt Uram! Mellékelten megküldöm a kért adásvételi ügylet tervezetét és kérem, hogy annak elfogadásáról, vagy az esetleges módosításokról mihamarabb ÉRTESÍTENI szíveskedjék. A D Á S V É T E L I S Z E RZ ŐD É S (tervezet) Amely létrejött egyrészről Ecset István, anyja neve. Valag Róza, lakása 3421 Budapest, Vizsla u 21, született 1959. 11 15, Városlőd, személyi ig száma AT 569811 Budapest, 2003. október 11 Tisztelettel: Szürke Manó ügyvezető Sokszor előfordul azonban, hogy nem mondhatunk le a betűkeverés által kínált lehetőségről- figyelemfelkeltő esztétikai többletről. Betűkeverés alatt ezek szerint azt kell

értenünk, hogy különböző betűtípusokat (más betűcsaládokhoz tartózókat) használunk. Leggyakoribb eset a címek, képaláírások vagy a táblázatokon, ábrákon belül használt betűk más betűtípusból való szedése Ezt esztétikailag nem könnyű megoldani, mert vannak egymással keverhető és egymást „ütő” betűtípusok. Általános ajánlásként megfogalmazható, hogy a kis különbség nem különbség 125. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Minél közelebb álló stílusában két betű, annál émelyítőbb lesz keverésük, és mennél távolabbiak annál jobban keverhetők. Mit nem szabad keverni? „Antikva vágású” (váltakozó vonalvastagságú, talpas) betűtípusokat egymással, ilyenek kurzívjait írott típusokkal, groteszket (talpnélkülit) egyptien-nel (talpas lineárissal), az utóbbi két eset azonban nagy méretkülönbség létrehozásával megkockáztatható. Szinte

minden eset egyedi, és csak gyakorlati példák, valamint próbálkozás segítségével lehet jó döntést hozni Kisbetűk és nagybetűk A kisbetűket és nagybetűket általában egyenrangúnak és használatukat korlátlannak szokás tekinteni, ami nem teljesen jogos (olvashatóság) de természetesen címeket lehet csupa nagybetűkkel szedni. Ugyanakkor vannak olyan betűtípusok, amaelyekből a csupa nagybetűs (verzál) szedés olvashatatlan, tehát nem megengedett. Ilyenek például a gótikus betűk és a legtöbb írott betű ESTI ÚJSÁG Esti Újság Esti Újság Esti Újság HELYES ESTI ÚJSÁG ESTI ÚJSÁG HELYTELEN 126. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ A sorhosszúság szabályai Hangsúlyváltozás a sorcsoporton belül 127. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Molnár Gyula: Magyarország plakát 128. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS

TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Az Image fogalma Mivel a webtervezőnek nagyon sok esetben figyelembe kell vennie a megrendelő arculatát, tisztában kell lennie az arculat fogalmával, annak különböző fajtáival, jellemzőivel. Ez a fejezet a legalapvetőbb elméleti ismerteket foglalja össze röviden. Mindenekelőtt ugyanarról a fogalomról van szó függetlenül attól, hogy ennek latin eredetijét (IMÁGO), franciás változatát (IMÁZS), vagy angolszász (IMAGE: imédzs) elnevezését használjuk. Mindhárom egyaránt elfogadott a hazai szakzsargonban. (Az értelmezésben létező különbségekre a későbbiekben kitérünk) A San Francisco-i reklámszakember, Howard Luck Gossage, akinek a nevéhez fűződik az „image” elnevezés. Használatát nyelvtani aberrációnak bélyegezte, és ragaszkodott ahhoz, miszerint az Identitás az jelenti, hogy valaki milyen is valójában, az Image pedig csupán arra utal, hogy valaki milyen színben tűnik fel

mások előtt. Gossage úgy gondolta továbbá, hogy „Az image szónak egyfajta tisztességtelen csengése van, mintha valamit el akarnának odázni vele”. Valójában azért részesítette előnyben az Identitás szót az Image szóval szemben, mert az Identitás sokkal kevesebb fenntartást igényel. „Az Identitás a naphoz hasonlít. Egy szilárd tömegből sugároz energiát Az Image viszont olyan, mint a léggömb: csak felülete van, és rengeteg időt tölt azzal, hogy elkerülje a tűszúrásokat.” Az amerikai üzleti élet szereplőinek is rengeteg idejébe és pénzébe kerül e tűszúrások elkerülése. És tudatában vannak annak, hogy a vizuális kommunikáció korában – ahol a figyelem időtartama nem percekben, hanem másodpercekben mérhető – a verbális kommunikáció már nem töltheti be olyan hatékonyan a szerepét, mint a gyors grafika. Az emberek tudatában a termékekről, vállalatokról, tevékenységekről, stb. kialakuló tudati képek (az

image) tudatos befolyásolásával, „építésével” növelhető a forgalom, az árbevétel, a nyereség, vagy non-profit szervezetekre értelmezve: az ismeretség, a támogatás, a tolerancia, a bizalom és az együttműködési kézség is. Hiszen végső soron a fogyasztó/állampolgár vásárlási/választásra vonatkozó döntéséhez szükséges argumentáció – igaz, árnyait és indirekt módon történő – megteremtéséről, alakításáról, pontosabban: a kialakítás irányított elősegítéséről van szó! Tekintettel arra, hogy e tudati képek, felületes előítéletek tárgyukat tekintve nagyon sokfélék lehetnek (hiszen az ember a napi valóság minden általa elérhető tényt: konkrét dolgot, terméket, szolgáltatást, vállalatot, cselekedetet, intézkedést, egy másik embert, sőt önmagát is(!) értékeli), többfajta image-ről beszélhetünk. Ezek az image-fajták kölcsönhatásban állnak egymással és környezetükkel is, azaz komplex

jelenségként értelmezendők. A komplexitás mind a szubjektum, mind pedig az objektív gazdasági/társadalmi/politikai környezet vonatkozásában érvényesül. 129. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Az image fajtái A szakirodalom alapvetően a gazdasági/társadalmi/politikai reálfolyamatok szempontjából – három image-fajtát különböztet meg, úgy mint • termék/szolgáltatás-image, • márkakép/védjegy-image és • vállalat/szervezet-image. Tárgyukat tekintve ezen image-típusok egyértelműen beazonosíthatók. A szakirodalom által megkülönböztetett összes többi image-típus már nem a tárgy, hanem gyakorlatilag az image „minőségi jellemzésének” megragadására szolgál. Ily módon beszélhetünk: • az image kialakulásának módja szerint - spontán kialakult és - tudatosan formált, kialakított image-ről; • az image történetisége (időhorizontja) szerint - előzetes, tény-

(current-) és - jövőbeni, kívánatos- (wish-) image-ről; • az image irányultsága szerint - ön- (self-) image - tükör- (mirror-) image-ről. A reálfolyamatok szerinti csoportosítás A gazdasági életben, a piaci viszonyok vonatkozásában mind makro- mind pedig mikro-szinten értelmezhetjük az image fogalmát. A fogyasztók nem csak a vállalatokkal és azok különböző termékeivel, szolgáltatásaival találkoznak a piacon, hanem az előbbieket összekapcsoló márkákkal, védjegyekkel is, sőt a gazdaságirányítás, az egyes ágaztok rndszert alkotó, összefüggő és egymásra épülő láncolatát is érzékelik. Ily módon megkülönböztetünk: 1. Product Image-et (azaz termék-image-et) 2. Brand Image-et (azaz márkaképet) 3. Company vagy Corporate Image-et (azaz vállalati-, vagy szervezetiimage-et) Termék- (Product) image A termék-image gyűjtőfogalom: termékcsoportokat, termék- (vagy szolgáltatás-) feleslegeket, lényegében különböző

termék- egyedeket foglal magában. 130. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Ha egy termékfajta képe kedvező, úgy az előnyösen befolyásolja a termékfajtán belüli konkrét termék-image-ek alakulását, fejlődést (pl.: AIDS – óvszerek, vagy a divatházak termékei és különböző kollekciói), illetve ugyancsak kedvező értékeléseket eredményezhet – elvileg – az adott termékfajta gyártásában vagy forgalmazásában érdekelt vállalatokról kialakuló vállalatképzetek (cég-image) terén is. Egy esetleges kedvező termék-image-nek hasonlóan kedvező vállalati- és márka-image-ben kell kifejeződnie. Ezek állandó kölcsönhatásban vannak egymással, alakítják egymást és valamelyik változása a többit is kedvező, vagy kedvezőtlen irányba befolyásolja, változtathatja. Ha a termékfajta képe kedvezőtlen, akkor két lehetőség áll fenn: • valamennyi gyártó vállalat közösen

próbál a helyzeten változtatni (lásd a magyar ipar belföldi és külföldi megítélését, vagy a magyar bankrendszer katasztrofálisnak is minősíthető image-ét), • az egyes vállalatok arra törekednek, hogy saját vállalatképmásuk, imageük erőteljesen különbözzék a többi azonos profilú vállalat megítélésétől. Márka- (Brand) image Tartalmát tekintve: márkaképet jelent. „A márkakép a termékkép objektiválódása. A márka többletet ad a terméknek, a fogyasztók magasabb értékűnek becsülik A márkához a vevő hű marad” Az image vonatkozásában ebben az esetben már nem termékkörről, illetve – fajtáról beszélünk, hanem egy adott konkrét áruról, amelynek már „neve” van: egyedileg beazonosítható. A márkák, a termékek, a vállalatok közötti választásra vonatkozó döntés nem történhet csupán a konkrét tulajdonságok alapján, a termék (vagy szolgáltatás) belső szellemi képe döntő tényezővé vált.

Cég- (Company/Corporate) image A vállalatok termékeik és szolgáltatásaik révén önálló image-dzsel rendelkeznek a fogyasztók tudatában. A vállalat minden intézkedése, ténykedése kihatással van image-ére, amelyeknek változásait megismerni és tudatosan alakítani az image-stratégia fő feladata. A szervezet image-ét meghatározó tényezőket a következő oldalon összegezzük. A vállalatról kialakult összképet az alábbi objektív tényezők befolyásolják: A.) a vállalat/szervezet filozófiája, ide tartozik a beszerzési és értékesítési (piaci) stratégia is, illetve a szervezet missziója és jövőképe B.) a vállalat műszaki tudományos potenciája, fejlesztési tevékenysége (iparvállalatoknál a know-how komplexum, míg szolgáltató vállalatoknál a szolgáltatások színvonalával összefüggő fejlesztési, modernizálási tevékenység), C.) a szervezet kultúrája, D.) a szervezet struktúrája, a vállalat humán- és

szociálpolitikája E.) a vállalat márkapolitikája, F.) a vállalat kommunikációs stílusa, a szervezet tagjainak magatartása 131. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ G.) a vállalat kommunikáció-politikája (reklám, public relations tevékenységei) A.) A vállalati/szervezeti filozófiában – a közgazdasági tényezőkön kívül – pszichológiai szempontok is érvényesülhetnek. Így pl: az egymással éles versenyben álló szálloda-konszernek közül a Hilton az életformát és stílust („A way of life”), a Sheraton a kiterjedt hálózatot és a fényűzést, a Hyatt a természethez való kötődést építette be az image-fejlesztés fő irányaként piaci stratégiájában és vállalati arculatába. Ez a befolyásoló tényező a szervező alapfunkciójának ellátásával kapcsolatos, a szervezet vezetése által tudatosan kialakított eszmerendszer deklarált fontosságára, valamint az ennek

elfogadtatását és megismertetését célzó és szolgáló kommunikációs aktivitás (belső és külső public relations) kapcsolódó feladatra és arculat-formáló lehetőségére hívja fel a figyelmet. Az image kialakulásának módja szerinti csoportosítás A fogyasztók tudatában kialakuló eszmei kép, eredetét tekintve több módon is létrejöhet. Ebben az értelemben megkülönböztetünk: 1. spontán keletkezett és 2. tervszerűen kialakított image-et Spontán keletkezett image Az eddigiek alapján már evidens kategória, amely természetesen – tárgyát tekintve – vonatkozhat: termékre (ágazatra), vállalatra és márkára is. A „spontán” eredete: keletkezésének ez a módja azt jelenti, hogy az alanyban (fogyasztóban, vásárlóban, állampolgárban) kialakult eszmei „képek” nem a „tárgy” tulajdonosának tudatos, célirányos tevékenysége eredményeként, hanem eseti, véletlenszerűen kapott információk alapján – legtöbbször

felületes általánosításként – alakulnak ki. A spontán módon kialakult image minden esetben káros a „tárgyra” (termékre, vállalatra, személyre, stb.) nézve, hiszen az image „autodidakta” fejlődésének eredményeként az csak csonka, hiányos információk hordozója lehet” mind megannyi struktúrátlan, hatásában előre ki nem számítható előjelű, vegyes benyomás, amely nem feltétlenül a vállalati célok irányában dolgozik. A spontán image klasszikus példái a nemzetközi turizmus területéről: „ amikor Bécsről esik szó, bátran feltételezhetjük, hogy szinte mindenkinek a kedélyesség, a „Gemütlichkeit”, a walcer vagy ezekkel rokon fogalmak jutnak elsőként eszébe. Ha viszont Londont emlegetik, nagyon valószínű, hogy az emberek többsége lelki szemei előtt egy ködös, füstös, szürke város képe jelenik meg A belénk ivódott előítéletek játszanak közre abban, hogy például az olaszokat az édes semmittevés, a

franciákat az élvetegség, a skótokat a fukarság népének tartjuk.” E példák is szemléletesen támasztják alá a spontán image káros, negatív jellegét. Hiányos információi nemegyszer idejétmúlt túlzásoknak is tekinthetők (mint pl.: London és a szmog esetében – köszönhetően az elszánt és kormányzati akarattal párosult környezetvédelmi intézkedéseknek London levegője ma tisz132. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ tább, mint Budapesté), s mint ilyenek, szükségszerűen feltételezik, sőt megkövetelik az aktív beavatkozást, a kialakult kép fejlesztését, javítását, pozitív korrekcióját. Törekvéseinek az image-építés (image-building) során konkretizálódhatnak Tudatosan kialakított image (corporate identitiy) Az image típusainak mindegyikét alakíthatjuk tervszerűen, tudatosan. Ily módon építhető az egyén saját imágó-ja (self-image), a termék-, a cég-, a

márkaimage is. Témánk szempontjából elsősorban e három utóbbi bír jelentősséggel A CI, a tervszerű, tudatos image-építés (elsősorban vállalati szinten értelmezett) eszközei többnyire megegyeznek a marketing eszközeivel. E cél érdekében operálhatunk – mint erre még kitérünk majd – a vállalat gazdasági tevékenységével, szolgáltatásaival, azok választékával, minőségével, a marketinkommunikáció eszközeivel, stb. – de a szervezet kommunikációs politikájával (public relations) is. A hangsúly – bármely „építő” eszközre essen is választásunk – természetesen a tudatos célkitűzésen és a management-következetességen van. Enélkül eszközeink felhasználása csupán formális lehet. A továbbiakban ez az arculattervezés, mint az image tudatos fejlesztésének algoritmusa képezi konkrét vizsgálódásunk tárgyát. Az image történetiségén alapuló csoportosítás Mint már említettük, az emberek tudatában

kialakuló „képek” létrejötte: egy-egy folyamat eredményei. A megismerésből kiindulva a tapasztalatok révén, újabb és újabb benyomások, különböző információk alapján folyamatosan gazdagodik a „kép”. Ezért tehát sohasem beszélhetünk végleges image-ről; ez nem egy lezárt, befejezett, megmerevedő kategória! Jól szemlélteti ezt a következő emblémasor, amely a Pelikán cég emblémájának grafikai fejlődését mutatja be. E folytonos és sokrétű folyamatot tekintve csoportképző ismérvnek, beszélhetünk az image „történetiségéről”, amely szerint megkülönböztetünk: 1. előzetes – vagy tény (current) image-et és 2. jövőbeni vagy kívánatos (wish) image-et 133. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Meglévő (current) image Az eddigiekből logikusan következik, hogy kategóriánk (meglévő vagy tény-image) viszonylag és csak az image tudatos és folyamatos építése

szempontjából van jelentősége. Ebben az összefüggésben current image-en vizsgálatunk, vagy befolyásoló tevékenységünk adott időpontjában létező, illetve azt megelőzően kialakult, formálódott tudati képekés azok különböző összetevőinek összességét és adott állapotot értjük. Tudatos befolyásoló (kommunikatív) tevékenységeink legfontosabb feladatát éppen ennek az érzékelt, expontált és már létező képnek az adott célkitűzések irányában és értelmében történő változtatása, módosítása – azaz további építése képezi. A rögzítés eredményeként adódó helyzetkép különböző összetevői számunkra olyan objektív piaci tényeket jelentnek, amelyek alapján fogalmat alkothatunk egyrészt saját tevékenységünk piaci helyéről, súlyáról, megítélésről; másrészt a saját elvárásainkhoz, kívánalmainkhoz viszonyított eltérések mértékéről és irányultságairól is. (Az image mérésének

problematikájával külön fejezetben foglalkozunk) Kívánatos (wish) image – Eszménykép/Ideality Az „eszménykép” nem igazán mindennapos fogalom a public relations-ben. Eredetét vizsgálva mindmáig Vélu volt az egyike azon keveseknek, akik foglalkoztak az eszménykép gondolatával. Szerinte az eszményképet úgy jellemezhetjük, mind a célul kitűzött identitás megvalósítását, vagy mint a vállalat politikai célkitűzéseinek a jövőre történő kivetítését. Image-fejlesztési törekvéseink és tevékenységünk viszonyítási alapjaként is definiálhatjuk, hiszen tartalmát tekintve olyan image-et értünk alatta „amilyennek szeretnénk, hogy mások lássanak bennünket”. E kívánt képzetek összességét tekintjük, illetve tartjuk szem előtt, amikor az előzetes (vagy current) image továbbfejlesztéséről, építéséről beszélünk, azaz ezek a gyakorlati imagemunkálatok stratégiai vezérfonalát jelentik. Munkánk célja ilyenkor az,

hogy az image-en belül az általunk kívánt pozitív tartalmak domináljanak, azaz rólunk (a termékről, a cégről/szervezetről, az emblémánkról, stb.) környezetünk, közönségünk, célcsoportjaink jót, vonzót, kellemet, kedveset, csupa pozitív dolgot gondoljanak 134. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Az image irányultsága szerinti csoportosítás Irányultsága szerint az image külső, vagy belső nézőpontú (azaz különböző tárgyú) lehet. A kialakuló kép tükrözheti egy, a szubjektumon kívüli világ adott momentumát (tárgy, ember, vállalat, stb.), vagy irányulhat befelé, magára a szemlélődő és megismerő szubjektumra is E kettősség alapján a következő válfajait különböztetjük meg: 1. ön- (self-) image és 2. tükör- (mirror-) image Ön- (self) image „A tudatos image-építés pszichológiájának egyik nehézsége, hogy az emberekben nemcsak egyes intézményekkel,

tárgyakkal, vagy más emberekkel kapcsolatos belső kép él és befolyásol, hanem mindenki önmagáról is hordoz egy többnyire kedvező és a valóságtól eltérő pszichikai képet” amit self-, vagy önimage-nek nevezünk. Az ember ön-image-e könnyen összeomolhat, amikor megéli, hogy cselekedeteit a számára fontos emberek (barátok, kollégák és rokonok) különféleképpen ítélik meg. Egy vállalat ön-image-e csak a dolgozók szervezettel kapcsolatos egyéni tapasztalatinak és a dolgozók által felfogott, „a szervezettel szemben tanúsított általánosított külső reakciók” kombinációjaként fogható fel. Ez egy megosztott belső nyilvános image. Tükör- (mirror) image Mint a tükör: képet ad a tárgyról, szembesít a valósággal. A tükör-image – szemben az előző kategóriával, az ön-image-dzsel – az alanyról, az image tárgyáról annak környezetében, a közönségben, a célcsoportban kialakult és létező nézet- és

véleményrendszert jelenti. Tartalmazza tehát a reálfolyamatok szem135 oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ pontjából értelmezett mindhárom image-kategória reális és létező tartalmát, egyfajta homogén átlagnak is tekinthető. A tükör-image jobbára elméleti jelentőségű image-kategória, bár az építés folyamatában oly fontos és jelentős induló lépés, az image vizsgálat lényeges tartalmi aspektusát képezi. Ország image Sajátos image-típusnak tekinthetjük az ország-image-et, amely tartalmában átfogja az adott ország termékeit, különböző márkáit és szervezeteit, cégeit, illetve ezeknél némileg többet is. Az ország image jelenti az adott népről, nemzetről és országról kialakult, annak minden aspektusú létével kapcsolatos belső és külső nézet- és véleményrendszert, a heterogén és általánosított értékítéletek egyidejűleg objektív és szubjektív komplex

pszichológiai tartalmát. Az ország-image-et (korábbi imageértelmezésünk alapján) tehát a nemzetről/országról szerzett tapasztalatok, vélemények és – legfőképpen! – információk alkotják! 136. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Arculati kézikönyv A vállalati identitás következetes és minden létező „közvetítőre” vonatkozó az egységesség és azonosság követelményeket érvényesítő, az arculattervezés és a vállalati identitás kialakításának fejlődéstörténete során kialakult racionális megoldása: az arculat kézikönyv (CI Manual). Tulajdonképpen szabály- és etalongyűjteményként értelmezhetjük Az arculati kézikönyv összefoglalja a vállalati arculat, identitás főbb és jellemző paramétereit, a vállalati kommunikáció e téren értelmezhető szabályszerűségeit. A vizuális identitás (CD) valamennyi elemének pontos leírását, a formai kialakítás

szabályait, valamint a felhasználásra vonatkozó utasításokat is tartalmaznia kell. „Egy modern szervezetben gyakorlatilag nincs mód arra, hogy arculati kézikönyv nélkül menedzseljük a vállalati arculat ügyét. Ahol egynél több részleg vesz részt az arculati elemeket hordozó anyagok megrendezésében, beszerzésében, alapvető követelmény, hogy legyen olyan útmutató, amely a szabványelőírásokat tartalmazza.” Az arculati kézikönyv tartalmára vonatkozó kötelező előírás nincs, az alábbiaktól eltérően lehet jóval részletesebb, illetve jóval szűk körűbb is. A fejlett piacgazdaságú országok arculattervezési gyakorlata a Manual praktikuma felé orientálódott: nem egy dogmaként „befagyasztott” formavilágot rögzítenek csupán benne, hanem számos, a gyakorlati kommunikációt megkönnyítő, praktikus, gyakorlati értékű kiegészítővel (mint pl.: öntapadós színminta ívek, vállalati logo több méretben szintén öntapadós

íveken sokszorosítva) felszerelve a napi munka hasznos „mindentudójává” alakítják ki. Tematikájának struktúrája általában a következő: I. Azonosítók A vállalat/szervezet emblémája, logo-rendszere, színei, azok arányai felhasználási szélsőségeknél, a vállalat betűtípusa, tipográfiai rendszere. II. Levelezési anyagok Névjegy, levélpapír, boríték, számlák, adminisztrációs anyagot, üdvözlőmeghívókártyák stb. III. Kereskedelmi információhordozók Tárgyalási segédletek: agenda, jegyzetblokk, prospektusok, szórólapok, használati utasítások, garanciajegyek, termékcsomagolás, címkék, matricák, reklámeszközök. IV. Speciális információhordozók Kereskedelmi egységek – boltok, bemutatóterem stb. – azonosítói, portálok, kültéri információhordozók, beltéri információhordozók, egyenruha, munkaruha, illetve ezek információhordozó kiegészítői, építészeti – külső és belső – megkötések,

berendezések, kiállítások és vásárok stand-előírásai stb. V. Indirekt információhordozók Szállítóeszközök, járműpark, irányító objektumok, telephelyek stb. A fentiek közül a legtipikusabb levelezési anyagok válogatott körének (névjegy, levélpapír 1-2, boríték) grafikai megjelenítését nevezi előszeretettel a marketingkommunikációs szakmai gyakorlat „kis arculatnak”. A fogalomhasználat – az eddigiek alapján már érthetően és indokoltan – téves azonban sajnos általános. 137. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ A fenti ábrán az embléma különböző alkalmazási változatait láthatjuk Etalon minőségben elkészítve az arculati kézikönyv alkalmas arra, hogy a vállalat különböző, térben, időben és munkafolyamatban egymástól eltérő kommunikációs tevékenységei számára útmutatóként szolgáljon az egyes konkrét alkalmazások kivitelezési feladatainak

és módozatainak definiálásával, előírásával, a szabályok rögzítésével. „Előírásainak, nomenklatúráinak: • betartása kötelező, • érvényes valamennyi vizuális kommunikációs tevékenységre, • a vállalat kommunikátorai számára mindenkor elérhető.” Egy jól szerkesztett arculati kézikönyvet csak fel kell csapni a megfelelő, adott kommunikációs témakört taglaló fejezetnél és máris választ kaphatunk belőle a kivitelezést, a konkrét alkalmazást érintő formai kérdéseinkre. Funkciójából adódóan a kézikönyv annyi példányban készítendő, ahány kommunikációs csomópont található a vállalatnál/szervezetnél. Ezeken a csomópontokon kell a kézikönyvet elhelyeznünk annak érdekében, hogy a különböző természetű kommunikációs feladatok megoldása soha ne szenvedjen késedelmet a formai elemek egységes alkalmazásának követelménye miatt. (Ehhez nyújt segítséget a vállalati szervezet, a szervezeti

struktúra ismerete, amelynek jellemzőit a 4.611 fejezetben érintettünk) A szervezeti/vállalati arculat törvényszerű időbeni fejlődéséről (fejlesztéséről) írottak analógiájára, az ezt formai oldalról rögzítő kézikönyv sem lehet statikus, végleges, lezárt. Szerkezetében, kialakításában biztosítania kell a fejlődéssel bekövetkező változások/változtatások lehetőségét. Erre ma már több módszer is ismeretes és használatos (így pl.: a laponként cserélhető szerkezet, a betétlapos kialakítás, a visszajelzőkártyás zárórész stb.) 138. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Az arculati kézikönyv tematikája Egy arculati kézikönyv tematikája – mint már szó volt róla – többféle lehet. A tematika részletessége elsősorban a kézikönyvet alkalmazó vállalat/szervezet alkalmazási területeinek számától függ. A tematika lehetőségeinek minél részletesebb

bemutatása érdekében egy számos adaptációt tartalmazó, részletesnek számító változatot mutatunk be I. rész: A szervezet arculatának formai elemi 1.1 Alapvető előírások vállalatcsoportok, holdingok esetében 1.11 Logo 1.12 A logo körüli minimálisan üresen hagyandó terület 1.13 Példa logo alkalmazására 1.14 Betűtípus 1.15 Tipográfia 1.16 Színek 1.17 Szín használata a logoban 1.18 Szín használat sötét háttér esetén 1.19 Példák a színhasználatra 1.110 Elfogadhatatlan logo szerkesztés 1.111 Elfogadhatatlan színhasználat a logoban 139. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Az embléma, logo, (logotípia), piktogram, címer Az embléma és a logo Az embléma és logo két különböző de egymással összefüggő fogalom. A kettő közötti különbség a felhasználók körében, de még a szakirodalomban sem egyértelmű. Az arculati kézikönyvek leírásaiban a logo elnevezéssel

találkozunk A Magyar Tervezőgrafikusok Kamarája árjegyzékében mind a két elnevezés szerepel. Közös funkciója mindkettőnek, hogy egyszerű, vizuálisan jól befogadható (egyéni karakterrel rendelkező) vizuális jelként megkülönböztesse a különböző tevékenységeket folytató cégeket, társadalmi csoportokat, egyéb közösségeket stb. Emblémának az olyan jelet nevezzük amelyek általában nem tartalmaznak feliratot, ilyen például a Mercedes autóé. Aztán találhatunk olyanokat is, amelynél a jel egy grafikailag jól megformált név, ezt szokás betűemblémának, vagy logotípiának nevezni. A harmadik típusba tartoznak azok, amelyek grafikai jel és felirat együtteseként alkotnak egységes megkülönböztető jelkombinációt. Ilyen például a Malév, Kodak stb. cégé A Dunaferr (Dutrade) embléma 140. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ A Dunaferr logo külön és az embléma és logo

együtt Ezt a kis fogalomtisztázás azért fontos, mert a web tervező rendszeresen találkozik ezek használatával. Akár emblémának, akár logonak nevezik is az arculat legfontosabb elemét, ezek után világos, hogy azok mindhárom megjelenési formájával találkozhatunk a gyakorlatban és mindegyiknek azonos a funkciója. Általában ha a cégnek rövid közismert, jól hangzó neve van akkor célszerű betűemblémát terveztetni. Ilyen például a Ford, vagy a közismert mozaikszavakból állók; MÁV, MTV, BMW, KERAVILL, stb Bár ezek többségének külön emblémát is terveznek. Nagyon szerencsés és szakmailag magas színvonalon megtervezett ilyen értelemben Az Amfora embléma és cégfelirat. Együttes grafikai minősége az egyik legjobb példája annak, miként kell jól megtervezni az embléma és szöveg vizuálisan harmonikus egymáshoz illő egységét. Az alsó sor bal oldalának első emblémája: Amfora 141. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS

TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Az embléma mint jeltípus alapvetően kétféle lehet. Az egyik az ikon típusú, ebben az esetben az embléma egyszerűsített vizuális formában felismerhető képet mutat, azaz a jel és jelzettje között hasonlóság van. A másik a szimbólum típusú, ebben az esetben a jel olyan nonfiguratív, absztrakt forma, amely képileg nem utal az ábrázolni kívánt cégre, tevékenységre, azaz a jel és jelentettje között megállapodásszerű viszony van. Ilyen például, a volt kiváló áruk fóruma embléma, vagy a kresz táblák közül például az elsőbbség adás kötelező tábla. Az embléma illetve logo tervezésénél alapvető szempontként kell figyelembe venni azt a szempontot, hogy vizuálisan könnyen befogadható jel legyen. Ezért elfogadhatatlanok az olyan emblémák, amelyekben sok apró részletet ábrázoló grafikai elem jelenik meg. Minél több részlet, annál hosszabb észlelési idő Az embléma nem

raktár, amelyben a cég összes készített terméke, vagy szolgáltatása vizuálisan meg kell, hogy jelenjen. Erre szolgálnak a termékismertetők, vagy más hasonló funkciót szolgáló kiadványok A másik fontos tervezési elv, az egyszerűségre való törekvés. A túlságosan bonyolult grafika elemet, és sok színt tartalmazó embléma, szintén akadályozza a befogadást. Nem beszélve arról, hogy a zavaros és bonyolult grafikai formációk nehezebben rögzülnek, pedig az emblémáknak az is a funkciójuk, hogy minél hamarabb, és minél mélyebben bevésődjön a felhasználó tudatába. Nem felelnének meg például a számítógép programjaiban szereplő ikonok emblémának Annál az egyszerű oknál fogva, mivel az emblémáknak a ház falán, a gyorsan közlekedő teherautón is jól kell látszódniuk. Nyilvánvaló, hogy a monitortól 30-40 cm távolságban ülő számára megfelelőbb, kevésbé egyszerűsített, sőt akár több színnel ábrázolt jel, azaz

más funkció, más vizuális reprezentációt kíván és ebből a szempontból a szoftver gyártók grafikus tervezői általában jól vizsgáznak. A befogadhatóságot a figyelemfelkeltést nagyban növelik az izgalmas, az általános grafikai szabályokat a cél érdekében felrúgó grafikai megoldások. Ilyen megoldást alkalmazott volt a valamikori Idea Iparművészeti Vállalat emblémájának tervezője. Ő egyszerűen az idea feliratban 180 fokkal megfordította az e betűt. Meg kell azonban jegyezni azt, hogy csak azok a tervezők vállalkozzanak ilyen megoldások alkalmazására, akik már alaposan megtanulták a szabályokat. 142. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Sokszor találkozhatunk olyan emblémákkal, amelyek arra késztetik a befogadót, hogy annak bizonyos részletét a befogadó egészítse ki vizuálisan. A szem kiegészíti egy körív meg nem rajzolt ívét, egy betű szárát, és ezzel a néző

akaratától függetlenül létrejön az a késztető kiegészítés, amely megerősíti intenzívebbé, dinamikusabbá, teszi az embléma észlelését és befogadását. 143. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Vizuálisan ingerlő, és figyelemfelhívó lehet az olyan megformálás, amikor a síkszerű formák, a befogadás során a térszerű megjelenés illúzióját keltik. Látjuk, hogy megvannak a praktikai annak, hogy az egyéni kreativitás bevetésével alkalmazzunk olyan módszereket, amelyek hatékonyságát már bizonyította a gyakorlat. 144. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ 145. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Legyen az embléma, logo, vagy annak együttes formája, általában igyekeznünk kell arra törekedni, hogy többé kevésbé utaljunk a tartalomra. Erre vonatkozóan nincs

egyértelmű szabály A Lufthansa hattyúja áttételesen utal a repülésre A madár más grafikai megformálásban nyílván lehet egy, pl tájvédelmi körzet, emblematikus figurája. Vagy egyszerűen valamilyen biológiai albumban egy illusztráció, de a Lufthansa hattyúja elég sok embernek a tudatába bevésődött, hogy annak láttán a holland légitársaság jusson eszünkbe. A Malév embléma és logó, a felirat betűinek, főleg az M betű felfelé emelkedő hegyes száraival a repülés lendületét fejezi ki rejtett formában, ehhez kapcsolódnak a nemzeti színeink sávjai amelyek, hasonló formát és irányt mutatnak mint a logotípia jellegzetes betűi. A betű és a nemzeti színek sávjai balról jobbra fel irányt mutatnak, amely egyértelműen az emelkedést fejezik ki. Az ellenkező irány, a jobbról balra le pontosan az ellenkezőjét. Azt remélem senki nem vitatja, hogy a leszállás is nagyon fontos dolog , de a repülés lényege igazából az emelkedés.

Hosszan lehetne még folytatni az elemzést, miszerint az Malév embléma kifejezi a cég dinamizmusát, határozottságát stb. A tervezés első lépése az anyaggyűjtés, amely a cége alapos megismeréséből (tevékenység, termék, hely, tradíció, hitvallás stb.) és képi anyag összegyűjtéséből áll Nem feledkezhetünk meg arról sem, hogy a megrendelőnek milyen elvárásai vannak. 146. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Egy olasz cég számára készített embléma terv változatok Hasonlóan kell tenni egy webtervezőnek is, amikor egy webes megbízást kap. Össze kell gyűjteni minden olyan információt, amely konkrétan, illetve áttételesen felhasználható tervezéshez. Sokszor a lényegtelennek tűnő dolgok indítanak el egy olyan folyamatot, amely egy újszerű megoldást eredményezhet. Általában csak tervezés tudatos menete szisztémája eredményez a kreatív ötleteket. 147. oldal

VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Az embléma, logo formájának fekete-fehérben és színes formában is jónak kell lenni. A szín, (ezt a megrendelő meghatározhatja) befolyásolja az embléma formáját. A citromsárga és kék szín esetében, mivel a sárga szín fehér alapon alig látszik nem nagyon lehet önálló formájú eleme az emblémának. A kék színnek valamelyest érinteni kell a az emblémát, vagy teljesen körbe kell vennie. Vagy ha különálló részként akarjuk ábrázolni, akkor kék színű körvonallal kell körberajzolni. Az embléma használatára vonatkozóan az arculati kézikönyv ad eligazítást. Mivel egyre több cég rendelkezik ilyennel. A webtervezőnek is tisztában kell lennie annak használatával. Nem lehet valamilyen az embléma előírt színéhez többé-kevésbe hasonló színt alkalmazni a weboldalon. Több arculati könyv azt is meghatározza, hogy milyen legyen a logo és embléma

háttér, színe. Ezt láthatjuk a Matáv embléma terven is 148. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ A Matáv embléma helyes használata a plakáton 149. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ A Matáv embléma helytelen használat, Az arculati kézikönyv szerint a szürke színátmenet használata nem engedélyezett . Több kellemetlenségtől megkímélhetjük magunkat, ha az előbbiekben említett dolgokat komolyan vesszük Megkímélhetjük magunkat a többszöri egyeztetéstől és reklamációktól Rosszabb estben még jogi következményekkel is számolnunk kell, ami már nemcsak az idegeinkre megy hanem a zsebünkre A szín pontos meghatározására leginkább a Pantone színskálát szokás használni, amely használatával a színek egy kódszám segítségével reprodukálhatók. Mivel ez egy nemzetközileg elfogadott és használt színazonosító rendszer,

a világon bárhol pontosan létrehozható egy szín, nyomtatott formában, illetve fényszínként (monitorkép). A piktogram Nemcsak emblémával, logoval találkozik a webtervező munkája során. A piktogram, amely egyértelműen ikon típusú jel, gyakran megjelenik a weboldalakon , nélkülük a képernyőn történő munka nehézkesebb lenne. Egy betű és egy szó képének észlelési ideje nyilvánvalóan különböző hosszúságú, nem beszélve arról, hogy a betű kisebb területet foglal el a képernyő felületén. Egy ikon helyigénye kb hasonló mint egy betűé Mivel egy weboldalon kívánatos, hogy minél takarékosabban gazdálkodjunk a képernyővel és amennyire lehet a befogadás idejét is rövidítsük, hatékony információ közlő eszköz a piktogram, vagy más néven ikon. Nem beszélve arról, hogy az ikonok vizuálisan jobban elkülönülnek 150. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ egymástól

mint a szöveges feliratok. Az ellentétek ugye kiemelik egymást ezért tehát tárgyalt estben az ikon hatékonyabb. Természetesen az ikon figyelemfelhívásra és beazonosításra alkalmas, de nem alkalmas a leírásra, állításra stb. erre a verbális kommunikációt kell választani Többféle tevékenységet folytató intézményben már gyakran találkozhatunk kidolgozott információs rendszerrel. Ha tőlük kapunk megbízást, az egyes linkcímek helyett alkalmazhatjuk az ott használt címeket és ikonokat Persze vannak olyan piktogramok, amelyek csak a felirattal együtt azonosíthatók be. Nyílván felvetődik a kérdés, hogy akkor mi a funkciója a piktogramnak. Vannak olyan esetek amikor, mindkettő együttes alkalmazása hatékonyabb annál mintha különkülön használnánk azokat. A címer Végül de nem utolsósorban ejtsünk néhány szót a címerről. Magyarország közelmúltja nem igazán dicsekedhet a jó címertervezés hagyományaival és gyakorlatával.

Annak ellenére, hogy azok több évszázados használatának tradíciói a magyar történelemben igencsak megtalálhatók. Sajnos a rendszerváltást megelőzően mintha megfeledkeztek volna azokról Persze tudjuk, hogy nem csupán feledékenységről, hanem szándékosságról van szó. A magyar címerek nagy része főleg az arisztokrácia családi címerei közül kerültek ki. Nyilván ebből fakadóan azok használata nem volt ajánlatos. A volt megyéink és településeink címerei is torz átalakulásokon mentek át. Az új társadalmi és politikai berendezkedés érthető módon igyekezett megszabadulni azoktól a jelképektől, amik egy másfajta ideológia jelképei voltak. Nagyon sok címer használatát megszüntették (család, település) Voltak olyanok, amelyeket úgy alakítottak át, hogy a népi demokratikus állami berendezkedés ideológiáját tükrözze. Ez alól nem volt kivétel az állami címerünk sem. Tanulságos erről egy kicsit bővebben szólni Az

1949. augusztusi alkotmány, megszüntetve Kossuth-címert, szakítva a több évszázados történelmi, nemzeti hagyományainkkal, magyar előzmények nélkül álló címert emelt nemzeti szimbólumaink közé. A Rákosi-korszak címerének központi motívumai: a kalapács és a búzakalász. Fölötte helyezkedik el a kék mezőre sugarakat bocsátó vörös csillag Egyébként a jelvény heraldikai szempontból nem tekinthető címernek, mivel figyelmen kívül hagyja azt az általános törvényszerűséget, hogy a címer elengedhetetlen eleme a címerpajzs. Mivel nemzeti jellegünket csupán az alul elhelyezkedő nem151 oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ zeti színű szalag jelzi, és egyéb formai szempontból majdnem megegyezik a többi szocialista ország címerével, nem képes betölteni azt a funkciót, amely országunk sajátos jellegét a többitől megkülönböztető módon jelképezi. Az 1956-os forradalom és

szabadságharc politikai eredménye az új címer 1957-ben történt új formájának bevezetése. A címer arany keretű, vörössel, fehérrel és zölddel vágott (szimmetrikus) tárcsapajzs, amely fölött sisakdíszként ötágú vörös csillag lebeg. A pajzstartó sárga búzakoszorú, amelyet jobb oldalán vörösfehér-zöld, bal oldalán vörös szalag fog át A pajzs és a koszorú között kék mező van, a vörös csillag sárga (arany) sugarakat bocsát a mezőre. Formai szempontból érdekes megjegyezni, hogy a Kossuth-címerre hasonlító címerpajzs arányaiban szélesebbé, mondhatnánk kövérebbé vált. Nyilván a tervezőnek alkalmazkodnia kellett a búzakoszorú kör alakjához. A címer formai és tartalmi változása nyilvánvaló ambivalens eredményt szült. Heraldikai és vizuális szempontból zavaros, másrészt csak részben engedi meg a nemzeti hagyományokon alapuló formai jegyek megjelenését. A 70-es években már érzékelhető gazdasági és

politikai változások eredményeként egyre nyitottabb kereskedelmi tevékenység jellemezte Magyarországot. A Hungexpo által szervezett, Magyarország gazdaságát és kultúráját bemutató kiállítások egyre jobban törekedtek arra, hogy nemzeti jellegünket vizuálisan is kellő színvonalon mutassák be. A nemzeti szín használata egyre változatosabb formában jelent meg. De állami címerünk, a már említett okokból kifolyólag, nem volt alkalmas arra, hogy vizuális szimbóluma legyen országunknak. Habár az akkori az ország-image-nek megfelelt, hiszen szocialista jellegű társadalmi berendezkedésünket egyértelműen jelképezte. Vizuális szimbólumként használata azért sem lehetett széleskörű, mert az állami címer marketing-kommunikációs felhasználása államilag korlátozott és szankcionált, nem beszélve a nemzetközi védjegyjog szigorú előírásairól. A másik kizáró ok a címer vizuális megformálása. A címerpajzs alakja még

többé-kevésbé elfogadható, viszont a búzakoszorú, vörös csillag és sugarak egyvelege vizuálisan bőbeszédű, nem elég redukált. A vizuális jelszimbólumok tömör, frappáns megfogalmazása nem sikerült. Valószínű, hogy nem a grafikus (Légrády Sándor) – egyébként kiváló művész – tehet róla. Olyan politikai elvárásokhoz kellett alkalmazkodnia, amelyek erősen korlátozták alkotói szabadságát 152. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Tehát a rendszerváltásig használt címerünk sem heraldikai, sem vizuális szempontból nem optimális. Nagyobb távolságról nehezen azonosítható A címer elemei (kivéve a címerpajzsot) nem eléggé karakteresek. Egyszóval nem rendelkezett azzal az adottsággal, hogy kellően tömör, figyelemfelkeltő és jellegzetes legyen. A rendszerváltást megelőző tíz évben egyre inkább elterjedőben volt az a törekvés, hogy a települések és megyék a

régi volt címerek formai hagyományaira építve új címert terveztessenek maguknak. Egyre több, a heraldika szabályait is betartó terv született, és került a gyakorlatba. Ez a folyamat a rendszerváltást követően felgyorsult, és nemcsak a települések, hanem intézmények is újra kezdték használni címereiket. Ma már gyakran találkozhatunk több évszázados hagyományokkal rendelkező oktatási intézmények címereivel honlapokon, weboldalakon. Most már annak sincs különösebb akadálya, hogy valamikori arisztokráciánk ifjabb sarja családi címerét használja a világhálón. Funkciója bizonyos értelemben hasonló az emblémával. De meg kell jegyeznünk, hogy nem teljesen azonosak Állami címerünk sem alkalmas arra, hogy reklám arculati elemként használjuk Ezt egyrészt az címer használati szabályok is korlátozzák. Más szempontból sem lenne szerencsés az említett szempontból használata, történetesen azért, mert vizuálisan nem igazán

felel meg a jó embléma kritériumainak. Vizuálisan nem elég egyszerű és tömör és figyelemfelkeltő, ami ilyen célú felhasználáskor szükségszerű lenne. Ezért alakult az a gyakorlat, hogy a címer mellé egy emblémát is terveztetnek, és a mindenkori felhasználás funkciójának megfelelően hol az egyiket, hol a másikat használva. Az előzőekben röviden összefoglaltak természetesen nem azt jelentik, hogy a web tervezőnek azok tervezésével kellene foglalkozni. De találkozhat olyan megrendelővel aki nem éppen az elvárásoknak megfelelő arculati elemeket kíván használni. Ebben az esetben fel lehet hívni a figyelmet arra, hogy újra kellene tervezni, vagy legalább is módosítani kellene azok egy részét. Egy jól megformált és jól bevezetet arculat, nagyban növelheti egy cég működésének hatékonyságát. 153. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ A jó design, több profitot hoz. Persze

tudjuk a marketing eszközök közül a vizuális eszköz csak az egyik, de az egyik legfontosabb Mint már említettük, az arculati kézikönyv szabályozza az arculati elemek használatának módjait, továbbá tartalmazza az általános gyakorlatban használatos arculathordozók konkrét formáit (levélpapír, reklámajándékok, csomagolás stb.) Elképzelhető, hogy a közeljövőben a weboldalak formáit is megtalálhatjuk benne. A webtervezőnek figyelembe véve az arculat használatra vonatkozó szabályokat, lehetősége van arra, hogy azokra alapozva, egyéni tervet készíthessen. Az embléma színe nyilvánvalóan befolyásolja a weboldalakon használható színeket, de azért elég szabadságot ad arra, hogy változatos és egyéni színtervet hozhassunk létre. Többféle jó megoldás születhet, amely az említett szemponton túl még sok minden mástól is függhet, például a közölni kívánt tartalomtól, (tágan értelmezve; szöveg, tárgy stb.), a

célcsoport, akinek információt szeretnénk közölni, a web felületen felhasználható színek. Természetesen a tervezés során még nagyon sok szempontra kell figyelemmel lenni. Ez a fejezet elsősorban a legfontosabb arculati elemek fajtáit, funkcióit, azok felhasználásának néhány példáját említi meg, utalva azokra a szempontokra is, hogy milyen kötöttségek és milyen lehetőségek állnak rendelkezésünkre a web tervezés során azok használatakor. 154. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Oldaltervezés Az oldaltervezés a web-design első olyan eleme, amivel a felhasználó találkozik. A jelenlegi böngészőkkel a felhasználó egyszerre egy oldalt lát (vagy maximum kettőt, hármat, ha nagy képernyővel rendelkezik, és több ablakot nyit meg). Ez a fejezet a weboldalak felületének felhasználásával foglalkozik, vagyis azzal, hogy mi van egy-egy oldalon. A site megtervezése gyakran fontosabb

az oldaltervezésnél, hiszen a felhasználó el sem jut a megfelelő oldalig, ha maga a site nem elég felhasználóbarát, vagy navigációs rendszere nem alkalmas arra, hogy az emberek megtalálják, amit szeretnének. Ezekkel a problémákkal és az egyes oldalak tartalmi tervezésével egy későbbi fejezetben foglalkozunk. A képernyő optimális hasznosítása A weboldalak jobbára a felhasználó számára érdekes tartalmat kellene megjeleníteniük. Sajnos sok ilyen oldal mégis több helyet szentel a navigációnak, mint azoknak az információknak, amelyekért a felhasználó az oldalra látogat. A navigáció szükséges rossz, amely nem lehet öncélú, tehát minimálisra kell csökkenteni Példáinkban a képeken szerepelnek a böngésző és az operációs rendszer által elfoglalt helyek is. Bár igaz, hogy a webtervezők általában nincsenek hatással ezekre a helyekre, a felhasználókat ez cseppet sem érdekli. Ők csak azzal törődnek, hogy mennyit fizettek egy

bizonyos számú képpontot tartalmazó képernyőért, bár ennek mindössze 20 vagy csak 14 százalékát tölti ki az őket érdeklő információ. Példa! Mint minden megjelenítésben, az üresen hagyott felületek itt sem szükségszerűen feleslegesek – hiba lenne túlzsúfolt oldalakat tervezni, hiszen az üres helyek vezethetik a szemet és segíthetnek a felhasználónak, hogy átlássa az információk csoportosítási elvét. Ha döntenünk kell, hogyan válasszunk el két tartalmilag eltérő részt egy vastag vonallal vagy üres hellyel, az utóbbi általában jobban mutat és letölteni is gyorsabb. A webtervezőknek a felhasználó által irányított navigációhoz kell alkalmazkodniuk. Néha végig lehet vezetni a felhasználókat egy adott útvonalon anélkül, hogy bizonyos oldalakat látnának, de az ilyen weboldalak meglehetősen agresszív és uralkodó benyomást keltenek. Jobb, ha meghagyjuk a mozgás szabadságát, és akár minden oldalon megjelenítjük a

honlaphoz vezető logot azoknak a felhasználóknak, akik egy közbülső oldalra érkeztek. Honnak érik el a webet a felhasználók? A legtöbb weboldal csak egy 17”-es, legalább 1024x768 képpont felbontású monitoron jeleníthető meg jól. Ennél kisebb felbontásban túl kevés látszik, és gördíteni kell ahhoz, hogy a kép minden része látsszon. Ez nem szerencsés Bár mindannyian azt szeretnénk, ha a felhasználók megfelelő méretű monitorokkal 155. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ rendelkeznének, az elkövetkezendő néhány évben még olyan oldalakat kell terveznünk, amelyek kis monitoron is jól láthatók. A következő táblázaton látható, hogy 1997-ben és 1999-ben hogyan oszlott meg a képernyők mérete. Arra a meglepő következtetésre jutunk, hogy két év alatt továbbra is a kis képernyők uralkodtak, s számuk továbbra is valószínűleg nőni fog. Monitorméretek megoszlása

1997-ben és 1999-ben* Horus és GVU 1997 Monitorméret StatMarket 1999 Nagyon kicsi (640x480 vagy kisebb) 22 % 13 % Kicsi (800x600) 47 % 55 % Közepes (1024x768) 25 % 25 % Nagy (1280x1024 vagy nagyobb)* 6% 2% * Az 1997-es adat a www.horuscom-ot látogató 5000, és a GVU felmérésén részt vevő több mint 11000 ember adatainak átlaga Az 1999-es adatok a www.statmarketcom-ról származnak * Az 1600x1200 és annál nagyobb képpont felbontású monitorok használata 2000-ben egyre jobban elterjedt. Minden web-design másmilyen lesz a különböző eszközökön. Ahelyett, hogy megpróbálnák minden egyes felhasználó számára újraalkotni ugyanazt a képet, a tervezőknek úgy kell megadniuk az oldalakat, hogy a böngészők képesek legyenek a felhasználás körülményeihez igazítani a megjelenítést. A minden platformon másként megjelenő absztrakt felhasználói felület elkészítése sokkal nehezebb, mint gondolnánk. A HTML alapelveit követve a

tervezők közel juthatnak az ideális megoldáshoz, de nem eléggé Ajánlatos elkülöníteni a tartalmat a megjelenítéstől. Utóbbihoz érdemes stíluslapokat használni, ez azonban nehezebb interakció esetén, mint akkor, ha csak információt szeretnénk megjeleníteni. Felbontás független tervezés Mivel nem tudhatjuk előre, hogy a felhasználónak mekkora képernyője van, érdemes olyan megoldásokat alkalmazni, amelyek minden képernyőn működnek, vagyis olyan oldalakt kell létrehozni, melyek az aktuális képernyőmérethez alkalmazkodnak. A felbontás független megjelenítés fő alapelve az, hogy soha ne használjunk kötött képpont szélességet táblázatok, keretek vagy bármilyen más képelemek megjelenítésére, inkább a képernyőn lévő hely százalékában határozzuk meg a méreteket! 156. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Ne felejtsük el, hogy a felhasználók ízlése a betűméretet

illetően is különbözhet, figyeljünk, hogy a design ugyanolyan jól nézzen ki kis és nagy betűméretettel. Több oka is lehet annak, hogy valaki más betűméretet használ: vagy azért, mert csökkentlátó, vagy egyszerűen azért, mert olyan nagy felbontású képernyője van, amin a kis méretű betű nehezen olvasható. A grafikus elemek tervezésénél se feledkezzünk meg a különböző felbontásokról – különösképpen az ikonoknál, melyeknek 100 dpi-s vagy nagyobb felbontásnál is működniük kell. Minél nagyobb a felbontás, annál kisebb lesz maga a grafikus elem, ezért abban minden szövegnek elég nagynak kell lennie, hogy olvasható maradjon. Nem tanácsos szövegeket grafikus részekbe ágyazni, mivel egyrészt lelassítja az átvitelt, másrészt megnehezíti a felhasználói felület lefordítását más nyelvre. Válaszidők Az összes web-ergonómiai kísérletnek, amelyet 1994 óta végeztek, ugyanazok a tanulságai: a felhasználók mindig azt

óhajtják, hogy rövidítsük le a letöltési időt. Ezen a problémán a jó design sem segít, hiába van megtervezve esztétikai, a színdinamikai és egyéb szempontból jól a weboldal, a lassú letöltés türelmetlenné teszi a felhasználót. A különböző webes hiperszöveg-rendszereken végzett kutatások és a hagyományos emberi tényezőket a válaszidő függvényében vizsgáló kutatások is azt mutatják, hogy kevesebb, mint egy másodperces válaszidőre van szükség ahhoz, hogy a felhasználók egy információs térben szabadon mozoghassanak. Sajnos, a közeljövőben nem valószínű, hogy a webes válaszidő másodpercek töredékére csökken, tehát biztosra vehetjük, hogy a felhasználókat a lassú letöltések a továbbiakban is zavarni fogják. A jelenlegi elérhető cél az lehet, hogy egy lap megjelenése nem tartson tovább 10 másodpercnél, mert az a leghosszabb időtartam, ami alatt a felhasználók figyelme nem kalandozik el várakozás közben.

A válaszidőt tekintve még mindig az a tanács érvényes, amit Robert B. Miller a Fall Joint Computer Konferencián 1968-ban fejtett ki a témával kapcsolatos klasszikus tanulmányában: • Egy másodperc tizedrésze körülbelül az a időhatár, aminél a felhasználók még úgy érzik, hogy a rendszer azonnal reagál, vagyis hogy nincs szükség semmilyen különleges visszacsatolásra az eredmény megjelenítésén. A web előtt mindenki így gondolkodott: • A hardvert néhány évig lehet használni, aztán egy gyorsabb számítógépre kell átállni. • A szoftverek évtizedekig használhatók. • Az adat megmarad! Ha egyszer már felvettünk egy adatot, mint például egy vásárló címét, azt még akkor is meg akarjuk tartani, amikor már anynyira elegünk van a régi hardverünkből és szoftverünkből, hogy teljesen új megoldásokat akarunk alkalmazni. Ugyanez igaz a webre is. A hardver határozottan örök veszélyben van, minden sikeres site szerverét

évente többször is bővíteni kell Tudjuk, hogy a böngészők és más szoftverek is folyamatosan cserélődnek A webes adatoknak (általában oldalak formájában) sokkal tovább meg kell maradniuk, mint a webes hardve157 oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ reknek és szoftvereknek. Még ha a legtöbb felhasználó az újabb oldalakat látogatja, néhányuknak még a régiek is érdekesek Például a Sun valaha kibocsátott összes termékét még ma is használják, tehát a régebbiekről szóló információk még mindig fontosak. Még az értékesítési oldalak is szóba jöhetnek olyan harmadik személy számára, aki esetleg azon gondolkodik, hogy egy olyan cégtől vásároljon régi eszközöket, amelyik új gépekre váltott. Jól felfogott érdekünk az ilyen típusú vásárlók támogatás, még akkor is, ha a régi eszközök eladásán egy fillért sem keresünk, hiszen lehet, hogy karbantartási szerződést

írnak alá, vagy azért, mert jó esély van rá, hogy később az újabb verziókat is meg fogják tőlünk vásárolni. A tanulság egyszerű: a most készülő oldalakat sok éven keresztül fogják használni, tehát a tervezőknek a lehető legszínvonalasabban kell azokat megalkotniuk. Az információnak is, amennyire csak lehet, hosszú távon kell érvényesnek maradnia. Gyors letöltés, gyors kapcsolat Ha az emberi tényezőket és a számítógépes hálózatot érintő alapvető tulajdonságokat egyaránt figyelembe vesszük, csak egy következtetésre juthatunk: a weboldalak tervezésénél oda kell figyelnünk a gyorsaságra. A meghatározó tervezési kritériumnak tulajdonképpen a gyorsaságnak kell lennie Az oldalméret kicsi, a grafika a lehető legkevesebb kell, hogy legyen, és a multimédiás megoldásokat csak akkor szabad használni, ha biztosak vagyunk abban, hogy segít a felhasználóknak az információ megértésében. A grafika visszafogott használata

nem feltétlenül jár unalmas oldalakkal. Színes táblázatcellákkal és a különböző betűtípusok kreatív (de szolid) használatával is sokat el lehet érni. Különösképpen a stíluslapokkal lehet egy oldal küllemét javítani a letöltés megnehezítése nélkül Ha mégis grafikát kell alkalmazni, próbáljuk meg a különböző képek helyett ugyanazt a képet többször felhasználni; ha ugyanazt a képállományt többször is alkalmazzuk, a megjelenítés gyors lesz, mert a kép már benne lesz a felhasználó helyi gyorsítótárában. Egy oldalon belül a képek újrafelhasználása általában az olyan kisebb, dekoratívabb elemeknél jelent sokat, mint például a gombok, nyilak és ikonok. A képállományok egy kis készletének gyakori újrafelhasználása valójában nem csak a letöltési időt gyorsítja fel, hanem az egész oldalnak is egységes külsőt kölcsönöz. Ha több oldalban gondolkodunk, néha nagyobb képeket is felhasználhatunk újra,

például termékekről készült fényképeket, folyamatábrákat. Ha egy nagyobb képet használunk újból, jó, ha oldalról oldalra megőrizzük a jelentését, hiszen a felhasználók gyakran felismerik őket. Ha két különböző elképzelést akarunk megismertetni, két különböző képet kell használnunk, még akkor is, ha ezt a letöltési idő sínyli meg. Pillantás az első képernyőre A válaszidőt tekintve a legfontosabb az, amikor a felhasználók először látnak meg egy képernyői hasznos információt. Kevésbé számít, ha a teljes oldal letöltése az összes illusztrációval együtt tovább tart, abban az esetben, ha a fel158. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ használó már gyorsan elkezdhet dolgozni az információ egy részével. A gyors kezdő letöltés irányvonalai a következők: • Az oldal felső része akkor is értelmes legyen, ha kép még nem is töltődött le (azaz több

szöveg, kevesebb kép)! • Használjunk ALT-szöveges attribútumokat a képekhez, hogy a felhasználók már azelőtt megérhessék, miről szólnak, mielőtt megjelennek! A legtöbb böngésző, amíg a kép nem töltődik le, az annak fenntartott helyen az ALT-szöveget jelenít meg. A böngészőnek az oldal felső részét gyorsan meg kell rajzolnia, de erre csak akkor lesz képes, ha a megjelenítéshez minden szükséges információ rendelkezésre áll. Összetett táblázatok megjelenítése sokáig tart; jobban járunk, ha a bonyolultabbakat több táblázatban bontjuk Főleg a felső táblázatnak kell hamar megjelennie! Linkelés A hipertext legfontosabb elemei a linkek – ezek kötik össze az oldalakat, s rajtuk keresztül jutnak el a felhasználók a weben új információt tartalmazó helyekre. A hivatkozások három fő formában jelentkezhetnek: • Strukturált navigációs linkek. Ezek a hivatkozások határozzák meg az információs tér felépítését, s

rajtuk keresztül jutnak el a felhasználók a tér más pontjaira. Tipikus példái a főoldalra vagy az aktuális oldalról elérhető aloldalakra mutató linkek. • Az oldal tartalmán belüli asszociatív linkek. Ezek általában aláhúzott szavak (bár lehetnek képek is), és a kiemelt szövegről további információt nyújtó oldalakra mutatnak. • További, „Lásd még”- ajánlójegyzékek. Ezek a hivatkozások segítik a felhasználót, hogy megtalálja, amit szeretetne, ha az aktuális oldal még nem az. A weben történő navigáció nehézségi fokát tekintve a jól megválasztott „Lásd még” – linkek sokat segítenek a felhasználónak. Linkleírások A hiperszöveg-hivatkozások azokba a szövegekbe vannak beágyazva, amelyekre a felhasználó rákattint, hogy kövesse a linket. Nem jó, ha ezek a kiemelt szövegek túl hosszúak, mert a felhasználó, mikor átfutja az oldalt, csak a linkeket akarja megtalálni, és azt akarja tudni, mit lehet egy adott

oldalon csinálni. A hivatkozások hasonló feladatot látnak el, mint a nyomtatott magazinok szövegkiemelései: ezeken akad meg a felhasználó szeme. Ha túl sok szót használunk egy link jelölésére, a felhasználó nem tudja megragadni az értelmét a szöveg gyors átfutása közben. Kizárólag a legfontosabb információt hordozó kifejezéseket szabad hipertext-linkekké alakítani. A webtervezés egyik legfontosabb törvénye, hogy ne használjuk a „kattintson ide” („click here”)-kiemelést! Ennek két oka van. Először is, csak az egeret használó felhasználók kattintsanak, míg a hátrányos helyzetűek vagy azok, akik érintőképernyőt vagy más alternatív eszközt használnak nem kattintanak. Másod159 oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ szor pedig, a „kattintson” és az „ide” szavak aligha hordoznak információt, s ezért nem szabadna őket olyan tervezési elemként használni, amelynek

az a célja, hogy felkeltse a felhasználó figyelmét. Ahelyett, hogy azt írnánk: A kékorrú méhecskéről szóló háttér-információért kattintson ide! Jobb ha az írjuk: További háttér-információ áll rendelkezésre a kékorrú méhecskéről. Fontos a lényeges szavakat tipográfiai eszközökkel kiemelni (dőlt, vagy félkövér betű), de még jobb lenne, ha rendelkezésre állna egy rövid összegzése annak, hogy milyen további információ olvasható még. Linkcímekre vonatkozó javaslatok A linkcímek célja, hogy a felhasználónak segítsenek megjósolni, mi fog történni, ha egy linket követnek. A következő információkat érdemes egy linkcímbe foglalni: • Annak az oldalnak a nevét, ahova a hivatkozás mutat (ha nem azonos a jelenlegi site-tal) • Annak a site-résznek a nevét, ahova a hivatkozás mutat (ha ugyanazon a site-on maradunk, de annak más részére megyünk). • További részleteket arról, milyen információ található a

céloldalon, valamint, azt hogyan kapcsolódik a kiemelt szöveghez, illetve a jelenlegi oldal tartalmához. • Figyelmeztetések a link túloldalán esetleg előforduló problémákra (például „csak regisztrált felhasználóknak”). A linkcímeknek nem szabad meghaladniuk a 80 karaktert, már a 60-at is csak ritkán. Minél rövidebbek, annál jobb Ráadásul nem kell minden linkhez linkcímet rendelni. Ha a kiemelésből és a szövegösszefüggésből egyértelműen kiderül, hova vezet a link, csak a használhatóságát csökkentjük egy linkcím megadásával, hiszen a felhasználónak többlet olvasnivalót adunk. A linkcím teljesen felesleges, ha csak a kiemelésben már úgyis szereplő szöveget ismétli meg. Nem vehetjük biztosra, hogy a linkcím minden felhasználónál ugyanolyan lesz. A hangos böngészők a szöveget nem megjelenítik, hanem felolvassák Különböző böngészők teljesen eltérő módon jelenítik meg a linkcímeket, ahogy azt az ábrán is

látjuk. Végül a linkcímek használata nem jelenti azt, hogy ne kellene a kiemeléseknek és az azokat körülvevő szövegeknek a linkcím nélkül is érthetőeknek lenniük. A felhasználóknak anélkül is meg kell érteniük egy link jelentését, hogy a kurzorral ráállnának. A linkcímet kiegészítő információk közlésére érdemes fenntartani, annál is inkább, mert az elkövetkezendő jó néhány évben még lesznek olyan felhasználók, akiknek böngészője nem jeleníti meg a linkcímeket. Stíluslapok Használjuk egyetlen stíluslapot a site minden oldalához (vagy esetleg néhány célzottat, ha nagyon eltérő igényű oldalaink vannak; például technikai dokumentációnk és marketinges oldalaink)! A stíluslapok használatának egyik 160. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ legnagyobb előnye, hogy miközben a felhasználó a site-on navigál, a látvány végig megmarad. Már régóta ismert

tény, mennyire fontos a nyomtatott kiadványok egységes külleme Teljesen mindegy, hogy egy folyóiratban vagy újságban hova lapozunk, a szöveg és az alapelrendezés ugyanolyan. A weboldalak is ugyanilyen összetartó erejűek, ha az összes oldaluk ugyanahhoz a stíluslaphoz kapcsolódik. Kétféle módon lehet a stíluslapokat használni: • Egy beágyazott stíluslap nem más, mint a weboldal része a kódba írt további sorok formájában. • Egy kapcsolt stíluslap külön állományban helyezkedik el, és minden weboldalnak, ami ezt a stíluslapot kívánja használni, van egy, a stíluslapra mutató hiperszöveg-hivatkozás a fejlécében. Mindig kapcsolt stíluslapokat használjunk, és ne beágyazottakat! Csak akkor fogjuk tudni azt az előnyt kihasználni, hogy a megjelenítést egyetlen változtatással meg tudjuk újítani, ha egy külső állományra hivatkozunk. Ráadásul, ha a stílus meghatározásokat kiemeljük az oldalakból, azok kisebbek lesznek és

gyorsabban lehet őket letölteni. Ha az egész weboldalra egyetlen stíluslapot használunk, azt az állományt csak egyetlenegyszer kell majd letölteni A design szabványosítása stíluslapokkal Minden egyes site összes stíluslapját egyetlen központi tervezőcsoportnak kellene terveznie. Ennek két oka van Először is, mert csak egy központi elrendezés biztosíthatja azt a következetes stílust, ami a stíluslapok használatának fő előnye. Másodszor, mert a legtöbb webes tartalomtervező képtelen jó stíluslapokat írni A stíluslapokat támogató szövegszerkesztőkkel kapcsolatban szerzett tapasztalatok azt mutatják, hogy a szerzők rémségesen szétdarabolják stíluslapjaikat. A stílus hatását a szokványos kiadványszerkesztésre még meglehetősen egyszerű megérteni, hiszen az egyetlen kanonikus kimeneti formát alkalmazó WYSIWYG környezetről van szó. A web azonban, a sokféle támogatott platformnak köszönhetően, nem egy WYSIWYG környezet

Ráadásul a webes stíluslapok egymásba ágyazódnak, azaz a végső megjelenítés megalkotásakor a site stíluslapja beleolvas a felhasználó stíluslapjába. Ezek a különbségek teszik szükségessé, hogy a webes stíluslapokat olyan szakértők tervezzék, aki értik, hogy a megjelenés milyen sokféleképpen különbözhet attól, ami a képernyőjükön látszik. Ahhoz, hogy a stíluslapokat vállalatunknál eredményesen vezethessük be, szükségünk lesz egy olyan aktív térítőprogramra, amely megtanítja a tartalomtervezőket, hogyan használják a központilag meghatározott stíluslapokat. Ne tételezzük fel, hogy valaki, aki ismeri a stíluslapokat használó szövegszerkesztő programot, érti is a stíluslapok koncepcióját és alkalmazásuk lényegét! A kutatások azt mutatják, hogy a legtöbb felhasználó a stíluslapokkal dolgozó szövegszerkesztőjével borzalmas hibákat követ el – részben azért, mert az ismertebb szövegszerkesztők igen

rosszul aknázzák ki a stíluslapok tulajdonságait, részben pedig azért, mert nem könnyű stílusosnak lenni. Ésszerűen járunk el, ha stíluslapjainkat rövid használati utasításokkal látjuk el, amelyek elmagyarázzák a különböző stílusokat és azt is, hogyan és mikor használjuk őket. Rengeteg példát kell megadnunk, ideértve a puszta HTML-kódot (a példákat kivágással és másolással [cut-and161. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ paste] a legkönnyebb használni) és oldalképeket is jól kódolt oldalakról, a legelterjedtebb böngészőkben, több különböző platformon. Az oldalképeket érdemes kattintható kis képecskékké alakítani, hogy a felhasználó rákattinthasson egy-egy olyan effektusra, amit ő is szeretne elérni, és hogy megnézhesse a megfelelő stílus dokumentációját is. Ez különösképpen igaz, ha többféle stílusnak is hasonló a megjelenése, mivel sok-sok hibát

kerülhetünk el, ha elmagyarázzuk a különbséget és azt is, hogy mikor melyiket érdemes használni. Annak ellenére, hogy én a kapcsolódó stíluslapokat és a központi tervezést részesítem előnyben, az egyes oldalak szerzőinek lehetőséget kell kapniuk arra, hogy ha ez elkerülhetetlen, további beágyazott stíluslapokat készíthessenek, ám a szerzőket csak akkor érdemes erre a megoldásra ösztönözni, ha ez feltétlenül szükséges. Mindig előfordulhat, hogy olyan stílusra van szükség, ami nincs benne a központi stíluslapban. Ha sok oldalnak van szüksége ugyanarra a hatásra, azt érdemes hozzáadni a site globális stíluslapjához, de nem szerencsés olyan stílussal megterhelni, amelyik csak egyszer fordul elő. A csak egy lapon előforduló stílusokat inkább ágyazzuk be, mint kapcsoljuk; az adott oldalnak továbbra is a központi stíluslapra kell mutatnia, de saját, beágyazott stílusokkal azt szükség szerint még ismételten

meghatározhatjuk. Ezzel azt érjük el, hogy a központi stíluslapot érintő jövőbeni változások a lehető legnagyobb mértékben kihatnak a módosított oldalra is. A stíluslapoknak biztosan kell működniük Az oldalaknak akkor is látszódniuk kell, ha a stíluslapok a végfelhasználó vagy a használt böngésző miatt nem működnek. Ne használjunk például olyan trükköket, mint ugyanannak a szónak többszöri, kis eltolású ismétlése (árnyékhatás), vagy csak képként beillesztett formában, hiszen az adott stílus nélkül a szöveg zavarossá válik. Elengedhetetlen, hogy stíluslapok nélkül is elfogadhatóan jelenjünk meg az olyan felhasználók érdekében, akik régebbi böngészőket használnak, látáskorlátozottak vagy akiknek böngészőjükben ki kell, iktatniuk a stíluslapok kezelését (különböző hibák miatt, vagy mert az általunk választott stílus ütközik a felhasználó beállításaival). Szerencsére könnyen ellenőrizhetjük,

megfelelünk-e a szabálynak: egyszerűen kapcsoljuk ki a stíluslapokat a böngészőben, és töltsük le újra az oldalt! Van még jó néhány további vezérelv, amit érdemes megfogadni, amikor stíluslapokkal dolgozunk: • Ne használjunk kettőnél több betűtípust (esetleg egy harmadikat olyan speciális szövegekhez, mint amilyen a számítógépkód)! Ne feledjük a kiadványszerkesztés korai szakaszából származó tanulságot: ha csak azért használunk sok betűtípust, mert megtehetjük, olyan hatást keltünk, mint egy újságokból összeollózott, váltságdíjat követelő levél. Általában érdemes egyfajta betűtípust használni a szöveg fő részére, s egy vastagabbat a címeknek. Ne feledjük, hogy lehetséges (sőt, ajánlott), hogy a stíluslap specifikációjában a szövegek egyes típusaira alternatív betűtípusok hosszú listáját adjuk meg. A böngésző az első rendelkezésére álló típust fogja választani a listáról, és minden

oldalon azt fogja használni A felhasználó tehát egyfajta betűtípust fog látni, így a site tipográfiája egységes lesz Fon162 oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ • tos, hogy a betűtípusnevek listáinak sorrendje azonos legyen, mert a böngésző az első rendelkezésére állót fogja választani. Ne használjunk abszolút betűméreteket! Ehelyett a felhasználó beállításaiban szereplő alap-betűmérethez képest adjunk meg minden szöveget! Például egy nagy méretű szöveget „200%”-ként határozhatunk meg, ami azt jelenti, hogy ha a felhasználó a szöveg fő részére 12 pontos betűméretet állított be, akkor a mi szövegünk 24 pontos lesz. Hogy az emberek a nagy vagy kis betűméretet részesítik-e előnyben, sok mindentől függ, ideértve képernyőjük méretét és felbontását, látásukat, hogy saját maguk nézik-e az oldalt, vagy másoknak mutatják-e meg. Több, mint bosszantó

olyan weboldalra látogatni, ahol a szöveg túl kicsi ahhoz, hogy kényelmesen olvasható legyen, és egyenesen felháborító, ha rákattintunk „ a szöveg nagyítása”-gombra és semmi sem történik, mert a betűméretet abszolút pontszámként adták meg Keretek Azok, akik tényleg otthon vannak a szakmában, néhány esetben jó hatásfokkal használhatják a kereteket, bár még a tapasztalt tervezők is azt javasolják, hogy a lehető legritkábban használják őket! Tim Berners-Lee eredeti webelrendezésének egyik zseniális alkotóeleme az volt, hogy több elképzelést egyesített egyetlen ötletben, és ez maga az oldal: • Az információ lenyomata a képernyőn a felhasználó számára. • A navigáció egysége, vagyis ezt látjuk egy hivatkozásra kattintva vagy valamilyen navigációs esemény kiváltásakor, például egy könyvjelző beállításakor. • Egy szöveges cím, amelyet akkor adunk meg, amikor a hálón keresztül információt kérünk le (az

URL). • Az információ tárolóeszköze a szerveren, valamint a szerző szerkesztési egysége, kivéve, amikor beágyazott objektumokat – például képállományokat – is használunk, ilyenkor a szerzőnek egyidejűleg több állományt kell karbantartania. Ez a négy elképzelés gyakorlatilag már annyira egybeforrt, hogy talán nem is különböztetjük meg őket – ez ékes bizonyítéka annak, hogy a web eredeti terve remekül bevált. A web alapvetően arra épül, hogy az oldalak az atomi információ egységei és az egész webet az oldal gondolata járja át. Az eredeti web egyszerűsége hozzájárult könnyű használhatóságához és gyors elterjedéséhez A keretek megsértik a web egységesített modelljét és újfajta adat megtekintési módot vezetnek be, ami nem integrálódott kellőképpen a web többi aspektusával. A frame-ek miatt a felhasználó számára az információ vetülete a képernyőn nem egyetlen navigációs esemény eredménye, hanem azok

sorozatáé. A navigáció a keretekkel nem működik, mivel a navigáció egysége nem egyezik a megjelenítés egységével. Amikor egy felhasználó létrehoz egy könyvjelzőt a böngészőjében, később a könyvjelző használata miatt esetleg nem ugyanazt a képet kapja vissza, mivel a könyvjelző nem tartalmazza a frame-ek állapotát az oldalon. 163. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ A legtöbb tervező úgy használja a kereteket, mintha minden felhasználónak szabványos számítógépe lenne, meglehetősen nagy monitorral. A következő példa az a jellegzetes esetet mutatja be, amikor egy frame-ekre épülő oldal egy nagy képernyőn jól mutat, de egy PDA kis kijelzőjén majdnem használhatatlan. A tervező szerint különösen fontos információ számára a frame-ek általában fenntartanak egy kis helyet a felhasználó képernyőjén. Néha a tervezőnek valóban igaza van, de általában lehetetlen

megjósolni, hogy a felhasználónak mire lesz szüksége, és hogyan tudja a legjobban kihasználni képernyője felületét. A kereteket általában arra használják, hogy a navigációs sáv állandóan látható legyen, de ahogyan a példa is mutatja, a kis képernyőt használók minden rendelkezésre álló helyet lehetőleg tartalommal töltenek ki. Egy egyszerű, frame-ek nélküli oldal nagyobb rugalmasságot biztosít az eltérő felhasználói igények kiszolgálásakor. A jelenlegi keretek alkalmazásával kapcsolatban ezeken az alapvető gondokon túl még sok kisebb is akad. Ezek az elkövetkezendő néhány évben valószínűleg megszűnnek, de most még elég okot adnak arra, hogy a frame-ek használatát a minimumra csökkentsük. Néhány további indok, hogy miért ne használjunk frame-ket: • Sok böngésző nem tudja a keretekkel ellátott oldalakat rendesen kinyomtatni. Igaz, a jelenlegi böngészők semmit sem nyomtatnak ki igazán jól, de a szokványos

oldalakat legalább teljesen kinyomtatják. A frame-ek esetében a nyomtatás néha csak egyetlen frame megjelenését jelenti A görgethető frame-eket tartalmazó oldalak teljes kinyomtatása problémát okozhat Csak a frame látható része jelenjen meg vagy a többi is, ami nagyobb helyet foglal el nyomtatásban, mint a képernyőn? Összefoglalás Az oldaltervezés célja az egyszerűség legyen. A felhasználók ritkán látogatnak azért egy oldalra, hogy a megjelenítésben gyönyörködjenek, inkább a tartalomra koncentrálnak Biztosítanunk kell, hogy az oldal mindenféle különböző platformon megjeleníthető legyen, és a régebbi technológiát használó felhasználók is elérhessék. Ellenőrizzük, hogy egy-egy oldal működik-e kétéves böngészőkkel, pluginekkel és egyéb szoftverekkel is. Abban is biztosnak kell lennünk, hogy az oldal megjelenítés kis monitoron is élvezhető, illetve hogy a válaszidő analóg modemek használatakor is elfogadható

legyen. Néhányan talán úgy gondolják, mindez feleslegesen nagy terhet ró a tervezőkre, hiszen úgyis csak a felhasználók tíz százaléka használ régi szoftvert vagy elavult hardvert. Lehet, hogy ez igaz, de az sem túl bölcs üzleti döntés, ha az ajtónkon kopogtatók tíz százalékát elzavarjuk. 164. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Tartalomtervezés A felhasználók alapvetően a tartalom miatt látogatnak el weboldalunkra. Minden más csak kötelező körítés. A design csak eszköz ahhoz, hogy a felhasználók hozzáférjenek a tartalomhoz Ez olyan, mint történet arról, amikor valaki elmegy megnézni egy színházi előadást. Amikor vége az előadásnak, azt akarjuk, hogy a darabról beszélgessen, és ne arról, hogy mennyire nagyszerűek voltak a jelmezek. Persze, a jó jelmez nagyban hozzájárul ahhoz, hogy az előadás élvezhető legyen, és hogy az író és rendező elképzelései a

színpadon jól jelenjenek meg. De végül is a darab a fontos. Az ergonómiai kutatások szerint a felhasználók kifejezetten a tartalomra összpontosítanak. Amikor egy új oldalra érnek, nyomban az oldal fő tartalmi részét futják át, főcímeket és más jelzéseket keresve, hogy megtudják, miről is szól az oldal. Előbb eldöntik, hogy az ott megjelenített tartalom számukra érdektelen, és csak aztán nézik át az oldal navigációs részét, hogy ötletet kapjanak, merre tovább. A tartalom a legfontosabb! Hogyan írjunk a webre? Amikor a világhálóra írunk, nem csak a tartalmat, hanem a felhasználói élményt is befolyásoljuk, hiszen a felhasználók először a szöveget és a főcímeket nézik meg. A nyelvtanilag helyes mondatok mellett az is fontos, hogy a tartalom jó megfogalmazásával is megfogjuk az olvasókat. A három fő irányelv azzal kapcsolatban, hogyan írjunk a webre, így hangzik: • Legyünk tömörek! Egy nyomtatott anyagban az

ugyanarról a témáról leírtaknak legfeljebb ötven százalékát használjuk a weben! • Úgy írjunk, hogy könnyen áttekinthető legyen! Ne várjuk el a felhasználótól, hogy hosszú, összefüggő szövegeket olvasson el, használjunk inkább rövid bekezdéseket, alcímeket és pontokba szedett felsorolásokat! • Használjunk hiperszöveget egy hosszú szöveg több oldalra tördeléséhez! A negyedik szabály inkább a folyamatot vagy a menedzsmentet érinti: fogadjunk fel webes szerkesztőket! A jó tartalomhoz olyan elkötelezett csapat kell, amely tudja, hogyan kell a webre írni és a tartalmat megjelenítési szabványainkkal összeegyeztetni. Mit ér egy szerkesztő? Vajon milyen követelménye lehet, ha egy intranetes honlapon egy hír főcímének megírásakor megsértjük a rá vonatkozó íratlan szabályokat? Egy 10000 fős cégnél a belső hálózati honlapon egyetlen rosszul megírt főcím közel 5000 dollárba kerül, ennél jóval olcsóbb, ha

megbízunk egy jó honlapszerkesztőt, hogy írja át a főcímet. 165. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Ezt a becslésemet az alábbi feltételezésekre alapozom: Minden dolgozó a szükségesnél öt másodperccel többet tölt el a főcím olvasásával, mivel az nem eléggé magától értetődő. • A rosszul megírt főcím miatt a dolgozó tíz százaléka rákattint a cikkre, noha a hír számukra érdektelen. • Az emberek átlagban harminc másodpercet töltenek el a cikk olvasásával, mielőtt úgy döntenének, hogy visszatérnek, mivel az számukra érdektelen. • A cégnél 10000 dolgozó használja az intranetet. • Egy dolgozó idejének költsége 50 dollár/óra. (Ne feledjük, hogy egy dolgozó idejének költsége jóval nagyobb, mint a fizetése – nemcsak a külön juttatások és a járulékok, hanem a cég állandó költségei miatt is. Emiatt ha valaki 25 dollárt keres óránként, az a cégnek

általában 50 dollárba kerül.) Ez a kis példa arra is rámutat, melyek az ergonómiai kérdésekkel kapcsolatos költségmegtérülés kiszámításának alaptörvényei. Számba vesszük azokat az alkalmakat, amikor az emberek felesleges időt vesztegetnek el a rossz design miatt (vagy ha elektronikus kereskedelemről beszélünk, vásárlók maradnak távol), és megszorozzuk a problémával szembesülő emberek százalékával, valamint az összes felhasználóval és idejük értékével. • Legyenek a szövegek rövidek! Kutatások bizonyítják, hogy képernyőről huszonöt százalékkal lassabban olvasunk, mint papírról. Még azok a felhasználók is, akik nem ismerik ezt az emberi tényezőt kutató vizsgálatot, azt mondják, hogy nem kényelmes a képernyőről olvasni. Megállapíthatjuk tehát, hogy senki sem akar hosszú szöveget a képernyőről olvasni. Emiatt ötven százalékkal csökkenteni kell a szöveget (és nem csak huszonöt százalékkal), mert ez nem

csak az olvasási sebességet, hanem a kényelemérzetet is befolyásolja. Az is tudjuk, hogy a felhasználók nem szeretnek gördíteni: még egy ok arra, hogy az oldalak rövidek legyenek A jövőben meg fog szűnni az a probléma, hogy nehéz a képernyőről olvasni, mivel már feltalálták a 300 dpi felbontással rendelkező monitorokat, amelyekben a szöveg éppúgy olvasható mint a papíron. Az ilyen nagyfelbontású képernyők ma még túl drágák (a kereskedelmi forgalomban kapható legjobb monitorok ma 110 dpi-sek), de csúcsgépekhez már 2002-ben, széles körben pedig öt évvel később használatban lesznek. Állíthatóság Hosszú szövegek olvasása a képernyőn nagyon fárasztó, ez pedig türelmetlenséggel jár, ezért a felhasználók a hosszabb szövegeket nem olvassák el szóról szóra. Ehelyett gyorsan átfutják őket, kulcsszavakat, kulcsmondatokat és számukra érdekes bekezdéseket keresve, s ami nem érdekli őket, azt átugorják Az alábbi

táblázat öt különböző lehetőséget kínál arra, hogyan lehet egy szöveget különböző módon megfogalmazni. A táblázat megmutatja, hogy az egyes variációk az eredetihez képest – amelyet viszonyítási alapként használtunk –, mennyivel növelték a használhatóságot. 166. oldal VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Site verzió Példabekezdés Promóciós szöveg (viszonyítási alap) A legtöbb kereskedelmi weboldalon található „marketinges” stílusban Békés Megyében nagyon sok thermál vízű gyógyfürdő van, amelyek minden évben látogatók tömegeit vonzzák. 1996-ban a legnépszerűbb helyek között volt a Gyulai Várfürdő (435000 látogató), Gyopárosi Fürdő (187000), a Békéscsabai Strandfürdő (120000), a Tótkomlósi Fürdő (56000), a Füzesgyarmati Fürdő (35000) és a Gyomai Fürdő (28000). 1996-ban Békés megyében a hat leglátogatottabb Tömörített szöveg melegvízű

fürdő a Gyulai Várfürdő, a Gyopárosi A viszonyítási alaphoz képest feleannyi szóban Fürdő, a Békéscsabai Strandfürdő, a Tótkomlósi fürdő a Füzesgyarmati Fürdő és a Gyomai Fürdő volt. Békés megye gyógyfürdői minden évben látogaÁttekinthető külső A viszonyítási alap tók tömegeit vonzzák. 1996-ban a legnépszerűbb szövegét használja az helyek között volt áttekinthetőségét elősegí• Gyulai Várfürdő (435000 látotő elrendezésben gató), Scotts Gyopárosi Fürdő (187000), • Békéscsabai Strandfürdő (12000) • Tótkomlósi Fürdő (56000), • Füzesgyarmati Fürdő (35000) ) • Gyomai Fürdő (28000). Békés Megye thermál vízű gyógyfürdői, minden Objektív nyelvezet Inkább semleges, mint évben látogatók tömegeit vonzzák. 1996-ban a szubjektív, ömlengő vagy legnépszerűbb helyek között volt a Gyulai elragadtatott nyelvezetet Várfürdő (435000 látogató), Gyopárosi Fürdő használ (egyébként (187000),

a Békéscsabai Strandfürdő (120000), a megegyezik a viszonyítá- Tótkomlósi Fürdő (56000), a Füzesgyarmati si alappal) Fürdő (35000) és a Gyomai Fürdő (28000). 1996-ban Békés megyében ez volt a hat leglátoKombinált változat gatottabb thermál fürdő: A stílussal kapcsolatos mindhárom módszert • Gyulai Várfürdő alkalmazza: a tömörített • Gyopárosi Fürdő szöveget, az áttekinthető • Békéscsabai Strandfürdő külsőt és az objektív • Tótkomlósi Fürdő nyelvezetet • Füzesgyarmati Fürdő • Gyomai Fürdő Használhatósági javulás (a viszonyítási alaphoz képest) 0 % javulás (ez volt a viszonyítási alap) 58 % javulás 47 % javulás 27 % javulás 124 % javulás Az, hogy a felhasználók gyorsan átfutják az oldalakat, olyan tény, melyet már számtalan webkutató megerősített. Azoknak, akik a webre írnak, el kell ezt fogadniuk, és áttekinthetően kell írniuk. • A cikkek főcímeit rendezzük két vagy akár három

szintbe (egy általános oldalcím alcímekkel és szükség szerint továbbiakkal)! Az egymásba ágyazott címsorok a képernyő felolvasókat használó látáskorlátozottakat is segítik. • Használjunk inkább értelmes, mint „jólhangzó” főcímeket! Miután a felhasználó egy főcímet elolvas, tudnia kell, miről is szól az oldal vagy az adott rész, mert az egész szöveget nem szívesen fogja elolvasni. 167. oldal 167 VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ • • Az egysíkú szöveget érdemes pontokba szedett listákkal és más hasonló elemekkel megtörni. Használjunk kiemeléseket és hangsúlyozást, hogy a fontos szavak odavonzzák a felhasználó szemét! Kiemelésre színes szöveget is használhatunk, a hipertext-linkek pedig szintén feltűnőek, mivel kékek és alá vannak húzva. Minden kiemelő- vagy háttérszínt úgy kell megválasztani, hogy elüssön a linkszíntől, máskülönben a

felhasználó összezavarodik, és esetleg a kiemelt szövegre kattint abban a hiszemben, hogy az egy link. Egyszerű nyelvezet Mivel a webfelhasználók nem szánnak időt arra, hogy hosszú szövegeket olvassanak végig, fontos, hogy minden oldal összefoglalással kezdődjék. A csúcsára állított piramis elvét követve kezdjük a legfontosabb információval! A felhasználónak első pillantásra meg kell állapítania, miről szól az oldal, és hogy az hasznos-e számára. Azok a felhasználók, akik csak átfutnak egy oldalt, a bekezdéseknek gyakran csak az első sorát olvassák el. Ebből arra következtethetünk, hogy az összefoglaló mondatok ugyanannyira fontosak, mint a „bekezdésenként egy gondolat” szabálya. Ha két témát tárgyalunk egyetlen bekezdésen belül, sok felhasználó el sem jut a másodikig, ha az első nem ragadta meg a figyelmét az oldal átfutása közben. Használjunk egyszerű mondatszerkezeteket! A nyakatekert fogalmazás és az

összetett szavak a hálózaton még nehezebben érthetők. Kerüljük a metaforák használatát is, főleg a főcímekben! A felhasználó esetleg szó szerint fogja érteni. Oldaldarabolás Rövid szövegeket használjunk, persze anélkül, hogy kockára tennénk a tartalmi mélységet – helyezzük el az információt több csomópontba, melyekre egyenként linkeket helyezünk el. Egy-egy oldal rövid lehet, mégis a hipertér egésze tartalmazhatja mindazt az információt, amelyet egyetlen nyomtatott oldalon lehetetlen lenne elhelyezni. Hosszú és részletes háttér információt más oldalakon is megjeleníthetünk, és az olvasók kisebb csoportjának érdekes információt is elérhetővé tehetjük linkekkel, anélkül, hogy a többséget büntetnénk velük. A hipertext nem egy hosszú lineáris szöveg több oldalra tördelésére való. Ha több kisebb részt kell letöltenünk, lassabban olvasunk és a nyomtatás is nehezebb. A hipertext helyes használata nem egy

összefüggő szöveg „folytatás a 2 oldalon”-típusú szétdarabolása, tördeljük inkább az információt összefüggő, egyegy témáról szóló részekre. Az elv az, hogy hagyjuk meg a felhasználónak a szabad választás lehetőségét, hogy csak azokat az oldalakat kelljen letöltenie, amelyek érdeklik. A hiperszöveg-szerkezetnek tehát egy felhasználói felmérésen kell alapulnia. Minden egyes hipertext-oldalt a csúcsára állított piramis elve alapján kell megírni. Kezdjük egy rövid összefoglalóval, hogy a felhasználók még a szöveg elolvasása előtt képet kapjanak annak tartalmáról, aztán fokozatosan térjünk rá a 168. oldal 168 VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ részletekre! Az legyen a vezérelv, hogy bármikor hagyja is abba az olvasást a felhasználó, már ismerje a legfontosabb információkat. A navigációs oldalak gördítésével az a baj, hogy nem látszik egyszerre az összes

lehetőség. Egy gördíthető oldalnak mindig lesz olyan része, ami nem látszik, így a felhasználóknak anélkül kell dönteniük a következő lépésről, hogy közvetlenül össze tudnának mindent hasonlítani. A felhasználó memóriájának terhelése mindig ront a használhatóságon, és növeli a hibalehetőséget. Mivel a céloldalak főleg tartalmat szolgáltatnak és kevesebb navigációs lehetőséget tartalmaznak, kevésbé érzékenyek a felhasználók gördítési hajlandóságára, int a navigációs oldalak. Egyes kutatások szerint, ha egy felhasználó elérkezett egy céloldalra, és az első oldalt ígéretesnek találta, néhány képernyőnyit valószínűleg végiggördít, jóllehet a felhasználók szinte soha nem fognak nagyon hosszú oldalakat végiggördíteni. Ahogy már korábban említettem, a webes szövegeknek rövideknek kell lenniük Oldalcím Az oldalcím jó megválasztása azért fontos, mert általában ezzel utalunk az oldalra. Az

oldalcímeket használjuk sok navigációs menüben, mint amilyen a könyvjelző- vagy az előzménylista is. Az oldalcímek sokszor szövegösszefüggésükből kivéve jelennek meg, tehát fontos, hogy elég szóból álljanak ahhoz, hogy megálljanak a saját lábukon, amikor a felhasználók egy menüben vagy egy keresés eredménylistájában találkoznak velük. Egy oldalcím a tartalom nagyon rövid összefoglalása, ezért a napnál is világosabbnak kell lennie. Csak 40-60 karakterünk van, hogy elmagyarázzuk az embereknek, mit is fognak találni oldalunkon. Ha a cím nem teszi egyértelművé, miről is szól az oldal, nem fogják megnyitni. A különböző oldalaknak eltérő címeket kell adnunk. Meglehetősen kellemetlen, mondjuk, hét ugyanolyan című oldalt meglátogatni, majd megpróbálni visszamenni az egyikre az előzménylista alapján. Ha egy ilyen site-on több oldalt könyvjelzővel jelölünk meg, az halálbiztosan használhatósági problémákat okoz, mivel

a könyvjelző/kedvencek menü több azonos tételt fog tartalmazni, s ezek eltérő eredménnyel járnak. Végül érjük el, hogy a címek a lehető legjobban átláthatóak legyenek! Ez a gyakorlatban azt jelenti, hogy helyezzük az információt hordozó kifejezéseket a cím elejére, és lehetőleg egy olyan szóval kezdjük, ami megfelel a felhasználók igényeinek, amikor átfutnak egy címeket tartalmazó menüt vagy listát. Klasszikus hiba olyan címet adni, mint az „Üdvözlöm az XY cégnél”. Sokkal jobban tennénk, ha az oldalt csak „XY”-nak hívnánk Hogy még inkább megkönnyítsük a gyors megértést, hagyjuk ki a névelőket (Egy, A, Az) a címek elejéről! Ez azért is nagyon fontos, mivel néhány lista ábécé-rendbe sorolja a címeket. Nem kell, hogy a címek teljes mondatok legyenek, inkább hirdetési szövegekre hasonlítsanak. 169. oldal 169 VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Oldalcímek

írása Ha mások írásaiból készítünk listát, majdnem mindig jobb újraírni a főcímeket. Az online-címekkel szembeni elvárások teljesen mások, mint azok, amiket a nyomtatásban megjelenítőkkel szemben támasztanak, mivel máshogy használják őket. A két fő különbség a következő: • Az online-címek gyakran jelennek meg szövegösszefüggésből kiragadva, akár egy cikklista részeként, találatként vagy keresőprogramban, egy böngésző könyvjelző menüjében vagy más navigációs eszközben. Ezek közül a megjelenési módok közül néhányból teljesen hiányzik a szövegösszefüggés. A keresőprogramok találatai bármely szabadon választott témához kapcsolódhatnak, vagyis a felhasználó nem támaszkodhat semmilyen háttér információra a cím értelmezésekor. • Néha még akkor is, amikor a főcím a hozzá kapcsolódó tartalommal együtt jelenik meg. Elég nehéz a rendelkezésre álló adatokból elegendőt megtudni, mivel egyrészt

nehéz hálózati módon olvasni, és az egy pillantásra befogadható információ mennyisége is korlátozott Nyomtatásban a főcím szorosan összekapcsolódik a fotókkal, hasábokkal, alcímekkel és az egész szöveggel, és ezek egy pillantás alatt értelmezhetők. Az interneten ennél sokkal kevesebb információ látható az ablakban, és még azt is nehézkes és kényelmetlen olvasni, az emberek gyakran el is tekintenek ettől. Miközben a felhasználók szeme végigszalad egy honlap cikklistáján vagy egy újság oldalán, gyakran csak a kiemelt főcímeket nézik meg, az összefoglalásokat pedig átugorják. Ezek az eltérések megkövetelik, hogy a főcím megálljon a saját lábán és önmagában is értelmes legyen akkor is, ha a tartalom nem áll rendelkezésre. Persze a felhasználók akár rá is kattinthatnak a főcímekre, hogy a teljes cikkhez hozzáférjenek, de ahhoz túl elfoglaltak, hogy ezt a weben található minden főcímnél megismételjék.

Szerintem a felhasználókat hamarosan úgy el fogják árasztani az e-mailek, hogy olvasatlanul törölni fogják azokat, amelyek tárgya számukra nem értelmezhető. Ha mások írásaiból készítünk listát, majdnem mindig jobb újraírni a főcímet. Most még nagyon kevesen tudják, hogyan is kell olyan online-főcímet írni, ami akkor is érthető, amikor valahol máshol jelenik meg a weben. Tehát ha jobb szolgáltatást akarunk nyújtani, magunknak kell elvégeznünk a munkát. A webes főcímek írásának irányelvei a következők: • Magyarázzuk el a felhasználó számára érthetően, miről is szól a cikk. A mikrotartalomnak a makrotartalom ultrarövid kivonatává kell válnia. • Fogalmazzunk egyszerűen: csak semmi szójáték, „agyafúrt” vagy „okoskodó” főcím! • Kerüljük az olyan beugratásokat, melyekkel megpróbáljuk rávenni az embereket, hogy kattintsanak hozzánk, hogy megtudják, miről is szól a cikk. A felhasználók már túl

sokszor jártak pórul, amikor kíváncsiságból megvárták, hogy egy oldal letöltődjön, ahelyett, hogy előre tudták volna, mire számíthatnak. • Hagyjuk ki a bevezető névelőket (Egy, A, Az) az e-mailek tárgyában és az oldalcímeknél (de az oldalba ágyazott főcímeknél tartsuk meg őket)! Mi170. oldal 170 VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ • • nél rövidebb a mikrotartalom, annál könnyebben átlátható, ráadásul a listák gyakran ábécé-rendbe vannak szedve, és ki akarná, hogy az ő címe is az A betűnél legyen felsorolva, az összes többi A vagy Az kezdetű oldallal. Az első szó legyen fontos és tartalmas, hogy az ábécé rendbe jobb helyet foglaljon el, és megkönnyítse az átláthatóságot. Kezdjük például a cég vagy egy személy nevével, illetve a cikkben tárgyalt fogalommal! Ne kezdjük minden oldal címét ugyanazzal a szóval, mert egy lista gyors átfutásakor nehéz

megkülönböztetni őket! Multimédia A multimédia egyre népszerűbbé válik a weben, egyre több animációs, videós vagy audiós bejátszást támogató technológia jelenik meg, melyek kiegészítik a hagyományos szövegeket és képeket. Ezek a médiák új megjelenítési lehetőségeket hordoznak, de legyünk mértékletesek! A multimédia zabolátlan használata olyan felhasználói felületeket eredményez, melyek összezavarják a felhasználót és megnehezítik számára az információ megértését. Válaszidők Sok multimédia-elem nagyméretű, ezért letöltése a legtöbb felhasználó által alkalmazott borzasztóan kis sávszélesség miatt hosszú időt vesz igénybe. Ezért azt javaslom, hogy a fájl formátumát és méretét a link után zárójelben tüntessük fel, valahányszor olyan állományra mutatunk, amelynek letöltése a felhasználóink többsége által alkalmazott sávszélesség mellett tíz másodpercnél tovább tartana. Ha nem tudjuk,

hogy látogatóink milyen sávszélességet használnak, készítsünk róla felmérést, mivel ez az információ más tervezési kérdéseknél is fontos. Ma az otthoni felhasználók általában 56 Kbps sebességgel rendelkeznek, ami azt jelenti hogy az 50 KB-nál nagyobb állományoknál jelezni kell a méretet. A munkahelyi felhasználóknak általában nagyobb sávszélességük van, de a 200 KB-nál nagyobb állományokat azért érdemes megjelölni. Ezenkívül adjuk meg a lejátszási időt és – amennyiben nem szabványos – a fájl formátumát is. Mielőtt a felhasználók úgy döntenek, hogy egy hosszú multimédiás letöltésbe kezdenek, pontosan tudniuk kell, mit kapnak. Nem fognak valamire csak azért rákattintani, mert az letölthető, hiszen manapság annyi minden van már a weben. Helyezzünk el minden multimédia-tárgyból valamilyen előzetest sima HTML-oldalakon! Videók esetében általában egy-két állókép megteszi. Audió és videó esetében

egyaránt hasznos, ha egy rövid összefoglalót írunk arról, mit láthat vagy hallgat a felhasználó. 171. oldal 171 VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ Képek és fényképek A weboldalakon elhelyezett grafikai elemek mennyiségét érdemes a minimumra csökkenteni, mivel letöltésük rettenetesen hosszú időt vesz igénybe. Az indokolatlan grafikának nincs helye, a képként megjelenő szövegeket is ideértve (kivéve az olyan képaláírásokat, melyek egy üzleti grafika szerves részeit alkotják, és mint ilyenek, a képfájl részei). A felhasználók viszont fényképeket akarnak látni a megvásárlandó termékről, hiszen nem tudják megérinteni és érzékelni azt. Az életrajzi oldalon is jobb, ha szerepel egy fénykép vagy szöveg az illetőről. Vannak olyan esetek is, ahol a régi mondás, miszerint „egy kép felér ezer szóval” annyira odaillő, hogy még annál is helytállóbb, miszerint „egy kép

letöltése felér kétezer szóval”. Hogy feloldjuk az ellentmondást e között a két alapelv között, használjuk ki a hiperszöveg webes lehetőségeit! A magasabb szinten elhelyezkedő oldalak tartalmazzanak minél kevesebb képes illusztrációt, mivel ekkor még a felhasználó nem mutatott érdeklődést egyetlen objektum iránt sem, amelyet érdemes lenne megjeleníteni. Aztán, ahogy a felhasználó a linkeket követve egyre konkrétabb oldalakra jut, egyre több képet használhatunk. Egy termékről szóló főoldal csupán egy kis képet tartalmazzon a termékről magáról, de jobb, ha az oldal nagyobb része csak szövegből és táblázatokból áll. Ha a felhasználó tényleg érdeklődik a termék iránt, a hivatkozásokat követve további fényképekhez juthat el. Ezeknek a képeknek már elég nagyoknak kell lenniük ahhoz, hogy elég részlet látható legyen rajtuk, és így segítse a felhasználót, hogy eldönthesse, meg kívánja-e vásárolni.

Képkicsinyítés Miniatűr képeket a grafikai programok átméretező parancsát használva hagyományos módon készítünk. Sajnos, a kicsinyítés során a kép olyan apró lesz, hogy a részletek elvesznek, és túl zsúfolt lesz ahhoz, hogy felismerhető legyen. Körbevágással megőrizhetünk bizonyos részleteket, de ennek az ára, hogy elvész a kép egészéből adódó összefüggés. Javaslom, hogy használjuk a körbevágás és kicsinyítés kombinációjából létrejövő új technikát, melyet én lényegkiemelő képkicsinyítésnek hívok. Például ahhoz, hogy egy kép eredetijének tíz százalékos miniatűr változatát kapja, először harminckét százalékra csökkentem körbevágással, majd ezt harminckét százalékára lekicsinyítem. A végső kép így az eredeti 032 x 032 = egytized része lesz Animáció A mozgóképek lefoglalják az ember periférikus látását. Ez a túlélési ösztön még azokból az időkből származik, amikor

életbevágóan fontos volt, hogy észrevegyük a kardfogú tigrist, mielőtt az hátba támadhatott volna. 172. oldal 172 VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Manapság a tigrisektől már nem kell annyira félni, de ha valami megmozdul a periférikus látómezőben, az még mindig leköti az ember figyelmét. Hihetetlenül nehéz az oldal közepén lévő szöveg olvasására összpontosítani, ha van egy forgó logo a felső sarokban. Az animációknak megvan a helyük a webtervezésben, s megfelelő használatukról később szó is esik ebben a részben, de általában az a legjobb, ha a használatukat minimálisra csökkentjük. Előbb tegyük fel magunknak a kérdést, hogy mondanivalónkat nem tudnánk-e ugyanúgy kifejezni egy nem animált grafikával. Ha a válasz igen, akkor szabaduljunk meg az animációtól! Másrészt sose hagyjuk az animációkat végtelen ciklusban futni, egy pár kör után állítsuk le őket!

Néhány felhasználó úgy gondolja, hogy az animációk dögösen néznek ki, és jelzik, milyen sok munkát fektettek a site megtervezésébe. Az animációk így ugyanazt a funkciót látják el, mint a bankokban a márványoszlopok: látványosan kiemelik a jólétet és a bőséget. A legtöbb felhasználót mégis idegesítik Különösen igaz ez a mozgó szövegekre és a képernyőn keresztbe gördülő feliratokra, ezeket majdnem minden felhasználó utálja. Az egyik tesztfelhasználó azt monda: „A tapasztalat megtanított rá, hogy ne olvassam el a futó szövegeket, mert sosem tartalmaznak hasznos információt”. Tulajdonképpen jobb is, ha egy mozgó szöveg nem hordoz fontos információt, hiszen nehezen olvasható és mindig van olyan része, amely éppen nem látható. A futó szöveg olyan interakciós technika, amelyet a korai távírógépek korlátai tettek szükségessé, hiszen azok csak arra voltak képesek, hogy egy szalagfolyamot ontsanak ki magukból. Az

animáció hét célra használható, ezeket a következő oldalakon különkülön részletesebben tárgyaljuk: • Átmenetek folytonosságának bemutatása. • Átmenetek dimenzióinak jelzése. • Időbeli változások illusztrálása. • A kijelző megsokszorozása. • Grafikai ábrák gazdagítása. • Háromdimenziós struktúrák megjelenítése. • Figyelemfelkeltés. Átmenetek folytonosságának bemutatása Ha valaminek két vagy több állapota lehet, az ezek közötti átmenet a felhasználó számára egyszerűbben érthető, ha animációval jelenik meg ahelyett, hogy csak a végállapotokat látná. Egy animált átmenet segíti a felhasználót, hogy érzékszerveivel végigkövesse a különböző alrészek közötti hozzárendelést ahelyett, hogy megismerő úton kellene kikövetkeztetnie azokat. Nagyszerű példa erre az első Java programozási verseny győztese, aki úgy bizonyította be a Pitagorasz-tételt, hogy azt a mozgást animálta, amit a négyzetek

és háromszögek végeznek. Így érzékeltette, hogy a két terület egyenlő. Átmenet dimenzióinak jelzése Alkalmanként használhatunk ellentétes animált átmeneteket valamilyen navigációs dimenzió mentén történő oda-vissza mozgás jelölésére. Például azt, hogy 173. oldal 173 VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ hogyan nézünk végig néhány tárgyat, ábrázolhatjuk jobbról balra siklással az előre lapozásnál (olyan nyelvnél, amelyben balról olvasunk), míg a visszalapozást egy ellentétes animáció érzékeltetheti (balról jobbra siklás). Ha a felhasználók merőlegesen mozognak a lapok között, az átmenetet más animált effektusok jelölhetik. Például egy hipertext-link követését egy lábjegyzethez jelölhetjük „lefelé” animációval, míg a hipertéren keresztül, más tárgyakhoz történő átrepülést „kinyíló írisz”-animációval. Sok felhasználói felületen

használják a ráközelítést annak jelzésére, hogy egy új objektum egy másikból „nőtt ki” (például egy ikonra kattintáskor egy részletes nézet vagy tulajdonságlista), vagy a távolítást arra, hogy egy objektumot bezárunk vagy lecsökkentünk. Egy kis tárgyból a nagyításba történő mozgás egy navigációs dimenzió, s a visszaközelítés, ahogy a nagyítást becsukjuk, ugyanannak a dimenziónak ellentétes iránya. Időbeli változások illusztrálása Mivel az animáció idővel változó megjelenítés, egy – az – egyhez hozzárendelés biztosítható olyan jelenségekhez, amelyek idővel változnak. Az esőerdők kiirtását illusztrálhatjuk például egy térképpel, amelyen az esőerdők területének időbeli változását animáljuk. A kijelző megsokszorozása Az animáció használható több információs objektum egy térben való megjelenítésére is. Tipikus példa egy kliensoldali imagemap18, ahol ha a kurzor különböző

hipertext-linkekhez ér, felugró magyarázatok jelennek meg. Az aktív területeket vibrálással jelezhetjük vagy úgy, hogy „menetelő hangyákkal” vesszük őket körbe. Mint mindig, az objektumok csak a megfelelő esetben mozoghatnak, például ha a kurzor fölöttük van. Grafikai ábrák gazdagítása Vannak olyan információtípusok, amelyeket könnyebb elképzelni mozgó, mint álló képpel. Az ikontervezésnél mindig egyszerűbb tárgyakat (egy doboz), mint történéseket (képpontok eltávolítás) illusztrálni, de az animációval mindenféle változtató műveletet tökéletesen illusztrálhatunk. Egy kísérletben Ron Baecker és kollégái néhány ikon megértését animálásukkal 62 %-ról 100 %-ra növelték. Egy ikon természetesen csak akkor legyen animált, amikor a felhasználó külön érdeklődést mutat iránta (például a kurzort odavezeti, vagy egy másodpercnél tovább nézi, ha ez mérhető). Rendkívül zavaró lenne, ha az összes ikon

egyszerre mozogna Háromdimenziós struktúrák megjelenítése Mivel a számítógép képernyője kétdimenziós, a felhasználók egy háromdimenziós struktúrát egyszerű illusztrációval sosem lesznek képesek teljesen megérteni, bármilyen jó legyen is az. Az animáció hangsúlyozhatja a tárgyak háromdimenziós természetét, és megkönnyítheti, hogy a felhasználó el tudja képzelni térbeli struktúrájukat. Az animációnak nem kell feltétlenül körbeforognia a tárgyat, általában elég, ha lassan, egy kicsit előre-hátra mozgatja. A mozgás akkor jó, ha lassú, mert így a felhasználó megfigyelheti a tárgy felépítését. 174. oldal 174 VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ A háromdimenziós tárgyakat mozgathatják a felhasználók is, de olykor jobb, ha a tervező előre meghatározza, hogyan lehet a legjobban a mozgást animálni a test optimális megértéséhez. Ez az előre meghatározott

animáció akkor jöhetne elő, amikor a felhasználó a tárgyra áll a kurzorral. Ezzel szemben a felhasználó által irányított mozgatáshoz a felhasználónak először meg kellene értenie, hogyan irányíthatja a tárgyat, ami bizony eleve nehéz feladat egy olyan kétdimenziós irányító eszközzel, amilyen a legtöbb számítógéphez használt egér. Legyünk őszinték: a 3D sosem viszi sokra a felhasználói felületek terén, amíg nem lesz igazi 3D-s irányító eszközünk Figyelemfelkeltés Végezetül vannak esetek, amikor az animáció azon képessége, hogy a felhasználó vizuális éberségét leköti, a felhasználói felület előnyévé válhat. Ha a cél az, hogy a felhasználó figyelmét a sok közül egyetlen elemre irányítsuk, vagy hogy friss információra hívjuk fel figyelmét, egy animált főcím jó szolgálatot tehet. Animált szöveget mindig csak egyszeri animációval használjunk (például jobbról beúszó szöveg, karakterenként vagy

folyamatosan növekedve) és sosem folyamatossal, mivel a mozgó szöveget az állónál jóval nehezebb elolvasni. A kezdeti animáció vonzza oda a felhasználó tekintetét az új szövegre, most már hagyjuk békén olvasni, és ne zavarjuk többé! Első ránézésre úgy tűnhet, bármilyen animáció létjogosultságát igazolni tudjuk azzal, hogy „figyelemfelkeltő” célt szolgál. A jogos és a helytelen figyelemfelkeltés közti különbség attól függ, hogy értéket hordoz-e az animáció egy tipikus felhasználó számára Elemezzük az interakciót egy átlagos felhasználó szemszögéből, hogy megállapíthassuk, vajon a felhasználót egy általános, vagy gyakori teendő közben segíti-e, ha valamire felhívják a figyelmét. Másképp fogalmazva nem helyes öt hirdetésnek felugrania, hogy „Nézz ide!”, ez csak a hirdetőnek értékes, a felhasználónak nem. A felhasználói szemszögből vett értékre példa lehet egy személyes site egy középiskolai

osztályképpel, rajta „Az én középiskolai fotóm”-szerű linkkel. Ha a felhasználó követné a linket, ott lehetne egy animált kör vagy nyíl, amely a szerzőre mutatna a képen. Egy mások példa lehetne erre egy oldal, amin sok minden van, de a közepén egy új, vagy más okból kifejezetten fontos cikk található. Ebben az esetben jól tesszük, ha lehet a felhasználó figyelmét egy nem végtelenített animációval rátereljük. Általában persze az oldalt úgy érdemes megtervezni, hogy a fontos tartalom felülre kerüljön – így a legtöbb oldalnál nincs is szükség ilyen animációra –, de néha az információ logikai struktúrája bizonyos sorrendet szab meg. Más esetekben figyelembe véve – a felhasználói beállításokról vagy érdeklődési körről rendelkezésre álló információk alapján felállítható fontossági sorrendet – a felhasználó nem venné észre, ha animációval nem hívnánk fel rá a figyelmét. Videó A

sávszélesség korlátai miatt a weben a videofelvételek használatát jelenleg még érdemes csökkenteni. Később majd szélesebb körben lesz használatos, de az 175. oldal 175 VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ elkövetkező néhány évben a legtöbb videó rövid és kis képernyős lesz, gyenge képminőséggel és elviselhetetlenül lassú képfrissítéssel. Ezen korlátozások miatt a videónak inkább a szövegek és képek kiegészítéseként, mint egy weboldal fő tartalmaként kell szolgálnia. Jelenleg a videó az alábbiakra alkalmas: • Televízióműsorok, filmek vagy más, nem számítógépes média reklámozására, amelyek hagyományos előzeteseket használnak hirdetésre. • Arra, hogy képet alkothassunk a beszélő személyiségéről, sajnos a legtöbb nagyvállalati vezető sokkal kevésbé átütő személyiség, mint mondjuk Janeway kapitány a Star Trek-ből, így nem feltétlenül jó ötlet egy

beszélő fejet bemutatni, hacsak a videoklip nem ad tényleg valami többletet a felhasználó élményhez. Ha valaki videót lát, nyomban azt hiszi, hogy az a „tévé”, s ha valaki nem olyan jó a képernyőn, mint Tom Brokaw, már nem lesz érdekes. • Mozgó dolgok bemutatására, például egy balettről készült összeállításra. A fizikai termékek ismertetői, mint amilyen egy aprópénzszámláló, szintén jók filmen, ugyanakkor a szoftvertermékek demói a legtöbbször jobban mutathatók be teljes méretű képernyőábrákkal, amelyeken a jövendő vásárló a tulajdonságokat hosszasan tanulmányozhatja. A weben a legtöbb videóval kapcsolatban manapság az a fő gond, hogy használati értékük túl alacsony. A felhasználókkal végzett kísérletek azt mutatják, hogy a felhasználók televíziós minőséget várnak, valahányszor videót látnak s hogy nagyon türelmetlenek lesznek, mihelyt a minőség nem felel meg ezeknek az elvárásoknak. A videóval

(és a rögzített beszéddel) kapcsolatban egy másik meggondolandó dolog az, hogy más országbeli és halláskárosult felhasználók számára nehézséget okozhat. Van, aki egy írott szöveget megért az idegen nyelven, mivel elég ideje van, hogy saját tempójában olvasson, és minden ismeretlen szót megnézhet a szótárban. Ugyanakkor mindig nehezebb a beszéd megértése, ha a beszélő flegmán vagy egyszerűen csak túl gyorsan beszél, tájszólása van, esetleg zavaró a háttérzaj. A rossz hangminőség csak nehezíti a beszéd megértését, tehát hangalámondás rögzítésekor ajánlatos első osztályú berendezéseket, illetve gallérra csíptethető mikrofonokat használni. E problémák bevett megoldása a feliratozás, de mint az ábrákon látható, a weben ez külön figyelmet érdemel. Háromdimenziós grafika Majdnem mindig jobb a két dimenzió (2D), mint a három (3D), hiszen az ember nem béka. Ha békák lennénk, s szemünk a fejünk két oldalán

lenne, akkor talán más lenne a helyzet, de nekünk, embereknek a szemünk az arcunkba lapul s előrefelé néz. Az evolúció a homo sapiens-t a szavannai vándorlásra – sík területen való mozgásra – s nem fák közti ugrálásra képezte ki. Ma ez az evolúciós egyoldalúság azon is felmérhető, hogy hányan vezetnek autót, illetve helikoptert: 2D-navigáció (a földön) a 3D navigációval (a levegőben) szemben. A 3D használata számítógépen számos nehézséghez vezet: 176. oldal 176 VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ • • • • • A képernyő és az egér is 2D-s eszközök, így igazi 3D-re csak úgy tehetünk szert, ha fejünkre idétlen készüléket, egerünkre drága szárnyakat szerelünk. Bonyolult dolog a jelenleg legelterjedtebb módszerekkel 3D-s térben mozogni, mivel azokat eredetileg 2D-s mozgatásra (például a húzás és gördítés) alakították ki. A felhasználónak nem csak

magára a modellre, hanem a 3D-ben való navigálásra is külön oda kell figyelnie; a repülés, közelítés/távolodás stb. külön irányítása megnehezíti a felhasználó elsődleges feladatát A gyenge képernyőfelbontás miatt a távoli objektumokat képtelenség elegendő részletességgel megjeleníteni ahhoz, hogy felismerhetőek legyenek; a háttérben található feliratokat pedig nem lehet elolvasni. A 3D-hez szükséges szoftverek általában nem szabványosak, sokszor lefagynak, s további letöltést igényelnek (amit a felhasználók nem szeretnek kivárni). A 3D helytelen használata A legtöbb absztrakt információs tér nem válik be 3D-ben, mivel az nem fizikai jellegű. Ezeknek a tereknek tényleg 100 dimenziójuk van, így egy információs tér 3D-s megjelenítése 97 dimenzió elvetését jelenti 98 helyett: nem nagy eredmény a felhasználói felület bonyolultságához képest. Konkrétan: egy hipertérben (amilyen egy website) történő 3D-s

navigáció sok esetben zavaró s a felhasználók gyakran el is vesznek benne. A háromdimenziós navigáció jól fest egy bemutatóban, de csupán azért, mert ott nem magunk navigálunk a hipertérben, vagyis nem kell emlékeznünk rá, mi van mögöttünk, vagy azzal törődnünk, milyen távoli objektumokat takarnak el a közeliek. (Aki a bemutatót tartja, tudja, mi hol van. A bemutatók első törvénye: ne próbáljuk meg a rendszert bármire használni! Egyszerűen egy előre elpróbált forgatókönyv szerint haladjunk, s ne nyúljunk semmihez, ami lefagyhat!) Ugyanígy kerüljük az olyan virtuális valóságos trükköket (mint amilyen például egy virtuális bevásárlóközpont), amik a fizikai világot szimulálják! A web-design célja az, hogy jobb legyen a valóságnál. Ha a felhasználókat „a bevásárlóközpontban tett sétára” invitáljuk, felhasználói felületünkkel éppen céljuk elérésében akadályozzuk őket. A valóságban az üzletek között

kell mászkálni, míg a hálón egyenesen átlépünk a kibertéren keresztül a célba egy olyan navigációs elrendezés segítségével, amely a felhasználó kényelmét szolgálja (persze ha jó az információs felépítés). Mikor használjunk 3D-t? A 3D használata helyénvaló lehet, ha olyan tárgyakat kell megjeleníteni, amelyeket fizikai valójukban kell értelmezni. Például: • A sebészek megtervezik, hol vágjanak fel egy beteget. A test 3D-s, a daganat helye 3D-s, melyet egyszerűbb egy 3D-s modellből megérteni, mint egy 2D-s röntgenképről. 177. oldal 177 VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ • A műszerészek megterveznek egy alkatrészt, ami pont beleillik egy másikba. • Vegyész kutatók próbálják megérteni egy molekula alakját. • Egy belső tér elrendezését szemléltetik. Előfordulhat, hogy egy fizikai tárgyat jobb 2D-ben megjeleníteni. Egy súgórendszer, ami azt magyarázza el, hogyan

cseréljünk ki egy winchestert egy számítógépházban, jobban értelmezhető egy olyan nézőpontból készült sematikus ábráról, ami éppen a megfelelő helyet emeli ki, vagy ha egy olyan filmet nézünk meg, amelyen egy szerelő éppen kiveszi a régit, és behelyezi az újat. A videó a képeket tekintve 2D-s, de az események kihangsúlyozásához hangokat is használ (például egy megnyugtató kattanást, amikor a lemez biztosan a helyére illeszkedik.) A hangok egy újabb dimenziót szolgáltatnak anélkül, hogy navigálnunk kellene, mivel a videóval szinkronban vannak. Az éppen három attribútummal rendelkező elvont adathalmazokat akkor egyszerűbb megérteni 3D-s megjelenítésben. De először próbáljuk meg leegyszerűsíteni a problémát, és kísérletezzünk 2D-s nézettel, ideértve a több táblázat képregényszerű elrendezését, amit Edward Tufte olyannyira kedvel A mennyiségi információ vizuális megjelenítése (The Visual Display of

Quantitative Information) című könyvében. Végül, a szórakoztató alkalmazás és néhány oktató felület hasznot is húzhat a 3D mulattató, figyelemlekötő tulajdonságából – ezt számtalan lövöldözős játék bizonyítja. Ne feledjük azonban, hogy a játékok esetében a 3D azért működhet olyan jól, mert a felhasználók a szórakozástól eltekintve semmilyen különösebb célt nem akarnak elérni. Triviális lenne megtervezni egy, a DOOM-énál is jobb felületet, ha a cél csupán a rossz fiúk lehető leggyorsabb lelövése lenne. Ide nekem egy 2D-s térképet a területről az ellenséges csapatokat jelölő ikonokkal, és én az ikonokra kattintva lebombázom őket! Ennyi. A játéknak pár másodperc alatt vége, és mindig a jó fiúk győznek. A Pentagonnak jó lenne egy ilyen elrendezés, de játéknak dögunalom. Összefoglalás A felhasználóknak a tartalom a legfontosabb, ezért kapcsolódnak a hálózatra, és ez az első, amit egy új oldalon

keresnek. A minőségi tartalom az a webergonómiát meghatározó két legfontosabb elem egyike. A másik, hogy vajon a felhasználó megtalálja-e az oldalt, amit keres (ez, vagyis a site-design, a következő fejezet témája). A weben a „minőségi tartalom” nem ugyanazt jelenti, mint a hagyományos médiában. Az előállítás minősége viszonylag kevésbé fontos; a jó fogalmazás és a gyönyörű képek természetesen értékelendők, de többé már nem meghatározó jellemzői a minőségnek. Ehelyett, amikor a felhasználó a tartalmat bírálja, a fő kérdések így hangoznak: „Mi van itt számomra?”, „Hogyan segít megoldani a problémámat?”. Mivel a webfelhasználók meglehetősen célorientáltak és türelmetlenek, a tartalom adjon gyors válaszokat, és legyen hasznos a számukra. 178. oldal 178 VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ Site-tervezés Az oldaltervezés általában azért áll a figyelem

középpontjában, mert a jelenlegi böngészők egyszerre csak egy oldat jelenítenek meg – maga a teljes webhely soha nincs jelen a képernyőn. Ergonómiai szempontból azonban a site-tervezés a nagyobb kihívás, sőt, rendszerint fontosabb is, mint az oldaltervezés. Amint a felhasználók egy oldalra érkeznek, rögtön tudni vélik, mire is lehet azt használni. Bárcsak kicsit több időt fordítanának rá (na persze a felhasználók nem vesztegetik arra drága idejüket, hogy alaposabban tanulmányozzák az oldalt – ezért is találkozunk olyan sok oldalon használhatósági problémákkal)! A felhasználót eleve a megfelelő oldalra juttatni – nos, ez az, ami nem egyszerű. A gond az, hogy a használhatóság rendkívüli módon romlik, ha a felhasználók elhagyják a honlapot, és elkezdenek navigálni vagy problémát megoldani. A webet eredetileg újságok olvasására tervezték, és a használhatóság terén nem tartott lépést a felhasználók által

végrehajtandó, egyre összetettebb feladatokkal. Ezért a site-tervezésnek mindenekelőtt egyszerűnek kell lennie, a lehető legkevesebb zavaró tényezővel, nagyon világos információ-architektúrával és odaillő navigációs eszközökkel. A honlap Mivel a honlap az egész site „zászlóshajója”, másképpen kell megtervezni, mint a további részeket. Természetesen a honlap és a belső oldalak stílusa meg kell, hogy egyezzen, de azért eltéréseknek is kell lenniük. Így például a honlapon nincs értelme a „Honlap” (Home)-gombnak, ugyanis meglehetősen bosszantó rákattintani egy olyan gombra, amely rögtön visszavisz az éppen aktív oldalra. Jó, ha a honlapon nagyobb a logo, és a vállalat vagy a site neve feltűnő helyen van. Egy honlapnak elsősorban azt a két felhasználói kérdést kell azonnal megválaszolnia, hogy „Hol vagyok?” és „Mire jó ez az oldal?” – mindkettőhöz egy világos és jól látható névre van szükség. A

válasznak nem a küldetést megfogalmazó mondat formájában kell megjelenítenie, amivel gyakran találkozhatunk néhány túlságosan is bürokratikus site-on. Az aki először látogat oda, már ránézésre tudja meg, mire is jó a weboldal. Az először odalátogató felhasználónak az a legfontosabb, hogy már a honlapról megtudja: „Mire is jó ez a site?”, a többi felhasználó viszont a navigációs rendszer kapujaként kezeli a honlapot. Lehet, hogy ez a hierarchia legfelső szintjének egyszerű felsorolását jelenti, de az információs felépítménytől függően akár másként is jelölhetők a felső szintű belépési pontok. Ha valaki például egy utazási site-ra látogat el, nagyon valószínű, hogy repülőjegyet akar foglalni, tehát az indulási és érkezési városokat mutató oldal jó lehet legfelső szintű belépési pontként. A honlap az olyan hírek vagy promóciók megjelenítésére is megfelel, amelyekre az összes látogató figyelmét

fel akarjuk hívni. Ne feledjük azonban, hogy a legtöbben azért látogatnak el hozzánk, mert valamilyen konkrét feladatot akarnak végrehajtani! Ritkán fordul elő, hogy az érdekelje a felhasználókat, mi történik a vállalatnál, vagy hogy éppen milyen termékeket adunk most olcsóbban. Tehát a 179. oldal 179 VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ híreknek szentelt rész legyen minél kisebb, hogy minél több hely maradjon a navigációs résznek – ez alól a szabály alól kivételt képeznek a kifejezetten hírekre szakosodott oldalak. Az ilyen site-okat a felhasználók kifejezetten azért látogatják meg, hogy megtudják „mi újság”, anélkül, hogy bármilyen konkrét céljuk lenne. Még az ilyen híroldalaknak is oda kell figyelniük arra, hogy néhány felhasználó az aktualitásokról szeretne olvasni, míg mások olyan régi cikkeket keresnek, melyeket már régen levettek a site-ról. A navigáció

mindig elsődleges fontosságú A legtöbb site-nek kitűnő kereső rendszere legyen, sok felhasználó ugyanis inkább rákeres valamire, mint hogy hivatkozásokat követve kelljen azt megtalálnia. Azokon az oldalakon, melyeken a látogatók főleg kereséssel kezdik, érdemes egy keresőmezőt már a honlap tetejére megjeleníteni. A többi site-on elég lehet egy egyszerű (de nagyszerű) link a keresőoldalhoz. Összefoglalva, egy honlapnak három fő tulajdonsága legyen: a site fő tartalmi területeit felsoroló listával (navigáció), a legfontosabb hírek és promóciók rövid ismertetésével és egy keresővel. Ha minden jó, akkor a lista és a hírek alapján nyilvánvaló, az először odalátogató is megérti, mi is ez a site tulajdonképpen. Amikor a honlapra nézünk, mindig tegyük fel magunknak a kérdést (mintha felhasználók lennénk) „Mire jó nekem ez a site?”. És ne feledkezzünk meg a névről és a logoról sem! Milyen széles legyen egy webhely?

Web-szemináriumaimon az egyik leggyakrabban elhangzó kérdés: „Milyen széles monitorra tervezzek?” Az emberek tudni akarják, vajon a 640 vagy a 800 képpont széles monitorokat célozzák-e meg. A válasz általában az, hogy ne tervezzünk semmilyen szabványos szélességre, inkább válasszunk olyan megjelenést, ami sok különböző méretű monitoron is működni fog. Nemcsak azért, mert a felhasználók különböző monitormérettel és felbontással rendelkeznek, hanem azért is, mert az ablakokat nem feltétlenül nagyítják fel a monitor teljes méretére. A kis monitorral dolgozó felhasználóktól ne várjuk el, hogy vízszintesen gördítsenek, a nagy képernyővel rendelkezők viszont élvezni akarják befektetésük gyümölcsét. Ennek ellenére a honlapok nagy része általában előre meghatározott képernyőméretre készül. Ha mi is ezt a megoldást választjuk, jobb 600 képpont alatt maradni, hacsak nem olyan intranetre tervezzünk, ahol tudjuk,

hogy mindenkinek nagy képernyője van. Fontos, hogy 600, és ne 640 képponttal számoljunk, mert a böngésző ablakának keretei jó néhány képpontot elfoglalnak, így a tartalmi rész nem számolhat a monitor teljes szélességével. Honlapszélesség A web első éveiben a honlapok egyre nagyobban és nagyobbak lettek, mivel a tervezők mindig újabb ötletekkel álltak elő, és folyton növelték a grafikus elemek méretét. Megnéztem és kiszámoltam a honlapok átlagos szélességét a web korai periódusának különböző időszakaiban: 1995. április: 525 képpont (pixel) 1996. január: 568 képpont 180. oldal 180 VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEB TERVEZŐ 1996. augusztus: 598 képpont 1997. május: 586 képpont 1998-ban és 1999-ben néhány honlap felment egészen 775 képpontig (hogy a 800 képpontos monitorokat kiszolgálják), de a legtöbb megmaradt 600 képponttal. Manapság már ritkán találkozunk keskeny, mondjuk

300 képpont széles honlapokkal, bár néhány site alkalmazkodó („liquid”)-designt használ. Nekik van igazuk, a legjobb ilyen, a különböző monitorméretekhez alkalmazkodó, felbontásfüggetlen honlapot készíteni. Ha valami oknál fogva ez mégsem lehetséges, induljunk ki abból, hogy az elkövetkezendő jó néhány évben a felhasználók nagy többsége 640 képpontos monitort fog használni. A beköszönő oldal Sajnos, néhány webhely teljesen felesleges és értelmetlen beköszönő oldallal üdvözli a látogatókat. Ezek csak lelassítják a felhasználót, pedig ő a honlapot akarja elérni. A beköszönő oldalakat abból a megfontolásból kezdték el használni, hogy előkészítsék a honlapot azzal, hogy üdvözlik a felhasználókat, és bemutatják a site nevét és a logót a honlapon található navigációs elemek zavaró hatása nélkül. A valóságban azonban a beköszönő oldalak kifejezetten idegesítik a felhasználókat, és amilyen gyorsan

csak lehet, elkattintanak róluk. Sokkal hasznosabb egy olyan honlapot tervezni, amelyből kiderül, hogy hol vagyunk, van rajta néhány hasznos hír és egy lista, amiből látszik, mi is van még a site-on. Maga a tartalom tájékoztasson arról, hogy hol vagyunk és miről szól a site. Honlapok és belső oldalak Egy honlap legfeltűnőbb eleme a cég vagy site neve legyen. Ettől még nem kell hatalmas méretűnek lennie, de legalább a bal felső sarokban helyezzük el, ahol könnyű észrevenni. A site-névnek minden belső oldalon szerepelnie kell, hiszen a felhasználó bármely belső oldalon beléphet a sit-ra, nem csak a honlapon – például egy keresőprogramból vagy egy hivatkozásról. Ezeknek a felhasználóknak is rögtön világos és egyértelmű információt kell kapniuk arról, hol is vannak Ugyanakkor a belső oldalak tartalmazzanak inkább konkrét anyagot, ritkábban adjanak általános bemutatkozó szöveget, ezt hagyjuk meg a honlapnak! Úgy tűnhet,

ellentmondás van a két alapelv között, vagyis aközött, hogy a felhasználót megfelelően tájékoztassuk bármely oldalra érkezzék is, és hogy az általános információk, illetve a felső szintű navigációs eszközök a honlapon szerepeljenek. Az, hogy miképpen oldjuk fel ezt az ellentmondást, attól függ, mennyire gyakori, hogy a felhasználók belső oldalakon lépnek site-unkra, és hogy az mennyire ismert. Ha a site-ot a legtöbben azonnal felismerik, nincs értelme annak, hogy túl hosszú általános szöveget rakjunk minden oldalra. Egyszerűen csak legyen minden egyes oldalon egy, a honlapra mutató link. Javaslom, hogy azt a bal felső sarokba helyezzük el, ami egyébként a sitenév és/vagy a logo számára is a legeszményibb. (Ott, ahol jobbról balra olvasnak, ez értelemszerűen a jobb felső sarok.) A lényeg, hogy függetlenül attól, honnak került valaki a site-ra és annak melyik oldalára érkezett, a honlap mindig egy kattintással elérhető

legyen! Legyen a 181. oldal 181 VIZUÁLIS ELMÉLET, VIZUÁLIS TERVEZÉS INFORMATIKAI REKLÁMGRAFIKUS, WEBTERVEZŐ logo minden oldalon kattintható és vezessen a honlapra! Sajnos, nem minden felhasználó fogja felismerni, hogy a logo egyben a honlapra mutató link is. Bele fog telni még egy kis időbe, míg ez teljesen elfogadott szabvány lesz. Az elkövetkezendő néhány évben még szükség lesz a „Honlap” („Home”)-feliratú gombra is Metaforák Néha sajnos túlzásba viszik a metaforák használatát a weben. A legnagyobb baj az, hogy a metaforák arra csábítják a tervezőket, hogy túlságosan is körmönfontak legyenek, és olyan tervezési elemeket használjanak, melyek jópofák és odaillők a metaforán belül, de nem veszik figyelembe a felhasználók valódi igényeit. A felhasználók nem a metaforák világában, hanem a valódiban élnek. Jobb egyértelműnek lenni, és minden felületi elemet úgy megtervezni, hogy nyilvánvaló legyen, mi is az

és mire használható, mint ha megpróbálunk egyetlen metaforába minden beleerőltetni. Ennek ellenére két okból is érdemes lehet metaforákat alkalmazni. Először is egységes keretet adnak a designnak, így a nem csupán különálló részek gyűjteményének fog tűnni, hanem egységes egésznek. Másodszor a metaforák megkönnyíthetik a tanulást azzal, hogy a felhasználó által ismert ajánlási rendszerre alapoznak. Egy „bevásárlókocsi”, mint az elektronikus üzletkötés metaforája, segítheti a felhasználót, hogy azonnal megértse, hogyan is kell azt használni. Nyilvánvaló lesz, hogy a bevásárlókocsiban összegyűjthetjük azt az árut, amit meg akarunk venni, de még nem fizettünk ki. A bevásárlókocsiba fizetés előtt be- és kirakodhatunk, akár a kasszához is beállhatunk vele A bevásárlókocsi példáján megfigyelhetjük a metaforák hátrányát is. A referencia-rendszer ismeretében a felhasználó jogosan feltételezheti, hogy ha

valamiből ötöt akar venni, akkor ötször kell ugyanazt a terméket a kocsiba tennie Ha pedig ki akar valamit venni onnan, vissza kell tennie a polcra. Ám a legtöbb, az elektronikus kereskedelemben használt bevásárlókocsi valójában nem így működik. Megadhatjuk, hány darabot akarunk venni valamiből, és úgy távolíthatjuk el a kocsiból, hogy nulla darabot veszünk belőle. Ez az utóbbi eset nagyon is jól ismert használhatósági problémákat vet fel. A felhasználók általában nem jönnek rá, hogyan is kell alkalmazni. 182. oldal 182