SZAKDOLGOZAT
Gábris Anna
2012
Budapesti Kommunikációs és Üzleti Főiskola
SZAKDOLGOZAT A 'Dr Hess' termékcsalád arculatának és honlapjának kialakítása
Csordás Zoltán Konzulens
Gábris Anna Új Média Grafikus
Budapest 2012
SZAKDOLGOZAT KIVONAT
Kulcsszavak: • • •
arculat csomagolás webdesign
Tartalom: • • • • • • • • • • • • • •
Összefogalalás 4.o. Summary 5.o Bemutatkozás, célcsoport 6.o Konkurencia, hasonló jellegű termékek arculata 6.o A logó kialakítása, használata 7.o. A logotípia kialakítása, használata 8.o. A logó és márkanév aránya, használata 8.o. A színhasználat 9.o. Tipográfia 10.o. Az arculat, csomagolás kialakítása 11.o. Az arculat egyéb megjelenései 12.o. Egyéb kommunikációs felületek 12.o weboldalról 13-15.o. Képmelléklet
Felhasznált szakirodalom: Virágvölgyi Péter – A tipográfia mestersége számítógéppel, Osiris kiadó 2004 Matthew Healey – Mi az a branding? Scolar kiadó 2009 Charlotte Fiell, Peter Fiell – Design kézikönyv, Vince kiadó 2007 Johannes Itten – A színek művészete, Göncöl kiadó 2002
Összefogalalás:
Szakdolgozatom témája egy termékcsalád honlapjának kialakítása, arculatának megtervezése. A ‘Dr Hess’ termékcsaládról szól, mely egyedileg készített kozmetikumokat, főleg krémeket foglal magába. Célom a meglevő arculat újragondolása volt, úgy, hogy az megfelelően szóljon a célcsoporthoz, valamint illeszkedjen a mai designtrendekhez is, tükrözze a termékek piacon és konkurensei között elfoglalt helyét – de sejtesse a termékek „kézműves” jellegét is. Szintén ezen szempontok alapján igyekeztem elkészíteni a honlapot is, mely mind bemutatkozási, mind vásárlási felületként is szolgál. Munkámat a meglévő arculat újragondolásával kezdtem, eldöntöttem, hogy abból mit érdemes megtartani, hogyan célszerű átalakítani. Majd a piacon levő hasonló jellegű termékek, cégek, honlapok arculatkialakítását vettem szemügyre. A feladat megoldása során a számos, egymásnak szinte ellentmondó kritériumnak való megfelelést tartottam a legnehezebbnek: a termékcsaládot úgy bemutatni, hogy friss, „mai” benyomást keltsen, azonban a célcsoport (30-50 éves korosztály) figyelmét is megragadja, valamint az egyedi, kézzel készített jellegnek se mondjon ellent. Valamint azt is érdekes kihívásnak találtam, hogy a termékek arculatát hogyan lehet webes felületre átültetni. A munkanaplócíme: szakdolgozatblog.wordpress.com
A honlap címe: szakdolg.atw.hu
2012. május 17. 4
Summary:
My thesis is aimed to elaborate the website of a product line, to design its image. The product line called Dr Hess includes piece produced cosmetics, mainly creams. My main goal was to change the existing design in a way that it should address the target group, should suit the latest design trends, should represent the products’ position on the market and among their rivals – but at the same time should suggest the „hand-made” quality of them as well. These were my main principles concerning the elaboration of the homepage, which is designed as both a display and a shopping surface.
I started my work by rethinking the existing surface: I decided what was worth keeping and what was to be changed. Then I examined the image designs of similar products, firms and homepages. The most difficult task was to meet all the many times opposing – criteria: to introduce the product line with a „fresh”, modern image so that it should make an impression on the target group (30-50 years old!) as well, and it should emphasize the hand-made characteristics of the products.
It was also a challenge how to adapt the image of the products to a totally different surface- the web.
The development diary can be read at: szakdolgozatblog.wordpress.com
The webpage can be found at: szakdolg.atw.hu 2012 May 17 5
Bemutatkozás, célcsoport A honlap a ‘Dr Hess’ termékcsaládról szól, mely egyedileg készített kozmetikumokat, főleg krémeket foglal magába. A jelenlegi termékek a következőek: arckrém, lábápoló krém, napozás utáni ápoló, testápoló, babaápoló. A vevőkör -kis vállalkozásról lévén szó- eleinte a készítő baráti, ismerősi köréből állt, a 40-50 éves korosztály tagjaiból. Egy új, összefogó arculat létrehozása segíthet e célcsoport bővítésében, illetve egyáltalában a termékek terjesztésében, jó hírnevének megalapozásában. A megcélzott csoport a magasabb iskolai végzettségű, 30-as éveiben járó családanyák, ill. a 40-50-es éveiben járó nők, akiknek fontos a környezettudatos életmód, így a természetes termékek vásárlása, érdeklődnek a kézműves, egyedi termékek iránt; akik ügyelnek a vásárolt produktumok származási helyére, így az olyan alternatív vásárlási helyeket preferálják, mint a kézművesvásárok, webes felület.
Konkurencia, hasonló jellegű termékek arculata (képmelléklet: 2.) Mielőtt elkezdtem volna az arculat kialakítását, gyűjtést végeztem hasonló termékek közt – mi jellemzi az arculatkialakítást, milyen formavilágban mozognak, mik a jellegzetes színek, etc. Mind a nemzetközi nagyvállalatok, mind a kisebb, itthoni cégek, vállalkozók termékei körében találtam elegánsan, egyszerűen kivitelezett megjelenést, melyeket példaként tartottam szem előtt. A logók általában kerekded, puha formákat öltenek, a márkanevek legtöbbször logóval együtt, logotípiaként jelennek meg, egy-egy jellegzetes betűtípussal. Általában egy színt tesznek ismertetőjegyükké, általában a kék ill. a zöld színek használata jellemző, fehérrel, pasztellszínekkel kombinálva, mivel a kozmetikumokhoz kapcsolódó tisztaságot, frissességet sugározzák. Sokban nem kívántam eltérni ezektől én sem, hiszen hasonló következtetésekre jutottam én is – úgy vélem e területen óvatosan kell alkalmazni a mai trendek minimalizmusát, hiszen ettől akár merevvé, rideggé is válhatnak az ilyen desingt viselő tárgyak, ami a szépségápolás területén kevéssé kívánatos.
6
A logó kialakítása, használata (k.m. 3.-4.) A logó kialakításánál figyelembe kellett vennem, hogy hol jelenhet meg: természetesen a csomagolásokon, csomagolás-tetőkön, címkéken elsősorban, illetve magától értetődően a honlapon. A kozmetikumok világában a leggyakoribb formák a tégelyek, tubusok, melyek mind a körformán alapulnak, így olyan logót alakítottam ki, mely ezekhez igazodik, jól mutat rajtuk. Először egy kör alapú, körbe foglalt jellel kísérleteztem, melybe a krémet szimbolizáló hullámvonal-csavarodás motívumát illesztettem bele, de ez kevéssé vált be, ezért úgy döntöttem, maradok a kör alapnál, de kilépek abból. Szerettem volna a termékek lényegét megragadni, hogy mit is kell szimbolizálnia a logónak: természetes krémek. A természetességet megjelenítendő használtam fel egy egyszerűsített levél-motívumot, melynek alakja illik a a kozmetikumoknál megszokott íves, lágy formavilághoz. Az első vázlatokat szabadkézzel készítettem, de már ezekhez is segéd-befogaló formákat használtam, (természetesen a kört, melyet feleződő arányokban osztottam fel egyenesekkel) majd a már megfelelő alakzatot szigorúbb, szerkesztett formákká alakítottam. Ezeknek szükséges volt egy kitöltő színt illetve vastagságot adni, hiszen a logónál kiemelten fontos, hogy kis méretben se „vesszen el”, karakteres, felismerhető formaként jelenjen meg. A logó domináns színe a sötétszürke, fehérrel, és egy világosabb szürke árnyalattal kiegészítve, így bármely színnel együtt jól alkalmazható. (A színekről bővebben az arculat ill. a színek résznél lehet olvasni.) Amennyiben a logót külön jelenítjük meg, ajánlatos teret hagyni körülötte, én ennek minimumát a szerkesztéskor használt formák segítségével határoztam meg: a logó köré írható egy kör, melyet egy négyzet foglal magába, az e köré írható kör nagyságának távolságát meghagyva jól felismerhető, értelmezhető lesz a jelkép. A logót nem tanácsos torzítva, más színekkel, illetve sötét, vagy erősen mintás háttéren alkalmazni.
7
A logotípia kialakítása, használata (k.m. 5.-6.) A márkanevet azonosítóként, logotípiaként szerettem volna használni, így egy olyan külön betűtípust választottam ki, mely sem az arculat, sem a honlap más részein nem szerepel. Mindenképp talpatlan betűre gondoltam, amely letisztult, könnyen olvasható, de finoman karakteres. Először végigpróbálgattam néhány fontot a márka nevével. Karakterességében a Majoram betűtípus megfogott, azonban például a ‘d’, ‘r’ betűk elegáns szerkesztésével szemben az ‘s’ betűk nehézkesek, kidolgozatlanok. Végül konzulensem, Csordás Zoltán javaslatára a Gloriola std. betűkészletet használtam fel. Törekedtem rá, hogy képszerű legyen ez a szövegrészlet - hiszen a logóhoz hasonlóan kis méretben is felismerhetőnek, karakteresnek kell lennie - így a ‘dr’ és a ‘hess’ szavak közti szóközt megszüntettem, hogy egységesebb legyen, a betűközöket csökkentettem, sűrítettem. Mivel egy rövid szövegről van szó, kissé zavarónak találtam, hogy két kiemelés, nagybetű is van benne, így a ‘d’ betűt kurrensre változtattam. Hogy még hangsúlyosabb legyen a ‘Hess’ szó kiemelése a ‘dr’ előtagot is lekicsinyítettem (ezek törzsmagassága egybeesik a verzál ‘h’ harántvonalával) valamint a két tag vastagságát különböző mértékben változtattam, így a ‘dr’ vékony, a ‘hess’ pedig „regular” vastagságot kapott.
A logó és márkanév aránya, használata(k.m. 7.-8.) Mivel a logó és a márkanév együtt képezik a termékcsalád megkülönböztető jegyét, így egy állandó arányt határoztam meg: a szöveg és a jelkép között a logót befoglaló négyzet felének méretét kell hagyni, illetve legalább feleennyi helyet szükséges a logotípia körül (tehát kétoldalt ill. felette és alatta is) hagyni. A logó magássága megegyezik a ‘h’ karakter verzálmagasságával, és az alapvonalra illeszkedik. Alkalmazására hasonló szabályok érvényesek, mint a logóra: nem szerencsés sötét, karakteresen mintás háttéren, vagy torzítva alkalmazni (beleértendő ebbe pl. a vízszintestől eltérő helyzet, mérettorzítás, más színben való használat etc.)
8
A színhasználat (k.m. 9.) Az eredeti csomagolások „design”-jából a termékek színekkel való megkülönböztetésének koncepcióját tartottam meg. A márkanév és logó az az elem, mely minden terméken megjelenik, így ennek egy semleges árnyalatot választottam, mely jól kiegészít bármilyen színt. Így esett a választásom a sötétszürke betűkre és logóra, világosszürke, szinte fehér alapon. A kiegészítő színeket igyekeztem logikusan, értelemszerűen kiválogatni. A leégés utáni krém színének egyértelműen egy hűvös hatású, türkiz árnyalat felelt meg. A lábápoló krém szintén a hűsítő hatásra alapozva kapta liláskék színt. A „legáltalánosabb”, a legtöbb embernek szóló termék a testápoló, így ez lett a zöld szín viselője, ez a természetesség, egészség szimbóluma. (Mivel még viszonylag kicsi a termékkínálat, így egyelőre túlzás lenne egy külön, férfiaknak szóló termékcsoport- és arculatkialakítás (mint ahogy azt a nagyobb cégek palettáján láthatjuk), így -ha megcélozni még nem is- de kizárni se akartam a férfi vevőket, ezért is kapta a testápoló a zöld színt, mely talán őket sem riasztja el.) Az arckrém a lila színt kapta, ez a nőiességgel, különlegességgel társított szín, valamint mivel éjszakai használatra ajánlott termék, erre is utal. A bébikrémnél szerettem volna elszakadni a megszokott pasztellszínektől, rózsaszíntől, világoskéktől; így vidámsága és játékossága miatt választottam a narancssárga színt. (Igyekeztem a vörös, sárga színeket kerülni, hisz ezek a test-kontextusban negatív felhangot hordoznak. Ezért inkább a hűvösebb, tisztaságot sugárzó kékes, zöldes tartományok árnyalatainál maradtam többnyire.) A honlapnál a zöld szín, valamint a fehér árnyalatok dominálnak, a megjelenő szövegeknél a szürke árnyalatok dominálnak. A zöld színt azért tartottam itt megfelelőnek, hiszen a cél az, hogy vásárló sokáig időzzön itt – a zöld „környezet” nyugatató hatása remélhetőleg erre ösztönzi a nézelődőt. Ezt fehérrel tompítottam, hisz az olvashatóságot ez szolgálja, illetve a termékek megjelenésére visszautalva kapott a „fejrész” fehér hátteret. (Bővebben a „Web” résznél.)
9
Tipográfia (k.m. 10) Mivel minél egyszerűbb, tisztább arculatot szerettem volna, rögtön a talpatlan betűcsaládok felé fordultam. A márkanévnek, a „Dr Hess” feliratnak a Gloriola betűtípust választottam, ez azonban csak ebben a feliratban szerepel, ez a logóval együtt a márka azonosítója. Mivel ez a felirat több, különböző méretű csomagoláson is szerepelhet, ill. a logótól nem elválasztandó, nem pontban határoztam meg a méretét, hanem a logóval összefüggő arányrendszerben. Mivel egalizálásra is szorult, ill. a honlap tekintetében nem feltétlenül van telepítve minden számítógépen ez a betűtípus, így vektorként/képként használtam. A honlapon és a csomagolásokon szereplő kenyérszövegnek szintén talpatlan betűt szerettem volna, hiszen a címkéken kiemelten fontos a minél jobb olvashatóság, mivel viszonylag kis felületeken kell sok információt közölni. Ezért választottam a Candara betűtípust. A modern, letisztult betűk ellenpárjaként, a címkéken, egyéb kommunikációs felületeken, a kiegészítő információkat hordozó, ám viszonylag nagy méretű feliratokhoz a bájos nevű, JaneAusten típus kézírás jellegű betűit választottam, mely a termékek kézműves jellegét erősíti, lágyítja az éles, szögletes felosztást. A honlapon szintén a Candara betűtípust láthatjuk, struktúrálását a méretváltoztatással ill. félkövér kiemelésekkel oldottam meg. A nagyobb méretben megjelenő feliratok (pl.: márkanév, termékmegjelölés) egalizálásra kerültek, a csomagoláson megjelenő, nagy betűkkel íródott fantázianevek pedig a dekorativitás érdekében ritkításra.
10
Az arculat, csomagolás kialakítása (k.m. 11.-15.) Számomra csomagolások kialakítása volt a legnehezebb feladat. Mindenképp valami lágy, krémekhez illő formavilágot szerettem volna alkalmazni, azonban ez folytonfolyvást a funkció rovására ment. Eleinte félkörös, íves formákat használtam, mindenképp fotót is szerettem volna alkalmazni, de végül erről letettem – azaz a fotó csak visszafogottan jelenik meg. A csomagolások tervezésénél a másik nehéz feladat az volt, hogy egy nagyon változatos formavilághoz kellett igazodni: hisz minden egyes termék más-más csomagolást igényel. A szépségiparban ugyanúgy találkozunk kis üvegcsével, mint tégellyel, tubussal, melyeknek más-más aránya van. A másik kihívás ezeknek a méreteihez igazodni: néhány esetben alig két-három centiméteres hely áll rendelkezésre. Ezért a könnyen értelmezhető, kis méretben is hatásos, felismerhető fény-árnyék kontraszthoz fordultam. Ez elsősorban a címkék felső és alsó része között jön létre. A felső rész, ahol a logó és a márkanév jelenik meg, alapvetően egy világos részt képez, hisz a felirat világosszürke háttérre kerül; a színes alsó részek pedig ehhez képest közepes tónusértékükkel egy sötét foltot képeznek. Másodfokon a sötét-világos kontraszt értelemszerűen a két fő részen elhelyezkedő szövegekkel jön létre – a felső rész fehér hátterén sötétszürke szöveg található, az alsó színes folton pedig a fehér karakterek tűnnek ki. Az éles elválasztást finomítandó az alsó rész háttere szabálytalan mintázatot kapott, mely a színen belüli enyhe világos-sötét eltérésből áll, ennek alapja egy fotó volt. A felső és az alsó rész aránya változó, attól függően, hogy vízszintes vagy függőleges arányú felületre kerül. Így három arányban használtam: a felső és az alsó rész 1:1-es felosztásban, 1:2-es illetve 1:3-as osztásban. Az alapvető elem a logó és a márkanév, ennek a magassága (a körülöttük hagyandó teret is beleszámítva) sokszorozódik. Így létrejött egy álló és egy fekvő téglalap formájú címke, ill. egy közel négyzet alakú. A feles arányú címke pici tégelyeken jelenhet meg, ez praktikus lehet azért is, mert a nagy arányú világos folt optikailag növeli a termék méretét. Az elülső címkékre került a márkanév, a termék fantázianeve, maga a termék megnevezése, ill. kiegészítő információk, pl. illatosítás. Ezek középre igazítva jelennek meg. Mivel a legfontosabb maga a termék megnevezése (pl. testápoló, arcregeneráló), így ez a legnagyobb méretű (ez változó a megnevezés hosszától függően, azonban tanácsos minimum a kisebb betűméret kétszeresét alkalmazni, hogy kiemelkedjen), optikailag az
alsó rész középpontjába került. A hátsó címkékre az alkalmazás, összetevők ill. az egyéb szükséges információk kerültek. Itt a horizontális felosztással és a színekkel utaltam vissza az elülső címkékre.
Az arculat egyéb megjelenései (k.m. 16.-17.) Mivel a vállalkozásnak még nincsen külön boltja, ezért a vásárlás legvalószínűbben a webes felületen fog létrejönni – a kozmetikumokat így csomagként kapják meg a vásárlók, ilyenkor kedves gesztus lehet az egyedi levélpapír, illetve boríték is, amely illeszkedik a termékek jellegéhez, és remélhetőleg erősíti a személyes kapcsolatot az eladó és vásárló között, és további vásárlásra ösztönözhet. A névjegy a kapcsolattartás fontos eszköze, mely tükrözi a tevékenységet, indikálja a vállalkozás jellegét, nagyságát, helyét az üzleti életben. Ezeknél is természetesen a logó visszaköszön, valamint a címkéknél alkalmazott fotó ill. betűtípusok. Itt azonban igyekeztem visszafogottan használni ezeket, hiszen itt is kis felületekről van szó, valamint talán itt a legfontosabb a használhatóság.
Egyéb kommunikációs felületek (k.m. 24.) Mivel a termékcsaládnál fontos a webes jelenlét és terjeszkedés, így bannereket is készítettem, mint kommunikációs felületet. Itt, mivel kis felületről van szó, igyekeztem tömören fogalmazni, valami olyan hatást alkalmazni, ami ekkora felületen is érvényesül, de tükrözi a honlap, termékcsalád stílusát is. Az első bannernél egyszerű geometriai formákat alkalmaztam, ill. egy pulzáló hatásra alapoztam, a másodiknál a címkéken és honlapon is megjelenő fotó tűnik fel, itt a logó kerek formájához illő forgó mozgás jelenik meg. Mindkét kis hirdetés fő színei: a fehér, sötétszükre, ill. egy középtónusú zöld. A bemutatkozó videóban is hasonló hatásokat alkalmaztam, itt a megismert háttér jelenik meg, ezt is igyekeztem megmozgatni. Itt inkább a finomabb hatásokra alapoztam, áttűnésekre, áttetszőségre. Itt a márkanév és honlapcím megjelenítése mellett arra is van idő, hogy a termékeket felsorolása is megjelenjen. A célom az volt, hogy kellemes, nyugodt benyomást tegyen az érdeklődőre – ezért is alkalmaztam pl. a zöld hátteret. 12
A weboldalról (k.m. 18.-23.) A weboldal felépítésénél is gyűjtéssel kezdődött a munkám, leginkább kozmetikai témájú honlapokat vettem szemügyre. Számomra negatív tapasztalat volt, hogy a legtöbb honlap már kezdőlapján is rengeteg információt zúdít a nézelődőre. A megszokott menüsor mellett az épp aktuális, vagy akciós termékek jelennek meg; sok, néha feleslegesen mozgó fotóval, animációkkal. Az oldal így szertelen lesz, a túlzsúfoltság hatását kelti és mivel mindent túlságosan kiemelnek, semmi sem lesz igazán kiemelve. Valamint szintén negítv tapasztalat volt, hogy sok honlapon kevéssé lehet eligazodni, nem egyértelműek a menük nevei, összeolvad a vásárlási felület a nyereményjátékokka, reklámokkal. Ezt szerettem volna elkerülni, tiszta, átlátható, informatív honlapot létrehozni. Nem szerettem volna eltérni a hagyományos honlapok felépítésétől, úgy gondolom, hogy a webes konvenciók megfelelően alkalmazva segítik az eligazodást, az oldal használatát. Azonban a hosszasan töltődő introk hagyományát tanácsosnak találtam elhagyni, magát a site-ot úgy felépíteni, hogy az tükrözze a cég és termékei jellegét. A kezdőoldal így rögtön az első menüpont, a készítő bemutatása lett, valamint itt kaptak helyet az aktuális ajánlatok (pl. akciók) is. Ezen kívül még három menüpont kapott helyet, logikai sorrendben; a bemutatkozás után a termékek közt válogathat az érdeklődő, majd a ‘vásárlás’ menüpontnál az előzőleg felkeltett érdeklődését a tettek mezejére viheti. A termékeknél az egyes árukról lehet részletesebben olvasni, pl. az összetevőket. Eleinte felmerült bennem a gondolat, hogy logikus lenne ezt egyben a vásárlás színhelyévé is tenni, de nem biztos, hogy a látogató tudná, hogy itt kell ezt a funkciót keresni, és végül elegánsabbnak is tartottam ezt egy külön menüpont alá helyezni, a kapcsolatot a két menü közt az oldalon belüli linkeléssel oldottam meg. Az utolsó menü alatt a kapcsolatbalépési lehetőséget találja a honlap látogatója, a láblécben található közösségi oldalak ikonjaira kattintva pedig meggyorsítható ez a folyamat. A krémek címkéinek tervezésekor más eszközöket, hatásokat kellett alkalmazni, hiszen viszonylag kis méretű felületekről van szó, amelyek görbülő, kerekded formákon jelennek meg, ill. ezeket befolyásolhatja akár a nyomtatás minősége is. Így azon a sötétvilágos ill. a telítettségi kontrasztra alapoztam. A weboldalon azonban finomabb megoldások is érvényesülni tudnak, így itt inkább átmeneteket, fotó alapú elemeket alkalmaztam, egy olyan „környezetet” szerettem volna létrehozni, ahol szívesen időznek a vásárlók. 13
Először a Balsamiq Mockup programjával felvázoltam néhány lehetséges elrendezését a megjelenítendő elemeknek. Az horizontális-vertikális irányban elhelyezett menük közül végül a vízszintes irányúnál maradtam. Majd Photoshop-ban folytattam a tervezést, ekkor már a tónusokat alkalmazva, illetve a legalapvetőbb megjelenítendő elemekkel. Hogy legyen egy rendező elve az oldalnak, a Modular Grid kiegészítő segítségével egy rácsszerkezetet adtam meg, mely mind a honlap elemeinek, mind a megjelenítendő szövegek és képek elhelyezésének alapját képezi. Az oldal két szélét üresen szerettem volna hagyni – a háttérkép tűnik csak ki, így a szövegeknek, információknak keretet ad, az olvasásnak megfelelő környezetet biztosít. Így horizontális-vertikális irányban elhelyezett menük közül végül a vízszintes irányúnál maradtam. Eleinte egy almenüsort is terveztem a termékeknek, azonban ezt egyszerűbbnek találtam egy legördülő megoldással helyettesíteni. A háttérben megjelenő fényképre (amely a termékcímkék háttereire rímel) egy kissé átlátszó fehér elem került, amely a megjelenítendő tartalmak hátterét adja. Ezen belül feleződő osztásokat használtam, mind vertikális, mind horizontális irányban. Ez a felosztás csak a termékek menüpontban nem jelenik meg első látásra, itt egy legördülő listából válogathatunk az áruk közül – itt a megjelenő képek a világos háttér szélességének negyedét teszik ki. A szövegek alapvetően négyféle formázással jelennek meg: a főcímek, címszavak 30 pontos betűmérettel, sötétszürke színben; az alcímek 20 pontos betűmérettel, középszürke árnyalattal, ill. ezek között is létrehoztam egy fokozatot, 25 pontos betűméretet alkalmazva, valamint színben is a két szürke közt maradva. A linkek kiemelését sötétzöld színnel oldottam meg, ezáltal visszakapcsolódva a háttér színéhez. A terveken még nem szerepelt, de az oldal elkészítésekor szükségesnek találtam a szövegeket, képeket a távolságokon kívül valamely más módon is elválasztani, ezt végül egy enyhe, világoszöld és szürke pöttyözéssel oldottam meg, amely mind a linkeknél, mint a szövegaláhúzásoknál vissza-visszatér. Habár az oldal túl színesnek, lágynak hathat, úgy vélem egy ilyen témájú lapnál ez megengedhető. Mivel a legelterjedtebb a 1024×768 pixeles felbontás, én is ebben a méretben készítettem el az oldalt. Mivel azonban az ennél nagyobb méretek is egyre inkább elterjedtek, a háttérkép nagyobb méretet kapott, illetve az oldal középre igazodik, hogy a nagyobb felbontásnál se hasson „bántóan” a honlap. A honlap a Dreamweaver programmal készült, felépítését divekkkel oldottam meg. Egy div adja meg a honlap befoglaló méretét, ezen belül az egyes elemek – fejléc, menü, szöveg helye- külön „dobozokat” kaptak. 14
A tartalom helyénél az egyes aloldalak külön-külön felosztást kaptak, ezek is egy-egy divből állnak. A honlapnál az találtam a legnehezebbnek, hogy hogyan lehetséges visszakapcsolódni a csomagolások külsejéhez. Illetve az is kihívás volt, hogy hogyan lehet alapvetően hosszú, informatív tartalmakat úgy elosztani, hogy a funkcióját is ellássa, azonban ne „ijessze” el a nézelődőt, megmaradjon az oldal szerves elemének, váljon szinte képi tartalommá. Úgy vélem, hogy ez a honlap a termékek jelenlegi prezentálására megfelel, azonban a cég esetleges növekedésekor, több termék mejelenésekor - ha nem is teljesen de esetleg részeiben kiegészítésére, esetleg más struktúrára lesz szükség. A honlap címe (egyelőre): www.szakdolg.atw.hu
15
Képmelléklet
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
Címkék kialakulása, vázlatok
12.
13.
14.
15.
16.
17.
18.
19.
A honlap vázlatai
20.
21.
22.
23.
24.
25.
