Univerza v Ljubljani
Fakulteta za elektrotehniko
AMADEJA ARBEITER
IZDELAVA SPLETNE STRANI IN CELOSTNE GRAFIČNE PODOBE
PODJETJA
Diplomsko delo
Visokošolski strokovni študijski program prve stopnje Multimedijske komunikacije
Mentor: izr. prof. dr. Narvika Bovcon
Ljubljana, 2021
Zahvala
Zahvaljujem se mentorici, izr. prof. dr. Narviki Bovcon, za pomoč in strokovno vodenje ter potrpljenje med pisanjem diplomske naloge.
Zahvaljujem se vsem svojim družinskim članom za potrpežljivost in razumevanje v času študija in pisanja diplomske naloge.
Vsebina
1 Uvod 1
2 Teoretični del 3
2.1 Spletna stran ... 3
2.2 Orodje za izdelavo spletne strani ... 4
2.2.1 Kaj je Squarespace? ... 4
2.3 Celostna grafična podoba ... 6
2.3.1 Simbol ali logotip podjetja ... 6
2.3.2 Slogan ... 6
2.3.3 Tipografija ... 7
2.3.4 Barve ... 8
3 Izvedba 11 3.1 Oblikovanje spletne strani ... 11
3.1.1 Prvi korak: Izbor teme ... 11
3.1.2 Drugi korak: Vpis v Squarespace ... 11
3.1.3 Tretji korak: Uvod uporabe Squarespace ... 12
3.1.4 Četrti korak: Oblikovanje strani ... 13
3.2 Celostna grafična podoba ... 34
3.2.1 Logotip ... 34
3.2.2 Barve ... 35
3.2.3 Tipografija ... 35
3.2.4 Vizitka ... 36
3.2.5 Poslovne tiskovine ... 37
3.2.6 Elektronski podpis ... 38
3.2.7 Napisi na vozilu ... 38
4 Primerjava 41
5 Zaključek 45
6 Literatura 47
Kazalo slik
Slika 2.1: Jezik črkovnih oblik 7
Slika 2.2: Družina pisave Arial 8
Slika 2.3: Subtraktivno in aditivno mešanje barv 9
Slika 2.4: Vpliv barve na tržišču 10
Slika 3.1 Vmesnik, preko katerega se registriramo 12
Slika 3.2: Skrbniška stran Squarespacea 13
Slika 3.3: Uvodna stran Studio Amadeus 15
Slika 3.4: Prikaz ozadja za posamično kategorijo 15
Slika 3.5: Okence z osnovnimi predlogami 16
Slika 3.6: Okence z dodatnimi predlogami 16
Slika 3.7: Možnosti obdelave besedila 17
Slika 3.8: Sklopi strani Fotografija 18
Slika 3.9: Okence za obdelavo galerije 19
Slika 3.10: Primer galerije 19
Slika 3.12: Možnosti za oblikovanje slik 20
Slika 3.13: Okence za oblikovanje video posnetkov 21
Slika 3.14: Vsebina videa 21
Slika 3.15: Stran Video produkcija 22
Slika 3.16 Okence za urejanje posamičnega sklopa 23
Slika 3.17: Stran Tiskanje 24
Slika 3.18: Stran Grafično oblikovanje 26
Slika 3.19: Stran Cenik 28
Slika 3.20: Stran Kontakt 29
Slika 3.21: Glava spletne strani 30
Slika 3.22 Možnosti obdelave glave 31
Slika 3.23: Noga spletne strani 32
Slika 3.24: Logotip Studio Amadeus 34
Slika 3.25 Barve podjetja 35
Slika 3.26: Tipografija podjetja 36
Slika 3.27: Vizitka 37
Slika 3.28: Dopisni list in pisemske ovojnice 38
Slika 3.29: Elektronski podpis 38
Slika 3.30: Kombi podjetja 39
Slika 4.1: Lestvica graditeljev spletnih strani [10] 41
Povzetek
V teoretičnem delu diplome obravnavam teorijo spletnih strani, raziščem, kakšno vlogo in vpliv imajo le-te na stranke, prav tako pa predstavim celostno grafično podobo podjetja, njeno vloga in ključne lastnosti, kot so logotip, barve, tipografija ipd.
V empiričnem delu je cilj in namen diplomskega dela izdelava spletne strani za podjetje Studio Amadeus, ki se ukvarja predvsem s fotografijo, video produkcijo in z grafičnim oblikovanjem, in sicer s pomočjo graditelja spletnih strani Squarespace. Ker sproti analiziram rabo Squarespacea, izdelavo spletne strani obravnavam po naslednjih korakih: izbor teme, vpis v Squarespace, uvod rabe Squarespace in oblikovanje spletne strani. Prav tako pa zanje izdelati celostno grafično podobo podjetja po postavkah:
izdelava logotipa, izbrane barve in tipografija, vizitka, poslovne tiskovine, elektronski podpis in napis na vozilu.
Za izdelovanje celostne grafične podobe sem uporabila Adobova programa, in sicer InDesign in Illustrator, ter graditelja spletnih strani Squarespace za oblikovanje spletne strani. Za Squarespace sem se odločila, ker se na socialnih omrežjih vedno bolj promovira graditelje spletnih strani in slednje postaja najbolj popularno orodje za manjša podjetja, blogarje idr. v nasprotju s klasičnim razvijanjem spletnih strani. Nato na kratko primerjam tudi razliko med graditeljem in razvijalcem spletnih strani ter ugotavljam njune prednosti in slabosti, in sicer po naslednjih dejavnikih: čas izdelave, cena, videz, tehnična podpora.
Ključne besede: izdelava spletne strani, graditelji spletnih strani, Squarespace, celostna grafična podoba, oblikovanje.
Abstract
In the theoretical part of the diploma thesis, I discuss the theory of websites and their role and influence on customers as well as their corporate identity, its role, and key features such as logotype, colors, typography, etc.
The empirical part was based on the purpose and final goal to create a website for the company Studio Amadeus, which mainly deals with photography, video production, and graphic design through the assistance of the Squarespace website builder. While simultaneously analyzing the use of Squarespace, I also determine the creation of a website through the following steps: a selection of topic, entry in Squarespace, the introduction of the use of Squarespace, and website design. We also create a complete graphic image of the company based on the following items of interest: logotype production, selected colors and typography, business card, printed business material, electronic signature and inscriptions on the business vehicle.
I used Adobe's programs InDesign and Illustrator and the Squarespace website builder to create a complete corporate graphic image. I chose Squarespace because website builders are being increasingly promoted on social media, thus becoming the most popular tool for smaller businesses, bloggers and others, as opposed to classic website development. Finally, I briefly compare the difference between a website builder and a website developer and identify their advantages and disadvantages, according to the following factors: production time, price, appearance, technical support.
Keywords: website design, website builders, Squarespace, corporate identity, design
1 Uvod
V diplomskem delu sem izdelala spletno stran za podjetje Studio Amadeus s pomočjo Squarespace. Squarespace je popularen graditelj spletnih strani in je primeren za vsa manjša podjetja, ki nimajo veliko denarja za najem profesionalnega programerja, si pa želijo imeti lepo in preprosto spletno stran. Poleg spletne strani je namen še izdelava priročnika celostne grafične podobe podjetja. Celostna grafična podoba je skupek elementov, idej, metod in tehnik, ki jih podjetje uporabi, da vzpostavi lastno identiteto in se na ta način loči od konkurence. »Močna« celostna grafična podoba spodbuja prepoznavnost podjetja in njegovih storitev med vsemi njegovimi potencialnimi strankami. Za konec primerjam graditelje spletnih strani z razvijalcem spletnih strani ter podam njihove dobre in slabe lastnosti.
2 Teoretični del
2.1 Spletna stran
Spletna stran je v računalništvu dokument z besedilom, ki ga prikaže spletni brskalnik. Na spletni strani so lahko različne vsebine: besedilo, slike, povezave, zvočni in video posnetki, programi. Struktura spletne strani se sestavi s kodo HTML, ki pa ni programski jezik, temveč opisni jezik. Več spletnih strani oblikuje spletišče. Na spletu jo predstavlja domena (spletni naslov). Lahko se uporabijo tako za osebno rabo kot tudi za predstavitev podjetja, izdelka, storitve itd. Pri ustvarjanju spletne strani je treba najprej definirati namen spletne strani, določiti ciljno publiko, izdelati vsebino in nato vse to grafično in programsko sestaviti, da nastane skupek strani, ki so funkcionalno povezane med seboj in se nahajajo na istem spletnem mestu, pod isto domeno. Namen spletne strani je predstavitev dejavnosti organizacij. Za čim višje število ogledov strani je treba veliko časa nameniti izgledu spletne strani in redno skrbeti, da je vedno posodobljena. Za izdelavo spletnih strani so potrebni posebni programi, kot so PHP, JavaScript, Jquery, CSS idr. Prav tako obstajajo brezplačni graditelji spletnih strani, kjer se lahko na njihovi strani izdela spletna stran. Prednosti tovrstne izdelave so, da je izdelovanje dokaj enostavno in se ga lahko loti skoraj vsak. [2]
Spletna stran poveča kredibilnost in prepoznavnost podjetju. V današnjem času večina ljudi pred nakupom izdelka ali storitve podjetje preveri na spletu. Poleg tega pa vlada velik delež nezaupanja v podjetja, ki imajo slabo izdelano spletno stran ali je sploh nimajo. S pomočjo dobro izdelane spletne strani obiskovalce in stranke privabimo k nadaljnjim obiskom oziroma nakupom. Spletna stran je dober vir za stranke. Poleg osnovnih informacij o podjetju (delovni čas, kontaktni podatki, ponudba itd.) lahko spletna stran potencialnim kupcem omogoča dostop do uporabnih
informacij, nasvetov in pozitivnih izkušenj drugih kupcev, ponudbe artiklov ali storitev, informacij o novostih, spremembah, akcijah, ugodnostih. Vse to ljudi prepriča, da se bodo vračali na spletno stran in na njej tudi kupovali. [3]
2.2 Orodje za izdelavo spletne strani
Squarespace je ena izmed priljubljenih platform za postavitev spletne strani. Gre za spletno orodje, s pomočjo katerega je postavitev strani hitra in enostavna, še posebej pa navdušuje dejstvo, da od uporabnika ne zahteva znanja oblikovanja in programiranja. Praktično vse se lahko uredi z izbiro predpripravljene grafične predloge in uporabo tako imenovane »potegni in izpusti« funkcionalnosti.
2.2.1 Kaj je Squarespace?
Squarespace je danes eden vodilnih graditeljev spletnih strani in platform za upravljanje vsebin na trgu. Primeren je za vse vrste uporabnikov: od začetnikov, ki imajo znanje brez kodiranja, do izkušenih razvijalcev programske opreme.
Squarespace deluje kot uporabniški IT-oddelek, ki je sposoben zagotoviti celotno paleto rešitev za oblikovanje in podporo, da ustvari popolnoma delujočo in profesionalno oblikovano spletno stran. Aprila 2003 ga je ustanovil Anthony Casalene.
Sedež ima v New Yorku, ZDA, in ima trenutno od 500 do 1.000 zaposlenih. Podjetje je že prejelo štiri priznanja The Webby Awards, vključno za spletne storitve in aplikacije, najboljši vizualni dizajn, estetiko ter za najboljšo domačo stran – stran dobrodošlice v letu 2004. Medtem ko je Squarespace narejen za vse vrste uporabnikov, je posebej primeren za tiste, ki želijo eleganten in sodoben videz svoje spletne strani, spletnega dnevnika ali spletne trgovine. Ponuja se kot orodje za izgradnjo spletnih strani o življenjskem slogu in se močno osredotoča na spletno estetiko. Namenjena je življenjskim blogerjem, fotografom, umetnikom, glasbenikom, gurmanskim restavracijam, načrtovalcem porok in tržnikom. Poleg lastnih funkcij omogoča Squarespace uporabnikom razširiti moč svojega spletnega mesta s pomočjo integracij, ki zajemajo širok spekter programske opreme, kot so analitika, računovodstvo in zaračunavanje storitev, domene, trženje, optimizacija SEO, e-trgovina in socialne storitve. [4]
Teoretični del
Podjetja lahko začnejo ustvarjati svojo spletno stran na trgu Squarespace v treh preprostih korakih: najprej izberemo predlogo, nato zaženemo brezplačno preskusno različico in pridobimo brezplačno domeno. Za začetek je treba obiskati stran Squarespace.com, kjer kliknemo gumb »Začni«. Nato izberemo predlogo, ki najbolje ustreza našemu podjetju in nam je vizualno všeč. Številno izbiro predlogov zmanjšamo tako, da izberemo eno od priporočil Squarespacea, na primer predloge za podjetja, trgovine in restavracije ter portfelje za fotografe, oblikovalce in druge kreativce. Po izbiri predloge lahko vidimo, kako spletna stran dejansko deluje v akciji tako, da kliknemo »Predogled v živo«. Brezplačno preskusno različico začnemo, ko izberemo predlogo in kliknemo »Začni« s to zasnovo, da začnemo graditi svoje spletno mesto.
Nato Squarespace poziva k ustvarjanju brezplačnega računa z vnosom imena, priimka, e-poštnega naslova in gesla. Ko ustvarimo račun, Squarespace prikaže kratek uvodni video o osnovah uporabe storitve. Naša predloga se bo kot vzorčna vsebina naložila kot predogled v živo. V spodnjem levem kotu lahko izberemo, da pripravimo stran natanko tako, kot deluje predloga, ali pa jo odstranimo, da začnemo od začetka. Čeprav je ustvarjanje različnih delov spletne strani odvisno od predloge in vrst vsebine, je splošna ideja vedno enaka. Strani dodamo z navigacijsko ploščo na levi, elemente pa z gumbi v zgornjem desnem kotu. Če želimo urejati elemente, jih preprosto kliknemo, da spremenimo vsebino. Za predogled spletne strani kliknemo puščico v zgornjem desnem kotu. Na isti plošči so tudi orodja za upravljanje spletne strani, kjer lahko urejamo naslov spletne strani, si ogledamo statistiko obiskovalcev, konfiguriramo napredne nastavitve za spletno stran, e-trgovine in še več. Ko smo pripravljeni na objavo, kliknemo gumb »Nadgradi zdaj«, s čimer si zagotovimo domeno po meri Squarespace z enim od naslednjih servisnih paketov; na voljo so standardni, neomejen in posel. Vsak paket storitev ima tudi mobilno spletno stran in podporo 24 ur na dan ter nasvete za uporabo Squarespace. Da bi podjetjem pomagali pri začetku, je ekipa Squarespace ponudila nasvete, kako kar najbolje izkoristiti uporabo storitve in izdelavo spletne strani za rast podjetja na spletu. Squarespace ponuja še analitiko, SEO, e-trgovino, domene po meri in integracije socialnih medijev. [6]
2.3 Celostna grafična podoba
Celostna grafična podoba je celotna vizualna podoba podjetja. Sestavljena je iz različnih elementov, ki dajejo podjetju večjo prepoznavnost in lastno identiteto. Zaradi svoje celostne podobe deluje takšno podjetje profesionalno in ugledno, stranke pa običajno takšnim podjetjem bolj zaupamo. K celostni grafični podobi spadajo vsi vizualni elementi, ki predstavljajo podjetje, npr. logotip (v različnih velikostih, oblikah, barvnih kombinacijah), barvna shema podjetja, tipografija, spletna stran, slogan podjetja, vizitka, dokumenti (računi, dopisi, navodila, MS predloga, kuverte ipd.), grafični elementi (npr. maskota, prepoznavni liki), marketinški plakati, letaki, zloženke, žig, e-poštni podpis, reklamni materiali (majice, kape, skodelice, svinčniki, koledarji, bloki idr.) ter napisi na vozilih. Celostna grafična podoba je priporočljiva za vsa podjetja (mala in velika), ki se želijo predstaviti kot urejena celota in biti na tržišču prepoznavna, pa tudi za samostojne podjetnike, blogerje, organizacije, društva itd. [1]
2.3.1 Simbol ali logotip podjetja
Simbol podjetja je najosnovnejša stalnica celostne grafične podobe. Glede na ostale likovne elemente, ki so razporejeni po likovnem ozadju, vzbuja največ pozornosti. Naučeni smo, da ga priznavamo kot glavnega predstavnika realne identitete podjetja na simbolni ravni. Pri likovnih in barvnih strukturah simbola naj bi grafični oblikovalec upošteval pomene, ki reprezentirajo poslanstvo, moč, filozofijo, cilje in kulturo organizacije. [7]
Oblikovanje logotipov izvira iz zgodovinskega prevoda »identitetnih« oznak, ki so bile povezane s komercialno uporabo za znamčenje podjetij ali organizacij, prav tako pa tudi za oznako oseb, plemiških ali kulturnih družb. [8]
2.3.2 Slogan
Med stalnicami celostne grafične podobe se pogosto pojavi slogan. Uteleša fiziologijo organizacije, generalno obljubo, ki jo daje podjetje svojim strankam.
Slogan je na nek način opisni del osnovnih stalnic celostne grafične podobe, ki lahko pripomore, da je osnovno sporočilo imena in logotipa podjetja še bolj nedvoumno in enopomensko. Slogan je kratek stavek, ki kriči po pozornosti. Njegova odlika je v tem, da si ga kupci hitro in enostavno zapomnijo, s tem pa si zapomnijo tudi podjetje.
Teoretični del
Raziskave kažejo, da so mnogo bolj učinkoviti slogani, ki vsebujejo specifične, konkretne obljube, kot pa slogani, ki so splošni in bi se lahko nanašali na karkoli. [7]
2.3.3 Tipografija
Tipografija je postopek urejanja črk, besed in besedila za skoraj vsak kontekst, ki si ga lahko izmislimo. Tipografija je vizualna manifestacija jezika, ki uporablja vse njegove izraze in praktične lastnosti in se nahaja med umetnostjo in znanostjo.
Vključuje tudi praktično postavljanje črk, ki morajo biti berljive in morajo ustrezno sporočati informacije. Poznavanje osnovne strukture črkovnih oblik je bistveno za razumevanje, kako se črkovne vrste razlikujejo, kar omogoča oblikovalcu, da se lažje odloči za eno od številnih črkovnih vrst, ki so na voljo. [8]
Slika 2.1: Jezik črkovnih oblik
Črke so osnova tipografskega oblikovanja. Različne črke kot fonetični simboli sestavljajo abecedo. Vsaka črka ima veliko pojavnosti, ki so se ustvarjale skozi zgodovino. Vsaka pojavnost posamezne črke ima samosvoj značaj, ki ga oblikujejo značilnosti, kot prikazuje slika 1. [7]
Pisave imajo navadno več slogov in rezov. Največkrat se različice ločijo po debelini črte. Nabor znakov ene pisave in ene velikosti imenujemo font. Priporočeno je, da se za uporabo omejimo na dve ali največ tri tipografske družine, saj nam ostanejo še vse različice znotraj teh družin. Primer zato je navadna pisava za besedilo in krepka za naslove. [9]
Slika 2.2: Družina pisave Arial
2.3.4 Barve
Razumevanje barv je ena od bistvenih spretnosti, ki jih mora obvladovati oblikovalec. Uporabi se lahko več tisoč različnih barv in jih lahko kombiniramo na več nešteto načinov, v številnih medijih, od tiskovin do zaslonov. Barve razlikujemo na tri lastnosti: barvitost (barvni ton), ton (svetlost) in nasičenost. Barvitost se nanaša na generično ime barve, na primer rdeča. En barvni ton ima veliko variacij, od svetlih do temnih odtenkov. Odtenki pa imajo tudi različno nasičenost ali jakost. Barve lahko opišemo tudi glede na toplo-hladni kontrast in gibanje – na primer hladne barve so videti bolj oddaljene kot pa tople barve. Komplementarne barve, kot sta zelena in rdeča, si ležijo v barvnem krogu nasproti drug od drugega, medtem ko so analogne barve sosednje. [8]
Za razumevanje delovanja barv moramo upoštevati, da barvna svetloba (RGB) in barvni nanos (CMYK) na papirju ne delujeta enako. Pri tiskanju se uporabljajo osnovne tiskarske barve sistema CMKY: Cian – cian modra, Magenta – škrlatno rdeča, Yellow – rumena in Key – črna. Z mešanjem osnovnih barv lahko dobimo črno, kar imenujemo odštevalno ali subtraktivno mešanje barv. Za prikazovanje na zaslonu uporabljamo osnovne barve svetlobe v sistemu RGB: Red – rdeča, Green – zelena in Blue – modra. Z združitvijo svetlobnih virov v osnovnih barvah dobimo belo svetlobo, to imenujemo seštevalno ali aditivno mešanje barv. [8]
Teoretični del
Slika 2.3: Subtraktivno in aditivno mešanje barv
Barve vzbujajo različne asociacije, občutke in pomene, odvisno od barvnega tona, svetlobe in čistosti. V literaturi je veliko napisanega o asociacijah, doživljanjih, pomenih, ki jih vzbujajo določene barve. [7] V marketingu imajo barve naslednji pomen:
• rdeča – strast, vzburjanje in intenzivnost,
• oranžna – ustvarjalnost in zabava,
• rumena – optimizem in veselje,
• vijolična – sočutnost, nežnost in občutljivost,
• modra – zaupanje, zaščita in modrost,
• zelena – zdravje in narava,
• siva – nevtralnost in mir,
• črna – prefinjenost in preprostost.
Slika 2.4: Vpliv barve na tržišču
3 Izvedba
Podjetje, za katero sem izdelala spletno stran in celostno grafično podobo, je Studio Amadeus. To podjetje se ukvarja s fotografijo, video produkcijo, grafičnim oblikovanjem ter tiskanjem fotografij.
3.1 Oblikovanje spletne strani
Spletna stran za podjetje Studio Amadeus je precej minimalistična, pri čemer velja poudarek na fotografijah in ne na besedilu.
Za začetek izdelovanja spletne strani v brskalnik vpišemo URL-naslov www.squarespace.com, prikaže se nam uvodna stran.
3.1.1 Prvi korak: Izbor teme
Po ogledu uvodne strani kliknemo gumb »Začni«, kar nas popelje na velik nabor predlog, kjer si jih lahko ogledamo ali izberemo za svojo spletno stran. Za lažje brskanje med predlogami nam Squarespace ponuja naslednje kategorije: popularni modeli, portfelji, fotografiranje, spletna trgovina, blogi in pododdaje (podcasti), strokovne storitve, lokalno podjetje, skupnosti in neprofitne organizacije, dogodki, poroke, zabava, članstva, restavracije, osebni in CV, nepremičnine in strani za zagon.
Za spletno stran Studio Amadeus sem temo izbrala pod kategorijo fotografiranje.
3.1.2 Drugi korak: Vpis v Squarespace
Pred začetkom izdelave strani je potreben vpis. Vpis se nam pojavi po izbiri predloge za predelavo. Vpišemo se lahko z Googlovim računom ali katerim drugim;
če se vpišemo z drugim računom, stran od nas zahteva ime, priimek, e-pošto in geslo za vpis. Z Googlovim računom lahko kliknemo na svoj Googlov račun in nas sistem že kar takoj spusti naprej.
Slika 3.1 Vmesnik, preko katerega se registriramo
3.1.3 Tretji korak: Uvod uporabe Squarespace
Po vpisu imamo kratek uvod, kako uporabiti graditelja spletne strani. Najprej nas vpraša, kako bi želeli imenovati spletno stran; nato razloži, kako lahko začnemo dodajati, urejati in odstraniti besedilo ali slike z gumbom uredi. V skrbniškem delu nam pokaže, kako dodamo ali odstranimo strani ter kako jih lahko postavimo.
Pokaže nam tudi, kako lahko oblikujemo edinstven videz z izbiro pisave in barvne sheme strani. A to so le osnovni koraki k začetku ustvarjanja spletne strani.
Squarespace ponuja mnogo raznih elementov za oblikovanje strani, nekaj osnovnih elementov je naslednjih: Strani, Oblikovanje, Trgovina, Trženje, Načrtovanje, Analitika, Profili, Nastavitve, Pomoč.
Izvedba
Slika 3.2: Skrbniška stran Squarespacea
3.1.4 Četrti korak: Oblikovanje strani
Dodajanje strani in s tem ustvarjanje naše vsebine ni zapleteno. V skrbniškem delu poiščemo in kliknemo na »Strani« – slednje nas popelje na stran za dodajanje strani in urejanje. »Strani« so razdeljene na dva dela, in sicer vidni in nevidni del. Vse strani, ki spadajo pod vidni del, se pojavijo v meniju spletne strani; tukaj je pomemben vrstni red strani, saj nočemo imeti nesmiselnega menija. Nevidni del se v meniju ne pojavlja, lahko pa ga s povezavo vključimo v spletno stran z raznimi načini, kot so gumbi in slike; pri tem vrstni red ni pomemben. V vidni del sem vstavila strani Domov, Cenik in Kontakt, pod nevidnega pa Hrana, Svečani obred, Družina/otroci, Poroka, Studio, Fotografiranje. Za uvodno stran sem se odločila, da bom obdržala postavitev izbrane predloge strani, ki sem jo izbrala pred vpisom. Osnovna postavitev je bila fotografija čez celotno stran z napisi v sredini. Ti napisi imajo naslednje funkcije: ko pomaknemo miško na določeno besedo, se slika ozadja spremeni, če pa kliknemo na besedo, nas slednje popelje na naslednjo stran.
Slika 3.3: Strani
Izvedba
Slika 3.4: Uvodna stran Studio Amadeus
Slika 3.5: Prikaz ozadja za posamično kategorijo
Na izbiro imamo mnogo predlog posamičnih predelov. Za našo uvodno stran je izbrana predloga »Portfelj«. Vse, kar moramo nato storiti, je spremeniti slike ter dodati ključne besede, v mojem primeru so to fotografija, video produkcija, tiskanje in grafično oblikovanje. Pod video produkcija imamo namesto slike kratek video posnetek poročnega para, ki pleše. Takšnih predlog je veliko – za vsako predlogo, ki si jo izberemo za novo stran, pa imamo še več možnosti za postavitev izbrane predloge.
Vse predloge preimenujemo in urejamo po želji v sklopu glede na to, kaj nam je na voljo.
Slika 3.6: Okence z osnovnimi predlogami
Slika 3.7: Okence z dodatnimi predlogami
Izvedba
Za stran Fotografije sem izbrala predlogo »Meni«. V tej predlogi je položaj slik in besedila za nas že pripravljen. Besedilo lahko urejamo na naslednje načine: izbiramo velikost pisave, debelino, ležečo pisavo, povezavo, dodamo kvote, številčne ali vrstične oznake, pomikanje levo ali desno ter navadno lepljenje besedila. Seveda lahko prav tako tudi spreminjamo velikost slik in njihov položaj. Omejeni smo pri določenih dejavnostih, npr. da postavljanje slik eno na drugo ni mogoče.
Slika 3.8: Možnosti obdelave besedila
Stran Fotografija ima naslednje sklope: Poroka, Družine, Hrana, Studio in Fotografiranje za dokumente. Vsak sklop ima dodeljeno sliko, napis in povezavo do posamezne galerije.
Slika 3.9: Sklopi strani Fotografija
Galerije so posamične strani in se v navigacijskem delu nahajajo pod razdelkom
»Strani«, prav tako pa so razporejene pod nevidni del ter povezane s sliko in besedilom uvodne strani. Vse skupaj imamo pet galerij, za vsak posamičen sklop po eno, te so poroka, družina, hrana, studio in fotografiranje dokumentov. Vse galerije uporabljajo isto predlogo »Galerija«. Pri tej predlogi lahko urejamo naslednje: tip galerije, premer, postavitev, napisi in animacija. Ta predloga nam prav tako omogoča povečavo
Izvedba
posamične slike. Za vstavljanje fotografij kliknemo na ikono slike, ta nam odpre okno, kjer lahko dodamo svoje slike ali si jih izberemo iz Squarespaceove galerije.
Posamezni sliki lahko dodamo opis in povezavo. Te fotografije lahko urejamo kar na licu mesta, kar nam omogoča funkcija »Uredi sliko«. Slednje nam omogoča naslednje funkcije: filter, rezanje slik in prilagoditve (glej slike 13–16). Vsaka stran razen uvodne ima dodane gumbe za naprej, nazaj in domov.
Slika 3.10: Okence za obdelavo galerije
Slika 3.11: Primer galerije
Slika 3.12: Možnosti za oblikovanje slik
Za stran Video produkcija sem uporabila predlogo »Video«, ki ima naslednje možnosti obdelave: višina odseka, širina vsebine, poravnava vsebine in ozadje, ki je lahko slika ali video. Za postavitev video posnetkov sem izbrala postavitev eden poleg drugega in to isto postavitev uporabila prav tako za naslednja dva videa. Video posnetki so bili najdeni na spletni strani YouTube ter preneseni preko naslova URL.
Naslov URL vstavimo tako, da kliknemo na vzorčni video, ki se pojavi ob izbiranju predloge, nato še ikono uredi. Odpre se nam okence, kamor vstavimo naslov URL.
Tukaj lahko dodamo še sliko in napis. Vsak video se da predvajati, po potrebi tudi povečati. Pred video posnetki sem dodala uvodno besedilo.
Izvedba
Slika 3.13: Okence za oblikovanje video posnetkov
Slika 3.14: Vsebina videa
Slika 3.15: Stran Video produkcija
Na strani Tiskanje sem uporabila predlogo »List« – ta predloga mi pripravi dve sliki, vsako na svoji strani eno nad drugo ter besedilo pod besedilom, kjer je gumb, s katerim lahko priložimo poljubne povezave. Nastavitve so enake kot pri predlogi
»Galerija«. Uporabila sem še predlogo »Besedilo« za besedilo oz. naslov, ta se glasi
»Tiskanje«. Uporabila sem dve isti predlogi, da sem dobila zaželeno količino slik z
Izvedba
besedilom za naslednje sklope: standardno tiskanje, povečave, foto knjige in platno.
Vsak od teh sklopov vsebuje kratek opis, sliko, kaj predstavlja, sklop ter gumb, ki potencialne stranke popelje do cenika. Posamičnemu sklopu lahko dodatno uredimo videz, in sicer imamo na izbiro: v vrsti, poster, kartica, prekrivanje in kolaž. K tem izbiram lahko določimo položaj slike levo ali desno ter animacijo sklopa, v našem primeru je to »zbledelo«.
Slika 3.16 Okence za urejanje posamičnega sklopa
Slika 3.17: Stran Tiskanje
Izvedba
Za stran Grafično oblikovanje sem izbrala predlogi »Galerija« in »Besedilo«.
Postavitev slik na tej strani je bolj enotna, vse slike so enake velikosti, dodala pa sem večji razmik, kot pri galerijah strani Fotografije in na kratko opisano besedilo, kaj z grafičnim oblikovanjem ponujamo.
Slika 3.18: Stran Grafično oblikovanje
Izvedba
Stran Cenik vsebuje predloge »Besedilo« in »Slika« ter gumb do kontakta in domov. Cenik je izdelan v InDesignu ter izvožen kot slika; čeprav izgradnja spletne strani ponuja predloge, namenjene cenikom, se nisem odločila za nobenega od njih.
Vse skupaj ima sredinsko poravnavo.
Slika 3.19: Stran Cenik
Izvedba
Stran Kontakt ima predloge »Besedilo«, »Kontakt« in »Mape«. Pri obrazcu je bilo treba ključne besede prevesti iz angleščine v slovenščino ter povezati, da se vsa povpraševanja pošiljajo na pravilen elektronski naslov. Tukaj sem se soočila z manjšo težavo, in sicer pod tabelo za ime še vedno v angleščini piše ime in priimek, česar ni bilo mogoče odstraniti ali preimenovati. Ker mi ni uspelo urediti, sem pustila tako, kot je.
Slika 3.20: Stran Kontakt
Za konec sem še uredila glavo oz. meni in rep. V meniju se pojavi na levi strani logotip podjetja, na desni pa cenik, kontakt, domov in ikone socialnih omrežij. Meni
in rep sta globalna, kar pomeni, da se pojavita na vsaki od dodanih strani; če želimo, lahko urejamo posamične strani za namizne ali mobilne brskalnike. Meni v globalni obliki je možno oblikovati na naslednje načine:
• ime podjetja in logotip – tukaj lahko dodamo logotip ali samo ime podjetja, velikost logotipa in posebni logotip za mobilno verzijo strani;
• elementi – lahko dodamo gumb, socialne ikone, košarico in prijavo v račun;
• barve – tukaj lahko iz barvnih shem izberemo barvo menija;
• fiksiran položaj – nam omogoča, da je meni v fiksni obliki in se ne prestavlja, lahko pa je v obliki pomikanja nazaj; v tej obliki se meni skrije, kadar se pomikamo po spletni strani navzdol in se ponovno pojavi, kadar se pomikamo navzgor.
V namiznem načinu lahko urejamo naslednje:
• postavitev glave – tukaj lahko izberemo, na kakšen način želimo prikazati svoj meni, npr. logotip na sredini, meni pa pod njim ali pa logotip na desni strani, meni pa na levi;
• navpično oblazinjenje;
• razmik med elementi;
• razmik med povezavami;
• razmik od roba ekrana.
V mobilnem načinu imamo naslednje možnosti: postavitev glave je podobna namizni različici, za prekrivni meni pa lahko izberemo, kako se bo ikona za meni prikazala. Možnosti so plus, dve črti, tri črte ali različne dolžine črt.
Slika 3.21: Glava spletne strani
Izvedba
Slika 3.22 Možnosti obdelave glave
Pri oblikovanju noge sem imela na izbiro mnogo predlog. Izbrala sem, da se besedilo pojavi na levi in desni strani, obe besedili imata desno poravnavo. Na levi strani sem vstavila osnovne podatke podjetja, v desni pa je delovni čas podjetja. Pod besedilom na sredini so ikone za socialna omrežja.
Slika 3.23: Noga spletne strani
Imamo še veliko več možnosti oblikovanja spletne strani. Sedaj bom na kratko opisala, kaj vse lahko z njimi še izdelamo. Sistem nam omogoča oblikovati še naslednje:
• pisavo – tukaj sem urejala in izbirala pisave za spletno stran, in sicer Arial za naslov in besedila. Na žalost nisem mogla uvoziti svojih pisav,
• barve – tukaj sem lahko izbrala paleto barv,
• animacije – izbor slogov animacije za animirane spletne strani. Za spletno stran sem izbrala »scale«,
• razmik – kjer določimo razmik strani in maržo strani,
• gumb – določimo videz,
• produkt predmetov,
• bloki slik – lahko oblikujemo posamične sloge slik, ki jih imamo na voljo,
• ikona brskalnika – tukaj sem vstavila samo simbol logotipa,
• zaklenjen zaslon – možnost stran zakleniti in dovoliti dostop samo določenim z geslom,
• stran za plačilo – kjer urejamo videz predloge za plačilo,
• stran 404 – urejamo, kako stran izgleda, ki ima napako 404,
• dostop do zavrnjenega zaslona – vidno obiskovalcem, če ob odjavi stran obiščejo člani,
• po meri CSS – omogoča vnos pravila CSS po meri.
Marketing nam omogoča naslednje točke:
• e-poštne kampanje,
• odkritje,
• SEO,
• upravljanje lokacije,
Izvedba
• zaroka,
• promocijsko pojavno okno,
• bar za obvestila,
• promocija,
• Instagram zgodbe,
• izdelki na Instagramu,
• Facebook Pixel in oglasi,
• gumbi za skupno rabo,
• Pinterest shrani gumbe,
• URLgraditelj,
• dobropis za Google oglase.
Analitika nam omogoča naslednje točke:
• pregled,
• promet,
• geografija,
• pridobitev,
• viri prometa,
• iskanje po ključnih besedah,
• zaroka,
• dnevnik aktivnosti,
• pretvorbe obrazcev in gumbov,
• priljubljena vsebina,
• ključne besede za iskanje po spletnem mestu Naročniki RSS.
Nastavitve nam omogočajo naslednje točke:
• razpoložljivost spletnega mesta,
• geslo,
• območja članov,
• jezik in regija,
• poslovne informacije,
• socialne povezave,
• povezani računi,
• razširitve,
• dovoljenja,
• domene,
• Google,
• delovno okolje,
• obračun in račun,
• mobilna informacijska vrstica,
• piškotki in podatki o obiskovalcih,
• blokiranje.
Pomoč nam omogoča naslednje točke:
• baza znanja – poglobljeni članki in videoposnetki o vsem Squarespaceu,
• video posnetki – video delavnice za lažji začetek,
• spletni seminarji – interaktivne seje, na katerih nas bodo strokovnjaki vodili skozi osnove Squarespacea,
• najem strokovnjaka in
• zasebnost podatkov.
3.2 Celostna grafična podoba
3.2.1 Logotip
Oblikovanje celostne grafične podobe sem začela z logotipom. Ker delam za fotografski studio, sem na list papirja skicirala osnovne elemente, in sicer fotoaparat, video kamero in tiskalnik. V naslednjem koraku sem poiskala skupne lastnosti fotoaparata in video kamere. Obe napravi imata objektiv in zajemata barve, medtem ko tiskalniki uporabljajo štiri barve CMYK (Cyan, Magenta, Yellow, Key (Black)) in sem se odločila, da jih uporabim v logotipu. Za osnovno obliko sem uporabila zaslonko, lahko bi rekli, da je zaslonka odprta f/5.6. Zaslonko sem razdelila na štiri
»krila«. V posamezno krilo sem dodelila barve CMYK. K logotipu sem dodala še ime podjetja. Pisavo, ki sem jo uporabila, je Stardust Adventure Regular za ime Amadeus;
za studio sem uporabila Candara Light.
Slika 3.24: Logotip Studio Amadeus
Izvedba 3.2.2 Barve
Pri barvni shemi podjetja sem določila vse barve, ki so bile določene v logotipu, to so škrlatno rdeča, cian modra, rumena in črna; k temu sem še dodala temno sivo in belo. Barve imajo podane vrednosti v naslednjih modelih: HEX, RGB, CMYK in HSL.
Slika 3.25 Barve podjetja
3.2.3 Tipografija
Za tipografijo podjetja sem se odločila za naslednje tipografske družine:
Candara, Arial in Stardust Adventure. Črkovna družina Candara se uporablja za naslove, podnaslove in spletne naslove. Črkovna družina Arial se uporablja za besedila, vsebine zgodb, v elektronski pošti ter besedila na spletni strani.
Črkovna družina Stardust Adventure Regular se uporablja izjemoma za promocijske namene, kot so letaki, oglasi in posterji.
Slika 3.26: Tipografija podjetja
3.2.4 Vizitka
Vizitka je postavljena v ležečem formatu 85 x 55 mm. Opredeljena je na dve komponenti, in sicer na podatke osebe in podatke podjetja. Podatki osebe so na levi strani vizitke, na beli podlagi. Podatki vključujejo ime, priimek, naziv oz. položaj v podjetju ter elektronski naslov in telefonsko številko. Tipi pisav, ki sem jih uporabila,
Izvedba
so naslednji: Candara Bold za ime in priimek, Candara Regular za naziv ter Arial Regular za elektronski naslov in telefonske številke. Logotip sem postavila v zgornji levi kot, vse skupaj ima levo poravnavo.
Na desni strani vizitke je podlaga sive, napis pa bele barve. Na tej strani so vsi osnovni podatki podjetja, in sicer ime, naslov, elektronski naslov, telefonska številka in URL-spletne strani. Vse skupaj ima desno poravnavo. Levo in desno stan loči barvna lestvica, ki je razdeljena na štiri enake dele in vsak odsek je v eni izmed štirih barv CMYK.
Slika 3.27: Vizitka
3.2.5 Poslovne tiskovine
Nepogrešljivi del pisarniške tiskovine sta dopisni list in pisemska ovojnica. Za pisemsko ovojnico sem izbrala tri velikosti, in sicer amerikanko, A5 in A4. Na ovojnice sem v levi zgornji kot dodala logotip, na spodnjo stran pa barvno lestvico, pod njo je naslov podjetja in spletni URL. Na dopisni list sem v glavi lista dodala logotip in osnovne podatke podjetja.
Slika 3.28: Dopisni list in pisemske ovojnice
3.2.6 Elektronski podpis
V elektronski pošti se podpis pojavi na dnu sporočila in je ločen z barvno lestvico. Pod barvno lestev je zraven logotipa še naslov podjetja in telefonska številka, elektronski naslov pošiljatelja in spletni URL.
Slika 3.29: Elektronski podpis
3.2.7 Napisi na vozilu
Vozila so odličen način promocije podjetja, saj so na očeh raznih potencialnih strank. Studio Amadeus že ima v lasti svoj kombi za prevažanje vseh orodij, ki jih potrebujejo.
Na vsaki strani kombija imamo večji logotip s spletnim naslovom. Logotip je v barvno-beli kombinaciji, da pride čim bolj do izraza. Na zadnjih vratih imamo naslednje: manjši logotip, spletni URL, telefonsko številko ter na kratko, kaj ponuja
Izvedba
podjetje. Na vsaki strani ima diagonalno še barve cian, modro, škrlatno rdečo in rumeno.
Slika 3.30: Kombi podjetja
4 Primerjava
Graditelja spletnih strani bom primerjala z razvijalcem spletnih strani, in sicer tako, da bom predstavila prednosti in slabosti obeh načinov izdelave spletne strani.
Ustvarjanje spletnega mesta z graditeljem spletnih strani je v bistvu orodje, ki nam omogoča, da ustvarimo spletno stran brez programiranja. To pomeni, da ni treba poznati nobenega programskega jezika, četudi želimo zgraditi primerno spletno stran.
Z intuitivnim urejevalnikom povleci in spusti ustvarimo profesionalno spletno stran z ustrezno in lepo postavitvijo. Prav tako imamo možnost spletno stran prilagoditi mobilnim napravam. Najbolj priljubljeni graditelji spletnih strani so Wix, Squarespace in Wordpress.
Slika 4.1: Lestvica graditeljev spletnih strani [10]
Prednosti uporabe graditelja spletnih strani so:
• Je stroškovno učinkovit – stane veliko manj kot izdelava profesionalne spletne strani s samostojnim podjetnikom; treba je le plačati naročniški načrt.
• Enostaven za uporabo – na voljo je velika izbira čudovitih predlog spletnih strani in vsak element lahko enostavno prilagodimo.
• Tehnična podpora – svetuje, ko se soočimo z nepričakovanimi ovirami.
• Čas – spletno stran je možno narediti zelo hitro že v nekaj urah. Sodelovanje s spletnim razvijalcem bi vzelo veliko več časa.
Slabosti uporabe graditelja spletnih strani so:
• Slab SEO – pri uporabi spletnih graditeljev ne moremo optimizirati svojega spletnega mesta za iskalnike. Ker kode ne moremo urediti, običajno ne moremo dodati pomembnih oznak SEO. S tem lahko izgubimo mnogo potencialnih kupcev.
• Običajne spletne strani ne moremo izvoziti na druge platforme. Spletne strani ne moremo prenesti, ker se jo gosti na strežniku graditelja spletnih mest.
• Nismo lastnik spletne strani. Lastnik je Wix, Squarespace ali katero koli drugo podjetje.
• Neoblikovano po meri – spletna stran ne bo izstopala iz množice, saj bo imela precej standardno postavitev, tako kot druge spletne strani, izdelane na teh platformah.
Pri izdelavi spletne strani z razvijalcem praviloma lahko pričakujemo, da bo spletna stran zgrajena na zelo profesionalen način, posebej če je obseg projekta velik.
Razvijalec spletnih strani bo porabil veliko časa za razumevanje idej in si nato prizadeval za izdelavo spletne strani. Vendar postopek ne deluje vedno tako. To pravilo ne velja za vse. Če najdemo nizkocenovnega razvijalca, smo lahko razočarani.
Prednosti in slabosti sodelovanja z dobrim razvijalcem spletnih strani so:
• Profesionalno in edinstveno oblikovanje – spletna stran bo popolnoma prilagojena našim potrebam in željam.
• Optimizirano za pretvorbo – profesionalni razvijalci bodo ustvarili spletno stran na pravi način, da bodo izkoristili potencialne stranke.
• Dober SEO – v nasprotju s spletnimi graditelji, ki imajo minimalni SEO- razvijalec spletnih strani, pomaga doseči dobro uvrstitev v Googlovem iskanju.
Primerjava
• Smo lastnik svoje spletne strani – treba je kupiti domeno in gostovanje. Če se odločimo za zamenjavo ponudnika strežnika, s seboj vzamemo spletno stran.
• Večja hitrost strani – s spletnim razvijalcem lahko slednje zelo izrazito izboljšamo, veliko bolje kot pri graditeljih spletnih strani.
• Stroški – na žalost so večji kot pri graditeljih spletnih strani.
• Čas – postopek sodelovanja z dobrim razvijalcem in ustvarjanje načrta z njimi zahteva čas. Spletna stran nekaj časa ne bo pripravljena.
Težko se je odločiti, katera možnost je ustreznejša, ker je navsezadnje vse odvisno od tega, koliko smo pripravljeni odšteti, obsega projekta in stopnje poslovnega razvoja. Na primer manjše mlado podjetje se bo raje odločilo za graditelje spletnih strani kot pa veliko podjetje. [5]
5 Zaključek
V okviru diplomske naloge sem teoretično obravnavala izdelavo spletne strani ter celostno grafično podobo, kar sem nato praktično izdelala za podjetje Studio Amadeus.
Narediti spletno stran s pomočjo Squarespace je bila zabavna izkušnja.
Presenečena sem bila, kako enostavna je bila uporaba, in da si za malo truda lahko vsak brez znanja programiranja izdela profesionalno spletno stran. Squarespace se nenehno posodablja, da lahko svojim uporabnikom omogoča najboljšo izkušnjo.
Oblikovanje učinkovite celostne grafične podobe je zahtevna naloga. Spoznala sem, da je za imidž podjetja zelo pomembna in mnogo več kot samo logotip. Temeljna je ustrezna uporaba naslednjih elementov, barve, tipografija, logotip ter jih implementirati na vizitko, poslovne tiskovine, avtomobile, v elektronske podpise, marketinški materiali, letake itd.
Na kratko sem tudi primerjala, kakšna je razlika med graditeljem in razvijalcem spletnih strani. Pri obeh je mogoče najti veliko dobrih in slabih lastnosti.
Najpomembnejši dejavnik, zakaj se vse več ljudi odloča za graditelje spletnih strani, je denarni vložek oz. finančni strošek, saj si ne morejo vsi privoščiti razvijalca, ki jim lahko zagotovi kakovostno in predvsem edinstveno spletno stran. Še najmanj si to lahko privoščijo manjša podjetja.
6 Literatura
[1] MOD, »Celostna grafična podoba (CGP): kaj je, kateri so elementi, kako se je lotiti, kdo jo potrebuje« Dosegljivo: https://www.mod.si/celostna-graficna- podoba/ [Dostopno:12. 3. 2021]
[2] Wikipedija, »Spletna stran« Dosegljivo:
https://sl.wikipedia.org/wiki/Spletna_stran [Dostopno:12. 3. 2021]
[3] Acenta, »Zakaj potrebujem spletno stran za moje podjetje?« Dosegljivo:
https://www.acenta.si/zakaj-je-spletna-stran-pomembna-za-moje-podjetje/
[Dostopno:12. 3. 2021]
[4] Zpbusiness, »2019 Squarespace Ocene, cene in priljubljena alternativa – Računovodstvo – 2021« Dosegljivo: https://sl.zpbusiness.com/17093- squarespace-review-79 [Dostopno:12. 3. 2021]
[5] Dotinum - Anna, »Website builders vs coding – which is better for you?
Dosegljivo: https://dotinum.com/blog/website-builders-vs-web-developers/
[Dostopno:12. 3. 2021]
[6] Squarespace, »How to Use Squarespace to Build a Website for Your Business«
Dosegljivo: https://www.squarespace.com/press-coverage/2013/11/19/how-to- use-squarespace-to-build-a-website-for-your-business [Dostopno:12.03.2021]
[7] Jernej Repovš, »Kako nastaja in deluje učinkovita, tržno usmerjena celostna grafična podoba kot del simbolnega identitetnega sistema organizaciji.«
Ljubljana: Studio Marketing, 1995.
[8] D. Dabner, S. Calvert and A. Casey, »Grafično oblikovanje.« Ljubljana, Slovenija: Tehniška založba Slovenije, 2011.
[9] Roger C. Parker, »Grafično oblikovanje«, Ljubljana: Pasadena, 1997.
[10] Top10.com, »Compare The Best Website Builders of 2021« Dosegljivo:
www.top10bestwebsitebuilders.com [Dostopno:12. 3. 2021]
Dodatek
Priloga 1 - spletna stran Studio Amadeus: https://studioamadeus.squarespace.com Geslo: ArbeiterA20
Priloga 2 - priročnik celostne grafične podobe podjetja Studio Amadeus
