Zpracování vizuálního stylu společnosti Monkey Nation a interaktivní internetové aplikace pro podporu prodeje

MASARYKOVA UNIVERZITA FAKULTA INFORMATIKY

Zpracování vizuálního stylu společnosti Monkey Nation a interaktivní internetové aplikace pro podporu prodeje DIPLOMOVÁ PRÁCE

Petr Líčeník

Brno, jaro 2008

Prohlašuji, že tato práce je mým původním autorským dílem, které jsem vypracoval samostatně. Všechny zdroje, prameny a literaturu, které jsem při vypracování používal nebo z nich čerpal, v práci řádně cituji s uvedením úplného odkazu na příslušný zdroj.

Chtěl bych poděkovat panu doc. Mgr. Vítězslavu Švalbachovi za jeho ochotu a odborné rady při vytváření této diplomové práce.

Shrnutí Diplomová práce je rozdělena do dvou částí. První z nich je grafická část sestávající z tvorby obchodní značky/logotypu, na ni navazuje vypracování kompletního vizuálního stylu společnosti. Ten je vyjádřen grafickým manuálem. Další prvkem této části je vytvoření několika (cca 10) grafických návrhů módního oblečení (potisk na trika). Druhým okruhem diplomové práce je tvorba internetové aplikace pro podporu prodeje výrobků společnosti (e-shop). Při řešení tohoto úkolu je využito vybrané Open Source prostředí, které je implementováno do podmínek konkrétní firmy a národního prostředí.

Klíčová slova Logotyp, značka, Corporate Identity, Corporate Design, vizuální styl, manuál vizuálního stylu, marketingová strategie, internetová prezentace, internetový obchod, HTML, PHP, CSS, Smarty, Prestashop

Obsah

Shrnutí

3

Klíčová slova

4

1 Úvod

6

7

2 Corporate Identity

2.1 Pojem Corporate Identitiy

7

2.2 Sociální význam Corporate Identity

8

2.3 Vizuální styl – Corporate design

9

2.4 Značka

9

2.5 Písmo a typografie

12

2.6 Manuál vizuálního stylu

12

3 Společnost Moneky Nation

13

13

16

3.1 Marketingová strategie společnosti Monkey Nation

4 Vizuální styl společnosti Moneky Nation

4.1 Značka

16

4.2. Manuál vizuálního stylu

20

5 Internetová prezentace společnosti Moneky Nation - internetový obchod 22

5.1 Open Source licence

22

5.2 PrestaShop

22

5.3 Technická specifikace PrestaShopu

24

5.4 Implementace PrestaShopu

26

5.5 Legislativní požadavky na internetový obchod

29

6 Návrhy potisků triček

30

7 Závěr

31

Seznam použité literatury

32

Příloha A Náhled manuálu vizuálního stylu společnosti Moneky Nation

33

Příloha B Náhled návrhů potisků triček

60

1. Kapitola - Úvod

1. Kapitola

Úvod

Během svého studia na Fakultě informatiky Masarykovy Univerzity jsem se rozhodl profilovat svoje zaměření na grafický design. Svoji bakalářskou práci jsem věnoval tomuto tématu a proto bylo nasnadě, že se jím budu zabývat i ve svoji diplomové práci. Jako téma jsem si zvolil zpracování vizuálního stylu společnosti Monkey Nation, jejíž představení naleznete v další části této práce. Vytvoření vizuálního stylu je nejdůležitější částí diplomové práce a jejím výstupem je Manuál vizuálního stylu, jehož náhled se nalézá v příloze této práce. Součástí grafické částí je také vytvoření několika návrhů potisků triček, které poté použiji k naplnění internetového obchodu společnosti Monkey Nation. Implementace internetového obchodu je druhou částí této diplomové práce. Vzhledem ke komplexnosti požadavků na internetovou aplikaci a náročnosti jejich zpracování jsem se rozhodl využít Open Source řešení, které implementuji do konkrétních podmínek firmy. Toto řešení mi přišlo vhodnější, než se pokoušet budovat takovou aplikaci od nuly. Domnívám se, že takto vzniklé řešení by nebylo v praxi příliš použitelné, právě kvůli vysokým požadavkům, kladených na takovouto aplikaci. E-komerce je rychle rostoucím odvětvím a standardní aplikace tohoto druhu svoji aplikační složitostí vylučují, aby je v rozumném čase programoval jeden člověk. Struktura diplomové práce odpovídá postupu prací na projektu. Začíná teoretickým vymezením Corporate Identity, na to navazuje popis zpracování Corporate Identity společnosti Monkey Nation, jehož výstupem je značka a především Manuál vizuálního stylu. Druhá část začíná 5. kapitolou, ve které popisuji vybrané Open Source řešení a postup jeho implementace. Závěr kapitoly je věnován legislativním požadavkům na internetový obchod. Poslední kapitola se stručně věnuje návrhu potisků triček, jak o nich byla řeč výše.

2. Kapitola - Corporate Identity

2. Kapitola

Corporate Identity 2.1 Pojem Corporate Identitiy Podobně jako jednotlivec, i každá organizace nebo společnost si vytváří svoji vlastní individualitu. Zřetelné rozdíly v této identitě rozlišují organizaci od podobně zaměřených subjektů a dovolují zákazníkům ji jednoznačně identifikovat. Zaměstnancům zase kvalitní Corporate Identity dovoluje ztotožnit se se společností a jejími cíly. V dnešním globalizovaném světě a v prostředí neúprosné konkurence se stává pro každou obchodní společnost Corporate Identity nejdůležitějším způsobem dlouhodobé komunikace nejen se zákazníkem, ale i s dodavateli a konkurenty. Návrh Corporate Identity spočívá promyšleném

Obrázek 1.1.1: Model Corporate Identity s vstupy a výstupy


vystupování společnosti před veřejností, tedy nejedná se jen o vizuální styl společnosti, ač koliv hraje nejdůležitější roli. Corporate Identity je skupina vlastností a hodnot, které charakterizují obchodní společnost, ztělesňují a představují její jedinečnou identitu. Vytváří obraz, který identifikuje společnost a její význam v obchodním světě. Corporate Identity může být složena z mnoha aspektů, které dohromady vytváří styl komunikace společnosti se zákazníky a tím i obraz, který si vytvoří. Při správném návrhu Corporate Identity je utvářen celistvý dojem o firmě. Zda bude tento dojem dobrý, rozhodují kromě kvality dílčích prvků i vizuální přitažlivost a návaznost mezi jednotlivými prvky. Corporate Identity můžeme rozdělit na tři části: ● Corporate design (značka, logotyp, reklamní tiskoviny…) ● Corporate communication (reklama, public relations, informace…) ● Corporate behavior (interní hodnoty, normy …) Každá firma má svoji Corporate Identity rozpracovánu na různé úrovni. V nejhorším případě každý tiskový výstup, prospekt vypadá naprosto jinak. Zákazníci se poté oprávněně zamýšlejí nad tím, jak je taková společnost schopna produkovat kvalitní zboží nebo služby, když není v jejich silách vytvořit profesionálně vypadající dokument. V neutrálním přístupu společnosti k Corporate Identity jsou propagační dokumenty společnosti zpracovány jednotně a profesionálně. Ovšem méně exponované výstupy jako štítky na dopisy s nimi nekorespondují. V ideálním případě jsou jednotně zpracovány všechny tiskové výstupy společnosti, od propagačních materiálů až po jednotnou šablonu e-mailů. Zákazníci vidí jednotný a jednoduchý styl společnosti a dokáží jej na první pohled identifikovat. [2]

2.2 Sociální význam Corporate Identity Lidská společnost obsahuje minority a jejich členové mají zcela přirozenou a intuitivní tendenci vytvářet něco, co se v obchodním světě nazýváme Corporate Identity. To jim umožňuje rozpoznat každého dalšího člena, aniž by s ním skupina dříve přišla do kontaktu. Toto pouto vzniklo primárně z důvodu stejných kulturních hodnot, stejných ekonomických podmínek, podobných zkušeností atd. Členy společenských skupin, jakými jsou například fotbaloví fanoušci, posluchači určitého druhu hudby (hiphop, techno …), příslušníci některých církví můžeme snadněji rozlišit právě díky jejich vzhledu, chování, mluvy atd. Uvnitř jednotlivých skupin vzniká silný pocit, který by se dal vyjádřit tvrzením „musíme dávat pozor na každého z nás“ a „důležitější než úspěch jedince je úspěch celé skupiny“. Cílem tohoto jednání je zajištění existence skupiny jako celku v majoritní společnosti. Hranice mezi majoritou a minoritou musí být jasně vymezena, na druhou stranu ale má také umožňovat prostupnost pro nové členy. Naopak pohyb ven ze skupiny má co nejvíce znesnadňovat. Corporate Identity sociální skupiny je prezentována a povzbuzována především vnějším vzhledem (oblečení, úprava vlasů atd.), rituály, sociálními návyky atd. [1]


2.3 Vizuální styl – Corporate design Vizuální styl hraje nejdůležitější roli při prezentaci společnosti jak navenek, tak i směrem k vlastním zaměstnancům a spolupracovníkům. V nejširším slova smyslu vyjadřuje vizuální styl společnosti hodnoty a cíle organizace, její obchodní potenciál a charakteristickou roli. Můžeme rozlišit čtyři základní funkce vizuálního stylu společnosti. Tři se vztahují k externím subjektům, jedna k internímu prostředí společnosti. [1] 1) Vizuální styl umožňuje základní viditelnost a rozpoznatelnost společnosti pro okolní svět. Pro každou obchodní nebo neziskovou společnost je základním předpokladem to,aby o ní lidé věděli a dokázali si spojit její vizuální styl s názvem společnosti a s konkrétním druhem činnosti, kterou vyvíjí. 2) Vizuální styl symbolizuje společnost a její aktivity a z toho důvodu se přímo podílí na jejím obrazu a pověsti v okolním světě. Existuje zde přímý vztah mezi vizuálním stylem společnosti a její pověstí. Z toho plyne, že Corporate design hraje podpůrnou roli při vytváření celého obrazu společnosti v prostředí, kde působí. 3) Vizuální styl vyjadřuje strukturu společnosti tím, že rozlišuje mezi jednotlivými divizemi nebo jednotkami společnosti a usnadňuje tak orientaci ve struktuře společnosti. Zde můžeme rozlišit tři koncepty podle vnitřní organizace společnosti. Je to monolitický vizuální styl pro celou společnost a její produkty, dále pak modifikované vizuální styly pro jednotlivé divize společnosti nebo pro jednotlivé produktové řady a nakonec případ, kdy společnost využívá více vizuálních stylů, například pokud spravuje více obchodních značek. 4) Čtvrtou, interní funkcí vizuálního stylu je vytváření identifikačního vztahu mezi společností a jejími zaměstnanci. Tento vztah je pro obchodní společnost zcela zásadní a Corporate design v něm hraje jak symbolickou, tak i zcela konkrétní roli. [1] Zvláštní pozornost vizuálnímu stylu společnosti je třeba věnovat během jeho zavádění nebo jeho změně. Pokud je vizuální styl jednou zaveden, podle praxe pozornost k jednotlivým aspektům postupně klesá. Vizuální styl potřebuje být neustále spravován na strukturální úrovni a využíván zaměstnanci společnosti v souladu s vývojem organizace a její činnosti. Corporate design je v praktické rovině tvořen značkou společnosti, písmem a typografii, architektonickým vyjádřením a dalšími opatřeními. [1]

2.4 Značka Logotyp, značka – grafický symbol, text nebo jejich spojení je hlavní a nejdůležitější součástí jakékoliv Corporate Identity. Základními požadavky jsou jednoduchost, čitelnost, použitelnost a jednoznačnost. Značka společnosti jednoznačně vyjadřuje charakter, tradici a image společnosti. Musí být snadno zapamatovatelná a i v jakémkoliv prostředí jasně rozpoznatelná.


Značky můžeme rozdělit na čtyři druhy ● obrazové značky ● logotypy ● iniciálové značky ● kombinované značky Obrazové značky se zdají být účinnější než psané značky (logotypy, iniciálové značky). Stává se nutností v prostředí, kde je potřeba vyjádřit jméno společnosti i v jiných jazycích nebo abecedách. Například logotyp využívající japonské písmo nebude v Evropě nejúčinnější. Značka využívající symbol nebo ideogram bude spíše zachovávat smysl sdělení na všech možných světových trzích. Příkladem z nekomerční sféry může být znak Červeného kříže, který je dobře známý po celém světe a nepotřebuje doplňující popis. Z komerční oblasti můžeme zmínit značky japonských výrobců automobilů. Jiným příkladem může být značka produktu Coca-cola. Ta je jistě také na první pohled rozpoznatelná i v případech, kdy nápis na lahvi není psán latinkou, ale arabským písmem. [1] Dalším důležitým aspektem značky je barevnost. Barvy jsou důležité pro rozpoznání značky, ale není vždy výhodné, aby byly nedělitelnou součástí značky. Barevnost tak může ovlivňovat funkcionalitu značky. Jako příklad lze uvést značky tabákových společností, které se dokáží barevně proměňovat podle produktové řady. Některé barvy jsou asociovány s určitými emocemi, které může designer značky využívat. Například syté barvy, jako třeba červená, se používají pro zvýšení pozornosti řidičů a bývají proto využívány společnostmi, které se snaží vzbudit okamžitou pozornost. Dále jsou například kombinace červené, bílé a modré využívány společnostmi, snažícími se vzbudit národnostní cítění. Zelená je často spojována se zdravým jídlem a světle modrá nebo stříbrná bývají využívány k propagaci takzvaných „light“ produktů. Jiné značky využívají měkkých tónů a nízké sytosti barev k zdůraznění spolehlivosti, kvality nebo uvolnění. [1] Barevnost může být také užitečná k vyjádření příslušnosti jednotlivých druhů produktů ke značce. Teplé barvy se mohou vztahovat k teplému jídlu a proto se objevují na mnoha značkách prezentujících rychlé občerstvení. Obráceně studené barvy jsou využívány k propagaci hubnoucích a dietních produktů. Co se týče samotného designu značky, je potřeba mít na paměti několik základních pravidel. Značku je nejlépe vytvářet pomocí vektorové grafiky. Potom může být značka libovolně zvětšována bez ztráty kvality. Dále se nedoporučuje využívat barevné přechody a obecně velké množství barev. Značka se tak může stát jen jakousi barevnou čmouhou, kterou zákazník nedokáže jednoznačně identifikovat. Vyvarovat bychom se samozřejmě také měli různých clip-artů a vykrádání již užívaných značek. Na následují straně jsou zobrazeny některé příkldy značek, ilustrující výše uvedené. Značky nebyly vybírány podle estetické kvality. [1]

10


Obrázek 1.4.1: ukázky používaných značek První řada: Mazda, Apple, British Petroleum (obrazové značky, bp - kombinovaná značka) Druhá řada: Coca - Cola a její jazykové mutace (logotyp) Třetí řada: evian (balená voda), McDonald’s (rychlé občersvení)

11


2.5 Písmo a typografie Nedílnou součástí každého Corporate designu je také vhodný typ písma. Písmo slouží především k vyjádření sdělení a proto by vybrané písmo mělo být jasně čitelné a úměrné dalším součástem vizuálního stylu společnosti, především značce. Je vhodné volit písmo spíše konzervativní, nepodléhající módním vlnám. Jedině tak je možné zajistit, aby bylo písmo užíváno trvale a na všech druzích tiskovin společnosti. Písmo se tak stane nedílnou součástí profilu společnosti, což je především v dnešní době snadno dostupných grafických a sázecích programů důležité. Často je také kanonizováno všední písmo, používané pro běžnou korespondenci, například faktury atd. [1]

2.6 Manuál vizuálního stylu Výstupem při tvorbě vizuálního stylu je grafický manuál nebo také manuál vizuálního stylu, který se tak stává nejdůležitějším dokumentem vyjadřující Corporate Identity. Manuál v sobě zahrnuje a kodifikuje všechny výše uvedené položky – především značku, pravidla jejího používání, firemní barevnost, dále pak písmo a typografii atd. Manuál vizuálního stylu je jakousi závaznou vnitropodnikovou normou či směrnicí. Používáním manuálu vizuálního stylu se společnost vyvaruje fatálních chyb při tvorbě firemních materiálů.

12

3. Kapitola - Společnost Monkey Nation

3. Kapitola

Společnost Moneky Nation Společnost Monkey Nation je právě vznikající firma produkující módní oblečení, především trička s potiskem. Společnost nemá a zatím neplánuje kamenný obchod, pouze využívá prostory pro výrobu triček (aplikaci potisku na trička). Společnost se chce vymezit svoji originalitou a přesným zacílením na okruh potencionálních zákazníků.

3.1 Marketingová strategie společnosti Monkey Nation Marketingová strategie je nástroj, jehož účelem je nastavení cílů a prostředků společnosti tak, aby obchodní výsledky byly co nejuspokojivější. Příprava marketingové strategie je pro nově vznikající menší firmy kriticky důležitá. Při zpracování marketingové strategie bereme do úvahy závěry z analýzy zákaznických segmentů (STP marketing) a dále zaměříme pozornost zejména na marketingová “4P”: nabízený produkt nebo službu (Product), místo prodeje, způsob distribuce (Place), stanovení cenové politiky (Price) a marketingové aktivity, kterými budeme oslovovat zákazníky a propagovat nabídku (Promotion). [3]

Zákaznické segmenty Všichni zákazníci nemají stejné potřeby, a chceme-li u nich uspět s naší nabídkou, musíme s nimi komunikovat tím nejvhodnějším způsobem. Ve většině případů nebude správným řešením nabídnout každému zákazníkovi specifické, na míru šité řešení. Tato varianta výrazným způsobem zvyšuje pracnost a náklady, proto je vhodné ji použít jen v případě, kdy se společnost zaměřuje na malý počet lukrativních zákazníků, což není ale náš případ. Kompromisem je rozdělení zákazníků podle jejich potřeb a chování do více segmentů. Kromě aspektu, že oslovíme nejvhodnějším způsobem cílovou skupinu, má rozdělení do segmentů další obrovský význam: podle počtu zákazníků a jejich nákupního potenciálu zjistíme, který segment je pro nás nejdůležitější, a kterému bychom tedy měli věnovat největší pozornost. [3] V případě společnosti Monkey Nation budou cílovou skupinou mladí lidé od 18 do 27 let, žijící ve větších sídlech nad 50000 obyvatel, intenzivně se účastnící společenského a kulturního života ve městě. Bude se jednat tedy především o studenty vysokých škol. Dále je třeba uvést,

13


že cílovou skupinou budou lidé většinového proudu společnosti, nesnažící se důrazně proti ní vymezovat. To znamená, že potenciálními zákazníky nebudou lidé vyznávající alternativní způsob života a především oblékání. Máme na mysli tzv. „hippie“ nebo příznivce okrajových hudebních žánrům, např. rock metal, atd. Co se týče hudebního vkusu, náš zákazník je příznivcem pop music a jejich odnoží. [3] Tuto cílovou skupinu nyní rozdělíme do segmentů podle následujících kritérií ● pohlaví zákazníka ● životní standard zákazníka ● jakým způsobem tráví zákazník volný čas (sport, poslouchání hudby, umělecká činnost atd) Z uvedeného vyplývá, že jsou pro nás nejdůležitějším zákaznickým segmentem muži (trika s jednoduchým, decentním potiskem jsou určena především pro muže, ženy si mohou dovolit i složitější a výraznější vzory), studující technický obor (mají více možností uplatnění již při studiu, dá se proto předpokládat, že budou moci operovat s větším množstvím finančních prostředků), navštěvující minimálně dvakrát týdně společenské akce (diskotéka, klub, kino, párty atd.) [3]

Marketingová „4P“ Pro malé firmy není vhodné prosazování tzv. “nákladové strategie”, kdy klíčem k úspěchu je hromadná, masová produkce s co nejnižšími náklady, které tak umožňují dosažení co nejnižších cen na trhu. Tuto strategii si mohou dovolit úspěšně praktikovat pouze velké firmy s dominantním tržním podílem. Pro malé firmy je daleko výhodnější soustředit se na vybraný tržní segment nebo dokonce malý tržní výklenek (niku), a zde nabídnout zákazníkům přidanou hodnotu - ať již se jedná o doprovodné služby, kvalitu nebo unikátní produkt, za které jsou zákazníci ochotni zaplatit přiměřenou cenu. Takováto strategie by měla být zohledněna v marketingovém mixu. Je třeba se zaměřit zejména na tyto záležitosti: Produkt/služba: jakou hodnotu poskytují zákazníkovi, jaká je jejich výhoda proti konkurenční nabídce. Společnost Monkey Nation bude nabízet zcela originální design triček, který bude oslovovat co největší část z cílové skupiny zákazníků. Trh s tímto zbožím není v ČR ještě zcela nasycen, panuje zde ovšem silná konkurence. Ceny: Jednoznačnou výhodou je nízká cena (pozor ale na dostatečný zisk). Druhou možností je spíše nabízet kvalitu či speciální produkty a služby za vyšší ceny. Naše firma volí spíše první variantu, ale ne na úkor kvality a originality zboží. Místo, distribuce: Zboží bude nabízeno pouze prostřednictvím Internetu. Distribuce bude probíhat dobírkou, možný bude i osobní odběr na provozovně. Marketingové aktivity: Slouží k zviditelnění společnosti a její nabídky mezi zákazníky. K tomuto účelu využijeme především reklamní kampaň na Internetu a distribuci reklamních

14


tiskovin (nálepek) mezi potenciální zákazníky. Marketingová strategie by měla - alespoň ve svých základních rysech – mít několikaletou platnost. To znamená, že způsob, jakým pracujeme se zákazníky a prezentujeme se na trhu, by neměl být každoročně výrazně měněn. Na zákazníky nebude působit dobře, pokud se bude firma jeden rok prezentovat nízkými cenami a nabídkou pro nejširší spektrum zákazníků a v dalším roce se její pozice změní v dodavatele drahého luxusního zboží pro vybranou klientelu. Představu, jak bude firma vypadat, bychom měli mít jasnou na několik let dopředu a výrazné změny podnikatelských strategií provádět pouze v případě nutnosti, např. pokud se podmínky na trhu změní velmi výrazně. Kvalitní a ucelená několikaletá strategie, která dobře podporuje plnění našich cílů, pomáhá vytvářet jasný obraz naší firmy na veřejnosti. [3]

15

4. Kapitola - Vizuální styl společnosti Monkey Nation

4. Kapitola

Vizuální styl společnosti Moneky Nation 4.1 Značka Koncepce značky Monkey Nation Jak vyplývá z marketingové analýzy společnosti Monkey Nation, cílovou skupinou zákazníků budou lidé mezi 18 a 27 lety, většinou studenti. Základním požadavkem na značku bude tedy schopnost zaujmout právě tyto lidi. Design značky nebo logotypu by měl být hravý až veselý, na druhou stranu by měl zdůrazňovat vysoké sebevědomí a orientaci v dnešním velkoměstě. Značka by měla působit světácky až lehce agresivně. Měla by vyvolávat respekt pro toho, kdo ji nosí, ale zároveň připouštět i mírnou dávku sebeironie.

Porovnání módních značek Pro světové módní značky je typické použití logotypu, nejčastěji se jménem zakladatele nebo návrháře. Menší oděvní značky využívají pestrou paletu motivů a technického zpracování značky. My si budeme spíše všímat druhé skupiny. Jak je vidět z obrázku 4.1.1, značky módních společností pro mladé lidi jsou velmi pestré, často vybočují nebo přímo popírají zaběhnuté zvyklosti pro kvalitní značku. Nemusí to být vždy na škodu, vznikají pak ale potíže při používání značky v různých velikostech a na různobarevném podkladu (Cat Gang, Skateshop). Jinak si všimneme, že značka je nejčastěji tvořena logotypem doplněným piktogramem souvisejícím s názvem společnosti (Spitfire, Alien Worshop). Jak bylo řečeno výše, pro kvalitní značku jsou stejně jako tvary důležité barvy. Jak je vidět z výše uvedených příkladů, převládají kombinace červené a černé. Logotypy využívají nejrůznějších řezů písma, někdy bohužel až na hranici čitelnosti nebo za ní (DVS Shoe Copany, Speed Deamons). Uvedené značky nám poslouží jako inspirace, také nám ale ukáží, jakých chyb se při návrhu značky vyvarovat. Je to především použití složitého motivu (piktogramu), použití řezu písma, které se ve značce stane nakonec nečitelným.

16


Obrázek 4.1.1: Ukázky značek módních společností zaměřených na mladé lidi

17


Návrh značky Monkey Nation Než se pustíme do samotného návrhu značky, je dobré si v hlavě ujasnit hlavní rysy, které bude obsahovat. V našem případě je zde hlavní požadavek, aby značka jasně korespondovala s názvem společnosti. Při vyslovení jména Monkey Nation (Opičí Národ) se nám vybaví představa skupiny, kterou spojuje jedinečná vlastnost, státu apod. Značka by tedy měla být jakýmsi znakem nebo odznakem tohoto „národa“. Tento účel nejlépe splní logotyp doplněný piktogramem. Nejdříve tedy vytvoříme piktogram a ten následně doplníme vhodným logotypem. Nejprve jsem vyhledal vhodnou podkladovou fotografii a na ni identifikoval hlavní linie tvaru hlavy. Ty jsem dále zjednodušil a upravil až vznikl idealizovaný tvar opičí hlavy. Pro zvýraznění dojmu síly a nadhledu jsem doplnil opičí obličej o sluneční brýle. Nakonec zbývalo jen výsledný piktogram barevně doladit. Použil jsem hnědou a tmavě žlutou barvu, které odpovídají intuitivní přirozené barevnosti zvířecího obličeje.

Obrázek 4.1.2: Fotografie sloužící jako podklad pro tvorbu piktogramu

Obrázek 4.1.3: Geneze piktogramu opičího obličeje

18


Pro základ logotypu jsem vybral písmo BN Space Chick, jehož jemně zakulacené, při tom ale stručné a výstižné, chvílemi až rustikální tvary korespondují s piktogramem a jeho významem. Pro vzbuzení pocitu „opičí“ hravosti jsem změnil velikosti a proporce některých znaků v jednotlivých slovech. Celý logotyp tak působí kompaktnějším, ale při tom rozevlátým dojmem.

Obrázek 4.1.4: Postup úpravy písma BN Space Chick do výsledné podoby logotypu Nakonec jsem vytvořený piktogram a logotyp spojil a vložil do ochranných panelů. Tyto mají za úkol značku zvýraznit a jednoznačně odlišit od okolní plochy. Přidal jsem zelenou barvu, která vhodně doplňuje ostatní, již použité barvy, a navíc symbolizuje přírodu, les, tedy přirozené útočiště svobodné zvěře.

Obrázek 4.1.5: Výsledná podoba značky Moneky Nation Horizontální a vertikální podoba Výsledná značka má obrys ležícího obdélníku a mohlo by být obtížné ji správně použít na ploše vertikálního charakteru. Zdálo se mi tedy vhodné vytvořit také doplňkovou proporcionálně vyváženou variantu.

19


Vzniklá značka výstižně naplňuje požadavky, které jsme si vyjasnili na začátku této kapitoly.

4.2. Manuál vizuálního stylu Vytvoření ideální značky je prvním krokem při tvorbě vizuálního stylu. Nyní nám zbývá vypracovat manuál vizuálního stylu, hlavní dokument Corporate Identity. Tím jasně kodifikujeme značku jako grafický prvek a vymezíme pravidla pro její používání. Manuál vizuálního stylu bude dále obsahovat podoby některých merkantilních tiskovin a potisk automobilů společnosti.

Manuál vizuálního stylu společnosti Monkey Nation je rozdělen do těchto kapitol:

Pravidla Kapitola obsahuje pokyny pro užívání manuálu vizuálního stylu. Je zde napsáno, kdo je majitelem práv a jak má být s manuálem zacházeno. Dále zde najdeme obecná pravidla pro používání názvu společnosti Monkey Nation.

Značka Tato kapitola je z celého manuálu nejdůležitější. Obsahuje kodifikované podoby značky v barevné a černobílé variantě a na různých podkladech. Značka je zde detailně rozkreslena, což může sloužit při tvorbě kreslené nebo malované podoby značky (např. křídou na zem). Při tvorbě dokumentů se důrazně doporučuje vždy využívat podkladů v elektronické podobě, případně předloh k reprodukci uvedených v manuálu. Dále zde najdeme příklady zakázaného použití značky, minimální velikost a ochranná pole značky.

Barvy Tato část pojednává o barvách značky. Jsou zde definovány nejen barvy přímo použité na značce, ale i další preferované barvy, které lze použít společně se značkou. Barvy jsou definovány podle normy PANTONE, dále pak CMYK a RGB hodnotami.

Písmo Výběr písma je podstatným faktorem při tvorbě vizuálního stylu společnosti. Je nutné brát zřetel především na dobrou čitelnost písma a jeho souznění se značkou. Vybral jsem písmo MS Trebuchet, které vhodně koresponduje s jednoduchými tvary použitými na logotypu, doplňuje je, ale ostřejšími liniemi a dělá tak písmo příjemně čitelným. Jako doplňkové písmo pro běžnou korespondenci a pro internetovou prezentaci společnosti jsem zvolil řez Arial, který je dostupný na většině počítačů.

20


Trebuchet MS je písmo vytvořené Vincentem Connarem v roce 1996. Je pojmenováno podle středověkého válečného stroje (válečný prak).

Merkantilní tiskoviny Právě na merkantilních nebo také obchodních tiskovinách se může jednotný vizuální styl společnosti projevit nejvíce. V této kapitole jsou kodifikovány vzhledy nejdůležitějších zástupců merkantilních tiskovin, kterými jsou především vizitka, hlavičkový papír, obálka a některé další propagační předměty.

Firemní vozidla Poslední část manuálu vizuálního stylu definuje potisk firemního vozového parku. Na modelu osobního auta a dodávky je určeno do jakého prostoru značku umístit.

Náhled Manuálu vizuálního stylu společnosti Monkey Nation je přílohou této diplomové práce. Originální podoba a zdrojové soubory manuálu se nachází na přiloženém cd.

21

5. Kapitola - Internetová prezentace společnosti Moneky Nation - internetový obchod

5. Kapitola

Internetová prezentace společnosti Moneky Nation - internetový obchod Internetová prezentace je v dnešní době pro každou firmu naprostou nutností. Společnost Monkey Nation se chce prezentovat jako malá progresivní firma zaměřená na koncového zákazníka. Prodej zboží má probíhat výhradně po Internetu, je tedy nutné implementovat do internetové prezentace firmy také aplikaci pro podporu prodeje. K tomuto účelu jsem se rozhodl využít Open Source řešení, konkrétně Open Source aplikaci PrestaShop. Druhou možností bylo vytvořit tuto aplikaci vlastními silami, postavit ji takzvaně na zelené louce. Při požadavcích, které jsou na e-komerční aplikace v dnešní době kladeny, není v reálných silách jednoho člověka takovou aplikaci vytvořit za rozumnou dobu.

5.1 Open Source licence Open Source, nebo jinak open-source software je počítačový software s otevřeným zdrojovým kódem. To znamená jak technickou dostupnost kódu, tak legální dostupnost licence na software. Ta umožňuje uživatelům a developerům zdrojový kód využívat pro jejich účely. Open Source licence může být omezena jistými podmínkami, například software nesmí být používán ke komerčním účelům, to ovšem není náš případ. [1]

5.2 PrestaShop Jak již bylo řečeno, PrestaShop je volně dostupné, Open Source řešení pro e-komerci, postavené na technologii PHP, využívající databázi MySQL, dále pak templatovací systém Smarty a CSS styly. K vlastní implementaci internetového obchodu se dostaneme později, nyní se podíváme na hlavní funkce, které Prestashop z uživatelského pohledu nabízí. Celou aplikaci můžeme rozdělit na dvě části. Jimi jsou Front Office (zákaznická aplikace) a Back Office (aplikace pro administrativu internetového obchodu).

Front Office Zákaznická část umožňuje prohlížení zboží, jeho přidání do nákupního košíku a posléze celý proces objednání zboží, včetně výběru platby. K tomu je ovšem třeba vytvořit si uživatelský účet s kontaktními údaji. Tento účet je možné později spravovat. Dále tato část aplikace

22


dokáže zobrazovat nové zboží, nejprodávanější zboží v obchodě atd. Z celkového pohledu Front Office uspokojuje všechny potřeby, které jsou na zákaznickou část sofistikovaného internetového obchodu v dnešní době kladeny.

Back Office Back Office tvoří největší část aplikace a slouží administrátorovi internetového obchodu ke kompletní správě. Umožňuje mu vytvářet kategorie a subkategorie zboží, definovat vlastnosti zboží, a především přidávat nové zboží, včetně neomezeného počtu náhledů. Dále umožňuje kompletní správu obchodních záležitostí, jako je definováni měn, definování expedičních poplatků podle regionu (ČR, Evropa, USA) atd. Je zde možné vytvářet nové dodavatele zboží, stejně jako dopravce. Stejným způsobem lze definovat jazykové mutace internetové aplikace. Back Office může spravovat více zaměstnanců firmy, protože podobně jako ve Front Office, i zde lze vytvářet uživatelské účty pro přístup k aplikaci. V Back Office dále můžeme spravovat objednávky zboží (u každé se nám zobrazuje její stav, zda je zboží zaplaceno, expedováno) a můžeme zde také spravovat registrované zákazníky. Pro nás velmi důležitou funkcí je možnost definovat nové grafické rozhraní Front Office aplikace. Nemá smysl zde vypočítávat všechny funkce PrestaShopu, je jich opravdu mnoho. Každý si může tyto funkce sám proklikat a přesvědčit se o rozsáhlosti této aplikace. Implementovaný internetový obchod bude dočasně umístěn na adrese: http://monkeynation.system4u.eu/monkeynation/ (Front Office). Do Back Office je přístup z adresy http://monkeynation.system4u.eu/monkeynation/admini, e-mail: [email protected], heslo: adminator.

Obrázek 5.2.1: Struktura a funkcionalita jednotlivých částí PrestaShopu [4]

23


5.3 Technická specifikace PrestaShopu PrestaShop využívá třívrstvou aplikační strukturu, která tak umožňuje rozdělit jednotlivé funkčnosti a snadno je takto definovat.

Obrázek 5.2.2: Diagram třívrstvé architektury PreStashopu [4]

Vrstva 1: Prezentační vrstva Je to část aplikace spravující vzhled internetových stránek a zajišťující interakci se zákazníkem. Stránky jsou prezentovány v HTML kódu podle standartu Web2.0 a pro konečný vzhled využívají CSS Stylů. Stránky jsou generovány pomocí vrstvy 2, ale jako vzor stránky je brána definice vzhledu vytvořená šablonovacím systémem Smarty, metajazyku postaveném na PHP, ke kterému se dostaneme později. [4] Každá implementace PrestaShopu může mít tedy naprosto odlišný vzhled, ale funkcionalita bude vždy podobná. 1. vrstva přijímá požadavky od uživatele, předává je 2. vrstvě a nakonec prezentuje data poskytnutá zpět 2. vrstvou.

Vrstva 2: Funkční vrstva Tato část aplikace zajišťuje samotnou funkčnost internetového obchodu, takzvanou „business logic“. Popisuje operace, které aplikace využívá pro manipulaci s daty v závislosti na požadavcích uživatele, zpřístupněných skrz vrstvu 1. Jsou zde implementovány všechny funkce pro management aplikace. Tato vrstva je napsána v jazyku PHP 5.

rstva 3: Datová vrstva V této vrstvě jsou popsány zásady pro manipulaci se samotnými daty a pro jejich zpřístupnění. Data jsou uložena v MySql databázi a všechny přístupy k nim jsou řešeny pomocí PHP tříd. [4]

24


Význam třívrstvé architektury Z výše uvedeného vyplývá, že vrstva 1 komunikuje pouze s vrstvou 2 a nikdy se nemůže stát, aby vrstva 1 komunikovala s vrstvou 3. Role každé vrstvy je jasně definovaná. Funkčnost každé z vrstev lze dále rozvíjet bez zásahu do ostatních vrstev. Výhodou této architektury je především logická přehlednost. Lze díky ní také snadno rozdělit práci na implementaci aplikace mezi grafiky (vrstva 1) a programátory (vrstva2,3). Další výhodou je jednoduchá přenositelnost aplikace na různé platformy. Například vrstva 3 může být snadno přepsána, aby využívala Oracle SGDB databázi. [4]

Příklad zpracování požadavku uživatele Podívejme se co se stane, když uživatel klikne na odkaz pro zobrazení údajů o zákazníku. Krok1: Webový server přepošle GET požadavek třídě customer.php. Krok2: Tato třída použije další direktivu pro načtení konfiguračního souboru config/settings.inc.php, který doplní další odkazy na používané třídy. Krok3: Poté třída použije vlastní interní logiku pro načtení dat o zákazníku z databáze. Krok4: Posledním krokem je zobrazení dat uživateli. Nyní má třída config/settings.inc.php již všechny požadované informace, načte tedy soubor se Smarty template: /theme/default/customer.tpl, který obsahuje kód pro zobrazení stránky v prohlížeči. [4]

Obrázek 5.2.3: Postup zpracování požadavku uživatelem [4]

Templatovací systém Smarty Smarty je komplexní a funkčně velmi dobře vybavený šablonovací systém pro PHP. Je to nástroj pro designery webových stránek, který jim umožňuje automatizovat manipulaci s prezentační vrstvou webové aplikace. To se hodí především pro větší projekty, kdy programátor PHP a kodér HTML není tatáž stejná osoba. Díky Smarty tak kodér úpravami HTML nezničí práci programátora. Kodér tedy vždy pracuje jen s HTML a programátor jen s PHP. [5]

25


Smarty funguje tak, že kodér upravuje klasickou stránku HTML (šablonu) a v ní jsou určité značky, které jsou dynamicky vytvářené pomocí PHP. Taková šablona může např. vypadat takto:

Vítejte {$jmeno}

Právě značka {$jmeno} bude zajímat programátora. Ten v jiném skriptu zjistí (třeba z databáze) jméno návštěvníka, které pak pomocí metod třídy Smarty zamění za {$jmeno} v šabloně. Příklad:
vybere z databáze jméno

návštěvníka a přiřadí ho proměnné

$name */

$smarty->assign(‘jmeno’,’$name’); $smarty->display(‘index.tpl’); ?> Metoda $smarty->assign zamění proměnnou $name za značku {$jmeno} v šabloně. Druhá metoda pak načte a zobrazí šablonu (tento skript by nefungoval, museli bychom ještě zahrnout třídu Smarty, ale pro zjednodušení je to dostačující). [5] Velkou předností je kompilace šablon. Pokud zavoláme předchozí skript v prohlížeči, Smarty vytvoří klasický skript PHP i se zobrazovací logikou do specialního adresáře. Při příštím volání funkce již není nutné znova značky převádět, zavolá se zkompilovaná verze. Je to tak rychlejší [5]

5.4 Implementace PrestaShopu Když jsme se seznámili se strukturou a funkčností PrestaShopu, můžeme přistoupit k vlastní implementaci. PrestaShop využívá PHP a MySQL, je proto potřeba nainstalovat na server, kde PrestaShop poběží Apache server a MySQL databázi. Jednoduché řešení nabízí aplikace XAMPP, která v sobě spojuje právě Apache server i MySQL. Tato aplikace je dostupná na webových stránkách: http://www.apachefriends.org/en/xampp.html

26


Instalace je velmi snadná a zvládne ji i uživatel bez administrátorských vlastností. Pozornost je ale potřeba věnovat následné konfiguraci Apache serveru, zvláště pokud na stejném serveru běží i Internet Information Services (IIS). V tom případě je třeba v konfiguračním souboru Apache serveru \xampp\apache\conf\httpd.conf změnit port. Typický html port :8080 používá IIS, proto jej změníme např. na :8880. Poté nesmíme zapomenout tento port doplnit do adresy, když ji zadáváme do webového prohlížeče. Apache server a MySQL databázi můžeme nyní spravovat z adresy http://localhost:8880. Nyní můžeme přistoupit k zavedení vlastního PrestaShopu. Instalační soubory najdeme na adrese: http://www.prestashop.org Zde najdeme také postup pro instalaci, která je opět velmi jednoduchá. Postup pro instalaci již implementovaného PrestaShopu z přiloženého CD najdeme v souboru InstalInfo.txt v kořenovém adresáři. Když máme Prestashop nainstalovaný, můžeme se pustit do vlastní implementace našeho internetového obchodu. Prvním úkolem je vytvoření grafického rozhraní, které bude odpovídat našim požadavkům. Při jeho tvorbě jsem vycházel z Manuálu vizuálního stylu společnosti Money Nation. Hlavním aspektem bylo celkové sladění webových stránek s koncepcí značky. Práce byla založena především na úpravách souborů s šablonami systému Smarty. Práce s šablonami je velmi intuitivní, pokud známe základy HTML, není problém se v šablonách zorientovat. Poté přišla na řadu editace CSS stylu. CSS styl Front Office části internetového obchodu je obsažen v souboru \xampp\htdocs\MonkeyNation\themes\default\css\style.css. Z tohoto místa můžeme pohodlně stylovat vzhled všech elementů webových stránek a jejich rozložení. Aby byl výsledný dojem z internetové prezentace co nejlepší, bylo dále potřeba nahradit původní ikony PrestaShopu novými, ladícími s celkovým designem stránek. Při jejich tvorbě jsem vycházel z smyslu původních ikon, jejich vzhled a celkové vyznění jsem ovšem přizpůsobil ostatním grafickým prvkům stránek. Dále jsem vytvořil uvítací banner, který se zobrazuje na úvodní stránce. Použil jsem fotografii džungle a tu jsem doplnil o dvě postavy muže a dívky oblečené v nabízených trikách. [7] Další práce spočívala v administraci Back Office. Šlo o nastavení jednotlivých atributů internetového obchodu. Nastavení měny, vytvoření dodavatele zboží a dopravce, vytvoření kategorii zboží, atd. PrestaShop nabízí opravdu nepřeberné množství různých nastavení, se kterými si lze „vyhrát“ a přizpůsobit tak internetový obchod konkrétním požadavkům. Důležitou součástí implementace byl také překlad do češtiny Front Office části obchodu. Poslední prací bylo naplnění obchodu zbožím. Návrhům potisků triček se budeme stručně věnovat v další kapitole. Vytvořené vzory jsem umístil na šablonu triček a tak vznikly náhledy zboží. Všechny zdrojové soubory se necházejí na přiloženém CD.

27


Obrázek 5.4.1: Náhledy internetového obchodu Monkey Nation (uvodní stránka, stránka kategorie s nabídkou zboží)

28


5.5 Legislativní požadavky na internetový obchod Dle zákona č. 367/2000 Sb. a směrnice evropského parlamentu a rady 97/7/ES O ochraně spotřebitele v případě smluv uzavřených na dálku musí být obchodníkem kupujícímu před nákupem na internetu sděleny tyto informace: Identifikační údaje provozovatele obchodu – obchodní jméno, adresa a identifikační číslo. Obchodník by měl (ale nemusí) kupujícímu poskytnout telefonní číslo a další kontaktní údaje. Povinnost uvádět základní identifikační údaje provozovatele e-shopu definuje zákon, ale především jde o vytvoření důvěry. Název a hlavní charakteristika zboží nebo služeb - popis zboží a jeho technická specifikace. Cena – Uvedena musí být cena zboží nebo služby včetně DPH a dalších poplatků, jako např. poštovné a balné. Způsob dodání zboží nebo plnění služby – Mezi nejobvyklejší způsoby dodání patří: dobírka, kurýrní nebo zásilková služba, zaslání jako obchodní balík, případně osobní odběr. Vyčíslení nákladů na dodání - Zákazník musí znát přesnou cenu vybraného způsobu dopravy. Způsob platby – Pokud některé způsoby platby zpoplatňujete, musí být ceny uvedeny. Mezi nejčastější platební způsoby patří: dobírka, bankovní převod, eBanka, platba platební kartou, popř. mikroplatebním systémem. Právo na odstoupení od smlouvy do 14 dnů - Spotřebiteli musí být poskytnuta jednoduchá informace, že má právo od smlouvy odstoupit bez udání důvodů ve lhůtě 14 dnů od dodání zboží. [6]

29

6. Kapitola - Návrhy potisků triček

6. Kapitola

Návrhy potisků triček Součástí zadání diplomové práce bylo i vytvoření několika ilustračních návrhů potisků na trička. Jejich náhledy jsou uvedeny v příloze B. Těžko popisovat jejich tvorbu, inspirací mi byl vždy nějaký slogan nebo tvar který jsem dále rozvíjel. Při jejich tvorbě jsem dodržoval podobná pravidla jako při tvorbě značky. To znamená nalézt optimální tvar a barevnost tak, aby vše dohromady ladilo. Všechny návrhy jsou tvořeny pomocí vektorové grafiky a programu CorelDraw, který je k těmto účelům ideální. Všechny zdrojové soubory lze opět nalézt na přiloženém CD.

30

7. Kapitola - Závěr

7. Kapitola

Závěr

Úkolem této diplomové práce bylo zpracování vizuálního stylu společnosti Monkey Nation a interaktivní internetové aplikace pro podporu prodeje. Na základě marketingové analýzy společnosti jsem vytvořil značku společnosti, která odpovídá požadavkům kladených na ni a svým působením zanechává u pozorovatele patřičný dojem. Tato značka se stala podkladem pro zpracování Manuálu vizuálního stylu, který umožní společnosti sjednotit její vystupování před zákazníky. Další část práce se týkala implementace internetového obchodu s využitím Open Source řešení. Vybraná aplikace – PrestaShop splnila všechny požadavky, které na ni byly kladeny. Největší přínos této práce spatřuji právě v implementaci tohoto řešení. Umožnila mi seznámit se s šablonovacím systémem Smarty, jehož možnosti využití jsou obrovské a velmi ulehčuje a zpřehledňuje práci na rozlehlých projektech, jakým PrestaShop je. Implementovaný internetový obchod Společnosti Monkey Nation naleznete dočasně na internetové adrese http://monkeynation.system4u.eu/monkeynation/. Poslední části této práce bylo vytvoření několika návrhů potisků triček, které mají sloužit jako náplň internetového obchodu. Jak se tyto návrhy zdařily posuďte sami.

31

Seznam použité literatury [1]

● Wikipedie, www.wikipedia.org

[2]

● Marketing MO Business to business marketing tool for marketing plans + strategies www.MarketingMO.com

[3]

● ProMarketing - efektivní marketing pro malé a střední firmy, www.promarketing.cz

[4]

● PrestaShop e-commerce Solution, www.prestashop.org

[5]

● Smarty v PHP, http://smarty.ronnieweb.net/

[6]

● Asociace.BIZ – Asociace dodavatelů internetových řešení, www.asociace.biz

[7]

● TVORBA WEBU CZ. MySQL, SQL a PHP, www.tvorba-webu.cz/php/mysql.php

[8]

● Nielsen, J.: Ten Good Deeds in Web Design, 1999, www.useit.com/alertbox/991003.html

32

Příloha A

Náhled manuálu vizuálního stylu společnosti Moneky Nation

33

Příloha A - Náhled manuálu vizuálního stylu


























Příloha B

Náhled návrhů potisků triček

Příloha B - Náhled návrhů potisků triček

Příloha B - Náhled návrhů potisků triček

Zpracování vizuálního stylu společnosti Monkey Nation a interaktivní internetové aplikace pro podporu prodeje

Recommend Documents