Erhvervsakademiet Lillebælt / Style and Experience / WebB, Gruppe 10

Transkript

1 Erhvervsakademiet Lillebælt / Style and Experience / WebB, Gruppe 10 Vejledere: Kent Carlson, Pernillle K. Christiansen, Per Thykjær Jensen, Bjarne Slipsager, Thomas B. Jessen, Kristin Utne Gruppe medlemmer: Bettina Madselius Petersen, Janne Weller, Maja Sofie Eliasen, Susanne Finseth, Thomas Quist Larsen

2 Indholdsfortegnelse Indledning Problemformulering Arbejdsspørgsmål Metode 1. Kanban charts 2. Målgruppe 2.1 Desk Research 2.2 Field Research Spørgeskema 3. Kommunikationsplan 4. konstruktion af nyt site 4.1 Research stilarterne 4.2 Research inspiration 4.3 Eksisterende site 4.4 Design til web 4.5 Designudvikling 5. CRAP analyse 6. Færdig site 6.1 Diskussion af teknologi 6.2 Tekniske krav 6.3 Overskuelighed 7. AIDA 8. Konklusion Side 2/25

3 Indledning Odense Street House er et fritidstilbud, der primært henvender sig til unge streetsports udøvere fra hele Fyn. Hallens daglige drift varetages af Korsløkke Ungdomsskole, mens finansieringen er kommunal. På facaden hænger det gamle skilt, Odense Skatepark, stadig. Korsløkke Ungdomsskole har på nuværende tidspunkt ikke økonomi til et nyt facade skilt, men stedet omtales blandt ejerne og brugerne som Odense Street House (OSH) og derfor anvender vi også dette navn i projektet. Størstedelen af brugerne er drenge mellem 9 og 19 år, men også ældre op til 30 år og yngre børn ifølge med forældre, benytter faciliteterne. Man kan skate, øve street dance eller parkour, køre BMX eller løbehjul og meget mere i hallen. Alle andre er velkomne så længe de overholder hus-reglerne og betaler 20kr kontant pr besøg. Der er også mulighed for tilmelding til hold og der er løbende landsdækkende konkurrencer, så tilbuddet dækker bredt. Odense Street House Odense Street House indendørs. Selvstyring i grupperne er en vigtig del af OSH s filosofi og der opfordres til god synergi grupperne imellem, da dette er et problem i andre lignende klubber i landet. Desværre er OSH næsten altid blandt de øverste på listen når der er nedskæringer i kommunen. Derfor foreligger der et ønske om at gøre sig mere gældende og uundværlig som ungdomstilbud - og det kan bl.a. opnås ved at tiltrække en endnu bredere brugergruppe. Derfor står flere piger øverst på OSH ønskeliste. [1] Odense Street House facade. [1] Interview med Jonathan Linde Side 3/25

4 Problemformulering + metode Hvordan kan vi som multimediedesignere konstruere et nyt site til OSH som tiltrækker nye brugere især pigerne? Arbejdsspørgsmål: - Hvem er målgruppen? - Hvordan kommunikerer vi bedst med målgruppen? - Hvordan tiltrækker vi flere brugere? - Hvordan illustrerer vi bedst hvad OSH tilbyder af aktiviteter? Metode 1. Vi vil styre projektet v.h.a. Kanban metode. 2. Vi vil bestemme målgruppen ved hjælp af: - Desk research: Gallup segmenter. - Field research: Interviews og spørgeskemaer 3. Vi vil lave en kommunikationsplan og bruge følgende visuelle værktøjer til opbygning af sitet: - Google på andre sites, som henvender sig til en lignende målgruppe. - CRAP analyse 4. Vi vil konstruere et site v.h.a. XHTML kode og integrere flash elementer. Undervejs vil vi benytte os af brainstorming til idegenerering. Side 4/25

5 1. projektstyring Kanban charts På de følgende sider vises billeder af vores Kanban, som har hjulpet os med at styre projektets opbygning og faser. Den daglige kommunikation er foregået via facebook og telefon og vi har delt større filer via dropbox. Kanban o.site Uge 1 O-Site Thomas fra/til Maja fra/til Susanne fra/til Bettina fra/til Janne fra/til Alle fra/til Projekt præsentation projektgennemgang af vejledere Gruppemøde Retningsliner og vedtægter aftales Valg af projekt Brainstorm - Skatehallen Opgaver: 1/11-21/11 Desk research: 1/11-21/11 Google, skatehallen X Field Research: X 06-nov Besøg hallen X 06-nov Interview X 06-nov Målgruppe: Interview? segmentering Kompasrose Beskrivelse Analyse: Eksisterende site Interessenter Målgruppe Metoder: AIDA Konvergent/Divergent thinking Brainstorms Brainwriting Negativ brainstorm Vores Site: Sitemap(s) Wireframe(s) HTML CSS Flash QR -Kode: Generering Færdige opgaver markeres med: Kanban o.site Uge 2 Projekt præsentation Gruppemøde Valg af projekt O-Site Thomas fra/til Maja fra/til Susanne fra/til Bettina fra/til Janne fra/til Alle fra/til Opgaver: 1/11-21/11 Desk research: 1/11-21/11 Google, skatehallen X Field Research: X 06-nov Besøg hallen X 06-nov Interview X 06-nov *X 06-nov Målgruppe: Interview? X 08-nov Billeder af brugere X 08-nov segmentering X 09-nov Kompasrose X 09-nov Beskrivelse X 6/11-8/11 X 09-nov Analyse: Eksisterende site X 6/11-8/11 Interessenter Målgruppe Metoder: AIDA Konvergent/Divergent thinking Brainstorms X 08-nov Brainwriting Negativ brainstorm Vores Site: Design-oplæg X 6/11-08/11 Sitemap(s) X 8/11-9/11 Wireframe(s) X 8/11-9/11 HTML *X 6/11-20/11 CSS Flash Nyt Logo X 8/11-9/11 QR -Kode: Generering Anbringelse i Skatehallen Færdige opgaver markeres med: projektgennemgang af vejledere Retningsliner og vedtægter aftales Brainstorm - Skatehallen Side 5/25

6 1. projektstyring Kanban charts 1 Kanban o.site Uge 2_13-11 O-Site Thomas fra/til Maja fra/til Susanne fra/til Bettina fra/til Janne fra/til Alle fra/til Projekt præsentation projektgennemgang af vejledere Gruppemøde Retningsliner og vedtægter aftales Valg af projekt Brainstorm - Skatehallen Opgaver: 1/11-21/11 Desk research: 1/11-21/11 Google, skatehallen X Field Research: 06-nov X Besøg hallen X 06-nov Interview X 06-nov *X 06-nov Spørgeskema X 8/11-14/11 Målgruppe: Interview? X 13-nov Billeder af brugere X 08-nov segmentering X 09-nov Kompasrose X 09-nov Beskrivelse X 09-nov Analyse: Eksisterende site X 6/11-8/11 Interessenter SWOT af SH. X 10-nov Metoder: AIDA Konvergent/Divergent thinking Brainstorms X 08/11-13/11 Gruppediskusioner X 08/11-20/11 Negativ brainstorm Vores Site: Design-oplæg X 6/11-08/11 Sitemap(s) X 8/11-9/11 Wireframe(s) X 8/11-9/11 HTML *X 6/11-20/11 X 13/11-20/11 CSS X 6/11-20/11 X 13/11-20/11 Flash Nyt Logo X 8/11-9/11 Stilarter, beskrivelse X 12/11-13/11 QR -Kode: Generering Anbringelse i Skatehallen Færdige opgaver markeres med: 2 Projekt præsentation Gruppemøde Valg af projekt Kanban o.site Uge O-Site Thomas fra/til Maja fra/til Susanne fra/til Bettina fra/til Janne fra/til Alle fra/til Opgaver: 1/11-21/11 Desk research: 1/11-21/11 Google, skatehallen X Field Research: X 06-nov Besøg hallen X 06-nov Interview X 06-nov *X 06-nov Spørgeskema X 8/11-14/11 Målgruppe: Scenarier X 13-nov Billeder af brugere X 08-nov segmentering X 09-nov Kompasrose X 09-nov Beskrivelse X 09-nov Analyse: Eksisterende site X 6/11-8/11 Interessenter SWOT af SH. X 10-nov Metoder: AIDA Konvergent/Divergent thinking Brainstorms X 08/11-13/11 Gruppediskusioner X 08/11-20/11 Negativ brainstorm Vores Site: Design-oplæg X 6/11-08/11 Sitemap(s) X 8/11-9/11 Wireframe(s) X 8/11-9/11 HTML *X 6/11-20/11 X 13/11-20/11 CSS X 6/11-20/11 X 13/11-20/11 Flash X 13/11-16/11 Nyt Logo X 8/11-17/11 Stilarter, beskrivelse X 12/11-13/11 QR -Kode: Generering Anbringelse i Skatehallen Færdige opgaver markeres med: projektgennemgang af vejledere Retningsliner og vedtægter aftales Brainstorm - Skatehallen Side 6/25

7 1. projektstyring Kanban charts 3 Kanban o.site Uge O-Site Thomas fra/til Maja fra/til Susanne fra/til Bettina fra/til Janne fra/til Alle fra/til Projekt præsentation projektgennemgang af vejledere Gruppemøde Retningsliner og vedtægter aftales Valg af projekt Brainstorm - Skatehallen Opgaver: 1/11-21/11 Desk research: 1/11-21/11 Google, skatehallen X Field Research: 06-nov X Besøg hallen X 06-nov Interview X 06-nov *X 06-nov Spørgeskema X 8/11-17/11 Målgruppe: Scenarier X 13-nov Billeder af brugere X 08-nov segmentering X 09-nov Kompasrose X 09-nov Beskrivelse X 09-nov Analyse: 21-nov Eksisterende site X 6/11-8/11 Vores site SWOT af SH. X 10-nov Metoder: Metodeafsnit X 17-nov X 17-nov AIDA Brainstorms X 08/11-13/11 Gruppediskusioner X 08/11-20/11 MoodBoards bidrag samle 18-nov X 08/11-17/11 Vores Site: Design-oplæg X 6/11-08/11 Sitemap(s) X 8/11-9/11 Wireframe(s) X 8/11-9/11 HTML *X 6/11-20/11 X 13/11-20/11 CSS X 6/11-20/11 X 13/11-20/11 Flash X 13/11-16/11 Nyt Logo X 8/11-17/11 Stilarter, beskrivelse X 12/11-13/11 QR -Kode: Generering Anbringelse i Skatehallen Færdige opgaver markeres med: 4 Projekt præsentation Gruppemøde Valg af projekt Kanban o_site Uge 3 O-Site Thomas fra/til Maja fra/til Susanne fra/til Bettina fra/til Janne fra/til Alle fra/til projektgennemgang af vejledere Retningsliner og vedtægter aftales Brainstorm - Skatehallen Opgaver: 1/11-21/11 Desk research: 1/11-21/11 Google, skatehallen X Field Research: X 06-nov Besøg hallen X 06-nov Interview X 06-nov *X 06-nov Spørgeskema X 8/11-17/11 Målgruppe: Scenarier X 13-nov Billeder af brugere X 08-nov segmentering X 09-nov Kompasrose X 09-nov Beskrivelse X 09-nov Analyse: 21-nov Eksisterende site X 6/11-8/11 Vores site X 17/11-21/11 SWOT af SH. X 10-nov Metoder: Metodeafsnit X 17-nov X 17-nov AIDA X 20/11-21/11 Brainstorms X 08/11-13/11 Gruppediskusioner X 08/11-20/11 MoodBoards bidrag samle 18-nov X 08/11-17/11 Vores Site: Design-oplæg X 6/11-08/11 Sitemap(s) X 8/11-9/11 Wireframe(s) X 8/11-9/11 HTML *X 6/11-20/11 X 13/11-20/11 X 13/11-18/11 CSS X 6/11-20/11 X 13/11-20/11 Flash X 13/11-17/11 X 18-nov Nyt Logo X 8/11-17/11 Stilarter, beskrivelse X 12/11-17/11 QR -Kode: Generering X 20-nov Anbringelse i Skatehallen X 20-nov Finish samle rapport X 17/11-20/11 X 17/11-20/11 Gennemlæsning X 20/11-21/11 test af site X 20/11-21/11 Gruppemøde/afslutning X 21-nov Færdige opgaver markeres med en rød stjerne.. Side 7/25

8 2. Målgruppen Skal analyseres v.h.a. kvantitativ (Gallup) og kvalitativ (interviews og spørgeskema) research. 2.1 Desk Research Vi vil bruge Gallups segmentering for at bestemme målgruppens størrelse og få information om generelle forhold. Gallup segmentering Fra interview med OSH s daglige leder ved vi, at hallens brugere hovedsagligt er drenge mellem 9 og 19 år, der går meget op i deres sport, men fungerer ikke så godt i det traditionelle klubmiljø. Brugerne bor hovedsagligt i Odense og omegn, mens resten af Fyn også er repræsenteret, dog i mindre målestok. De vil gerne selv bestemme hvornår og hvordan der skal trænes. Der tilbydes holdtræning i nogle af sportsgrenene, da hallen drives i samarbejde med Korsløkke Ungdomsskole og bl.a. er Parkour holdene meget populære. Den største gruppe findes i det Moderne-individ orienterede segment der kan beskrives med nøgleordene: De Dynamiske Unge, Sin egen lykkes smed og Pionererne. Der er en overvægt af mænd i dette segment, de er interesseret i ny teknologi og de er hyppige brugere af internettet. Desværre er der ikke mulighed for at sætte den nedre aldersgrænse til 9 år, når kompasrosen skal genereres, så det må stå hen i det uvisse, om det ville have ændret størrelsen på de 3 del-segmenter (De Moderne, De Moderne-individ orienterede og de Individorienterede) væsentligt. Der kan dog ikke herske tvivl om, at det er i Det Moderne-individ orienterede segment at størstedelen af vores målgruppe befinder sig. Bruger man de oplysninger sammen med Gallups ni segmenter ser målgruppen således ud: Kompasrosen viser fordelingen af årige, som er bosiddende på Fyn og dyrker sport enten i klub, i fitness center eller på egen hånd, med en hyppighed fra dagligt til sjældent. Det omfatter ca personer. Side 8/25

9 2. Målgruppen 2.2 Field Research Vi vil interviewe den daglige leder af OSH, samt nogle af brugerne og bekendte/venner i vores omgangskreds i alderen 9 30 år. Vi vil lave et spørgeskema til cirkulation på Facebook for at få inspiration til sitet. Vi vil være repræsenteret ved et kommende skatearrangement d. 8/11 i OSH, for at få en fornemmelse af stemningen og tage billeder til projektet. Størstedelen af brugerne er drenge mellem 9 og 19 år, men både ældre op til 30år og yngre børn ifølge med forældre, benytter faciliteterne. Man kan skate, øve street dance eller parkour, køre BMX eller løbehjul og meget mere i hallen - og alle er velkomne så længe de overholder hus-reglerne og betaler 20kr kontant pr besøg. Der er også mulighed for tilmelding til hold og der er løbende landsdækkende konkurrencer, så tilbuddet dækker bredt. Interview : Jonathan Linde Jonathan nævner flere gange at OSH er et værested for unge som har det svært med alt for meget styring. Det er vigtigt at sport bliver omdrejningspunktet og at der er god stemning generelt. Flere brugere er også højt på Jonathans ønskeliste især flere piger, da det vil styrke OSH s position som vigtigt ungdomstilbud. [1] Interview: Personer fra målgruppen De informationer som vi har fået fra brugere af OSH samt venner og bekendte, har vi valgt at omskrive til 3 sandsynlige scenarier, der på hver sin måde forklarer forskellige behov og forventninger hos målgruppen. Det er der kommet følgende 3 hovedspørgsmål ud af: - Hvad kan man lave? - Hvem kan man møde? - Er det et sted jeg gerne vil identificeres med? Disse spørgsmål vil vi give målgruppen svar på, som noget af de første når de besøger vores site. [2] [1] Interview med Jonathan Linde [2] Interview med brugerne Side 9/25

10 2. Målgruppen Spørgeskema Det er bl.a. disse kommentarer, vi har brugt for at udvikle vores design. På spørgsmålet om de havde været i OSH, svarede 75% nej og 92% kendte ikke til nuværende hjemmeside. Der var 60 personer der fuldførte spørgeskemaet, hvoraf 54% var mænd og 46% var kvinder. De fleste af besvarelserne var i aldersgruppen år og år. Da vi spurgte om de kendte til OSH var besvarelserne næsten 50/50 for ja/nej. Over 80% svarede at de hellere ville benytte Facebook i forhold til forums på hjemmesiden. Der kan læses mere om spørgeskemaet i bilaget, hvor det også er muligt at læse de kommentarer, der er om det eksisterende site, og hvad der evt. kunne gøres bedre på et nyt site. [3] [3] Interview med Jonathan Linde Side 10/25

11 3. Kommunikationsplan Vi vil se på andre sites der henvender sig til samme aldersgruppe, for at få inspiration til hvordan layoutet skal være på vores nye site. For at sikre en direkte og relevant kommunikation med målgruppen vil vi lave en plan der indeholde de vigtigste punkter. Analyse af målgruppen danner baggrund for følgende kommunikationsplan: Situationen det eksisterende site bliver ikke rigtigt brugt, målgruppen er ikke imponeret. Problemet Sitet skal appellere bedre til målgruppen og især pigerne skal gøres interesserede. Målgruppe børn og unge der vil udøve deres sport på eget ansvar. Primært aldersgruppen 9 19 år. Målet tiltrække flere brugere, især piger. Konceptet her bestemmer du selv, frihed under ansvar. Budskabet Her er der plads til alle. Kanalen Nyt Site. Side 11/25

12 4. konstruktion af nyt site 4.1 Research stilarterne Vi har i vores forløb på skolen gennemgået 5 forskellige stilarter i design. 1. Pop-art 2. Street-art 3. Deconstructivism 4. Modernisme 5. Surealisme 1. Pop-art: Karakteriseres som simple hverdagsbilleder i stærke farver. Den grundlæggende idé bag Pop Art var at skabe en kunst, hvis betydning var indeholdt i motivet til direkte og hurtig aflæselig. Pop-art kunstnerne nåede målet med en enkel aflæsning gennem nye processer: tekst, akrylmaling, collage med fremmede materialer og silketryk, hvor de bedre kunne få deres tanker ud sådan at man kunne forstå dem. 2. Street-art/gadekunst: Er en videreudvikling af den traditionelle graffiti, som oprindeligt stammer fra New York. I slutningen af 60 erne malede unge i New Yorks fattige kvarterer deres navne eller dæknavne (alias) på byens murer, toge, busser og undergrundbaner. 3. Deconstructivism Går i store træk ud på at du tager noget eksisterende og dekonstruerer det. Altså ødelægger det, så det ikke længere ligner det, som det i sin tid var. Eksempelvis tager du et stykke papir, river det i stykker og limer det sammen på en helt ny måde. 4. Modernisme er et overordnet begreb, der ikke betegner én bestemt stil, men bruges indenfor kunsthistorien periode for ismer og værker fra ca til 1960 erne. Den enorme udvikling der skete i løbet af 1800-tallet: verdensbilledet blev kompliceret, og de forskellige politiske, ideologiske, religiøse og eksistentielle skred satte tydelige spor i kunsten. Den moderne kunst var noget helt nyt og der kom et mere abstrakt billedsprog som især de unge kunstnere tog brug af for at gøre opgør med de naturalistiske malerier. Modernismen, som vi i dag betragter som klassisk kunst, var dengang en helt ny og provokerende måde at se og gengive verden på. 5. Surrealismen gengiver det underbevidste symbolsk. Gennem den surrealistiske kunst udstilles private drømme, fantasier, ubevidste seksuelle drifter og storbyens, kapitalismens og 1. Verdenskrigs vanvid og absurditet. Side 12/25

13 konstruktion af nyt site Hvad har vi valgt og hvorfor? Vi har valgt de to stilarter Street art og Pop-Art. Fordi vi lagde vi mærke til at der hang street art malerier på væggene i StreetHouse som var lavet af brugere. Der var i det hel taget mange farver i hallen. Farverne passer godt ind i pop art mens at malerierne passer godt ind i street art som de også er. Vi kan på denne måde få hjemmesiden til passe sammen med hallen sådan at hal og hjemmesiden her en fællesnævner. Ikke valgte emner: Dekonstruktivisme: - For rodet til web design. Det rammer ikke målgruppens interesse for graffiti og kræver mere tanke-filosofi. Det rammer ikke målgruppen bredt. Modernisme: - Stilen og motiverne kan være svære at forstå idag, da det er mere abstrakt og udtrykker en anden tid. De unge i vores målgruppe søger noget som er hverdagspræget og gerne med en masse farver. Surrealisme: - Stilen og motiverne kan også her være svære at forstå. Vi har på sitet lagt en Flash film, der er lidt mere uddybende. Side 13/25

14 konstruktion af nyt site 4.2 Research inspiration Vi har brugt en del tid på desk research, for at få ideer til hvordan designet skulle være på vores site. Desværre måtte vi konstatere, at det ikke var nemt at finde relevant inspiration på nettet, og valgte derfor at lave et spørgeskema, som kunne give os den information vi havde brug for. Her vises nogle eksempler på hvad vi fandt på nettet: Side 14/25

15 konstruktion af nyt site 4.3 Eksisterende site Det er lavet i flash og er derfor ikke særlig brugervenligt, da mange medier har problemer med at vise flash. Den bliver ikke opdateret jævnligt. Derfor vælger vi at begrænse flash elementerne på det nye site og i stedet kode i XHTML. Vi vil finde inspiration til layout på andre sites og fra spørgeskema. Side 15/25

16 konstruktion af nyt site 4.4 Design til web Følgende model illustrerer hvordan vi har arbejdet med design og layout til vores site. Dog har vi ikke lavet paperprototype eller mock-up vi har kastet os direkte ud i HTML og CSS, fordi det var god træning i kodningens kunst, som flere af gruppens medlemmer havde behov for. Nedenfor ses illustrationer af de forskellige stadier. A1 A2 A3 B C D x x E A1 Side 16/25

17 konstruktion af nyt site A2 3A Processen De viste brainstorms illustrerer arbejdsprocessen for at komme igang med konstruktionen af sitet. Illustration A1: - Viser alt det indhold som vi syntes skal være på sitet. Illustration A2: - Viser processen med at bestemme stil-arterne streetart og popart. Illustration A3: -Viser vores storyboard. Side 17/25

18 konstruktion af nyt site Illustration B: Viser vores sitemap, som er resultatet af vores storyboard. B index.html bmx.html capoeria.html inliners.html lobehjul.html parkour.html skate.html streetsoccer.html galleri.html kalender.html kontakt.html om_os.html Illustration C1+C2: Viser vores thumnails fra første udkast, til det næsten færdige design. C1 C2 Illustration D1+D2+D3: Viser vores Wireframes, som har ændret sig undervejs i processen. Forside Bredde: 770px Højde: 140 px LOGO D1 D2 Bredde: 1004px D3 Menupunkter HEADER / LOGO HEADER / Højde: 150 px Galleri LOGO Bredde: 1004px Højde: 150 px Menubar Bredde: 1004px - Højde: 20px Menubar Bredde: 1004px - Højde: 20px Menubar Bredde: 785px - Højde: 30px Billede: Bredde: 472px Højde: 450px Tekst: Bredde: 472px Højde: 450px Billede: Bredde: 130px Højde: 83px Felt hvor billedet vises i stor størrelse: Bredde: 296px Højde: 294px Bredde: 200px Højde: 300px Bredde: 200px Højde: 250 px Bredde: 204px Højde: 250px Bredde: 200px Højde: 250px Bredde: 200px Højde: 250px Tekst Bredde: 200px Højde: 150px Baggrundsbillede Bredde: 1004px - Højde: 568px Bredde: 1004px Højde: 68px Tekst Bredde: 785px - Højde: 30px Footer Bredde: 1004px - Højde: 40px Flash footer - tekst med tak til... Bredde: 1004px - Højde: 40px Illustration E: Viser det næsten færdige site. E Side 18/25

19 konstruktion af nyt site 4.5 Designudvikling På billede 1+2+3, ses de første designoplæg til sitet. Som udgangspunkt er de ens, den eneste forskel er baggrundsbilledet/farven. Men det var for at spore os ind på hvilken stil der ville ramme målgruppen bedst. Da målgruppen er streetsport-udøvere valgte vi hurtigt at der skal være et graffiti-billede som baggrund, og det er meningen at mønsteret på billede 1, skal illustrere dette. 1 Skate Åbningstider: Mandag: Lukket Tirsdag: 16:00-17:50 (kun for piger) Onsdag: 15:00-21:00 Torsdag: 18:30-21:30 Fredag: 15:00-21:00 Lørdag: Lukket Søndag: 14:00-20:00 (Helligdage: Lukket) ODENSE SKATEPARK NYHEDER BILLEDER VIDEO INFO CHAT Poledans Parkour BMX Løbehjul Odense Skatepark - Grønløkkevej Odense C - jonathanlinde@hotmail.com - Tlf I oplægget har vi placeret navnet Odense Skatehal øverst, som header, for at fange brugerens opmærksomhed, og vi har valgt at bruge de samme farver på figurerne, for at skabe genkendelsesværdi. Under navnet har vi valgt at placere menupunkterne, da vi syntes det skabte bedst balance på siden. Nederst er der placeret en footer så brugeren hurtigt kan finde, de mest almindelige kontaktoplysninger. Ydermere har vi valgt at tilføje åbningstiderne på forsiden, da vi mente, at de fleste ville kigge efter netop den information, når de besøger siden. At de så yderligere får andre informationer er jo bare en ekstra bonus. 2 Skate ODENSE SKATEPARK NYHEDER BILLEDER VIDEO INFO CHAT Poledans Parkour Åbningstider: Mandag: Lukket Tirsdag: 16:00-17:50 (kun for piger) Onsdag: 15:00-21:00 Torsdag: 18:30-21:30 Fredag: 15:00-21:00 Lørdag: Lukket Søndag: 14:00-20:00 (Helligdage: Lukket) Odense Skatehal - Grønløkkevej Odense C - odenseskatehal@hotmail.com - Tlf ODENSE SKATEPARK NYHEDER BILLEDER VIDEO INFO CHAT BMX Løbehjul Skate Poledans Parkour BMX Løbehjul Åbningstider: Mandag: Lukket Tirsdag: 16:00-17:50 (kun for piger) Onsdag: 15:00-21:00 Torsdag: 18:30-21:30 Fredag: 15:00-21:00 Lørdag: Lukket Søndag: 14:00-20:00 (Helligdage: Lukket) Odense Skatehal - Grønløkkevej Odense C - odenseskatehal@hotmail.com - Tlf Side 19/25

20 Odense Street House O. SITE konstruktion af nyt site På billede 4, har vi så efterfølgende lavet et logo, som vi har valgt at placere i stedet for navnet, da skatehallen egentlig omtales med et andet navn. Så er der kommet Nyheder Billeder Video Info Chat Street soccer Parkour 4 flere figurer med, da vi ikke havde alle stilarter med i første designoplæg. Rulleskøjter Skate Løbehjul Capoeira BMX ÅBNINGSTIDER: Mandag: 15:00-21:00 Tirsdag: 16:00-17:50 Onsdag: 15:00-21:00 Torsdag: 18:30-21:30 Fredag: 15:00-21:00 Lørdag: 14:00-20:00 Søndag: 14:00-20:00 Odense Skatepark - Grønløkkevej Odense C - jonathanlinde@hotmail.com - Tlf På billede 5 og 6, ses vores endelige resultat, efter det er blevet kodet med html, og 2 css stylesheets. Vi har ændret logo et så der er mere fokus på figurerne, og 5 navnet er blevet mere synligt. På billede 5, har vi fokuseret på den stilart der hedder popart, hvor vi har valgt at lægge vægt på stærke farver og den lidt poppede og rå stil. På billede 6, ses vores anden stilart, og den har vi valgt at kalde streetart. Her har vi lagt mere fokus på den rå stil med mere graffiti, samt mere dussede og nedtonede 6 farver. Yderligere har vi under menupunkterne valgt at lave et billedgalleri, og en google kalender, så man kan følge med i træningstider og arrangementer i hallen. O SITE / Style and Experience / WebB, Gruppe 10 Side 20/25

21 5. CRAP ANALYSE CRAP analyse på sitet CRAP står for: - Contrast - Repetition - Alignment - Proximity Kontrasten på vores site er skabt af en blanding af stærke og svage kontraster. Idet vi har valgt at holde baggrunden i neutrale farver og samtidig lavet knapperne til de forskellige aktiviteter i stærke farver, er det også det første der fanger interessen. Footeren er også i stærke farver og der er bevægelse, som fanger opmærksomheden når man kommer ind på sitet. Farverne går igen når man klikker ind på de forskellige aktivitets-menupunkter. Så både de stærke farver bliver gentaget når man bevæger sig rundt inde på sitet. Selve forsiden er bygget op med horisontal center alignment. Det brydes af det skrå logoet og graffitien i baggrunden. Selve logoet fylder det meste af headeren og der er skabt en balance ved at placere åbningstiderne på den ene side og de farvede figurer på den anden. Der er tydelige grupperinger - øverst finder man åbningstider, logo og figurer - gruppen. Fokus er på logoet både i kraft af størrelse og farve. Sitet er overskuelig, og ser ikke rodet ud på trods af, at baggrundsbilledet er meget markant. Den næste gruppe er de praktiske menupunkter. Den vigtigste gruppe er menupunkterne midt på siden som illustrerer aktiviteterne i Street House. De er fremhævet både v.h.a. størrelse og farve. Den sidste gruppe er footeren der kører som en flash med tak til de involverede i projektet. Side 21/25

22 6. Færdig site Der er både fordele og ulemper ved at skulle opbygge sitet efter en eksisterende stilart og grid. Fordelene er, at man hurtigt kommer i gang, fordi man ved hvad der kendetegner stilarten. For eksempel så skal vores streetart være meget råt og vores popart skal være farverig, men inden for popartens regler. Ulemperne er at man hurtigt låser sig fast på én type design fra starten, da dette design skal passe til stilarten. 6.1 Diskussion af teknologi Vi har brugt standarden XHTML, fordi det er det vi har lært i undervisningen, og som vi synes vi har bedst styr på. Vi har stylet med CSS da det arbejder godt sammen med XHTML. Endvidere har vi også brugt Flash elementer til at skabe noget liv på vores site. Al XHTML og CSS er kodet i Notepad++ da det var vigtigt for os, i højere grad, at lære koderne udenad. Dog er der den ulempe, at man hurtigere kan komme til at lave fejl i forhold til, hvis vi havde brugt Adobes Dreamweaver CS6. Dreamweaver kommer med forslag til koden, og så er man mere sikker på, at man ikke skriver koden forkert. Vi har brugt Adobes Flash program til at lave vores Flash element. Vi kender på nuværende tidspunkt ikke til andre programmer der kan lave flash, og da det er Adobes eget program går vi ud fra, at det går hånd i hånd med deres reader. 6.2 Tekniske krav Når vi har valgt at implementere flash på vores site så betyder det også, at man skal have et program der kan afspille flash, ellers vil dette ikke virke. Vi har testet i browserne, Firefox, Google Chrome og Safari. Desværre er der et problem med visningen af sitet i Explorer, som vi ikke kan løse på nuværende tidspunkt. Vi har prøvet at integrere flest mulige medier. Det har f.eks. været vigtigt, at sitet kan ses på en smartphone, fordi mange i målgruppen vil bruge en telefon til at gå på nettet med. Her har vi dog haft problemer med Flash, men da det har været et krav til opgaven har vi måtte se igennem fingre med det. Vi har valgt at gøre bredde og højde hhv. 1024x768px, da denne størrelse passer bedst til 15,4 bærbare. Side 22/25

23 6. Færdig site Koder vi er stolte af: 1 2 Vi har valgt vores usynlige klikbare billede som vores anden kode vi er stolte af, da vi gerne ville have forskellige figurer bag vores klikbare billeder, når man skiftede stylesheet. Vi blev innovative og valgte at indsætte det samme usynlige klikbare billede til alle vores syv logoer i XHTML koden og indsætte forskellige baggrundsbilleder via CSS en. På denne måde er alt det bag de klikbare billeder stylet via CSS. Samme kode er i øvrigt brugt til vores header. 6.3 Overskuelighed Først og fremmest har vi holdt orden, både i XHT- ML en og i CCS en samt i undermapperne med vores billeder. Undermapper til billeder og film gør, at man nemmere kan overskue, at finde et billede der passer til det ene design. Orden i koden, gør det nemmere at finde lige præcis det man skal ændre, hvis der skal ændres noget. Side 23/25

24 7. AIDA Gode gamle AIDA, som blev introduceret af M.T. Copeland i 1925, er stadig aktuel at anvende, den gennemgår nemlig hvad en reklame eller en forside helt basalt set skal gøre. Den er nok en af de allermest anvendte kommunikationsmodeller der findes, fordi den er enkel at forstå og bruge. Man kan med fordel trækkes sin forside gennem AIDA, da man let opdager elementære fejl, dog uden at en succesfuld tur igennem modellen er nogen garanti for at hele projektet bliver en succes! Streetartforside: Attention: Designet på forsiden består af mange kraftige farver og illustrationer, som gør at man bliver på siden. Interest: Forsiden består bl.a. af et flashelement i footeren, som fanger brugerens interesse. Desuden er det også nogle anderledes knapper i form af kulørte illustrationer hvad sker der når man klikker på dem!? Desire: Man vil gerne klikke på figurerne, der alle hver især beskriver den sport som de forestiller. I menulinien under logoet er der forskellige interessante emner, som f.eks. galleri - hvad er der billeder af!? Action: Forsiden har åbningstiderne placeret til venstre for logoet, så man med det samme kan se hvornår et besøg er muligt. Popartforside: Attention: De mange kraftige farver, både i baggrunden og illustrationerne midt på siden, gør at man bliver hængende. Interest: Forsiden består bl.a. af bevægelse i footeren, som fanger brugerens interesse. Desuden er menuknapperne kulørte illustrationer. Desire: Man vil gerne se hvad der sker når man klikker på figurerne. Der er illustreret forskellige sportsgrene, man vil gerne vide mere. Action: Forsiden har åbningstiderne placeret til venstre for logoet, så man med det samme kan se hvornår et besøg er muligt. Side 24/25

25 8. Konklusion Som multimediedesignstuderende har vi konstrueret et nyt site til OSH, hvor der er lagt vægt på at tiltrække flere nye brugere især piger. For at opnå det ønskede resultat har vi analyseret målgruppen v.h.a. Gallup segmentering, spørgeskema og interviews. For at være sikker på, at vi med vores site appellerer til målgruppen har vi arbejdet efter en kommunikationsplan. Vi har brugt brainstorms til idegenerering og vi har analyseret vores site designs og layouts v.h.a. en CRAP analyse. Vi har designet sitet i 2 forskellige stilarter, Streetart og Popart, fordi brugen af farver og udtrykkene der kendetegner stilen, passer godt til vores målgruppe. Selve sitet er bygget op af XHTML kode med eksterne stylesheets og vi har indlejret 3 flash elementer. Desuden har vi Brugt AIDA modellen til at teste kommunikationsevnen på vores to forskellige forsider. Hele processen er undervejs blevet dokumenteret og visualiseret. Vi har brugt et Kanban chart til at styre projektets forløb. Det har bl.a. medvirket til, at samarbejdet i gruppen har været godt vi er alle meget forskellige m.h.t vores individuelle evner og har derfor suppleret hinanden godt. Side 25/25