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 Gábris AnnaKonzulens Ú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 folyton-

folyvá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ét-

vilá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.