1/a. sz. melléklet
SZAKDOLGOZAT
Nemes Szabina
2012.
1
1/b. sz. melléklet
Budapesti Kommunikációs és Üzleti Főiskola
SZAKDOLGOZAT Y's in the kitchen - Weboldal tervezés, arculati elemek
Konzulens: Király András
Készítette: Nemes Szabina Új Média grafikus szak
Budapest 2012. 2
1/c. sz. melléklet
SZAKDOLGOZAT KIVONAT
1. A szakdolgozat alapvető kulcsszavai (3-5 kulcsszó megadása): arculat logó web tipográfia grafikai tervezés
2. A 2-3 legfontosabbnak ítélt forrás: Virágvölgyi, Péter: A tipográfia mestersége számítógéppel – Osiris Kiadó, 2004 Airey, David : Logo Design Love: A Guide to Creating Iconic Brand Identities – New Riders Press 2009 Healey, Matthew: Mi az a branding? - Scolar Kiadó 2009 órai jegyzetek
3
A szakdolgozat kivonata: Szakdolgozati témának egy újonnan létrejövő internetes vállalkozás weboldalának és arculatának megtervezését választottam. A vállalkozás neve Y's in the kitchen, melyet egy fiatal, kreatív, a gasztronómia iránt elkötelezett csapat alapított azzal a célkitűzéssel, hogy az interneten Y generációra (20-30 év közötti célcsoport) szabott recepteket és gasztronómiai tartalmakat osszon meg közérthető formában. Az arculati elemek megtervezésénél ezért fő szempont volt, hogy a célcsoport számára könnyen felismerhető és azonosítható legyen a cég filozófiája, a választható és sokszínű tartalomfogyasztás, illetve az egyszerű, követhető menürendszer, struktúra kialakítása. Törekedtem arra, hogy olyan grafikai elemeket tervezzek, melyre az egyszerű és letisztult formavilág jellemző, ugyanakkor megfelel azoknak a tartalomfogyasztási elvárásoknak, melyek a célcsoportot jellemzik, vagyis: letisztult, egyszerű, könnyen használható navigációs rendszer
gyorsan megszerezhető, letölthető, elérhető információ
digitális közösségi tér elemeinek használata, elérése
vizualitás – fotók, képek kihangsúlyozott szerepe
tartalomfogyasztás – szórakozás
trendkövetés
A teljes arculat kialakításánál törekedtem arra, hogy az egyes elemek egymásra épüljenek, ugyanakkor önmagukban is megállják a helyüket. A tervezésénél leginkább az Adobe Illustrator programját használtam, a weboldal tervezésénél pedig a Photoshop program ismerete jelentett előnyt. A weboldal konkrét megvalósításához a Dreamweaver, míg a mozgóképes arculat kialakításához az After Effects programok voltak segítségemre. A szakdolgozat lépéseit egy általam létrehozott blogon publikáltam, mely így a munkanapló funkcióját is betöltötte számomra. Bejegyzésekbe szerkesztettem a tervezés legfontosabb lépéseit, míg a létrejött tartalmakat, megtervezett arculati elemeket külön oldalakon jelenítettem meg.
Szakdolgozatom megtalálható a http://ycooking.wordpress.com/ oldalon.
Budapest, 2012. május 16. 4
A szakdolgozat rövid kivonata angol nyelven: For my thesis I choose to design a homepage and create the image of a newborn company based on the internet. The name of the company is Y's in the kitchen, that was created by a creative group of youngsters committed to gastronomy and to bring recepies and gastro issues to the Y generation (people between the age of 20-30). The main concept while designing was a clean, simple and youthful form, where the corporate identity is easily recognizable for the audience, while the menu, content and structure are easy to follow. I was striving to design such graphic elements that are uncomplicated and clean in function, but ready to meet the expectations of the targeted audience that are as follows:
user friendly navigation
quick and easy to get information
network, online community
main role of pictures and photos
entertaining and hip
While designing my aim was that the whole image of parts that relate to and build up to each other could be also understood separately. During the design process I used the most the Adobe Illustrator design software while designing the homepage the knowledge of Photoshop was an advance. The homepage was acomplished with Dreamweaver. While the motion picture parts were made with After Effects. I published the steps of my thesis on a blog which also acted as a diary this way. The design process were published as posts while the main design elements are published as pages. You can follow my thesis on http://ycooking.wordpress.com/
Budapest, 2012. május 16.
5
MUNKANAPLÓ Tartalomjegyzék
1.
Bevezetés …..................................................................................................................7.
2.
A feladat …...................................................................................................................8.
3.
A logó …........................................................................................................................9. 1. Logótervek …................................................................................................................9. 2. A tipográfia …...............................................................................................................9. 3. A színrendszer ….........................................................................................................10. 4. Animált logó …...........................................................................................................10.
4.
Weboldal ….................................................................................................................11. 1. Weboldal tervei ...........................................................................................................11. 2. Színhasználat …..........................................................................................................12. 3. Webtipográfia ….........................................................................................................13. 4. Weboldal elemei ….....................................................................................................13.
5.
Kommunikációs eszközök …....................................................................................18. 1. Kisarculati elemek …...................................................................................................18. 2. Reklámtárgyak ….........................................................................................................19.
6.
Konklúzió ...................................................................................................................20.
6
I.
Bevezetés
„To be a good designer, you must br curious about life;the strongest ideas are born from the experiences we have and he knowledge we gain from them. The more we see and the more we know, the more ammunition we can stockpile for generating ideas.”
/David Airey/ Egy cég arculatának megalkotásakor, - legyen szó digitális felületről vagy nyomdai anyagról, - a tervezőnek minden esetben törekednie kell arra, hogy tervei, megoldásai visszatükrözzék a cég filozófiáját, identitását. Nem elég megkülönböztetni, minősíteni, meghatározni, hanem egyszerűnek és közérthetőnek is kell maradni. A cél, hogy a vizuális elemekkel képesek legyünk elmesélni azt a történetet, gondolatot mely az adott vállalat mögött áll.
A weboldal tervezés esetében is az arculat kialakításának legfontosabb szempontjait figyelembe kell venni, viszont ezentúl még pár szabályt észben kell tartani a tervezés során:
jól elkülöníthető tartalom, egységes megjelenés
webes konvenciók használata
figyelem fókuszálása
webes 'zaj' csökkentése
logikusan felépített tartalom
vizuális hierarchia
Vagyis a sikeres tervezés elengedhetetlen része nemcsak egy jó ötlet, az ügyféllel való egyeztetések, hanem bizonyos szabályok betartása vagy adott esetben felülvizsgálata.
7
II.
A feladat ismertetése
Egy fiatalokból álló kreatív csapat számára kell vizuálisan megjeleníteni egy weboldalon és összefogni egy arculatban azon elképzelésüket egy vállalkozásról, mely gasztronómiai érdekességeket, főleg recepteket gyűjtene és osztana meg a weben fiatal felnőtteknek. A fő hangsúly a célcsoporton van, pontosabban az Y generáción, mivel a szolgáltatás kifejezetten rájuk lesz szabva és a vállalkozás elindítói is ezen generáció tagjai. Ezért az üzleti filozófiájuk röviden úgy foglalható össze, hogy “Gasztronómia az Y generációnak az Y generációtól.” Ahogy ebből a szlogenből kiderül frappáns, egyszerű, nagyvonalú megoldásokra kell törekedni az arculatot illetően is. A csapat tagjait is főképp ez jellemzi, de leginkább a weboldal a szolgáltatások sokszínűsége miatt igényel egy egyszerű, könnyen megjegyezhető, egységes megjelenést. Ugyanis a fő profilon, a receptmegosztáson kívül a weboldal a következő szolgáltatásokat nyújtja majd:
World/Nagyvilág – gasztronómiai érdekességek a nagyvilágból (infografikai adalékokkal);
Test/Teszt – különböző terméktesztek;
Fresh/Friss – új FMCG termékek, konyhai újdonságok a piacon;
Favourites/Kedvencek - kedvenc társoldalak, üzletek gyűjteménye;
Then and now/Akkor és most – érdekességek a múltból, különböző korok főzési szokásai, gasztronómia szerepe a mindennapokban régen és ma, interjúk;
Webshop – átirányítás az Etsy illetve a Meska oldalakon található céges profilra.
A receptek megosztása pedig többféleképpen történne: bizonyos receptek közlése nemcsak fényképpel ellátva jelenne meg, hanem video és grafikus illusztráció formájában is. Az oldal ezzel kívánna a versenytársakkal szemben egy olyan plusszal előrukkolni, ami igazodik a célcsoport webes elvárásaihoz, ezzel megteremtve a 8
jövőbeli rendszeres látogatottságot, visszatérést, a weboldal rendszeres követését a fogyasztók körében. A grafikai elemekkel pedig ezeket a funkciókat kell egyszersmind kihangsúlyozni, mivel a főszerep a weboldal funkcióin van, de ugyanakkor a cél az oldalt egy nagyon trendi stílusba öltöztetni; törekedni egyéni, letisztult formavilág kialakítására, mely a brand identity egyik alapköve lesz. Ehhez a feladathoz elsőként az alapvető információgyűjtés mellett egy mind map-et készítettem, hogy könnyebben megtaláljam azokat a fő fogalmakat, melyek a grafikai tervezés során az első kapaszkodókat jelentik, ötleteket adnak, inspirálnak, grafikai asszociációkra, metaforákra késztetnek, egyszerűen beindítják a fantáziát. Emellett információt gyűjtöttem a célcsoportról, ebben nagy segítségemre voltak különböző internetes források és Tari Annamária Y generációról szóló könyve. Ezt követően pedig gasztronómiával foglalkozó oldalakat tanulmányoztam, hogy ezen oldalakra jellemző konvenciókat a tervezés során mindenképpen figyelembe vegyek. III.
A logó
1.
Logótervek
A logótervezés első fázisában papíron született számtalan skicc, melyek közül végül egy, a főleg IKEA katalógusokból ismert helytakarékos konyhai eszköztárolóra emlékeztető terv lett kiválasztva. A döntést az indokolta, hogy azonosíthatóvá vált a kezdetben megfogalmazott koncepcióval, fogalmakkal, miszerint változatosságot, flexibilitást, praktikusságot fejezzen ki, emellett a játékosságnak, felismerhetőségnek is eleget tett. Ezt követően az akasztón függő elemeket kellett kitalálni. Ehhez egy konyhai katalógust hívtam segítségül és az alapján terveztem elemeket, amelyek a menüpontok szimbólumaivá válhatnak. Több elemet rajzoltam meg Illustratorban, mert nem igazán voltam biztos benne, hogy melyik párosítás is működik majd igazán jól. Létrehoztam egy kategóriarendszert és később ez alapján választottam ki elemeket és rendeztem egymás mellé. A fő szempont az volt, hogy a játékosság, ez az ad-hoc jelleg, ami a konyhák polcán jelen van, a változatosság, ill. változtathatóság megmaradjon. Emellett persze törekedtem arra is, hogy egységbe rendeződjön ez a sok különböző elem, képes legyen harmonikus benyomást kelteni
9
2.
A tipográfia
Az arculati tipográfia evolúciója jól tetten érhető a logó típusoknál. Fő szemponttá később vált, hogy mindenképpen talpas betűt szeretnék alkalmazni, mert úgy találtam, hogy groteszk típusokkal egy indusztriális hatásra erősítek rá a logóban, amit mindenképpen kerülni szerettem volna. Bár a Futura Condesed medium, illetve ExtraBold kezdetben megfogott, mégis később a reneszánsz Garamond és a barokk Caslon tűnt számomra kézenfekvőbbnek, mert íves, talpas alakjával megtöri a grafikai elemek szögletességét, számomra jobban belesimul az elemekbe, főleg az Adobe Caslon Pro Semibold Italic változata, amit végül a logó végleges változatában alkalmaztam. 3.
Színrendszer
A logóban nem határoztam meg konkrétan színeket, kiválasztása a weboldal színeinek meghatározásánál lett végleges. A logót viszont úgy terveztem, hogy variálható legyen adott esetben, bizonyos elemek eltérő színűek lehetnek, erre nem volt kikötés a koncepcióban. Kivétel ez alól a végleges használat a kisarculati elemeken és a weboldalon.
Az elkészült logó
10
4.
Animált logó
A logót animáltam; egy ismert dallam ritmusára úsznak az elemek a képernyőn fentről lefelé eltérő irányban és sebességgel, végül egységbe rendeződnek az akasztón és végül konyhai elemek egységes 22 fokos elmozdulását követően kirajzolódik az Y's in the kitchen felirat. Az elkészült animáció a szakdolgozat blog oldalán elérhető.
IV.
Weboldal
1.
Weboldal tervei
A weboldal megtervezésénél a fő szempont a képek, tartalom kiemelésén volt, ezért semmi intro, ill. flash oldalban nem gondolkodtunk. A főoldal, ill. az aloldalak megjelenésénél az a cél, hogy a felhasználó az oldalra belépve egy konyhai "üzenőfallal" találkozzon, ezzel ráerősítve az otthonosság érzésére. Az üzenőfal jelleg abban nyilvánul meg, hogy a fixen fent, középen elhelyezett logó és menüsor alatt, a tartalom polaroid képet formázó keretekbe rendeződik, mely a homogén háttérre illeszkedve a dashboard hatást kelti. A változtatható hátteret egy homogén felület adja, csak ezen a felületen van lehetőség bannerek elhelyezésére. Egyéb tartalom, -főleg társoldalak, kedvenc oldalak elérhetősége, - elhelyezése az oldalsávban, ill. a jobb felső sarokban a közösségi oldalak elérhetősége (Twitter, Facebook, Pinterest) található, bal felső sarokban pedig az 'Rólunk' menüpont helyezkedik el. Kontakt, impresszum, oldaltérkép klasszikusan lábléc, középre igazítva. A weboldal szélessége és magassága fix, a tartalom elrendezéséhez egy keretrendszert alkottam. A szabály az volt, hogy 3x3-as tartalom elrendezés érvényesüljön, - a főoldalon is a kiemelt tartalmak ezen hálóra illeszkedjenek,- a logo és a menüsor helye mindig fix méretű középre zárt és az egész tartalom felületének 30% -át adja, ezután jön a főtartalom 60%, lábléc és tartalma 10%. A tartalom kiemelésére pedig bal, ill. jobb oldalon is 1515% üres teret hagytam. Vázlataimat a Balsamiq Mockups online tervező progamjában készítettem el. A programmal könnyen és egyszerűen lehet méretarányosan digitális skicceket készíteni készülő honlapunkról. 11
Weblapterv a Mockups tervező programmal
Rács szerkeszet tervezése a Photoshopban
2.
Színhasználat
Hangulatainkat,
érzéseinket
gyakran
jobban
meg
tudjuk
fogalmazni
egy
színárnyalattal, mint szavakkal. Ezért a tervezés sarokköve a megfelelő színrendszer, jól behatárolható color pallet meghatározása, a színek pszichológiájának ismerete. Színek megszületésének folyamatához újra vissza kell kicsit térni a kiindulóponthoz, vagyis a tervezés-inspirációgyűjtés szakaszához, hogy milyen érzéseket, gondolati képeket gyűjtöttünk ott össze. Olyan color kódokat kerestem, melyek kifejezik a dinamizmust, divat-trendkövetést, frisseséget, lendületet, szabadságot, ugyanakkor a 12
gasztronómia világától sem térnek el élesen, szóval majd harmonizálni fognak az ételfotók természetességével. A konkrét színválasztásban a legnagyobb segítségemre az Adobe webes applikációja, az Adobe kuler volt. Ingyenes regisztrációt követően lehetőség van színek kikeverésére, color pallet meghatározására, színhelyesen, RGB, CMYK értékekkel. A fő inspirációs színek a kék és piros, ehhez társult a barna és fehér, árnyalatokban pedig a friss, üde, dinamikus árnyalatokat kerestem. A színek esetén megpróbáltam a kék és pirosnak manapság trendi, pasztellbe hajló árnyalatát megtalálni, ami egyszerre mai, de ugyanakkor visszautal a múltba, vintage hatású, jellemző volt az 50-es, 60-as évek amerikai kultusztárgyaira (Cadillac, frigidaire). A logóban alapszín a barna (#251614) lett. A menüben pedig a kék (#88FCE3), illetve a piros (#D60F00) árnyalati jelennek meg. Piros – szeretet, élet, termékenység Barna – termékenység Kék – megfoghatatlanság Fehér – tisztaság, egyszerűség
13
3.
Webtipográfia
Menüben a sans-serif betűtípusokból választottam a FUTURA egyszerű, letisztult formavilágát, melyet Paul Renner tervezett és szintén visszatükrözi az 50-es, 60-as évek világát. A tartalom megjelenítésénél pedig a COURIER betűtípust választottam, szintén az 50es évekből, klasszikus megjelenése miatt, ugyanakkor jellemző bizonyos gasztro oldalak recept leírására, mely segítséget ad a webes konvenciók követésében.
4.
Weboldal elemei
Következő elemeket terveztem meg az alábbi fix méretekkel a már előre kialakított rács alapján.
Index oldal - inaktív
14
Index oldal – aktív
15
Főoldal - HOME
Aloldal - RECIPES
16
Tartalom oldal
17
V. Kommunikációs eszközök
1.
Kisarculati elemek
Mivel a vállalkozás még a kezdeti fázisban van, eddig nem rendelkeztek támogatókkal sem, ezért az üzleti partnerek felé szükséges egy kézzel fogható megjelenés is, ami természetesen a webes felület arculatának sajátosságait is magán hordozza. Ezért esett a döntés a kisarculati elemek megtervezésére. Az arculat főbb elemei:
logó
névjegykártya
fejléces papír
boríték
18
2.
Reklámtárgyak
Mivel a cég filozófiájában nemcsak receptmegosztás, mint egyedüli feladat szerepel, hanem szeretnének ajándéktárgyakat, a weboldalra, ill. cégre jellemző konyhai eszközöket értékesíteni, ezért a cég számukra könnyen legyárható és az arculatra jellemző termékek megtervezése volt a cél. Mivel ezek a tárgyak is a kommunikáció részeit képezik, ezért nem távolodtam el sem szín-, sem formavilágban az arculat eddigi elemeitől. A terv egy pohár, ill. tányéralátét szett variációira készült.
19
VI. Konklúzió
A szakdolgozat készítése során többféle kihívással is szembe kellett néznem; a tervezés, az inspiráció megszületésének folyamatán keresztül a konkrét tervezési munkálatakon át a programok használatáig nem egyszer kerültem nehéz helyzetbe, és tettem fel a kérdést hogyan tovább. Azonban mégis visszatekintve izgalmas volt az első tudatosan végrehajtott arculat megteremtése, az alkotás öröme és főleg a blog forma, mely mindig képes volt utat mutatni, az adott feladatokra fókuszálni és ezáltal végigvinni a kezdeti koncepciót, mellyel végül az ügyfél is elégedett volt. Sikerült vizuálisan megalkotni a cég által sugározni kívant identitást, az elemeket elrendezni egy átlátható, letisztult formába, mely az egyik legfontosabb elvárás volt a megrendelő oldaláról. A siker mércéje azonban majd a látogatottság függvénye lesz, ami remélhetőleg teljesülni fog.
20
