BLAGOVNE ZNAMKE

(1)

Univerza v Ljubljani

Fakulteta za elektrotehniko, Fakulteta za računalništvo in informatiko

TJAŠA MLAKAR

IZDELAVA MOBILNE APLIKACIJE IN CELOSTNE GRAFIČNE PODOBE

BLAGOVNE ZNAMKE

Diplomsko delo

Univerzitetni študijski program prve stopnje Multimedija

Mentor: izr. prof. dr. Narvika Bovcon

Ljubljana, 2021

(2)

ii

(3)

Zahvala

Iskreno se zahvaljujem svoji mentorici, izr. prof. dr. Narviki Bovcon, za hitro odzivnost in svetovanje, vodenje ter strokovno pomoˇc pri izdelavi diplomskega dela.

Prav tako se zahvaljujem druˇzini, prijateljem in ostalim najbliˇzjim za brezpo- gojno podporo tekom ˇstudija.

iii

(4)

iv

(5)

Povzetek

Diplomsko delo zajema opis oblikovanja celostne grafiˇcne podobe blagovne znamke in opis oblikovanja ter izdelave aplikacije, katere primarni cilj je traj- nostna storitev dostave obrokov na rastlinski osnovi.

Teoretiˇcni del podrobneje obravnava teorijo dobre celostne grafiˇcne podobe in predstavlja kriterije, ki jih je pri njenem oblikovanju potrebno upoˇstevati.

Razloˇzi, kakˇsno vlogo ima celostna grafiˇcna podoba za podjetja oziroma blagovne znamke pri konkuriranju na trgu blaga in storitev ter nenazadnje pri komunikaciji s strankami.

V praktiˇcnem delu se pridobljeno znanje teoretiˇcnega vidika prenese v izde- lovanje celostne grafiˇcne podobe in uporabniˇskega vmesnika aplikacije. Tu so upoˇstevana vsa naˇcela dobrega oblikovanja elementov celostne grafiˇcne podobe in ustrezne uporabniˇske izkuˇsnje. Prav tako so predstavljene vse tehnologije, ki pomagajo pri doseganju zastavljenih ciljev diplomskega dela. V zadnjem delu je predstavljeno testiranje aplikacije na dejanskih uporabnikih. Interpretacija rezultatov na podlagi njihovih povratnih informacij pomaga pri predlogu o ustreznih izboljˇsavah njenega uporabniˇskega vmesnika.

Kljuˇcne besede: celostna grafiˇcna podoba, mobilna aplikacija, uporabniˇska izkuˇsnja, UEQ

v

(6)

vi Povzetek

(7)

Abstract

The diploma thesis includes a description of brand identity design process and a description of design and production process of the application, the primary goal of which is a sustainable plant-based meal delivery service.

The theoretical part includes the theory of a good corporate brand design and presents the criteria that need to be considered when creating it. It explains the role of corporate design for brands when competing in the market of the goods and services and, last but not least, when communicating with customers.

In the practical part, the acquired knowledge of the theoretical aspect is trans- ferred to the creation of a corporate brand identity and the user interface of the application. Here, all the principles of good design of brand identity elements as well as user experience are taken into account. Also presented, are all of the technologies that help with achieving the set goals of the diploma thesis. The last part presents the process of testing the application on actual users. Inter- pretation of the results, based on their feedback, helps to suggest appropriate improvements for its user interface.

Key words: corporate identity, mobile application, user experience, UEQ

vii

(8)

viii Abstract

(9)

Vsebina

1 Uvod 1

2 Predstavitev namena in cilja 3

2.1 Koncept in cilj . . . 3

2.2 Ciljna skupina uporabnikov . . . 4

3 Analiza obstojeˇcih reˇsitev 7 3.1 Obstojeˇce reˇsitve na domaˇcem trgu . . . 7

3.2 Obstojeˇce reˇsitve na tujem trgu . . . 8

3.2.1 Purple Carrot . . . 8

3.2.2 Allplants . . . 9

4 Oblikovalska reˇsitev 11 4.1 Celostna grafiˇcna podoba . . . 11

4.1.1 Pomen in prednosti dobre celostne grafiˇcne podobe . . . . 11

4.1.2 Primarni in sekundarni elementi celostne grafiˇcne podobe . 13 4.1.2.1 Znak . . . 13 ix

(10)

x Vsebina

4.1.2.2 Barvni sistem . . . 17

4.1.2.3 Tipografija . . . 19

4.1.2.4 Vizitka . . . 20

4.1.2.5 Dopisni list . . . 22

4.1.2.6 Pisemska ovojnica . . . 26

4.1.2.7 Broˇsura . . . 29

4.1.2.8 Embalaˇza . . . 31

4.2 Oblikovanje uporabniˇskega vmesnika . . . 34

5 Uporabljene tehnologije 41 5.1 Adobe Illustrator . . . 41

5.1.1 Vektorska grafika . . . 42

5.1.2 Uporabniˇski vmesnik in pogosto uporabljena orodja . . . . 42

5.2 Adobe Photoshop . . . 44

5.2.1 Rastrska grafika . . . 44

5.3 Adobe XD . . . 46

5.4 Android Studio . . . 49

5.4.1 Struktura projekta . . . 49

(11)

Vsebina xi

6 Implementacija reˇsitve 53

6.1 Uporabniˇska izkuˇsnja . . . 53

6.2 Testiranje uporabniˇskega vmesnika . . . 56

6.2.1 Ankete in vpraˇsalniki . . . 57

6.2.2 Moderirano opazovanje testirancev . . . 58

6.2.3 Ponovitve sej . . . 58

6.3 Analiza testiranja uporabniˇskega vmesnika . . . 59

6.4 Izboljˇsave na podlagi ugotovitev . . . 64

7 Zakljuˇcek 65

Literatura 67

A Broˇsura 75

B Embalaˇza 79

C User Experience Questionnaire 87

(12)

xii Vsebina

(13)

Seznam slik

3.1 Zaslonske maske mobilne verzije spletnega mesta Purple Carrot. . 9

3.2 Zaslonske maske mobilne verzije spletnega mesta Allplants. . . 10

4.1 Primarni znak podjetja Planted. . . 15

4.2 Sekundarni znak podjetja Planted. . . 16

4.3 Simbol podjetja Planted. . . 16

4.4 Razliˇcica znakovnih elementov, primernih za temnejˇsa ozadja. . . 17

4.5 Barvni sistem celostne grafiˇcne podobe podjetja Planted. . . 18

4.6 Tipografija celostne grafiˇcne podobe podjetja Planted. . . 20

4.7 Hrbtna stran vizitke usluˇzbenca podjetja Planted v naravni velikosti. 22 4.8 Sprednja stran vizitke usluˇzbenca podjetja Planted v naravni velikosti. . . 22

4.9 Dopisni list podjetja Planted v naravni velikosti. . . 25

4.10 Sprednja stran pisemske ovojnice podjetja v naravni velikosti. . . 27

4.11 Hrbtna stran pisemske ovojnice podjetja v naravni velikosti. . . . 28 4.12 Elementi komunikacije celostne grafiˇcne podobe podjetja Planted. 29 xiii

(14)

xiv Seznam slik

4.13 Sprednja stran zloˇzenke za potrebe oglaˇsevanja blagovne znamke. 30 4.14 Hrbtna stran zloˇzenke za potrebe oglaˇsevanja blagovne znamke. . 31 4.15 Embalaˇza v primeru pakiranja dveh porcij obroka. . . 33 4.16 Sprednja stran kartonaste embalaˇze s primarnim znakom podjetja. 33 4.17 Odprta kartonasta embalaˇza z navodili recikliranja v notranjosti. . 34 4.18 Zaslonske maske vstopnega zaslona, osnovnih informacij in prijave

v aplikacijo Planted. . . 37 4.19 Zaslonske maske registracije, pozabljenih uporabniˇskih podatkov

in osrednjega zaslona aplikacije. . . 38 4.20 Zaslonski maski podrobnosti posameznega obroka in naroˇcnine na

obroke ter zaslonska maska prazne koˇsarice. . . 38 4.21 Zaslonski maski koˇsarice z dodanimi izdelki in vnaˇsanja podatkov

za dokonˇcanje naroˇcila ter zaslonska maska zahvale za nakup. . . 39 4.22 Zaslonski maski vizije in naˇcel podjetja ter spreminjanja osnovnih

podatkov uporabniˇskega profila. . . 39

5.1 Proces oblikovanja broˇsure v uporabniˇskem vmesniku orodja Adobe Illustrator. . . 43 5.2 Proces prikaza broˇsure na realistiˇcnem 3D-modelu v uporabniˇskem

vmesniku orodja Adobe Photoshop. . . 46 5.3 Proces izdelave zaslonskih mask in prototipa aplikacije v upo-

rabniˇskem vmesniku orodja Adobe XD. . . 48 5.4 Struktura projekta v uporabniˇskem vmesniku orodja Android Studio. 51 5.5 Virtualni pogon aplikacije v emulatorju. . . 52

(15)

Seznam slik xv

6.1 Analiza vpraˇsalnika. . . 63

(16)

xvi Seznam slik

(17)

1 Uvod

Ideja o odstranitvi vseh ˇzivalskih proizvodov iz prehrane, ki je nekoˇc veljala za nekaj norega, v zadnjih letih postaja vse bolj priljubljen naˇcin prehranjevanja, bodisi zaradi lastnega zdravja, zaˇsˇcite okolja bodisi zaradi ˇzivali.

Veganstvo je filozofija, ki zagovarja soˇcutje z izogibanjem ˇzivalskim izdelkom.

Zlasti v drˇzavah, kot so Zdruˇzene drˇzave Amerike, kjer je tovarniˇsko kmeto- vanje najbolj razˇsirjena panoga, ˇzivali obravnavajo izredno slabo in so prisi- ljene prenaˇsati pogoje, ki se zdijo vse veˇc potroˇsnikom nesprejemljivi. Inten- zivna ˇzivinorejska industrija ima veliko razliˇcnih negativnih vplivov na okolje.

Z naraˇsˇcanjem ozaveˇsˇcenosti o emisijah ogljika v tovarnah in njihovi vlogi pri onesnaˇzevanju voda, krˇcenju gozdov ter o drugih vplivih se poveˇcuje tudi ˇstevilo ljudi, ki se vzdrˇzujejo ˇzivalskih proizvodov, ki so eden glavnih razlogov za okolj- ske spremembe. Hkrati pa, v dobi, kjer je procesirana, predelana hrana, bogata z nezdravimi maˇsˇcobami, norma za toliko prebivalstva, se ljudje za optimizacijo dobrega poˇcutja obraˇcajo k bolj zdravim moˇznostim. Veganska prehrana, ki temelji na polnovrednih ˇzivilih, lahko prinese ˇstevilne pomembne koristi, od izboljˇsanja zdravja srca, do zmanjˇsanja tveganja za sladkorno bolezen in raka, hkrati pa zagotavlja bistvena hranila, ki so potrebna za dolgo in zdravo ˇzivljenje. Veganstvo postaja vse bolj priljubljeno in prepoznavno, zlati v drˇzavah, kot so ZDA, Ka- nada, Zdruˇzeno kraljestvo ter Avstralija. Maloprodaja veganskih izdelkov se ˇze leta moˇcno poveˇcuje, hkrati pa raste tudi njihova razpoloˇzljivost. Sektor rastlinskih beljakovin prav tako cveti v smislu naloˇzbenih dolarjev in inovacij. Teˇzko je dobiti natanˇcno sliko podatkov o tem, koliko ljudi v ZDA se identificira z vegan- stvom, vendar raziskave kaˇzejo, da se je med leti 2004 in 2019 ta ˇstevilka poveˇcala za 300 odstotkov, kar predstavlja skoraj 10 milijonov ljudi.

V Zdruˇzenem kraljestvu se je po raziskavah ta ˇstevilka poveˇcala za 360 odstotkov 1

(18)

2 Uvod

in ˇse naprej raste. [1]

Povpraˇsevanje po veganski prehrani je enormno. Trgovske police krasijo izdelki rastlinskega izvora, vse veˇc je tudi restavracij z rastlinskimi razliˇcicami najbolj priljubljenih jedi. Vendar pa na trgu ˇzivilske industrije primankuje storitve naroˇcnin na ˇze vnaprej pripravljene obroke, dostavljene na dom, ki bi vsebovali sveˇze, lokalne sestavine, pripravljene v izvrstne rastlinske jedi, ki bi se hkrati ponaˇsale z najmanjˇsim ogljiˇcnim odtisom.

(19)

2 Predstavitev namena in cilja

2.1 Koncept in cilj

Cilj diplomskega dela je pribliˇzanje rastlinskega naˇcina prehranjevanja ˇsirˇsi mnoˇzici in olajˇsanje prvega stika s to kulturo prehranjevanja ter z vsemi pred- nostmi, ki jih le-ta prinese. Namen je ustvariti uˇcinkovito vizualno podobo blagovne znamke, konkurenˇcne za vstop na trg. Skladno s tem je s pomoˇcjo literature namen pridobiti vse kljuˇcne informacije o tem, kako postaviti teme- lje blagovne znamke oziroma podjetja, katere postopke pri tem uporabiti, kako oblikovati uˇcinkovito vizualno podobo in na kaj biti pozoren pri izbiri vseh njenih elementov. Temu sledi pridobivanje vseh potrebnih informacij o oblikovanju ustreznega uporabniˇskega vmesnika in poslediˇcno oblikovanje, razvijanje in testiranje mobilne aplikacije.

Rezultat vseh omenjenih pristopov in konkretnih metod razvijanja je aplikacija ter razvoj strategije in vizualne podobe istoimenske blagovne znamke Planted, ki uporabnikom s pomoˇcjo trajnostnih metod za ohranjanje planeta omogoˇca dostavo naroˇcnin (rednega prejemanja izdelkov z vnaprejˇsnjim plaˇcilom) na obroke rastlinske osnove. Vse ilustracije in vsi 3D-modeli embalaˇz, zaslonov ter komunikacijskih elementov, uporabljenih tekom diplomskega dela, so prosto dostopni za uporabo in na voljo za prenos na svetovnem spletu.

3

(20)

4 Predstavitev namena in cilja

2.2 Ciljna skupina uporabnikov

V zaˇcetnih fazah oblikovanja blagovne znamke oziroma identitete podjetja si po- magamo s tremi temeljnimi vpraˇsanji, ki nas loˇcijo od konkurence – kdo smo, kaj poˇcnemo in zakaj je to pomembno. Poleg tega je zelo pomembno, da dodobra definiramo svojo ciljno publiko, saj je blagovna znamka prav tako kot na naˇsih, zgrajena tudi na njihovih ˇzeljah, potrebah in interesih.

Analiza ciljne skupine uporabnikov je pomembna pri razliˇcnih aspektih samega podjetja. Velik aspekt je njegovo povezovanje s potencialnimi strankami.

Ljudje se ˇzelijo s storitvijo ali z izdelkom, ki ga ponuja podjetje, identificirati.

Izbira ciljne publike vpliva na platformo, ki jo uporabljamo, kje trˇzimo storitve ali izdelke in kako jih trˇzimo, kakˇsno ceno jim postavljamo, kako oblikujemo celostno grafiˇcno podobo blagovne znamke ter njej pripadajoˇce elemente komuniciranja, kakˇsen ton in jezik uporabljamo za komuniciranje z naˇsim obˇcinstvom ter s kom sklepamo potencialna partnerstva. Vsi ti vidiki vplivajo na privlaˇcnost podjetja oziroma blagovne znamke za ciljne uporabnike. Ciljno publiko lahko prepoznamo z veˇc metodami. Pomemben vidik je analiziranje naˇsih storitev in izdelkov. Prepoznati moramo, kakˇsne teˇzave reˇsujejo in komu koristijo, s tem pa pridobimo jasen vpogled v naˇse obˇcinstvo. Prav tako je pametno raziskati, kakˇsna je ciljna skupina naˇsih konkurentov. Sem spada analiza objav na njihovih druˇzbenih medijih ali spletnih mestih in stopnja angaˇziranosti ter direktne komunikacije s strankami. Prav tako med seboj vsakodnevno komunicirajo tudi potroˇsniki. Posluˇsanje in spremljanje takˇsnih povratnih informacij o blagovni znamki ali podjetju je nadvse koristno. Pomaga razumeti, ali obseg ciljne skupine uporabnikov doseˇze prave ljudi, ali pa je potrebno ciljno skupino prilagoditi.

Ni nujno, da je ciljna publika vedno primarna publika. Idealen trg se lahko spremeni z individualnimi izdelki, oglaˇsevalskimi kampanjami ali s promocijskim popustom. Pomembno je razmiˇsljati izven okvirjev, zastavljenih tirnic in prilagajati obseg ciljne skupine uporabnikov glede na trenutno ponudbo ter trend potroˇsniˇstva. [2]

Ciljni trg uporabnikov zamiˇsljenega podjetja Planted in njegovih izdelkov ter storitev so posamezniki, katerih ˇzivljenjski slog vsebuje vizijo rastlinskega prehranjevanja. Ker je trg teh uporabnikov precej velik, ga ˇzelimo za najboljˇse

(21)

2.2 Ciljna skupina uporabnikov 5

rezultate dosega omejiti na ciljno skupino, ki vkljuˇcuje posameznike, ki se pre- hranjujejo vegansko in imajo v vsakdanjem ˇzivljenju prezaseden urnik za pripravo celovitih, zdravih, hranilnih veganskih obrokov. Planted jim lahko tako omogoˇci brezskrbno, zdravo prehranjevanje v le nekaj korakih. V ciljno skupino spadajo mladi posamezniki in pari, osredotoˇceni na osebno kariero, s polnimi delavniki ter z malo prostega ˇcasa. Cene veganskih obrokov so obiˇcajno nekoliko viˇsje kot cene standardne prehrane, zato morajo biti ciljni uporabniki naravnavi v veˇcje potroˇsniˇstvo na podroˇcju prehranjevanja in vlaganja denarja v dobro poˇcutje ter zdravje.

(22)

6 Predstavitev namena in cilja

(23)

3 Analiza obstojeˇ cih reˇ sitev

Pri zasnovi nove blagovne znamke ni kljuˇcnega pomena le poznavanje svojih vi- zij in naˇcel, ampak tudi poznavanje konkurence. [3] Pomembno je poznavanje njihovih marketinˇskih orodij, vizualnega sistema in naˇcina komunikacije z zuna- njim svetom. Priporoˇcljivo se je tudi postaviti v vlogo uporabnika in izkusiti konkurenˇcno uporabniˇsko izkuˇsnjo na lastni koˇzi.

Analiza konkurence je lahko zelo enostaven, lahko pa tudi zapleten in dolgo- trajen proces. Njegove faze vkljuˇcujejo ugotavljanje, kdo je naˇsa glavna konku- renca, kdo so njeni glavni uporabniki, katere so njene prednosti in ˇsibke toˇcke. S pomoˇcjo analize njenih storitev skozi oˇci potencialnega kupca, kjer lahko pregle- damo spletno stran konkurence ali pa koristimo njeno storitev, lahko na podlagi vseh podatkov laˇzje oblikujemo lastno blagovno znamko in njeno identiteto. [4]

3.1 Obstojeˇ ce reˇ sitve na domaˇ cem trgu

Pribliˇzno 42 odstotkov celotnega trga naroˇcanja hrane je dandanes na spletu.

Storitev dostave hrane na dom se je v zadnjih letih poveˇcala za veˇc kot 20 odstotkov. Restavracije in druga ˇzivilska podjetja zdaj na razliˇcne naˇcine obravnavajo digitalno naroˇcanje ter dostavo hrane. Medtem ko nekateri to poˇcnejo sami prek neodvisnih platform, se je znatno poveˇcalo tudi ˇstevilo platform, ki ponujajo dostavo hrane veˇc tisoˇc restavracij na enem mestu. Tako je dostava hrane postala ena od vodilnih globalnih storitev, spletne in mobilne platforme pa med seboj tekmujejo za ohranjanje trˇznega deleˇza. [5]

Tudi v Sloveniji se je ponudba dostave hrane na dom v zadnjih letih razcve- 7

(24)

8 Analiza obstojeˇcih reˇsitev

tela. Vse veˇc je platform, na katerih se lahko uporabniki odloˇcajo med razliˇcnimi ponudniki in razliˇcnimi vrstami hrane. Platforme, ki bi bila primarno namenjena dostavi rastlinskih obrokov ali naroˇcnine na le-te, na slovenskem trgu ni.

Med najbolj razˇsirjenimi platformami z omejeno ponudbo veganske prehrane na domaˇcem trgu trenutno prevladujeta ehrana in Wolt.

3.2 Obstojeˇ ce reˇ sitve na tujem trgu

Kjer na enem delu sveta storitve primankuje, je v drugih najdena pogosteje. Na podroˇcju Zdruˇzenih drˇzav Amerike je ponudba dostave rastlinske prehrane na dom dandanes ena izmed bolj rastoˇcih panog.

3.2.1 Purple Carrot

Purple Carrot je naroˇcniˇska storitev na hitro pripravljene rastlinske obroke. Po- samezna naroˇcnina vsebuje razliˇcne sestavine, od sadja, zelenjave, do rastlinskih beljakovin, s katerimi si uporabnik po receptu sam pripravi izbran obrok. Purple Carrot ponuja obroke, namenjene izkljuˇcno vegetarijancem in veganom. Naroˇceni obroki naj bi bili pripravljeni v pribliˇzno 30 minutah, kar olajˇsa pripravo kosila ali veˇcerje v udobju lastnega doma. Purple Carrot strankam omogoˇca, da same ustvarijo meni po meri, ki ustreza njihovim potrebam. Izberejo in poskusijo lahko katerokoli jed v ponudbi veˇcerij, kosil pa tudi zajtrkov, ki so na voljo na platformi. Purple Carrot omogoˇca tudi toˇcen dan dostave naroˇcnin, hkrati pa lahko uporabniki naroˇcnine spremenijo, preskoˇcijo ali prekliˇcejo. [6] Purple Carrot trenutno ni na voljo kot aplikacija, ampak le v obliki spletnega mesta, le-to pa je prilagojeno vsem vrstam naprav.

(25)

3.2 Obstojeˇce reˇsitve na tujem trgu 9

Slika 3.1: Zaslonske maske mobilne verzije spletnega mesta Purple Carrot.

[7]

3.2.2 Allplants

Allplants je vodilna storitev dostave obrokov na rastlinski osnovi v Zdruˇzenem kraljestvu. Zasnovana je kot naroˇcnina na zamrznjene obroke, ki so uporabnikom dostavljeni v frekvenci obnavljanja naroˇcnine. Uporabnik izbere ˇsest obrokov, ti pa nato sestavljajo njegovo naroˇcilo do preklica. Ob tem izbere tudi frekvenco prejemanja. Izbere lahko ponavljanje na vsaka dva, tri, ˇstiri ali ˇsest tednov. Prav tako ima moˇznost, da kadarkoli prekliˇce ali pa spremeni vsebino svoje naroˇcnine.

Vsi obroki so zasnovani 100-odstotno na rastlinskih komponentah, dostavljeni pa so v trajnostnem pakiranju, kar je tudi ena izmed smernic celotnega podjetja. [8]

Allplants trenutno ni na voljo kot aplikacija, ampak le v obliki spletnega mesta, le-to pa je prilagojeno vsem vrstam naprav.

(26)

10 Analiza obstojeˇcih reˇsitev

Slika 3.2: Zaslonske maske mobilne verzije spletnega mesta Allplants.

(27)

4 Oblikovalska reˇ sitev

Dandanes nas z vseh strani obdajajo blagovne znamke in podjetja, ki med seboj tekmujejo ter si nenehno prizadevajo za ˇcimveˇcji deleˇz uporabnikov v panogi, kjer poslujejo. Zato je kljuˇcnega pomena, da se pri ustvarjanju blagovne znamke drˇzimo naˇcel izstopanja in drugaˇcnosti.

4.1 Celostna grafiˇ cna podoba

Celostna grafiˇcna podoba (v nadaljevanju tudi CGP) je sistem elementov, na- menjenih grafiˇcni predstavitvi podjetja ali organizacije. Ni le znak ali in ni le ime. Gre za enotno vizualno podobo podjetja, ki daje podjetju prepoznavnost in identiteto. Izhaja iz vrednot, prepriˇcanj, bistva in vizije blagovne znamke ter sluˇzi kot merilo profesionalnosti in ugleda.

4.1.1 Pomen in prednosti dobre celostne grafiˇcne podobe

Celostna grafiˇcna podoba ni namenjena le izpolnjevanju kriterija lepote in vizualne privlaˇcnosti; obstaja z namenom komuniciranja in sporoˇcanja vizije blagovne znamke, ne glede na uporabljen medij. [9] Moˇcna CGP naj bi dosegala naslednje kriterije:

1. POSEBNOST

Vsaka blagovna znamka mora biti posebna in izstopati med ostalimi podobnimi ponudniki izdelkov ter storitev na trgu. [9]

11

(28)

12 Oblikovalska reˇsitev

2. PRILAGODLJIVOST

Celostna grafiˇcna podoba mora rasti z blagovno znamko. Prilagajati se mora nenehnim spremembam v razvoju storitev in ponudbe, ne glede na to, ali gre za nove izdelke, storitve ali celo za nove panoge. [9, 10]

3. KOHEZIVNOST IN INTUITIVNOST

Celostna grafiˇcna podoba mora biti zasnovana in obikovana tako, da vsak element dopolnjuje drugega. Vsi sestavni deli morajo biti zdruˇzeni v skladno celoto in se med seboj povezovati. [9, 10]

4. NATAN ˇCNOST

Pred oblikovanjem vizualne identitete blagovne znamke mora biti vedno toˇcno doloˇcena vizija blagovne znamke, njene vrednote in prepriˇcanja. Ce- lostna grafiˇcna podoba je primarno namenjena sporoˇcanju njenega bistva, zato morajo biti njena naˇcela natanˇcno doloˇcena in zastavljena. [10]

Celostna grafiˇcna podoba blagovne znamke oziroma podjetja je torej veˇc kot le logotip. Je bistvenega pomena za loˇcevanje od konkurence. [11] Podjetju pomaga pri prepoznavnosti med ostalimi enakimi ali podobnimi izdelki in storitvami na trgu.

Podzavestno vpliva na to, kakˇsen odnos imajo potencialne stranke do panoge, v kateri podjetje deluje. [11] Poleg kvalitete izdelkov in storitev je izgled kljuˇcnega pomena tudi pri vzpodbujanju zanimanja in identificiranja z njenimi naˇceli, vizijo ter vrednotami. Zato mora biti vizualna identiteta oblikovana tako, da je potroˇsnikom v pomoˇc pri odloˇcitvi, da so njene storitve in izdelki nekaj, kar le-ti potrebujejo ter v kar verjamejo tudi sami.

Blagovne znamke z dosledno vizualno podobo med konkurenco bolj odmevajo.

[11] Dobro zasnovana celostna grafiˇcna podoba blagovne znamke mora torej zagotavljati skladnost, celovitost in konsistenco v komunikaciji ter oglaˇsevanju, pa naj bo to v spletnih mestih, profilih v druˇzabnih medijih ali oglaˇsevanje v tisku.

Vsi elementi celostne grafiˇcne podobe morajo zagotavljati povezljivost v za- kljuˇceno celoto. To se odraˇza v dosledni, logiˇcni in zadovoljivi izkuˇsnji strank ter potroˇsnikov in izpolnjuje obljubo o edinstvenosti blagovne znamke.

(29)

4.1 Celostna grafiˇcna podoba 13

4.1.2 Primarni in sekundarni elementi celostne grafiˇcne podobe

Celostna grafiˇcna podoba zajema primarne in sekundarne elemente CGP. Med primarne spadajo najbolj osnovni deli vizualne identetite, kot so njen logotip in simbol, barvni sistem ter pisava. Med sekundarne elemente spadajo gradniki komuniciranja in oglaˇsevanja, kot so vizitka, dopisni list, pisemska ovojnica ter vsi dodatni elementi, ki jih na podlagi lastne presoje doloˇcimo v procesu naˇcrtovanja celostne grafiˇcne podobe. [12]

Iz tega izhaja, da vsak element celostne grafiˇcne podobe po svoje pripomore k zgodbi in izgledu podjetja – primarni elementi so obvezni, sekundarne pa izbiramo po potrebi.

4.1.2.1 Znak

Znak je osrednji element celostne grafiˇcne podobe.

Dobro oblikovan znak gradi zaupanje in privablja ljudi. Potencialnim strankam pove, kaj znamka je, kaj poˇcne in na katerih podroˇcjih deluje ter kako jim to lahko koristi. Ustrezno oblikovan znak izstopa med konkurenco in zagotavlja, da si ljudje blagovno znamko zapomnijo ter z njim asociirajo pozitivna ˇcustva. [13]

Znak mora biti jasen in enostaven za interpretacijo. Pomembno je, da je prilagodljiv za vsa medijska podroˇcja in uˇcinkovit na vseh velikostih. Dobro oblikovan znak mora vsebovati prepoznavno tipografijo, preproste barve in zapomljiv vizualni element. [13]

Pri oblikovanju dobrega znaka se je potrebno zavedati nekaj meril za njegovo oblikovanje:

1. PREPOZNAVNOST

Znak identificira podjetje, zato mora biti zlahka prepoznaven. Sporoˇcilo, ki ga ˇzelimo poslati z njegovo pomoˇcjo, mora biti jasno, predstavitveni elementi pa enostavno loˇcljivi za najveˇcji uˇcinek prepoznavnosti in nepo- zabnosti. Prav tako mora poosebljati vrednote podjetja. [14]

(30)

2. PRILAGODLJIVOST

Znak mora biti primeren za vse predstavitvene platforme. Naj bo na spletu ali v tiskani obliki, na belem ali temnem ozadju, zelo majhen ali zelo velik, povsod bi moral biti enako loˇcljiv enako loˇcljiv. [14]

3. BARVITOST

Znak mora biti tako ˇcrno-bel kot tudi barven za uporabo na vseh predstavitvenih platformah. V primeru, da ni jasno, v kakˇsnem kontekstu se bo uporabljal, se je pametno prepriˇcati, da izgleda dobro tako v ˇcrno-beli kot tudi v barvni verziji. [14]

4. ENOSTAVNOST

Znak naj bo preprost. Njegov primarni cilj je, da si ga zapomni ˇcim veˇc ljudi. Tipografija naj bo berljiva, ikone naj bodo preproste in enostavne.

Enostavnost zagotavlja njegovo razumljivost v kateri koli obliki in predstavitveni platformi, na kateri se bere. [14]

5. BREZ ˇCASNOST

Sledenje trendom pri oblikovanju znaka je pomembno, vendar je prav tako pomembno ustvariti nekaj brezˇcasnega, kar bo prestalo test staranja in bo dobro videti tekom let. S tem se izognemo nepotrebnemu preoblikovanju elementov celostne grafiˇcne podobe. [14]

Eden izmed najbolj pomembnih aspektov pri oblikovanju znaka je njegova oblika in velikost. Uporablja se namreˇc na razliˇcnih predstavitvenih platformah, le-te pa se lahko zelo razlikujejo v dimenzijah in aspektih. Dosledno vizualno podobo lahko z namenom prilagajanja ustvarimo s pomoˇcjo treh razliˇcic: primarnega znaka, sekundarnega znaka in slikovnega znaka. [15] Primarni znak je osnovni znak blagovne znamke. Je najveˇcji, z najveˇc detajli, uporabljali pa naj bi ga vedno, kadar nam to dopuˇsˇca prostor predstavitvene platforme. [15, 16]

Sekundarni znak je uporabljen v primeru, ko primarni ne ustreza v izbranem kontekstu. V primeru, da je primarni znak bolj vertikalen, bo sekundarni zajemal veˇc horizontalnega prostora. Vˇcasih gre za poenostavljeno razliˇcico primarnega znaka, ki ni tako detajlna, v veˇcini primerov pa gre za preureditev elementov v bolj kompaktno, strnjeno razliˇcico, ki dobro deluje na manjˇsih predstavitvenih platformah. [15, 16] Slikovni znak je lahko ikona ali simbol, ki je lahko del

(31)

primarnega in sekundarnega znaka, ali pa stoji kot popolnoma loˇcen element blagovne znamke. Slikovni znak se uporablja na mestih, kjer ime blagovne znamke ˇ

ze nastopa, znak pa je dodan v njegovo podporo. Zato po navadi ne vkljuˇcuje imena ali katerega koli drugega besedila. Pogosto se uporablja na spletu in pri druˇzabnih omreˇzjih ter vsebuje posamezne ˇcrke, ˇstevilke ali simbole. [15, 16]

V procesu izdelave celostne grafiˇcne podobe podjetja Planted smo izdelali primarni in sekundarni znak ter slikovni znak za ˇcim boljˇse prilagajanje razliˇcnim predstavitvenim medijem.

Primarni znak sestavlja ime podjetja, predstavljen z eno izmed tipografij, ki smo jo izbrali v okviru celostne grafiˇcne podobe, bogatijo pa ga vektorske ilustracije razliˇcne zelenjave. [17] Poleg imena (^≫Planted^≪) imajo tudi le-te veliko vlogo pri predstavitvi vizije znaka, saj pripomorejo k njegovem sporoˇcilu, ki nakazuje, da se podjetje ukvarja s prehrano rastlinskega izvora.

Slika 4.1: Primarni znak podjetja Planted.

Sekundarni znak je kompaktna verzija primarnega znaka. Primarni znak za- seda precej horizontalnega prostora, zato je sekundarni oblikovan vertikalno.

(32)

Slika 4.2: Sekundarni znak podjetja Planted.

Simbol smo oblikovali loˇceno od primarnega in sekundarnega znaka. Sesta- vljen je iz barvne podloge, na kateri je s pomoˇcjo vektorskih ilustracij zelenjave oblikovana ˇcrka^≫P^≪.

Slika 4.3: Simbol podjetja Planted.

Prav tako smo glede na kontekst uporabe pripravili veˇc barvnih razliˇcic, primernih za uporabo v primeru svetlega oziroma temnega ozadja.

(33)

Slika 4.4: Razliˇcica znakovnih elementov, primernih za temnejˇsa ozadja.

4.1.2.2 Barvni sistem

Barvni sistem je eden najpomembnejˇsih vidikov pri oblikovanju celostne grafiˇcne podobe podjetja oziroma blagovne znamke. [18] Nastopa v znaku, vseh sekun-

(34)

darnih elementih vizualne identitete, v druˇzbenih medijih, na spletnih mestih in v oglaˇsevanju ter trˇzenju.

Barva je eden glavnih psiholoˇskih vplivov v vizualnem svetu. Izbira barvnih tonov vpliva na razpoloˇzenje ljudi, zato pri oblikovanju celostne grafiˇcne podobe le-ti predstavljajo moˇcno orodje za komunikacijo. Premiˇsljena uporaba barvnih tonov pri izgradnji dobre barvne palete pritegne ljudi in jim natanˇcno pove, za kaj gre pri blagovni znamki. Zato je pomembno vedeti, kako izbrati barvo, ki najbolje predstavlja celostno podobo blagovne znamke. [18]

Ceprav je barva doˇˇ ziveta subjektivno, pa je nekaterim barvam tradicionalno predpisan toˇcno doloˇcen pomen. Rdeˇca barva je intenzivna barva, povezana z energijo in s strastjo, oranˇzna je vesela, zabavna, asociirana s pustolovˇsˇcino ter tveganjem, zelena je interpretirana kot naravna in sproˇsˇcujoˇca ter asociirana z vzbujanjem dobrega poˇcutja, modra pa izˇzareva globino, mir, strokovnost in stabilnost. [19]

Pri oblikovanju celostne grafiˇcne podobe podjetja Planted smo se odloˇcili za uporabo 6 barv naravnih tonov, ki med seboj delujejo kontrastno, povezano in intuitivno ter predstavljajo zemeljskost, naravnost, mir in dobro poˇcutje.

Barvno paleto sestavljajo komplet hladnejˇsih barv, kjer nastopajo svetlo modra (#E2EBE1), ki predstavlja mir in spokojnost, temno modra (#697775), ki inter- pretira globino ter strokovnost, temno zelena (#575639), ki izˇzareva naravnost in obˇcutek sproˇsˇcenosti, hkrati pa obˇcutek globine, ter komplet toplejˇsih barv, kjer nastopajo temnejˇsa oker barva (#B59350), temna rjava (#8B5E3D) in svetla beˇz (#DBCDA0), ki izˇzarevajo zemeljskost ter naravnost.

Slika 4.5: Barvni sistem celostne grafiˇcne podobe podjetja Planted.

(35)

4.1.2.3 Tipografija

Tipografija blagovne znamke je kljuˇcna za prenaˇsanje sporoˇcila. Blagovne znamke izkoriˇsˇcajo ˇsiroko paleto potencialov tipografije za izraˇzanje svoje individualnosti.

[20]

Tipografija je v procesu izdelave celostne grafiˇcne podobe v prvotnem pomembna ker ima stik z vsem, kar vkljuˇcuje besedila. Vse od spletnih mest, druˇzabnih medijev, embalaˇze blagovne znamke, panojev za oglaˇsevanje, e-poˇstnih sporoˇcil do dokumentov je tipografsko, zato je tipografija veˇcji del celostne grafiˇcne podobe. V skladu s tem je potrebno zagotoviti, da je dobro premiˇsljena.

[21] Ko razmiˇsljamo o tipografiji, ne gre le za izbiro in uporabo doloˇcene pisave, temveˇc tudi o tem, kako bodo tipografski elementi razporejeni v zasnovi, vizualni ureditvi, barvnem kontrastu, praznem prostoru ter izbranih pisavah in njihovih velikostih. [22]

V okviru praktiˇcnega dela diplomske naloge smo za tipografijo blagovne znamke izbrali dve druˇzini pisav. Prva je Cormorant Garamond, kjer smo izbrali srednje krepko in srednje krepko leˇzeˇco verzijo. Druga je Brandon Grotesque, kjer smo izbrali majhno in srednjo debelino ˇcrk.

Cormorant Garamond spada v druˇzino, kjer imajo ˇcrke razliˇcno oblikovane zakljuˇcke, serife. Temu se lepo dopolnjuje pisava s ˇcrkami brez serifov, kot je Brandon Grotesque. Uporabo prve smo pripisali preteˇzno vsem naslovom in izpostavljenemu besedilu, druga pa nastopa v vlogi besedil paragrafov.

(36)

Slika 4.6: Tipografija celostne grafiˇcne podobe podjetja Planted.

4.1.2.4 Vizitka

Najpogostejˇsi element komuniciranja iz sekundarne celostne grafiˇcne podobe so vizitke. Vizitke so kartice s poslovnimi podatki o podjetju ali posamezniku.

Vizitka obiˇcajno vkljuˇcuje ime posameznika, znak podjetja za katerega posa- meznik dela, njegovo delovno mesto in kontaktne podatke, kot so sedeˇz podjetja, telefonska ˇstevilka, e-poˇstni naslov ter spletno mesto. V danaˇsnjih ˇcasih vizitke

(37)

pogosto vsebujejo tudi podatke o druˇzbenih omreˇzjih, kot so Facebook, LinkedIn in Twitter. [23] Tradicionalno so bile vizitke oblikovane kot preproste razglednice s ˇcrnim besedilom na beli podlagi, konec 20. stoletja pa je tehnoloˇski napredek povzroˇcil spremembe v slogu, zaradi ˇcesar dandanes vizitke vsebujejo vsaj enega od vidikov presenetljivega in neobiˇcajnega grafiˇcnega oblikovanja. [23]

Uˇcinkovita vizitka, ki bo v posameznikovih oˇceh pustila peˇcat, potrebuje veˇc kot le ime in kontaktne podatke. Privlaˇcna vizitka pritegne pozornost potencialnih strank in pomaga pri uˇcinkovitem promoviranju podjetja ter ustvarjanju socialnih mreˇz. [24]

Pri oblikovanju poslovne vizitke je za najboljˇse rezultate pametno upoˇstevati nekaj pravil oblikovanja:

1. SELEKTIVNOST INFORMACIJ

V vizitko je potrebno vkljuˇciti ravno dovolj informacij, da jo naredimo nepo- zabno. Mikavno je zmanjˇsati velikost pisave, da ustvarimo dovolj prostora za vkljuˇcitev prav vseh povezav druˇzbenih omreˇzij, vendar to vodi do pre- obremenitve informacij. [24]

2. ˇCITLJIVOST

Pisave na vizitki morajo biti dovolj velike, da so berljive. Naj bodo pisave, ki so uporabljene na vizitki, preproste in nepopaˇcene. [24] O tem je potrebno razmiˇsljati ˇze pri izbiranju tipografije celostne grafiˇcne podobe, saj je pomembno, da se vsi predstavitveni elementi blagovne znamke ujemajo in skladajo.

3. PRAZEN PROSTOR

Uˇcinkovita uporaba praznega prostora na vizitkah pomaga pri pomnenju najpomembnejˇsih informacij. Z vidika oblikovanja prazen prostor pomaga pri opozarjanju na tisti del vizitke, ki dejansko vsebuje podatke, ki so po- membni. [24]

Poslovne vizitke, oblikovane za podjetje Planted, vsebujejo podatke o imenu usluˇzbenca, njegovem delovnem mestu v podjetju, njegove kontaktne podatke, spletno mesto podjetja in sedeˇz podjetja. Hrbtno stran vizitke krasijo vektorske

(38)

ilustracije, ki so del celostne grafiˇcne podobe podjetja in nakazujejo na dejavnost, s katero se podjetje ukvarja.

Slika 4.7: Hrbtna stran vizitke usluˇzbenca podjetja Planted v naravni velikosti.

Slika 4.8: Sprednja stran vizitke usluˇzbenca podjetja Planted v naravni velikosti.

4.1.2.5 Dopisni list

Dopisni list je praviloma enolistna tiskovina, potiskana na eni strani. Uporablja se za komuniciranje s poslovnimi partnerji, kar pomeni, da ni samo list papirja, ampak del celostne podobe podjetja. [25] Dopisni listi so po navadi oblikovani v A4 formatu.

(39)

Pri oblikovanju dopisnega lista moramo biti pozorni na zajemanje vseh kljuˇcnih informacij. Dopisni list bi moral, kot formalna tiskovina celostne grafiˇcne podobe podjetja, zajemati vse kontaktne podatke, od sedeˇza podjetja, do tele- fonske ˇstevilke, e-poˇstnega naslova in spletnega mesta. Oblikovanje mora biti kar se da preprosto. Znak in nekaj grafiˇcnih elementov, ki predstavljajo podjetje, je dovolj, da ustvarimo koheziven element CGP. Pomembno je razmisliti tudi o velikosti vseh elementov, ki jih bomo umestili na sam dopisni list, in njihovo pozicijo za najboljˇsi rezultat pri samem procesu tiskanja. [26]

Pri oblikovanju dopisnega lista za blagovno znamko Planted smo uporabili enake grafiˇcne elemente kot pri oblikovanju vizitke in s tem zadostili kriteriju kohezije med elementi celostne podobe. Prav tako smo na A4 velikosti upodobili primarni logo in najpomembnejˇse osnovne kontaktne informacije.

(40)

(41)

Slika 4.9: Dopisni list podjetja Planted v naravni velikosti.

(42)

4.1.2.6 Pisemska ovojnica

Pisemska ovojnica oziroma kuverta je del celostne grafiˇcne podobe, ki dobi najmanj pozornosti, pa vendar igra veliko vlogo pri uspehu komunikacijskih elementov podjetja. Njeno oblikovanje mora biti dobro premiˇsljeno, da je uˇcinkovito.

Pri oblikovanju pisemskih ovojnic v namen komuniciranja podjetij in bla- govnih znamk, moramo biti pozorni na nekaj smernic. Zavedati se moramo, s kakˇsnim namenom jo oblikujemo. Ovojnica, oblikovana v sklopu celostne grafiˇcne podobe blagovne znamke, se bo bistveno razlikovala od tiste, namenjene za poˇsiljanje pisem prijateljem ali druˇzini. Ovojnica bi morala biti oblikovana enostavno. Dovolj je znak podjetja in vsebina na podroˇcju povratnega naslova.

Dodatna podrobnost so lahko krivulje in ostali grafiˇcni elementi ali pa njena barva. Drugaˇcna barva pisemske ovojnice izstopa v nabiralniku in takoj pritegne pozornost. Navsezadnje pa mora biti ovojnica v skladu s smernicami za tiskanje in dimenzij, ki jih zahteva poˇsta. [27]

Pri oblikovanju pisemske ovojnice v kontekstu celostne grafiˇcne podobe smo uporabili velikost DL, ki je standardna velikost pisemskih ovojnic, v katero lahko shranimo zloˇzen A4 dokument. S temno zeleno barvo smo poskrbeli za njeno izstopanje, s pomoˇcjo krivulj pa smo dosegli kohezijo vseh treh elementov komuniciranja. Pisemski ovojnici smo na hrbtni strani dodali ˇse znak in povratni naslov ter kontaktne podatke podjetja.

(43)

Slika 4.10: Sprednja stran pisemske ovojnice podjetja v naravni velikosti.

(44)

Slika 4.11: Hrbtna stran pisemske ovojnice podjetja v naravni velikosti.

(45)

Slika 4.12: Elementi komunikacije celostne grafiˇcne podobe podjetja Planted.

[28]

4.1.2.7 Broˇsura

Za potrebe oglaˇsevanja storitve in izdelkov podjetja Planted smo se pri procesu oblikovanja celostne grafiˇcne podobe odloˇcili tudi za oblikovanje broˇsure. Le-ta vsebuje vse potrebne informacije o podjetju, njegovi viziji in storitvah, ki jih ponuja. Vsebino smo razporedili na A5 predstavitveni velikosti, ki je zloˇzena s pomoˇcjo dveh pregibov.

Broˇsure so promocijski dokumenti, ki se uporabljajo predvsem pri predstavitvi podjetja oziroma organizacije, izdelkov ali storitev in v procesu oglaˇsevanja.

Lahko so predstavljene kot niz nepovezanih papirjev, ali pa, pogosteje, kot zloˇzenke. Vsebujejo povzetke, ki so promocijske narave. [29] Zloˇzenke so veˇcih

(46)

vrst. Lahko imajo le en pregib, dva pregiba, poznamo pa tudi takˇsne, ki imajo tri, ˇstiri ali pet pregibov. Prav tako nastopajo v veˇcih velikostih. Najpogosteje se pojavljajo v A4 in A5 velikosti predstavitvene ploskve.

Oblikovanje broˇsure je enostavno. Toda oblikovanje takˇsne, ki jo bo prejemnik po branju ohranil ali pa predal nekomu drugemu, ni enostaven podvig. Uˇcinkovito oblikovanje je tako kljuˇcnega pomena za to, da bo njena ˇzivljenjska doba uporabe daljˇsa. Pred priˇcetkom oblikovanja je potrebno doloˇciti cilj broˇsure. Po tem, ko so doloˇcena vsa besedila, je potrebno izbrati ˇzeleno verzijo zlaganja broˇsure. Pregib naj bi vedno dopolnjeval vrsto vsebine, ki jo ˇzelimo vkljuˇciti v broˇsuro. Poleg tega moramo biti pozorni na to, kako je vsebina v broˇsuri berljiva.

Slika 4.13: Sprednja stran zloˇzenke za potrebe oglaˇsevanja blagovne znamke.

[30]

(47)

Slika 4.14: Hrbtna stran zloˇzenke za potrebe oglaˇsevanja blagovne znamke.

[31]

4.1.2.8 Embalaˇza

Pri celostni grafiˇcni podobi zasnovanega podjetja Planted je embalaˇza eden izmed kljuˇcnih elementov vizualne podobe. V skladu s tem smo zatorej v procesu oblikovanja ustvarili embalaˇzo za shranjevanje v naprej pripravljenih obrokov in embalaˇzo, v kateri so le-ti transportirani.

Vloga embalaˇze pri trˇzenju je postala precej pomembna, saj je eden izmed glavnih naˇcinov oglaˇsevanja, pri katerem se podjetja trudijo pritegniti pozornost potencialnih strank. Privlaˇcna oblika in dizajn embalaˇze v ˇzivilski industriji podjetju pomaga, da svoje izdelke potroˇsnikom pribliˇza na pozitiven ter nepozaben naˇcin. S tem se okoli izdelkov ustvari posebna kultura, hkrati pa se poveˇca njihova prodaja. Prav tako se lahko podjetje predstavi kot okolju prijazno in etiˇcno ter med kupci ustvari predstavo o tem, koliko podjetju pomeni trajnost ter na-

(48)

prednost. V procesu odloˇcanja med izbiro ˇzivil kupci svoje odloˇcitve sprejemajo hitro in skoraj instinktivno. Potroˇsnike pritegnejo izdelki, katerih embalaˇza je najbolj privlaˇcna. Oblikovanje embalaˇze za ˇzivila mora kupce pritegniti skozi barve, pisavo, grafiˇcne elemente in vse potrebne informacije, ki jih kupec potrebuje. [32]

Eno izmed osrednjih naˇcel pri oblikovanju embalaˇze je ustvarjanje embalaˇze, ki je tesno usklajena z vrednotami podjetja, oziroma krepi identiteto blagovne znamke. Embalaˇza mora prav tako dopolnjevati svojo vsebino. Oblika naj bi bila precej preprosta, dizajn pa naj bi bil precej minimalen. Poleg samega izgleda je pomembno, da za pakiranje izberemo ustrezen material. Embalaˇza mora omogoˇcati, da je dovolj odporna v procesu transporta, ne da bi se hrana pokvarila ali utrpela kakˇsno drugo ˇskodo. [32]

Za embalaˇzo, ki je v neposrednem stiku s hrano, smo izbrali pravokotno pakiranje, izdelano iz 100-odstotne reciklirane plastike, kar ustreza trajnostnim zah- tevam blagovne znamke. Prav tako je ta vrsta pakiranja najbolj primerna za ohranjanje sveˇzine obrokov med samo distribucijo.

Zunanja plast embalaˇze je 100-odstotna reciklirana kartonska ˇskatla, katere notranja obloga je narejena iz recikliranega papirja in koruznega ˇskroba, ki pomaga pri ohranjanju maksimalne sveˇzine obrokov.

(49)

Slika 4.15: Embalaˇza v primeru pakiranja dveh porcij obroka.

[33]

Slika 4.16: Sprednja stran kartonaste embalaˇze s primarnim znakom podjetja.

[34]

(50)

Slika 4.17: Odprta kartonasta embalaˇza z navodili recikliranja v notranjosti.

[34]

4.2 Oblikovanje uporabniˇ skega vmesnika

Oblikovanje uporabniˇskega vmesnika je proces, ki ga oblikovalci uporabljajo za izdelavo vmesnikov v programski opremi ali terminalnih napravah, pri ˇcemer se osredotoˇcajo na videz in slog. Oblikovalci si prizadevajo ustvariti vmesnike, ki bodo za uporabnike enostavni in bodo prinesli najboljˇso uporabniˇsko izkuˇsnjo.

[35] Poleg vseh vidikov izgradnje aplikacije s strani uporabniˇske izkuˇsnje, je kljuˇcna tudi njena izgradnja z oblikovalskega vidika.

Pri oblikovanju aplikacije smo uporabili vse poglavitne znaˇcilnosti celostne grafiˇcne podobe podjetja. Skozi vse posamezne zaslone se kontinuirano pojavlja barvna shema, tipografija podjetja in dodatni grafiˇcni elementi.

1. Uporabnik je pri zagonu aplikacije pozdravljen z vstopnim zaslonom. Na

(51)

4.2 Oblikovanje uporabniˇskega vmesnika 35

vrhu zaslona se nahaja znak podjetja, pod njim pa slogan podjetja. Na dnu sta en pod drugim zloˇzena gumba za prijavo in registracijo. Ob kliku na katerega koli izmed njiju se le-ta obarva s temno zeleno barvo, kar izraˇza upo- rabnikovo interakcijo. Neˇzna modra barva ozadja ustvarja obˇcutek umirje- nosti in miline.

2. Od tu lahko uporabnik s potegom v levo dostopa do zaslona, kjer se nahajajo informacije o glavnih naˇcelih in viziji podjetja. Naslovi posameznih paragrafov so zapisani v velikih tiskanih ˇcrkah, kar poudarja njihovo po- membnost, hkrati pa so od posameznih paragrafov loˇceni z uporabo barve.

Za pisavo naslovov smo uporabili Cormorand Garamond, medtem ko je besedilo paragrafov zapisano v pisavi Brandon Grotesque. V levem zgornjem kotu se nahaja gumb za vrnitev na stran, kjer se je uporabnik nahajal prvotno.

3. Iz prvotnega zaslona lahko uporabnik s klikom na gumb^≫Log in^≪nadaljuje do zaslona za prijavo, namenjenega za ˇze obstojeˇce uporabnike. Tu uporabnik vnese osnovne podatke, kot je uporabniˇsko ime in geslo. Na vrhu strani se zopet nahaja gumb za vrnitev na prejˇsnje mesto nahajanja in sredinsko poravnan naslov zaslona, na katerem se trenutno nahaja. Ob kliku na gumb

≫Log in^≪ je uporabnik v primeru ustreznih uporabniˇskih podatkov peljan na osrednji zaslon aplikacije, v nasprotnem primeru pa se na zaslonu pojavi obvestilo o nepravilnosti vneˇsenih podatkov. Na dnu zaslona se nahajata tekstovni povezavi, ki uporabnika peljeta na zaslon za ponastavitev poza- bljenega gesla ali na zaslon za registracijo, v primeru, da uporabnik ˇse nima uporabniˇskega raˇcuna.

4. Zaslon registracije je oblikovan v enakem stilu kot zaslon za prijavo uporabnika. Razlika zaslonske maske je v tem, da ima zaslon veˇc vnosnih mest podatkov, saj gre za registracijo bodoˇcega uporabnika. Po vneˇsenih podat- kih uporabnik pritisne gumb ^≫Register^≪, ta pa se ob interakciji obarva v temno zeleno barvo.

5. Z zaslona za prijavo ima uporabnik moˇznost ponastavitve uporabniˇskega gesla, v primeru, da je pozabil osnovne podatke za prijavo. To stori z vnosom svojega e-poˇstnega naslova v vnosno polje, nakar ga v nabiralniku ˇ

caka sporoˇcilo o spremembi gesla.

(52)

6. Ob uspeˇsni registraciji ali prijavi je uporabnik preusmerjen na osrednji zaslon aplikacije. Na spodnjem delu zaslona se nahaja navigacijska vrstica, na kateri ima uporabnik moˇznost preklapljanja med razliˇcnimi zasloni. Ikona, ki pripada zaslonu, na katerem se nahaja v danem trenutku, je obarvana z drugaˇcno barvo kot preostale, s ˇcimer se uporabniku sporoˇca trenutna po- zicija. Uporabnik lahko na domaˇcem zaslonu izbira med ponudbo obrokov in naroˇcnin rastlinske prehrane. Le-ti so od samega ozadja jasno loˇceni z uporabo barvnih ploskev.

7. Ob izbiri posameznega obroka aplikacija uporabnika preusmeri na okno podrobnosti o izdelku. V navigacijski vrstici se svetleje obarva ikona podrobnosti. Na zaslonu so vse potrebne informacije o obroku, s potegom v levo pa lahko uporabnik izve ˇse veˇc kljuˇcnih informacij. Pod fotografijo obroka se nahajajo pripadajoˇce osnovne informacije izdelka, pod njimi pa cena por- cije in vnosno polje, v katerega uporabnik vnese poljubno ˇstevilo porcij, ki jih ˇzeli naroˇciti. Na dnu zaslona se nahaja gumb za dodajanje izdelka v koˇsarico.

8. Zaslonska maska posameznega programa oziroma naroˇcnine je oblikovana na podoben naˇcin kot zaslonska maska podrobnosti o posameznem izdelku.

9. V primeru prazne koˇsarice uporabnika se ob kliku na ikono voziˇcka v navigacijski vrstici prikazuje razliˇcna zaslonska maska, kot v primeru, da so v koˇsarici izdelki. Na spodnji polovici zaslona je tudi gumb akcije, ki spodbuja uporabnika, da se vrne na domaˇco stran.

10. V primeru dodajanja izdelkov v koˇsarico, se le-ti izpiˇsejo kot vertikalen seznam. Na dnu zaslona se izpiˇse skupen znesek vseh izdelkov, uporabnika pa gumb na dnu zaslona vodi do naslednjega koraka, izvedbe in plaˇcila naroˇcila.

11. V koraku plaˇcila uporabnik vnese vse potrebne podatke o dostavi naroˇcila in podatke o plaˇcilu. Vnosna polja se skladajo z vnosnimi polji na zaslonu registracije in prijave, kar uporabniku pribliˇza obˇcutek domaˇcnosti ter ko- hezivnosti. Gumb na dnu zaslona potrdi vneˇsene podatke in uporabnika pripelje do zadnjega koraka, zahvale za naroˇcilo.

(53)

12. Zaslon zahvale za naroˇcilo krasijo grafiˇcni elementi celostne podobe podjetja, na dnu pa ga ˇcaka gumb za nadaljnje brskanje po izdelkih.

13. S klikom na predzadnjo ikono v navigacijski vrstici aplikacija uporabnika privede do zaslona, kjer je predstavljena vizija podjetja. Tu lahko uporabnik izve pomembne podatke in informacije o podjetju, ki mu razˇsirijo celotno sliko o tem, za kaj se podjetje bori ter kakˇsna so njegova naˇcela. Izve lahko vse od naˇcinov priprave obrokov, okoljevarnosti pri celotnem procesu, do procesa pakiranja. Vsebina korelira z vsebino promocijske broˇsure podjetja, ki je del CGP.

14. Zadnja ikona v navigacijski vrstici, ikona mehanskega koleˇsˇcka, uporabnika pripelje do zaslona nastavitev. Tu lahko uporabnik spremeni podatke o svojem uporabniˇskem raˇcunu. Vnosna polja se po izgledu skladajo z vsemi vnosnimi polji, ki se pojavljajo tekom razliˇcnih zaslonov v aplikaciji.

Slika 4.18: Zaslonske maske vstopnega zaslona, osnovnih informacij in prijave v aplikacijo Planted.

[7]

(54)

Slika 4.19: Zaslonske maske registracije, pozabljenih uporabniˇskih podatkov in osrednjega zaslona aplikacije.

Slika 4.20: Zaslonski maski podrobnosti posameznega obroka in naroˇcnine na obroke ter zaslonska maska prazne koˇsarice.

(55)

Slika 4.21: Zaslonski maski koˇsarice z dodanimi izdelki in vnaˇsanja podatkov za dokonˇcanje naroˇcila ter zaslonska maska zahvale za nakup.

Slika 4.22: Zaslonski maski vizije in naˇcel podjetja ter spreminjanja osnovnih podatkov uporabniˇskega profila.

(56)

(57)

5 Uporabljene tehnologije

Pri procesu oblikovanja celostne grafiˇcne podobe, raˇcunalniˇskih grafik, tiskovin, elementov komuniciranja in spletnih platform ter mobilnih aplikacij se oblikovalci in programerji posluˇzujejo razliˇcnih orodij, s katerimi si pomagajo pri nemote- nemu poteku zastavljenega procesa. Sami smo v procesu oblikovanja uporabili vrsto programske opreme tehnoloˇskega velikana Adobe, kamor spadajo Adobe Illustrator, Adobe Photoshop in Adobe XD, aplikacijo pa smo izdelali s pomoˇcjo integriranega razvojnega okolja Googlovega operacijskega sistema Android Stu- dio.

5.1 Adobe Illustrator

Raˇcunalniˇska grafika spada v dve glavni kategoriji – vektorsko grafiko in rastr- sko grafiko. Razumevanje razlike med obema je v veliko pomoˇc pri jasnem in ustreznem ustvarjanju, urejanju ter uvozu in izvozu umetniˇskih del. [36]

Adobe Illustrator (v nadaljevanju tudi Illustrator) je urejevalnik vektorskih grafik in orodje za oblikovanje oziroma dizajn, ki ga je razvilo ter ga trˇzi podjetje Adobe Inc. Leta 2018 je revija PC Magazine Illustrator ocenila kot najboljˇsi program za urejanje vektorske grafike. [37] Illustrator kot standardna programska oprema za vektorsko grafiko omogoˇca ustvarjanje spletnih in tiskanih grafik, ikon, logotipov, ilustracij, embalaˇze izdelkov ter oglaˇsevalnih panojev. [38]

41

(58)

42 Uporabljene tehnologije

5.1.1 Vektorska grafika

Risalni programi, kot je Illustrator, ustvarjajo vektorsko grafiko, ki je sestavljena iz ˇcrt in krivulj, opredeljenih z matematiˇcnimi objekti, vektorji. Le-te opisujejo grafiko glede na njene geometrijske znaˇcilnosti. Vektorska grafika ni odvisna od loˇcljivosti – mogoˇce jo je prilagoditi na poljubno velikost in natisniti na kateri koli izhodni napravi pri kateri koli loˇcljivosti, ne da bi pri tem izgubila podrobnosti oziroma jasnost. Poslediˇcno je vektorska grafika najboljˇsa izbira za grafiko, ki mora ohraniti jasne krivulje v primeru prilagajanja razliˇcnim velikostim. [36]

5.1.2 Uporabniˇski vmesnik in pogosto uporabljena orodja

Ob zagonu Adobe Illustrator uporabniˇskega vmesnika lahko izbiramo med ustvar- janjem novega dokumenta, uporabo razliˇcnih obstojeˇcih predlog za projekte in med nadaljevanjem z delom na ˇze ustvarjenem dokumentu.

Po vstopu v glavni delovni prostor se le-ta deli na veˇc obmoˇcij, v katerih nastopajo razliˇcne opravilne vrstice.

NADZORNA PLOˇS ˇCA (1)

Nadzorna ploˇsˇca je privzeto zasidrana horizontalno na vrhu delovnega prostora.

Njena vsebina se razlikuje glede na to, katero orodje je v tistem trenutku izbrano.

Omogoˇca hiter in enostaven dostop do nastavitev, brez potrebnega brskanja med spustnimi meniji. Medtem, ko je izbrano doloˇceno orodje, se nadzorna ploˇsˇca uporablja veˇc kot katera koli druga orodna vrstica v celotnem programu.

LEVA ORODNA VRSTICA (2)

Na levi strani zaslona najdemo orodno vrstico. Orodja, ki nastopajo v njej, lahko loˇcimo na nekaj vrst: orodja za ustvarjanje objektov, orodja za upravljanje objektov, orodja za besedila in barvna orodja.

DESNA OPRAVILNA VRSTICA (3)

Na desni strani zaslona najdemo panele, ki razˇsirjajo funkcionalnost in dodajajo ˇstevilne moˇznosti toku dela. Tu najdemo barvne panele, s katerimi spremi- njamo barve objektom, besedilom in predmetom, panele za podrobno urejanje

(59)

5.1 Adobe Illustrator 43

besedil (posameznih znakov ter celotnih odstavkov) in panele za zdruˇzevanje ali odˇstevanje veˇcih objektov.

Slika 5.1: Proces oblikovanja broˇsure v uporabniˇskem vmesniku orodja Adobe Illustrator.

[39]

V okviru praktiˇcnega dela diplomske naloge Adobe Illustrator nastopa v vlogi glavnega orodja pri oblikovanju vseh elementov celostne grafiˇcne podobe in v pomoˇc nekaterim elementom v procesu oblikovanja izgleda mobilne aplikacije.

Najveˇckrat uporabljena orodja so bila orodja za dodajanje in urejanje besedil, krivulj ter oblik, orodja, uporabljena pri urejanju barv in orodja, ki so bila v pomoˇc pri kreiranju razliˇcnih mask na veˇc objektih.

(60)

5.2 Adobe Photoshop

Adobe Photoshop (v nadaljevanju tudi Photoshop) je urejevalnik rastrskih grafik, ki ga je prav tako kot Illustrator razvilo in ga trˇzi podjetje Adobe Inc. Prvotno razvita leta 1988, je programska oprema postala industrijski standard ne le pri urejanju rastrske grafike, temveˇc tudi pri digitalni umetnosti kot celoti. Ime programske opreme je tako postalo generiˇcna blagovna znamka, zaradi ˇcesar se ime orodja uporablja tudi kot glagol v dejavnosti obdelave rastrskih slik. [40]

Photoshop lahko ureja in sestavlja rastrske slike v veˇc plasteh ter podpira maske, alfa sestavljanje in veˇc barvnih modelov, vkljuˇcno z RGB ter s CMYK. Poleg rastrske grafike ima Photoshop omejene zmoˇznosti urejanja ali upodabljanja besedila in vektorske grafike, pa tudi 3D grafike ter videa. Njegov nabor funkcij je mogoˇce razˇsiriti z vtiˇcniki – s programi, razvitimi neodvisno od samega Pho- toshopa, ki pa se izvajajo znotraj njegovega vmesnika in uporabnikom ponujajo nove ali izboljˇsane funkcije. [40]

5.2.1 Rastrska grafika

Rastrska grafika, imenovana tudi bitna slika, je vrsta digitalne slike, ki je sestavljena iz drobnih pravokotnih slikovnih pik ali slikovnih elementov, razporejenih v pravokotno mreˇzo. Ker lahko takˇsen format podpira ˇsiroko paleto barv in prikazuje subtilne graduirane tone, je zelo primeren za prikaz slik neprekinjenega tona, kot so fotografije ali zasenˇcene risbe. [41]

Pri pregledu uporabniˇskega vmesnika orodja Adobe Photoshop lahko opazimo vzporednost z izgledom in razporeditvijo funkcionalnosti uporabniˇskega vmesnika pred tem omenjenega orodja. Uporabniˇski vmesnik je prav tako sestavljen iz zgor- nje kontrolne ploˇsˇce, leve orodne vrstice in desno postavljenih panelov. S takˇsno razporeditvijo, ki ostaja poenotena skozi vsa Adobe-jeva orodja, si v organizaciji prizadevajo za najboljˇso uporabniˇsko izkuˇsnjo in integriran ter nemoten potek

(61)

5.2 Adobe Photoshop 45

dela za vse potencialne uporabnike.

KONTROLNA PLOˇS ˇCA (1)

Kontrolna ploˇsˇca oziroma vrstica je prav tako kot v orodju Illustrator neposredno povezana z levo orodno vrstico. Na njeno vsebino vpliva to, kar je v tistem trenutku izbrano v orodni vrstici.

V levi orodni vrstici se nahajajo vsa Photoshopova orodja. To so orodja za izbiro, urejanje in retuˇsiranje slik, slikanje, dodajanje novih oblik ter besedil na obstojeˇco umetnino in mnoga druga. Ker v Photoshopu obstaja mnogo veˇc orodij, kot jih je videnih na prvi pogled, ima veˇcina vidnih ikon v orodni vrstici na istem mestu vloˇzena ˇse druga orodja.

DESNA ORODNA VRSTICA (3)

Desno v Photoshopovem uporabniˇskem vmesniku se nahajajo paneli. Paneli omogoˇcajo dostop do vseh vrst ukazov in moˇznosti ter razˇsirjajo funkcionalnost orodij. Prav tako kot v Illustratorju poznamo tu razliˇcne panele za barvne spremembe, dodajanje mask, dodajanje in brisanje objektov itd. Najpomembnejˇsi panel izmed vseh je panel slojev. Panel slojev omogoˇca, da dodajamo, briˇsemo in neposredno upravljamo z vsemi sloji naˇsega projekta.

V procesu izdelave celostne grafiˇcne podobe in vseh pripadajoˇcih elementov praktiˇcnega dela diplomske naloge je bil Adobe Photoshop uporabljen v procesu prikaza ustvarjenih oblikovalskih reˇsitev na realistiˇcnih 3D-modelih.

(62)

Slika 5.2: Proces prikaza broˇsure na realistiˇcnem 3D-modelu v uporabniˇskem vmesniku orodja Adobe Photoshop.

5.3 Adobe XD

Adobe XD (v nadaljevanju tudi XD), znan tudi kot Adobe Experience Design, je vektorsko orodje za oblikovanje uporabniˇske izkuˇsnje za spletna mesta in mobilne aplikacije, ki ga je razvilo ter ga trˇzi podjetje Adobe Inc. XD je najmlajˇse orodje izmed vseh omenjenih Adobe-jevih orodij, prvotno je izˇslo leta 2016. Na voljo je za macOS in Windows uporabnike, prav tako pa obstajata tudi razliˇcici za iOS ter Android za neposreden predogled rezultatov dela na mobilnih napravah. XD podpira ˇziˇcno ogrodje spletnega mesta oziroma mobilne aplikacije in omogoˇca ustvarjanje prototipov z dejanskim pomikanjem s pomoˇcjo klikov. [42]

Z XD se lahko proces oblikovanja poenostavi do te mere, da se z enim klikom poveˇze vse zaslonske maske, doloˇcijo se uporabniˇski tokovi, dodajo se prehodi in

(63)

5.3 Adobe XD 47

animacije, z orodjem pa se enostavno doloˇcijo tudi mikro interakcije za vse vrste uporabniˇskih vnosov, kot so dotiki, glasovni ukazi ter bliˇznjice na tipkovnici. [43]

Pri zagonu XD uporabniˇskega vmesnika nas pozdravi zaˇcetno okno, v katerem si izberemo velikost oziroma dimenzije zaslona, za katerega ˇzelimo oblikovati prototip aplikacije. V primeru, da smo projekt ˇze ustvarili, ga preprosto izberemo med ponujenimi zadnjimi odprtimi datotekami.

Glavni delovni prostor XD je precej minimalistiˇcen, pa vendarle zelo funkcio- nalen. Omogoˇca, da le z nekaj kliki izvedemo najpogostejˇsa dejanja. Sestavljen je iz treh glavnih podroˇcij, pomembnih za ustvarjanje:

HORIZONTALNA ORODNA VRSTICA (1)

V zgornjem levem kotu horizontalne orodne vrstice se nahaja stikalo, s pomoˇcjo katerega lahko izbiramo med okni ^≫Design^≪, ^≫Prototype^≪in^≫Share^≪. V naˇcinu oblikovanja upravljamo z izgledom oziroma vizualno platjo naˇsega projekta. V naˇcinu prototipiranja strani oziroma zaslonske maske projekta povezujemo v in- teraktivni prototip in jih z njegovo pomoˇcjo oˇzivimo. V naˇcinu skupne rabe pa imamo moˇznost deljenja svojega projekta s strankami in z zainteresiranimi, s strani katerih lahko neposredno dobimo povratne informacije za konkretne iz- boljˇsave. V desnem delu horizontalne orodne vrstice se ob kliku na prvo ikono nahaja moˇznost sodelovanja v realnem ˇcasu. Ikona zraven omogoˇca funkcijo predogleda v realnem ˇcasu v mobilni napravi, v primeru, da je ta povezana z raˇcunalnikom, na katerem gradimo projekt. Sledi ikona za predogled prototipa neposredno v napravi, v kateri oblikujemo prototip.

V levi orodni vrstici so zloˇzena vsa glavna orodja, ki jih uporabljamo pri oblikovanju vmesnika. Odloˇcamo se lahko med razliˇcnimi orodji, s katerimi lahko ustvarjamo poljubne oblike, linije, poligone in besedilne vstavke. Poleg tega so na dnu orodne vrstice po vrsti zloˇzene bliˇznjica za dostop do vseh virov projekta, ki jih uvaˇzamo naknadno (vektorske in rastrske grafike, barvne palete, itd.), bliˇznjica do vseh zaslonskih mask projekta ter njegovih pripadajoˇcih kom-

(64)

ponent in bliˇznjica za dostop do vseh razˇsiritev orodja Adobe XD, ki jih lahko uporabimo pri razliˇcnih korakih razvoja prototipa.

DESNA ORODNA VRSTICA (3)

Desna orodna vrstica oziroma ploˇsˇca se aktivira ob izbiri doloˇcenega objekta na zaslonskih maskah projekta. Na tem mestu najdemo veˇc nastavitev, ki spremi- njajo lastnosti in izgled izbrane komponente. Najveˇckrat uporabljena so orodja za levo, desno ali sredinsko poravnavo objekta, orodja za poveˇcavo oziroma spre- membo velikosti in pozicije objekta, orodja za oblikovanje besedila, orodja za odzivno postavitev ter mnoga druga.

Slika 5.3: Proces izdelave zaslonskih mask in prototipa aplikacije v uporabniˇskem vmesniku orodja Adobe XD.

[39]

S pomoˇcjo orodja Adobe XD smo v procesu oblikovalske reˇsitve ustvarili ˇ

ziˇcnati model in izgled vseh pripadajoˇcih zaslonov, potrebnih za najboljˇso upo- rabniˇsko izkuˇsnjo. Pri procesu so bili najveˇckrat uporabljeni orodje za dodajanje

(65)

5.4 Android Studio 49

in urejanje besedil, orodje za dodajanje grafiˇcnih elementov ter oblik, orodje za vertikalno in horizontalno pomikanje po zaslonu ter orodje, ki omogoˇca razliˇcno obnaˇsanje komponent v razliˇcnih stanjih in situacijah. Tu gre predvsem za animacije gumbov in besedil z moˇznostjo klika. Prav tako je orodje omogoˇcilo, da smo zaslonske maske povezali v prototip, ki smo ga lahko preizkusili ˇse pred pre- nosom v razvojno okolje in na podlagi konkretnih povratnih informacij izgled le-teh izboljˇsali ter prilagodili za najboljˇso uporabniˇsko izkuˇsnjo.

5.4 Android Studio

Android Studio je uradno integrirano razvojno okolje (IDE, op. a.) za Googlov operacijski sistem Android, zgrajeno posebej za razvoj Android aplikacij. Prva stabilna razliˇcica je izˇsla leta 2014.

Vse do leta 2019 je bila Java prednostni jezik za razvoj Android aplikacij v razvojnem okolju Android Studio, nakar jo je zamenjal programski jezik Kotlin.

Java je dandanes ˇse vedno podprta kot ena izmed moˇznosti pri razvoju, prav tako programski jezik C++. [44] Poleg zmogljivega orodja za razvijanje kode in ostalih orodij za razvijalce ponuja Android Studio ˇse veˇc funkcij, ki dodajo k produktivnosti pri razvoju ter ustvarjanju aplikacij za Android, kot so hiter in s funkcijami bogat emulator, s pomoˇcjo katerega je mogoˇce nadzirati izvajanje ter izgled aplikacije tekom procesa izdelave, enotno okolje, kjer je omogoˇceno razvijanje za vse naprave Android ali pa kodne predloge in moˇznost integriranja storitev, ki so v pomoˇc pri uvaˇzanju vzorˇcne kode. [45]

5.4.1 Struktura projekta

Projekt v Android Studiu zajema vse, kar definira delovni prostor za izgradnjo aplikacije, od izvorne kode in zunanjih virov, do testne kode ter konfiguracij za gradnjo aplikacije. Ob zagonu novega projekta Android Studio samodejno ustvari potrebno strukturo za vse pripadajoˇce datoteke, ki so strnjene v levo pro- jektno okno. Projekt ima lahko enega ali veˇc zbirk izvornih datotek in nastavitev izgradnje – modulov. Le-ti omogoˇcajo, da se projekt razdeli na loˇcene enote

(66)

funkcionalnosti. [46]

Vse projektne datoteke so v orodju Android Studio organizirane po modulih in vrstah datotek, s ˇcimer se poenostavi navigacija med kljuˇcnimi izvornimi datotekami projekta. V vsakem modulu Android aplikacije so datoteke prikazane v treh skupinah: prva vsebuje datoteko o manifestaciji same aplikacije, druga vse datoteke izvorne kode v programskem jeziku Java (oziroma Kotlin ali C++), tretja pa vse vire, ki niso koda – sem spadajo bitne in vektorske slike, tipografija ter XML postavitve, ki doloˇcajo izgled same aplikacije. [46]

Ob zagonu uporabniˇskega vmesnika Android Studio nas na pozdravnem oknu ˇcaka moˇznost izbire ˇze obstojeˇcih, nedavno odprtih dokumentov in moˇznost ustvarja- nja novega projekta, pri katerem izberemo nekaj kljuˇcnih nastavitev, kot so vrsta naprave, za katero razvijamo aplikacijo ter izbira programskega jezika, v katerem ˇ

zelimo razvijati aplikacijsko kodo.

Osrednji delovni prostor Android Studia se deli na veˇc oken in orodnih vrstic:

ORODNA VRSTICA (1)

Zgornja orodna vrstica omogoˇca izvajanje ˇsirokega nabora dejanj, vkljuˇcno z zagonom aplikacije in zagonom orodij za Android.

NAVIGACIJSKA VRSTICA (2)

Navigacijska vrstica je vrstica pod glavno orodno vrstico, ki pomaga pri odpiranju datotek in krmiljenju po mapah projekta. Zagotavlja bolj kompakten pogled na strukturo, ki je odprta in vidna v oknu projekta.

OKNO UREJEVALNIKA (3)

V oknu urejevalnika odpiramo in urejamo programsko kodo, prav tako pa tudi vse druge datoteke ter vire trenutnega projekta. Urejevalnik se lahko spremeni glede na vrsto odprte datoteke.

OKENSKA VRSTICA (4)

Okenska vrstica z orodji poteka po najbolj zunanjem pasu celotnega grafiˇcnega

(67)

5.4 Android Studio 51

vmesnika Android Studia. Vsebuje gumbe, ki omogoˇcajo razˇsiritev ali strnitev posameznih oken orodij, oziroma preklapljanje med le-temi.

OKNA Z ORODJI (5)

Okna z orodji omogoˇcajo dostop do razliˇcnih nalog, kot so upravljanje projektov, iskanje datotek in nadzor razliˇcic. Android Studio med potekom dela sledi kon- tekstom in samodejno prikazuje ustrezna okna orodij. Najpogosteje uporabljena okna so pripeta na okensko vrstico na robovih uporabniˇskega vmesnika. V to skupino spadajo orodja za pogon aplikacije, razhroˇsˇcevanje aplikacije, terminalno okno, okno projektnih datotek in mnoga druga.

VRSTICA STANJA (6)

Pomembna vrstica stanja prikazuje stanje projekta in vsa opozorila ter sporoˇcila, povezana z zagonom in izgradnjo aplikacije.

Slika 5.4: Struktura projekta v uporabniˇskem vmesniku orodja Android Studio.

[47]

(68)

Slika 5.5: Virtualni pogon aplikacije v emulatorju.

V razvojnem okolju Android Studio smo v procesu izdelave aplikacijske reˇsitve obravnavanega problema ustvarili ˇze delujoˇco aplikacijo. Uporabili smo veˇcino orodij, ki so na voljo v samem vmesniku, v procesu izdelave pa smo njeno aktiv- nost spremljali v virtualnem emulatorju. Aplikacija deluje na mobilnih napravah z operacijskim sistemom Android. Vsa aplikacijska logika deluje na osnovi programskega jezika Java, izgled pa je bil poustvarjen iz konkretnega prototipa, ki je bil pred tem razvit v orodju Adobe XD. Aplikacija vsebuje razliˇcne aktivno- sti, kot so prijava in registracija uporabnika, nastavitve uporabniˇskih raˇcunov ter spreminjanje podatkov, brskanje med izdelki, dodajanje izdelkov v koˇsarico in potrditev nakupa ter njegovo plaˇcilo.

(69)

6 Implementacija reˇ sitve

6.1 Uporabniˇ ska izkuˇ snja

Uporabniki hitro ocenijo uporabniˇske vmesnike. Ne zanima jih toliko njihov dizajn, ampak preprostost in uˇcinkovitost za doseganje nalog ter ciljev, ki jih lahko opravijo z aplikacijo. Potrebno je torej razumevanje konteksta in tok opravil uporabnikov ter s tem prilagoditi uporabniˇski vmesnik za nemoteno uporabniˇsko izkuˇsnjo. [35]

Pri oblikovanju impresivnih grafiˇcnih vmesnikov moramo za najboljˇso upo- rabniˇsko izkuˇsnjo upoˇstevati nekaj smernic. Veˇcina oblikovalcev pri ustvarjanju uporabniˇskih vmesnikov za doseganje ˇzelenih rezultatov sledi doloˇcenim naˇcelom.

Poleg vidika samega oblikovanja grafiˇcnega vmesnika, ki se mora skladati s celostno grafiˇcno podobo podjetja, je pri oblikovanju potrebno upoˇstevati tudi naˇcela ustrezne uporabniˇske izkuˇsnje. Veˇcina predstavljenih naˇcel velja za vse inte- raktivne sisteme – tradicionalna okolja grafiˇcnih vmesnikov, kot so namizne in mobilne aplikacije ter spletna mesta, pa tudi recimo za glasovne interakcijske sisteme. [48]

1. UPORABNIK NAJ IMA NADZOR NAD VMESNIKOM [48]

Dobri uporabniˇski vmesniki uporabnikom vlivajo obˇcutek nadzora. Ob- vladovanje uporabnikom omogoˇca udobje – na tak naˇcin se uporabniˇskega vmesnika hitreje nauˇcijo in pridobijo obˇcutek obvladovanja.

Vmesnik mora biti enostaven za krmarjenje. Navigacija mora biti vedno jasna in samoumevna, do te mere, da uporabnik uˇziva v njegovem razi- skovanju. Dober uporabniˇski vmesnik postavlja uporabnike v cono udobja 53