Page 1

Budapesti Kommunikációs és Üzleti Főiskola

SZAKDOLGOZAT

Weboldal tervezése egy szabadon választott témában Autofocus Amatőr Fotó Fesztivál

Konzulens: Király András

Készítette: Szigl Ádám Új Média Grafikus szak

Budapest 2011


SZAKDOLGOZAT KIVONAT

1. A szakdolgozat alapvető kulcsszavai:

• logó • arculat • grafikai terv • webdesign

2. A legfontosabbnak ítélt források megjelölése:

• Bo Bergström: Bevezetés a vizuális kommunikációba • Alice Twemlow: Mire jó a grafikai tervezés? • Virágvölgyi Péter: A tipográfia mestersége számítógéppel


A szakdolgozat magyar nyelvű kivonata: A szakdolgozatom egy kitalált esemény arculatának létrehozásáról és ezt követően az arculatnak megfelelő weboldalának a kialakításáról szól. Az esemény egy amatőr fotó fesztivál, amelynek a neve Autofocus. A kitalált fesztivál célja, hogy különböző érdekes programokon, előadásokon és kiállításokon keresztül minden egyes korosztály – a legfiatalabbak és a leg­idősebbek -számára is közelebb hozza a fotózást és ezzel megalapozza annak a lehetőségét, hogy minél nagyobb számban űzzék ezt a tevékenységet szabadidejükben. A szakdolgozatomban bemutatom a teljes folyamatot addig, amíg a fesztivál weboldala elkészült. A munka az inspirációval kezdődött, a logó kialakításával folytatódott, majd meghatároztam a logó használatának szabályait. Ezt követően meghatároztam az arculati színrendszert, és az arculati tipográfiát. Elkészítettem a különböző kommunikációs eszközöket, a szórólapot, a plakátot, a belépőjegyet, és az ajándéktárgyakat. Készítettem egy videót is, majd végül megterveztem és elkészítettem a weboldalt. A munkafolyamatokat egy blogban is megörökítettem. Ennek az elérhetősége: http://affesztival.wordpress.com/. A munkám során arra törekedtem, hogy az új média grafikus képzés során megismert szoftvereket használva egyszerű és tiszta arculatot, majd az arculatba illeszkedő, jól működő, felhasználóbarát weboldalt hozzak létre.


A szakdolgozat angol nyelvű kivonata / Summary of my thesis: My thesis is about how to create an identity for a fictious event, and then how to design and make the event’s website in same style. This event is an amateur photo festival, called Autofocus. The aim of this fictious event is closing photography to people, for each age group, from the youngest to most older. And parallel establishes the possibility that they do this activity in higher number in their free time. There are various interesting programs, lectures and exhibitions in this festival. In my thesis I show the whole process until the festival’s website is completed. The work begun inspiration, then continued creation of logo, after that I determined the rules for use of the logo. Then I defined the identity’s colors, and the identity’s typography. I made various communication items, like leaflets, posters, tickets and gift. I also made a video, and finally designed and made the website. The workflow was published in a blog. This is available on: http://affesztival.wordpress.com/. In my work I tried to use my knowledge of graphic software, that I aquired in the new media course. I tried to establish a simple and clear identity, and fit for this identity I tried to create well-functioning, user-friendly website.


Tartalomjegyzék

1. Bevezetés 2. Inspiráció 3. Az arculat kialakítása 3. 1. A logó kialakulásának folyamata 3. 2. A logó használatának szabályai 3. 3. Arculati színrendszer 3. 4. Arculati tipográfia 4. Kommunikációs felületek 4. 1. Szórólap, plakát 4. 2. Belépőjegy 4. 3. Ajándéktárgyak 5. Fotók 6. Videó 7. Honlap 8. Végső megállapítások 9. Irodalomjegyzék

06 07 09 09 12 14 15 16 16 18 20 21 22 23 27 28

5


1. Bevezetés

Az internet az egész világot körülölelő hálózat. Milliók használják a munkájukhoz, követik a legfrisebb híreket, vagy csak csevegnek barátaikkal. Mivel a web „percrekész” ennek a segítségével lehet a leggyorsabban információkhoz jutni. De az internet nemcsak a hírek terjesztésében játszik szerepet, hanem a marketing és a reklám területén is. A web gyors és nyitott, ezért ha van egy cégünk, vagy egy termékünk, esetleg egy eseményt szeretnénk megrendezni, akkor elengedhetetlen az, hogy készítsünk weboldalt hozzá. Egy weboldal ideális lehetőséget ad az alaposabb informálódásra, kérdések felvetésére és válaszok fogadására. A szakdolgozatomban egy kitalált eseményhez készítek arculatot és ezt követően az arculatnak megfelelő weboldalt. Az eseménynek egy amatőr fotó fesztivált választottam, melynek az Autofocus nevet adtam. Napjainkban a fotózás igen népszerű tevékenység. A technikai eszközök, gépek folyamatosan fejlődnek, az eszközökhöz tartozó tevékenységek, módszerek tárháza folyamatosan bővül. Emiatt egy átlag felhasználó úgy érezheti, hogy a rengeteg újdonság miatt elveszik ezek között az eszközök, módszerek és lehetőségek között. A fesztivál célja, hogy különböző érdekes programokon, előadásokon és kiállításokon keresztül minden egyes korosztály – a legfiatalabbak és a leg­idősebbek -számára is közelebb hozza a fotózást és ezzel megalapozza annak a lehetőségét, hogy minél nagyobb számban űzzék ezt a tevékenységet szabadidejükben. Az esemény nevének kiválasztásával a fotózásban rejlő egyszerűségre szerettem volna utalni, mivel a fényképezőgépekben az autofókusz az a mechanizmus, melynek segítségével a gép automatikusan ráélesít a fotó tárgyára és a kép mindenféle kézi beavatkozás nélkül éles lesz. Ezzel a technikával az egészen amatőrök is éles képeket hozhatnak létre. A fotó fesztivál arculatának kialakítását a logóval kezdtem, majd meghatározom a színrendszert, illetve az arculatban alkalmazott tipográfiát, létrehoztam a különböző kommunikációs eszközöket (plakát, szórólap, belépőjegy, kitűző), készítettem egy videót az eseményhez, és végül megterveztem és elkészítettem az esemény weboldalát. A munkám során arra törekedtem, hogy az új média grafikus képzés során megismert szoftvereket használva egységes arculatot, majd az arculatba illeszkedő, jól működő, felhasználóbarát weboldalt hozzak létre. A munkafolyamatokat egy blogban is megörökítettem. Ennek az elérhetősége: http://affesztival.wordpress.com/.

6


2. Inspiráció Konzulensem, Király András megbeszélésünk alkalmával a megfelelő inspirációra hívta fel a figyelmemet. Azt javasolta, gyűjtsek a témának megfelelő minél több logót. Például különböző fotófesztiválok fotósok, fotóművészek logóit, autofocussal, illetve AF-fel kapcsolatos logókat, vagy csak egyszerűen olyanokat, amik valamiért tetszenek nekem. Ennek megfelelően több helyről próbáltam a témába vágó logókat és grafikákat keresni. Ezek a teljesség igénye nélkül az alábbiakban láthatók:

7


A megfelelő logó megtalálása mellett természetesen a végső cél továbbra is egy stílusos webdesignnal jól működő weboldal kialakítása volt. Emiatt természetesen már létező weboldalakból is próbáltam ihletet meríteni a munkámhoz. Ezekből néhány szintén itt látható:

Art Market Budapest

Paris Photo Festival

Delhi Photo Festival

Frieze Art Fair

8


3. Az arculat kialakítása 3.1 A logó kialakulásának folyamata Egy arculat kialakítása során talán a legnagyobb szerepe a logónak van. A logónak utalnia kell az adott termékre vagy szolgáltatásra, de ezek mellett egyszerűnek, egyedinek, megkülönböztethetőnek és jól kivehetőnek kell lennie akár kis vagy nagy méretben, illetve színesben vagy fekete-fehérben is. A fesztivál logójának tervezését szabad kézzel kezdtem el. Az első tervek során próbáltam az autofókusz rövidítéséből származó AF betűkapcsolatból kiindulni.

9


Miután a szabadkézi tervek a rendelkezésemre álltak, megpróbáltam azokat Illustratorban is létrehozni. Miután elkészültek az első vektoros logó terveim, úgy gondoltam, hogy bár vannak olyan megoldások, amelyek alkalmasak lehetnének egy fotó fesztivál emblémájának, de mindegyik inkább valamilyen konkrét célcsoportot célozna meg. Így például a nevető AF-ek a fiatalokat vonzhatnák, míg az éles szélű geometrikus formákból létrehozott AF variációk szakembereknek és az idősebbeknek szólnának. Mivel a fesztivál alapgondololata az volt, hogy minden korosztálynak és minden rétegnek szóljon, ezeket a terveket a konzulensemmel egyetértésben elvetettem.

10


Ezt követően már logotípiában gondolkodtam és újabb terveket készítettem. Ehhez az Adira Display nevű betűtípust használtam fel. Ez egy talp nélküli lekerekített betűtípus, ami véleményem szerint tökéletes a fesztivál hangulatának átadására, és nem mellesleg jól is olvasható. A font ingyenesen letölthető az internetről. A végső formáját azzal nyerte el, hogy a focus szó „o”betűjét egy a fényképezőgépek kijelzőjén látható AF keretre cseréltem. Ezzel véleményem szerint egyedivé tettem a logót, miközben annak olvashatósága is megmaradt.

11


3.2 A logó használatának szabályai Az elkészült logotípia az Autofocus Amatőr Fotó Fesztiválra utal, annak vizuális megjelenésekor. A logotípia a felhasználás során szabadon nagyítható és kicsinyíthető, oly módon hogy az eredeti arányait meg kell tartani. A logotípia az Amatőr Fotó Fesztivál felirattal teljes. Ennek kell szerepelnie minden olyan felületen ahol a teljes megjelenésre van szükség (például szórólap, plakát, belépőjegy, honlap). A felirat elhagyható a olyan esetekben amikor nem feltétlenül indokolt a használata (például fotókon vízjelként történő felhasználás esetén). A logotípia helyes használata:

A logotípia eredeti méretezése a következő:

A logotípia eredeti színei a következők:

12


A felhasználás során törekedni kell arra, hogy a logotípia az sötét háttér előtt jelenjen meg (lehetőleg az arculatban alkalmazott sötét árnyalatok), ellenkező esetben az olvashatóság csökkenhet.

A különböző ügyviteli anyagokon (pl. faxpapír) szükség lehet a logó fekete-fehér alkalmazására. Ebben az esetben mindig az Focus felirat színe egyezik meg a háttérrel, de köré körvonalat kell vonni. A többi elem színe a háttérrel ellentétes. Fekete fehér használat

A logo speciális felhasználása a fotókon vízjelként történő megjelenés. Vízjel alkalmazása

A felhasználás során tilos a torzítás, az eredeti arányok és a színek megváltoztatása illetve cseréje, valamint nem megfelelő tipográfia használata.

Példák a helytelen használatra

13


3.3 Arculati színrendszer A színek közvetlenül az érzelmeinkre hatnak, ezért nagyon fontosak egy arculat kialakításában. Az egyes színek különböző jelentéseket hordoznak, ezek a jelentések azonban kultúránként eltérőek lehetnek. A jól megválasztott színekkel informálhatjuk az érdeklődőt, átadhatjuk a termékünk vagy szolgáltatásunk hangulatát, illetve felkelthetjük a figyelmet iránta. A fesztivál arculatának kialakításához szükségem volt egy figyelemfelkeltő színre. Ehhez a több szín kipróbálása után a narancssárgát választottam. A narancssárga meleg energetikus szín, a grafikákban izgalmas, jól vonzza a tekintetet, de nem olyan erőteljes és domináns, mint a figyelmet szintén erősen megragadó piros szín. Mivel sokkal barátságosabb, kön�nyedebb hangvételű, jól alkalmazható egy széles célcsoport megszólítására. A narancssárga szín kompenzálására a kék szín különböző árnyalatait használtam fel. A kék az egyik legjobb szín, mert nyugalmat, méltóságot és kiválóságot sugall. Az egyes árnyalatok eltérő jelentéssel bírhatnak. A halványabb kék barátságos, a sötétebb a megbízhatóságot sugallhatja. A különböző kék árnyalatok fokozhatják az érdeklődést, izgalmasnak és frissnek tűnhet az arculat.

14


3.4 Arculati tipográfia A betűk mindenhol jelen vannak életünkben, szavak ezreit alkothatjuk meg segítségükkel. Egy betűtípusnak nevezzük az azonos grafikai elven megalkotott ábécét, jelkészletet. A betűtípusok változatos jellemvonásokkal rendelkezhetnek és emiatt különböző hangulatokat közvetíthetnek. Az arculati tipográfiához két betűtípus elemeit választottam. Ez a két betűtípus az Adira Display és a Garamond. Az Adira Display egy lekerekített talp nélküli font ingyenesen letölthető az internetről. A robosztus megjelenése miatt remekül alkalmas a figyelem felkeltésére, ugyanakkor jól olvasható is és véleményem szerint megfelelő a fesztivál hangulatának átadására. A Garamond egy klasszikus betűtípus, a reneszánsz antikvák közé tartozik. A reneszánsz antikvák, kellemes megjelenésű lágy betűk, jellemzőjük, hogy mindig van talpuk, a betűk vékony és vastag vonalainak kontrasztja kisebb, illetve a tengelyük enyhén dőlt. A Garamondra a kiváló olvashatóság jellemző, ezért használata széles körben elterjedt. A különböző arculati anyagokon illetve kommunikációs eszközökön ezeknek a betűtípusoknak az elemeit szabad használni.

15


4. Kommunikációs felületek 4.1 Szórólap, plakát A plakát és a szórólap a fesztivál reklámozásának céljából készült el. A szórólap kisebb méretű, postaládákba eljuttatandó, vagy utcán szétosztandó reklámanyag. A plakát vagy poszter, nagyméretű utcai felületeken megjelenő hirdetés. Mindkettő funkciója elsősorban a figyelem felkeltése. A fesztivál szórólapját kétoldalasra terveztem meg. Az első oldalra, a középpontba került a fesztivál logója, illetve feltüntettem a helyszínt és az időpontot. Ide került még a szintén figyelemfelkeltésre szánt jelmondat (Kerülj fókuszba, hogy mindig legyen egy jó képed). A szórólap hátterében egy fotózó alak látható, aki egy mezőn ül, utalva ezzel arra, hogy bárhol bármikor fotózhatunk. A hátlapra szintén ez a kép került, de elhomályosítva, mert itt a fókusz keretben található információk a fontosak, amelyek ízelítőt nyújtanak a fesztivál programjából. Szintén ide került az elérhetőség illetve az egyéb részletesebb információt nyújtó megjelenési felületek címe. A szórólap eredeti mérete 148 x 210 mm.

Szórólap előoldala

Szórólap hátoldala

16


Mivel a plakáton ezeket az információkat egy oldalon kellett megjelenítenem, az elrendezést némileg módosítottam, de a szórólap stílusa megmaradt. A plakát eredeti mérete: 841 x 1189 mm.

Végül annak érdekében hogy hogyan nézne ki a felhasználás helyén a plakátot „elhelyeztem” egy utcai cityligt-on.

17


4.2 Belépőjegy A jegy az esemény megtekintésére jogosítja fel az érdeklődőket. Emiatt mindenképpen szükség volt arra, hogy készüljön grafikai terv belépőhöz. Mivel manapság a jegyértékesítések egy része interneten keresztül történik, terveztem saját nyomtatású jegyet is. Ezek mellett belépő karszalagot is készítettem. A belépő tartalmazza a legfontosabb információkat: a fesztivál helyszínét, időpontját, beléptetéshez szükséges vonalkódot. A hátoldalán feltüntetésre kerül az esemény házirendje, illetve egy vázlat a helyszínről az egyszerűbb bejutás és eligazodás érdekében. A belépőjegy mérete: 210 x 75 mm.

A belépőjegy elő- és hátoldala

18


A saját nyomtatású jegy lényege, hogy a vevő, az online vásárolt belépőjegyét otthon saját magának nyomtatja ki. Tehát azt nem kell előre személyesen megvásárolnia vagy postán kiszállíttatnia. Az egyszerű nyomtatás érdekében az ilyen jegy fekete –fehér és az eredeti belépőjegy adatai mellett az azonosítás érdekében a vásárló adatait illetve a vásárolt men�nyiséget is tartalmazza. A saját nyomtatású jegy mérete: 297 x210 mm.

A belépő karszalag mérete 25 x 250 mm.

A belépő karszalagra a belépést követően lehet szükség, annak elkerülése érdekében, hogy egy jeggyel több személy lépjen be a fesztivál területére.

19


4.3 Ajándéktárgyak A fesztiválhoz háromféle ajándéktárgyat terveztem meg. Ezek a következők: kitűző, hűtőmágnes, és kulcstartó. Mindhárom azért lehet hatékony promóciós eszköz, mert mindenki örül az ilyen apró ajándékoknak, emellett olcsón kivitelezhetőek, könnyen terjeszthetők, és nincsenek korhoz vagy nemhez kötve.

A kétféle kitűzőt, téglalap és ovális alakúra terveztem.

A hűtőmágnes, még praktikus funkciót is elláthat , mivel a hűtőnkre különböző fontos jegyzeteket, csekkeket, üzeneteket rögzíthetünk vele. Úgy terveztem meg, hogy olyan hatást keltsen mintha egy fényképezőgép LCD kijelzőjébe néznénk bele. A képen látható fehér terület a valóságban transzparens. A hűtőmágnes mérete 70 x 50 mm.

A kulcstartó téglalap alakú, mérete: 35 x 50 mm

20


5. Fotók A szadolgozatba olyan korábban készült fotóimat választottam ki, amelyeket én is szívesen beküldenék egy amatőr fotó fesztivál pályázatára. A képeken már szerepel vízjelként a fesztivál logója.

21


6. Videó Videónak egy olyan promóciós mozgóképes animációt készítettem, ami alkalmas lehet az érdeklődők figyelemfelkeltésére a fesztiválhoz. A videóból két verzió készült, egy rövidebb és egy hosszabb. A videókat az After Effects program segítségével készítettem, a hangot Audition programmal vágtam össze hozzá. A hosszabb változat annyiban tér el, hogy bekerült egy 3D hatást keltő repülő galéria és megjelentettem a fesztivál helyszínét és időpontját: A rövidebb változat interneten a kövekező linken érhető el: http://www.youtube.com/watch?v=Bsi4Td2DbWU A hosszabb változat interneten a kövekező linken érhető el: http://www.youtube.com/watch?v=jtsnpih9vGE

Képek a videóból

22


7. Honlap Az internet az egész világot körülölelő hálózat. Napjainkban ennek a segítségével lehet a leggyorsabban információkhoz jutni. A web gyors nyitott és naprakész, ezért ha egy eseményt szeretnénk megrendezni, akkor elengedhetetlen az, hogy készítsünk weboldalt hozzá. Egy weboldalnak amennyire lehetséges, magától érthetődőnek, nyilvánvalónak egyértelműen használhatónak kell lennie. A weboldalon a kezdőlap az egyik legfontosabb, ezzel találkozik a látogató legelőször, ezért ennek jól átláthatónak is kell lennie. Az oldal megtervezésénél ezeket a szempontokat próbáltam figyelembe venni. A kezdőoldal tervezését Photoshopban végeztem, azért, hogy lássam az egyes elemek elhelyezkedését. A fesztivál logója a fejléc jobb oldalára került. Ez alá tettem az egyes menüpontokat. Szintén a kezdőlapon helyeztem el a legfontosabb információkat a fesztiálról, a bemutatkozást, programajánlót, galéria ajánlót, és a helyszínt. Azért használtam eltérő színeket, hogy az egyes tartalmak jól elkülöníthetőek legyenek, illetve ezzel egy egyedi dizájnt kapott a weboldal. A weboldal kialakításához az arculatban alkalmazandó színeket használtam fel.

A kezdőlap terve

23


A honlap kivitelezését Dreamweaver segítségével oldottam meg. A oldalt div-es szerkezettel készítettem el . Amiatt döntöttem, emellett, mert ez a weboldalak felépítésének legmodernebb módja. A div-es szerkezetű weboldalak könnyen szerkeszthetőek, a fájlok mérete kicsi és a keresőrobotok is könnyen ki tudják elemezni. A honlap felépítése egyszerű, hálós szerkezetű, minden menüpontból el tudunk jutni a másikba. Annak érdekében, hogy az oldalt felkereső látogatónak egyértelmű legyen, a linkek megkülönböztető színeket kaptak. Ez abban az esetben látható ha az egeret a linkek fölé visszük. Minden aloldal egyedi elrendezést kapott tartalomtól függően. Az oldal speciális része a Galéria. Itt egy ingyenesen használható Javascript alkalmazást építettem az oldalba. Az alkalmazásnak köszönhetően a képeket nyilak segítségével egyszerűen tudjuk lapozni. A weboldal a http://www.szigladi.hu/affesztival címen érhető el. Az elkészült honlap oldalai a következőképpen néznek ki:

Kezdőlap

24


HĂ­rek aloldal

Programok aloldal

25


GalĂŠria aloldal

Kapcsolat aloldal

26


8. Végső megállapítások

A szakdolgozatomban egy teljesen új arculatot és weboldalt készítettem egy kitalált eseménynek. Számomra ez rendkívűl izgalmas és nagy kihívásokkal teli feladat volt, hiszen korábban ennyire komplett, összetett munkát még nem végeztem. Összességében elmondható, hogy nagyon élveztem ezt a feladatot, hiszen nagyon jó érzés létrehozni valamit a semmiből. A szakdolgozatomban látható, hogy hogyan haladtam lépésről lépésre a logó megtervezésétől egészen a kész weboldalig. Reményeim szerint elértem a kitűzött célt, vagyis egy egységes arculat létrehozása után egy arculatba illeszkedő és egyben jól működő, felhasználóbarát weboldalt tudtam készíteni. Úgy gondolom, hogy az órákon megszerzett elméleti tudást jól tudtam hasznosítani a szakdolgozat elkészítése során, és remélem, hogy ez így lesz majd a jövőbeli munkáim során is.

27


10. Irodalomjegyzék

• Bo Bergström: Bevezetés a vizuális kommunikációba Scolar kiadó, Budapest, 2009 • David Jury: Mi az a tipográfia? Scolar kiadó, Budapest, 2007 • Steve Krug: Ne törd a fejem! Felhasználóbarát webdesign HVG Kiadó Zrt. Budapest 2008 • Alice Twemlow: Mire jó a grafikai tervezés? Scolar kiadó, Budapest, 2008 • Virágvölgyi Péter: A tipográfia mestersége számítógéppel Osiris Kiadó, Budapest 2004 • Robin Williams: Tervezz bátran! Scolar kiadó, Budapest, 2006 • Webragacs: A színelmélet - A színek jelentése http://www.webragacs.hu/2010/01/a-szinek-elmelete-a-szinek-jelentese/

28


szakdolgozat  

szakdolgozat

Advertisement
Read more
Read more
Similar to
Popular now
Just for you