Esben, Jannec og Elias Style and Experience Dato 02-12-2011 SKOLE: MMD Odense EMNE: Style and Experience KLASSE: Web B GRUPPE: Esben, Jannec og Elias VEJLDERE: molk, bjsl, anng ANTAL ANSLAG: 15.206 URL: http://odensevinterjazz.mmd.eal.dk/group11/index.html
INDHOLDSFORTEGNELSE INDHOLDSFORTEGNELSE... 2 KOMMUNIKATION... 3 Idégenereringsproces... 3 Brugerprofil... 4 Definition af målgruppe... 4 DESIGN... 7 Visuel dekonstruktivisme... 7 VIRKSOMHEDEN... 9 Observationer fra arrangementet d 28. november... 9 Fotodokumentation... 10 Hvordan vi fungerede som gruppe... 10 Positivt/negativt... 11 INTERAKTION... 11 Analyse... 12 Struktur/modellering... 13 Realisering/kode... 14 LITTERATURLISTE... 16 Links... 16 2
KOMMUNIKATION Idégenereringsproces Vi startede i fællesskab med at søge på nettet for inspiration og kom i tanke om da vi tidligere på semestret blev introduceret til bandet 1 Arcade Fire. De blev vores inspirationskilde i dette projekt, da de er dygtige til at fortælle en historie vha. billeder og lyd. Ud fra dette gik vi i gang med at brainstorme. Vi havde mange interessante idéer oppe at vende. Eksempelvis tænkte vi på at opbygge hjemmesiden som et gammel jazz club, forsiden skulle vise indgangen og inde bag den er der et tilrøget mørkt, jazz lokale. Vi overvejede også hvorvidt hjemmesiden skulle laves i tegneseriestil, med stærke farver, samt høj kontrast. En anden idé var at tage nogle billeder af gademusikanter og integrere det på en hjemmeside. Visuelt ville vi fortælle en historie om gademusikanterne som står og spiller en kold vinterdag, fattige, men med en glød og lidenskab for musikken. Den endelige Idé var at finde et billede af en gade og rekonstruere den. I alt sin enkelhed vil vi opbygge en gade fra århundredeskiftet hvor jazzen startede. For at gøre den mere autentisk og i tråd med Odensevinterjazz, skulle hjemmesidens tema være en kold vinter dag. 1 Side 7 3
Brugerprofil Det overordnede mål med hjemmesiden er, at brugeren skal danne sig sit eget indtryk og fortælling om at gå ned af en gade en kold vinter dag. Forhåbentlig vil man føle sig betaget, inspireret, og ikke mindst få lysten til at høre noget Jazz. Vores forestilling af hjemmesiden er at man går ned af gaden en kold vinterdag hvor sneen daler. Gaden skal være en metafor for livløshed og kulde. Dette gadebillede skal brydes af varmen og farverne fra jazzklubberne og på den måde skabe en brugerfornemmelse af at det er der man vil ind. Måden vi profilerer os, og gerne vil sælge varen til forbrugeren, er ved at lave et flot design på forsiden, samtidig med at det er nemt og overskueligt at finde rundt på vores hjemmeside. Når en person besøger vores hjemmeside, skal det som sagt være nemt og ligetil, når personen skal finde informationer om bands, hvor de spiller, jazzens historie, samt en mulighed for at høre noget musik som de forskellige bands har lavet. Definition af målgruppe Målgruppen er aldersgruppen mellem 18-25 år. Odense Vinterjazz henvender sig til begge køn, og da det ikke er et håndgribeligt produkt er indkomst ikke så relevant. 2 For at karakterisere målgruppen har vi lavet en collage, der viser nogle af de ting som nutidens unge kan være fælles om. 3 Det er ingen hemmelighed at danskere er dem i Europa der drikker mest, symboliseret ved mokai flasken i baggrunden. Derudover er internettet en vigtig del af de unges hverdag, hvor sider som facebook og twitter jævnligt bliver opdateret. Sidst men ikke mindst fylder sport og shopping meget for de fleste unge. 2 Side 5 3 http://www.dr.dk/drpresse/artikler/2011/05/12/221328.htm 4
5
Når vi har fundet ud af, hvilken aldersgruppe vi skal gå i dybden med, laver vi en segmenteringsproces, for at finde ud af, hvilken slags mennesker man skal henvende sig til Vi mener at dem som Odense Vinterjazz henvender sig til, er under det grå segment Det grå segment, er det folk som endnu ikke har fundet sig til rette endnu. Det grå segment er det folk, der typisk endnu ikke er færdig med en uddannelse, og derfor ikke er i gang med sin karriere endnu. Det er typisk studerende som hører under det grå segment. 6
DESIGN Visuel dekonstruktivisme Et er de generelle krav var at hjemmesiden skulle tage udgangspunkt i enten modernisme, pop art, surrealisme eller dekonstruktivisme, hvis man afvigerede skulle dette begrundes. Vi gik dog lidt den modsatte vej og lod os inspirere af andre sider, samtidig med at vi lavede brainstorm over teamet for hjemmesiden. Det var først da vi var kommet op med idéen og teamet at vi gik ind og kiggede på hvilken stilart den mindede mest om. Vi kom frem til at siden lagde sig mest op af dekonstruktivisme, en form for visuel dekonstruktivisme som vil blive forklaret senere. 4 Dekonstruktivisme er et begreb skabt af den franske filosof Jazques Derridas der karakterisere ved at nedbryde idealer og dekonstruere et værk. Det er ofte kendetegnet ved at være ustruktureret eller ligne noget der er revet fra hinanden. 5 En af de kunstnere der gør brug af dekonstruktivistiske stilart, er den kendte amerikanske kunstner David Carson. I 2005 lavede han et billede af tsunami katastrofen(vist til højre), et billede vi finder rigtig interessant. Kigger 4 http://www.arksiteplus.dk/wm142308 5 http://visualaddicted.wordpress.com/research/artdesign-in-context/i-whis-you-were-here/david-carson/ 7
man nøje på billedets centrum er det ligesom hel p får en dobbelt betydning, en kombination af hjælp og helvede som må siges at beskrive tsunami katastrofen. 6 Vores inspirationskilde til dette projekt har været Arcade Fire, som vi tidligere på året blev præsenteret for i en visualiseringstime. De har skabt en interaktiv fortælling hvor man som bruger bliver draget med ind i hjemmesiden. Nummeret hedder We Used To Wait, siden er bygget op således at man indtaster sin adresse, hvorefter nogle browser vinduer åbner med bl.a. en løber og et overview lignende google earth af ens hjemmeadresse. Man føler dermed at løberen befinder sig på sin vej og man kan derfor relatere til fortællingen. Den samme oplevelse vil vi forsøge at genskabe, bare via en meget forenklet version, da vi ikke besidder de samme evner. Vi har forsøgt at genskabe fortællingen, men vist på en visuel måde uden den interaktivitet der foregår på deres side. I stedet har vi forsøgt at skabe en julestemning ved brug af mørke og blålige toner, stærk kontrast i gadebelysningen samt lavet noget sne der daler i flash. Derved håber vi på at brugeren kan danne sig sin egen stemning og fortælling ud fra forsiden. Nedenfor kan man se hvordan vi har forsøgt at skabe en julestemning ud fra farvevalget, samtidig med at der er lagt vægt på belysningen, varmen fra den rødlige farve som skal symbolisere jazz klubberne. 6 http://www.thewildernessdowntown.com/index.html 8
Visuel dekonstruktivisme er den stilart som der er gjort brug af. Det åbenlyse er at vi har taget et billede og redigeret i det for at lave forsiden, men uden at smadre den fuldstændig. Derudover er der indsat nogle skilte der lyser op i gadebilledet der fungerer som knapper på forsiden. Vi bevarer altså det rent visuelle af det originale billede, men går ind og redigerer i farverne, kontrastrene og tilføjer lidt, heraf visuel dekonstruktivisme. VIRKSOMHEDEN Observationer fra arrangementet d 28. november Arrangementet handlede kort fortalt, om at vi studerende skulle høre en mindre koncert med bandet No Slips. No slips spillede forskellige genre indenfor jazz, bl.a. kombineret med elektronisk musik. Selve musikken var meget speciel, en meget spændende genre, som mange kunstnere måske kunne lade sig inspirere af. Vi fik fortalt på forhånd, at vi ville blive udsat for en ny type musik, og det kan man roligt sige at det var. Derudover fik vi også fortalt, at vi skulle tegne/skrive de ting som vi tænkte, imens vi hørte deres musik for at skabe et visuelt billede af jazzen. Vi som gruppe må ærligt indrømme, at vi ikke fik meget ud af dette arrangement. Ikke på grund af selve musikken, men fordi vi i løbet af dagen allerede havde gjort os nogle forestillinger om hvordan hjemmesiden skulle udformes. Arrangementet virkede meget improviseret, og vi havde egentlig svært ved at finde ud af, hvad vi skulle bruge det til, udover at være en inspirationskilde. 9
Fotodokumentation Her henviser vi til undersiden media på vores hjemmeside. Projektstyringsforløbet/Evaluering af gruppeproces Vi har som gruppe valgt Elias som vores projektleder, da vi mener at han er den bedste til at holde hovedet koldt i pressede situationer og samtidig kan bevare et overblik over hvad der mangler at blive lavet. Han har været ansvarlig for at uddelegere opgaver og sørget for at de er blevet opfyldt. Han var også den der kom med idéen til konceptet og har derfor forestillingen om hvordan siden skal se ud. Jannec og Esben har begge ansvar for at holde trit med tidsplanen således at vi ikke sidder i sidste øjeblik og mangler en masse. Vi har naturligvis nogle kompetenceområder hver for sig som vi har forsøgt at udnytte. Esben og Elias er begge aktivister hvilket har afspejlet sig i, at de hurtigere ville være færdige med en opgave, hvor Jannec har taget det mere som det kom som reflektoren. Hvordan vi fungerede som gruppe Gruppearbejdet har fungeret rigtig godt. Vi har overholdt tidsplanen så hver dag er blevet udnyttet og der har været en tiltro til at når man har fået en opgave tager man den med sig hjem og løser den. Det har også medvirket til noget frihed til at kunne arbejde individuelt, og det har fungeret godt. Når en har haft problemer med en opgave, har samarbejdet fungeret således at der er en der er trådt til og har hjulpet. Alt i alt er vi godt tilfredse med samarbejdet og konceptet som helhed. 10
Positivt/negativt På den positive side, har vi som nævnt tidligere, fungeret godt som gruppe. Vi har også kunne tale sammen hele tiden, om mulige tiltag i vores design, og nye idéer som kunne være gode at gå i dybden med. Vi synes også taget i betragtning af at ingen af os har tidligere erfaring med at lave hjemmesider så er vores projekt lykkedes rigtig godt. På den negative side har der til tider måske været lidt mangel på kommunikation efter skoletid. INTERAKTION Vi har valgt at lave en hjemmeside der giver brugeren en oplevelse frem for rene sider med information. Vi vil prøve på at fange og holde brugerens opmærksomhed ved hjælp af en dekorativ forside der skal fungere som udgangspunkt for alle undersiderne på hjemmesiden. Det er vigtigt for os at startsiden vækker følelser hos brugeren, som skal have en indre lyst til at udforske siden nærmere. Denne lyst vil vi prøve at skabe ved at lave en mørk forside med lyse elementer, og gøre siden mere levende ved hjælp af små animationer på forsiden. Ud fra vores viden og kompetencer mener vi den bedste løsning er at lave selve hovedsiden i Flash action script 3.0, og indsætte flashsiden på en HTML side med CSS elementer til at positionere de forskellige elementer (flash-fil, logo, musik osv.). Størrelsen på vores side har vi vurderet er den størrelse der passer bedst til flere forskellige skærmopløsninger. 11
Analyse FLASH Vi har valgt at lave størstedelen af vores hjemmeside i flash action script 3.0, da dette program giver os de største udfoldelsesmuligheder med hensyn til design af vores forside, og den meste glidende overgang ved skift fra forsiden til undersiderne. Vi er dog alle i gruppen uerfaren inde for flashkodning og derfor begrænset af vores egen viden indenfor området. Vi har af denne årsag holdt os til det vi kender, design og sideskift, et langt stykke hen ad vejen. Til at give siden liv og blikfang har vi lavet små animationer på baggrunden og på knapperne. Selve baggrunden og undersiderne i flashfilen er designet i Photoshop og hentet ind som billeder. PHOTOSHOP Vi har valgt at designe alle vores elementer til flashsiden i Photoshop. Vi har valgt at bruge Photoshop fordi det er det billedebehandlingsprogram vi har størst erfaring med, og for lettere at kunne holde siden ensrettet med hensyn til knapper, farver og andre elementer. HTML/CSS Vores flashside(hovedside) er fastsat til en simpel HTML side med enkelte CSS elementer i form af et par div classes til at holde siden struktureret og flashfilen centreret. Vi har også valgt at sætte vores side op på denne måde for nemt at kunne udskifte de enkelte elementer der ligger udenfor flashsiden, som fx topbanner, musik og knapper til sociale netværk. Vi har indsat en lydfil som desværre ikke kan afspilles i firefox men skulle fungere i alle andre browsere. HTML siden er lavet i Dreamweaver CS5 og udelukkende i kodeafsnittet, så vi kunne i teorien have lavet siden i en simpel notebook, men vi foretrækker at kode i et program der giver et bedre overblik over vores kode 12
Struktur/modellering SITEMAP Som i kan se på billedet er vores side bygget meget enkelt op. Man starter på en forside hvorfra man kan vælge en af de 6 undersider (bands, om Odense Vinerjazz, viden om jazz, kalender, media eller Jazz jagt). På undersiden bands kan man dog også trykke på enkelte bands og komme videre til endnu en underside med info om bandet. Vi har dog kun vist et eksempel på et af bandsene. WIREFRAME På vores wireframe kan i se hvordan vores side er bygget op. Siden er bygget op omkring et stemningsbillede af en jazz gade vi bruger til forside, hvorfra vi linker til alle undersiderne i form af knapper/skilte vi har indsat i gadebilledet. 13
Realisering/kode 7 Vi har valgt kun at fokusere på en kode, da det er den mest besværlige og den eneste avancerede som godt kunne bruge en forklaring. Det vi vil forklare er det flash script der viser sneen på vores hjemmeside. Scriptet har vi fundet på nettet, så for at vise at vi har forstået scriptet fokuserer vi kun på det. import flash.display.movieclip; var snowflakes:array = new Array(); var snowflakeprops:dictionary= new Dictionary(true); var max_snowsize:number =.02; // pixels var snowflakescnt:number = 150; Ovenover ses koden der kan justere størrelsen af snefnuggende og hvor mange snefnug der daler ned fra himmelen. var oheight:number; var owidth:number; var t:movieclip; t et er navnet på movieclippet som er snevejret. init(); function init():void { owidth = width; oheight = height; // quantity for (var i:int=0; i<snowflakescnt; i++) { t = new SnowFlake();// t.name = "snowflake"+i; 7 http://troyworks.com/blog/2008/11/26/flash-kirupa-snow-in-as30/ 14
Ovenstående fortæller t at højden og bredden har et navn som nedenfor får en funktion. t.alpha =.2+Math.random()*.6; t.x = -(owidth/2)+math.random()*(1.5*owidth); t.y = -(oheight/2)+math.random()*(1.5*oheight); t.scalex = t.scaley=.5+math.random()*(max_snowsize*10); var o:object = new Object(); o.k = 1+Math.random()*2; o.wind = -1.5+Math.random()*(1.4*3); Her bliver der beskrevet hvordan sneen skal dale ned vilkårlige steder på siden og dale ned på forskelig vis. Owidth og oheight har en variable x og y værdi som er bestem ud fra random. Derudover bliver kodet noget vind der giver bevægelse til sneen. snowflakeprops[t] = o; addchild(t); snowflakes.push(t); Til sidst får den at vide at sneen skal vise sig på scenen. } } 15
LITTERATURLISTE Links http://www.dr.dk/drpresse/artikler/2011/05/12/221328.htm http://www.arksiteplus.dk/wm142308 http://visualaddicted.wordpress.com/research/artdesign-in-context/i-whis-you-werehere/david-carson/ http://www.thewildernessdowntown.com/index.html http://troyworks.com/blog/2008/11/26/flash-kirupa-snow-in-as30/ 16