Style & Experience project

Style & Experience project Erhvervsakademiet Lillebælt, MMD, Web B, Gruppe 7. Mette Gry Schmidt, Anders Kristian Jepsen, Thomas Sølvbjerg, Jakob Thage og Admira Sehic Anslag 19.606 URL: http://thom441e.mmd.eal.dk/bazar/bazar1.html Side 1 af 19

Indhold Indledning... 3 Problemformulering... 3 Metode... 4 Desk research... 4 Field research... 4 Spørgeskema... 4 Målgruppe... 5 Delkonklusion... 6 Analyse... 7 Komposition... 7 Stylesheet... 8 Minimalisme... 8 Modernisme... 10 Delkonklusion... 12 Diskussion... 13 Konklusion... 14 Litteraturliste... 15 Bilag... 16 Bilag 1... 16 Bilag 2... 17 Bilag 3... 19 Side 2 af 19

Indledning Vi har valgt at fokusere på Bazar Fyn i vores S&E projekt, da vi er af den mening, at deres hjemmeside godt kunne bruge et mere spændende og stemningsfyldt design. Vi synes at Bazar Fyn i dag er en lidt overset del af Odense og derfor mener vi det er vigtigt for deres nuværende kunder, og ikke mindst deres nye kunder, at få en oplevelse allerede når de klikker ind på Bazar Fyns hjemmeside. Vi vil i denne rapport komme nærmere ind på, hvordan vores nye hjemmeside er bygget op via. vores HTML koder og på de to forskellige stylesheets vi har valgt til hjemmesiden. På den måde vil vi give et fuldt indblik i, samt forståelse for, vores kreative tænkning. Problemformulering Bazar Fyn er en eksotisk handelsplads, som gør det daglige indkøb til en oplevelse. Den ligger placeret i Odense centrum i Thrige-Titans tidligere fabriksbygninger 1. Bazaren giver mulighed for at lugte, føle og smage de fleste varer, imens man begiver sig rundt i multikulturelle omgivelser. Der er et stort udvalg af frugt og grønt fra hele verden, derudover kan man købe alt fra godt kød hos slagteren til smykker og tøj i de små butikker. Bazaren huser også forskellige typer restauranter. Denne stemning, som man kan mærke indenfor Bazarens vægge, kommer desværre ikke til udtrykt på deres hjemmeside. Hvordan kan man med design og komposition få denne multikulturelle stemning ind på deres hjemmeside? 1. Redegør for Bazar Fyns målgruppe. 2. Analyser designet og opbygningen af den hjemmeside vi har lavet til Bazar Fyn. 3. Diskuter de to stylesheets og indholdet i forhold til målgruppen. 1 http://www.bazarfyn.dk/historien_bag.aspx?id=450 Side 3 af 19

Metode Desk research Vi startede med at bruge en del tid på at søge på internettet omkring forskellige kulturelle begivenheder, da de fleste i gruppen ikke rigtigt vidste så meget om hvad der var af kulturelle ting og sager rundt omkring i Odense. Vi havde derfor lidt svært ved at finde et sted vi ville skrive om, som vi mente både havde brug for en ændring i bl.a. hjemmeside men som vi også fandt interessant at skrive og lære om. I første omgang blev der besluttet at vi skulle skrive opgave om Eventyrhaven og dets skulpturer, men vi ændrede hurtigt mening, da Bazar Fyn blev nævnt i gruppen. Vi besluttede derfor endeligt at det var Bazar Fyn vi ville skrive om. Vi gik straks i gang med at søge informationer omkring emnet, så vi kunne få et overblik over tingene, og vi kunne derfor fokusere projektet i den rette retning. I vores desk research brugte vi udelukkende internettet til at søge informationer omkring Bazar Fyn. Field research I field research var vi ude og besøge Bazar Fyn, så vi kunne tage billeder og optage lidt video samt opleve stemningen derude. Vi tog også derud for at få et overblik over hvilke type mennesker der befandt sig i Bazar Fyn. Vi så at der var en del ældre mennesker på besøg i Bazar Fyn, men eftersom vi var derude om formiddagen, mener vi derfor at det var grunden til at der var så stor en del af ældre mennesker. Vi fik også taget en hel del billeder, som bl.a. skal bruges til vores Flash videoer og hjemmeside. Spørgeskema Ud fra vores research valgte vi at lave et spørgeskema, så vi kunne få et indblik i, hvad folks formål med et besøg i Bazar Fyn er, og hvad de mener om Bazar Fyns nuværende hjemmeside. På den måde kan vi få begrænset indholdet der skal være på hjemmesiden vi skal lave, så den bliver let og overskuelig. Vi har gjort brug af multiple choice i spørgeskemaet, og brugt det sociale netværk Facebook til at sende vores spørgeskema ud. Der er desværre et problem ved at sende et spørgeskema ud via Facebook. De fleste besvarelser vil komme fra alders gruppe 20-30, og for at få det Side 4 af 19

optimale ud af et spørgeskema skal man helst få besvarelser fra forskellige aldersgrupper. Spørgeskemaet er lavet i Google Docs, og indeholder 8 spørgsmål. 2 Målgruppe I dette afsnit vil vi komme ind på målgruppen til Bazar Fyn. Vi har gjort brug af Gallup Kompas, for at se hvilket segment vores målgruppe ligger i. Derefter vil vi med vores resultat fra Gallup Kompasset benytte os af Minerva modellen. I Gallup kompasset under demografi har vi valgt at koncentrer os om personer i alderen 40-59, og så har vi sat en årlig indkomst til 200.000 500.000 kroner. Alderen 40-59 er sat på baggrund af vores field research, hvor vi var ude i Bazar Fyn. Den største procentdel af dem der var i Bazar Fyn var 40 plus. Bazar Fyn har en meget bred målgruppe af besøgende, men vi har valgt at koncentrere os om den primære målgruppe som vi definere til at være mænd og kvinder i alderen 40-59 år, for at få det bedste indblik i hvad deres behov er. Gallup Kompasset gav et resultat, hvor 18,1 procent lå i det traditionelle fællesskabsorienteret segment, og 13,8 procent lå mellem fællesskab og det moderne segment. Alle de forskellige segmenter er dog repræsenteret i vores Gallup Kompas, men det er fællesskabssegmentet der stikker ud. 2 Se Bilag 2 Side 5 af 19

I det fællesskabsorienterede segment er det social ansvarlighed, medmenneskelighed, omsorg, økologi og sundhed der kendetegner segmentet. Det er især i aldersgruppen 40-59 år der findes i dette segment, og en stor del er repræsenteret af kvinder. I dette segment er de ofte meget interesseret i politik. Politisk er det typisk Socialdemokratiet, Socialistisk Folkeparti, Det Radikale Venstre samt Enhedslisten personerne i dette segment stemmer på til valg. De er desuden også grønne forbrugere som bl.a. interesserer sig for helse, økologi og ernæring. Det er også under dette segment læsehestene er at finde, og det er jazz og klassisk musik der lyttes til. Når det fællesskabsorienterede segment skal ud og opleve kulturelle oplevelser, er det især museer, kunstudstillinger, teaterbesøg og biblioteksbesøg der er på listen. Når de skal holdes up-to-date er de foretrukne printmedier Politiken, Information og Weekendavisen. Ud fra ovenstående analyse kan vi dermed konkludere at Bazar Fyns målgruppe må befinde sig i det grønne/rosa segment i Minerva modellen. Da vores målgruppe er meget idealistiske og fællesskabsorienterede. (se den sorte prik i modellen til højre). Som nævnt overstående er en af segmentets interesser økologi og ernæring. Det passer godt på de indkøbsmuligheder der er i Bazar Fyn. Bazaren har nemlig fokus på kvalitet og friskhed i deres fødevare, som ofte kommer fra lokale fynske avlere. 3 Delkonklusion Vi kan dermed konkludere at vores målgruppe 40-59 er i det fællesskabsorienterede segment, hvor der er interesse for social ansvarlighed, medmenneskelighed, omsorg, økologi og sundhed. En stor del af dette segment er repræsenteret af kvinder. Alle de forskellige segmenter er dog repræsenteret i vores Gallup Kompas over Bazar Fyns målgruppe. Bazar Fyns målgruppe befinder sig i det grønne/rosa segment i Minerva modellen. Da vores målgruppe er meget idealistiske og fællesskabsorienterede. 3 http://www.bazarfyn.dk/nyheder.aspx?id=459&action=1&newsid=982&m=newsv2&pid=1622 Side 6 af 19

Analyse Af designet og opbygningen af vores hjemmeside I dette i afsnit vil vi analysere de to forskellige design, og opbygningen af vores hjemmeside til Bazar Fyn. Vi har valgt stilarten modernisme, som vi vil bruge i vores art-stylesheet og i vores standart-stylesheet har vi valgt stilen minimalisme. Vi vil komme ind på hvad en stilart kan gøre for en hjemmesides kommunikationen ud ad til. Komposition Opbygningen af vores hjemmeside, er opbygget af en header, hvor vi har indsat en flash film og et logo indover. Flash filmen viser billeder ude fra Bazar Fyn, hvor man kan se frisk lækkert frugt og grønt, og billeder af glade mennesker der handler. I højre side af filmen har vi sat et logo ind, som er tegnet i Abobe illustrator. Herunder ses logoet, som senere er blevet sat ind over filmen i programmet Adobe Flash. Vi kom ikke frem til dette logo i første forsøg, vi afprøvede forskellige ting med billeder, men så kunne logoet ikke bruges i headeren, da der allerede var billeder i vores flash film. 4 Under headeren har vi sat en menu som har 6 hovedpunkter, og under dem er der underpunkter, som åbner sig i en drop-down menu. På forsiden har vi en left og right sidebar, og imellem en content boks. Nederst på siden har vi en footer. Vi har valgt kun at aktivere 3 af linksene i menuen på hjemmesiden. Disse 3 links er Forside, Butikker samt Opskrifter under Kogebog. Denne opsætning kan her ses i vores wireframe herunder. Vores wireframe er lavet i Photoshop. Denne komposition vi har valgt, er en meget typisk opbygning. Den skaber et simpelt, let og centret design, og der er ligevægt i kompositionen. Vi har benyttet os af Notepad++ til at lave vores HTML og CSS, og som nævnt ovenover har vi brugt Abobe Flash og Illustrator. 4 Se bilag 1 for at se de andre logoer. Side 7 af 19

Kompositionen minder meget om Bazar Fyns nuværende hjemmeside. Vi har valgt at lade os inspirere af deres egen hjemmeside, da vi fandt den overskuelig og let at bruge. 5 Stylesheet Det har været rigtig svært for os at finde en stilart til vores hjemmeside, da vi ikke rigtig mener at nogle af de stilarter vi har været igennem passer perfekt til vores projekt Bazar Fyn. Som tidligere nævnt har vi valgt minimalisme som vores standartstyle til hjemmesiden. Med minimalisme som stilart kan vi holde et enkelt og overskueligt design, som gør det let for brugeren at navigere på hjemmesiden. Minimalisme Vi har valgt modernisme til vores art stylesheet, som er en stilart vi har gennemgået i visualisering. Vi mente modernisme ville være god til at afspejle stemningen fra Bazar Fyn. De har i forvejen en meget enkel og overskuelig hjemmeside, hvilket også er vores mål for vores hjemmeside. Vi mener dog at stemningen mangler på den nuværende hjemmeside, som vi så vil prøve og indføre ved hjælp af et modernistisk design på websitet, så brugerne allerede får en oplevelse af Bazar Fyn, blot ved at klikke sig ind på deres hjemmeside 5 http://www.bazarfyn.dk/forside.aspx?id=458 Side 8 af 19

Minimalismen opstod i starten af 1960 erne efter et opgør med det subjektive kunstværk. En del af kunstnerne ville hellere arbejde med at male mere abstrakte malerier. Det vi kender minimalismen for i dag, er bl.a. de meget enkle former, som både udtrykker sig i skulpturer og malerier. Minimalismens slogan hedder Less is more eller på dansk mindre er mere. De minimalistiske kunstnere maler meget klarer linjer, som gør det nemt at danne sig sit eget indtryk af deres kunst. 6 Herunder ses nogle billeder som vi har brugt til inspiration til vores standart stylesheet. Disse billeder viser de typiske minimalistiske træk med de lige linjer og ikke for mange farver. Vi har valgt at bruge kølige farver i vores design, da vi har vores flashfilm, som indeholder en del farver. Farverne i flashfilmen er med til at bryde det kolde enkelte design, så der kommer liv og farver. Det samme ses på det sidste af de tre billeder, hvor de lige rektangulære kasser bliver brudt af de skarpe farver, uden at det virker rodet. Herunder ses et screenshot af vores hjemmeside til Bazar Fyn med det minimalistiske design. Som man kan se har vi valgt kølige enkelte farver, og både menuen og den højre sidebar har lige kanter, som er typisk for minimalismen. Vores flash film i headeren bryder dog det kølige design. 6 http://www.denstoredanske.dk/kunst_og_kultur/billedkunst/billedkunst,_stilretninger_efter_1910/minimalisme Side 9 af 19

Her ses html koderne til fade af farven på vores menu. Procent værdierne afgør, hvor meget kontrast der skal være i farverne( #efefef 0%,#7E766E 100%). box-shadow laver skygger på menuen. Disse koder er vi rigtig stolte af, da de giver liv til siden. De er relative simple at lave, men alligevel gør de meget for hjemmesiden. background: -webkit-linear-gradient(top, #efefef 0%,#7E766E 100%); box-shadow: 0px 0px 9px rgba(0,0,0,0.15); Modernisme Vi har valgt modernismen til vores art stylesheet, som er en stilart vi har gennemgået i visualisering. Vi mente modernisme ville være god til at afspejle stemningen fra Bazar Fyn. De har i forvejen en meget enkel og overskuelig hjemmeside, hvilket også er vores mål for vores hjemmeside. Vi mener dog at stemningen mangler på den nuværende hjemmeside, som vi så vil prøve og indføre ved hjælp af et modernistisk design på websitet, så brugerne allerede får en oplevelse af Bazar Fyn, blot ved at klikke sig ind på deres hjemmeside Modernismen fik sit udspring i starten af det tyvende århundrede. Modernismens kendetegn ses bl.a. i formelle fornyelser og regelbrud, lige pludselig var det tilladt at male mere frie billeder med alternative strukturer. Man kunne pludselig se de rene former og det hørte også tiden til at bruge farver i billederne. Den måde vi nok bedst kender modernismen på i dag, er det meget romantiske udtryk i kunstnerens værker. Det var blevet normalt at udtrykke de romantiske sider mellem mand og kvinde. Man så det tit som et selvportræt af kunstnerens eget liv. 7 Som inspiration til vores art stylesheet har vi valgt at se på modernismens mange farver, som man kan se på de tre billeder ovenover. Vi har taget modernismens varme farver ind på vores website, da disse farver skal være med til at skabe en stemning som man ville møde i Bazar Fyn. Det er 7 http://www.denstoredanske.dk/kunst_og_kultur/litteratur/litter%c3%a6re_perioder/modernisme Side 10 af 19

svært at få den multikulturelle stemning ind på en hjemmeside, kun ved hjælp af farver og billeder. Når man bevæger sig rundt i Bazar Fyn bruger man også de andre sanser. Lugte, lyde og det at føle sig frem har en stor indflydelse på oplevelsen, men det kan vi desværre ikke få med ind på vores website. Abstrakt er noget der er typisk for modernisme, og havde vi haft mere erfaringen og viden inden for kodning af hjemmesider, ville vi have benyttet det abstrakte og lavet lidt flere effekter på hjemmesiden. Som man kan se på vores screenshot af vores art stylesheet herunder, virker det som om der sker en masse på siden i forhold til vores minimalistiske design, men vi har kun ændret farver og baggrundsbilledet. Nu afspejler hjemmesiden pludselig varme, bare ved at ændre lidt i designet. Både menuen og den højre sidebar har fået runde kanter og skygger, det giver både liv og dybde til designet. Side 11 af 19

Sammenligner man vores modernisme stylesheet med Bazar Fyns nuværende hjemmeside, ser man en tydelig forskel i farverne. Til venstre ses Bazar Fyns nuværende hjemmeside, mens man til højre ser vores hjemmeside med art stylesheet. Vores design er meget varmere, og vi mener selv at man får en mere multikulturel stemning ind på hjemmesiden. Deres nuværende side er meget enkelt og måske lidt kedeligt i dens stylesheet. Stort set de eneste farver der er på siden findes i headeren. Vores hjemmeside er ikke blevet helt som vi ønskede, men vi har gjort det bedste vi kan med den læring og de midler vi har. Vi ville gerne have haft en lidt mere speciel menu, og nogle effekter på designet, som bryder den firkantede opbygning mere. Men vi har med to stylesheets vist to helt forskellige måder at udtrykke en hjemmeside på, og med at bruge kraftige farver skabt en hel anden stemning. Delkonklusion Den enkle og centrede komposition vi har valgt til Bazar Fyns hjemmeside, gør siden overskuelig og let at navigere på. Vores inspirationskilde til valget af komposition, kommer fra Bazar Fyns nuværende hjemmeside. Minimalisme er vores standart stylesheet, og modernisme er vores valgte art stylesheet. Vi har med den minimalistiske stil skabt et enkelt design ved brug af kølige farver, som gør hele siden enkel og rolig at se på. Ved brug af modernismens skarpe farver og et baggrundsbillede har vi forsøgt, at få Bazar Fyns stemning ind på deres hjemmeside, modsat deres nuværende hjemmeside, som er meget enkel og lys. Side 12 af 19

Diskussion Af de to stylesheets og indholdet på hjemmesiden Vi startede hele vores projekt med at sende et spørgeskema ud ved hjælp af det sociale netværk Facebook, for at se hvad folks formål med at besøge Bazar Fyn er, og hvad de synes om den nuværende hjemmeside. Vi har fået 90 svar tilbage på vores udsendte spørgeskema, men for at få det bedst mulige resultat, ville det være bedst at få over 100 besvarelser. Ude i Bazar Fyn er der en oversigt over butikkerne som ligger i Bazar Fyn, men skal der så også være en oversigt inde på deres hjemmeside? Vores spørgeskema viste, at 78 procent af dem der har besvaret vores spørgeskema, har besøgt Bazar Fyn. Formålet ved besøget var med 74 procent, at handle råvarer. 8 Ud fra det, må vi i gruppen sige, at det nok er vigtigt, at besøgende på hjemmesiden, kan få et overblik over indkøbsmulighederne. Men besøger folk overhovedet Bazar Fyns hjemmeside? I vores sørgeskema stiller vi spørgsmålet, om de nogensinde har besøgt Bazar Fyns nuværende hjemmeside, og kun 36 procent har været inde og besøge hjemmesiden. Måske ville et nyt og mere spændende design på hjemmesiden gøre den mere attraktiv at bruge, samt en QRkode i Bazaren der henviser til hjemmesiden? QR-koden ville i hvert fald skabe mere fokus omkring at Bazar Fyn har en hjemmeside, så det vil være en god måde at kommunikere det ud på. Det med at vælge en fast stilart til en hjemmeside, har været et problem for denne gruppe. Måske skyldes det vores valg af Bazar Fyn som projekt, eller har det noget at gøre med, at vi ikke har været i gennem en stilart som passer til Bazar Fyn? Det ville måske være bedre ikke at vælge en fast stilart til en hjemmeside, men i stedet blot vælge et tema. Alt det kommer dog an på gruppens kendskab til stilarter, og hvem eller hvad hjemmesiden er til. Hvis en hjemmeside omhandler popart ville det være let og praktisk, at bruge popart stilen i designet af hjemmesiden. Hjemmesider der skal sælge fx tøj, ville nok ikke have behov for en bestemt stilart, her skal designet bare være tiltrækkende, men ikke tage fokus fra de produkter der er på hjemmesiden. Hvis vi i gruppen ikke skulle vælge en stilart, havde vi i stedet valgt et tema som kunne afspejle den multikulturelle stemning som Bazar Fyn rummer. Med det menes, at vi måske ville havde brugt flere billeder taget ude i Bazar Fyn. De kunne bruges til baggrund, og derefter ville vi vælge 8 Se bilag 2 side 17 Side 13 af 19

farver og skrifttyper som passer til billederne. Men så er spørgsmålet om det ville virke rodet, og måske endda uprofessionelt at opbygge hjemmesidens stil undervejs? Konklusion Vi kan konkludere at vores målgruppe 40-59 er i det fællesskabsorienterede segment, hvor der er interesse for social ansvarlighed, medmenneskelighed, omsorg, økologi og sundhed. Bazar Fyns målgruppe befinder sig i det grønne/rosa segment i Minerva modellen, da vores målgruppe er meget idealistiske og fællesskabsorienterede. Med det udgangspunkt har vi valgt en enkelt og centreret komposition til Bazar Fyns hjemmeside. Det gør siden overskuelig og let at navigere på. Minimalisme er vores standart stylesheet, og modernisme er vores valgte art stylesheet. Vi har med den minimalistiske stil skabt et enkelt design ved brug af kølige farver, som gør hele siden enkel og rolig at se på, men på den måde kom den multikulturelle stemning fra Bazar Fyn ikke ind på hjemmesiden. Ved brug af modernismens skarpe farver og et baggrundsbillede har vi forsøgt, at få Bazar Fyns stemning ind på deres hjemmeside, modsat deres nuværende hjemmeside, som er meget enkel og lys. Det med at vælge en fast stilart til en hjemmeside har sine fordele og ulemper. Det har været svært at finde en fast stilart til Bazar Fyn, men i stedet har vi taget modernismens elementer ind på den nye hjemmeside. Med det art stylesheet vi har lavet, har vi fået skabt en varm stemning og liv til hjemmesiden. Hjemmesiden er stadig let og enkel i kompositionen så målgruppen 40-59 vil kunne bruge den. Side 14 af 19

Litteraturliste Head First HTMLwith CSS & XHTML, Robson & Freeman Publisher: O'Reilly Media; 1 edition (15 Dec 2005) Adobe Flash Profession Classroom in a Book Publisher: Adobe Press; 1 edition (May 24, 2012) Links 1. http://www.bazarfyn.dk/nyheder.aspx?id=459&action=1&newsid=982&m=newsv2&pid=1622 2. http://www.bazarfyn.dk/forside.aspx?id=458 3. http://www.denstoredanske.dk/kunst_og_kultur/billedkunst/billedkunst,_stilretninger_efter_1910 /minimalisme 4. http://www.denstoredanske.dk/kunst_og_kultur/litteratur/litter%c3%a6re_perioder/modernism e 5. Link til hvordan vi lavede QR-koden http://qrcode.kaywa.com/ Side 15 af 19

Bilag Bilag 1 Vores andre forsøg på logo lavet i illustrator: Side 16 af 19

Bilag 2 Spørgeskema med 90 svar Køn: Mand 49% Kvinde 56% Alder: 10-20 år 10% 20-30 år 78% 30-40 år 89% 40-50 år 33% 50+ 56% Har du været i Bazar Fyn? Ja 78% Nej 24% Ved ikke 4% Hvis ja - hvad var formålet med dit besøg? Handle råvarer 74% Handle isenkram 6% Restaurant besøg 20% Bare kigge 32% Other 9% Side 17 af 19

Har du nogensinde besøgt Bazar Fyns hjemmeside? Ja 36% Nej 68% Ved ikke 22% Hvis ja, hvorfor besøgte du deres hjemmeside? For at få et overblik over faciliteterne 43% For at få idéer til madlavningen 23% For at få inspiration til indkøb 23% Other 26% Her er et link til Bazar Fyns hjemmeside. Hvad synes du om det nuværende design? Det er flot og brugervenligt 23% Det er rodet og uoverskueligt 67% Stemningen i Bazar Fyn bliver ikke afspejlet via deres hjemmeside 33% Den fungerer fint, men designet er kedeligt 49% Ved ikke 13% Other 13% Hvad synes du om hjemmesidens indhold? Der står kun relevant information og siden er gennemført 66% Den er mangelfuld og der er meget irrelevant information 25% Other 22% Side 18 af 19

Bilag 3 QR-kode til vores reklamefilm. Det er dog kun få mobiler der kan åbne det, da det kræver at mobilen har falsh. http://jako3801.mmd.eal.dk/reklame_side/hjemmeside.html Opsætning af QR-kode ved Bazar Fyn. Denne QR-kode linker til vores hjemmeside. Side 19 af 19