d i p l o m s k a n a l o g a - milovan tomaševićdk.fis.unm.si/dip/vs_2017_dasa_brilej.pdfvizualni...

FAKULTETA ZA INFORMACIJSKE ŠTUDIJE

V NOVEM MESTU

D I P L O M S K A N A L O G A

VISOKOŠOLSKEGA STROKOVNEGA ŠTUDIJSKEGA PROGRAMA

PRVE STOPNJE

DAŠA BRILEJ

FAKULTETA ZA INFORMACIJSKE ŠTUDIJE

V NOVEM MESTU

DIPLOMSKA NALOGA

CELOSTNA GRAFIČNA PODOBA PODJETJA IN

PROGRAMIRANJE SPLETNE STRANI NajZame.si

Mentorica: doc. dr. Biljana Mileva Boshkoska

Somentorica: dr. Josipa Lajkovič

Novo mesto, maj 2017 Daša Brilej

IV

IZJAVA O AVTORSTVU

Podpisana Daša Brilej, študentka FIŠ Novo mesto, izjavljam:

da sem diplomsko nalogo pripravljala samostojno na podlagi virov, ki so navedeni v

diplomski nalogi,

da dovoljujem objavo diplomske naloge v polnem tekstu, v prostem dostopu na spletni

strani FIŠ oz. v elektronski knjižnici FIŠ,

da je diplomska naloga, ki sem jo oddala v elektronski obliki identična tiskani verziji,

da je diplomska naloga lektorirana.

V Novem mestu, dne _________________ Podpis avtorice ______________________

ZAHVALA

Zahvaljujem se mentorici doc. dr. Biljani Milevi Boshkoski in somentorici dr. Josipi Lajkovič,

za vso pomoč, podporo in vodenje pri pisanju diplomske naloge, ter za vso posredovano

znanje s področja spletnega programiranja in grafičnega oblikovanja.

Iskrena hvala tudi staršem za podporo in vzpodbudo na vsakem koraku študija.

Hvala tudi tebi Alenka, ker me sprejemaš takšno kot sem. V vseh mojih vzponih in padcih si

verjela vame, me optimistično spodbujala ter mi nesebično pomagala in delila svoje

strokovno znanje s področja grafičnega oblikovanja.

Posebna zahvala pa gre pokojnemu dediju, zaradi katerega sem se odločila za študij.

VII

POVZETEK

V diplomski nalogi smo preučili in predstavili elemente, s katerimi bo podjetje NajZame.si

povečalo prepoznavnost na trgu. Celostno grafično podobo sestavljajo simbol in logotip,

slogan, barve, tipografija itd.. Diplomsko delo je razdeljeno na tri dele. V prvem, teoretičnem

delu smo predstavili pomen celostne grafične podobe, ter razložili osnovne elemente. Praktični

del je razdeljen na dva dela. V prvem praktičnem delu, smo na osnovi teoretičnega dela razložili

elemente celostne grafične podobe podjetja na primerih izbranega podjetja NajZame.si. Opisali

smo potek ustvarjanja celostne grafične podobe, ter razložili našo odločitev za takšne elemente,

kakršni so uporabljeni v sami grafični podobi podjetja. Drugi del praktičnega dela diplomske

naloge predstavlja analizo ankete, s katero smo ugotovili kakšno prepoznavnost nosi celostna

grafična podoba podjetja NajZame.si na trgu in med samimi kupci. Vsako podjetje potrebuje

tudi osnovna komunikacijska sredstva, zato smo oblikovali vizitko, dopisni list in kuverto.

KLJUČNE BESEDE: Celostna grafična podoba, programiranje spletne strani, logotip,

grafično oblikovanje, Wordpress

ABSTRACT

A corporate identity presents the visual part of the company. It is composed of several elements.

In our thesis, we researched elemenst for the company NajZame.si, which will be presented on

the market. Symbol, logo, slogan, colors, typography etc. are a part of corporate identity. Thesis

has three chapters. In the first theoretical chapter we wrote about purpose of corporate identity

and we explained basic elements. Practical part is divided in two chapters. In the first one, we

explained all elements of theoretical part on an example of company NajZame.si. We described

the course of making corporate identity and explained why we used those elements which

present corporate identity of the company NajZame.si. Second, practical part of the thesis is

analysis of survey, which helped us find out how recognizable among buyers the corporate

identity of the company NajZame.si is. Every company needs basic communication resources

and for this purpose we designed a business card, a correspondence paper and an envelope.

KEY WORDS: Corporate identity, programming websites, logo, graphic design, Wordpress

IX

KAZALO

1 UVOD ................................................................................................................................. 1

2 RAZISKOVALNI PROBLEM, HIPOTEZE, RAZISKOVALNA VPRAŠANJA,

METODE IN CILJI RAZISKAVE IN PRIČAKOVANI REZULTATI.................................... 2

2.1 Raziskovalni problem .................................................................................................. 2

2.2 Hipoteze in raziskovalna vprašanja ............................................................................. 2

2.3 Metodologija ................................................................................................................ 3

2.4 Cilji raziskave in pričakovani rezultati ........................................................................ 3

3 CELOSTNA GRAFIČNA PODOBA PODJETJA (CGP) ................................................. 5

3.1 Kaj je celostna grafična podoba podjetja ..................................................................... 5

3.1.1 Elementi CGP promoviranja ................................................................................ 5

3.2 Referenčni trikotnik ..................................................................................................... 6

3.2.1 Realna identiteta organizacije .............................................................................. 7

3.2.2 Imidž ..................................................................................................................... 7

3.2.3 Simbolni identitetni sistem .................................................................................... 8

3.3 Elementi celostne grafične podobe podjetja ................................................................ 8

3.3.1 Simbol in logotip ................................................................................................... 8

3.3.2 Barve ................................................................................................................... 13

3.3.3 Tipografija .......................................................................................................... 15

3.4 Potek ustvarjana celostne grafične podobe podjetja NajZame.si............................... 16

3.4.1 Poslanstvo, vizija podjetja NajZame.si............................................................... 16

3.4.2 Ime, slogan podjetja NajZame.si ........................................................................ 17

3.5 Uporaba celostne grafične podobe podjetja na aplikacijah........................................ 17

3.5.1 Napisi .................................................................................................................. 17

3.5.2 Letaki, plakati, reklame, reklamni material ....................................................... 19

3.5.3 Spletna stran ....................................................................................................... 23

XI

3.5.4 Izdelava vizitke, kuverte in dopisnega lista ........................................................ 23

3.6 Priročnik celostne grafične podobe podjetja NajZame.si .......................................... 27

3.7 Programska oprema za izdelavo celostne grafične podobe podjetja ......................... 31

3.7.1 Rastrska in vektorska grafika ............................................................................. 31

3.7.2 Adobe Photoshop CS6 ........................................................................................ 31

3.7.3 Adobe Illustrator CS6 ......................................................................................... 32

3.7.4 Adobe InDesign CS6 ........................................................................................... 33

4 PROGRAMIRANJE SPLETNIH STRANI ..................................................................... 34

4.1 Kratek pregled zgodovine .......................................................................................... 34

4.2 Vrste spletnih strani ................................................................................................... 35

4.3 Tehnologije za izdelavo spletne strani ....................................................................... 36

4.3.1 Označevalni jezik HTML .................................................................................... 36

4.3.2 Skriptni jezik CSS ............................................................................................... 39

4.3.3 Skriptni jezik JavaScript ..................................................................................... 41

4.3.4 Programski jezik PHP ........................................................................................ 45

4.3.5 Odprtokodni sistem MySQL ............................................................................... 50

4.3.6 Bootstrap ............................................................................................................ 51

4.4 Sistem za upravljanje vsebin (CMS) ......................................................................... 52

4.4.1 Wordpress ........................................................................................................... 54

4.5 Oblikovanje spletnih strani ........................................................................................ 56

4.6 Namestitev in oblikovanje spletne strani NajZame.si ............................................... 58

4.6.1 Barve, kontrasti, svetlost .................................................................................... 59

4.6.2 Linki, linije, okvirji, razporejenost ..................................................................... 61

4.6.3 Besedila in tipografija ........................................................................................ 62

4.6.4 Navigacija ........................................................................................................... 62

4.6.5 Preglednost ......................................................................................................... 63

5 ANALIZA RAZISKAVE ................................................................................................. 65

XIII

5.1 Analiza ankete ............................................................................................................ 65

5.1.1 Kontrolni podatki ................................................................................................ 65

5.1.2 Prepoznavnost in ustreznost celostne grafične podobe podjetja NajZame.si .... 69

5.2 Preverjanje hipotez .................................................................................................... 78

6 ZAKLJUČEK ................................................................................................................... 79

7 LITERATURA IN VIRI ................................................................................................... 81

PRILOGE ................................................................................................................................. 87

Priloga A: Celostna grafična podoba podjetja NajZame.si .................................................. 89

Priloga B: Anketni vprašalnik .............................................................................................. 97

XV

KAZALO SLIK IN TABEL

Slika 3.1: Referenčni trikotnik ................................................................................................... 6

Slika 3.2: Logotip podjetja ....................................................................................................... 10

Slika 3.3: Barvna modela RGB in CMYK ............................................................................... 14

Slika 3.4: Pisava Orbitron Medium .......................................................................................... 16

Slika 3.5: Delovni čas na vratih trgovine NajZame.si .............................................................. 18

Slika 3.6: Nalepka na darilu ..................................................................................................... 18

Slika 3.7: Kupon za nagrajevanje zvestih kupcev .................................................................... 19

Slika 3.8: Članek za revijo Mesečnik ....................................................................................... 20

Slika 3.9: Reklamni material- pisalo ........................................................................................ 21

Slika 3.10: Reklamni material- majica ..................................................................................... 22

Slika 3.11: Vizitka .................................................................................................................... 24

Slika 3.12: Kuverta amerikanka ............................................................................................... 25

Slika 3.13: Dopisni list ............................................................................................................. 26

Slika 3.14: Različici logotipa ................................................................................................... 27

Slika 3.15: Barvne variance 1. različice logotipa ..................................................................... 28

Slika 3.16: Pozicije različnih verzij logotipa ............................................................................ 29

Slika 3.17: Uporaba logotipa v različnih aplikacijah ............................................................... 30

Slika 3.18: Vtisnjen logotip v usnjeno platnico knjige ............................................................. 32

Slika 3.19: Vtisnjen logotip v les ............................................................................................. 32

Slika 4.1: Spletni obrazec ......................................................................................................... 38

Slika 4.2: Osnovna koda z meta oznakami ............................................................................... 39

Slika 4.3: CSS koda .................................................................................................................. 40

Slika 4.4: Prikaz uporabe JavaScript v glavi kode ................................................................... 44

Slika 4.5: Spletni obrazec na NajZame.si ................................................................................. 45

Slika 4.6: Primer PHP dokumenta v Wordpressu .................................................................... 46

Slika 4.7: Podatkovna baza spletne strani NajZame.si ............................................................. 50

Slika 4.8: Bootstrap- odziven dizjn .......................................................................................... 52

Slika 4.9: Wordpress ................................................................................................................ 54

Slika 4.10: Prikaz zgornjega dela vstopne strani podjetja NajZame.si .................................... 59

Slika 4.11: Prikaz spodnjega dela vstopne strani ..................................................................... 60

Slika 4.12: Povezava v spletno trgovino .................................................................................. 61

XVII

Slika 4.13: Prikaz povezav na spletni strani ............................................................................. 62

Slika 4.14: Nivoji menija .......................................................................................................... 63

Slika 4.15: Spletna trgovina...................................................................................................... 64

Slika 4.16: Košarica .................................................................................................................. 64

Tabela 4.1: Spremenljivke v JavaScriptu ................................................................................. 42

Tabela 5.1: Spol anketirancev .................................................................................................. 65

Tabela 5.2: Starost anketirancev ............................................................................................... 66

Tabela 5.3: Dosežena izobrazba anketirancev .......................................................................... 67

Tabela 5.4: Regija bivališča ..................................................................................................... 68

Tabela 5.5: Prepoznavnost logotipa.......................................................................................... 69

Tabela 5.6: Primernost logotipa glede na slogan podjetja ........................................................ 70

Tabela 5.7: Primernost logotipa glede na dejavnost podjetja ................................................... 71

Tabela 5.8: Zaupanje v spletno trgovino .................................................................................. 72

Tabela 5.9: Primernost barv na spletni strani ........................................................................... 73

Tabela 5.10: Preglednost spletne strani .................................................................................... 74

Tabela 5.11: Podatki na spletni strani ....................................................................................... 75

Tabela 5.12: Poznavanje konkurenčnih podjetij, podjetju NajZame.si .................................... 77

1

1 UVOD

Svetovni splet je tehnologija informacijske dobe, brez katere si ne znamo predstavljati življenja.

Mediji nas na vsakem koraku preplavljajo z velikim številom znakov, plakatov, letakov in

vizualnih sporočil. V družbi pogosto velja mišljenje »če nisi na spletu, ne obstajaš«. Tega se v

konkurenčnih časih, ko moraš biti boljši od večine, predvsem pa viden v množici in izstopati

na trgu, zavedajo tudi podjetniki. Svoje podjetje lahko povzdignejo iz povprečja tudi z dobro

izbrano in natančno preračunano celostno grafično podobo podjetja, ne le z unikatnimi izdelki.

Celostna grafična podoba podjetja predstavlja njegovo identiteto ter imidž, katera odseva in

predstavlja podjetje na trgu, ter je prvi element, ki ga kupec opazi. Uspešna podjetja, katera so

že dolgo časa na tržišču, imajo svoj imidž, predvsem pa logotip podjetja že vtisnjen v naš

spomin. Ko gledamo reklamo, se lahko prikaže na ekranu samo slogan podjetja ali samo logotip

in točno vemo za katero podjetje gre. Ko vidimo rumen M na rdečem ozadju, vsi prepoznamo

blagovno znamko ameriškega podjetja hitre prehrane McDonald`s ali če slišimo na televiziji

slogan »Just do it!«, večino od nas ve, da gre za blagovno znamko športne opreme Nike.

Logotip, spletna stran in celostna grafična podoba podjetja povečata prepoznavnost le-tega med

kupci, na trgu in spletu. Za dobro izdelano grafiko je potrebno preučiti podjetje, njegove

vrednote in cilje. Če bi podjetje uporabljalo različne logotipe na različnih aplikacijah, bi prišlo

do zmede med kupci, s čimer bi to lahko ogrozilo prepoznavnost in dober imidž podjetja na

trgu. Večina podjetij celostni grafični podobi ne posveča dovolj pozornosti, čeprav je zelo

pomembna za prepoznavnost, ugled ter konkurenčno prednost. Celostna grafična podoba je

vizualni del prepoznavnosti podjetja in je sestavljen iz več elementov. Pri uporabi le-te na

aplikacijah, sta najpomembnejši uporabi zaščitni znak in spletna stran, saj prideta v stik z kar

največjim številom kupcev. Spletna stran lahko z dobrim oblikovanjem ter navigacijo in

preglednostjo, bistveno pripomore k uspešnosti in rasti podjetja.

Namen diplomskega dela je v grobem preučiti celostno grafično podobo podjetja ter to dokazati

na primerih celostne grafične podobe podjetja NajZame.si.. Za namen diplomske naloge bomo

izdelali osnovna komunikacijska sredstva: vizitko, kuverto in dopisni list za podjetje

NajZame.si, spletno stran s svojo trgovino, ter priročnik celostne grafične podobe izbranega

podjetja.

2

2 RAZISKOVALNI PROBLEM, HIPOTEZE, RAZISKOVALNA

VPRAŠANJA, METODE IN CILJI RAZISKAVE IN PRIČAKOVANI

REZULTATI

2.1 Raziskovalni problem

Celostna grafična podoba (CGP) podjetja predstavlja podjetje v medijih, na spletu in povsod,

kjer se pojavlja. Izdelava priročnika CGP podjetja predstavlja velik finančni znesek za le-tega,

zato jim marsikdaj ne posvečajo dovolj pozornosti. V CGP podjetja spadajo osnovni elementi

CGP-ja: zaščitni znak, tipografija, barve ter uporaba na aplikacijah kot so dopisni list, poslovna

vizitka, štampiljka, napisi, letaki itd. ter spletna stran. Logotip podjetja je sestavljen iz znaka,

tipografije in barv. Podjetje, ki želi imeti dobro oblikovan CGP, mora na osnovi teh elementov

(predvsem barv in tipografije) oblikovati tudi svojo spletno stran. Podjetje NajZame.si se

zaveda pomembnosti dobrega CGP-ja. V diplomski nalogi bo predstavljena spletna trgovina in

CGP podjetja NajZame.si. Z raziskavo bomo ugotovili, kako celostna grafična podoba vpliva

na podjetje in posledično na kupce oziroma ciljne skupine, ali sta spletna stran in CGP podjetja

NajZame.si primerna in ali ciljne skupine zaupajo nakupom v spletni trgovini. Končni cilj

diplomske naloge bo oblikovati CGP priročnik za podjetje NajZame.si z osnovnimi

komunikacijskimi sredstvi. Za večjo prepoznavnost in boljšo komunikacijo s kupci bomo

oblikovali vizitko, dopisni list in kuverto.

2.2 Hipoteze in raziskovalna vprašanja

Ustrezno oblikovana spletna trgovina pripomore k uspešnosti poslovanja podjetja in

prinaša podjetju zaupanje ciljnih skupin.

Ustrezno oblikovana CGP in njena dosledna uporaba v vseh pojavnih oblikah v

komunikaciji na trgu s potrošniki v veliki meri pripomore k prepoznavnosti in

uspešnosti podjetja.

Z ustrezno spletno stranjo in CGP-jem si je podjetje NajZame.si ustvarilo

prepoznavnost na domačem trgu, s čimer se mu oglaševanje povečuje.


METODE IN CILJI RAZISKAVE IN PRIČAKOVANI REZULTATI

3

2.3 Metodologija

Diplomska naloga je sestavljeno iz dveh delov, in sicer iz teoretičnega in empiričnega dela. V

teoretičnem delu bomo uporabili deskriptivno metodo dela za opis teorije, pojmov in

ugotovitev. Sekundarni podatki bodo pridobljeni iz znanstvene in strokovne literature, člankov

in interneta. Pri opisovanju bomo uporabili metodo kompilacije, s katero bomo povzeli stališča

različnih avtorjev, pri čemer bomo vključili lastno mnenje. V empiričnem delu bomo uporabili

metodo analitičnega raziskovanja. Anketni vprašalnik bo zajemal fotografije logotipov in

spletnih strani. Vprašanja se bodo nanašala na temo spletne strani in celostne grafične podobe

podjetja NajZame.si, ter dveh konkurenčnih podjetij. Z raziskavo bomo ugotovili, kako celostna

grafična podoba vpliva na podjetje in posledično na kupce oziroma ciljne skupine. Raziskali

bomo ali sta spletna stran in CGP podjetja NajZame.si primerna in ali ciljne skupine zaupajo

podjetju in opravljajo nakupe v spletni trgovini.

2.4 Cilji raziskave in pričakovani rezultati

Prvi cilj diplomskega dela bo predstavitev podjetja NajZame.si, njegovo spletno stran

in celostno grafično podobo, ter pojasniti pojem celostne grafične podobe podjetja v

povezavi s spletno stranjo.

Drugi cilj bo ugotoviti prednosti in priložnosti, ki jih nudijo spletne strani podjetju.

Tretji cilj bo raziskati, kako lahko dobra spletna stran pripomore k povečanju prodaje in

prepoznavnosti podjetja na trgu oziroma če je le ta slaba, zmanjša zaupanje med

potencialnimi skupinami in s tem negativno vpliva na podjetje. Cilj bo ugotoviti, kaj

lahko dobra spletna stran podjetju nudi, ter kakšen je njen odnos do uporabnikov.

Četrti cilj diplomske naloge bo raziskati pomembnost dobro oblikovane celostne

grafične podobe podjetja.

Pričakovani rezultat diplomske naloge je pregled celostne grafične podobe podjetja in spletne

strani podjetja NajZame.si. Z raziskavo bomo raziskali, ali sta dosedanja spletna stran in

celostna grafična podoba podjetja primerna in ali pripomoreta k večji prepoznavnosti podjetja

na trgu. Raziskati želimo, ali ciljne skupine zaupajo podjetju in nakupujejo v spletni trgovini.

Oblikovan bo priročnik celostne grafične podobe za podjetje NajZame.si, da bo grafična podoba


METODE IN CILJI RAZISKAVE IN PRIČAKOVANI REZULTATI

4

kar najbolj pripomogla k dobri prepoznavnosti podjetja med kupci in konkurenti. Za CGP se

bo na novo oblikovala vizitka, dopisni list in kuverta.

4

3 CELOSTNA GRAFIČNA PODOBA PODJETJA (CGP)

3.1 Kaj je celostna grafična podoba podjetja

Celostna grafična podoba podjetja ali krajše CGP je usklajeno delovanje vizualnih sporočil

delovanja podjetja. Dodelana in profesionalna celostna grafična podoba podjetja prinaša

podjetju prepoznavnost, ugled, dodano vrednost izdelkom in storitvam in konkurenčno

prednost na trgu, ter vpliva na poslovne rezultate. Osrednji element celostne grafične podobe je

logotip oz. prepoznavni znak. Celostna grafična podoba je sestavljena iz več elementov, ki

tvorijo enotno vizualno celoto in predstavljajo podjetje v javnosti, na trgu in med kupci. Med

pomembnejše elemente celostne grafične podobe podjetja spadajo tudi spletna stran podjetja

ter spletni oglasi, ki v današnjem informacijskem času predstavljajo ključno vlogo v

oglaševanju. Osnovne aplikacije grafične podobe podjetja so poslovna vizitka, dopisni list,

račun, pisemska ovojnica in žig. Ostale poslovne tiskovine so še katalogi, brošure, obrazci,

pogodbe in poslovne mape. Poleg poslovnih so pomembne tudi promocijske tiskovine, preko

katerih se podjetje pojavlja v širši javnosti. To so oglasi v revijah, plakati, letaki, naslovne table

in nalepke na prevoznih sredstvih, ki označujejo podjetje (Moj atelje, 2014).

Po Repovšu (1995) je celostna grafična podoba podjetja strateško najmočnejše orožje pri

vzpostavljanju ekvivalentne menjave s potrošniki izdelkov, storitev ali idej, ki jih ustvarja

organizacija. Snovanje in udejanjanje celostne grafične podobe podjetja v prakso, je po

njegovem mnenju strokovno najzahtevnejši in ustvarjalno najbolj prefinjen posel, kar jih pozna

komunikologija. Vidno v celostni grafični podobi je pravzaprav prevod nevidnih izhodišč

podjetja na simbolno grafično raven. Tako dobro opredeljena in razumljena izhodišča

omogočajo celostno grafično podobo, ki je resnično po meri organizacije, njene dejavnosti,

vrednot in njenih ciljev (Repovš, 1995, str. 11).

3.1.1 Elementi CGP promoviranja

Primarni element celostne grafične podobe je logotip. Izbira barv, oblike in pisave logotipa

morajo biti za podjetje značilni in unikatni. V elemente celostne grafične podobe spadajo tudi

spletna stran, vizitke, žig, dopisna dokumentacija, reklamni oglasi, brošure, katalogi, vabila,

letaki, napisi in simboli na vozilih, označevalne in razpoznavne table, zastave ter droben


6

promocijski material kot kozarci, pisala, beležke, oblačil itd. Elementi celostne grafične podobe

morajo biti oblikovani tako, da jih lahko uporabljamo za različne namene tako v vsakodnevni,

kot protokolarni praksi. Potrebno jih je prikazati v različnih velikostih, primerni pa morajo biti

za uporabo na različnih materialih. Poleg dizajna simbola, je potrebno upoštevati tudi

izvedljivost tipografije, spremljajočih barv in različnih formatov (Kreativne ideje, 2008).

3.2 Referenčni trikotnik

Pri razlagi in razumevanju si pogosto pomagamo s shemami ali formulami, ki nam povečajo

vpogled in predstavljivost v probleme, pojave, stvari in odnose med njimi. Repovš (1995) za

izdelavo celostne grafične podobe podjetja kot osnovo razumevanja organizacije, vzame

referenčni trikotnik (Slika 3.1) iz psihologije spoznavanja, katero sta Richards in Ogdena prvič

predstavila že leta 1963. Ob umeščanju celostne grafične podobe v poslovno politiko

organizacije, je Repovš našel referenčni trikotnik kot idealen pripomoček za razumevanje

vsebine in odnosov med tremi ključnimi dejavniki, ki opredeljujejo organizacijo v njenem

okolju in odločajo o njeni uspešnosti v menjavi s potrošniki. Ti dejavniki so imidž podjetja,

identitetni sistem in realna identiteta podjetja (Repovš, 1995, str. 16).

Slika 3.1: Referenčni trikotnik (Repovš, 1995, str.16)


7

Realna identiteta, imidž in simbolni identitetni sistem organizacije so spremenljivke, ki

zahtevajo skrbno upravljanje in stalno uravnavanje medsebojnih odnosov. Uglašeno in enotno

delujejo le, če pogosto preverjamo njihovo stanje in spreminjamo njihove sestavne dele do

ravnotežja, ki vodi k uspešnosti organizacije (Repovš 1995, str. 21).

3.2.1 Realna identiteta organizacije

Realna identiteta organizacije predstavlja vse to, kar organizacija pravzaprav je. Vključuje

njeno zgodovino in razvoj, zaposlene, stavbe, stroje, naprave, način organiziranosti in vodenja,

delovne postopke in običaje. V realno identiteto organizacije sodijo izdelki, storitve ali ideje,

ki jih organizacija uresničuje, skupaj z njihovimi tehnološkimi in psihološkimi vrednostmi.

Bistven del realne identitete so poslanstvo, vizija, filozofija, cilji, strategije in politike.

Identiteto lahko povzamemo kot edinstveno sposobnost organizacije, celoten splet

funkcionalnih izkušenj, spretnosti, znanj, talentov, ki razlikujejo organizacije med seboj in

določajo njeno sposobnost ustvarjanja vrednosti na njej lastne načine. Del realne identitete

organizacije je tudi njeno ožje in širše okolje, ki organizaciji omogoča obstoj in vpliva na njeno

osebnost.

Repovš identiteto pojmuje kot seštevek vseh poti ki jih izbere podjetje, da bi opravljalo svoje

poslanstvo in se identificiralo v javnosti (Repovš, 1995, str. 17).

3.2.2 Imidž

Repovš omeni, da se je beseda imidž prvič pojavila v petdesetih letih, ko je David O`Gilvy

govoril o tem, da potrošniki ne kupujejo več izdelkov, ampak blagovne znamke. Idejo o

nekakšni osebnosti blagovnih znamk so kmalu prenesli na podjetja. Raziskovalci,

komunikologi in menedžerji so se začeli resno ukvarjati z imidžem podjetij. Imidž je tako

pojem, ki zajema vse, kar se o neki organizaciji govori, čuti in misli. Je sistem slik, oblikovan

skozi vedenje posameznika iz občutkov, mišljenja, želja in idealov, odraz zavestnih in

podzavestnih stanj subjektov, v katerih nastaja. Zato je imidž dinamičen pojem, ki se vzdržuje

in spreminja.

Imidž podjetja lahko nastane na dva načina. Kot informacijski dražljaji, ki prihajajo iz

neposrednega stika posameznika z elementi realne identitete organizacije. Lahko pa nastane na

podlagi informacij, ki so posredovane s pomočjo formalnih in neformalnih informacijskih


8

kanalov. Tržno komuniciranje in oglaševanje, ki ga izvaja organizacija, sproža dražljaje, ki

utrjujejo, oblikujejo in spreminjajo imidž organizacije. V imidžu se skriva psihološka vrednost

izdelkov, storitev, idej in njihovo pozicioniranje na trgu. Od njega je odvisna tudi pravica do

visoke ali nizke cene izdelkov, idej ali storitev na trgu. Kreiranje ustreznega imidža podjetja je

tako kompleksno delo, prav toliko, kolikor je kompleksna njena realna identiteta. (Repovš,

1995, str. 19).

3.2.3 Simbolni identitetni sistem

Simbolni identitetni sistem je realna identiteta organizacije, prevedena na simbolno raven.

Sestavljajo ga verbalni in grafični simboli, črke, barve in ostale likovne strukture, razporejene

na samosvoj, prepoznaven in razlikovalen način. Simbolni identitetni sistem na posreden način

predstavlja organizacijo, ustvarja o njej mnenje, impresijo, imidž, ne da bi bili v neposrednem

stiku z elementi njene realne identitete. Govori o njej, ne da bi jo videli, slišali, otipali, okusili

ali kako drugače zaznali njeno realnost. Simbolni identitetni sistem je najširši že opisan pojem,

ki poleg celostne grafične podobe, vključuje tudi ostale organizacije dražljajev, kot so glasba,

vonjave, okusi in pa vedenje ljudi. Kot del simbolnega identitetnega sistema postaja celostna

grafična podoba pomembno orodje za predstavljanje realne identitete organizacije. (Repovš

1995, str. 21).

3.3 Elementi celostne grafične podobe podjetja

Dobra blagovna znamka bo prodala vsak izdelek ali potrdila legitimnost katerega koli projekta.

Pri oblikovanju grafičnih elementov za uspeh na tržišču, je ključ v fleksibilnosti. Logotip mora

biti primeren za natis na papir, pošiljanje po faksu, za uporabo na spletu. Izbira oblik in barv

mora biti skrbno izbrana, saj lahko z določenimi simboli naletimo na kulturne ovire. Logotip

mora biti brezčasen, stil pa ne sme izžarevati trenutnih trendov (Rockport, 2006, str. 7).

3.3.1 Simbol in logotip

Na začetku je bil le znak. Prvi ljudje niso govorili jezika, kot ga poznamo danes. Bili so

sposobni uporabljati mimiko in kretnje za sporazumevanje, namesto pisave, so risali,

upodabljali slike. Komunikacija se je pričela s pomočjo znakov. Iz znakov se je kasneje razvil


9

govorni jezik, pisava. Vendar znaki in slike so ostali, saj jih ni bilo mogoče nadomestiti. Simboli

imajo moč stimuliranja domišljije in priklica slik, doživetij in občutkov iz preteklosti, v naš um

v sedanjosti. Simbol podjetja je najosnovnejša stalnica celostne grafične podobe podjetja. Glede

na ostale elemente grafične podobe, je najbolj prepoznaven, vzbuja največ pozornosti in

predstavlja prvi stik podjetja z javnostjo (Julius, 2007, str. 6).

Logotip je lahko sestavljen samo iz tipografskega simbola, znakovnega simbola, lahko pa je

kombinacija obeh. Lastnosti dobrega simbola so:

učljivost: simbol je učljiv, kadar ga lahko prikličemo v spomin in ga natančno opišemo ali

narišemo.

Prepoznavnost: prepoznavnost simbola se meri s časom, ki je potreben, da simbol prepoznamo

v množici drugih.

Razlikovalnost: simbol je razlikovalen, če vsebuje likovne strukture, ki ga močno razlikujejo od

drugih simbolov, kar prepreči zamenjavo.

Berljivost: simboli ne smejo povzročati dvoma o tem, za katero besedo ali zlog v simbolu gre.

Berljivost simbola se preizkuša s časom, ki je potreben za branje.

Referenčnost: simbol je referenčen, če ima sposobnost predstavljati stvari, dogodke ali ideje

(Dobovišek, Požep & Saje, 2009, str. 14).

3.3.1.1 Logotip podjetja

Logotip podjetja je sestavljen iz dveh elementov:

grafičnega simbola in

tipografskega simbola.

V logotip podjetja smo želeli zajeti vse lastnosti, katere pripadajo dobro oblikovanemu simbolu.

Logotip je sestavljen iz znakovnega simbola in tipografskega simbola.

Želeli smo, da logotip predstavlja človeka, z roko v roki z naravo.


10

Slika 3.2: Logotip podjetja

Grafični simbol

Glavna elementa znaka sta človek in list. Človek je v znaku sive barve, list pa zaradi svoje

narave zelen. List je v logotipu upodobljen kot roka na človeku, katera se spremeni v list. Znak

pomeni torej naravo in človeka, katera sodelujeta z roko v roki in skupaj omogočata zdravo

prihodnost človeka. Če se postavimo v prvo osebo, torej logotip predstavlja naravo in človeka,

ki proizvajata produkte, kateri so dobri zame, oz. v slengu so »najzame«.

Tipografski simbol

Napis pod logotipom elegantno in resno opisuje ime podjetja. Napis je široke tipografije, kar

predstavlja moč in resnost podjetja.

3.3.1.2 Psihološke osnove

Določeni elementi grafičnega oblikovanja zelo psihološko učinkujejo in pomembno vplivajo

na zapomljivost in privlačnost. Veliko ljudi si na primer bolj zapomni določeno barvo, kot pa

celoten simbol (Dobovišek, Požep & Saje, 2009, str. 15).

Prav tako likom oziroma likovnim strukturam in elementom pripisujemo nekatere značajske

lastnosti. Liki okroglih oblik so mehki, dobrodušni in varovalni. Liki ostrih oblik so bolj

inteligentni, dinamični, nevarnejši in polemični (Repovš, 1995, str. 83).

3.3.1.3 Likovne osnove

Likovne prvine ali elementi

Temeljne likovne prvine so točka, linija, svetlo- temno, barva, ploskev in prostor.


11

Točka je praprvina, saj lahko iz nje izdelamo črte, tonske rastre (svetlo- temno), ploskve, oblike

in prostor. V likovni umetnosti je točka relativen pojem, saj lahko obsega izredno majhne ali

velike dimenzije. Točke najdemo v presekih, robovih, stičiščih črt, oblik in prostorov. S točko

določamo tudi kompozicijo likovnega dela (Kocjan, Kotnik, Opačak & Rau, 2015, str. 20).

Več točk v zaporedju zaznamo kot linijo oziroma črto, ker se pogled giblje od točke do točke.

Črta tako nastaja kot sled nekega gibanja, npr. pisala. Gibanje je glavna likovna lastnost linije.

Aktivna linija tako nastane iz svojega lastnega gibanja, pasivne linije pa nastajajo iz dejavnosti

drugih vidnih ali likovnih prvin. Z aktivno linijo lahko omejimo neko področje na površini in

tako narišemo ploskev (Kocjan, Kotnik, Opačak & Rau, 2015, str. 20).

Likovna prvina svetlo- temno določa osvetlitev objektov na sliki ali v resničnosti. Prikazuje

učinke neposredno usmerjene, razpršene in odbite svetlobe na nasebno ali odsebno (vrženo)

senco. Definira izrazite in manj izrazite tonske prehode, ter njihovo prehajanje (Kocjan,

Kotnik, Opačak & Rau, 2015, str. 20).

Vsaka barva zapolnjuje neko obliko, vsak prostor pa omejuje oblika. Oblike so pravilne in

nepravilne, vsaka oblika ima svojo zunanjo in notranjo vsebino, ki se odraža v njeni strukturi.

Krog ima tako drugačno vsebino kot trikotnik. Za razliko od trikotnika, ima krog mehko obliko,

trikotnik pa trdo (Likovna teorija, str. 5−7).

Prostor predstavlja trirazsežno tvorbo, katera nas obdaja. Likovni prostor zaznavamo s pomočjo

čutov, med katerimi je najpomembnejši vid. Ustvarja se lahko v 2D ali 3D prostoru.

Tridimenzionalni objekt prikažemo s pomočjo prostorskih ključev ali globinskimi vodili.

Prostorski ključ ali globinska vodila nam s posebnimi načini uporabljanja in organiziranja oblik

na osnovni ploskvi ustvarijo iluzijo globine prostora (Likovna teorija, str. 5−7).

Likovne spremenljivke

Likovne spremenljivke so tisti likovni elementi, ki ob istih oblikah oziroma stalnicah

spreminjajo izraz in vsebino le teh.

Likovne spremenljivke so: velikost, teža, položaj, smer, gostota, število in tekstura.

Velikost likovnega dela vzpostavlja hierarhijo v prostoru, v katerega ga postavimo. Določa, ali

je likovno delo videti bližje ali oddaljeno. Če je večje od okolice, deluje prevladujoče, če je na

isti višini, deluje enakovredno, če je manjše, pa deluje podrejeno. Velikost elementov v

kompoziciji je vedno relativno na okolico in položaj opazovalca.

Teža v kompoziciji temelji na primerjavi elementov, ki v njej nastopajo. Strnjene, zanimive,

preproste, zaprte oblike in izstopajoče barve usmerjajo nase pogled gledalca. Likovna teža

določa, kaj je pomembnejše in kje se nahaja v formatu.


12

Položaj ali razporejanje likovnih elementov in enot v kompoziciji določa njihov pomen in

odnose. Položaj likovnih elementov še posebej vpliva na doživljanje likovne teže.

Smer je vezana na prostor in našo orientacijo v njem. Navpična ali vertikalna smer deluje

statično; vodoravna ali horizontalna deluje pasivno; poševna ali diagonalna je dinamična. V

likovnih delih s smerjo oblikujemo silnice v kompoziciji, vidimo prostor v globino in

ustvarjamo mreže ali vodila.

Gostota elementov v likovni kompoziciji ustvarja rastre in ritme. Ti se lahko stopnjujejo v

prostor, se plastijo ali prelivajo. Gostota določa razmik med črtami, besedami in vrsticami na

tiskani strani.

Število ima v likovnih delih pomembno simbolično in kompozicijsko vlogo. Število vpliva na

odnose in medsebojno privlačnost objektov, figur, predmetov itd, na sliki.

Tekstura je površinska lastnost materiala. Pri oblikovanju tekstura največkrat simulira površino

kot iluzijo materiala (Kocjan, Kotnik, Opačak & Rau, 2015, str. 23 ).

Kompozicijska načela

Likovni izdelek je celota, sestavljen iz več enot in delov (figure, ozadja, likovni elementi in

objekti), ki so razporejeni v končno celoto, katero imenujemo kompozicija. Na obliko

kompozicije vpliva tudi izbira formata, likovna tehnika, kot tudi izbira motiva.

Poznamo več vrsta kompozicij:

Prosta ali nevezana kompozicija nima omejenega formata in je lahko skupek del več avtorjev.

Navpična ali vertikalna kompozicija je običajno simetrična in toga.

pasovno vezana kompozicija je značilna za v trak razporejene prostore, katero gledamo kot

linearno zgodbo in ji sledimo v eno smer.

Horizontalna ali vodoravna kompozicija je vezana na krajinske prizore oziroma gledalcu odpira

prostor v globino.

Diagonalna ali poševna kompozicija ustvarja na sliki dinamiko in poudarja gibanje figur.

Trikotniška ali piramidna kompozicija ustvarja hierarhijo in stopnjevanje prikazuje z vrha

navzdol ali obratno.

Radialna stopnjuje prizor iz središča v obod kroga.

Razpršena ali difuzna kompozicija je sestavljena iz več središč, v katere lahko opazovalec

usmeri pogled. Razpršena kompozicija je omejena s formatom in naprej načrtovana.

Mimobežna kompozicija je na videz obrezana na ključnih mestih in daje občutek hitro izvedene

fotografije. Napol prikazani deli motiva ustvarjajo v sliki suspenz oziroma nemirno

pričakovanje (Kocjan, Kotnik, Opačak & Rau, 2015, str. 24 ).


13

3.3.2 Barve

Barve so pomemben del vizualnega nagovora znotraj celostne grafične podobe podjetja. Barve

same po sebi in v odnosu z drugimi barvami pripomorejo k večji učinkovitosti, prepoznavnosti,

razlikovalnosti, berljivosti in referenčnosti simbola in celostne grafične podobe podjetja.

Teorija barv je zelo obsežna in obravnava fiziko barv, psihofiziko, psihologijo in filozofijo.

Barva kot takšna je del mentalnega sveta in ne fizičnega. Zaznava barve nastane, ko

elektromagnetni valovi zadenejo ob mrežnico očesa, človekovi možgani pa dražljaj prevedejo

v doživetje barve. Barva je tako lastnost svetlobe, svetloba pa elektromagnetno valovanje.

Bistvene lastnosti barve:

barvni ton: je odvisen od valovne dolžine svetlobnega žarka.

Svetlost barve je odvisna od jakosti svetlobnih valov. Odvisna je od stopnje odsevnosti,

vpojnosti in prosevnosti svetlobnih žarkov na površini osvetljenega telesa.

Čistost ali nasičenost barve je odvisna od zastopanosti dolžin svetlobnih valov v

sprejetem svetlobnem žarku. Najbolj doživeta je nasičena, čista barva, če je sestavljena

le iz ene same dolžine svetlobnih valov.

Barve vzbujajo različne asociacije, občutke in pomene, odvisno od barvnega tona, svetlobe in

čistosti (Repovš, 1995, str. 93).

Tako kot v HTML se tudi v oblikovanju uporabljata RGB barvni model in HEX barva, katera

predstavlja šestmestno kodo za barvo, ki sledi znaku #. RGB barvni model je kratica za Red,

Green, Blue in temelji na odtenkih rdeče, zelene in modre barve uporabljene v izbrani barvi.

Pri grafičnemu oblikovanju se uporablja tudi barvni model CMYK. Kratica CMYK sestoji iz

zelenomodre (Cyan), modro rdeče (Magenta), rumene (Yellow) ter črne (Key) barve. Za črno

barvo se uporabi črko K (Key color) kot ključno barvo za doseganje črnih kontrastov. Barve

tega barvnega modela imenujemo tudi obdelovalne barve, saj jih uporabljamo v procesu štiri-

barvnega tiskanja. Vse barve, katere poznamo, so sestavljene pri tiskanju z mešanjem teh štirih

barv. Ne glede na to, da so RGB in CMYK barve na zaslonu računalnika enake, se lahko zgodi,

da nam natisnjena slika barvno ne bo všeč, saj prepustimo računalniku, da sam izbere barvno

lestvico (Kozmus, 3.maj 2017).


14

Slika 3.3: Barvna modela RGB in CMYK (Kozmus, 3. maj 2017)

Presek barv v modelu RGB je bela barva, pri modelu CMYK pa črna barva (Slika 3.3). Barve

v RGB modelu so veliko svetlejše, kot pri modelu CMYK. Vzrok tega je, da RGB model

uporablja prepuščanje svetlobe, medtem ko model CMYK uporablja odboj svetlobe (Kozmus,

3. maj 2017).

Logotip podjetja NajZame.si je sestavljen iz naslednjih barv:

zelena: RGB (211,213,110), HEX barva # d3d56e, CMYK (20,6,71,0).

Siva: RGB (82,79,79), HEX barva #524f4f, CMYK (63,58,57,35).

Simbolika zelene barve:

Repovš za zeleno barvo navaja, da je barva rastlinskega kraljestva. Po njegovem je ta barva

srednja vrednost in posrednica med vročim in mrzlim, zgornjim in spodnjim. Zelena barva daje

občutek pomirjanja, osvežitve, predvsem pa je človeška in predstavlja večno mladost (Repovš,

1995, str. 96).

Zelena barva je barva ravnotežja in harmonije, barva rasti, pomladi, stabilnosti, vzdržljivosti in

prenove. Obnavlja in vrača energijo, ter zaradi svoje čustvenosti, daje sposobnost ljubiti in

negovati sebe in druge brezpogojno. Zelena barva simbolizira naravo, okolje, zdravje, srečo,

obnovo, mladost, vitalnost itd. (Lisjak, 2013).

Simbolika sive barve:

Siva barva je barva zrelosti, odgovornosti in sproščanja, je samostojna, nevtralna in

nepristranska barva. Zaradi trdnosti in stabilnosti, daje siva barva občutek miru in zbranosti,


15

občutek umirjanja, tišine in zadržanosti. Z vidika psihologije barv, je siva barva, barva

kompromisa- ni ne črna ne bela, je nekakšen prehod med obema nebarvama. Na eni strani je

siva barva konzervativna in dolgočasna, ter elegantna in formalna na drugi strani.

Siva barva simbolizira varnost, zanesljivost, skromnost, inteligenco, dostojanstvo, zrelost,

trdnost, praktičnost (Lisjak, 2013).

3.3.3 Tipografija

Tipografija predstavlja umetnost, natančnost ter medsebojno združevanje črk, predvsem v

večjem besedilu, ena nad drugo in njihov izgled na papirju ali ekranu (Heller & Talarico, 2011,

str. 7).

Tipografija je postopek urejanja črk, je vizualna manifestacija jezika, ki uporablja vse njegove

izraze in praktične lastnosti, in se nahaja med umetnostjo in znanostjo. Tipografija vključuje

praktično postavljanje črk, ki morajo biti berljive in morajo ustrezno sporočati informacije.

Tipografsko sporočilo mora poleg samoumevne lepote izražati tudi pomen. Pomen in izražanje

pomena sta temelja tipografske dejavnosti tako na ravni posameznih besed kot tudi daljših

razdelkov besedila. Poznavanje osnovne strukture črkovnih oblik je bistvena za razumevanje,

kako se črkovne vrste razlikujejo med seboj in katere skupne lastnosti imajo. Črka je

najosnovnejši element tipografije, vsaka črkovna vrsta pa ima edinstvene lastnosti. Osnovna

terminologija, povezana s črkovnimi vrstami, vključuje izraze kot so višina x, izdolbina, serifi

slog in poudarek (pokončno/ležeče). Tehnološki napredek pri oblikovanju in izdelavi črkovnih

vrst je otežil odločanje o izbiri, ker je digitalna izdelava črk precej nezahtevna, je na tržišču na

voljo nešteto pisav (fontov) (Dabner, Sheena & Anoki, 2011, str. 62).

Tipografski simbol logotipa ima uporabljeno črkovno vrsto Orbitron. Orbitron je geometrična

san-serif pisava in je namenjena za prikaz. Črkovna vrsta ima štiri reze: navadnega, srednje ali

pol krepkega, krepkega in ultra krepkega (Slika 3.4). Za tipografski simbol v logotipu je

uporabljena srednje krepka utež (Orbitron medium). Googlov grafični oblikovalec Matt

McInerney jo je leta 2009 oblikoval kot alternativo pisavama Eurostile in Bank Gothic.

(Fonts2u, 2017)


16

Slika 3.4: Pisava Orbitron Medium (Fonts2u, 2017)

3.4 Potek ustvarjana celostne grafične podobe podjetja NajZame.si

3.4.1 Poslanstvo, vizija podjetja NajZame.si

Podjetje je bilo ustanovljeno junija 2011, vendar se je septembra 2016 registriralo z novim

imenom, NajZame. Njihova primarna dejavnost je specializirano posredništvo pri prodaji

določenih izdelkov drugih blagovnih znamk. Njihov asortiment izdelkov v večjem delu

predstavljajo naravni, bio in eko izdelki, proizvedeni v Sloveniji. Tako tržijo prehrambne

izdelke in kozmetiko iz industrijske konoplje, eko olja, med, različne vrste moke, ročno izdelan

nakit itd.


17

3.4.2 Ime, slogan podjetja NajZame.si

Slogan podjetja NajZame se glasi: »Najboljše, kar sta narava in človek ustvarila zame«. Pri

izdelavi logotipa, je bilo glavno vodilo slogan, saj smo želeli z grafičnim simbolom logotipa

prikazati povezanost narave in človeka.

3.5 Uporaba celostne grafične podobe podjetja na aplikacijah

3.5.1 Napisi

Napisi se pojavljajo na vratih trgovine, embalažah izdelkov, reklamnih svinčnikih, majicah,

vozilih itd. Za izdelavo napisov je bil uporabljen program Adobe Illustrator. S tem smo

omogočili naročniku, da lahko kasneje natisne napise tudi v drugačnih velikostih, kot je bila

izvorna velikost za izdelavo napisa. Slika 3.5 prikazuje napis na vratih trgovine, z informacijami

o delovnemu času trgovine, ter kontaktnimi podatki podjetja. Osnovna velikost napisa je 15,8

cm x 22,3 cm (širina x višina). Slika 3.6 prikazuje nalepko na darilnem izdelku. Osnovna

velikost nalepke je 4,9 cm x 6,7 cm (širina x višina). Za oba napisa je bila uporabljena zelena

barva za ozadje, ter siva za besedilo. Za logotip smo uporabili drugo različico, kjer je grafični

simbol človeka sive barve, list kot druga roka človeka pa bele barve. Tipografija na delovnem

času trgovine je enaka tipografskemu simbolu na logotipu, katera je Orbitron Medium pisava.


18

Slika 3.5: Delovni čas na vratih trgovine NajZame.si

Slika 3.6: Nalepka na darilu


19

3.5.2 Letaki, plakati, reklame, reklamni material

Slika 3.7: Kupon za nagrajevanje zvestih kupcev

Kupon za nagrajevanje zvestih kupcev (Slika 3.7) je bil oblikovan s pomočjo programa Adobe

Illustrator. Poleg sive barve na kuponu je uporabljena tudi zelena barva z logotipom podjetja.

Pri podatkih za pošiljanje je v ozadju zamegljena slika logotipa, kar pripomore k dinamičnosti

in barvitosti kupona. Izvirni velikost oziroma format kupone je 14 x 10 cm.


20

Slika 3.8: Članek za revijo Mesečnik


21

Članek (Slika 3.8) za revijo Mesečnik je bil oblikovan v programu Adobe Illustrator. Članek

zajema eno stran A4 formata. Desni stolpec z besedilom ima ozadje zelene barve- barve

logotipa, prav tako kot ima spodnji desni del članka zelen rob okoli besedila. Slike za članek so

bile oblikovane in urejene v programu Adobe Photoshop. Tipografija, katera je uporabljena za

članek, je Roboto. Sliki 3.9 in 3.10 prikazujeta aplikacijo celostne grafične podobe na

reklamnem materialu. Podjetje za promocijske in reklamne namene uporablja pisala in majice

s svojim logotipom.

Slika 3.9: Reklamni material- pisalo


22

Slika 3.10: Reklamni material- majica


23

3.5.3 Spletna stran

V levem kotu menija spletne strani je upodobljen logotip podjetja NajZame.si. Barva menija je

zelena barva, vzeta iz ozadja logotipa podjetja. V meniju so elementi napisani s sivo barvo,

katera se nahaja tudi v logotipu podjetja. Tipografija Orbitron Medium je uporabna le za

določene besede, zato je na spletni strani podjetja uporabljena pisava Roboto. Besedila so v sivi

barvi, povezave na spletni strani in gumbi zelene. Na podstraneh z izdelki je gumb do spletne

trgovine, podobno oblikovan kot tipografski simbol logotipa (zeleno ozadje, Orbitron Medium

pisava). Spletna trgovina ima prav tako zelene gumbe za dodajanje izdelka v košarico. Skozi

celotno spletno stran, se ponavljata barvi zelena in siva, kar daje spletni strani občutek

enotnosti. Barva ozadja je bela, zaradi večje preglednosti besedila.

3.5.4 Izdelava vizitke, kuverte in dopisnega lista

Za namen diplomske naloge smo oblikovali kuverto, vizitko in dopisni list. Vizitka, kuverta in

popisni list so oblikovani v programu Adobe Illustrator.

Vizitka (Slika 3.11) je standardnega formata velikosti 9 x 5 cm. Ozadje vizitke je v rjavi

barvi ekološkega papirja. Prosojnost slike ozadja je nastavljena na 70%. Levo na sredini

vizitke se razprostira logotip brez ozadja. V levem spodnjem kotu, pod zaščitnim

znakom, je s pisavo Orbitrno Medium, napisan URL naslov spletne strani podjetja. V

zgornjem desnem kotu je napisano ime podjetja s pisavo Orbitron Medium. Pod imenom

podjetja, je s pisavo Calisto MT, napisan naslov in kraj trgovine. V spodnjem desnem

kotu, sta s pisavo Calisto MT, napisana telefonska številka in elektronski naslov

podjetja. Vsa pisava je sive barve, ki simbolizira vzeta zaščitni znak podjetja.


24

Slika 3.11: Vizitka

Pri vizitki je pomembna hierarhija informacij pisave in sicer, da ločimo podatke od

najbolj do manj pomembnih. Prav tako se na poslovnih vizitkah uporablja kombinacija

serifne in ne serifne pisave. Za tisk je pomembno, da ima vizitka podlogo najmanj 3mm

čez rob, zaradi porezave. Takšna porezava se uporablja tudi za tisk reklamnih letakov,

reklam, flajerjev itd.

Kuverta amerikanka (z okencem v levem spodnjem kotu) je velikosti 230 x 110 cm.

Nad okencem v skrajnem levem robu je odtisnjen logotip podjetja z belim ozadjem.

Desno od logotipa se nahajajo kontaktni podatki: ime in sedež podjetja, ter kraj.

Uporabljena pisava je Orbitrno Medium, tipografija je sive barve (Slika 3.12).


25

Dopisni list (Slika 3.13) je velikosti formata A4. V zgornjem levem kotu se nahaja

logotip podjetja z belim ozadjem, skrajno desno kontaktni podatki podjetja (sedež

trgovine). V nogi dokumenta so v treh stolpcih napisani podatki s sredinsko poravnavo

s sivo barvo in pisavo Orbitron Medium. V skrajno levem stolpcu so napisani: ime

podjetja, sedež podjetja in kraj. V sredinskem stolpcu so napisani kontaktni podatki:

elektronski naslov, mobilni telefon in spletna stran podjetja. V stolpcu skrajno desno sta

napisani številki TRR in davčna številka. Zaradi hierarhije podatkov, je velikost pisave

pri pomembnih podatki večja, kot pri manj pomembnih.

Slika 3.12: Kuverta amerikanka


26

Slika 3.13: Dopisni list


27

3.6 Priročnik celostne grafične podobe podjetja NajZame.si

Priročnik celostne grafične podobe natančno definira elemente CGP. Natančno določi barvne

različice različnih barvnih modelov, natančno določi tipografijo, prikaže različne variante

logotipa. Z vidika pozicije je za uporabo logotipa zelo pomembno, kje ga bomo uporabljali,

zato se v priročniku CGP na milimeter natančno definira pozicija logotipa na poslovnih

vizitkah, dopisnem papirju, blokih, mapah, nalepkah, pisemskih ovojnicah, plakatih, reklamah

in spletni strani. V priročniku je definiran osnovni CSS spletne strani (barve, pozicije logotipa,

tipografija).

Slika 3.14 prikazuje velikost logotipa. Z modrimi črtami je definirana velikost posameznega

dela zaščitnega znaka, glede na višino celotnega znaka. Črka a predstavlja višino celotnega

logotipa. Glede na velikost a, se definira velikost posameznega dela zaščitnega znaka, pri čemer

mora velikost oziroma višina pisave predstavljati velikost a/4.

Slika 3.14: Različici logotipa


28

Slika 3.15: Barvne variance 1. različice logotipa

Sliki 3.15 prikazuje barvne različici variante ležečega logotipa. Natančno so definirane barve

zaščitnega znaka in ozadja. Pri črno-belem tisku, uporabimo pri obeh variantah logotipa, črno-

belo prvo različico. Prva različica logotipa imata tudi prikazan negativ. Negativ zaščitnega

znaka je narejen v programu Adobe Illustrator, z metodo urejanja barve- zamenjava barve (ang.

invert colors).


29

Slika 3.16: Pozicije različnih verzij logotipa

Slika 3.16 prikazuje definicijo pozicij posameznega logotipa, katerega lahko uporabljamo v

različnih medijih. V katerih medijih lahko uporabljamo določen logotip, prikazuje slika 3.17.


30

Slika 3.17: Uporaba logotipa v različnih aplikacijah

Celoten priročnik celostne grafične podobe podjetja se nahaja pod prilogo A.


31

3.7 Programska oprema za izdelavo celostne grafične podobe podjetja

3.7.1 Rastrska in vektorska grafika

Med obema Adobovima programoma obstaja ena velika razlika. Adobe Photoshop uporablja

za kreiranje slike točke oziroma piksle, zato tej grafiki pravimo bitna oziroma rastrska grafika.

Pri bitni grafiki je slika v računalniškem pomnilniku shranjena kot matrika s podatki o barvi in

intenzivnosti barve za vsako točko oziroma za vsak posamezen piksel slike. Pri transformiranju

slike (vrtenje, povečava, razteg) postane rastrska grafika nazobčana, slika se popači in pokvari

se ločljivost slike (Wikipedija, 2014).

“Vektorska grafika za razliko od bitne, uporablja objekte. Objekti na sliki so določeni z

različnimi osnovnimi geometrijskimi objekti kot so točke, črte, krivulje in mnogokotniki.

Vektorske slike se lahko transformirajo (vrtijo, povečajo, raztegnejo) brez poslabšanja

ločljivosti slike, saj je vsaka posamezna komponenta vektorske slike v računalniškem

pomnilniku definirana posebej” (Wikipedija, 2014a).

Programa Adobe Photoshop in Adobe Illustrator ponujata možnost, da shranimo sliko za

spletno stran. Slike, shranjene za splet, imajo končnice .gif, .jpeg in .png. To nam omogoča, da

slike ne spremenijo barv ko se prikažejo na spletni strani, temveč obdržijo izvirno barvo.

3.7.2 Adobe Photoshop CS6

Adobe Photoshop velja za enega vodilnih programov za urejanje fotografij. Photoshop

uporablja za kreiranje slike točke ali piksle, torej se uporablja za rastrsko grafiko. Programska

oprema omogoča uporabnikom da manipulira obrezovanje, spreminjanje velikosti in barve na

digitalnih fotografijah. Programska oprema je še posebej priljubljena med profesionalnimi

fotografi in grafični oblikovalci. Program Adobe Photoshop je bil uporabljen za urejanje slik

na spletni strani in v spletni trgovini, za urejanje slik na letakih, reklamah in za izdelavo gumbov

na spletni strani.


32

Slika 3.18: Vtisnjen logotip v usnjeno platnico knjige

V programu Photoshop je bil narejen tako imenovani »mockup« (Slika 3.18 in 3.19), ki

prikazuje vtisnjen logotip v usnjeno knjigo oziroma les. Reliefni pečat se lahko naredi pri natisu,

vendar če želimo sliko pokazati na računalniškem zaslonu, to brez programa kot je Adobe

Photoshop ni mogoče. S posebnimi funkcijami in efekti lahko ustvarimo videz vtisnjenega

oziroma reliefnega logotipa na sliki, kateri je popolnoma realen dejanskemu vtisu v usnje ali

les.

Slika 3.19: Vtisnjen logotip v les

3.7.3 Adobe Illustrator CS6

Adobe Illustrator se uporablja za kreiranje vektorskih slik. Program uporabljajo tako fotografi

kot grafični oblikovalci. Illustrator se uporablja za izdelavo logotipov, letakov, vizitk,… Adobe

Illustrator je bil uporabljen za izdelavo logotipa, plakatov, vizitk, dopisnega lista in reklam.


33

Prednost tega programa je, da lahko sliko, narejeno v Adobe Illustratorju, natisnemo tudi na

večje formate, pri čemer zaradi vektorskega zapisa objektov ne izgubimo čistosti slike.

Pri shranjevanju slik v Adobe programih, moramo v naprej vedeti, kje bomo shranjeno sliko

uporabljali oziroma ali jo bomo natisnili ali uporabljali na spletni strani. Če pripravljamo

logotip za tisk, je potrebno datoteko poslati v vektorski obliki.

Prednost kot smo že omenili je ta, da ga lahko povečujemo ter mu neposredno določimo barve

(CMYK barvni model):

.ai- Adobe Illustratorjeva vrsta datoteke,

.eps - (Postscript zapis) je tekstovna datoteka, ki jo ustrezen program spremeni v krivuljo,

.pdf (AdobeAcrobat zapis) je uporabna vrsta datoteke, vendar lahko vsebuje rastrske logotipe,

katerim se ne da neposredno spreminjati barv. Pri pretvarjanju logotipa v .pdf datoteko je

predhodno potrebno »zapakirati« vektorsko grafiko, da se pri pretvorbi v .pdf ne spremeni v

rastrsko.

.fs (Flexi Sign Pro od Sai) je najbolj primerna datoteka za izdelavo grafičnih predlog,

.wmf, .dxf, .aama,… in druge vektorske datoteke so tudi uporabne, vendar niso tako pogoste

(Zalokar, 2013).

3.7.4 Adobe InDesign CS6

Prvenstveno se ga uporablja pri oblikovanju in postavitvi raznovrstnih tiskovin. Poleg urejanja

in postavitve knjig se lahko v tem programu pozabavamo tudi z revijami, članki, časopisi, letaki,

plakati, katalogi, priročnik idr. Če je na tiskovini malo besedila in veliko grafičnih elementov,

je bolj smiselno uporabiti katero od aplikacij za urejanje bitne ali vektorske grafike, se pravi

Photoshol ali Illustrator, če govorimo o Adobovi družini. InDesign je tako najmočnejši, pri

postavljanju dolgih besedil v kombinaciji z grafičnimi elementi, kjer se zahteva hitrost,

celovitost in profesionalnost rezultatov. S tem programom lahko ustvarimo več strani v isti

datoteki. InDesign je bil uporabljen za izdelavo priročnika celostne grafične podobe podjetja

NajZame.si. (Štrancar & Gradečak, 2008, str. 7).

33

4 PROGRAMIRANJE SPLETNIH STRANI

4.1 Kratek pregled zgodovine

Zgodovina interneta se začne z razvojem računalnikov leta 1950. Začetni koncept je zasnova

omrežja, kateri prenese sporočilo razdeljene na več paketov. Le-tega, pa so zasnovali v različnih

laboratorijih v Ameriki, Veliki Britaniji in Franciji. Ameriško ministrstvo za obrambo, je leta

1960 podelilo pogodbo za omrežje paketnih sistemov (ang. packet network system), vključno

z razvojem ARPANET. Prvo sporočilo je bilo poslano preko ARPANET iz laboratorija

računalništva, profesorja Leonarda Kleinrocka na Univerzi v Kaliforniji. Prejemnik sporočila

je bilo omrežno vozlišče na Institutu Standford (Wikipedia, 2017).

Znanstveniki so razvili postopek prenosa, pri katerem so računalniški podatki razbiti na manjše

dele ali pakete, ki potujejo med seboj neodvisno in se združijo šele potem, ko vsi prispejo do

naslovnika. Med seboj so želeli izmenjavati spoznanja o svojih znanstvenih dosežkih in

najnovejših odkritij. Potrebovali so dovolj hiter način za izmenjavo podatkov- besedila, slik in

zvoka. Dotlej internet tega ni omogočal. Uporabljal se je zgolj za pošiljanje skrivnostnih ukazov

in preprosta tekstovna sporočila (Hanke, 2001, str. 5−6).

Manj kot 20 let nazaj, je bil internet nekakšna Pandorina skrinjica, katere prvi uporabniki so jo

»odpirali« z veliko previdnostjo. Takrat najpopularnejši spletni iskalnik je bil Yahoo. Strani z

največ vsebinami so bile Geocitijeve kjer je bil tekst napisan navpično, z že v naprej določenim

ozadjem z malo povezavami ki so bile ali podčrtane ali okrepljene. V tistih časih je bil internet

nekaj, kar je se je šele začelo raziskovati in čeprav je bila komunikacija med nekom iz

Jugoslavije in nekom iz Amerike nekaj nepredstavljivega, je bil internet še vedno le primitivna

imitacija natisnjenega materiala. Internet je do sedaj najhitreje rastoča oblika tehnologije.

Izboljšuje se vsak dan, vsako minuto, vsako sekundo. Povezan je tudi z razvojem novih

programov in nas vedno preseneti s stopnjo interaktivnosti, katera nas pritegne in nas popelje v

nepredvidljive imaginarne svetove (Paz, 2009, str. 8).

Svetovni splet, kakršnega poznamo danes in katerega označujemo s kratico WWW (World

Wide Web), so osnovali v letih 1989 in 1990 znanstveniki v Cernu (Hanke, 2001, str. 6).

V začetku interneta in svetovnega spleta so bili strokovnjaki, ki so se prvi poskusili v razvoju

spleta, sprva pravzaprav grafični oblikovalci na področju spleta. Danes, to delo opravljajo

spletni oblikovalci. Oblikovanje za splet se zelo hitro razvija. Če želi oblikovalec dohajati


35

nenehni razvoj možnosti, ki jih ponuja tehnologija, mora upoštevati osnove in načela

oblikovanja, poleg tega pa jih mora včasih tudi na novo tolmačiti. Pri vključevanju področij,

kot so vizualno informacijsko oblikovanje, estetika in kompozicija, mora spletni oblikovalec

izkazati tudi obsežno razumevanje modernejših tehnoloških pojavov, kot so programiranje,

interakcija z uporabniki in novih spletnih trendov. Spletno stran, ki je hkrati uporabna in dobro

oblikovana, najlažje ustvarimo, če razumemo omejitve in možnosti spletne tehnologije ter

pričakovanja strank in občinstva. Dejavniki, kot so ločljivost uporabnikovega zaslona, razlike

med brskalniki, osebne nastavitve in starost računalnika, igrajo pomembno vlogo pri določanju

načina, s katerim se spletni oblikovalec loti projekta. Praktično izvajanje razumevanja osnov

vizualne estetike, ergonomije vmesnika in dobra tipografija so v veliko pomoč pri učinkovitem

spremljanju prometa na spletni strani. Vse to pa je stvar vizualne grafične zasnove, ki jo tvori

čista skriptna koda HTML (Dabner, Sheena & Anoki, 2011, str. 148).

4.2 Vrste spletnih strani

Na statični spletni strani se vsebina strani ne spremeni, če ni spremenjena sama koda spletne

strani. Dinamične spletne strani lahko v nasprotju s statično stranjo, prikažejo različne vsebine

iste izvorne kode spletne strani. Pri izbiri spletne strani za podjetje je tako pomembno določiti

namen, kateremu bo služila spletna stran.

Pri statični spletni strani se vsebina vsakemu obiskovalcu prikaže enako. S tem ni mišljeno da

je statična spletna stran zgolj goli tekst. Lahko ima prikazane multimedijske vsebine, slike,

video posnetke itd. (McDunnigan, 2017).

Dinamična spletna stran omogoča, da bodo obiskovalci iz iste izvorne kode, dobili prikazano

različno spletno vsebino. Stran je lahko prikazana različno, glede na brskalnik, katerega

uporabnik uporablja, operacijski sistem računalnika, ali medij, na katerem se dostopa do spletne

strani, pa naj gre za mobilni telefon, tablični računalnik ali računalnik. Dinamične spletne strani

niso nujno boljše od statičnih spletnih strani. Obe služita različnim namenom uporabe

(McDunnigan, 2017).

Razvijalci v večini uporabljajo za razvoj statične spletne strani HTML jezik. Pri izdelavi

dinamičnih spletnih strani se poslužujejo programskih jezikov PHP in Javascript. Programska

jezika za izdelavo dinamičnih spletnih strani imata sposobnost ustvarjanja statičnih spletnih


36

strani, vendar to ustvari izvorno kodo, ki je po nepotrebnem zapletena za svoj namen uporabe

in težja za vzdrževanje (McDunnigan, 2017).

4.3 Tehnologije za izdelavo spletne strani

Spletne jezike je najbolje razvrščati glede na njihove inheritne lastnosti. Vsi jeziki posedujejo

visok nivo kompleksnosti in zapletenosti. Na spodaj naštetih in obrazloženih jezikih temeljijo

dejavnosti številnih podjetij. Ti jeziki tvorijo sliko spleta, kakršnega poznamo danes.

4.3.1 Označevalni jezik HTML

Kratica HTML je nastala iz besed Hyper Text Markup Language. HTML je označevalni jezik,

ki je s svojo zelo preprosto uporabo in predvsem s funkcionalnostjo med uporabniki najbolj

razširjen. Združuje preproste ukaze, s katerimi v spletu prikažemo želeno vsebino. Z oznakami

HTML brskalniku povemo, kako naj uredi, razporedi ali označi golo besedilo, lahko pa mu tudi

določimo velikost, barvo, slog pisave in pot premikanja.

Vsaka spletna stran, napisana v HTML jeziku, je sestavljena iz tako imenovane glave in telesa

(Slika 4.2). V glavi so zapisani meta podatki o strani, kateri so za uporabnika nevidni. Naslov

strani, kateri je viden na zavihku spletnega brskalnika, se prav tako definira v območju glave.

Besedilo in vsebina strani, se piše v območju telesa (Kaltenekar, 2006, str. 1−5).

V HTML dokumentu lahko vstavljamo slike, nastavimo ozadje dokumenta, vstavljamo

hiperpovezave, spreminjamo barve povezav in besedila, dodatno oblikujemo pisave,

ustvarjamo tabele in obrazce, vstavljamo okvirje, zemljevide in dodajamo posebne učinke na

našo spletno stran. Pri vstavljanju slik na spletno stran moramo biti pozorni, če sami naredimo

sliko, da jo shranimo posebno za spletno stran. Tako se pri shranjevanju slike in pri vstavljanju

v HTML dokument, barve na sliki ne popačijo ali spremenijo. Najprimernejši formati slik za

HTML dokument so .GIF, .JPEG in .BMP. Sliko vstavimo s pomočjo naslednjega ukaza:

< IMG SRC= "pot in ime datoteke, kjer je slika shranjena" >.

Sliki lahko določimo tudi širino in višino, postavitev na spletni strani in naslov, v primeru, da

se slika zaradi napake ne prikaže. Če želimo na spletni strani določiti ozadje, to naredimo v

polju <BODY> tako, da definiramo ozadje:

<BODY BACKGROUND= "ime datoteke" >.

Povezavo na drugo spletno mesto zapišemo tako:


37

<A HREF = "url spletne strani" > in jo na koncu zaključimo z: </A>. Če želimo,

da se stran odpre v novem oknu, znotraj značke A HREF dodamo target= "_blank".

Kadar imamo sliko, katero bi radi uporabili kot povezavo na drugo spletno mesto, znotraj značk

za povezave dodamo IMG značko:

<A HREF = "url spletne strani" >< IMG SRC= "slika.jpeg" ></A>.

Zemljevid vstavimo tako, da na Google zemljevidu poiščemo državo, mesto ali ulico in hišno

številko, katero želimo prikazati na zemljevidu in kliknemo na vdelaj. Prikaže se nam koda,

znotraj katere lahko določimo širino in višino zemljevida, ter pozicijo kjer bo prikazan

zemljevid na naši spletni strani. Koda zemljevida, uporabljenega na spletni strani NajZame.si

izgleda takole:

<IFRAME

src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d278

1.345744147815!2d15.168529140904296!3d45.80433367686067!2m3!1f

0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4764fffb484c6a75

%3A0x7916494148f976ca!2sGlavni+trg+2%2C+8000+Novo+mesto!5e0!3m

2!1ssl!2ssi!4v1478772322424" width="250" height="200"

frameborder="0" style="border:0" allowfullscreen></IFRAME>

Barve pisave in povezav v HTML kodi določamo z RBG barvnim modelom ali imenom barve.

Kadar določamo barvo pisave ali povezave v HTML-ju, bo brskalnik obarval le tisti del

besedila, kateri je napisan v znački, kjer smo definirali barvo. Če imamo veliko naslovov in

povezav, katere želimo obarvati v isti barvi, potem barvo definiramo v CSS dokumentu. V

HTML kodi definiramo le tiste barve besedila ali povezave, za katere želimo da so drugačne

kot vse ostale na naši spletni strani.

Obrazec HTML:

Z značko

< FORM ACTION= mailto:[email protected] METHOD="post" >

naredimo metodo, katera bo ob kliku na gumb pošlji (submit), poslala elektronsko sporočilo z

odgovori obrazca na zgoraj določen elektronski naslov. Input se uporablja za vstavljanje

podatkov v obrazcu. Inputu določimo tip podatkov, katere bomo vnašali (besedilo, polja za

označevanje, izbirni gumb, potrditvena polja, izbirni seznam, datum). Na koncu obrazca mora

biti gumb pošlji (Slika 4.1). Ta gumb izvrši ukaz v prvi vrstici, kjer se obrazec začne. Spletnemu

mailto:[email protected]


38

obrazcu lahko dodamo tudi gumb prekliči, ki pobriše podatke iz spletnega obrazca (Hanke,

2001, str. 70).

Slika 4.1: Spletni obrazec

4.3.1.1 Meta podatki

Meta podatki so informacije o spletni strani. Meta elementi se običajno uporabljajo za določanje

opisa strani, avtorja dokumenta, ključnih besed, zadnje spremembe spletne strani itd. Meta

podatki se uporabljajo tudi v brskalniku za iskanje na osnovi ključnih besed. HTML 5 je uvedel

nov način, da lahko oblikovalci spletnih strani prevzamejo nadzor nad prikazom spletne strani

skozi meta oznako. Viewport (Slika 4.2) je vidno polje spletne strani. To se spreminja glede na

napravo, na kateri obiskujemo spletno stran. Spletna stran bo tako prikazana manjša za mobilni

telefon in večja za računalniški zaslon. Meta oznaka Viewport da brskalniku navodila, kako naj

prikaže spletna vsebina glede na širino zaslona oziroma vidnega polja. Prikaz spletne strani je

tako zelo odvisen od naprave na kateri dostopamo do spletne strani (W3schools, 1999−2017).


39

Slika 4.2: Osnovna koda z meta oznakami

4.3.2 Skriptni jezik CSS

Kratica CSS je nastala iz besedne zveze Cascading Style Sheets (kaskadni slogi ali slogi CSS).

Prva priporočila za CSS je W3C izdal že davnega leta 1996 in prvi brskalnik, ki jih je podprl,

je bil Internet Explorer. Gre za skriptni jezik, namenjen samo oblikovanju spletnih strani. CSS

mehanizem pove spletnemu brskalniku, kako naj prikaže HTML dokument, strukturira vsebino

HTML dokumenta in mu da želeno obliko. S CSS oblikujemo vse: ozadja, naslove, besedilo,

slike, povezave, menije, tabele, obrobe itd. (Slika 4.3). CSS določa, kako mora brskalnik

prikazati posamezne elemente HTML. Prednost oblikovanja spletne strani s CCS-jem je v tem,

da vsak element oblikovno definiramo le enkrat- v datoteki CSS. CSS datoteko je potrebno

uvoziti v HTML datoteko (Slika 4.2), da brskalnik na osnovi HTML vsebine in CSS oblike

prikaže spletno stran.

CSS nam torej omogoča, da uporabljamo različne stile pri izdelavi bolj funkcionalnih in

estetskih spletnih strani. CSS lahko napišemo kot samostojno datoteko in jo kličemo znotraj


40

polja <HEAD> v HTML kodi. Če želimo drugače oblikovati le delček spletne strani v HTML

kodi, lahko CSS stil določimo znotraj kode HTML, pri čemer moramo CSS kodo definirati v

polju <STYLE> </STYLE> (Kalteneker, 2006, str. 84).

Slika 4.3: CSS koda

V CSS datoteki lahko definiramo postavitev, barvo, oddaljenost od robov, velikost, tip pisave,

razmik med vrsticami in odstavki, stil pisave, črk, besedila, naslovov in odstavkov na spletni

strani. Včasih se je oblika spletne strani definirala s tabelami v HTML kodi, s čimer smo dobili

menijsko vrstico in dve ali tri stolpiče na spletni strani. Danes, z razvojem računalniških

jezikov, se oblika spletne strani definira v CSS datoteki. Definira se širina spletne strani, odmik

strani od robov brskalnika, kako bo izgledala postavitev strani- kje bo glavni meni, koliko bo

stolpcev na spletni strani, kako visoka bosta menijska vrstica in noga spletne strani itd. S CSS-


41

jem se definira tudi oblika tabel, obrazcev, seznamov in menuja. Zelo pogosta oznaka CSS

dokumenta je tudi :hover, katera definira poseben stil elementu, ko se premaknemo z miško

na njega (Wyke-Smith, 2008, str. 278).

4.3.3 Skriptni jezik JavaScript

Javascript je predmetno orientiran skriptni jezik, ki omogoča izboljšanje in posodobitev oblike,

izdelovanje piškotkov, doda spletni strani različne funkcionalnosti in spletne obrazce.

Uporablja se tudi za izračunavanje in rokovanje z objekti na uporabniških straneh. Da je

JavaScript uporaben, mora sodelovati s predmeti na uporabniški strani in njihovimi lastnostmi

in postopki, saj sam po sebi ni uporaben, ker vanj ne moremo vnašati podatkov in nam jih tudi

ne vrača. JavaScript je uporabljen na milijonih spletnih straneh in je najpopularnejši skriptni

jezik na svetovnem spletu, poleg tega pa ta jezik podpira tudi večina brskalnikov. JavaScript

tako omogoči HTML oblikovalcem programsko orodje, omogoči dinamični prikaz teksta na

HTML spletni strani in to, da postanejo spletne strani dinamične. JavaScript se lahko odziva

oziroma reagira na določene aktivnosti na spletni strani. Z JavaScriptom preverimo vpisane

podatke v spletnih obrazcih, preden le te pošiljamo na strežnik. JavaScript lahko zazna

brskalnik, katerega uporablja obiskovalec na spletni strani ter glede na brskalnik prikaže

določeno spletni stran posebej oblikovano za ta brskalnik (Refsnes, Refsnes, Refsnes, Refsnes

& Henthorne, 2010, str. 1).


42

Tabela 4.1: Spremenljivke v JavaScriptu (Vir: Refsnes, Refsnes, Refsnes, Refsnes &

Henthorne, 2010, str. 23−26)

Ime Vrednost Opis

niz (String) "besedilo" Niz znakov med dvojnimi ali enojnimi

navednicami ("A" je enako 'A').

število (Number) 3.141 Poljubno število brez navednic. Za decimalno

ločilo se uporablja pika (ne vejica).

logična

spremenljivka (Boolean)

true Logična spremenljivka ima lahko samo dve

vrednosti, in sicer »true« ali »false«.

null (Null) null Spremenljivka brez vrednosti.

objekt (Object)

Programski objekt

funkcija (Function)

Definicija funkcije

JavaScript se uporablja na širokem področju:

meniji,

pošiljanje podatkov,

upravljanje z okni in okvirji,

oblikovanja integriranih uporabniških vmesnikov,

preverjanje vnesenih podatkov,

predstavitev besedila in slik,

upravlja z zgodovino in povezavami,

delo s piškotki,

časovnim nadzorom.

https://sl.wikipedia.org/w/index.php?title=Niz_(ra%C4%8Dunalni%C5%A1tvo)&action=edit&redlink=1

https://sl.wikipedia.org/wiki/%C5%A0tevilo

https://sl.wikipedia.org/w/index.php?title=Logi%C4%8Dna_spremenljivka&action=edit&redlink=1

https://sl.wikipedia.org/w/index.php?title=Logi%C4%8Dna_spremenljivka&action=edit&redlink=1

https://sl.wikipedia.org/w/index.php?title=Objekt_(ra%C4%8Dunalni%C5%A1tvo)&action=edit&redlink=1

https://sl.wikipedia.org/w/index.php?title=Funkcija_(ra%C4%8Dunalni%C5%A1tvo)&action=edit&redlink=1


43

Ena od možnosti, ki jih omogoča jezik JavaScript, je programiranje možnosti obnašanja spletne

strani v določenih trenutkih. To se naredi s pomočjo tako imenovanih dogodkov oziroma ang.

events:

Onchange- klik na ta dogodek spremeni HTML element.

Onclick- ko uporabnik klikne na HTML element, se nekaj izvrši.

Onmouseover- ko gremo z miško čez besedilo ali sliko, se ta spremeni.

Onmouseout- ko gremo z miško stran z besedila ali slike, se ta spremeni.

Onload- brskalnik zaključi nalaganje strani. (W3schools, 1999−2017

Druge pogosto uporabljene rezervirane besede za JavaScript so tudi boolean, function, var,

typeof, public, import itd. Ta imena se ne morejo uporabljati kot imena spremenljivk, oznake

ali imena funkcij.

Boolean- lahko uporabimo kot funkcijo in predstavlja eno od dveh vretnosti (true ali

false):

Boolean(10 > 9) //vrne vrednost true

Boolean je lahko definiran tudi kot objekt s predpono new:

var x = new Boolean(false); // x je objekt

Function- je rezervirana beseda za opis funkcije. Sledi ji ime funkcije in

parametri():

function ime(parameter1, parameter2, parameter3) {

koda da se funkcija izvrši

}

Var- beseda var predstavlja spremenljivke, kamor shranjujemo podatke:

var x = 5;

var y = 6;

var z = x + y;

Typeof- JavaScript ima pet različnih podatkovnih tipov, kateri lahko vsebujejo

vrednosti: string, number, bolean, object in function. Tri tipe objektov: object, date in

array. 2 podatkovna tipa katera ne vsebujeta vrednosti: null in undefined. Operacija

typeof uporabimo, kadar želimo izvedeti kakšen podatkovni tip ima JavaScript

spremenljivka.

typeof "John" // Vrne "string"

typeof 3.14 // Vrne "number"


44

typeof [1,2,3,4] // Vrne "object"

typeof false // Vrne "boolean"

Public- Public lastnosti so definirane z:

this.imeSpremenljivke

in jih lahko beremo/zapisujemo zunaj objekta.

Public metode definiramo kot:

Imerazreda.prototype.imeMetode = function(){...}

in je lahko klicana zunaj razreda. Če imamo public dostop pri lastnosti ali

spremenljivki, lahko do njega vsakdo dostopa in ga spreminja.

Import- Z import vstavljamo funkcije, objekte in gradnike, ki so bili izvoženi iz

zunanjega modula, drugih skriptov, itd.

Import "ime-modula";

(W3schools, 1999−2017).

Slika 4.4: Prikaz uporabe JavaScript v glavi kode

Slika 4.4 prikazuje uporabo JavaScripta, kjer v glavi kode definiramo funkcijo, ter jo kasneje v

polju <body> uporabimo oziroma kličemo. S funkcijo »datepicker« ustvarimo polje za izbiro

datuma. Datum je definiran na osnovi letnice, meseca in dneva. Na osnovi izbranega datuma se

na spletni strani ali v bazi spletne strani izvrši nek dogodek. Na spletni strani NajZame.si se

JevaScript uporablja pri vtičnikih na spletni strani (kontaktni obrazec in pop-up obrazec) in pri

interaktivnih delih besedila v meniju, kjer se besedilo spremeni, ko gremo z miško čez besedilo.


45

Slika 4.5: Spletni obrazec na NajZame.si

Slika 4.5 prikazuje obrazec na spletni strani, kateri je namenjen pošiljanju vprašanj v zvezi s

produkti, namenjeni podjetju. JavaScript pred pošiljanjem podatkov na strežnik, preveri ali so

vsa polja, katera so obvezna za vnos vnesena in ali so podatki pravilni glede na zastavljene

pogoje vsakega polja.

4.3.4 Programski jezik PHP

Za jezik PHP lahko trdimo, da je prerasel svoje ime. Izvirno je bil zamišljen kot niz makrov, ki

bi piscem kode pomagal pri vzdrževanju osebnih domačih strani, ime pa se je razvilo iz

njegovega imena. Od takrat so bile možnosti PHP-ja razširjene iz niza pripomočkov v

programski jezik s številnimi možnostmi, s katerimi je mogoče upravljati velika spletna okolja,

ki jih poganjajo zbirke podatkov. Z večanjem možnosti, katere nudi jezik PHP, se je večala tudi

njegova priljubljenost. PHP odprtokodni programski jezik je uradno znan kot Hypertext

Precessor. Je strežniški skriptni jezik, pogosto zapisan v povezavi s HTML-jem. V nasprotju z

običajno stranjo HTML strežnik PHP skripta ne pošlje neposredno odjemalcu, ampak ga

razčleni sam pogon PHP. Elementi HTML v skriptu so izpuščeni, koda PHP pa je prevedena in

izvedena. S kodo PHP v skriptu lahko poizvedujemo po zbirkah podatkov, izdelujemo slike,

beremo in zapisujemo datoteke, komuniciramo z oddaljenimi strežniki. Možnosti so neskončne

(Zandstra, 2004, str. 8).

Sistem za upravljanje z vsebinami Wordpress temelji na jeziku PHP, kateri omogoča izdelavo

dinamičnih spletnih strani. V Wordpressu imajo datoteke običajno končnico .php in se lahko


46

uporabljajo znotraj HTML dokumenta. PHP procesira le tiste procese, kateri so znotraj polja

php (Slika 4.6). Slika 4.6 prikazuje PHP kodo spletne strani podjetja NajZame.si. Z ukazom:

<?php get_header(); ?> brskalniku povemo, da vstavi datoteko header.php. Pri

programiranju spletne strani v PHP jeziku, lahko stran razbijemo na manjše dele kode in jih

shranimo s končnico *.php. Kasneje, če želimo določen odstavek, kateri je shranjen kot php

datoteka, uporabiti tudi na drugi strani, uporabimo zgornji ukaz get_imePHPdatoteke.

Takšno pisanje spletnih strani je za kasnejše popravke lažje in hitrejše, saj spremenimo izvorno

datoteko PHP (npr. telefonsko številko v nogi strani) in se ta sprememba spremeni na celotni

spletni strani. 7.Vrstica v spodnji kodi (Slika 4.6) prikazuje PHP kodo, kjer brskalnik zazna,

kateri del teme mora izpisati na spletni strani. V našem primeru brskalnik prikaže del teme

»loop« in blog postavitev. Na koncu spodnje kode brskalnik prikaže stranski meni (ang.

sidebar) in nogo spletne strani (W3schools, 1999−2017).

Slika 4.6: Primer PHP dokumenta v Wordpressu

V spletni strani kodo, napisano v PHP navedemo znotraj značk:

<?php

?>

Ukazi v PHP kodi se ločijo s podpičji (;). Spremenljivke se definirajo z znakom

$imespremenljivke. Za izpis vrednosti spremenljivke uporabimo echo

'$imeSpremenljivke'. PHP jezik uporablja različne zanke, funkcije, časovne funkcije

in posebne spremenljivke, med njimi tudi $_GET in $_POST (W3Schools, 1999−2017).


47

4.3.4.1 Zanke

PHP pozna več zank. Najpogostejši sta IF (če) in FOR (za). IF zanko napišemo tako, da znotraj

navadnih oklepajev navedemo pogoj. Pri pogoju uporabimo enega od naslednjih operatorjev: =

= (je enako), < (manjše kot), > (večje kot), <= (manjše ali enako), => (večje ali enako), != (ni

enako). Kot pri matematiki, lahko uporabimo tudi logične operatorje kot so: AND (&&), OR (||)

ter NOT (!). Pogoju sledijo zaviti oklepaji, znotraj katerih so stavki, ki naj se izvedejo, če je

pogoj resničen. Če želimo, da se izvede nekaj drugega, če pogoj ni resničen, uporabimo še else

, kateremu sledi stavek v novih zavitih oklepajih, kateri se izvede če pogoj ne drži.

<?php

$a=1;

$b=3;

if ($a= = $b)

{

echo '1 je enako 3';

}

else

{

echo '1 ni enako 3';

}

?>

V zgornjem primeru, se na zaslonu izpiše 1 ni enako 3.

FOR (za) se izvaja, dokler pogoj ni izpolnjen.

<?php

for ($i=1; $i<=3; $i++)

{

echo 'Spremenljivka i ima vrednost '.$i' ';

}

?>

Izpisalo se bo:

Spremenljivka i ima vrednost 1.




48

Zanka FOR se je izvedla trikrat, dokler $i ni bil večji ali enak 3, kot je bilo zapisano v pogoju.

Prvi argument v zanki je implementacija spremenljivke. Spremenljivki $i določimo vrednost

1. V drugem argumentu zapišemo pogoj, da se zanka ponavlja toliko časa, dokler $i ne bo

večji ali enak 3. V tretjem argumentu določimo, kaj naj se naredi, ko se posamezna zanka konča.

$i++ pomeni, da se spremenljivka poveča za ena. Lahko bi uporabili tudi $i-- ali $i**.

4.3.4.2 Funkcije

Funkcije se uporabljajo, da ne rabimo večkrat ponavljati istih ukazov.

<?php

function sestej ($a,$b)

{

return $a+$b;

}

echo sestej(2,8);

?>

Na začetku smo določili spremenljivki a in b. Funkcija vrne seštevek števila a in b. Ko funkcijo

kličemo, določimo vrednosti spremenljivk a in b, na zaslon pa se izpiše število 10 (W3schools,

1999−2017).

4.3.4.3 Časovne funkcije

Funkcija DATE vrne rezultat datuma na serverju. Podati ji moramo argument, v katerem

zapišemo format datuma ali časa.

<?php

echo date("d.m.y");

?>

Datum:

d-dan v mesecu (od 1 do 31)

m-mesec (od 1 do 12)

y- leto (zadnji dve številki)

Y- letnica


49

Čas:

H- ura 24ur (brez ničel)

h- ura 12 ur (brez ničel)

i- minute

s- sekunde

(W3schools, 1999−2017).

4.3.4.4 Posebne spremenljivke

PHP ima ogromno posebnih spremenljivk, kot so $_SESSION, $_COOKIE, $_SERVER,

$_ENV, ter $_GET in $_POST.

Piškotki:

Piškotki so posebne datoteke, katere se shranjujejo v brskalniku in spletnim stranem omogočajo

shranjevanje določenih besed.

<?php

setcookie("mojPiškotek", "diploma");

echo $_COOKIE["mojPiškotek"]

?>

Najprej smo s funkcijo setcookie nastavili vrednost našega piškotka. Prvi argument je

ime, drugi pa vrednost piškotka. Z $_COOKIE smo izpisali naš piškotek s posebno

spremenljivko (W3schools, 1999−2017).

$_GET in $_POST

$_GET in $_POST sta posebni spremenljivki, ki shranjujeta podatke poslane iz obrazca.

$_GET spremenljivka shranjuje podatke poslane iz obrazca ali URL naslova strani in je v obliki

polja. $_POST spremenljivka shranjuje podatke poslane iz obrazca in je v obliki polja. Ko

potrdimo pošiljanje obrazca, se pri spremenljivki $_GET podatki izpišejo tudi v URL naslovu

strani, pri spremenljivki $_POST pa ne.

<?php

$ime = $_GET['ime'];

$mail = $_GET['mail'];


50

echo 'Ime vam je '.$ime', vaš elektronski naslov je '.$mail'.';

?>

(W3schools, 1999−2017).

4.3.5 Odprtokodni sistem MySQL

MySQL je odprtokodni sistem za upravljanje s podatkovnimi bazami, katerega uporablja tudi

Wordpress. Deluje podobno kot strežnik in omogoča, da v istem času več različnih uporabnikov

upravlja in spreminja bazo. V podatkovno bazo so shranjeni podatki, kateri so uporabljeni na

spletni strani. Wordpress v podatkovno bazo shranjuje strani in podstrani, vsebino, profile

registriranih uporabnikov in objavljene prispevke. Wordpress uporablja programski jezik PHP

za pridobivanje podatkov iz podatkovne baze. Večina ponudnikov spletnih domen nudi spletne

aplikacije, preko katerih lahko dostopamo do strežnika in podatkovne baze, shranjene na našem

strežniku. Pri podjetju NajZame.si ponudnik spletne domene ponuja za upravljanje strežnika

spletno aplikacijo CPanel, preko katere lahko s spletnim programom phpMyAdmin dostopamo

do podatkovne baze (Slika 4.7). PhpMyAdmin je spletni grafični vmesnik, s katerim lahko

dostopamo do podatkovne baze in preko katerega lahko ustvarjamo, brišemo, urejamo itd.

tabele znotraj podatkovne baze (Wpbeginner, 2009−2017).

Slika 4.7: Podatkovna baza spletne strani NajZame.si

Wordpress podatkovna baza spletne strani NajZAme ima 114 tabel, katere se generirajo ob

namestitvi wordpressa na strežnik, ter se nadgrajuje z novimi tabelami z namestitvijo vtičnikov.

Podatkovna baza je velika 26,1 Mb in ima 53.755 vrstic. Na spletni strani NajZame je v uporabi


51

70 tabel. Najpomembnejše tabele v podatkovni bazi so: tabela z admin uporabniki, nastavitvami

spletne strani, moduli, statistiko in spletnimi obrazci. Te tabele uporablja spletna stran. Vtičniki

za zaščito spletne strani, v večini uporabljajo tri tabele iz podatkovne baze (wfFileMods,

wfStatus in wpbackitup_job_items). Če delamo spletno stran v wordpressu, ne potrebujemo

sami pisati poizvedb za pridobitev podatkov iz baze, saj je vse to že vgrajeno v wordpressu.

Opis izdelave podatkovne baze za wordpress je opisan v poglavju 4.6.

4.3.6 Bootstrap

Bootstrap je trenutno najpopularnejši odprtokodni front-end framework, ki nam v veliki meri

olajša in pospeši razvoj aplikacije ali spletne strani. Vsebuje HTML, preddefiniran CSS kateri

temelji na temah za stil tipografije, obrazce, gumbe, navigacijo in ostale komponente. Poleg

HTML in CSS pa podpira tudi razširitev za kar nekaj JavaScript komponent: padajoče sezname,

menije, slide showe, dialoge, opozorila itd. Za razliko od ostalih spletnih frameworkov, gre pri

Bootstrapu samo za front-end razvoj. Najkoristnejša funkcionalnost bootstrapa pa je podpora

za odziven dizajn, ki nam omogoča, da se naša internetna stran prilagaja resoluciji zaslona

naprave, s katero brskamo (Slika 4.8). Bootstrap temelji na mrežnem sistemu 12 stolpcev, ki ga

za grafično oblikovanje uporabljajo napredni oblikovalci internetnih strani. Bootstrap je

modularen in sestavljen iz niza slogov, ki implementirajo različne komponente orodij.

Individualne komponente so lahko dodane ali odstranjene. Bootstrap ponuja število

konfiguriranih spremenljivk, ki kontrolirajo barve in postavitev različnih komponent. Bootstrap

dokumentacija ima vključenega čarovnika ki generira prilagodljivo verzijo Bootstrapa, na

podlagi zahtevanih komponent in različnih nastavitev. Mrežni sistem in odziven dizajn je

standardno spremenjen s 1170 točkami širine prikaza. Alternativa je, da lahko razvijalec

uporabi spremenljivo širino postavitve. V obeh primerih ima orodje štiri različice resolucije

glede na tip naprave, na kateri dostopamo do spletne strani- mobilni telefon, ležeča

postavitev/portretna postavitev tabličnega računalnika in osebni računalnik z nizko in visoko

ločljivostjo. Vsaka sprememba v širini zaslona spremeni oziroma prilagodi širino stolpcev

spletne strani. Bootstrap ponuja nabor različnih slogov, ki zagotavljajo osnovne definicije za

vse ključne komponente HTML. Ti zagotavljajo enoten in sodoben videz za oblikovanje

besedil, tabel in obrazcev. Poleg standardnih HTML elementov, Bootstrap vsebuje tudi druge

pogosto uporabljene vmesnike. Komponente so implementirane kot CSS razredi, kateri morajo

biti uporabljeni za določene HTML elemente na spletni strani. Bootstrap ima več komponent

JavaScript v obliki jQuery vtičnikov. Ti zagotavljajo dodatne elemente uporabniških


52

vmesnikov, kot so pogovorna okna, namigi (ang. tooltips) in vrtiljaki (ang. carousels).

(Bootstrap, 8. maj 2017)

Slika 4.8: Bootstrap- odziven dizjn (Bootsrtap, 8. maj 2017)

Pri izdelavi spletne strani NajZame.si je bootstrap že napisan v kodi teme. Potrebno ga je bilo

definirati glede na resolucijo, ko želimo, da se spletna stran za namizni računalnik pomanjša za

mobilne naprave. Vrednost smo nastavili na 480 točk oziroma »pikslov«. Prav tako smo morali

narediti dva menija. Enega za naprave katere imajo zaslon večji od 480 »pikslov« in drugega

za naprave, katere imajo zaslone manjše od omenjene vrednosti. S tem smo dosegli preglednost

menijev na velikih in malih zaslonih. Bootstrap ima posebne datoteke za CSS in JavaScript,

kjer sta definirana oblika in funkcije za drugačne zaslone, kot je navedeno v originalni kodi

spletne strani. Tako brskalnik zazna, kdaj gre za spremembo velikosti zaslona in glede na

velikost prikaže datoteke, katere so primerne za uporabljen zaslon.

4.4 Sistem za upravljanje vsebin (CMS)

Spletna stran podjetja NajZame.si je bila oblikovana s pomočjo CMS sistema (Content

Management System) Wordpress. Izdelana spletna stran na osnovi CMS sistema omogoča

naročniku, da brez znanja programiranja samostojno ureja spletne vsebine in upravljanja s

celotno spletno stranjo.

Sistem upravljanja s spletnimi stranmi CMS temelji na dinamično strežniški tehnologiji PHP v

povezavi z bazo podatkov (najpogosteje MySQL ali MSSQL baze podatkov). Paket vsebuje

tudi podporna orodja oz. vtičnike.


53

Sistem je vpleten v vse faze distribucije spletnih vsebin:

ustvarjanje spletne vsebine - "Content Creation" (lahko uvoz ali povezava HTML

kode iz drugih programov)

urejanje in vzdrževanje spletne vsebine (določeni avtomatizirani sklopi vsebin)

distribucijo spletne vsebine (za druge medije ali potrebe)

objavljanje spletne vsebine

optimizacija spletnih vsebin za spletne iskalnike

arhiviranje spletnih vsebin (backup baze podatkov)

CMS sistemi za urejanje spletnih vsebin omogočajo:

hitro in preprosto urejanje vsebin na spletnih straneh,

preprosto vnašanje in urejanje slik na spletnih straneh brez HTML znanja,

možnost neposrednega prenosa slik iz digitalnega fotoaparata,

napredne možnost urejanja tabel in seznamov,

možnost vnašanja dokumentov,

integracija zunanjih CSS stilov in seznamov,

lastno mreženje strukture,

avtomatsko kreiranje spletne strukture in iskalnika,

možnost povezave z zunanjimi programi,

možnost uvoza in izvoza podatkov,

kreiranje podatkov za RSS sisteme vsebin,

možnost dodajanje modulov,

avtomatsko kreiranje vsebine za spletne iskalnike,

možnost samostojnega dodajanja uporabnikov in posameznih nivojev dostopa,

mobilni dostop brez dodatne programske opreme,

SSL varni način prenosa vsebin za kritična spletna področja,

sistemi arhiviranja, varovanja podatkov in strukture.

(Oblikovanje, 8. marec 2017)


54

4.4.1 Wordpress

Wordpress (Slika 4.9) je prosto dostopna programska oprema. Predstavlja moderno

računalniško okolje za ustvarjanje spletnih strani s poudarkom na estetiki, spletnih standardih

in uporabnosti. Wordpress ponuja različne vtičnike in predloge, s pomočjo katerih lahko spletno

stran uredimo po lastnih željah in zahtevah. Vtičniki ponujajo široko paleto funkcionalnosti za

našo spletno stran. S pomočjo vtičnikov lahko na naši strani dodajamo interaktivne galerije,

kontaktne obrazce, pop-upe, koledar, spletno trgovino, prevajanje v različne tuje jezike,

piškotke, različne drsnike, zaščitimo našo spletno stran pred neželenimi vdori itd. Teme v

Wordpressu so zasnovane tako, da lahko v večini primerov spreminjamo vse: barve, ozadja,

različne pisave, dodajamo in odstranjujemo lahko menije, stran lahko razdelimo v poljubno

število stolpcev, ustvarjamo strani, prispevke itd.

Slika 4.9: Wordpress

Vtičniki v Wordpressu spletne strani NajZame.si

Contact Form by Supsytic- Vtičnik za izdelavo spletnih obrazcev. Pri tem vtičniku prvo

določimo obliko, barvo in velikost obrazca. Nato vnesemo podatke, katere želimo, da


55

naš obrazec vključuje. Pri podatkih lahko označimo, ali so obvezni ali neobvezni za

izpolnjevanje. Na koncu vnesemo podatke elektronskega naslova, kamor želimo, da se

spletni obrazec pošlje.

Ecwid Shopping Cart- Vtičnik spletne trgovine. S tem vtičnikom postavimo celotno

spletno trgovino. Dodajamo nove produkte, katerim določimo ceno, dodamo sliko in

opis produkta. Preko njega vnesemo denarno valuto, davke za izdelke, poštnino za

pošiljanje in elektronski naslov podjetja. Pri vnosu cene izdelka, nam vtičnik ponuja

možnost, da glede na naročeno količino izdelkov postavimo različne cene. V primeru,

da obiskovalec spletne strani naroči izdelek, podjetje NajZame.si prejme elektronski

naslov s podatki kupca ter izdelke, katere želi kupiti. Ko postavimo spletno trgovino na

Wordpressu, jo lahko uporabljamo tudi na socialnih omrežjih: Facebook, Twitter itd.

iThemes Security- Vsakodnevno je v Wordpress strani v povprečju 30.000 vdorov.

Wordpress strani so lahka tarča za napade zaradi ranljivosti vtičnikov, slabih gesel in

zastarele programske opreme. Ta vtičnik deluje tako, da zaklene Wordpress ob

morebitnemu napadu (vtipkanje nepravilnega gesla za dostop do strani), popravi šibke

vtičnike, ki so ranljivi za napad, okrepi uporabniške poverilnice in zaustavi željene

napade in vdore na našo spletno stran. Z naprednimi funkcijami vtičnika in izkušenega

uporabnika, šibke točke za napad posredujemo Wordpressu in ga tako vsakodnevno

izboljšujemo.

Meta Slider- Vtičnik za izdelavo premikajočih galerij. Ta vtičnik je uporabljen na prvi

strani pod glavnim menijem, kjer se vrtijo slike. V vtičniku lahko določimo širino in

višino slik, čas premikanja slik, ter postavitev drsečih slik na zaslonu.

Page Builder by SiteOrigin- Vtičnik nam nudi širok nabor oblikovalskih orodij, s

katerimi oblikujemo spletno stran. S tem vtičnikom lahko širino ekrana razdelimo na

različno število različno širokih stolpcev. S tem vtičnikom je narejena noga spletne

strani ter na vstopni strani polje, kjer je napisana vizija podjetja.

Popups WordPress Popup- Vtičnik vsakemu novemu obiskovalcu, ki je 10 sekund na

naši spletni strani. Na sredini zaslona se prikaže popup, kateri poziva k naročilu

brezplačnega konopljinega čaja. Če želimo naročiti čaj, na popupu kliknemo gumb

naroči, kateri nas preusmeri na spletni obrazec, kjer izpolnimo podatke za dostavo.

Wordfence Security- je vtičnik za zavarovanje naše spletne strani. Vsakodnevno vtičnik

pregleda grožnje na spletni strani in javi na elektronski naslov morebitne grožnje ali

spremembe datotek administratorju spletne strani. Spletna stran NajZame.si je druga


56

verzija spletne strani, saj je bilo v prvo, kmalu potem, ko je bila narejena, vdrto.

Spremenile so se strani, spletni naslovi, slike in vsebina spletne strani. Edina rešitev je

bila, da se strežnik pobriše in na novo namesti Wordpress, ter naredi nova spletna stran.

Takrat smo dodali vtičnik za varnost, kateri javlja morebitne napade hackerjev,

spremembo datotek, prijavo v Wordpress stran (kdo se želi prijaviti kot adimn). Poleg

varovanja, ta vtičnik prikaže obiske na spletni strani, čas obiska, IP naslov obiskovalca

ter čas, kako dolgo se je zadržal na naši spletni strani.

Backup- je vtičnik za varnostno kopiranje in obnovitev datotek na naši Wordpress

strani. Vtičnik se lahko nastavi, da vsakodnevno ob določeni uri skopira vse datoteke

na spletni strežnik. Ob problemih, sesutju ali vdoru na spletno stran lahko posodobimo

datoteke na tisti čas, ko je spletna stran delovala. Ta vtičnik nudi najlažji način za

varnostno kopiranje, obnovitev in preselitev naše spletne strani. Poleg kopiranja in

obnovitve datotek, ta vtičnik omogoča, da varnostno kopiramo in obnovimo tudi

podatkovno bazo (Wordpress, 16. 4. 2017).

Izdelava spletne strani NajZame.si v wordpressu je podrobneje opisana v poglavju 4.6.

4.5 Oblikovanje spletnih strani

Spletna stran je pravzaprav kompozicijski ples besedne vsebine, barve in slike. V nasprotju z

oblikovanjem za tisk so pri spletnem oblikovanju nekatera pravila in konvencije postavljene na

glavo, recimo zaželenost majhnih velikosti slikovnih datotek in omejena izbira pisav. Tudi

barve so precej bolj subjektivne, saj spletni oblikovalec določa barvne približke, ki bodo na

različnih zaslonih različno prikazani (Dabner, Sheena & Anoki, 2011, str. 153).

Spletno oblikovanje je eno izmed najbolj značilnih in novih področij oblikovanja in dizajniranja

v zadnjih 20 letih. Učiti se na novem mediju je navdušujoče ter predstavlja izziv, kar nas prisili

oziroma poda nov vpogled v sam dizajn. Možnosti na internetu dovoljujejo, da se oblikovanje

pokaže v večji moči tudi na področju poslovnih in socialnih strani.

Eden izmed največjih izzivov internetnega oblikovanja je ustvariti efektivno komunikacijo med

ljudmi in tehnologijo. Danes je poudarek predvsem na dostopnosti do projektov ter jih

predstaviti z informacijam, ki dovoljujejo ljudem, da dosežejo njim pomembne cilje. Spletna

stran ni strogo zaprta in se spreminja glede na napravo, skozi katero je dostopna. Lahko se

spremeni zaradi uporabnikove interakcije ali s časom. Ima dimenzije, ki jih ne najdemo na

drugih področjih oblikovanja, kar pomeni, da ga je težje predstaviti in opisati. Medtem ko je


57

spletno oblikovanje pogosto videno kot ne estetično, je lepota same spletne strani vidna v njeni

dinamiki in interakciji, ki prispevata kakovosti uporabnikove izkušnje.

Ker ima vedno več ljudi dostop do spleta vsak dan in je postalo to del našega vsakdanjega

življenja, bo vedno več novih naročnikov z različnimi potrebami, večjimi zahtevami in kritiko

za oblikovanje (Macdonald, 2003, str. 6−7).

»Ključ do uspeha vsake spletne strani je razumevanje ciljnega občinstva in vsebine spletne

strani. Vse prevečkrat spletne strani promovirajo oblikovalčevo programersko spretnost in

najmodernejše grafične prijeme, pri tem pa skoraj popolnoma zanemarijo, komu je spletna

stran namenjena in kako bi bilo najbolje podati njeno sporočilo. Nič ni narobe s premikanjem

meja možnega, a nikar ne pozabite na končnega uporabnika: oblikujte za občinstvo, oblikujte

za vsebino, nikar ne oblikujte samo zase.« Chris Jones (kot citirano v Dabner, Sheena & Anoki,

2011, str. 155).

Tehnologija pozna samo eno evolucijsko hitrost: hitrost. Tako po obliki kot zmožnostih je splet

tehnološki medij, kjer se predstavljajo najmodernejše ideje in pojmi oblikovanja. Kot z vsemi

trendi tudi tu najprodornejši pojavi hitro postanejo kliše, ko jih nadomestijo novejši,

inovativnejši standardi. Spodaj je seznam priljubljenih vsebinskih spletnih elementov, ki niso

nikoli zastarali:

kontaktni obrazec,

pojavna okna,

slikovne galerije,

spustni meniji,

zaobljeni vogali,

padajoče sence,

vprašalniki,

blogi,

oglasne pasice,

oznake (ang. tags),

kategorije,

zemljevidi spletnih strani,

animacije Flash,

povezave

klepetalnice (Dabner, Sheena & Anoki, 2011, str. 155).


58

4.6 Namestitev in oblikovanje spletne strani NajZame.si

Oblikovanje spletnih strani se lahko razprostira od ene preproste strani z preprostimi oblikami

in vsebinami do strani z več pod stranmi, katere imajo zahtevnejše strukture, vsebine in

zmožnosti. (Gunter, 2003, str. 9).

Spletna stran je narejena na osnovi logotipa. Spletna stran in logotip sta tako barvno usklajena.

Barvna predloga teme temelji na barvah vzetih iz logotipa (zelena in siva). Stran je narejena s

pomočjo sistema za upravljanje z vsebinami (CMS- WordPress), kar omogoča naročniku

spletne strani urejanje spletnih vsebin brez predhodnega programerskega znanja. S spletno

stranjo smo želeli prikazati produkte, njihovo sestavo in namen uporabe le-teh. Na spletni strani

je tudi spletna trgovina, kjer lahko obiskovalec naroči produkte. Za boljšo informiranost kupcev

se nahaja na prvi strani spletne strani tudi spletni obrazec, kjer lahko obiskovalci spletne strani

zastavijo razna vprašanja v zvezi s produkti, ter njihovimi zdravstvenimi težavami.

Po nakupu spletne domene, je bilo potrebno na strežniku s pomočjo spletne aplikacije CPanel

ustvariti spletno bazo in uporabnika, kateri dostopa do spletne baze. Sledila je namestitev

sistema za upravljanje z vsebinami Wordpress na spletni strežnik. Pri namestitvi je bilo

potrebno vnesti podatke o imenu spletne baze in uporabniku. Po namestitvi Wordpressa na

strežnik, je bilo potrebno spremeniti datoteko wp-config.php, kjer so se vnesli podatki o imenu

baze, imenu uporabnika in geslo uporabnika, da lahko Wordpress dostopa do baze. Pred

izdelavo spletne strani smo si na papir narisali glavne strani, na kateri je bila določena

postavitev menija, galerije, napisov pod galerijo in noge spletne strani. Prav tako je pri

oblikovanju spletne strani zelo priporočljivo narediti zemljevid spletne strani. Glavni namen

tega opravila je bila izdelava dobro premišljene arhitekture strani. Ko je bilo to končano, je bilo

potrebno izbrati primerno temo, glede na naš osnutek, za spletno stran.

Spletne trgovine so vedno bolj popularne. Omogočajo, da kupci vidijo in spoznajo produkte,

katere podjetja prodajo na spletnih straneh in tako opravijo nakup. V zadnjih nekaj letih, so se

e-nakupi znatno povečali v različnih panogah poslovanja podjetja (Itzkovitch & Till, 2003, str.

138).


59

4.6.1 Barve, kontrasti, svetlost

Glavna barva spletne strani je zelena barva z logotipa podjetja. V tej barvi je glavni meni na

strani, povezave na spletni strani, cene izdelkov na fotografijah, gumb do trgovine na spletni

strani, ter gumba »kupi zdaj« in »naroči« v spletni trgovini. Ozadje spletne strani je bele barve.

Noga spletne stran, kjer so kontaktni podatki o trgovini in Googlov zemljevid (kje se trgovina

nahaja), je sive barve, kakor napis na logotipu podjetja NajZame.si. Za lažjo vidljivost, so v

nogi spletne strani črke bele barve, drugod na strani je besedilo sive barve.

Slika 4.10: Prikaz zgornjega dela vstopne strani podjetja NajZame.si

Na vstopni strani je pod glavno drsno galerijo razdelek z zelenim ozadjem (Slika 4.10), kjer je

napisana vizija podjetja. Vsak del ima nad besedilom sliko- srce, nasmeh in list. Te slike

ponazarjajo vizijo podjetja: prodajajo bio in ekološko pridelane izdelke (list), kateri skrbijo in

izboljšujej naše zdravje (srce), izboljšanje zdravja pa privede do srečnega posameznika

(smeško). Za razbitje monoonije vstopne strani smo uporabili zeleno ozadje, sivo odebeljeno


60

pisavo in ikone. Na vstopni strani (Slika 4.11), kjer je razdelek napovednik dogodkov, je

uporabljeno ozadje sive barve, za razbitje monotonije belega ozadja in večjo preglednost

spletne strani.

Slika 4.11: Prikaz spodnjega dela vstopne strani


61

4.6.2 Linki, linije, okvirji, razporejenost

V meniju so povezave sive barve, za večjo preglednost je uporabljena odebeljena pisava. Strani

z opisom produktov imajo povezave do spletne trgovine, kjer lahko obiskovalec naroči izdelek

(Slika 4.12). Povezava na domov ima zraven ikono hiše, povezava na blog ima poleg besedila

ikono svinčnika. Povezave na spletni strani so zelene barve, podčrtane in odebeljene tipografije

(Slika 4.13).

Slika 4.12: Povezava v spletno trgovino


62

Slika 4.13: Prikaz povezav na spletni strani

4.6.3 Besedila in tipografija

Na spletni strani je uporabljena tipografija Roboto, saj pisava Orbitron Medium ni primerna za

daljša besedila. Vsa besedila na spletni strani imajo obojestransko poravnavo. Logotip in gumb

za povezavo v spletno trgovino imata pisavo Orbitron Medium.

4.6.4 Navigacija

Glavni meni je sestavljen iz petih povezav. Trgovina ima v drugem nivoju košarico, izdelki iz

konoplje imajo v drugem nivoju CBD, aktivna konopljina semena, oluščena konopljina semena,

konopljin čaj in odzive strank. Pri CBD-ju se v tretjem nivoju (Slika 4.14) nahajajo izdelki,

katerih glavna sestavina je CBD: konopljina smola, kapljice, kapsule in mazilo. Ostala ponudba

ima v drugem nivoju karbonoir, darilni program, zlato, NESU.


63

Slika 4.14: Nivoji menija

4.6.5 Preglednost

Pri oblikovanju spletne strani je bilo glavno vodilo, preglednost. Želeli smo doseči, da se je

lahko orientirati po spletni strani. Besedilo ima večji razmik med vrsticami, za lažje branje pri

daljših besedilih. Spletna stran ima veliko povezav, tako lahko skoraj iz vsake strani dostopamo

do kakšne druge in ni potrebe po vračanju nazaj na osnovno stran, da bi lahko krmarili po strani.

Spletna trgovina (Slika 4.15) ima velike slike izdelkov, razporejeni so le trije na širino

računalniškega zaslona. Ko odpremo izdelek v trgovini, je napisana le deklaracija o izdelku.

Vse ostale podrobnosti o uporabi izdelka in za kaj se le-ta uporablja, so napisane na strani od

izdelka, ne v spletni trgovini. S tem smo želeli kupca prepričati, da pred nakupom izdelka

prebere vse o izdelku, se po možnosti posvetuje s strokovnjakom o izdelku in šele nato da opravi

nakup v trgovini. Zaradi preglednosti smo se odločili, da bo ozadje spletne strani bele barve.

Besedilo je vidno in ker črke niso črne barve, besedilo ne bode v oči in izstopa.


64

Slika 4.15: Spletna trgovina

Košarica (Slika 4.16) spletne trgovine na levi strani v vrstice izpiše produkte katere imamo v

košarici. Vsakemu produkt prikaže ceno artikla, količino in skupni znesek ob nakupu več istih

izdelkov. Na desni strani se prikaže cena naročenih izdelkov brez DDV-ja, DDV se izračuna

glede na odstotek kateri je veljaven v Sloveniji za določene artikle, ter z odebeljenimi in večjimi

črkami skupni znesek za naročilo. Gumb naroči je zelene barve, katera je vzeta iz logotipa.

Skrajno levo imamo pod artikli gum za izpraznitev košarice.

Slika 4.16: Košarica

64

5 ANALIZA RAZISKAVE

V okviru diplomske naloge je bila izvedena anketa z naslovom: Prepoznavnost in ustreznost

celostne grafične podobe podjetja NajZame.si. Anketa je bila narejena na vzorcu velikosti 186

anketirancev. Anketni vprašalnik smo sestavili na spletni strani www.1ka.si. Delili smo ga po

socialnem omrežju Facebook, na spletni strani NajZame.si ter po elektronski pošti. Raziskava

se je izvajala na območju celotne Slovenje, v mesecu marcu 2017. V anketnem vprašalniku je

bilo 12 vprašanj:

štiri kontrolna vprašanja, katera se nanašajo na spol, starost, doseženo izobrazbo in

regijo bivanja, pri katerih anketiranec izbere ustrezen odgovor.

Tri vprašanja, katera se nanašajo na logotip podjetja NajZame.si. Anketiranec pri teh

vprašanjih izbere ustrezni odgovor.

Štiri vprašanja, katera se nanašajo na spletno stran in spletno trgovino podjetja

NajZame.si, pri katerih anketiranec izbere ustrezni odgovor.

Eno opisno vprašanje, pri katerem anketiranec napiše konkurenčna podjetja

raziskovanemu podjetju NajZame.si

Celotni anketni vprašalnik se nahaja v prilogi B.

5.1 Analiza ankete

5.1.1 Kontrolni podatki

5.1.1.1 Struktura anketiranih po spolu

S prvim vprašanjem o spolu je ugotovljeno, da je v anketi sodelovalo 33% moških in 67%

žensk.

Tabela 5.1: Spol anketirancev

Spol Frekvenca Odstotek

Moški 61 33%

Ženski 125 67%

Skupaj 186 100%

http://www.1ka.si/

5 ANALIZA RAZISKAVE

66

5.1.1.2 Struktura anketiranih po starosti

Pri drugem vprašanju, katero se nanaša na starost anketiranih, je bilo ugotovljeno, da je bilo

največ, in sicer kar 54% anketiranih, starih med 21 in 30 let. 27% anketiranih je bilo v skupini

od 31 do 40 let. Najmanj anketiranih je bilo v skupini od 51 do 60 let in v skupini nad 60 let.

Starost ostalih anketiranih je razvidna iz tabele 5.2.

Tabela 5.2: Starost anketirancev

Starost Število Odstotek

do 20 let 13 7%

21 - 30 let 100 54%

31 - 40 let 51 27%

41 - 50 let 20 11%

51 - 60 let 1 1%

61 ali več let 1 1%

Skupaj 186 100%

Spol anketirancev

Moški

Ženski

Graf 5.1: Struktura anketiranih po spolu

5 ANALIZA RAZISKAVE

67

Graf 5.2: Struktura anketiranih po starosti

5.1.1.3 Struktura anketiranih po izobrazbi

Pri vprašanju glede dosežene formalne izobrazbe, se je izkazalo, da ima največ anketiranih

dokončano več kot srednjo šolo (67%), 31% anketiranih ima končano srednjo šolo, le 2%

anketiranih pa ima dokončano osnovno šolo.

Tabela 5.3: Dosežena izobrazba anketirancev

Dosežena izobrazba Frekvenca Odstotek

Osnovna šola 4 2%

Srednja šola 58 31%

Več kot srednja šola 124 67%

Skupaj 186 100%

0

20

40

60

80

100

120

do 20 let 21 - 30 let 31 - 40 let 41 - 50 let 51 - 60 let 61 ali več let

Starost anketirancev

5 ANALIZA RAZISKAVE

68

Graf 5.3: Struktura anketiranih po izobrazbi

5.1.1.4 Struktura anketiranih glede na regijo bivanja

Iz vprašanja, glede regije, kjer anketiranec prebiva, je razvidno, da največ anketiranih živi v

Osrednjeslovenski regiji (47%). 13% anketiranih živi v Jugovzhodni regiji, 12% anketiranih

živi v Savinjski regiji. Pregled ostalih regij, kjer anketiranci živijo, je razviden iz tabele 5.4.

Tabela 5.4: Regija bivališča

Regije bivališča Frekvenca Odstotek

Jugovzhodna regija 25 13%

Pomurska regija 6 3%

Podravska regija 7 4%

Koroška regija 1 1%

Savinjska regija 22 12%

Posavska regija 6 3%

Zasavska regija 5 3%

Osrednjeslovenska regija 87 47%

Primorsko - notranjska regija 10 5%

Gorenjska regija 11 6%

Goriška regija 3 2%

Obalno- Kraška regija 3 2%

Skupaj 186 100%

Izobrazba anketirancev

Osnovna šola

Srednja šola

Več kot srednja šola

5 ANALIZA RAZISKAVE

69

5.1.2 Prepoznavnost in ustreznost celostne grafične podobe podjetja NajZame.si

5. vprašanje: Če bi v reklami videli logotip podjetja, ali bi vedeli za katero podjetje gre? 143

anektiranih, kar je 77% ne bi prepoznalo logotipa podjetja NajZame.si v reklamnem letaku.

23% anketiranih, bi vedelo za katero podjetje gre.

Tabela 5.5: Prepoznavnost logotipa

Odgovori Frekvenca Odstotek

Da 43 23%

Ne 143 77%

Skupaj 186 100%

0

10

20

30

40

50

60

70

80

90

100

Regija bivališča

Graf 5.4: Struktura anketiranih glede na regijo bivanja

5 ANALIZA RAZISKAVE

70

6. vprašanje: Slogan podjetja NajZame.si se glasi: "Najboljše, kar sta narava in človek ustvarila

zame." Se vam zdi logotip glede na slogan primeren?

Pri tem vprašanju je bilo ugotovljeno, da 47% anketiranih meni, da je logotip podjetja

NajZame.si zadovoljiv. 34% anketiranih meni, da je primeren, 19% anketiranih pa je mnenja,

da je neprimeren.

Tabela 5.6: Primernost logotipa glede na slogan podjetja


Primeren 64 34%

Zadovoljiv 87 47%

Neprimeren 35 19%

Skupaj 186 100%

Če bi v reklami videli logotip podjetja, ali bi

vedeli za katero podjetje gre?

Da

Ne

Graf 5.5: Prepoznavnost logotipa

5 ANALIZA RAZISKAVE

71

7. vprašanje: Podjetje se ukvarja z naravnimi prehranskimi izdelki iz industrijske konoplje. Se

vam zdi logotip barvno primeren glede na dejavnost, s katero se podjetje ukvarja?

Pri tem vprašanju je bilo ugotovljeno, da 73% anketiranih meni, da je logotip barvno primeren

glede na dejavnost, s katero se podjetje NajZame.si ukvarja. 20% anketiranih je mnenja, da se

barvno logotip ne ujema z dejavnostjo podjetja, 7% anketiranih se ni moglo opredeliti do

odgovora.

Tabela 5.7: Primernost logotipa glede na dejavnost podjetja


Da 136 73%

Ne 37 20%

Ne vem 13 7%

Skupaj 186 100%

Slogan podjetja NajZame.si se glasi: "Najboljše, kar sta

narava in človek ustvarila zame." Se vam zdi logotip

glede na slogan primeren?

Primeren

Zadovoljiv

Neprimeren

Graf 5.6: Primernost logotipa glede na slogan

5 ANALIZA RAZISKAVE

72

8. vprašanje: Se vam zdi spletna stran vredna zaupanja za naročilo izdelka v spletni trgovini?

Pri tem vprašanju je bilo ugotovljeno, da 59% anketiranih zaupa spletni trgovini in bi v njej tudi

naročili izdelek. 22% anketiranih se spletna trgovina ne zdi vredna zaupanja, zato izdelka ne bi

naročili. 20% anketiranih se ne more odločiti ali zaupajo spletni trgovini NajZame.si ali ne.

Tabela 5.8: Zaupanje v spletno trgovino


Da 109 59%

Ne 40 22%

Ne vem 37 20%

Skupaj 186 100%

Podjetje se ukvarja z naravnimi prehranskimi izdelki iz

industrijske konoplje. Se vam zdi logotip barvno primeren

glede na dejavnost, s katero se podjetje ukvarja?

Da

Ne

Ne vem

Graf 5.7: Primernost barv logotipa glede na dejavnost podjetja

5 ANALIZA RAZISKAVE

73

Graf 5.8: Zaupanje v spletno trgovino

9. Vprašanje: Se vam zdi spletna stran barvno primerna glede na dejavnost, s katero se podjetje

ukvarja?

87% anketiranih je mnenja, da so barve na spletni strani barvno primerne glede na dejavnost, s

katero se ukvarja podjetje NajZame.si. 9% anketiranih meni, da spletna stran ni barvno

primerna za dejavnost s katero se podjetje ukvarja, 4% anektiranih se ni moglo odločiti o

primernosti barv.

Tabela 5.9: Primernost barv na spletni strani


Da 161 87%

Ne 17 9%

Ne vem 8 4%

Skupaj 186 100%

Se vam zdi spletna stran vredna zaupanja za naročilo izdelka v

spletni trgovini?

Da

Ne

Ne vem

5 ANALIZA RAZISKAVE

74

Graf 5.9: Primernost barv spletne trgovine

10. vprašanje: Se vam zdi spletna stran pregledna?

S tem vprašanjem je bilo ugotovljeno, da se 76% anketiranim zdi spletna sran pregledna. 24%

anketiranih je mnenja, da spletna stran ni primerna.

Tabela 5.10: Preglednost spletne strani


Da 141 76%

Ne 45 24%

Skupaj 186 100%

0

20

40

60

80

100

120

140

160

180

Da Ne Ne vem

Se vam zdi spletna stran barvno primerna glede na

dejavnost, s katero se podjetje ukvarja?

5 ANALIZA RAZISKAVE

75

Graf 5.10: Preglednost spletne strani

11. vprašanje: Ste mnenja, da je dovolj podatkov na spletni strani za nakup izdelka, ali bi

potrebovali dodaten nasvet strokovnjaka?

Pri tem vprašanju, je 60% anketiranih odgovorilo, da bi opravilo nakup, saj je po njihovem

mnenju na spletni strani dovolj podatkov o izdelkih. 21% anketiranih, bi se želelo pred nakupom

posvetovati s strokovnjakom, 19% anketiranih pa se ni moglo odločiti.

Tabela 5.11: Podatki na spletni strani


Dovolj podatkov za nakup 111 60%

Nasvet strokovnjaka 39 21%

Ne vem 36 19%

Skupaj 186 100%

0

50

100

150

Da Ne

Se vam zdi spletna stran pregledna?

5 ANALIZA RAZISKAVE

76

Graf 5.11: Podatki na spletni strani

12. vprašanje: Ali poznate kakšno konkurenčno podjetje, ki se ukvarja s podobno dejavnostjo

kot podjetje NajZame.si?

Na zadnje vprašanje, ali anketirani poznajo kakšno konkurenčno podjetje, ki se ukvarja s

podobno dejavnostjo kot podjetje NajZame.si, je 88% anketiranih napisalo ne. 2% anketiranih

je napisalo naslednja podjetja: Be-hempy, Hemptouch, Hannabiz in Malinca. Vsi ostali

odgovori so navedeni v tabeli 5.12.

Ste mnenja, da je dovolj podatkov na spletni strani za nakup

izdelka, ali bi potrebovali dodaten nasvet strokovnjaka?

Dovolj podatkov za nakup

Nasvet strokovnjaka

Ne vem

5 ANALIZA RAZISKAVE

77

Tabela 5.12: Poznavanje konkurenčnih podjetij, podjetju NajZame.si


Be-hempy 4 2%

Hemptouch 3 2%

Vegalife 1 1%

Konoplja.net 2 1%

Hannabiz 4 2%

Zelen dotik 1 1%

2taste 1 1%

Good green 1 1%

Malinca 3 2%

Organika 1 1%

Konopko 1 1%

Hempika 1 1%

Ne 163 88%

Skupaj 186 100%

Graf 5.12: Poznavanje konkurenčnih podjetij podjetju, NajZame.si

0

20

40

60

80

100

120

140

160

180

Ali poznate kakšno konkurenčno podjetje, ki se ukvarja s podobno

dejavnostjo kot podjetje NajZame.si?

5 ANALIZA RAZISKAVE

78

5.2 Preverjanje hipotez

H0: Ustrezno oblikovana spletna trgovina pripomore k uspešnosti poslovanja podjetja in


H1: Ustrezno oblikovana spletna trgovina ne pripomore k uspešnosti poslovanja podjetja in ne


Glede na rezultate ankete, lahko ovržem hipotezo H1 in potrdim hipotezo H0. Ustrezno in

pregledno oblikovana spletna stran, z jasnimi besedili, prinaša uspešnost poslovanja podjetju,

saj ciljne skupine zaupajo nakupu na spletni strani in v spletni trgovini.

H0: Ustrezno oblikovana CGP in njena dosledna uporaba v vseh pojavnih oblikah v

komunikaciji na trgu s potrošniki v veliki meri pripomore k prepoznavnosti in uspešnosti

podjetja.

H1: Ustrezno oblikovana CGP in njena dosledna uporaba v vseh pojavnih oblikah v

komunikaciji na trgu s potrošniki ne pripomore k prepoznavnosti in uspešnosti podjetja.

Glede na to, da je bilo podjetje ustanovljeno šele v novembru 2016 in uporabljajo prenovljeno

celostno grafično podobo le pol leta, promovirajo pa se v večjem delu le v dolenjski regiji, je

celostno grafično podobo podjetja prepoznala skoraj ¼ anketiranih. Na osnovi dobljenih

rezultatov ankete lahko sprejmemo hipotezo H0, hipotezo H1 ovržemo.

H0: Z ustrezno spletno stranjo in CGP-jem si je podjetje NajZeme.si ustvarilo

prepoznavnost na domačem tržišču, katero si z oglaševanjem še povečuje.

H1: Z ustrezno spletno stranjo in CGP-jem si podjetje NajZeme.si ni ustvarilo prepoznavnost

na domačem tržišču, ter si prepoznavnosti z oglaševanjem ne povečuje.

Rezultati ankete so pokazali, da je spletna stran ustrezno oblikovana, izbrane barve celostne

grafične podobe podjetja in spletne strani so primerne, spletna stran za obiskovalce deluje

pregledna, ter vredna zaupanja v nakup. Podjetje si s stalnim oglaševanjem in pojavljanjem v

medijih povečuje prepoznavnost, ter s tem povečuje konkurenčno prednost v dolenjski regiji

pred ostalimi podjetji v panogi. Na osnovi rezultatov lahko sprejmemo hipotezo H0, hipotezo

H1 ovržemo.

79

6 ZAKLJUČEK

Celostna grafična podoba podjetja je zelo pomemben element v podjetju, kateri lahko pozitivno

ali negativno vpliva na uspešnost podjetja. Oblikovanje le-te, je obsežen in zahteven proces,

saj je potrebno pri tem zajeti temelje podjetja, idealizirati sliko identitete ter vključiti odraz

vizije vodstva. Dobra podoba podjetja prinaša ugled, prepoznavnost in konkurenčno prednost,

prav tako pa vpliva na poslovne rezultate. Podjetje mora na vsake toliko časa raziskati, ali jim

uporabljena celostna grafična podoba daje pravi odraz na trgu, ali jo je zaradi različnih

sprememb v podjetju in na trgu, potrebno spremeniti. Oblikovalci in podjetniki se morajo

zavedati, da trenutno stanje tehnologije ni dokončno in da najboljša rešitev za danes, ne pomeni

najboljše rešitve za jutri. Tako kot gre svet s tehnološkim napredkom v korak s časom, prav

tako mora podjetje s svojo grafično podobo slediti smernicam in se prilagajati spremembam v

grafičnem oblikovanju ter spletnemu programiranju. Glede na raziskave ankete lahko

sklepamo, da kljub temu, da logotip podjetja še ni prepoznaven med kupci, saj ga podjetje

uporablja le pol leta, je zaupanje v spletno stran in nakupe v spletni trgovini veliko.

81

7 LITERATURA IN VIRI

Bootstrap, Pridobljeno iz: http://getbootstrap.com/ (8. 5. 2017).

Dabner, D., Sheena, C. & Anoki, C. (2011). Grafično oblikovanje: priročnik za grafične

oblikovalce tiskanih, digitalnih in večpredstavnih medijev. Ljubljana: Tehniška založba

Slovenije.

Davis,G. (2003). Web animation: start here! Lewes: Ilex.

Debevc, M., Vlaovič, B. (2001). Oblikovanje dokumentov za svetovni splet. Maribor: Fakulteta

za elektrotehniko, računalništvo in informatiko.

Dobovišek, R., Požep, S., Saje, V. (2009). Celostna grafična podoba podjetja. Medijska vzgoja

in produkcija, str. 13-18.

Fonts2u. (2017). Pridobljeno iz: http://www.fonts2u.com/orbitron-medium.font (18. 4. 2017).

Friedman, J. (2013). Web designer`s guide to wordpress. Berkeley: New Riders.

Gunter, B. (2003). Web design index 4. Amsterdam, Singapore: The Pepin Press- Agile rabbit

editions.

Hanke, J.C. (2001). Spletne strani in HTML. Šempeter pri Gorici: Flamingo Založba d.o.o..

Heller, S., Talarico, L. (2011). Typography sketch books. London: Thames & Hudson.

Itzkovitch, A., Till, A. (2003). Web sites: a step-by-step guide. Gloucester, Mass.: Rockport;

Hove: RotoVision.

Julius, W. (2010). Stationery design now! Köln: Taschen.

Julius, W. (2008). Web design: video sites. Hong Kong; Köln; London; Los Angeles; Madrid;

Paris; Tokyo: Taschen.

Julius, W. (2007). Logo design. Köln [etc.]: Taschen.

Kaltenekar, M. (2006). Oblikovanje spletnih strani. Ljubljana: Pasadena.

Kocjan, M., Kotnik, B., Opačak, Ž., Rau P. (2015). Likovna umetnost. Ljubljana: Ministrstvo

za šolstvo in šport, Zavod RS za šolstvo, Pridobljeno iz: https://eucbeniki.sio.si/lum/

3174/index1.html (10. 5. 2017).

Kozmus, M. Barvni model CMYK. Pridobljeno iz: http://www.egradiva.net/moduli/

racunalnisko_oblikovanje/91_barvni_modeli/02_datoteka.html (3. 5. 2017).

http://getbootstrap.com/

http://www.fonts2u.com/orbitron-medium.font%20(18

https://eucbeniki.sio.si/lum/3174/index1.html

https://eucbeniki.sio.si/lum/3174/index1.html

http://www.egradiva.net/moduli/racunalnisko_oblikovanje/91_barvni_modeli/02_datoteka.html

http://www.egradiva.net/moduli/racunalnisko_oblikovanje/91_barvni_modeli/02_datoteka.html


83

Kreativne ideje. (2008). Pridobljeno iz: http://www.kreativne-ideje.si/graficno-oblikovanje/

celostna-graficna-podoba/ (10. 3. 2017).

Krebelj, P. (2015). HTML in CSS za začetnike. Ljubljana: Atelje Doria.

Likovna teorija. Pridobljeno iz: http://shrani.si/files/likovnateos946.pdf (9. 5. 2017).

Lisjak, B. (2013). Vse o barvah. Pridobljeno iz https://bojanlisjak.wixsite.com/vse-o-barvah

(15. 4. 2017).

Macdonald, N. (2003). What is web design? Hove, East Sussex: Rotovision.

McDunnigan, M. (2017). The Difference Between Dynamic & Static Web Pages. Pridobljeno

iz: http://smallbusiness.chron.com/difference-between-dynamic-static-pages-69951

.html (3. 5. 2017).

McNeil, P. (2010). The web designer`s idea book volume2. Cincinnati: HOW Books.

Moj atelje. (2014). Pridobljeno iz: http://www.mojatelje.si/graficno-oblikovanje/celostna-

graficna-podoba/ (13. 3. 2017).

Muhovič, J. (2010). Učni načrt likovna teorija. Ljubljana: Ministrstvo za šolstvo in šport,

Zavod RS za šolstvo. Pridobljeno iz: http://eportal.mss.edus.si/msswww/

programi2012/programi/media/pdf/un_gimnazija/umetniska-gimnazija-likovna-

smer/UN_Likovna_teorija.pdf (10. 5. 2017).

Oblikovanje. Spletne rešitve. Pridobljeno iz https://www.oblikovanje.com (8. 3. 2017).

Paz, D. (2009). Web design handbook. Antwerp: booQs.

Peck, W. (2003). Great web typography. New York: John Wiley & Sons.

Pring,R. (2003). Www.colour. London: Cassell Illustrated.

Pring,R. (2003a). Www.type. London: Casell Illustrated.

Refsnes, H., Refsnes, S., Refsnes, K. I., Refsnes, J. E. & Henthorne K. D. (2010). Learn

JavaScript and Ajax. Indiana: Wiley Publishing.

Repovš, J. (1995). Celostna grafična podoba. Ljubljana: Studio Marketing.

Rockport (2006). Letterhead and logo design. Gloucester (Mass.): Rockport.

Smith, B., Bebak, A. (2000). Oblikovanje spletnih strani za telebane. Ljubljana: Pasadena.

Smith, J. (2011). Učinkovite spletne strani: skrivnosti zmagovalnih spletnih strani. Ljubljana:

Pasadena.

Spletne ankete. (2002). Pridobljeno iz: www.1ka.si (15. 3. 2017).

Swann, A. (1989). Basic design and layout. Oxford: Phaidon.

Šola spletnih tehnologij. (1999). Pridobljeno iz: http://www.w3schools.com (10. 11. 2016).

http://www.kreativne-ideje.si/graficno-oblikovanje/celostna-graficna-podoba/

http://www.kreativne-ideje.si/graficno-oblikovanje/celostna-graficna-podoba/

http://shrani.si/files/likovnateos946.pdf

https://bojanlisjak.wixsite.com/vse-o-barvah

http://smallbusiness.chron.com/difference-between-dynamic-static-pages-69951.html

http://smallbusiness.chron.com/difference-between-dynamic-static-pages-69951.html

http://www.mojatelje.si/graficno-oblikovanje/celostna-graficna-podoba/

http://www.mojatelje.si/graficno-oblikovanje/celostna-graficna-podoba/

http://eportal.mss.edus.si/msswww/programi2012/programi/media/pdf/un_gimnazija/umetniska-gimnazija-likovna-smer/UN_Likovna_teorija.pdf



https://www.oblikovanje.com/

http://www.1ka.si/

http://www.w3schools.com/


85

Štrancar, M., Gradečak, D. (2008). Indesign in osnove namiznega založništva. Ljubljana:

Štrancar.com.W3Schools. JavaScript. Pridobljeno iz: https://www.w3schools.com/

js/js_events.asp (8. 5. 2017).

W3schools. (1999-2017). Meta oznake. Pridobljeno iz: https://www.w3schools.com/tags/

tag_meta.asp (3. 5. 2017).

Wikipedija. (2017). History of the internet. Pridobljeno iz: https://en.wikipedia.org/wiki/

History_of_the_Internet (17. 5. 2017).

Wikipedija. (2014). Rastrska grafika. Pridobljeno iz: https://sl.wikipedia.org/wiki/

Rastrska_grafika (20. 4. 2017).

Wikipedija. (2014a). Vektorska grafika. Pridobljeno iz: https://sl.wikipedia.org/wiki/

Vektorska_grafika (20. 04. 2017).

Willard, W. (2010). Web design: A Beginner`s Guide. USA: Mc-Graw-Hill Companies.

Wordpress.com. Wordpress. Pridobljeno iz: https://wordpress.com/ (16. 4. 2017)

Wpbeginner. (2009-2017). What is MySQL. Pridobljeno iz: http://www.wpbeginner.com/

glossary/mysql/ (4. 5. 2017).

Wyke-Smith, C. (2008). Stylin` with CSS. Berkeley: New Riders.

Velthoven, W., Boer L., Strengholt ,G.J. (1997). Website graphics. London: Tham.es and

Hudson.

Zalokar. (2013). Navodila za pošiljanje logotipov po elektronski pošti. Pridobljeno iz:

http://www.zsport.si/navodila.html (25. 4. 2017).

Zandstra, M. (2004). Naučite se PHP v 24 urah. Ljubljana: Založba Pasadena.

https://www.w3schools.com/js/js_events.asp

https://www.w3schools.com/js/js_events.asp

https://www.w3schools.com/tags/tag_meta.asp

https://www.w3schools.com/tags/tag_meta.asp

https://en.wikipedia.org/wiki/History_of_the_Internet

https://en.wikipedia.org/wiki/History_of_the_Internet

https://sl.wikipedia.org/wiki/Rastrska_grafika

https://sl.wikipedia.org/wiki/Rastrska_grafika

https://sl.wikipedia.org/wiki/Vektorska_grafika

https://sl.wikipedia.org/wiki/Vektorska_grafika

https://wordpress.com/

http://www.wpbeginner.com/glossary/mysql/

http://www.wpbeginner.com/glossary/mysql/

http://www.zsport.si/navodila.html%20(25

87

PRILOGE

Priloga A: Priročnik celostne grafične podobe podjetja NajZame.si

Priloga B: Anketni vprašalnik

89

Priloga A: Celostna grafična podoba podjetja NajZame.si

PRILOGE

90

PRILOGE

91

PRILOGE

92

PRILOGE

93

PRILOGE

94

PRILOGE

95

97

Priloga B: Anketni vprašalnik

Prosim, če si vzamete nekaj minut in s klikom na Naslednja stran pričnete z izpolnjevanjem ankete, katere

rezultati bodo služili kot raziskovalni del moje diplomske naloge.

IF (1) ( Demografija ) XSPOL - Spol:

Moški

Ženski

IF (1) ( Demografija ) XSTAR2a4 - V katero starostno skupino spadate?

do 20 let 21 - 30 lett

31 - 40 let

41 - 50 let

51 - 60 let

61 ali več let

IF (1) ( Demografija )

XIZ1a2 - Kakšna je vaša najvišja dosežena formalna izobrazba? Osnovna šola

Srednja šola

Več kot srednja šola

IF (1) ( Demografija )

Q1 - Označite regijo v kateri prebivate

Jugovzhodna regija

Pomurska regija

Podravska regija

Koroška regija

Savinjska regija

Posavska regija

Zasavska regija

Osrednjeslovenska regija

Primorsko - notranjska regija

Gorenjska regija

Goriška regija

Obalno- Kraška regija

PRILOGE

98

Q2 - Če bi v reklami zagledali logotip: ali bi vedeli za katero podjetje gre?

Da

Ne

Q3 - Slogan podjetja NajZame.si je "Najboljše, kar sta narava in človek ustvarila zame" Se vam zdi logotip

glede na slogan primeren?

Primeren

Zadovoljiv

Neprimeren

Q4 - Podjetje se ukvarja z naravnimi prehranskimi izdelki iz industrijske konoplje. Se vam zdi logotip

barvno primeren glede na dejavnost, s katero se podjetje ukvarja?

Da

Ne

Ne vem

PRILOGE

99

Q5 - Prosila bi da si ogledate spletno stran in spletno trgovino na strani: NajZame.si. Se vam zdi spletna

stran vredna zaupanja za naročilo izdelka v spletni trgovini?

Da

Ne

Ne vem

Q6 - Se vam zdi spletna stran podjetja barvno primerna glede na dejavnost, s katero se podjetje

ukvarjajo?

Da

Ne

Ne vem

Q7 - Ali se "znajdete" na spletni strani? Je organizirana primerno?

Da

Ne

Q8 - Če bi želeli opraviti nakup v spletni trgovini, ste mnenja da je dovolj podatkov za nakup na spletni

strani, ali bi potrebovali dodaten nasvet strokovnjaka?

Dovolj podatkov za nakup

Nasvet strokovnjaka

Ne vem

Q9 - Ali poznate kakšno konkurenčno podjetje, ki se ukvarja z podobno dejavnostjo kot podjetje

NajZame.si?

d i p l o m s k a n a l o g a - milovan tomaševićdk.fis.unm.si/dip/vs_2017_dasa_brilej.pdfvizualni...

Documents