Darja Dodič CELOSTNA GRAFIČNA PODOBA IN SPLETNA PREDSTAVITEV KULTURE PLAYNESS Diplomsko delo Maribor, 2011

Transkripcija

1 Darja Dodič CELOSTNA GRAFIČNA PODOBA IN SPLETNA PREDSTAVITEV KULTURE PLAYNESS Diplomsko delo Maribor, 2011

2 Celostna grafična podoba in spletna predstavitev kulture playness II Diplomsko delo univerzitetnega študijskega programa CELOSTNA GRAFIČNA PODOBA IN SPLETNA PREDSTAVITEV KULTURE PLAYNESS Študent: Študijski program: Smer: Darja Dodič UN ŠP Medijske komunikacije Interaktivna grafična komunikacija Mentor: Somentor: izred. prof. dr. Vili Podgorelec doc. dr. Matjaž Duh Maribor, 2011

3 Celostna grafična podoba in spletna predstavitev kulture playness III

4 Celostna grafična podoba in spletna predstavitev kulture playness IV ZAHVALA Zahvaljujem se mentorju izr. prof. dr. Viliju Podgorelcu in somentorju doc. dr. Matjažu Duhu za strokovno vodenje in mnenja, ki so pripomogla k uspešnemu dokončanju diplomske naloge. Zahvaljujem se dr. Milanu Hosti, vodji filozofskosociološkega eksperimenta imenovanega playness kultura za izposojo projekta in prispevano gradivo za namene diplomske naloge. Hvala tudi asist. mag. Katji Udir Mišič. Hvala vsem bližnjim za spodbudne besede in mojemu Juretu, ki je verjel vame.

5 Celostna grafična podoba in spletna predstavitev kulture playness V CELOSTNA GRAFIČNA PODOBA IN SPLETNA PREDSTAVITEV KULTURE PLAYNESS Ključne besede: grafično oblikovanje, celostna grafična podoba, spletno oblikovanje, spletna stran, CMS sistem za upravljanje s spletno vsebino, Joomla! UDK: : (043.2) Povzetek Ko na trg vstopamo z novim izdelkom ali storitvijo, je zelo pomembno, da ga/jo dobro promoviramo in predstavimo ter si tako zagotovimo uspešno prodajo. Del predstavitve na trgu zajema tudi grafična podoba in spletna stran, ki smo ju izdelali za novo kulturo v športu kulturo playness. Playness je naslednje obdobje po fitnesu, wellnessu in selfnessu kot nova oblika sprostitve in povrnitve razigranosti v naš vsakdan. To dejstvo smo upoštevali pri oblikovanju znaka, ki je sestavljen iz razgibanih in barvitih figurativnih človeških teles, ter pri oblikovanju logotipa, čigar tipografija izraža igrivost in trdne temelje uveljavljajoče se playness kulture. Da bi bile informacije o playness kulturi zbrane na enem mestu, smo izdelali spletno mesto z glavnimi informacijami o tem, kaj playness sploh je, izobraževalnim središčem za tiste, ki bi radi postali voditelji playnessa, ter seznamom centrov, kjer se ta dejavnost izvaja, oziroma možnostjo vpisa novega centra. Za izdelavo uporabnega in vsebinsko bogatega mesta smo uporabili odprtokodni sistem za upravljanje spletnih vsebin CMS Joomla!.

6 Celostna grafična podoba in spletna predstavitev kulture playness VI CORPORATE IDENTITY AND WEB PRESENTATION OF PLAYNESS CULTURE Keywords: graphic design, corporate identity, web design, website, CMS content management system, Joomla! UDC: : (043.2) Abstract Good promotion and presentation of a product or service are of great importance when introducing it in the market, because they ensure a successful sale. Parts of such a presentation are also the corporate identity and the website we have created for playness a new culture of sport. Playness reintroduces playfulness in our everyday lives and represents a new form of relaxation, quite different to fitness, wellness and selfness. This fact has been taken into account when designing the logo which consists of colorful figurative human bodies, whereby it reflects playfulness and solid foundations of the outstanding playness culture. We have developed a website containing all information about playness: main information about playness, training centers for those who wish to become playness instructors and a list of centers where such activities can be practiced or registered at. In order to create a usable and content-rich website, we used an open-source web content management system CMS Joomla!.

7 Celostna grafična podoba in spletna predstavitev kulture playness VII KAZALO 1 UVOD METODOLOGIJA NAMEN DIPLOMSKE NALOGE CILJI RAZISKOVALNA VPRAŠANJA PREDPOSTAVKE IN OMEJITVE PREDVIDENE METODE CELOSTNA GRAFIČNA PODOBA IDENTITETA IN IMIDŽ Identiteta Imidž Simbolni identitetni sistem LIKI PROSTOR BARVA Barvna modela RGB in CMYK Barvni krog Barvni kontrast Oblika in barva Barve TIPOGRAFIJA LOGOTIP IN ZNAK OBLIKOVANJE LOGOTIPA KULTURE PLAYNESS Informacija, identifikacija ali definiranje problema Inkubacija Iluminacija ali inspiracija Verifikacija in implementacija... 39

8 Celostna grafična podoba in spletna predstavitev kulture playness VIII 5 SPLETNO OBLIKOVANJE ZNAČILNOSTI SPLETA Tipografija na internetu Barve na internetu Grafični uporabniški vmesnik PROSTA IN ODPRTOKODNA PROGRAMSKA OPREMA SISTEM ZA UPRAVLJANJE SPLETNE VSEBINE CMS CMS Joomla! ZASNOVA SPLETNE STRANI KULTURE PLAYNESS Načrtovanje Struktura Navigacija Barva Tipografija IZDELAVA PREDLOGE ZA CMS JOOMLA! Index.php Zemljevid strani Template.css TemplateDetails.xml Template_thumbnail.png POSTAVITEV IN OBJAVA SPLETNE STRANI SKLEP LITERATURA... 68

9 Celostna grafična podoba in spletna predstavitev kulture playness IX KAZALO SLIK Slika 1: Referenčni trikotnik (Repovš, 1995)... 6 Slika 2: Prostorski križ (Butina, 1997) Slika 3: Barvno telo (mrsandersclass.com, 2010) Slika 4: Aditivno mešanje barv Slika 5: Barvna modela RGB in CMYK v primerjavi z vidnim spektrom (RGB vs. CMYK, 2010) Slika 6: Subtraktivno mešanje barv Slika 7: Barvni krog (Itten, 1999) Slika 8: Kontrast barve k barvi: rumena, rdeča, modra; Simbol slovenskega predsedstva Svetu EU (EU2008.si, 2011) Slika 9: Svetlo-temni kontrast: Rembrandt, Belsazar, Slika 10: Na obeh slikah je enaka vijolična barva; na zgornji sliki deluje toplo, ker so sosednje barve hladne, na spodnji pa hladno, saj so sosednje barve tople Slika 11: Hladno-topli kontrast: Mathias Grunewald: Vstajenje, Slika 12: Komplementarni kontrast rdeče in zelene: Vincent van Gogh: Le Café de nuit, Slika 13: Sumultani kontrast: Cruz Diez Slika 14: Povečan, spremenjen in zmanjšan simultani učinek Slika 15: Različna barvna čistost: Francisco de Goya, Don Manuel, Slika 16: Kontrast količine: Vincent Van Gogh: Café Terrace at Night, Slika 17: Rumena : vijolična = 1:3, oranžna : modra = 1:2, rdeča : zelena = 1: Slika 18: Liki s pripadajočimi barvami Slika 19: Značilnosti črk (Repovš, 1995) Slika 20: Obstoječe podobe fitnes, welness in selfness klubov, centrov, studiev... 35

10 Celostna grafična podoba in spletna predstavitev kulture playness X Slika 21: Skice na listu papirja Slika 22: Človeške figure Slika 23: Tipografiji v ožjem izboru Slika 24: Črno-bele in barvne kombinacije Slika 25: Znak in logotip kulture playness za različna področja Slika 26: Izbiranje barv pri oblikovanju spletne vsebine Slika 27: Spletna stran fitness.org (Fitness.com, 2010) Slika 28: Spletna stran wellness.com (Wellness.com, 2010) Slika 29: Skica spletne strani Slika 30: Navigacijska vrstica Slika 31: Tipografija na spletni strani Slika 32: Privzete Joomla! predloge: beez, ja_purity, rhuk_milkyway Slika 33: Shema spletne strani po obliki Slika 34: Div struktura spletne strani Slika 35: Sestava kaskadnega stila Slika 36: Primer dela datoteke templatedetails.xml Slika 37: Joomla! pozicije Playness predloge Slika 38: Thumbnail Slika 39: Vstopna stran Slika 40: Vsebina strani, ko je izbran eden izmed glavnih stebrov Slika 41: Prijava v playness izobraževalni sistem... 66

11 Celostna grafična podoba in spletna predstavitev kulture playness XI UPORABLJENE KRATICE CGP celostna grafična podoba CMYK cyan, magenta, yelow (rumena), kontrast CMS Content management system CSS Cascading Style Sheets HTML Hyper Text Markup Language IIS Internet Information Services PHP Hypertext Preprocessor RGB red (rdeča), green (zelena), blue (modra) WWW World Wide Web

12 Celostna grafična podoba in spletna predstavitev kulture playness 1 1 UVOD Najprej moramo spoznati podjetje, šele potem lahko oblikujemo celostno grafično podobo (CGP), ki bo izraz realne oziroma želene identitete in imidža podjetja. V informacijski dobi se spopadamo z veliko količino podatkov, zato oblikovanje nekaj novega, privlačnega, kar bo vzbudilo pozornost, predstavlja pravi izziv.»odločitve, kaj bomo prebrali ali si ogledali in kaj preskočili, so sicer večinoma nezavedne in nenadne, hkrati pa so med najpomembnejšimi«(parker, 1997, XX).»CGP je veliko več kot zgolj identifikacija podjetja. Izraža tudi identifikacijo dosežene ravni kakovosti, vrednosti in zanesljivosti, je posebne vrste komunikacija podjetja. Kot takšna je močno in učinkovito komunikacijsko orodje, ki služi kot osnova za uspešno razločevanje podjetja od njegovih konkurentov. CGP je vključena v splet virov, ki ustvarjajo osnovo za doseganje uspešnosti poslovanja, dobrega imena, vrednosti blagovne znamke, spodbujanja nakupov, skratka rezultatov vseh vrst«(dnevnik d. d., 2001). Spletne strani nam podajajo informacije o podjetju oziroma organizaciji. Podatki, ki so na spletu, so nam na voljo 24 ur na dan, kar pomeni stalno dosegljivost. Spletne strani so nepogrešljiv del komunikacije z uporabniki. Vse več informacij poiščemo na internetu in če nekega podjetja oziroma organizacije tam ni, bi lahko rekli, da ne obstaja.»pri ustvarjanju spletne strani je potrebno najprej definirati namen spletne strani, določiti ciljno publiko (potencialne obiskovalce), izdelati vsebino in nato vse to grafično in programsko sestaviti, da nastane skupek strani, ki so funkcionalno povezane med seboj ter se nahajajo na istem spletnem mestu pod isto domeno«(spletna stran, 2010). Pri izdelavi spletne strani je pomembna predvsem njena funkcionalnost. Strani moramo redno posodabljati in obnavljati, saj bomo s tem pritegnili obiskovalce, da se bodo vračali na našo spletno stran. Namen spletne strani je posredovanje informacije na kar se da hiter in učinkovit način. Ljudje smo na internetu zelo nestrpni in prvih nekaj sekund odloča o tem, ali bo uporabnik nadaljeval z obiskom in raziskovanjem strani ali pa ga bo zapustil in obiskal stran konkurenčnega podjetja.

13 Celostna grafična podoba in spletna predstavitev kulture playness 2 Celostna predstavitev podjetja oziroma organizacije zajema tako oblikovanje celostne grafične podobe kot tudi oblikovanje spletne strani. V diplomski nalogi smo opisali korake, ki so potrebni za celostno predstavitev podjetja. Prvi del diplomske naloge je tako posvečen celostni grafični podobi na splošno od realne identitete podjetja do upoštevanja likovnih osnov, ki jih potrebujemo pri oblikovanju CGP. V drugem delu diplomske naloge smo se posvetili spletu, njegovim značilnostim, odprtokodnim programom in podrobneje spoznali CMS Joomla! sistem za upravljanje vsebin. Izbrano teorijo smo nato implementirali v izdelavi celostne predstavitve kulture playness, ki obsega izdelavo logotipa in spletne strani v CMS Joomla!.

14 Celostna grafična podoba in spletna predstavitev kulture playness 3 2 METODOLOGIJA 2.1 Namen diplomske naloge Namen diplomske naloge je predstaviti kulturo playness z izdelavo celostne grafične podobe in spletnega mesta. V prvem delu predstavili kaj je celostna grafična podoba skupaj z likovnimi karakteristikami, ki so pomembne za izvedbo celostne grafične podobe. Pridobljeno znanje bo osnova za izdelavo znaka in logotipa kulture playness. V drugem delu bomo pregledali značilnosti spleta in se spoznali s sistemom za upravljanje spletne vsebine Joomla!. Na podlagi zbranih informacij bomo oblikovali in naredili predlogo za CMS Joomla!. 2.2 Cilji Cilja diplomskega dela sta: izdelati prepoznaven logotip in znak kulture playness; za kulturo playness izdelati spletno mesto, ki bo ponujalo pomembne informacije o novi športni kulturi. 2.3 Raziskovalna vprašanja Naša raziskovalna vprašanja so: RV1: Kako izdelati učinkovito in prepoznavno celostno grafično podobo? RV2: Kakšni so logotipi, znaki in spletna mesta različnih splošnih športnih kultur? RV3: Kako izdelati spletno mesto s pomočjo CMS Joomla!?

15 Celostna grafična podoba in spletna predstavitev kulture playness Predpostavke in omejitve Ker je kultura playness na trgu nova, je pomembno, da je na trgu predstavljena enotno in bo tako dosegla prepoznavnost. Omejitve so predvsem sposobnost narediti nekaj novega in vpadljivega, kar bo pritegnilo pozornost. Skupaj z likovnimi predpostavkami in pravili bomo morali upoštevati tudi želje naročnika. Pri oblikovanju spletne strani bomo združili omejitve, ki so prisotne na spletu, z možnostmi in funkcionalnostmi, ki nam jih ponuja CMS Joomla!. 2.5 Predvidene metode Metoda dela je, po zgledu teorije, s pomočjo grafičnih programov (Adobe Photoshop, Adobe InDesign) in sistema za upravljanje spletne vsebine (CMS Joomla!) ustvarjanje celostne predstavitve kulture playness. Metodo deskripcije smo uporabili za opisovanje pojmov in dejstev, ki smo jih črpali iz obstoječe literature. Komparativno metodo smo uporabili za primerjavo trenutnega stanja logotipov in znakov ter spletnih mest športnih kultur.

16 Celostna grafična podoba in spletna predstavitev kulture playness 5 3 CELOSTNA GRAFIČNA PODOBA Skozi poglavja, ki sledijo, bomo poskušali odgovoriti na prvo raziskovalno vprašanje: Kako izdelati učinkovito in prepoznavno celostno grafično podobo? Grafično oblikovanje je najbolj univerzalno izmed umetnosti. Je povsod okoli nas ter razlaga, okrašuje, določa pomen svetu. Z grafičnim oblikovanjem se srečujemo na cestah, pri vseh vrstah napisov, na naših telesih. Grafično oblikovanje ima več funkcij: med seboj razvršča in razlikuje podjetja ali organizacije, deluje na naša čustva in nam pomaga izoblikovati občutke o svetu okoli nas (Newark, 2007). Celostna grafična podoba (CGP) je vizualni prikaz vloge in funkcije družbe, način njene vizualne komunikacije interno z delničarji in zaposlenimi in na zunaj z njenimi dobavitelji in kupci. Celostna podoba je sestavljena iz logotipa in imena, ki je v lasti družbe, skupaj s pravili in navodili o tem, kako se jih uporablja na primer na tiskanem materialu (pisemske ovojnice, katalogi in poročila), pri oglaševanju, trženju in promociji ter na proizvodih in storitvah. CGP pogosto določa, katere barve in tipografije je treba uporabljati z logotipi in imeni, ter želeno razmerje med njimi. Izbrani barve in znaki so lahko v lasti družbe. 3.1 Identiteta in imidž Kadar govorimo o celostni predstavitvi podjetja, moramo razjasniti nekaj osnovnih pojmov, ki so temeljna podlaga za uspešno celostno predstavitev podjetja, organizacije, prireditve ali v našem primeru kulture. Vsaka organizacija ima svojo identiteto, imidž in simbolni identitetni sistem. Odnosi med njimi so prikazani v referenčnem trikotniku, ki sta ga predstavila Richards in Ogden leta 1936.

17 Celostna grafična podoba in spletna predstavitev kulture playness 6 Realna identiteta, imidž in simbolni identitetni sistem organizacije delujejo usklajeno le, če pogosto preverjamo njihovo stanje in spreminjamo njihove sestavne dele do ravnotežja, ki vodi k uspešnosti organizacije (slika 1). Slika 1: Referenčni trikotnik (Repovš, 1995) Identiteta Identiteta in imidž ali podoba podjetja sta dva ločena pojma, ki se ju pogosto zamenjuje ali napačno uporablja. Podjetje prej ali slej postane tržna znamka, prej ali slej ima določeno tržno vrednost. Da ljudje, kupci, dobavitelji, partnerji in splošna javnost to prepoznajo, mora podjetje ustvariti svojo identiteto. Tako kot ima vsak izmed nas svoje ime in obraz, tako ga mora imeti tudi podjetje (Korelc, 2010). Repovš je opredelil pojem identitete:»identiteta je kvaliteta ali sposobnost biti isti; je absolutna ali vsebinska enakost, istost. Identiteta pomeni seštevek vseh poti, ki jih izbere podjetje ali organizacija, da bi opravljalo svoje poslanstvo in se identificiralo pri vseh svojih javnostih. Identiteta je manifestacija vsega, kar organizacija je, za čimer stoji in kamor gre. Z njo se organizacija identificira in razlikuje od drugih, vzpostavlja svojo notranjo kulturo in jo ohranja z vsakim zaposlenim«(repovš, 1995, 17).»Za velike organizacije, lahko oblikovanje celostne grafične podobe traja leta, pozornost pa potrebujejo konstantno tudi kasneje. Organizacije, ki ne usklajujejo grafičnega dela, ustvarjajo razpršeno in nepovezano identiteto«(newmark, 2007, 124).

18 Celostna grafična podoba in spletna predstavitev kulture playness 7 Identiteta je najprej fizična pojavnost podjetja, kamor spadajo poslovne in proizvodne stavbe, transportna sredstva, spletna stran, izdelki, skratka vse, kar pomeni fizično pojavljanje podjetja. Naslednji dejavnik identitete je odnos zainteresiranih kupcev, dobaviteljev, pogodbenih sodelavcev, širše javnosti med seboj in do podjetja. Pogosto zanemarjen sestavni del identitete je tako imenovana refleksija, ki govori o tem, kako človeka, ki je v odnosu z določenim podjetjem, obravnavajo tisti, ki ga obkrožajo (sodelavci, prijatelji, znanci, družina ).»Ne najlažje dojemljiv dejavnik je osebnost podjetja, ki jo opredeljujejo njegovi atributi (obnašanje, odzivanje na tržno dogajanje, drža vodstva in podobno). Idealna slika osebnosti podjetja prikazuje zaposlene in kupce izdelkov tega podjetja, ki se z osebnostjo podjetja poistovetijo. Izjemen vpliv na identiteto ima danes tudi kultura podjetja, ki pomeni vpletenost podjetja v širše okolje (socialna, kulturna, ekonomska, družbeno-politična dogajanja in tako naprej) ter notranji zaposlitveni ustroj«(korelc, 2010). Identiteta pa zelo močno vpliva na imidž podjetja Imidž David O'Gilvy je govoril o tem, da potrošniki kupujejo blagovno znamko in ne izdelka. S tem se je pojavila ideja o imidžu, ki se je kmalu prenesla na podjetja.»imidž je vtis, ki jo na osnovi sprejetih signalov oblikuje njegov prejemnik. Imidž je pojem, ki obsega vse, kar se o neki organizaciji misli, občuti. Je sistem slik, oblikovan skozi vedenje subjekta in izoblikovan iz občutkov, mišljenj, želja in idealov, asociacij. Je tudi odraz zavestnih in podzavestnih stanj posameznikov, v katerih nastaja«(repovš, 1995, 18). Na imidž vplivajo vse mogoče komunikacije podjetja: tržne komunikacije, kultura podjetja, osebni stik zaposlenih z zunanjim svetom in tako naprej (Korelc, 2010). Zato je imidž dinamičen pojem, ki se vzdržuje in spreminja.»imidž podjetja, blagovne znamke, ideje ali izdelka se oblikuje z informacijami, ki obljubljajo potencialnim potrošnikom zadovoljevanje njihovih osnovnih, pa tudi zapletenih psihosocialnih potreb«(repovš, 1995, 19). Če ima organizacija opredeljeno svojo vizijo, politiko, organizacijsko kulturo, filozofijo in poslanstvo, bo uspela doseči zaznavanje teh opredeljenih lastnosti skozi enopomenske komunikacije. Neformalne komunikacije (stik zaposlenih z različno javnostjo), formalne (fizične lastnosti izdelkov in storitev) in formalizirane komunikacije (oglaševalske akcije in druge oblike pospeševanja prodaje) oblikujejo imidž o organizaciji in vsem, kar organizaciji pripada.

19 Celostna grafična podoba in spletna predstavitev kulture playness Simbolni identitetni sistem»simbolni identitetni sistem je realna identiteta organizacije, prevedena na simbolno raven. Sestavljajo ga verbalni in grafični simboli, črkopisi, barve in ostale likovne strukture, razporejene po površinah komunikacijskih sredstev na samosvoj, prepoznaven in razlikovalen način«(repovš, 1995, 21). Simbolni identitetni sistem je pojem, ki poleg celostne grafične podobe vključuje tudi ostale organizacije dražljajev, kot so glasba, vonjave, okusi in tudi vedenje ljudi. Celostna grafična podoba je kot del simbolnega identitetnega sistema pomembno orodje za predstavljanje realne identitete organizacij in vzpostavljanje pravilnega in ustreznega imidža. 3.2 Liki Likovna teorija je posebna veda, ki raziskuje likovna izrazila in zgradbo likovnih del ter proučuje zakonitosti dojemanja likovnih del. Likovno teorijo zanimajo predvsem likovna izrazila, ki so skupna vsem področjem likovne umetnosti. Ukvarja se z analizo likovnih elementov, likovnih spremenljivk, načel likovnega reda, s pomočjo katerih ustvarjajo svoja dela različni likovni ustvarjalci: slikarji, kiparji, arhitekti, oblikovalci. Vsem so v likovnem izražanju skupni pojmi: lik, prostor, barva, oblika itn.»lik je v sebi organiziran vidni dražljaj, ki se loči od likovnega ozadja in stopa predenj«(repovš, 1995, 82). Definicijo lika v smislu likovne psihologije je podal Katz:»Za nek lik je značilno, da je omejen, razločen, koherenten oziroma zaprt, strukturiran ali organiziran. Doživeti neki figuralni lik pomeni doživeti zaznavno enoto, ki jo praviloma ni mogoče spreminjati po volji. Kolikor močnejši je nek lik, toliko bolj se upira zunanjim vplivom. V strukturi lika se celota in njeni deli recipročno odločajo, pri tem pa prevladuje kvaliteta pojavne celote nad kvaliteto delov. Ta zakon je toliko bolj veljaven, kolikor bolj koherentna je struktura lika«(butina, 1997, 68). Krog je po Sandersu ekstremen primer kohezije lika. Tudi ravna linija je koherenten lik.»koherentnost lika preprečuje ločevanje delov iz njegove celote, medtem ko nastopijo motnje lika takrat, kadar se v njem jasno razločijo posamezni deli. Deli neke likovne strukture ali konfiguracije imajo različne vrednosti. Nekateri deli so nujni za ohranitev integralne strukture, nekateri pa so relativno nepomembni fragmenti. Tako v karikaturah spreminjajo vse odnose nekega obraza, pa vendar ostane ohranjena identiteta izraza«(butina, 1997, 68). Obliki, pravi Butina, ki je

20 Celostna grafična podoba in spletna predstavitev kulture playness 9 obogatila svojo absolutno vrednost z navezovanjem odnosov z okoljem, pravimo lik. Lik lahko definiramo tudi geometrijsko: lik ima dve dimenziji, torej je lik vsaka ploskovna oblika. Likovni pojem lika po mnenju Butine presega geometrijsko pojmovanje. Wertheimer je lik definiral kot celoto, katere značilnosti niso določene z značilnostmi njenih individualnih delov, ampak z notranjo povezavo celote (Butina, 1997). Lik vzbuja asociacije in pomene ter teži k temu, da ga prepoznamo, primerjamo in poimenujemo z dosedanjimi vidnimi izkušnjami in dogovori.»ključna značilnost lika, ki ga tudi opredeljuje, je rob, ki nastaja med likom in likovnim ozadjem«(repovš, 1995, 82). Površina okoli lika se imenuje funkcionalna praznina, ki izostruje lik iz ozadja, mu daje večjo veljavo in ga okrepi kot vidni dražljaj. Motivacija, stališče, učenja itd. vplivajo na hitrost in vsebino zaznavanja lika. Prav tako so geometrijsko pravilnejši liki bolj avtoritetni, učljivi in prepoznavni. Like, ki so bili v sosedstvu z dobrimi informacijami in izkušnjami, smatramo kot pozitivne, če pa so bili uporabljeni ob slabih informacijah in izkušnjah, pa jih smatramo kot negativne. Ostri liki delujejo resno, grozeče, inteligentno, dinamično, nevarnejše in polemično, obli pa mehko, dobrodušno in varovalno.»liki in likovne strukture imajo svoj čustven naboj in so nasičeni s pomeni. Simboli kot likovne strukture so nosilci emocij, ki so se vezale na določeno likovno strukturo z informacijami in izkušnjami. Ob istem liku, likovni strukturi, simbolu se emocije lahko menjajo z novimi informacijami in novimi izkušnjami«(repovš, 1995, 85 86). Skupaj lahko postavimo več likov, ki delujejo samostojno, vzbujajo asociacije in se zapolnjujejo s pomeni. Če sta lika eden zraven drugega, se bosta pričela nanašati eden na drugega.»začela bosta vsak zase in na račun drugega izgubljati svojo enovito identiteto in bosta prešla v skupno identiteto z novim nerazdeljenim pomenom«(repovš, 1995, 83). Oblika, lik in forma so sinonimi, ki jih med seboj ne ločujemo jasno, vendar so to osrednji likovni pojmi, ker se v njih povezujejo mnoge likovne prvine v celote.

21 Celostna grafična podoba in spletna predstavitev kulture playness Prostor Za kvaliteten grafični izdelek sta pomembna tako motiv kot tudi ozadje. Zato prištevamo prostor oziroma slikovno površino k osnovnemu kompozicijskemu elementu.»pri tem nimamo v mislih navideznega tridimenzionalnega prostora, v katerega je umeščen narisan motiv, ampak dvodimenzionalno površino slike«(rački, 2004, 18). Ljudje imamo razvit občutek za svoje telo in občutimo svoje telo kot celoto, ki jo tvorijo telesni deli in odnosi med deli. Iz položaja telesa lahko razločimo osnovne likovne pojme, ki se odražajo v prostorskem križu. Pokončna drža telesa ponazarja vertikalo kot likovno pojmovno podobo. Nasprotje pokončne drže je ležanje, likovna podoba pa je vodoravnica.»tretji pojem tvorijo poševni, diagonalni položaji glede na oba prva, vertikalno in horizontalno«(butina, 1997, 170). Navpičnica in vodoravnica sta torej osnovna pojma prostorskega križa. Navpičnica oziroma frontalna ravnina (A na sliki 2) gre skozi telo tako, da razdeli telo na spredaj in zadaj.»vidni prostor torej leži pred frontalno ravnin.«(butina, 1997, 170). Druga navpičnica oziroma medialna ravnina (B na sliki 2) stoji pravokotno na frontalno ravnino in razdeli telo na levo in desno. Tretja očesna ravnina (C na sliki 2) pa leži pravokotno na prejšnji ravnini in telo deli na spodaj in zgoraj. Talna ravnina (T na sliki 2) zaključi podobo prostorskega križa kot njegova temeljna ravnina, po kateri se gibljemo v vse smeri. Prostorski križ je izhodišče za likovni prostor. Slika 2: Prostorski križ (Butina, 1997)

22 Celostna grafična podoba in spletna predstavitev kulture playness 11 Poznamo tri dimenzije, ki pa jih je mogoče doživljati tudi na dvodimenzionalni likovni površini. To storimo s pomočjo strukturiranja likov v skladu z nekaterimi psihološkimi zakonitostmi. Slikar tretjo dimenzijo ustvari z iluzijami, z ustrezno organizacijo likovnih sredstev: prostorsko globino dosežemo z različnimi velikostmi likov. Večji se zdijo bližji, manjši se potiskajo v globino; s prekrivanjem lik, ki prekriva drugega daje vtis, da je bližje, prekriti lik pa se umika v globino; lik, ki je jasnejši in ima izrisane podrobnosti, se zdi bližji od likov, ki so manj jasni in izgubljajo podrobnosti; sence ob liku ustvarjajo vtis globine.»predmeti, ki so bližje viru svetlobe, mečejo na oddaljene svojo senco«(butina, 1997, 78); linearna perspektiva (linije, ki bežijo proti skupni točki) ustvarja prostorsko globino; z zmanjševanjem likov in hkratnim pomanjševanjem razdalje med njimi se ustvarja vtis prostorske globine;»likovni prostor uresničujemo z likovnimi izraznimi sredstvi, torej s čutnimi občutki, ki so se v toku likovne analize osamosvojili v likovne pojme. Ko se v skladu z zamislijo likovni pojmi zlijejo z likovnimi materiali, postanejo spet čutno dostopni, konkretno čutno gradivo, ki nosi v svoji formi vsebino likovnega pojmovanja umetnika. Likovni prostor umetnik gradi s posebno razporeditvijo likovnih občutkov, ki nastanejo iz zlitja likovnih pojmov in materialov, in ki so konkretni čutni material likovne forme, ker jih lahko spet čutno zaznamo«(butina, 1997, ). Umetnik nikoli ne uporabi vseh izraznih sredstev, ki so mu na voljo, ampak uporabi samo tiste, ki se skladajo z njegovim mišljenjem in pojmovanjem sveta in prostora. 3.4 Barva»Barve so življenje, kajti svet brez barv bi bil videti mrtev. Barve so praideje, so otrok prvotne brezbarvne svetlobe in njene nasprotne skrajnosti, brezbarvne teme. Tako kot plamen ustvarja svetlobo, tako tudi svetloba ustvarja barve. Barve so otrok svetlobe,

23 Celostna grafična podoba in spletna predstavitev kulture playness 12 svetloba pa mati barv. Svetloba, ta prvobitni pojav sveta, nam v barvah razkriva duha in živahno dušo tega sveta«(itten, 1999, 8). Znotraj celostne grafične podobe so barve pomemben del vizualne sporočilnosti.»barve same po sebi in tudi v odnosu z drugimi barvami pripomorejo k večji učljivosti, prepoznavnosti, razlikovalnosti, berljivosti in referenčnosti simbolov in celostnih grafičnih podob«(repovš, 1995, 92). Barva kot subjektivno doživetje nastane z draženjem receptorjev na mrežnici očesa, človeški možgani pa dražljaj prevedejo v doživetje barve. Elektromagnetno valovanje v območju vidnega spektra - od približno 380 do 740 nm - se imenuje svetloba. Barva pa je lastnost svetlobe.»nekatera telesa odsevajo malone vso svetlobo, ki pada na njihovo površino, zato se nam prikazujejo bela. Če pa odbijajo le zelo malo vpadne svetlobe, jih vidimo črne«(trstenjak, 1996, 17). Če telesa absorbirajo samo sevanje določene valovne dolžine, druge pa odsevajo, jih vidimo v različnih barvah, in sicer odvisno od valovne dolžine sevanja. Tako na primer vidimo zeleno, ker odseva od dnevne svetlobe samo valove s povprečno dolžino 500 nm, druge pa vpija.»nekatere telesne površine pa svetlobo tudi presevajo, transmitirajo; to so prozorne površine«(trstenjak, 1996, 17). Površina, pri kateri imamo popolno razprševanje, pri kateri se svetloba na vse strani enakomerno porazdeljuje, se imenuje motna površina.»barvo označuje njena barvitost, barvna kvaliteta, ki je lahko svetlejša ali temnejša«(butina, 1997, 192). Slika 3 prikazuje barvne lastnosti, ki so: barvitost (hue), svetlost (value), čistost ali nasičenost (saturation). Slika 3: Barvno telo (mrsandersclass.com, 2010)

24 Celostna grafična podoba in spletna predstavitev kulture playness Barvna modela RGB in CMYK»Barvni modeli so namenjeni natančnemu in objektivnemu opisu barv. Vsaka barva v barvnem modelu je predstavljena kot kombinacija več številčnih vrednosti. Večina barvnih modelov uporablja za opis posamezne barve 3 parametre - torej jih lahko predstavimo v tridimenzionalnem prostoru. Obstaja veliko barvnih modelov, ki se uporabljajo za prikazovanje barv na različnih medijih, kot sta monitor ali papir. Znanih je okoli 400 barvnih sistemov in zbirk barv«(barvni modeli, 2010). RGB RGB (red, green, blue) je kratica, ki prihaja iz angleščine in pomeni rdeča, zelena in modra, ki so tudi osnovne barve modela. Vsaka od teh barv se lahko pojavi v 256 odtenkih, kar skupno znaša barv (Barvni modeli RGB, 2010). Aditivno mešanje barv Če na očesno mrežnico hkrati pade več sevanj različnih valov, dobimo mešano svetlobo. Temu principu pravimo aditivno mešanje barv (Trstenjak, 1996). Aditivno mešanje (slika 4) je mešanje barvnih valenc rdeče, zelene in modre svetlobe (RGB). Tak način mešanja barv uporabljajo barvni zasloni katodnih cevi za televizijo in računalnike. Barvni vtis bele barve torej dobimo takrat, ko svetloba različnih valovnih dolžin (RGB) istočasno zadene na isto mesto na očesni mrežnici. Ko se aditivno združi svetloba dveh aditivnih primarnih barv, nastane cyan, magenta ali rumena barva. Z mešanjem zelene in modre dobimo odtenek cyan, z mešanjem rdeče in modre dobimo odtenek magente ter z mešanjem zelene in rdeče dobimo rumeno. Slika 4: Aditivno mešanje barv

25 Celostna grafična podoba in spletna predstavitev kulture playness 14 CMYK Barvni model CMYK (Cyan, Magenta, Yellow, Kontrast 1 ) je sestavljen iz štirih procesnih barv: cyan, magente, rumene in kontrastne barve. Z različnimi mešanicami teh barv lahko dobimo vse barve, definirane v tem barvnem modelu. Barvni model CMYK je eden izmed najpogosteje uporabljanih barvnih modelov v tisku, pa tudi v procesu priprave na tisk. Barvni prostor CMYK izvira iz barvnega modela CMY. Kontrastna barva je dodana zaradi neidealnih procesnih barv; v teoriji namreč mešanica vseh treh barv pomeni črno, v praksi pa dobimo umazano rjavo barvo.»pretvorba iz barvnega prostora RGB v CMYK je relativno enostavna, prinaša pa določene izgube nekaterih barvnih tonov, ker sta barvna prostora precej različna in moramo torej s štirimi osnovni barvami (cyan, magenta, yellow in kontrast) simulirati vse ostale tone. V praksi se ta izguba odraža v manj nasičenih in manj čistih barvah, nekaterih barv pa barvni prostor CMYK sploh ni zmožen prikazati. Določene barve so za to še posebej občutljive, predvsem so to živo oranžni in živo zeleni toni, modra je malo manj občutljiva, rdeča pa je skoraj enaka«(barvni modeli CMYK, 2010). Razliko med RGB in CMYK barvnim prostorom v primerjavi z vidnim spektrom prikazuje slika 5. Slika 5: Barvna modela RGB in CMYK v primerjavi z vidnim spektrom (RGB vs. CMYK, 2010) 1 V nekateri literaturi za četrto barvo barvnega modela CMYK poleg izraza kontrast najdemo še izraz key, ki prav tako pomeni črno oziroma, bolje rečeno, kontrastno (ključno) barvo: tisto, ki da detajle k sliki (CMYK color model, 2011).

26 Celostna grafična podoba in spletna predstavitev kulture playness 15 Subtraktivno mešanje Pri subtraktivnem (slika 6) mešanju pa ne mešamo svetlobe, ampak pigmente.»tako nastala barva namreč ni vsota obeh svetlob, ki bi jih vsaka barva zase prepuščala, ampak je le ostanek barve, ki je niti ena niti druga tekočina ali barvna snov ne absorbira. Zato imenujemo tako mešanje, ki pa utegne prav tako dovesti do popolnega zlitja barvnega vtisa, subtraktivno mešanje barv«(trstenjak, 1996, 168). Z dodajanjem enakih deležev cyan, magenta in rumene dobimo črno oziroma v praksi umazano rjavo barvo. Z mešanjem cyan in rumenega pigmenta dobimo odtenek zelene barve, z mešanjem rumene in magente dobimo odtenek rdeče ter z mešanjem magente in cyan dobimo modro. Takšno mešanje se uporablja v tiskarstvu. Slika 6: Subtraktivno mešanje barv Barvni krog Iz primarnih barv rumene, rdeče in modre je zasnovan dvanajstdelni barvni krog, ki je prikazan na sliki 7. V enakostraničnem trikotniku barvnega kroga so barve razvrščene tako, da je rumena na vrhu, rdeča desno spodaj in modra levo spodaj. Šesterokotnik vsebuje sekundarne barve, ki jih dobimo z mešanjem dveh primarnih barv: rumena in rdeča = oranžna; rumena in modra = zelena; rdeča in modra = vijolična.

27 Celostna grafična podoba in spletna predstavitev kulture playness 16 Slika 7: Barvni krog (Itten, 1999) Krog je razdeljen na dvanajst enako velikih odsekov. Primarne in sekundarne barve so v krog vnesene tako, da med dvema nanesenima barvama ostane še en prazen odsek. V tem odseku se nahajajo terciarne barve, ki jih dobimo z mešanjem ene primarne in ene sekundarne barve: rumena in oranžna = rumenooranžna; rdeča in oranžna = rdečeoranžna; rdeča in vijolična = rdečevijolična; modra in vijolična = modrovijolična; modra in zelena = modrozelena; rumena in zelena = rumenozelena. Barvni krog je torej razdeljen na dvanajst enakomernih barvnih delov, vsaka barva pa ima svoje nezamenljivo mesto.»barve si sledijo v istem zaporedju kot pri mavrici ali pri spektralnem traku«(itten, 1999, 30).

28 Celostna grafična podoba in spletna predstavitev kulture playness Barvni kontrast»o kontrastu govorimo takrat, kadar med dvema barvnima učinkoma, ki ju primerjamo med seboj, lahko opazimo določeno razliko«(itten, 1999, 32). Glede na značilnosti delovanja barv lahko ugotovimo sedem različnih kontrastov: kontrast barve k barvi; svetlo-temni kontrast; hladno-topli kontrast; komplementarni kontrast; simultani kontrast; kontrast kvalitet; kontrast količin. Kontrast barve k barvi Slika 8: Kontrast barve k barvi: rumena, rdeča, modra; Simbol slovenskega predsedstva Svetu EU (EU2008.si, 2011)»Tako kot črno-belo predstavlja najmočnejši svetlo-temni kontrast, tako dajo rumena, rdeča in modra najmočnejši kontrast barve k barvi«(itten, 1999, 33). Svetlo-temni kontrast vedno učinkuje barvito, glasno, močno in odločno. Kontrast barve k barvi, ki je prikazan na sliki 8, je manj izrazit, čim bolj so uporabljene barve oddaljene od treh primarnih.

29 Celostna grafična podoba in spletna predstavitev kulture playness 18 Oranžna, zelena in vijolična so po svojem značaju šibkejše kot rumena, rdeča in modra, ki so najmočnejši kontrast barve k barvi. Kontrast lahko upodobimo tudi z drugimi čistimi, nemešanimi barvami. Svetlo-temni kontrast Iz narave smo vajeni zaznavanja svetlobe in teme, svetlega in temnega. Črna in bela predstavljata najmočnejši svetlo-temni kontrast (slika 9). Razločujemo pa tudi barve enake svetlosti ali temnosti.»enake tonske vrednosti vežejo barve drugo na drugo ter jih združujejo«(itten, 1999, 41). Slika 9: Svetlo-temni kontrast: Rembrandt, Belsazar, 1635

30 Celostna grafična podoba in spletna predstavitev kulture playness 19 Hladno-topli kontrast Slika 10: Na obeh slikah je enaka vijolična barva; na zgornji sliki deluje toplo, ker so sosednje barve hladne, na spodnji pa hladno, saj so sosednje barve tople Poskusi s subjektivno zaznavo so pokazali, da modrozelen prostor učinkuje hladneje kot rdečeoranžno obarvan prostor. V barvnem krogu je razvidno, da je rumena barva najsvetlejša, vijolična pa najtemnejša, kar pomeni, da je med tema dvema barvama najmočnejši svetlo-temni kontrast. Horizontalno v barvnem krogu ležita rdečeoranžna in modrozelena, ki sta skrajni vrednosti kontrasta hladno-toplo. Tople barve so: rumena, rumenooranžna, oranžna, rdeča in rdečevijolična; hladne pa rumenozelena, zelena, modrozelena, modra, modrovijolična in vijolična. Modrozelena in rdečeoranžna sta kot skrajna pola vedno hladna oz. topla, vse ostale barve pa lahko učinkujejo ali toplo ali hladno odvisno od sosednje barve, ki je lahko hladnejša ali toplejša, kot jasno prikazuje slika 10. Kontrast hladno-toplo ima nekatere lastnosti, s katerimi sugerira bližino in daljavo (slika 11), zato je pomembno izrazno sredstvo za perspektivne in plastične učinke. Slika 11: Hladno-topli kontrast: Mathias Grunewald: Vstajenje, 1515

31 Celostna grafična podoba in spletna predstavitev kulture playness 20 Komplementarni kontrast Komplementarni kontrast sestavljata dve pigmentni barvi, ki dasta nevtralno sivočrno barvo, če ju med seboj zmešamo. V barvnem krogu si komplementarni barvi ležita nasproti in če sta uravnoteženi, dajeta najbolj uravnotežen par, čisto harmonijo. Komplementarni pari so: rumena : vijolična (tudi skrajna vrednost svetlo-temnega kontrasta); rumenooranžna : modrovijolična; oranžna : modra; rdečeoranžna : modrozelena (tudi skrajna stopnja hladno-toplega kontrasta); rdeča : zelena (njeni svetlostni vrednosti sta enaki slika 12); rdečevijolična : rumenozelena. Slika 12: Komplementarni kontrast rdeče in zelene: Vincent van Gogh: Le Café de nuit, 1888»Če komplementarne pare barv razčlenimo, ugotovimo, da vsak od njih vedno vsebuje tri osnovne barve rumeno, rdečo in modro: rumena : vijolična = rumena : rdeča in modra modra : oranžna = modra : rumena in rdeča rdeča : zelena = rdeča : rumena in modra«(itten, 1999, 49).

32 Celostna grafična podoba in spletna predstavitev kulture playness 21 Simultani kontrast Slika 13: Sumultani kontrast: Cruz Diez»Simultani kontrast imenujemo pojav, ko človeško oko ob dani barvi istočasno, torej simultano, teži tudi po komplementarni barvi; če je ni, jo ustvari sam«(itten, 1999, 52). Simultani kontrast (slika 13) nastane v očeh opazovalca, torej realno ni prisoten. Dalj časa ko opazujemo izbrano barvo in bolj čista kot je, močnejši je simultan učinek. Kot je razvidno iz slike 14, lahko učinek simultanega kontrasta povečamo ali pa ga povsem preprečimo. Prvi kvadrat simultani učinek povečuje, saj ima primešano rahlo zeleno komplementarno barvo. Srednji kvadrat je nevtralen, zato ga simultani učinek spremeni, pri tretjem pa je učinek izničen, saj je sivi pridana rahla rdeča. Simultani učinek je velikokrat nezaželen, lahko pa ga učinkovito izkoristimo. Slika 14: Povečan, spremenjen in zmanjšan simultani učinek

33 Celostna grafična podoba in spletna predstavitev kulture playness 22 Kontrast kvalitet Barvna kvaliteta je stopnja čistosti oziroma nasičenosti barv.»kontrast barvnih kvalitet predstavlja nasprotje med nasičenimi, svetlimi barvami in zastrtimi, toplimi barvami. Spektralne barve, ki nastanejo pri razklonu bele svetlobe, so najbolj nasičene in čiste«(itten, 1999, 55). Barve lahko zastremo na štiri načine: barvi pridamo belo, s tem postane hladnejša; zmešamo jo s črno in jo potemnimo; nasičeno barvo lahko zmešamo z belo in črno, tj. s sivo. Tako dobimo svetlejše; temnejše ali enako svetle tone. Barve postanejo nevtralne in motne; primešamo ji ustrezno količino komplementarne barve. Slika 15: Različna barvna čistost: Francisco de Goya, Don Manuel, 1784

34 Celostna grafična podoba in spletna predstavitev kulture playness 23 Kontrast količin Kontrast količin (slika 16) pomeni razmerje velikosti dveh ali več barvnih površin. Vprašanje je, v kakšnih medsebojnih velikostnih razmerjih morajo biti barvne ploskve, da so v ravnovesju in da nobena ni bolj izrazita od ostalih. Slika 17 prikazuje, kako je Goethe uredil barvno skalo količinskih razmerij glede na svetlost in čistost barve. Slika 16: Kontrast količine: Vincent Van Gogh: Café Terrace at Night, 1888 Slika 17: Rumena : vijolična = 1:3, oranžna : modra = 1:2, rdeča : zelena = 1:1

35 Celostna grafična podoba in spletna predstavitev kulture playness Oblika in barva Prav tako so barve razporedili glede na like (slika 18), katerim najbolj ustrezajo, kar nam pride prav pri reševanju prostorskih problemov: kvadrat rdeča (Rdeča je močna in stabilna osnovna barva. Nima močno izraženega ekscentričnega in ne koncentričnega gibanja. Daje nam izredno barvno privlačnost, oko pa jo izostri, zato je primerna za robove in vogale. Najbolj ji ustreza kvadrat, ki je eden najtrdnejših in najstabilnejših oblik.); trapez oranžna (Oranžna je manj surova barva kot rdeča. Njena rumena prisotnost jo naredi lažjo, je topla, suha in vsiljiva barva. Primerna je za obrise in fine detajle. Najbolj ji ustrezajo tiste oblike, ki imajo določene težnje po gibanju trapez.); trikotnik rumena (Rumena je najbolj svetla in vidna barva, zato deluje ostro, suho in živahno. Njen vpliv na oko ni dolgotrajen, ampak kmalu preneha, zato je ena najlažjih barv. Obenem se širi in ustvarja ostro sliko na očesu, to pa je glavni faktor za povezovanje oblik z barvami. Rumeni torej ustreza trikotnik, ki je zelo ostra in dinamična oblika, je pa tudi najbolj koncentrična oži se sama vase. Iz tega stališča nasprotuje rumeni, ki se širi.); krog modra (Modra je hladna, vlažna in prosojna barva. Dozdeva se nam, da se krči in umika v prostor. Na mrežnici ustvarja mehke in zabrisane oblike, zato z njo najlažje ustvarimo občutek globine. Uporabljamo jo tam, kjer niso pomembne ostrine in detajli, zato ji je najbližje krog zaradi svoje mehkobe in dinamičnosti.); stožec zelena (Zelena je hladna, sveža, mehka in prostorska barva, ki je oko ne more dodobra odrediti, zato ponavadi ni primerna za ostre robove in detajle. Čista zelena je najpomembnejša, najprivlačnejša in prijetna za oko. Zeleni ustrezajo mnogokotniki in stožec.); elipsa vijolična (Vijolična je mehka, zabrisana barva, ki deluje dvoumno in žalostno. Ni je mogoče dodobra izostriti, zato jo ponavadi ne uporabljamo za detajle. Najprimernejša oblika zanjo je elipsa. Slika 18: Liki s pripadajočimi barvami

36 Celostna grafična podoba in spletna predstavitev kulture playness Barve Rumena Je najsvetlejša od vseh čistih barv. Predstavlja snov, ki izžareva svetlobo. Simbolizira razum in znanje. Rumena v kontrastih učinkuje radostno in žareče. Je intenzivna, ostra, široka, najbolj ekspanzivna, sili čez okvire. Asociira na veselost, razsvetljenost, sončnost, inteligenco, akcijo, mladost, strahopetnost, izdajstvo Rdeča Je prilagodljiva in obsega najrazličnejše značaje. Rdeča ima topel značaj, ki se v rdečeoranžni stopnjuje do ognjene. Rdečeoranžna svetloba pospešuje rast rastlin in krepi organske funkcije.»v ustreznem kontrastu postane rdeča izraz vročične, bojevite strasti«(itten, 1999, 85). Pomeni tudi poduhovljeno ljubezen. Asociira na srečo, agresivnost, impulzivnost, optimizem, moč, moškost, dinamizem, mobilnost, strast, smrt, vojno, kri Modra Če na modro gledamo z materialno prostorskega stališča, je vedno pasivna, če pa jo gledamo z duhovno nematerialnega, pa je aktivna. Je hladna barva, ki učinkuje ponotranjeno, introvertirano. Sklada se z živčevjem. Je vedno senčna, po svoji svetlosti se nagiba k temi. Za nas je simbol vere. Asociira na poduhovljenost, ženskost, konservatizem, pobožnost, pravico, racionalnost, pasivizem, mir, zadovoljstvo, higieno, melanholijo, temačnost, dvom Zelena Zelena je barva rastlinskega sveta.»ko svetloba doseže zemljo, ko voda in zrak sprostita elemente, takrat požene kvišku oživljajoča moč zelene«(itten, 1999, 88). Zelena simbolizira plodnost, zadovoljstvo, mir, upanje, pa tudi združevanje ter prežemanje znanja in vere. Sivozelena daje občutek zaspane lenobe. Rumenozelena pomeni mladostno, pomladansko naravo. Zelena asociira na naravo, rodnost, življenje, upanje, blagostanje, stabilnost, varnost, pa tudi na razpadanje, plesen, sovražnost, ljubosumje

37 Celostna grafična podoba in spletna predstavitev kulture playness 26 Oranžna Oranžna ima sončno svetlost, ki svojo največjo toplo in aktivno energijo doseže pri rdečeoranžni. Praznična oranžna zlahka postane ponosna in bahava. Oranžna asociira na komunikacijo, ženitev, organsko, ambicijo, vedrost, ekspanzivnost, bogastvo, radodarnost, sprejemljivost, zlovoljnost Vijolična Predstavlja nezavedno, skrivnostno, včasih deluje grozeče, drugič osrečujoče, zdaj veselo, zdaj potrto - odvisno od kontrastov. Če je na večjih ploskvah, deluje grozljivo. Vijolična je barva nezavedne pobožnosti, potemnjena pa mračnega praznoverja in skrivnostne katastrofe. Svetlo vijolična razsvetljuje temno pobožnost, je nežna in prijazna. Črna Črna barva predstavlja kontrast beli, izraža pasivnost, stanje izpolnjene in nespremenljive smrti. Asociira na neprodornost, razlikovanje, eleganco, temnost, smrt, bolezen, obup, zanikanje, notranjo tišino, zlo, greh Bela»Bela je absolutna, pomeni odsotnost in vrhunec barv. Je barva vrnitve, simbol sveta in absolutna tišina«(repovš, 1995, 98). Asociira na čistost, osvežitev, popolnost, neskončno svobodo, resnico, praznino, absolutno tišino, praznost 3.5 Tipografija»Če razmislimo o svojih vsakodnevnih dejavnostih, nam hitro postane jasno, da je tipografija povsod in se ji ne moremo izogniti. "Napisano" se najprej nanaša na "ročno napisano", vendar obstajajo številni načini predstavitve pisanega jezika z uporabo tehnologij, kot so tisk, tekstovna sporočila, elektronska sporočila, tiskalniki Beseda tipografija vključuje vse te metode komunikacije. Tipografija in pisanje sta povsem naravno od nekdaj povezana: tipografija je disciplina in strokovna praksa, ki variira med sporočilom in prejemnikom. Za razumevanje slovnice tipografije, moramo poznati in

38 Celostna grafična podoba in spletna predstavitev kulture playness 27 razumeti jezik ter vedeti, kako je prilagojen za delovanje v različnih socialnih kontekstih«(jury, 2006, 8). Oblikovalci morajo pri delu izbirati med tipografijo, ki je niso sami zasnovali. To lahko predstavlja omejitev, posebno takrat, kadar razpoložljiva tipografija ne ustreza estetskim in tehničnim zahtevam. Ruder pravi, da izbira med že narejenimi tiskarskimi črkami predstavlja bistvo veščine in ne slabost. (Ruder, 1977, 8). Tipografija, ki sestavlja besedilo in naslove, ter način, kako je predstavljena, vpliva na obliko in sporočilnost bolj kot katerikoli drug vizualni element. Vsaka pisava bralcu sporoča določene informacije, kot so razpoloženje, drža, ton, pomaga pa nam tudi pri razumevanju sporočila.»dober oblikovalec naj ne meša med seboj tiskanega in pisanega. Tisk ne more nikoli doseči enkratne spontanosti rokopisa«(ruder, 1977, 22). Pri oblikovanju moramo biti dosledni slediti moramo tipografskemu vzorcu, ki smo si ga zamislili. Ruder pravi, da naj bi podjetje v javnosti nastopalo z enotno tipografsko podobo, od najpreprostejših tiskovin, do zahtevnega oglaševalskega materiala.»za vzpostavitev enotne pojavnosti je treba uporabljati naslednje tipografske elemente v kar se da stalnih oblikah: znak, značilno ime podjetja, barvo in ureditev«(ruder, 1977, 214). Tipografija je oblikovanje besedila iz tiskanih črk na določeni likovni površini. Tipografija je značilno oblikovanje pretežno verbalnega sporočila na likovni površini. V oblikovanje se poleg črk vključuje tudi druge like z ilustracijami in fotografijami, da se ustvari in okrepi sporočilnost komunikacijskega sporočila. Izbor črkopisa, velikosti črk, vrsta naslonila, črkovni, besedni in vrstični presledki dajejo končno podobo sporočila, ki tudi s svojo tipografsko podobo ustvarja imidž organizacije.»najvažnejša naloga tipografskega oblikovalca je posredovanje tiskanega sporočila. Nečitljiv in neberljiv tisk je izdelek brez vrednosti. Tipograf, pravi Ruder, daje besedi vidno obliko in jo ohranja za prihodnost«(ruder, 1977, 34). V CGP mora izbrana tipografska podoba komunikacijskih sporočil izražati strateška izhodišča organizacije in podobo, kakršno želi organizacija ustvariti v očeh ciljne javnosti.»č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 svoj karakter, ki ga oblikujejo značilnosti (slika 19), kot so: verzalka, mala črka, višina male črke, serifi, vratovi in repi, loki, zožitve in odebelitve, okenca, grebeni, ostroge, prehodi itd.«(repovš, 1995, 117,118).

39 Celostna grafična podoba in spletna predstavitev kulture playness 28 Rep: del črke, ki sega pod osnovno črto. Serifi: kratke prečne zaključne poteze na koncu črke tudi ime za pisave s serifi. Višina verzalke: razdalja med osnovno črto in vrhom velike tiskane črke. Višina x: višina malih tiskanih črk. Votlina, okroglina: notranjost pri nekaterih črkah. Vrat: del črke, ki sega v zgornje črkovno polje (povzeto po Parker, 1997). Slika 19: Značilnosti črk (Repovš, 1995) Črke so lahko pisane pokončno ali ležeče. Kurzivne črke delujejo bolj zaupno, saj so bližje rokopisu. V besedilu se lahko menjajo značilnosti črk z namenom poudarka ali razlikovanja besede ali dela besedila. Črke so lahko tudi tanke, svetle, navadne, polkrepke, krepke, odebeljen ali zožene, normalne, razširjene. Značilnosti se lahko tudi kombinirajo, na primer razširjene krepke. Črkovna družina so vse črke in spremljajoči znaki znotraj določenega črkopisa v različnih debelinah in širinah, v pokončni ali poševni obliki. Besedilo lahko poravnamo na sredinsko, levo, desno ali obojestransko naslonilo.»najmanj utrujajoče in najhitrejše je branje besedila z obojestranskim naslonilom. Robovi besedila so navpično poravnani na njegovem levem in desnem robu«(repovš, 1995, 119). Sredinska poravnava je utrujajoča in težko berljiva, saj se besedilo v vsaki vrsti začne in konča v drugačni razdalji od glavnega roba likovne površine. Tudi besedilo z desnim naslonilom je težko berljivo, močno pa se zmanjša hitrost branja.

40 Celostna grafična podoba in spletna predstavitev kulture playness 29 Širina besedila močno vpliva na čitljivost besedila.»preširok stavek se spreminja v dekorativno sivino in ga je težko brati. Proti koncu vrstice se bralec že utrudi, prekinitev ob začetku nove vrstice pa ga osveži. Čitljivost je odvisna od števila črk v vrstici. Vrstica s črkami je dobro čitljiva«(ruder, 1977, 43). Presledki med črkami, besedami, vrsticami ter prostor okoli besedila vplivajo na čitljivost, berljivost in estetsko vrednost tiskanega besedila.»presledke med besedami je potrebno nadzorovati, da so tam, kjer se zahteva nemoten pretok informacij, prostori majhni, kolikor je le mogoče. Kljub temu da je prostor med posameznimi črkami že v naprej določen s strani oblikovalca pisave, ga moramo vedno preveriti«(jury, 2006, 94).»Presledki morajo biti z belino črk harmonično usklajeni. Z razdaljo med črkami tipograf lahko učinek notranje beline črk poveča ali zmanjša«(ruder, 1977, 52). Berljivost je slabša, če je razmik med besedami in črkami premajhen. Premajhni presledki med vrsticami ustvarjajo gmoto enega lika, iz katerega je težko razbrati posamezne vrstice teksta. Če pa je razmik med vrsticami prevelik, se pogled ujame v praznino, čitljivost in berljivost pa sta tako slabši. Tesni črkovni presledki povečajo izraznost praznine znotraj črk, ki je pri krepkih črkah večja kot pri svetlih. Postavljanje črkovnih presledkov, tako imenovano spacioniranje, je težavno delo, saj so si črke med seboj različne zaradi specifičnih oblin, vršičkov, prečk, repov itd. Postavljene ena zraven druge, skupaj s praznino tvorijo različne protioblike.»logotipi, naslovi in naslovna besedila, postavljena brez krojenja (spacioniranja), izražajo neprofesionalno in slabo estetsko kulturo grafičnih oblikovalcev«(repovš, 1995, 121). Besedilo lahko členimo s praznimi prostori, črtami, barvami, različnimi črkopisi in različnimi pojavnostmi črk. Vse to razgiba likovno podobo, ustvarja poudarke, razbija monotonost, povečuje čitljivost ter ustvarja estetsko in pomensko vsebino tipografske podobe. Poleg črk in praznine so osnovni elementi tipografskega oblikovanja tudi pika, črta in ploskev, s katerimi vzpostavljamo arhitekturo komunikacijskega sporočila. V pomoč so nam pri organizaciji likovnega gradiva. S piko, črto in ploskvijo tipografijo omejujemo, ločujemo, z njimi ustvarjamo ravnotežje, umirjamo, ostrimo napetost, odpiramo, ustavljamo pogled ali pa ga vodimo, poudarjamo ali potiskamo v ozadje.

41 Celostna grafična podoba in spletna predstavitev kulture playness 30 Tipografska podoba je celoten vidni vtis oziroma zaznava, ki je zgrajena z različnimi tipografskimi sredstvi na likovnem ozadju komunikacijskega sredstva. CGP izraža želeno realno identiteto z opredeljeno značilno tipografsko podobo, ki daje vtis načrtovane, vedno prepoznavne urejenosti likovnega gradiva. Samara Timothy pravi, da so vsa tipografska pravila namenjena temu, da jih lahko prekršimo. Pravila ostajajo ista kako pa so uporabljena, je tisto, kar se spreminja. Učinkovito tipografsko oblikovanje se začne z razumevanjem bistvenih lastnosti, skrivnostjo, kako lahko manipuliramo s temi lastnostmi in kako ta manipulacija vpliva na tipografijo (Timothy, 2006). 3.6 Logotip in znak Beseda "logotip" izhaja iz grške besede "logos" besedo in "tupos" vtis. Logotip lahko poimenujemo tudi blagovna znamka, storitvena znamka, znamka (Newark, 2007, 120). Logotip je prepoznavni simbol podjetja, objekta, objave, osebe, storitve ali ideje. Je znak, ki se nahaja na dnu televizorja, na vrhu škatle s kosmiči ali v glavi pisma. Na žalost ima beseda "logo" veliko pomenov in uporabljajo se različne besede za opis iste stvari, logotipa (Sean, 2004). Angleški izraz logo prevajamo z besedo znak (Logotip, 2011). Znak je lahko besedni, simbolni, slikovni ali kombinacija le-teh (Newark, 2007, 120).»Logotip je ime organizacije ali blagovne znamke, ki je izpisano z značilnimi črkami«(repovš, 1995). Logotip je razlikovalni znak podjetja, izdelka, storitve ali vrste proizvodov in storitev iz istega vira. Logotip je lasten podjetju, ki ga reprezentira in ga lahko zaščitimo kot blagovno znamko, trgovsko ime ali registrirano znamko. Lahko je tipografski, figurativen, abstrakten ali kombinacija naštetega. Je eden izmed osnovnih elementov celostne podobe ali identitete blagovne znamke. Logotip podjetja, celostna podoba, blagovna znamka označujejo natančen simbol, ki predstavlja podjetje v vsaki komunikaciji z zunanjim svetom. Za gradnjo zaupanja potencialnih strank do podjetja je nujno potrebna preprosta in učinkovita interpretacija ciljev, vrednot in strokovnega znanja. Javno identiteto lahko danes ustvarimo s pomočjo vizitk, dopisnih listov, brošur, oglasov, oblačil, spletne strani, promocijskih materialov (Dabner, 2010).

42 Celostna grafična podoba in spletna predstavitev kulture playness 31 Oblikovanje logotipa sega daleč v zgodovino identificiranja znamke, ki se nanaša ne le na komercialno uporabo (kot blagovna znamka za podjetje ali organizacijo), ampak tudi na osebni, rodovni in kulturni kontekst. Izhaja iz simbolike in znakov, in ker obstaja iz predneolitskega časa, logotip dandanes nikomur ni tuj. Takoj prepoznaven, zapomnljiv in dobro zasnovan logotip je prilagodljiv na več načinov, od dimenzij do uporabe, vendar dovolj prožen, da nemudoma ohranja svojo identiteto v mislih gledalcev in skozi prihodnji razvoj. To je hkrati temelj in osnovno načelo za razvoj blagovne znamke. Odločitve o slogu, barvi, estetiki in tipografiji logotipa ustvarijo temelj, na katerem bo zasnovana celotna marketinška strategija. Oblikovalec nato implementira bistveno idejo v sistem elementov, ki prikazujejo edinstveno sliko in idejo, s tem pa ustvarja identiteto podjetja. Znaki in logotipi podjetja/organizacije so prvo, kar opazimo in si najbolj zapomnimo od vsega poslovnega premoženja. Profesionalno oblikovani logotipi zgradijo originalno poslovno identiteto ter umeščajo organizacijo v svet informacij in simbolov. Med kakovostne znake in logotipe danes spadajo vse tiste stvaritve, ki jih odlikuje: posebnost; praktičnost; grafičnost; enostavnost forme; eno sporočilo; primernost (Korelc, 2010). Ivan Chermayeff, Tom Geismar in Steff Geisbuhler (oblikovalci znakov Mobil, National Geographic, Chase Bank ) so podali temeljno formulo logotipa: Znamka je oboje: oblika in vsebina, podoba in ideja. Da bo učinkovita, mora biti njena oblika dovolj razširjena, da jo bo mogoče prepoznati in dovolj nenavadna, da je ne bo mogoče pozabiti. Zasnovana mora biti dovolj sodobno, da odraža svojo dobo, vendar ne preveč, da ne izgine pred desetletjem. Nazadnje, biti mora enostavna, da si jo lahko zapomnimo in primerna idejam in aktivnostim, ki jih predstavlja (Newark, 2007, 120).

43 Celostna grafična podoba in spletna predstavitev kulture playness 32 4 OBLIKOVANJE LOGOTIPA KULTURE PLAYNESS Do ideje vodijo različne poti, a proces ustvarjalnega mišljenja je mogoče opisati po enotni metodologiji. Kreativno snovanje grafičnega simbola po Repovšu je sestavljeno iz treh faz: informacije, inkubacije in iluminacije (Repovš, 1995). Graham Wallas je proces ustvarjalnega reševanja problemov s stališča psihologije definiral s štirimi fazami: priprava, inkubacija, iluminacija in verifikacija. Srića dodaja še zadnjo fazo, implementacijo. Faze se med seboj do neke mere prekrivajo, vendar z njihovo pomočjo vseeno lahko bolje spoznamo pot do inventnih metod in novih, izvirnih idej (Srića, 1999, 55). V prvi fazi pripravi, informacije oziroma identifikacije mora oblikovalec dobiti čim več informacij o organizaciji, ki želi imeti prenovljeno, ali v našem primeru, novo celostno grafično podobo. Oblikovalec se mora razgledati po literaturi, ki obravnava grafično oblikovanje, in po letnih pregledih simbolov in CGP-jev s celega sveta. Potrebno je čim natančneje definirati problem, razumeti moramo cilj, ki ga želimo doseči.»v fazi inkubacije oblikovalec razmišlja o odnosih med zbranimi informacijami, ki se grupirajo na različnih miselnih nivojih in prihajajo iz ene informacijske gmote v drugo; vsaka od njih je oplemenitena s stališči in ostalimi vedenjskimi lastnostmi oblikovalca«(repovš, 1995, ).»Inkubacija (ali čakanje, da čas prinese rešitev) je pogosto najpomembnejša faza pri ustvarjalnem premagovanju problemov. Včasih lahko traja samo sekundo ali minuto, včasih pa se lahko razvleče na dneve, tedne in celo leta«(srića, 1999, 59). Čas inkubacije je spremenljivka, ki je neodvisna od kreatorja grafičnega simbola. Inkubacijska doba bo krajša, če bo imel oblikovalec več informacij o tipu simbola, želenih barvah Naslednja faza je tako imenovana iluminacija (razsvetljenje, rojstvo ideje) ali inspiracija (navdih).»intuitivni prebliski ne pridejo takrat, ko se povsem izključimo. Pojavijo se takrat, ko smo popolnoma v problemski situaciji. Takrat um odkrije informacije, ki

44 Celostna grafična podoba in spletna predstavitev kulture playness 33 manjkajo, in tako se nam podzavestno posreči odkriti nekaj novega«2 (Srića, 1999, 61). Izoblikuje se ideja, ki je celovita in dokončna, opredmetena in neponovljiva. Ni nujno, da bo ustrezala naročniku oz. realni identiteti organizacije, zato se bo mogoče potrebno vrniti v fazo inkubacije. Ko zamisel razvijemo, testiramo, ocenimo in sprejmemo, sta na vrsti verifikacija in implementacija (izvedba). V fazi verifikacije se ideja izpopolnjuje in vpleta manjše popravke. Izvedbi zamisli sledi načrt njene konkretne uporabe (Srića, 1999, 63). Proces snovanja se začne v oblikovalčevi glavi, s pomočjo pisala pa se prenese na papir, in šele kasneje, ko je ideja že vizualizirana, na računalnik. Skice nastanejo v inkubacijski fazi. Dobro jih je ponuditi v presojo naročniku. Oblikovalci so komunikatorji, ki morajo imeti talent, znanje in izkušnje, da lahko v likovne strukture simbolov vkodirajo načrtovana sporočila organizacij. Dober simbol mora bit učljiv, prepoznaven, razlikovalen, berljiv in referenčen. Te lastnosti med seboj delujejo sinergično, na primer dobra berljivost povečuje učljivost.»učljivost simbolov lahko merimo s številom prezentacij, ki so potrebne, da lahko osebe dokaj natančno opišejo ali narišejo simbole«(repovš, 1995, 106).»Prepoznavnost je lastnost simbola, ki se meri s časom, ki je potreben, da simbol prepoznamo v množici drugih simbolov ali vidnih dražljajev«(repovš, 1995, 106). Razlikovalnost pomeni, da je simbol sestavljen iz likovnih struktur, ki ga močno razlikujejo od ostalih simbolov. Simbol z dobro razlikovalno lastnostjo ne zamenjamo zlahka s kakšnim drugim simbolom, ker je dovolj značilen, unikaten.»berljivost je ključna pozitivna lastnost tipografskih grafičnih simbolov«(repovš, 1995, 106). Preizkuša se s časom, ki ga potrebujemo, da iz določenega simbola natančno razberemo zlog ali besedo. Referenčnost je sposobnost simbola, da predstavlja stvari, dogodke, ideje.»referenčnost simbolov merimo po tem, koliko jih ljudje pripisujejo določenim organizacijam, dejavnostim ali idejam«(repovš, 1995, 106). 2 Prvotni vir: Roy Rowan, The Intuitive Manager, Wildeood House, Aldershot, 1987, 143.

45 Celostna grafična podoba in spletna predstavitev kulture playness Informacija, identifikacija ali definiranje problema V procesu informacije moramo pridobiti čim več podatkov o organizaciji. Slediti moramo cilju, ki je: izdelati prepoznaven logotip in znak kulture playness. Najprej pa je treba kulturo playness predstaviti. Kaj je playness?»playness kultura je kazalec utopične in žal zgolj navidezne realizacije blaginje človeka. Če se je človek lahko uprl avtoritarnemu discipliniranju množic v obliki enotnih nacionalnih telovadnih sistemov (sokoli, turnerji itd.), ki so poudarjali podrejenost državi; če se je človek lahko uprl do skrajnosti privedene tekmovalnosti, ki je iz posameznika svobodno vlekla zadnje atome energije; če se človek lahko upira notranjemu glasu (ponotranjeni diktator) morale in estetskih idealov avtomatizitranih fitnes podob; in če se človek težko upira dionizičnemu razvratu wellness in selfness dobrot; se zagotovo ne more upreti playness kulturi. Namreč, playness kultura pooseblja in simbolizira idealno družbeno stanje blaginje vseh. Playness kultura ugotavlja in priznava, da je razigran človek najmanj izigran človek. Playness kultura se ne ozira po telesu, temveč cilja na človečnost samo (na humanost) in je zato edina sposobna vključiti otroško, žensko, moško, bolno, staro, hetero, homo itd. telo, kar prejšnjim obdobjem ni uspelo. Playness kultura odraža visoko stopnjo blaginje, medčloveškega zaupanja in libertarne urejenosti družbenih struktur (socialna varnost in materialna preskrbljenost), ki so razbremenjene (pa čeprav zgolj za kratek čas) borbe za položaj. Gre za sinergijski presežek vsote značilnosti vseh prejšnjih razvojnih faz telesne kulture (disciplina, podrejenost skupini, tekmovalnost, egoizem, askeza, usmerjenost k rezultatu, usmerjenost k procesu, podrejenost ponotranjenim idealom, individualizem, elitizem, hedonizem, eroticizem itd.). Igra in igrivost se ob koncu borbe za položaj pokažeta kot edini koncept trajnosti, ki lahko ohranja človeka v humani kondiciji. Playness kultura končno postavi človeka v središče in ne dela ali igre kot prejšnji ideološki sistemi. Zato se v playness kulturi človek lahko resno igra ali igrivo dela in pri tem ohranja svoje dostojanstvo kot človek, ki osmišlja svoje bivanje in pri tem uživa, ustvarja. V playness kulturi smo priča razcvetu človeka kot človeka (in ne kot telovadca-državljana, športnika-individuuma, narcisa, bon-vivana, perverzneža in brezbrižneža)«(hosta, 2009). Za dobro celostno grafično podobo je potrebno pregledati že obstoječe celostne podobe. V drugem raziskovalnem vprašanju smo se spraševali, kakšni so logotipi, znaki in spletna mesta različnih splošnih športnih kultur.

46 Celostna grafična podoba in spletna predstavitev kulture playness 35 Kultura playness je edinstvena in nova na trgu, zato takih podob še ni. Predhodniki playnessa pa so fitnes, welness in selfness, zato smo poiskali že obstoječe podobe le-teh, ki so razvrščene na sliki 20. Ugotovili smo, da obstajajo nekatere značilnosti, ki se ponavljajo. Pri znakih za fitnes prevladujejo človeške figure in žive, močne ter predvsem tople barve. Tipografija pri fitnes logotipih ima poudarjene linije in ostre robove. Pri wellnessu in selfnessu so barve umirjene, hladnejše in svetlejše. Tipografija, ki se pojavlja, ima mehke, zaokrožene linije. Ponazarja nežnost, razvajanje, umirjenost, uživanje. Slika 20: Obstoječe podobe fitnes, welness in selfness klubov, centrov, studiev

47 Celostna grafična podoba in spletna predstavitev kulture playness Inkubacija Naročnik je izrazil željo, naj bo logotip kulture playness igriv, živahen, vpadljiv in hkrati vabljiv. Nastale so skice, prikazane na sliki 21. Znak in logotip smo si zamislili kot kombinacijo človeških figur ter določene tipografije. Slika 21: Skice na listu papirja Izdelali smo več človeških silhuet, ki so prikazane na sliki 22. Človeška silhueta ponazarja igrivost, gibanje, zabavo. Več figur v skupini predstavlja playness kot možnost skupinskega športa in druženja. Različne velikosti figur se nanašajo na družino oziroma otroško, žensko, moško, bolno, staro, hetero, homo, skratka raznovrstno telo, ki se lahko udejstvuje v playness kulturi. Slika 22: Človeške figure

48 Celostna grafična podoba in spletna predstavitev kulture playness 37 Izbrati je bilo treba tudi tipografijo, ki bo ustrezala namenu playness kulture. Odločali smo se med pisavama Bolonewt in Arista (slika 23). Prva pisava je tanjša z ostrimi linijami, druga pa debelejša z mehkejšimi linijami. Obe delujeta igrivo, vendar Arista s svojimi zaobljenimi potezami doda mehkobo, kljub temu pa ohranja čistejše linije. Slika 23: Tipografiji v ožjem izboru Iluminacija ali inspiracija Slika 24: Črno-bele in barvne kombinacije Skice, ki so nastale v fazi inkubacije, smo prenesli na računalnik in iskali rešitve, ki so prikazane na sliki 24. Človeška telesa na sliki 25, ki se pojavljajo kot znak kulture playness, so predstavljena figurativno, brez detajlov na obrazu in prave silhuete. Figure dvigajo roke v zrak v znak gibanja, zdravja, dobrega počutja, vitalnosti, razigranosti

49 Celostna grafična podoba in spletna predstavitev kulture playness 38 Različne velikosti figur se nanašajo na družino oziroma otroško, žensko, moško, bolno, staro, hetero, homo, skratka različna telesa, ki se lahko udejstvujejo v playness kulturi. Slika 25: Znak in logotip kulture playness za različna področja Izbor barv je temeljil na različnih barvnih odtenkih s prevlado toplih. Figure so različnih barv, saj je tudi kultura playness namenjena široki paleti ljudi in zajema vrsto različnih aktivnosti. Tako nas rumena navdaja z akcijo, radostjo in igrivostjo, ki je pri kulturi playness poglavitna, zelena je barva življenja, združevanja in vitalnosti, modra pa simbolizira zadovoljstvo. Rdeča barva tipografije simbolizira veselje in energičnost. Da vse skupaj ne bi prešlo v agresivnost in vročekrvnost, je pridana zelena barva napisa culture, center ali guru, ki osveži in ohladi celoto. Odločili smo se za tipografijo Arista, saj je igriva in razgibana. Robovi črk so zaobljeni, kar deluje mehko in povezano, v kontrast temu pa je tipografija odebeljena, kar prida

50 Celostna grafična podoba in spletna predstavitev kulture playness 39 odločnost in trdnost. V črki P je negativen prostor v obliki kroga, kar lahko razumemo kot povezanost ljudi v playness kulturi ali skupen prostor, celoto, ki nudi igrivost. Ker gre pri kulturi playness tudi za vzpostavitev centrov, je v logotipu označeno, ali gre za playness kulturo na splošno ali za playness center ali za playness guru izobraževalno središče Verifikacija in implementacija»dobra zamisel se potrjuje z uporabo«(srića, 1999, 62). Primeri uporabe znaka in logotipa kulture playness so predstavljeni v prilogi. Skozi predhodna poglavja smo odgovorili na prvo in deloma na drugo raziskovalno vprašanje: Kako izdelati učinkovito in prepoznavno celostno grafično podobo? Kakšni so logotipi, znaki in spletna mesta različnih splošnih športnih kultur? Najprej smo pregledali obstoječo literaturo. Spoznali smo, zakaj sta pomembna identiteta in imidž podjetja. Pregledali smo likovno teorijo, saj nam je to znanje dalo temelje, ki so potrebni za zasnovo celostne grafične podobe. Na prvi stopnji kreativnega snovanja je treba pridobiti čim več informacij, ki nam bodo v pomoč pri oblikovanju. Med drugim je to tudi pregled obstoječega stanja logotipov in znakov različnih športnih kultur, ki smo jih izbrali in analizirali. Po naslednjih stopnjah kreativnega snovanja smo nato izdelali znak in logotip kulture playness.

51 Celostna grafična podoba in spletna predstavitev kulture playness 40 5 SPLETNO OBLIKOVANJE Spletne strani so pomemben del podobe podjetja. Vse več informacij poiščemo na internetu, torej si prav tam tudi ustvarimo prvi vtis o podjetju, organizaciji, znamki, kar je ključnega pomena. Pri oblikovanju moramo biti pozorni na vsebino, funkcionalnost in strukturo. Funkcionalnost spletne strani prevlada nad obliko, saj na spletu iščemo točno določene informacije, do katerih želimo priti hitro in na enostaven način. World Wide Web Spletne strani oziroma World Wide Web so razvili okrog leta 1980 v Švici.»Spletne strani so datoteke, ki jih lahko na zaslonu vidimo kot manjše programe. Datoteke so shranjene na računalnikih, ki so stalno priključeni v omrežje Internet«(Mrhar, 2002, 9). Glavna značilnost spletnih strani je povezanost. HTML Hyper Text Markup Language je označevalni jezik za izdelavo spletnih strani. Predstavlja osnovo spletnega dokumenta. S pomočjo HTML lahko ustvarimo strukturo in semantično ureditev dokumenta. Pišemo ga lahko v vsakem urejevalniku besedil in je dokaj preprost, zato ga lahko kombiniramo tudi z drugimi programskimi jeziki. CSS Kratica CSS pomeni v angleščini Cascading Style Sheets oziroma slovensko kaskadne slogovne ploskve. Z njimi določamo slogovne značilnosti spletnih strani, kot so odmik besedila od roba, pisave, ploskve, črte, ozadja, seznami, slike CSS je glavni element v izdelavi spletnih strani, odkar vključuje skupek navodil, ki brskalniku povedo, kako predstaviti stran. Lahko se nahaja v HTML-kodi ali posebej, kot pripet dokument. CSS je jezik s svojo sintakso in konceptualno strukturo. Dovoljuje prilagodljivost in hitrost, ki je ni treba vmešavati v osnovno drevo dokumenta. CSS se lahko nanaša na več določenih oznak (tags), ki jih določimo v HTML-kodi. S CSS-stili nam ni treba spreminjati vsakega

52 Celostna grafična podoba in spletna predstavitev kulture playness 41 elementa posebej, ampak z enim ukazom, na primer, določimo, kakšno podobo bodo imeli vsi glavni naslovi na spletni strani. Urejena CSS-koda ima še eno poglavitno prednost, tj., da jo spletni iskalniki ali pajki lažje zaznajo, kar je poglavitnega pomena pri optimizaciji spletnih strani. Ključni koncepti kaskadnih stilov: CSS-stili elegantno razgradijo stran in omogočajo lažje preoblikovanje in posodabljanje strani; omogočajo izbiro določenega stila in odstranitev vseh elementov, ki niso nujno potrebni za predstavitev strani; omogočajo predstavitev iste strani z različnimi stili za različne medije (ekran, mobilne naprave, tisk), brez da bi posegali v vsebino strani. Spletna stran prikazuje zmožnosti in fleksibilnost kaskadnih stilov. Na strani lahko izbiramo med več CSS-stili, medtem ko vsebina ostaja vedno ista. 5.1 Značilnosti spleta Oblikovanje za splet je postalo hitro razvijajoče se področje. Oblikovalec mora spoštovati in reinterpretirati osnove oblikovanja in načela, da izpolnjujejo vse razvijajoče se zmožnosti tehnologije. Poleg vključevanja na področja, kot so oblikovanje vizualnih informacij, estetika in kompozicija, mora spletni oblikovalec dokazati tudi razumevanje sodobnih tehnoloških obravnav, kot so kodiranje, interakcija z uporabnikom in spletni trendi. Najbolj neposredna pot za ustvarjanje spletne strani, ki je tako uporabna kot tudi dobro zasnovana, je razumevanje omejitev in svoboščin, ki izhajajo iz tehnologije, in prepletanje le-tega s pričakovanji strank in občinstva. Uporabnikova resolucija ekrana, razlike med brskalniki, osebne nastavitve uporabnika in starost uporabnikovega računalnika igrajo veliko vlogo pri odločanju, kako pripraviti vsebino za določen projekt. S časom, porabljenim za oblikovanje, in ključnimi vidiki, kot so kompozicija, barva in sporočilo, ki prihaja v ospredje pri spletnem oblikovanju, prezentacija postane interpretacija napisane kode. Programiranje kode je tok navodil, ki podrobno opišejo, kako

53 Celostna grafična podoba in spletna predstavitev kulture playness 42 bodo brskalniki sestavili vsebino in posnetke v vizualno prezentacijo, ki jo mi kot končni uporabniki vidimo. Spletni razvijalci in programerji so razširili "internetni jezik" za ustvarjanje širokih možnosti, vključno z inovacijami, kot so flash animacije, dinamične interakcije, komunikacije v realnem času in obdelava podatkov na strani. Oblikovalci pripravijo stran v poljubnem oblikovalskem programu in jo potem prenesejo v kodo. Najpomembneje je, da se zavedamo, da je spletna stran le sredstvo za posredovanje sporočil občinstvu. Včasih so bile spletne strani narejene s pomočjo kompleksnih omrežij tabel, z malo slikami, ki so sestavljale celoto. Leta 2001 je World Wide Web Consortium nadgradil HTML v XHTML in sprejel CSS, ki dovoljuje uporabniku ločitev oblike od vsebine. Z mislijo na spletno prihodnost ali njeno razširjenost, je glavni razlog za ločitev oblike od vsebine ta, da izolacija pomaga pri zagotavljanju varnosti prihodnjim brskalnikom z zmanjšanjem kompleksnosti strukture strani, ki tudi vodi k lažjemu osveževanju vsebine ob ohranitvi oblike. Poznamo dve vrsti spletnih strani: statične in dinamične. Statična spletna stran je spletna stran s fiksno vsebino, ki je zapisana neposredno v datoteko spletne strani. Spletno stran lahko tako ureja le programer oziroma tisti, ki je vajen jezika, iz katerega je spletna stran sestavljena, in ima pravice za dostop do datotek. Za pripravo statične spletne strani zadošča samo osnovno znanje označevalnega jezika HTML. Dinamična spletna stran je spletna stran z lahko spreminjajočo se vsebino, ki je zapisana ločeno od spletne strani v podatkovni bazi. Spletno stran lahko preko ustreznega vmesnika ureja vsak informacijsko pismen uporabnik. Za pripravo dinamične spletne strani je poleg znanja označevalnega jezika HTML potrebno še znanje enega od zahtevnejših spletnih programskih jezikov ter znanje enega od podatkovnih jezikov SQL (Statična spletna stran, 2010) Tipografija na internetu Internet ohranja hitro nalaganje strani celo na najpočasnejši računalnikih, saj pisave, ki jih strani uporabljajo, niso vključene v vsako spletno stran. Uporabljene pisave so vzete iz nabora datotek, ki so naložene na vsak računalnik. Tako je postalo vsakdanje, da se za spletno vsebino uporabljajo pisave, ki so največkrat na voljo. Ta omejitev je prisotna že od

54 Celostna grafična podoba in spletna predstavitev kulture playness 43 začetkov interneta in je navdušila številne oblikovalce za uporabo omejenega števila pisav za dosego uspešnih in osupljivih strani. Najpogostejše pisave so: Arial; Courier; Georgia; Times New Roman; Verdana; Trebuchet MS; Comic Sans; Lucida; Impact; Tahoma (Dabner, 2010, 153) Barve na internetu Monitorji prikazujejo širok spekter barvnih vrednosti. Končni izdelek variira od nastavitev posameznega monitorja. Barva na internetu je zapisana v šestnajstiškem sistemu. Sestavljena je iz znaka # in šestih številk od 0 do 9 ali črk od a do f (slika 26). Koda se nanaša na primarne barve: rdečo, zeleno in modro (RGB), od katerih vsako barvo predstavljata dva znaka v kodi. Tako # pomeni črno barvo, #ffffff belo, #ff0000 rdečo, #00ff00 zeleno in #0000ff modro barvo. Za spletne strani lahko uporabljamo 216 "web-safe 3 " barv (Dabner, 2010, 153). 3 Pred nekaj leti so računalniki lahko prikazovali samo 256 barv. Poleg razvijalcev programske opreme so kontrolo nad barvnimi paletami dobili še spletni oblikovalci. Pojavila se je potreba po prikazovanju več kot samo 256 barv, saj so bile nekatere barve na spletu le približki pravih.»da bi se tem težavam ognili, je Netskape določil posebno paleto 216 rezerviranih barv, ki bi jih moral biti brskalnik vedno sposoben prikazati. To paleto so poimenovali "web safe colors", oziroma barve, varne za splet. Te barve naj bi se tako v brskalniku prikazale vedno enako, ostale barve pa bi dobili z razprševanjem«(barvno upravljanje na spletu, 2011).

55 Celostna grafična podoba in spletna predstavitev kulture playness 44 Slika 26: Izbiranje barv pri oblikovanju spletne vsebine Grafični uporabniški vmesnik Oblikovanje za splet ni isto kot oblikovanje za tisk. Spletne strani morajo ustrezati in pravilno delovati na več napravah in brskalnikih. Omogočena mora biti enostavna navigacija, da takoj najdemo informacije, ki jih iščemo. Tukaj pride v poštev oblikovanje vmesnika, ki lahko naredi velike razlike. Standardna funkcija večine strani je meni, ki se običajno nahaja na vrhu strani vodoravno ali v stolpcu ob strani. Biti mora viden in v pomoč uporabnikom pri navigaciji na strani. Navigacijski meni mora biti vedno na istem mestu in imeti konstantno obliko, medtem ko brskamo po strani. Pomembno je, da ustvarimo stran, ki je uporabna in ima potrebne funkcije na očitnem mestu, da jih lahko najdemo, ter ostalo vsebino na voljo. Ponavljajoče se vsebine, blogi in strani, namenjene zabavi, uspevajo obdržati obiskovalce s posodabljanjem vsebine in enostavnostjo uporabe. Pozorni moramo biti na sodobne dogovore, kot so stolpne postavitve in stili okvirjev. To ohranja stran posodobljeno, ponuja največjo funkcionalnost in tudi varuje pred prekrivanjem z že dogovorjenimi stili. Ena izmed njih je na primer podčrtanost povezav. Ko načrtujemo novo stran, se je najbolje nagibati k preprosti interaktivnosti, saj nočemo preobremeniti uporabnikovega brskalnika s prepočasnim nalaganjem strani. Pri oblikovanju spletnih strani moramo biti organizirani. Najprej si moramo skicirati stran kot zemljevid, kjer določimo zgradbo strani. Če razumemo, kako se bo uporabnik gibal po spletni strani, lahko predvidevamo in vplivamo na to, kako bi uporabnik želel biti voden po vsebini. Enostavna navigacija je ključnega pomena. Chris Jones pravi, da je ključnega pomena razumeti končnega uporabnika in vsebino spletne strani. Ne smemo oblikovati zase, ampak za občinstvo in vsebino. Ključ uspešne

56 Celostna grafična podoba in spletna predstavitev kulture playness 45 spletne strani je razumevanje uporabnika in vsebine spletne strani. Prepogosto so spletne strani odraz kreatorjevega tehničnega in oblikovnega znanja, namesto s poudarkom na uporabnosti spletne strani in enostavnega dostopa do informacij. Jones pravi, da ni nič narobe, če kršimo te meje, vendar ne smemo pozabiti upoštevati končnega uporabnika: oblikovati za občinstvo, oblikovati za vsebino in ne oblikovati samo zase (Chris Jones, Graphic design school, 2010, 155). Prostor»Na spletnih straneh bomo prostorski učinek najpogosteje pričarali s senčenjem oz. svetlobo, ki pada na predmete«(hribar, 2001, 11). 5.2 Prosta in odprtokodna programska oprema Prosta programska oprema uporabniku dovoljuje uporabo, razmnoževanje, razširjanje, razumevanje, spreminjanje in izboljševanje programov. Odprtokodna programska oprema uporabniku omogoča dostop do izvorne kode, ki jo lahko skladno s svojimi potrebami spreminja in dopolnjuje. Razvoj programov z odprto kodo spremlja veliko razvijalcev, ki so med seboj preko medmrežja povezani v skupnost Open Source Community, ki ima urejeno notranjo organizacijo in disciplino. Takšen razvoj odprtokodnih programov zagotavlja manjši obseg programskih napak, programi pa so tako kvalitetnejši. Odprta koda je povzročila spremembo pravil na trgih informacijske tehnologije, ker prinaša drugačen razvojni model in odnos do uporabnikov. Programska oprema, razvita z odprto kodo, je brezplačna, kot je na primer operacijski sistem Linux, spletni strežnik Apache, zbirka podatkov MySQL, pisarniški paket OpenOffice in drugi. Pogosto je razvita v okviru nekomercialnih in prostovoljnih pobud in jo je mogoče povsem legalno uporabljati brez plačila licenčnine ali druge oblike denarnega nadomestila avtorjem. To ne pomeni, da za uporabo tovrstne programske opreme ne veljajo licenčna pravila. Pogoji uporabe in distribucije posameznih delov odprte programske kode ali programskih produktov kot celote so določeni v okviru ene od licenčnih pogodb, ki jih določa združenje OSI (Open Source Initiative) oziroma v okviru pravic in načel, ki jih

57 Celostna grafična podoba in spletna predstavitev kulture playness 46 uveljavlja združenje FSF (Free Software Foundation) (Pojem proste in odprtokodne programske opreme, 2010). 5.3 Sistem za upravljanje spletne vsebine Učinkovita uporaba interneta postaja vse bolj pomembna pri komunikaciji in promociji tako v poslovnem kot zasebnem delovanju. Znanje o generiranju spletnih vsebin predstavlja pomemben vidik kreativnosti in informacijske pismenosti. Kot pravi J. Nielsen, vodilni strokovnjak na področju načrtovanja in uporabnosti spletnih vsebin, bodo šole kmalu pričele učiti otroke pripravljati spletno vsebino, saj bo to postala ključna spretnost pri iskanju službe. Orodja za upravljanje z vsebinami so pri tem nepogrešljiva, saj omogočajo udejanjanje intelektualnih konceptov (Sisplet.org, 2010) CMS Sistem za upravljanje vsebine (CMS - Content Management System) omogoča generiranje, urejanje in vzdrževanje vsebine spletnih strani brez znanja programiranja v HTML. Sistem CMS je programska rešitev, ki omogoča nadzor celotnega življenjskega cikla vsebine. Tak cikel obsega ustvarjanje, upravljanje, urejanje, objavo, preiskovanje in pravočasno odstranjevanje ter arhiviranje. Ključni element, ki ločuje sistem CMS od običajnega orodja za pripravo in objavo spletne strani, je urejena shramba vsebine, ki nam omogoča na primer vnaprej določen delovni tok dokumentov, nadzor različic, zaščito izbranih vsebin, učinkovito preiskovanje ali pa časovno odvisno objavo (Mesojedec, 2010). Ločujemo dva nivoja CMS. V najširšem smislu se CMS lahko nanaša na individualne CMS, to je na vsa spletna mesta v posameznih podjetjih, organizacijah ali pri drugih subjektih, kjer so ažuriranje spletnih vsebin poenostavili z vmesnikom in se s tem izognili neposrednemu HTML-programiranju in vsakokratnem nalaganju novih ali spremenjenih spletnih strani. Po drugi strani pa se izraz CMS pogosteje nanaša zgolj na splošna orodja CMS lahko bi rekli tudi na meta CMS, s katerim je mogoče izdelati individualne CMS za posamezne

58 Celostna grafična podoba in spletna predstavitev kulture playness 47 uporabnike. Meta CMS so torej namenjeni izdelavi strukture in oblike spletnega mesta. Pri meta CMS torej v osnovi ločimo dve funkcionalnosti: generiranje strukture, kjer spletnemu mestu strukturiramo oziroma implementiramo določeno arhitekturo, povezavo in funkcionalnost; določenemu spletnemu mestu oziroma njegovi strukturi prilagajamo poljubno obliko, generiranje oblike pa je razmeroma neodvisna funkcionalnost. Če so individualni CMS sistemi namenjeni urednikom, novinarjem ipd. in torej ne zahtevajo nobenega tehničnega znanja, ki bi presegalo nivo veščin, potrebnih za obvladovanje urejevalnikov (npr. Word), pa pri meta CMS potrebujemo določena tehnična znanja. Slednje posebej velja za generiranje oblike, medtem ko se generiranje strukture vse bolj poenostavlja. V primeru meta CMS torej orodij, s katerimi generiramo individualne CMS gre lahko za različne nivoje aplikacij: enostavne aplikacije za generiranje in vzdrževanje osebnih sporočil (BLOG); sisteme za povezovanje spletnih strani (WIKI); klasična odprtokodna ali komercialna CMS-orodja; sisteme za publiciranje spletnih vsebin (WPS); interna CMS-orodja specializiranih podjetij za izdelavo spletnih mest; za portale novic (NEWSPORTALS); za najbolj kompleksne sisteme za upravljanje z vsebinami velikih organizacij (ECM Enterprise Content Management). V določenem smislu lahko k meta CMS prištevamo tudi običajna orodja za oblikovanje spletnih strani, ki postajajo vse bolj zmogljiva in prevzemajo tudi vse več funkcij meta CMS. Dodati pa velja, da so kljub vsemu navedena orodja v osnovi še vedno namenjena profesionalnim uporabnikom s tehničnim znanjem. Pri izbiri in uporabi odprtokodnih orodij CMS se lahko srečamo z naslednjimi težavami: morda ni povsem jasno kako je z dovoljenjem za uporabo; razvoj sistema se lahko preneha ali zaide v slepo ulico; nihče ne zagotavlja delovanja sistema;

59 Celostna grafična podoba in spletna predstavitev kulture playness 48 nepraktična uporaba, ki zahteva veliko lastnega dela (Sisplet.org, 2010). CMS je zbirka procedur, ki so lahko ročno ali računalniško podprte in omogočajo: preprostejše ustvarjanje kakovostne vsebine, ki je skladna z vnaprej določeno podobo; možnost upravljanja na daljavo; boljše sodelovanje med različnimi ustvarjalci; lažji nadzor nad časovno-kritičnimi elementi za objavo in učinkovitejšo zamenjavo zastarelih vsebin; visoko prilagodljivost in preprosto dodajanje novih zmožnosti; večjo varnost; lažje stopnjevanje obsega; nižje stroške vzdrževanja. Seveda so naštete zmožnosti in prednosti predvsem ideali, ki se jim želijo različni sistemi CMS bolj ali manj uspešno približati. Nedvomno pa so danes ti sistemi že dosegli stopnjo, ko njihove prednosti niso več vprašljive. Podjetja in posamezniki želijo redno ažurirane strani, zato je CMS vedno bolj priljubljen. Osveževanje spletne strani s sistemom CMS je zelo preprosto, enostavno se lahko dodaja nove vsebine, osvežuje stare, nalaga slike in druge večpredstavnostne vsebine, vključuje dodatke in nadgradnje. Med CMS-sisteme se uvršča tudi Wiki sisteme (znana Wikipedija) in bloge (Wordpress). Najbolj razširjen CMS je odprtokodna Joomla!, razširjena pa sta tudi Drupal in Plone CMS Joomla! Iz številne ponudbe sistemov CMS je v začetku leta 2005 izstopilo ime Mambo. Mambo je izdelek avstralskega podjetja Miro, ki sistem CMS ponuja v dveh oblikah: kot plačljiv tržni izdelek z ustrezno podporo, in kot odprtokodno podlago (MOS, Mambo Open Source), ki jo prilagajamo in vzdržujemo sami, koda pa nam je na voljo pod dovoljenjem GPL. Iz Mamba je avgusta 2005 nastala Joomla! 1.0. Ime Joomla! je fonetični zapis besede iz

60 Celostna grafična podoba in spletna predstavitev kulture playness 49 svahilija, ki pomeni "vsi skupaj" ali "kot celota". Leta 2007 je bila na voljo Joomla! 1.5, danes pa je na voljo že verzija 1.6 (What is Joomla?, 2010). Joomla! je sistem za upravljanje vsebin (CMS), ki omogoča izgradnjo spletnih strani in močnih spletnih aplikacij. Enostavna je za uporabo, omogoča razširitve in je odprtokodna, torej dostopna vsem (What is Joomla?, 2010). Z Joomla! lahko naredimo strani za: korporativna spletna mesta ali portale; spletne trgovine; spletne strani manjših podjetij; spletne strani dobrodelnih ali neprofitnih organizacij; spletne strani društev in klubov; šolske ali izobraževalne spletne strani; poslovne intranete ali ekstranete; osebne spletne strani; spletne skupnosti uporabnikov; spletne revije ali časopise. Joomla! lahko namestimo na poljubno podlago, ki podpira strežnik Apache, zbirko MySQL in seveda tolmač za PHP. Če je omenjena podlaga pripravljena, je namestitev Joomla! zelo enostavna. Sistem je zelo priljubljen tudi zato, ker ga lahko takoj po namestitvi uporabljamo brez težav in posebnih znanj. Dodajanje vsebine je preprosto, prav tako uporaba nekoliko "naprednejših" funkcij, kot so organizacija menijev, urejanje uporabnikov in zaščita vsebine. Vse se, kot je pri sodobnih sistemih CMS v navadi, opravi prek spletnega vmesnika. V zaščitenem, administrativnem delu imamo celotno funkcionalnost sistema na voljo prek "nadzorne plošče", ki je z velikimi, preglednimi ikonami precej podobna svojim sorodnikom iz sodobnih operacijskih sistemov. Seveda pa prava moč sistema leži v njegovi modularnosti in razširljivosti. Tu se pokaže resnična moč sistema in široka skupnost razvijalcev, ki stoji za njim. Sistem v Joomla! je zgrajen iz ene ali več vsebinskih predlog (templates), ki določajo videz in obnašanje spletišča. Že tu je izbira izjemna. Na spletu so na voljo številne brezplačne in plačljive

61 Celostna grafična podoba in spletna predstavitev kulture playness 50 predloge, vsak dan pa je več ponudnikov, ki izdelujejo prilagojene predloge. Predlogo lahko z znanjem HTML, CSS in PHP izdelamo tudi sami. Zmogljivosti Joomla! določajo številni moduli (modules), ki upravljajo različne vrste vsebine. Že v osnovni namestitvi dobimo vse potrebno za srednje zmogljivo spletišče (npr. urejevalnik novic, najrazličnejše izbirne menije, možnost iskanja, kanale RSS, spletne ankete, oglase, celo analizo obiska spletišča...). Omogočena je možnost dopolnjevanja in celo zamenjava posameznih modulov. Tudi module v celoti vzdržujemo (nameščamo, nadgrajujemo, odstranjujemo) kar prek spletnega vmesnika. Kot smo omenili, za veliko večino temeljnih potreb poskrbi že osnovna namestitev Joomla!, za druge pa so na spletu na voljo dodatki, s katerimi pokrijemo želene funkcionalnosti. Joomla! je z modularno zasnovo, ki jo ponuja, priložnost za razvijalce večjih spletišč in intranetov, ki lahko močno osnovo nadgradijo z lastnimi razširitvami v obliki modulov in tako hitro razvijejo svojo rešitev. Gre torej za zmogljiv sistem za uporabljanje vsebin, ki ga je preprosto uporabljati. Ima tudi široko skupnost uporabnikov in razvijalcev, kar pomeni tudi ustrezno podporo. 5.4 Zasnova spletne strani kulture playness Načrtovanje Načrtovanje spletne strani je prvi korak k celostni zasnovi spletnega mesta. Ko načrtujemo spletno stran, moramo določiti organiziranost in funkcionalnost spletne strani. Pregledati moramo že obstoječe strani konkurence. Ker je kultura playness nova, konkurence še ni, oziroma so konkurenca predhodna obdobja fitnesa, wellnessa in selfnessa. Ogledali smo si splošne strani fitnesa (slika 27) in welnessa (slika 28) na spletu.

62 Celostna grafična podoba in spletna predstavitev kulture playness 51 Slika 27: Spletna stran fitness.org (Fitness.com, 2010)

63 Celostna grafična podoba in spletna predstavitev kulture playness 52 Slika 28: Spletna stran wellness.com (Wellness.com, 2010)

64 Celostna grafična podoba in spletna predstavitev kulture playness 53 Zanimala nas je predvsem postavitev elementov na strani. Na obeh straneh se logotip nahaja levo zgoraj in ker beremo od leve proti desni, je to mesto tudi najprej opaženo. Na strani fitness.com je pogled usmerjen k ponudbi včlanitve v fitness združenje, medtem ko to na strani wellness.com ni posebej poudarjeno, je pa prav tako omogočeno. Na strani fitness.com je glavni meni postavljen pregledno - na sredini strani in v obliki treh stolpcev, kjer je zajeta najpomembnejša vsebina in nas s klikom vodi do želene kategorije, kjer lahko vidimo tudi razširjen meni do drugih vsebina. Wellness.com ima horizontalni glavni meni. Jedra strani na uvodni strani fitness.com ni, z izbiro kategorije pa si lahko ogledamo tudi ostalo vsebino. Pri oblikovanju in postavitvi spletne strani moramo upoštevati želje naročnika. Želje naročnik so bile: spletna stran v angleškem jeziku, barvita stran v barvah logotipa in znaka, preglednost, enostavnost, hiter dostop do treh stebrov playnessa (playness culture, playness center, playness guru) Struktura Naslednji korak pri zasnovi spletnega mesta je določitev strukture in razpored vsebine. Stran smo si po zgradbi zamislili podobno kot fitness.com (slika 29). Na vseh straneh bo vidna glava strani, kjer bo logotip in možnost iskanja. Pod glavo se bo nahajal splošni menu z novicami, predstavitvijo, seminarji itd. Na prvi strani bo uporabnik lahko izbiral med tremi kategorijami, playness culture, playness guru in playness center. Povezava Playness culture bo vsebovala pomembne informacije o sami playness kulturi. Playness guru bo izobraževalno središče, kjer bodo na voljo učne ure playnessa in seznam možnih vadb. Tukaj bo možna tudi prijava uporabnikov. Playness center bo podal informacije uporabnikom o playness centrih in izvajalcem playnessa podajal informacije o vpisu na seznam centrov. Noga strani bo prav tako vidna v vseh pogledih.

65 Celostna grafična podoba in spletna predstavitev kulture playness 54 Slika 29: Skica spletne strani

66 Celostna grafična podoba in spletna predstavitev kulture playness Navigacija Navigacija je pomemben del spletnega mesta. Uporabniki s pomočjo navigacije raziskujejo vsebino strani, zato mora biti pregledna, konsistentna in razumljiva. Uporabnik mora v vsakem trenutku vedeti, na kateri strani in kje znotraj strukture spletne strani se nahaja. V ta namen bo na spletni strani pod splošnim menijem na voljo navigacijska vrstica (slika 30), ki bo uporabniku vedno kazala pot do mesta, kjer se nahaja. Slika 30: Navigacijska vrstica Barva Poglavitna barva spletnega mesta playness kulture bo rdeča, ki je zelo aktivna barva s toplim značajem. Pojavljale se bodo tudi barve, izvzete iz znaka in logotipa Tipografija Tipografija (slika 31) bo na celotni strani konsistentna. Uporabili bomo pisavo Georgia v barvi #666 in velikosti 12px. Slika 31: Tipografija na spletni strani

67 Celostna grafična podoba in spletna predstavitev kulture playness 56 6 IZDELAVA PREDLOGE ZA CMS JOOMLA! Pogledali si bomo, kako izdelati spletno mesto s programom CMS Joomla! in s tem odgovorili na tretje raziskovalno vprašanje (RV3). Joomla! predloga je vrsta datotek v Joomla! CMS-sistemu, ki nadzorujejo predstavitev vsebine. Predloga ni spletna stran, prav tako ni mišljena kot celotna podoba spletne strani. Predloga je osnovni model za ogled spletne strani. Za učinek popolne spletne strani je pomembna tudi vsebina, ki je shranjena v podatkovni bazi Joomla!. Spletna stran, ki je vidna kot končni produkt, ni statična, ampak dinamična, kar pomeni, da je dinamično ustvarjena iz vsebine, shranjene v bazi podatkov. Stran je ustvarjena skozi različne PHP ukaze, ki so zapisani v predlogi. Ker dinamične strani ne moremo videti v WYSIWYGurejevalniku 4 (na primer Dreamweaver), si pomagamo z lokalnim strežnikom, ki ga namestimo na računalnik. Izbrali smo program OKO-XAMPP sistem za hitro vzpostavitev spletišča na OS Windows. Gre za odprtokodni sistem, ki je na voljo na spletni strani Centra odprte kode Slovenije ( Sistem je sestavljen iz projekta XAMPP, ki vsebuje sistem hitrega spletišča s podporo Apache, MySQL, PHP, Perl, ki ima že dodan sistem za upravljanje vsebin Joomla!. Sistem nam omogoča hitro izdelavo in objavo dinamičnih spletnih strani. Joomla! nam z namestitvijo ponuja nabor privzetih predlog ( slika 32). Na spletu lahko najdemo številne brezplačne in plačljive predloge, mi pa smo se odločili, da bomo izdelali novo predlogo, prilagojeno potrebam predstavitve kulture playness. Ko namestimo sistem Joomla!, v internetni brskalnik vpišemo localhost in ime mape, kjer se nahaja CMS Joomla!. V našem primeru je to 4 WYSIWYG je angleška kratica za What You See Is What You Get (slovensko: Kar vidiš, boš tudi dobil). Kratica opisuje programe, pri katerih uporabniški vmesnik omogoča, da uporabnik med delom vidi, kakšen bo končni dokument. Večina programov omogoča vsaj predogled končnega izdelka. Kadar gre za spletne strani, pa je končni izdelek odvisen tudi ob brskalnika, v katerem jo prikazujemo (wikipedia.org - WYSIWYG, 2010).

68 Celostna grafična podoba in spletna predstavitev kulture playness 57 Slika 32: Privzete Joomla! predloge: beez, ja_purity, rhuk_milkyway Mapa playness torej označuje ime naše predloge, znotraj nje pa se nahaja več datotek. Ustvarimo mapo, ki jo poimenujemo css in v katero bomo shranili datoteko s kaskadnimi stili. Naslednja mapa se imenuje images, kjer bodo shranjene slikovne datoteke, ki so potrebne za obliko spletne strani. Potrebujemo še: php-datoteko, ki smo jo poimenovali index, kjer bo določena struktura spletne strani; xml-datoteko, poimenovali smo jo templatedetails, kjer bodo zbrani podatki o predlogi, uporabljene datoteke in definirane Joomla! pozicije; prazno html-datoteko, prav tako z imenom index, s katero preprečimo neposreden dostop do strani Apache index; datoteko template_thumbnail.png, ki je sličica celotne spletne strani; favicon.ico, ki se pojavi pred spletnim naslovom v našem brskalniku. Seveda so imena map in datotek (razen index, ki je standardno ime) lahko poljubna, vendar logično poimenovanje pripomore k razumevanju strukture predloge Index.php Preden pričnemo izdelovati predlogo, moramo vedeti, kako bo oblikovana, s čimer smo se ukvarjali v prejšnjih poglavjih. Zgradba strani je definirana v datoteki index.php s pomočjo div-enot oziroma oddelkov (skupin elementov), ki jih lahko oblikujemo s kaskadnimi stili. Po obliki spletne strani smo izdelali shemo, na kateri so označene pozicije in poimenovanje div-enot, kot prikazuje slika 33. Za samo strukturiranje div-enot v datoteki index.php sta pomembna njihova zaporedje in hierarhija (slika 34). V datoteki template.css elementom določimo obliko, pozicijo, barve Kasneje bomo v datoteki templatedetails določili tudi pozicije, kamor bomo v Joomla! administraciji vstavljali vsebino.

69 Celostna grafična podoba in spletna predstavitev kulture playness 58 Slika 33: Shema spletne strani po obliki

70 Celostna grafična podoba in spletna predstavitev kulture playness 59 Slika 34: Div struktura spletne strani Zemljevid strani Struktura strani po vsebini: Zgornji meni: Home; News; Introduction; Links; Seminars; Network; Contact. Playness meni: Playness culture; Playness guru: - Education center; - Games and exercises; - Emotionality; - Mindfulness;

71 Celostna grafična podoba in spletna predstavitev kulture playness 60 - Spirituality; - Playness Forum; Playness center: - Fitness center; - Wellness center; - Sport club; - School or kindergarten; - Outdoor solutions Template.css Kaskadni stili imajo dva glavna dela: selektor in eno ali več lastnosti. Selektor je običajno HTML-element, ki mu želimo dodati stil oziroma lastnost. Lastnost pa je sestavljena iz imena lastnosti (»property«) in vrednosti. CSS.lastnost se vedno konča s podpičjem (;), skupina lastnosti pa je obkrožena z zavitimi oklepaji. Primer je prikazan na sliki 35 (W3Schools Online Web Tutorials, 2010). Slika 35: Sestava kaskadnega stila

72 Celostna grafična podoba in spletna predstavitev kulture playness 61 V datoteki index.php smo div-om dodali id oziroma razredno (class) oznako. Id se uporablja za določitev sloga za en oziroma edinstven dokument. Id uporablja atribut elementa HTML in se v kaskadnih stilih označi z znakom #. Razredni izbirnik se uporablja za določitev sloga skupini elementov. To nam omogoča določitev stila za katerikoli html-dokument z istim razredom. Razred uporablja atribut elementa HTML in se v kaskadnih stilih označi s piko (.). Lahko tudi določimo, kateri specifičen HTML-element bo uporabljal določen razred. Kaskadne stile lahko pripnemo k dokumentu na tri načine: kot zunanji stil, ki ga pripnemo v dokument; kot notranji stil, ki ga določimo v glavi HTML-dokumenta; inline, neposredno k HTML-elementu. Pri Joomla! predlogi bomo uporabili zunanji stil, ki ga v dokument php vstavimo z ukazom: <link rel="stylesheet" href="templates/playness/css/template.css" type="text/css" /> TemplateDetails.xml TemplateDetails (slika 36) vsebuje podrobnosti predloge, ki jih Joomla! potrebuje in uporabi pri nameščanju predloge, ko je zapakirana v format zip. Datoteka xml vsebuje informacije o imenu predloge, datumu izdelave, avtorju, avtorskih pravicah, verziji in opis predloge. Datoteka vsebuje tudi seznam vseh datotek (<filename>), ki so uporabljene za predlogo in Joomla! pozicije (<position>). Joomla! pozicije so ograde v predlogi, ki definirajo položaj in ukažejo Joomla!, kam postaviti vsebino, dodeljeno za določen položaj. Oblikovalec predloge ima tako popoln nadzor nad pozicijami modulov. Če na primer določimo pozicijo modula "left", bo vsebina modula, ki ji bomo v administraciji pripisali pozicijo "left", prikazana tam, kjer bomo s kodo določili "left" pozicijo modula (Module positions, 2011). Koda, s katero v predlogi določimo pozicijo: <jdoc:include type="modules" name="left" />.

73 Celostna grafična podoba in spletna predstavitev kulture playness 62 Ime pozicije je lahko poljubno, vendar smiselno izbrano, zaradi lažje orientacije pri izdelavi predloge. V Joomla! lahko kadarkoli pogledamo vse možne pozicije modulov za trenutno predlogo. Če v naslovu Joomla! spletne strani dodamo?tp=1, se nam prikaže spletišče in posamezni položaji, ki so določeni v predlogi (Preprečite pogled pozicij modulov, 2011). Pozicije playness predloge prikazuje slika 37. Slika 36: Primer dela datoteke templatedetails.xml

74 Celostna grafična podoba in spletna predstavitev kulture playness 63 Slika 37: Joomla! pozicije Playness predloge Template_thumbnail.png Template thumbnail (slika 38) ustvarimo z namenom predogleda strani v Joomla! template managerju. Thumbnail ne sme biti prevelik, primerna širina je 225px širine in 150px dolžine. Slika 38: Thumbnail

75 Celostna grafična podoba in spletna predstavitev kulture playness Postavitev in objava spletne strani Slika 39: Vstopna stran Celotna stran ima širino 950 px. Sestavljena je iz glave, glavne vsebine in noge. Višina vstopne strani (slika 39) je 634 px, kar pomeni, da je uporabnikom vidna celotna stran. Glava je sestavljena iz več elementov. Najpomembnejši je logotip z znakom, ki je postavljen zgoraj levo, kjer je najbolj opazen; osrednji element je slika z igralnimi pripomočki za izvajanje playnessa. Zgoraj desno je omogočena možnost iskanja po ključnih besedah po celotni strani. Na dnu glave se nahaja splošni meni, kjer bodo objavljene novice, predstavitev, seminarji, kontaktne informacije Postavitev elementov v jedru strani se spreminja glede na to, katere informacije nas zanimajo. Vstopna stran postavi v ospredje tri stebre playnessa s kratkimi opisi oziroma uvodi (splošne informacije o playnessu playness culture, izobraževalnem središču playness guru in evidenci centrov, kjer se playness izvaja playness center). Če brskamo po splošnem meniju, se stebri ohranijo, vsebina iz splošnega menija pa se prikaže pod stebri. Ko izberemo enega od treh stebrov, se razmerje strani nekoliko spremeni.

76 Celostna grafična podoba in spletna predstavitev kulture playness 65 Glava strani se skrči, zamenja pa se tudi osrednja slika (slika 40), ki je sedaj ožja. Z osrednjih stebrov se umaknejo opisi, ostane pa naslov. S tem pridobimo več prostora za glavno vsebino. Na levi se sedaj pojavi prostor za podmeni. Slika 40: Vsebina strani, ko je izbran eden izmed glavnih stebrov Za vsebino, predstavljeno pod playness guru, bo potrebna prijava (slika 41). V ta namen smo pripravili obrazec za prijavo, ki se pojavi, ko izberemo steber playness guru. Če je uporabnik že registriran, vnese uporabniško ime in geslo, če pa še ni, lahko ustvari račun. Za nov račun mora vnesti ime, uporabniško ime, elektronski naslov in geslo. Ko se prijavi, se vsebina preusmeri na prvi podmeni playness guruja, levo pa se pojavi okvirček s pozdravnim sporočilom in možnostjo odjave. Ko je uporabnik prijavljen, se na levi prikaže pozdravno sporočilo z možnostjo odjave.

77 Celostna grafična podoba in spletna predstavitev kulture playness 66 Slika 41: Prijava v playness izobraževalni sistem Stran je sedaj končana in gostuje na lokalnem strežniku. Da bo vidna širši javnosti, jo je treba prenesti na drug strežnik. Najprej izvozimo podatkovno bazo, nato pa celotno stran, vključno s predlogo, prenesemo na nov strežnik ter uvozimo bazo. Stran sedaj lahko vidimo preko naslova Testirali smo jo z brskalnikoma Mozilla Firefox 3.0 in Internet Explorer 8. Odgovorili smo tudi na tretje raziskovalno vprašanje, kako izdelati spletno mesto s pomočjo CMS Joomla!. Spoznali smo, kaj Joomla! sploh je in kaj nam omogoča. Pregledali smo, kako je sestavljena predloga za Joomla!, in jo tudi izdelali.

78 Celostna grafična podoba in spletna predstavitev kulture playness 67 7 SKLEP Naš cilj je bil izdelati učinkovito predstavitev kulture playness z izdelavo celostne grafične podobe ter spletnega mesta. Pri snovanju celostne grafične podobe in spletne strani kulture playness je bil potreben celovit pristop. Za oblikovanje znaka in logotipa je bilo treba združiti likovno teorijo, estetska pravila in naročnikove želje. Pri zasnovi spletnega mesta pa poleg naštetega še praktičnost in uporabnost (kakršna naj bi stran bila) z možnostmi, ki nam jih pri izdelavi spletnega mesta ponuja sistem Joomla!. Preden smo začeli z izdelovanjem znaka in logotipa, smo morali spoznati playness kulturo kaj pravzaprav to je in kakšen je njen namen. Izpostaviti smo morali razlike med panogami, kot so fitnes, welness in selfness. Pri playnessu se lahko človek»resno igra ali igrivo dela in pri tem ohranja svoje dostojanstvo kot človek, ki osmišlja svoje bivanje in pri tem uživa, ustvarja«(doc. dr. Milan Hosta Ensico S, d. o. o. & Mednarodni inštitut za trajnostni razvoj, diplomacijo in politiko športa). Prav to je bilo glavno vodilo pri oblikovanju podobe kulture playness. Za spletno mesto smo izdelali novo predlogo, ki je prilagojena vsebinskim zahtevam in potrebam predstavitve playness kulture. Sistem Joomla! smo izbrali zato, ker je enostaven za uporabo ter kasnejše urejanje, dodajanje in dopolnjevanje vsebin. Izdelek, ki je nastal, še zdaleč ni končan. Z razvojem kulture se bo razvijalo tudi spletno mesto. V času, ko se kultura šele uveljavlja, so pomembnejše informacije o sami kulturi, ko pa bo v razcvetu, bo treba uporabnike privabiti k vpisu njihovih centrov na stran. Spletno mesto bo torej treba redno posodabljati v skladu z razvojem kulture playness.

79 Celostna grafična podoba in spletna predstavitev kulture playness 68 8 LITERATURA Barvni model CMYK. Wikipedija, prosta enciklopedija < Barvni modeli. Wikipedija, prosta enciklopedija < Barvni model RGB. Wikipedija, prosta enciklopedija < Barvno upravljanje na spletu. 9. feb Slo-Tech < Butina, M. Prvine likovne prakse, Ljubljana: Debora, CMYK color model. Wikipedia, the free encyclopedia < Color Resource Guide - MR. SANDERS CLASS < Content management system. Wikipedia, the free encyclopedia < Content management system. Wikipedija, prosta enciklopedija < CSS Syntax < Dabner, D, Calvert S., Casey A. Graphic Design School: the principles and practice of graphic design, London: Quatro Publishing plc, EU2008.si - Simbol slovenskega predsedstva Sveta EU < Fitness.com <

80 Celostna grafična podoba in spletna predstavitev kulture playness 69 Hosta, M., Ensico S, d.o.o., Od fitnessa preko wellnessa k playnessu, Ljubljana: Mednarodni inštitut za trajnostni razvoj, diplomacijo in politiko športa, Hribar, P. Spletne strani - Zvijače in nasveti. Nova Gorica: Flamingo založba, Itten, J. Umetnost barve: študijska izdaja. Jesenice: [samozal.] R. Reichman, Jury, D. What is typography? Switzerland: RotoVision SA, Korelc, T. Kako do dobrega imena in simbola. Avgust Podjetnik < Logotip. Wikipedija, prosta enciklopedija < Mesojedec, U. Članki - Urejanje vsebin brez muk. maj Monitor < Module positions - Joomla! Documentation < Mrhar, P. XHTML 1.1 in slogi CSS2. Nova Gorica: Flamingo Založba, Newmark, Q. What is graphic design. UK: RotoVision SA, Pojem proste in odprtokodne programske opreme. Inštitut OKO < Preprečite pogled pozicij modulov. 14 Februar Si Joomla < Rački, T. Veščina likovne kompozicije v slikarstvu, oblikovanju, fotografiji, filmu, kiparstvu, in gledališču. Ljubljana: JSKD, Repovš, J. Kako nastaja in deluje učinkovita, tržno usmerjena celostna grafična podoba kot del simbolnega identitetnega sistema organizacij. Ljubljana: Studio Marketing, RGB vs CMYK. Supremeprint < Roger, C. Parker Grafično oblikovanje. Ljubljana: Pasadena, Ruder, E. Tipografija. Ljubljana: Partizanska knjiga, Znanstveni tisk, 1977.

81 Celostna grafična podoba in spletna predstavitev kulture playness 70 Sean, A., Noreen, M., Terry, S. Logo design workbook : a hands-on guide to creating logos. United States of America: Rockport Publishers, Sisplet.org < Sisplet.org < Strmole, M., Slak, S., Kruhar, S. Oblika + vsebina = prepoznavnost Družba Dnevnik, d. d < Spletna stran. Wikipedija, prosta enciklopedija < Srića, V. Ustvarjalno mišljenje. Ljubljana: Gospodarski vestnik, Statična spletna stran < Šuštaršič, N., Butina, M., De Gleria, B., Skubin, I., Zornik, K. Učbenik za likovno teorijo v vzgojno-izobraževalnem programu umetniška gimnazija likovna smer. Ljubljana: Debora, Timothy, S. Typography workbook : a real-world guide to using type in graphic design. United States of America: Rockport Publishers, Trstenjak, A. Človek in njegova pisava. Ljubljana: Tiskarna učne delavnice, Zbirka Sopotja, Trstenjak, A. Psihologija barv, Ljubljana: Inštitut Antona Trstenjaka za psihologijo, logoterapijo in antropohigijeno, W3Schools Online Web Tutorials < Wellness.com. Your guide to the best of health and wellness < What is Joomla? < WYSIWYG. Wikipedija, prosta enciklopedija <

82 Celostna grafična podoba in spletna predstavitev kulture playness 71 Priloge Priloga A: Celostna grafična podoba

83 Celostna grafična podoba in spletna predstavitev kulture playness 72

84 Celostna grafična podoba in spletna predstavitev kulture playness 73

85 Celostna grafična podoba in spletna predstavitev kulture playness 74

86 Celostna grafična podoba in spletna predstavitev kulture playness 75

87 Celostna grafična podoba in spletna predstavitev kulture playness 76

88 Celostna grafična podoba in spletna predstavitev kulture playness 77