[S&E] November 21, 2012

Transkript

1 1

2 Indholdsfortegnelse Indholdsfortegnelse... 2 Titelblad... 4 Indledning... 5 Problemformulering... 6 Metode... 6 Kommunikation... 6 Design... 6 Interaktion... 6 Desk/Field Research... 7 Magasinet... 7 Desk research... 7 Field research... 8 Spørgeskema... 8 Opsummering Skitsering Idéproces Analyse Stilarter Dekonstruktivisme Think Aloud Test Færdigt site Website analyse Standardhjemmesiden Dekonstruktivisme websitet Kodebeskrivelse Wireframes Sitemaps Brug af teknologi Projektledelse Gantt Chart Gruppeproces

3 Konklusion Bilag Bilag Det Fællesskabsorienterede segment Det Moderne-fællesskabsorienterede segment Det Moderne segment Bilag Skitser Bilag Think Aloud Test Bilag Kodebeskrivelse Kodebeskrivelse Bilag SWOT-analyse af Magasinet Odense Bilag Videre arbejdelse Bilag O-site QR-kode Litteraturliste Websites Bøger

4 Titelblad [S&E] November 21, 2012 Titel Multimediedesigneruddannelsen 1. semester Style & Experience Projektperiode 1 nov nov Deadline 21. nov Anslag Fag Kommunikation, Interaktion og Visualisering Vejledere Per Thykjær Jensen, Dan Johannesson, Kristin Utne, Thomas Bøye Jensen, Bjarne Slipsager Gruppemedlemmer Mads Fischer Baungård Rasmussen madsrasussen7970@hotmail.com Mark Hemmeløff Christensen markhchristensen@outlook.com Mads Jensen madsjensen5@gmail.com Martin Vøhtz martinvohtz@gmail.com Lokalitet Erhvervsakademiet Lillebælt, Munkebjergvej Produkt Projektrapport Website QR-kode Hjemmesidelink Flash-elemeter w.swf 4

5 Indledning Magasinet er byens mest intime teater- og musikscene. 1 Magasinet er et kulturhus, hvor du kommer helt tæt på kunstneren. Mere end 150 gange om året kan du opleve kultur på Magasinet i form af alt fra rock, stand-up, filmfestival og revyteater. Magasinet har siden 1989 været et aktivt spillested i Odense, og et sted vi kan lide at komme. I denne opgave har vi valgt at arbejde med Magasinet. I opgaven skal vi udvikle et website til vores valgte sted. Websitet skal indeholde 2 stilarter, som man skal kunne vælge imellem via en knap på websitet. Vi vil i rapporten komme igennem de teoretiske aspekter ved udvælgelses og udvikling af websitet. Vi vil lave en hjemmeside, som ikke kun informerer, men også inspirerer læseren, så læseren kan blive klogere på kulturhuset Magasinet. Vi synes Magasinet er et rigtig spændende sted at arbejde med, da vi ser mange muligheder til at lave et flot website. Magasinet er en del af Kulturmaskinen, men har ikke et selvstændigt website. Derfor har vi ikke nogen direkte inspirationskilde til designet, men det ser vi som en fordel. Vi gennemgår vores proces slavisk i rapporten. Vi har brugt vores viden fra de enkelte fag til at komme igennem opgaven. Rapporten svarer til 9 siders tekst, hvor hvor vi har flyttet nogle punkter til bilag nov

6 Problemformulering Vi skal i denne opgave lave et website til et selvvalgt sted i Odense, vi har valgt Magasinet. Websitet skal designes med 2 forskellige stylesheets. Derudover skal vi bruge en QR-kode som henvisning til websitet. Det er dette problem vi vil løse, og har formuleret følgende: Hvordan laver vi et kunstnerisk inspireret stylesheet, bygget på et standard website, som efterlever brugerens ønsker og indehaverens målgruppe? Metode Vi vil med udgangspunkt i de 3 fagområder: kommunikation, design, interaktion, sørge for, at vi får lavet 2 specifikke hjemmeside til Magasinet. Vi vil bruge metoder vi har lært i fagene til at skabe et fundament, og derved skabe os et overblik over opgaven. Kommunikation Vi vil i faget kommunikation kigge på strategi inden for indholdsanalyse (content analysis). Ved hjælp af denne analyse kan vi udarbejde et eller flere koncepter til vores hjemmeside - og vil samtidig komme ind på fordele og ulemper ved valgte medier. Vi vil blive klogere på vores indholdsanalyse vha. desk- og field research. Ligeledes vil vi analysere vores hjemmesides styrker og svagheder vha. en Think Aloud Test, hvor vi, beder en række forskellige aldersgrupper, om at komme med deres førstehåndsindtryk og mening om siden. Design Vi vil i denne del af opgaven udvikle det visuelle. Heriblandt 1 kunstnerisk inspirerede hjemmeside med stilarter vi har arbejdet med i faget visualisering. Udover vil vi lave en standard hjemmeside, med et design til rammer Magasinets målgruppe. Vi vil ved hjælp af de designteorier vi har lært, beskrive vores intentioner med designet af vores hjemmeside. Samtidig vil vi, med udgangspunkt i C.R.A.P-modellen, analysere vores hjemmesidedesigns og argumentere for hvorfor vi har valgt at gøre, som vi har gjort Interaktion I interaktion vil vi tage udgangspunkt i systemudviklingsmodellen. I grove træk er systemudviklingsmodellen delt op i 3 discipliner: Analyse, Design og Programmering. Vi vil på baggrund af vores analyse af Magasinet, vha. desk- og frieldreseach, designe vores hjemmeside. Når analyse og design er på plads vil vi til sidst programmere hjemmesiden fra bunden og sikre os, at hjemmesiden overholder de opstillede krav til opgaven og fungerer efter hensigten. 6

7 Desk/Field Research Vi vil starte med at lave en grundig research, hvor vi gerne vil blive klogere på Magasinet, stedets målgruppe og målgruppens ønsker i forhold til et website. Magasinet 2 3 Magasinet er et kendt spillested i Odense og har eksisteret siden Dengang gik skotske Runrig på scenen, og der har siden hen været rigtig mange koncerter på stedet. Magasinet er en del af JVB Concerts, som har tiltrukket mange store kunstnere siden Her kan bl.a. tælles Kevin Kostner, Lisa Nilsson, TV-2 samt Nephew og Magasinet har fået ros af både Kevin Kostner og Simon Kvamm fra Nephew. Magasinet er også vært for flere store stand-up komikere. Der kan nævnes Casper og Frank, Andreas Bo samt Anders Matthesen. Magasinet har et af Odenses bedste musikanlæg og skaber en intim stemning, hvor man som gæst kommer helt tæt på kunstneren. Udover musik og stand-up, er Magasinet også vært for Odense Filmfestival, revyteater og musicals. Derfor at Magasinet en meget alsidigt scene for både gæst og kunstner. Desk research Vi vil gerne bestemme Magasinets målgruppe for at kunne målrette vores hjemmeside. Magasinet bruges i dag til både musik, teater, stand-up mm. Derfor kan det være svært at definere en præcis målgruppe. Vi brugte Gallup Kompas til at udvælge målgruppe ud fra nogle værdier vi bestemte. Vi valgte folk i alderen 12 år og op. Vi valgte folk i alle aldre, i det vi ikke vil begrænse målgruppen. Dernæst valgte vi mennesker der bor på Fyn. Vi valgte fynboer for at begrænse området for målgruppen. Vi valgte folk der går i teateret og som går til rock/pop koncerter dagligt til sjældent. Selv om hyppigheden af besøgende svinger meget, besøger de stadig magasinet og dermed målgruppe. På næste side her kan ses at Magasinets målgruppe ligger i det Fællesskabsorienterede segment, det Moderne-fællesskabsorienterende segment og i det Moderne segment nov nov

8 Vi vil beskrive nærmere de valgte segmenter. Se bilag 1 for uddybende beskrivelse af de 3 segmenter. Field research Vi skal udvikle et website til Magasinet, som skal bruges af spillestedets gæster. Websitet skal indeholde information om stedet, samt arrangementer etc. Vi vil gerne undersøge hvad folk værdsætter når de besøger et website. Derfor har vi valgt at lave et spørgeskema ved hjælp af Google Surveys, hvor vi vil høre folks meninger om udvalgte relevante spørgsmål. Spørgeskema Vi delte alle fire spørgeskemaet på Facebook, samt enkelte online forums. Vi forventer at langt de fleste besvarelser kom fra Facebook, bl.a. på grund af aldersfordelingen. Vi havde 6 spørgsmål, hvor 2 af dem var baggrundsinformation om brugeren og 4 ud af de 6 spørgsmål var omkring deres færden på websites. Vi fik 122 besvarelser, 84 svar (69 %) fra mænd og 37 svar (31 %) fra kvinder. Ikke overraskende fik vi rigtige mange besvarelser fra folk i aldersgruppen år og år. De to aldersgrupper består af hele 100 besvarelser (83 %). Derudover fik vi 14 svar (12 %) fra folk der er år, og 5 svar (4 %) fra folk i aldersgruppen år. Til sidst fik vi 2 svar (2 %) fra de årige. Selvom aldersfordelingen er skæv, mener vi stadig at undersøgelsen af brugbar. 8

9 I vores første spørgsmål undersøger vi hvad der er vigtig for brugeren på en hjemmeside. Vi har valgt disse svarmuligheder for at få et overblik over hvilke parametre vi skal være opmærksomme på når vi udvikler vores website. Resultatet blev at 101 personerne valgte Let at navigere og 102 personer Nem at overskue som vigtige elementer på et website. Ved vores næste spørgsmål undersøger vi hvor vidt brugen af billeder vil være klogt. Modsat forrige spørgsmål kan brugeren kun vælge 1 svarmulighed. De skal tage stilling til at de foretrækker billeder, tekst eller begge dele på et website. Resultatet blev at 104 svarede En god blanding, svarende til 86 %. Ved vores næste 2 spørgsmål spørger vi direkte hvordan de ønsker en forside skal se ud, samt hvordan undersiderne skal se ud. Vi vælger nogle svarmuligheder, der er interessante for os at få en mening om, bl.a. i forhold til effekter, menupunkter mm. 9

10 Resultaterne af disse spørgsmål viser at folk mener at designet på forsiden skal matche afsender, og de gerne vil have få menupunkter med underpunkter. Brugerne mener også at undersiderne skal være i stil med forsiden. Efter at have analyseret besvarelserne, har vi fået nogle parametre vi skal have med, når vi udvikler vores website. Det er vigtigt at vores website er overskueligt og nem at navigere på. Dernæst skal vi finde en god balance mellem tekst og billeder. Vi skal bygge websitet op med få menupunkter med underpunkter, hvor undersiderne er i stil med forsiden. Vi skal også huske at designet skal match afsenderen. Opsummering Udfra vores research er vi blevet klogere på hvad Magasinets profil er, hvilken målgruppe de har, samt hvad målgruppen ønsker på et website. Det er vigtig viden til næste trin, hvor vi skal begynde og udvikle designet. Vi er blevet bevidst om hvilken målgruppe vi skal ramme, vi skal være opmærksomme på at målgruppen svinger en del, og websitet skal passe til hele målgruppen. Derudover har vi fået stort udbytte fra vores spørgeskema, hvor vi helt konkret har fundet ud af, hvad vi skal lægge vægt på ved udviklingen af websitet. 10

11 Skitsering Næste skridt efter researchen var at begynde skitseringen af websitet til Magasinet. Idéproces Efter vores research begyndte vi en kreativ tænkeproces. Vi skulle vælge en stilart og arbejde videre med. Vi arbejdede visuelt i idéprocessen. I stedet for at læse om stilarter og skrive noter, brugte vi Adobe Photoshop til at udvikle vores egne bud på hvordan designet kunne se ud. Vi lavede skitser til vores standard-website, samt forslag til vores endnu ikke valgte stilart. Herunder kan ses et af forslagene vi kom op med, denne skitse er tiltænkt standard-websitet for Magasinet. Den næste herunder er inspireret af streetart-moderne stilarter. Se bilag 2 for yderligere skitser. Efter overvejelser besluttede vi at arbejde videre med stilarten Dekonstruktivisme. 11

12 Analyse [S&E] November 21, 2012 Som en del af rapporten, vil vi analysere de kommunikative- og designmæssige valg vi støder på gennem opgaven. Derudover vil vi analysere på de tekniske overvejelser for websitet. Stilarter Vores website skal struktureres med ét standard design og 1 stilart. Websitet skal designes så det passer til Magasinets målgruppe, som er den første designstil. På websitet skal der være en knap til et ekstern stylesheet med en ny stilart. Dekonstruktivisme Som vores valgfrie stilart har vi valgt dekonstruktivisme, fordi den passer godt til den brede målgruppe som Magasinet har og det er spændende at arbejde med. Dekonstruktivisme er et udskud af postmoderne kunststil, som begyndte i slutningen af 1970 erne. 4 De hovedsagelige karakteristiske træk i dekonstruktivisme er at fragmentere og fordele et værk, hvilket giver en frihed for form, som opfordrer til utraditionelt designs. "Deconstructing is to deform a rationally structured space so that the elements within that space are forced into new relationships". 5 Dekonstruktivisme er mest kendt fra arkitekture af bygninger som Guggenheim-museet i Bilbao, men stilarten bruges ikke kun til bygninger, men også grafisk design. Dekonstruktivisme-stilen, især arkitektur, blev i høj grad påvirket af den franske filosof Jacques Derrida, som siger at deconstruction is not a style or 'attitude' but rather a mode of questioning through and about the technologies, formal devices, social institutions, and founding metaphors of representation". 6 Katherine McCoy er også en indflydelsesrig designer I henhold til denne stilart. McCoy begyndte sin karriere i 1967 hos Unimark International, og arbejdede derefter som grafisk designer for en række selskaber. McCoy arbejdede mest med typografi, på en måde hvor hun kombinerede dekonstruktivisme og kubisme ved at bryde grid (gitter). Ved at dekonstruere et grid, nedbryder vi en struktur for at opdage nye rumlige eller visuelle relationer i vores værk. Overlappende grids eller kolonner kan skabe en opfattelse af sammensætningen, hvilket vi kan overføre til en Header på vores website, hvor man kan have et billede der overskrider grid. McCoy er en inspiration vi vil arbejde videre med. Det kan bl.a. være til et sponsorbillede, hvor tekst eller logo udskrider deres boks. Gennem dekonstruktivismes metoder, kan foreninger og betydninger skabes fra behandlingen af teksten til at danne mening og en naturlig rytme af kommunikation. Destruktivisme er generelt en anderledes måde at kommunikere på, strukturen er ofte væk og designet kan være rodet. Stilarten har også sine muligheder, og det er dem vi gerne vil arbejde med. 4 konstruktivisme 20.nov Samara, Timothy. Making and Breaking the Grid: A Graphic Design Layout Workshop. Beverly, Massachusetts: Rockport, Samara, Timothy. Making and Breaking the Grid: A Graphic Design Layout Workshop. Beverly, Massachusetts: Rockport,

13 Think Aloud Test Vi har fået fem personer til, at deltage i en Think Aloud Test, for på den måde at få nogle meninger om vores hjemmeside. 7 En Think Aloud Test er egentlig ret simpel: Få en række brugere til at benytte et givet produkt, mens de samtidig udtrykker, hvad de mener om produktet og brugervenligheden. Resultaterne af testen har givet os indblik i hvad brugerne mener om vores side samtidig med, at vi er blevet klogere på hvad brugerne har fokus på, når de besøger vores side første gang. Vi er ligeledes blevet gjort opmærksom på småfejl/mangler, som vi ikke selv har lagt mærket til i processen; disse fejl har vi selvfølgelig rettet efterfølgende. En af vores mere kvalitative Think Aloud undersøgelser er, hos brugeren Mikkel på 42 år, som i sin dagligdag er webredaktør hos Dan-Pilot. Mikkels arbejde gør, at vi kan bruge hans ekspertise, til, i større grad, at finpudse vores hjemmeside og i det hele taget få en mening fra en bruger, som arbejder med websites i sin hverdag. Nogle af de feedbacks, som han har givet om vores hjemmeside, tog vi til os. Som fx, at få vores logo til at stå mere i fokus. Ligeledes fik vi tilføjet overskrifter til vores menu bokse, så det er tydeligere, hvad man egentlig ser på. Få ting ændrede vi dog ikke på. Som fx baggrundsbilledet. Dette gjorde vi ikke, på baggrund af flere af de andre adspurgte, godt kunne lide det billede. Se bilag 3 for flere af de ændringer vi foretog os fra betaversionen til goldversionen. 7 Se bilag 1. 13

14 Færdigt site Website analyse I opbygningen af vores website har vi i vores design brugt analysemodellen C.R.A.P., for at sikre os vi kom rundt om alle de designmæssige metoder. C.R.A.P.-modellen omhandler de 4 basis designprincipper: Contrast, Repetition, Alignment og Proximity. De spiller hver især en vigtig rolle, når et flot webdesign skal opbygges. Standardhjemmesiden Contrast Kontrasten er en vigtig del af webdesign, da den skaber oversigt. Ved brug af kontrast, kan vi skabe opmærksomhed omkring visse elementer og samtidig nedtone andre. Kontrast kan bruges på flere forskellige måder. Blandt andet vha. farver og bokse. Størrelse, farve og placering spiller alle en rolle. Fx på vores standard website: Her har vi brugt to bokse, Program og Nyheder, med alpha (75 %), som begge er inden i vores wrapper (den mørkegrå boks) med alpha (50 %). Denne kontrasteffekt gør, at program- og nyhedsboksen kommer i fokus og bliver fremhævet. Kontrasten virker på samme måde inde i Programboksen, for at fremhæve de fem artister samt datoen for deres koncert. Her benytter vi den helt mørkegrå og grønne farve, for at gøre det lettere for brugeren, at se hvad der er vigtigt. Repetition Gentagelse er en betegnelse for, at bruge de samme elementer gennem hele websitet. Repetition definerer produktet og giver et stærkt udtryk. Farver og opbygningen spiller en vigtig rolle. Vi har på vores hjemmeside brugt repetition ved fx den grønne farve, som går igen flere steder på siden. 14

15 Repetition af disse "knapper" forener dem som værende relateret både i emne og funktion. Både farve, størrelse og placering understøtter repetitionens funktion. Alignment & Proximity Alignment er strukturens ramme. Placering af elementer, bokse, tekst bør aldrig være tilfældigt. Hvert et element bør have en funktion og en forbindelse til et andet element eller en anden side. Grids spiller blandt andet en vigtig rolle her. Som vidst på billedet herover, har vi overvejet alignment nøje, da vi designede vores hjemmeside. Alt fra placering af selve midterboksen/siden (at den er placeret i midten af skærmen), til at de forskellige bokse er placeret rigtigt ved siden af hinanden. 15

16 Inde i programboksen har vi nøje placeret boksene overfor hinanden, med en tilpas afstand, så brugeren ikke er i tvivl om hvilken dato er til hvilken artist. Egne refleksioner Vi har bygget hele websitet op fra bunden, da Magasinet ikke har et selvstændig website. Vi brugte lang tid på at udvikle et logo, vi kunne bruge for Magasinet samtidigt med har vi skulle udvikle to designs. Vi har derudover brugt lang tid på at definere og ramme Magasinets stemning som kulturhus i vores design. Det ville vi kunne have set på deres egen hjemmeside hvis de havde haft en. Vi har også brugt megen tid i Flash på blandt andet et Flash slideshow og en dropdown-menu. Slideshowet synes vi giver et godt førstehåndsindtryk, når man kommer ind på siden. Samtidig fungerer slideren som et middel for brugeren til, at identificere hvilken hjemmeside man netop er kommet ind på. Dekonstruktivisme websitet Contrast Vi har kontraster på vores dekonstruktivisme websitet ved flere elementer. Magasinets logo består af flere forskellige farver, der skaber kontraster og fokus. Ligeledes har vi kontraster ved programoversigten, hvor farverne blå og rød skaber blikfang for brugeren. Baggrunden består af røde, blå og gule farver. Disse farver er modstridende og skaber igen kontraster. 16

17 Repetition Vi benytter gentagelser ved farvevalget, de røde, blå og gule farver, samt ved program- og nyhedsboksen. Her bliver størrelsen på boksene genbrugt. Alignment & Proximity Selvom stilen er dekonstruktiv har vi stadig tænkt over alignment i designet. Vi har beholdt designet af programoversigten, hvor alignment bruges. Det er vigtigt at brugeren ikke er i tvivl om hvilke kunstnere der spiller hvilke dage. Ligeledes bruger vi alignment ved Flash-banneret, logoet og dropdown-menuen. Da vi bestemte størrelsen på websitet, tog vi også højde for den gennemsnitlige opløsning, som brugere benytter sig af. Det giver et struktureret alignment. Egne refleksioner På samme måde som på vores standardsite, har vi bygget vores site op fra bunden. Det har dog været sværere at arbejde med det dekonstruktive design, da det giver konflikter når stilartens skæve karakterer skal designes ind i fx vores programliste, hvor der helst ikke må være nogen tvivl om hvem der spiller og hvornår. Selvom at vi synes, at det er en svær stilart at arbejde med, når det kommer til webdesign, er vi godt tilfredse med vores resultat. 17

18 Kodebeskrivelse Vi har skrevet rigtig meget kode til vores website. Vi har udvalgt 2 eksempler på koder vi er ekstra stolte af, og som vi har brugt tid på. Se bilag 4 for uddybende beskrivelse af vores første udvalgte kode som er fra Flash. Se bilag 5 for vores anden uddybende kode, denne gang omkring vores drop-down menu. Wireframes Før vi startede på at kode hjemmesiden, havde vi en brainstorm om, hvad siden skulle indeholde og hvordan den skulle struktureres. Vi brugte wireframes som en guide, der viser grundlæggende hvordan hjemmesiden skulle opbygges, ved brug af tegninger eller illustrationer. Wireframes giver et hurtigt overblik over det færdige mål, og hjælper til at lave forbedringer til hjemmesiden inden man begynder på kodning. Vi har lavet et wireframe til hver af vores stilarter, fordi vores valgfrie stilart, destruktivisme, skulle opbygges anderledes end standard versionen. Vores hjemmeside er 1920px bred i alt, så den passer med en High Definition opløsning og indholdet er centret med 980px, så det passer til de computere der bruger en 1024px opløsning. 8 Herunder er vores wireframe over vores standard-website nov

19 Vores dekonstruktivisme-side skal opbygges af samme elementer som standard-siden. Derfor kunne vi sætte punkter i højre hjørne af elementerne og få CSS til at flytte dem til de valgte koordinater. Herunder har vi lavet et wireframe over vores dekonstruktive-website. 19

20 Sitemaps Sitemaps gør det nemt for at oplyse søgemaskiner, såsom Google, Yahoo eller Bing om siden. Et sitemap er en XML-fil der indeholder webadresser som gør at søgemaskiner kan mere intelligent gennemgå hjemmesiden. Webcrawlers opdager som regel sider via links fra hjemmesider. Sitemaps supplerer disse data ved at lade Webcrawlers opfange webadresser i sitemap et. Herunder er vores sitemap over hovedsiden. 20

21 Brug af teknologi Vi har i vores Style & Experience projekt brugt en lang række forskellige teknologier og programmer til, at komme frem til det resultat, vi i sidste ende står med. Programmerne har hver især tjent et forskelligt formål og i flere tilfælde har programmerne og teknologierne også overlappet hinanden. Vi har hovedsageligt brugt Adobe Dreamweaver til kodning af vores hjemmeside. Vores hjemmeside er bygget op i XHTML 1.0 strict, med flere eksterne stylesheets (CSS). Ligeledes har hvert design 4 eksterne stylesheets. Da der både skulle et stylesheet til forside, nyhedsside, billetside og dropdown menu. Derudover har vi implementeret flash-elementer, som er lavet i Adobe Flash Professional CS6. Vi har published (publiceret) elementerne og derefter sat dem ind i vores XHTML kodning. I Flash har vi også arbejdet en smule med objektsproget actionscript, som har været et vigtigt værktøj i vores opgave for at lave et dynamisk website. Beskrivelsen af vores actionscript kodning kan ses i bilag 4. Sidst men ikke mindst har vi brugt Adobe Photoshop CS6. Alt design, som ikke er kodet i CSS, er blevet lavet og/eller redigeret heri. Vi har overvejet hvilket videre arbejde websitet vil kræve. Se bilag 7. Projektledelse Gantt Chart For at skabe et overblik over tidsforløbet i projektet har vi valgt at planlægge timerne i et Gantt Chart. Vi har brugt programmet OpenProj til at Gantt Chartet. Vi har udmålt hvad der skal nås på hvilke dage, og hvem der skal skrive hvad. Herunder kan ses vores planlægning. 21

22 Gruppeproces Vi er i gruppen enige om, at samarbejde er gået godt. Vi har fra starten snakket om ambitionsniveauet, da vi ikke havde nogen gruppemæssige erfaringer sammen. Vi fik afstemt forventninger til forløbet. Vi har alle forskellige læringsstile, og vi skulle lige afstemme hvordan vi ville arbejde sammen, så alle kunne bidrage. Undervejs i projektet delte vi opgaverne ud, så vi hver enkelt arbejdede med det område hvor vi var stærkest. Selve udviklingen af websitet tog rigtig meget tid, hvor primært et gruppemedlem var helt inde i det. Vi andre lod ham arbejde, og tog os af andre dele i projektet. I idéfasen bidrag vi alle for at finde det bedste at arbejde videre med. Ved research arbejdede vi både individuelt og sammen to og to, samt alle fire. I denne fase var der meget analyse af data. Alt i alt synes vi forløbet i gruppen er gået godt, og vi har lært en masse fra hinanden. Konklusion Vi har igennem vores projekt stræbet os efter at få opfyldt vores problemformulering; nemlig Hvordan laver vi et kunstnerisk inspireret stylesheet, bygget på et standard website, som efterlever brugerens ønsker og indehaverens målgruppe. Ved brug af research, både desk og field-research, og med en god uddybning af vores målgruppe, i form af segmentering i vores Gallup kompasrose, så er vi nået det mål, vi ønskede i starten af projektet. Vi har lavet et dekonstruktivt inspireret website, som er bakket op af vores research, efterlever brugerens krav og som samtidig rammer en bred målgruppe. Ligeledes har vi lavet et standard-website for Magasinet henvendt til deres målgruppe. 22

23 Bilag Vi har valgt at ligge nogle ting i bilag for at holde os indenfor 9 siders tekst. Bilag 1 Det Fællesskabsorienterede segment 9 Personerne i dette segment ligger primært i aldersgruppen år, og der findes en større andel kvinder end mænd. Nøgleord der karakteriserer dette segment er sundhed, økologi, omsorg, social ansvarlighed og medmenneskelighed. Segmentet består også af grønne og politiske forbrugere og hele segmentets interesser ligger indenfor det medmenneskelige og nære. Det Fællesskabsorienterede segment engagerer sig ofte for områder der ligger deres dagligdag nær. Det kan være miljø- og forureningsspørgsmål, arbejdsmarkeds- og boligpolitik, samt forbrugsspørgsmål. Segmentet læser mange bøger, primært skøn- og faglitteratur. Personerne spiller ofte et instrument og lytter i stor udstrækning til jazz og klassisk musik. Det fællesskabsorienterede segment benytter ofte kulturelle tilbud, såsom museer, udstillinger og teater-besøg. Rent politisk finder vi segmentet hos Socialdemokraterne, SF, Det Radikale Venstre og hos Enhedslisten. Personerne ønsker åbenhed og større fokus på integrering af flygtninge i det danske samfund og hjælpe dem på vej mod et bedre liv. Segmentet læser Politiken, Information, Weekendavisen og Samvirke. Herover er beskrevet det Fællesskabsorienterede segment. Dette segment bruger typisk Magasinet, hvis de vil benytte et kulturelt tilbud, f.eks. teater. Det Moderne-fællesskabsorienterede segment 10 Dette segment benytter i stor stil kulturelle tilbud. Det er her man finder kulturkonsumenterne. De bruger meget af deres fritid på kulturen. De går i teateret, biografen, museum og biblioteket, samt maleri- og kunstudstillinger. Nøgleord for personerne i dette segment er tolerance og medmenneskelighed, åbenhed over for verden, amt social- og samfundsmæssig ansvarlighed. Støtte til dårlig stillet lande, samt hjælp til flygtninge i det danske samfund vægter højt hos segmentet. Deres politiske ståsted er ofte hos Det Radikale Venstre, Centrum-Demokraterne, Socialdemokratiet og SF. De mener at den offentlige støtte til kulturlivet skal støttes. Aldersgruppen for det Moderne-fællesskabsorienterede segment er år. Personerne har ofte stiftet familie og bor i huse i større byer i Danmark. De har ofte en humanistisk eller offentligrelateret uddannelse. Derfor finder man ofte det Moderne-fællesskabsorienterede segment have stillinger ved uddannelsessektoren, forvaltningen og sygehusvæsenet. Segmentet læser fagblade som Magister Bladet, DJØF bladet, Gymnasieskolen og Dagens Medicin, samt aviserne Information, Politiken og Berlingske Tidende. Som hos Det fællesskabsorienterede segment er det Moderne-fællesskabsorienterede segment også interesseret i miljø- og forureningsspørgsmål. De udviser engagement i politisk debat, både i EU og ved erhvervsforhold. Segmentet ser succes i livet som et personligt mål, og gør meget for at opnå det nov nov

24 Det Moderne-fællesskabsorienterede segment bruger PC og internet i stor udstrækning. De bruger internettet både hjemme og på job, og opsøger nyheder, underholdning og kulturtilbud. Hjemme har segmentet trang til helse og økologi, og begår sig gerne ud i finere madlavning hvis lejligheden er der. Herover har vi beskrevet det Moderne-fællesorienterede segment. Disse personer bruger i stor stil kulturelle tilbud. Det kunne være fra Magasinet om så det er musik, stand-up, teater etc. Det Moderne segment 11 Det Moderne segment består primært af den yngre del af befolkningen. Segmentet er typisk ved at skabe sig en karriere. Personerne ligger typisk under 40 år, og har en lille overvægt at mænd. Dette segment går meget op i deres arbejde, og er det segment med den største løn. Den store løn skyldes lange arbejdsuger og mange arbejdstimer. Personerne i segmentet er også beskæftiget som funktionærer, men også lærlinge/studerende i retning efter et stort job. Segmentet bruger PC hjemme og på arbejdet. Segmentet bruger internettet til informationssøgning og nyheder. De læser Berlingske Tidende, Børsen, Jyllands-Posten, samt Computer-World. I segmentets fritid opsøger de ofte ny inspiration, trends og livsstilprodukter. Der rejser meget, både på grund af arbejde, men også i fritiden. De dyrker sport, i og uden for en klub. Segmentet har en stor interesse for ny teknologi og mobiltelefoner. De gør meget for at nå langt, men vil ikke gå på kompromis i forhold til f.eks. miljøforurening eller forhold. Politisk står det Moderne segment til Venstre og Konservative. Det Moderne segment kan være brugere af Magasinet ved arrangementer omkring teknologi eller lign. Odense Filmfestival på Magasinet kunne også være en oplagt mulighed for det Moderne segment nov

25 Bilag 2 Skitser Skitse for hvordan vi kunne lave designet til Magasinets website. 25

26 Bilag 3 Think Aloud Test Sebastian, 16 år Fed baggrund, kan godt lide at det er gennemsigtigt, så man kan ane baggrunden Få og simple farver, som passer godt sammen Reklamesliden er super Hjemmesiden fylder ikke hele skærmen, det er anderledes, det kan jeg godt lide. Kontaktoplysningerne helt nede i bunden ser dumt ud når det står sådan. Nem og overskuelig hjemmeside Casper, 21 år Troede det var en professionel side Simpelt og overskueligt design Godt farvevalg Slideren er super fed giver en lydt til at undersøge mere Godt med få punkter Kan lide dropdown menuen. Lone, 50 år Bogstaverne i det øverste panel, virker for store Bunden med reklamen Kulturmaskinen er lidt tam Hanne, 75 år Flot side! Ang. billetkøb: fredag bør rettes til Fredag. Kulturmaskinen: Jeg synes typerne er for spinkle anden font? Fede typer? Mikkel, 42 år (webredaktør): ''Det første der slå mig er den store karrusel i toppen, dejligt stærkt visuelt element. Logo og 'Magsasinet' står ikke særligt skarpt, da de er de primære visuelle grafikker synes jeg der skal kæles for dem, så de står rent og stramt. Det blå baggrundsbillede er jeg mindre begejstret for, det støjer og bidrager ikke med noget. Menuen er dejlig enkel, men måske hældende til det klodsede. Den kunne måske være en anelse mindre i højden, og måske forfinet lidt. Dropdown er fint og overskueligt. I kalenderen stritter den grønne farve ved datoerne lidt, burde måske være den samme som ellers bruges? Eller en helt anden? Og vandrette streger mellem de enkelte events vil gøre det tydeligere at datoen knytter sig til den grå kasse med bandnavn - det bliver lidt søjleopdelt. Så savner jeg en overskrift på kalender og artikelliste, der forklarer hvad jeg ser på. 26

27 I artikellisten kunne det måske være en ide at tage den første linje med af artiklen som appetitvækker? Der er ikke så stor forskel på kalenderen og artikellisten når de begge fremtræder næsten ens. Hvor kan jeg dele det med mine kontakter? Specielt koncerter og kulturtilbud er ofte noget jeg gerne vil dele (FB mm) Men generelt positivt indtryk, og en side jeg gerne ville benytte og navigere rundt i. Her er hvordan vi lavede vores website før Think Aloud Testen. 27

28 Bilag 4 Kodebeskrivelse 1 Vi lavede en drop down menu i Flash. Herunder ses selve koden i Flash. import flash.filters.glowfilter; import flash.events.mouseevent; import flash.display.movieclip; var navbtnglow: GlowFilter = new GlowFilter(0x999999, 0.5, 0, 15, 1, 2, true, false); // Dette er en roll-over effekt. Denne samme effekt, som når vi arbejder med 'hover' i CSS. // Vi laver en Glow-using ved brug af komandoen 'variables' og laver et nyt GlowFilter. // Først definerer vi farven, når musen kører henover objektet: # // Derefter alpha: 0.5. Intensiteten af farven. Skal defineres mellem 0 og 1. // Så definerer vi blur ved x-aksen.: 0. // Så definerer vi blur ved y-asksen.: 15. // Så har vi styrken på farven: 1. // Så definere vi hvor høj kvaliteten skal være: 2. // Så fefinere vi om de skal være inner eller outer glow. Det skal være inner: true // Til sidst knockout: false. // Vi har her et glowfilter (lysfilter) vi kan tilføje til vores knapper. // Nu skal vi have defineret, at glowfilteret skal komme frem, når musen kører henover // og forsvinder når musen kører væk fra knappen igen. Det gør vi herunder: navbar_mc.addeventlistener(mouseevent.mouse_over, navoverf); navbar_mc.addeventlistener(mouseevent.mouse_out, navoutf); // Først fortæller vi, hvilket objekt(er), dette skal gælde for. Det er navbar_mc. Dette // er navnet på vores navigationsbar (instance name). // Så skal vi give det en begivenhed(event). Det gør vi med addeventlistener. // Dette event er et MouseEvent.MOUSE_OVER, (når musen kører henover) // Vi laver så en lignende kode nede under, som er når musen kører væk fra knappen. // Så skal vi have fortalt den, at det er det Glowfilter vi lavede før, som skal komme frem // når musen kører henover og væk igen. // Det gør vi ved at give det en funktion (function) function navoverf(event:mouseevent): void{ event.target.filters = [navbtnglow]; // Vi laver endnu et event. Vi definere igen, at det skal være et muse-event // Derefter fortæller vi den, HVAD der skal ske når musen kører henover: nemlig // navbtnglow, som vi definerede tidligere. 28

29 // Så når musen kører henover vores navbar_mc (og de andre instancer deri), // vil variablen navbtnglow ske (nemlig give instance-knapperne et glow) navbar_mc.setchildindex(event.target as MovieClip, 1); dropmenus_mc.gotoandstop(navbar_mc.getchildat(1).name); trace("we are Rolled Over..." + navbar_mc.getchildat(1).name) // Her er vores kode, der "tricker" dropdown-menuen, når musen kører henover. // Første definerer vi navbar_mc som et childindex og sætter dif til 1. // Så laver vi endnu en gotoandstop kommando på vores dropdownmenu (dropmenus_mc), // som er inde i vores navbar_mc. // Til sidst tilføjer vi et trace (We are Rolled Over..." + navbar_mc.getchildat(1).name, // hvor name er navnet på det menupunkt vi kører musen henover. } function navoutf(event:mouseevent): void{ event.target.filters = []; } // Dette er samme funktion som oppe over. Her fortæller vi bare, // at glowfunktionen, ikke skal være der, når musen kører væk fra knapperne. // Derfor er [] tom. Dette er vores beta-version af den dropdown-menu, som vi først havde planlagt at bruge. Denne dropdown-menu er lavet fra bunden i Adope Flash Professional CS6, med tegnede elementer, modificerede knapper og actionscript. Vi valgte dog, at bruge en CSS dropdown-menu istedet, da vi løb ind i problemer med at få den publiceret og tilpasset på vores hjemmeside. Vejleder Thomas Jessen kunne heller ikke hjælpe med dette problem. Vi har dog valgt at medbringe den her i bilagene, da vi har brugt en del tid på den og at det egentlig var hensigten, at implementere den på vores hjemmeside. 29

30 Kodebeskrivelse 2 Vores dropdown menu har en gradient baggrund. For at få en gradient farve til at virke i alle browsers, skal der forskellige scripts til. Til at lave denne gradient, og få den til at fungere korrekt i de forskellige browsers, benyttede vi Microsofts CSS Gradient Background Maker. Efter vi fandt vores ønskede gradient, lavede værktøjet 6 forskellige scripts, så den virker i alle browsers. Her under er CSS koden til menuens baggrund og position på sitet: #navigation{ margin-left:22px; //Rykker margin-left 22px, så det passer med at menuen er centreret. width:980px; height:50px; //Bestemmer størrelse på menuen som 980x50px /* IE10 Consumer Preview */ background-image: -ms-linear-gradient(top, #0F3001 0%, # 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(top, #0F3001 0%, #277A04 100%); 30

31 /* Opera */ background-image: -o-linear-gradient(top, #0F3001 0%, #277A04 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0F3001), color-stop(1, #277A04)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(top, #0F3001 0%, #277A04 100%); /* W3C Markup, IE10 Release Preview */ background-image: linear-gradient(to bottom, #0F3001 0%, #277A04 100%); border: 1px solid #c1c1c1; //Solid border på menuen med en størrelse på 1px og farven #c1c1c1 } Bilag 6 Vi har lavet en SWOT-analyse over Magasinet for at blive klogere på virksomheden bag Magasinet. Blive klogere på deres stærke og svage sider, både interne og ekstern. SWOT-analyse af Magasinet Odense Interne forhold Stærke sider: Svage sider: Ikke sæsonbaseret popularitet Ingen decideret målgruppe Bred kulturel underholdning Ingen nuværende hjemmeside Ligger i midten kulturmaskinen og midten af Odense Frivillige arbejdere (i form af aftaler med andre instanser som fodboldklubber) Ingen decideret målgruppe. Afhænger af, hvem spiller/optræder på Magasinet Eksterne forhold Muligheder: Trusler: Store navne til, for at øge interessen og Manglende interesse kendskabet Konkurrenter 31

32 Bilag 7 Videre arbejdelse Hvis vi skulle arbejde videre med projektet, ville der stadig være rigeligt at arbejde med. I dropdown menuen mangler vi at lave både links og undersider. Hvis dette var et produkt, der skulle sælges til virksomheden Magasinet, skulle designet integreres med et CMS system. Dette gør at siden bliver dynamisk, f.eks. i forhold til kalender og nyheder, så en bruger uden noget erfaring i HTML-kodning, selv ville kunne uploade nye events og nyheder op på sitet. 32

33 Bilag 8 O-site QR-kode 33

34 Litteraturliste Websites nov nov nov Bøger der_i_kunsten/dekonstruktivisme 20.nov nov nov nov nov Samara, Timothy. Making and Breaking the Grid: A Graphic Design Layout Workshop. Beverly, Massachusetts: Rockport,