Indholdsfortegnelse: 1. Udforskende research og analyse 1.1 Idékatalog.. side 1 1.2 Brugerprofil og brugerscenarie.. side 3 1.3 Mission Statement side 3 2. Research og analyse af den givne stil 2.1 Stilens karakteristika. side 4 2.2 Eksempel på webside.. side 4 2.3 Udformning af webside. side 5 3. Observationsbaseret research, konceptudviklingsmetode og gruppeproces 3.1 Observationsbaseret research, konceptudviklingsmetode.. side 6 3.2 Projektstyringsforløb.. side 7 4. Kode 4.1 kodeekspempler.. side 9 4.2 Forklaring på koder. side 9 Kildeangivelse.. Bilag..
Kommunikation Målgruppe: Til vores koncept er målgruppen os selv. Valget af målgruppen har betydning for kulturmaskinens måde at nå ud til målgruppen på. Det er afgørende for kulturmaskinen at de har sat sig grundigt ind i, at lære deres målgruppe at kende. Målgruppen er som sagt os selv. Unge mennesker mellem 20-30 år, under uddannelse eller nyuddannet. Vores målgruppes vigtigste forventninger til vores webside er, at få informationer og blive oplyst. Vores målgruppe kan både have erfaringer og lidt kendskab til brug af tekniske kundskaber, så derfor er det vigtigt at vores webside er brugervenligt for alle i vores målgruppe. 1.1 Idékatalog. - Konkurrence: Vores første idé er at kulturmaskinen afholder en konkurrence på deres hjemmeside. Formålet med dette ville være, at vores målgruppe er tvunget til at vende tilbage til kulturmaskinen eller deres hjemmeside, for at se hvor langt de er i konkurrencen. Et andet formål er, at det skaber interesse of vores målgruppe får lyst til, at deltage. Konkurrencen kunne hedde månedens billede og derved gå ind på kulturmaskinens hjemmeside og stemme på det billede den pågældende person synes er flottest, eller sender det bedste budskab. Månedens billede kunne også have et tema og på den måde er der et lille krav til dem der deltager i konkurrencen. Vi mener denne idé er god fordi den optimerer oplevelsesforløbet, ved at det varer længere. Hele forløbet omkring udnævnelsen varer et stykke tid da månedens billede kun bliver kåret en gang om måneden. Udover det så ville deltageren føle at det er en begivenhed hvis personen gik hen og vandt. Den sidste fordel ved vores idé er at kulturmaskinens hjemmeside konstant vil være opdateret og der vil hele tiden ske noget nyt og det fremmer interessen for folk, og de vil derefter vende tilbage. - Nyhedsbrev: Vores anden idé er et nyhedsbrev. Dette nyhedsbrev skal indeholde månedens arrangementer, tilbud i caféen, ny viden og andre ting der ændre sig løbende ved kulturmaskinen. Dette nyhedsbrev skal ligge som PDF-fil på kulturmaskinens hjemmeside og det skal sendes ud til folks mail, hvis vores 1
målgruppe har tilmeldt sig. Nyhedsbrev er en god idé da det er en billig løsning, men samtidig kan den være meget effektiv hvis den skrives rigtigt. For at dette nyhedsbrev skal blive en succes, skal det være så målrettet til vores målgruppe som overhovedet muligt. Vi skal skrive lige præcis det de har brug for at høre, så det vækker mest muligt interesse. Det er vigtigt det er et super inspirerende design, letlæseligt og fattet i korthed, så vi ikke mister nogen på vejen. - Aktion: Vores sidste idé er en aktion. Vores målgruppe tilmelder sig på kulturmaskinens hjemmeside og får derefter tre måneder til at lave hvad som helst på et af kulturmaskinens værksteder. Det kan være en kjole, en hat, en krukke, en plakat, en stol eller et smykke. Der kan også være mulighed for at kombinere værkstederne, ved fx en stol med stof på. Alle deltagernes ting vil der blive taget billeder af og derefter lagt op på hjemmesiden. Sidst på måneden i hver tredje måned vil der blive holdt aktion på en af scenerne. Alle folk er velkomne til denne aktion. Gæsterne vil byde på tingene og den der byder højst får lov at købe den ting, for den pris. For at der vil falde et lille beløb til kulturmaskinen, går 20 % af beløbet den pågældende ting er solgt for, til dem. De sidste 80 % går selvfølgelig til den deltager der har lavet den ting der er blevet solgt. Denne aktion vil optimere både begivenhedsforløbet og oplevelsesforløbet for vores målgruppe. Dette projekt vil vare over en længere periode og på den måde bliver vores målgruppe nød til at vende tilbage til kulturmaskinen. - Udendørs arrangement: Ved kulturmaskinen er der et stort område udenfor, dette område kunne blive udnyttet godt om sommeren. Vi har derfor fået en idé der handler om alle de ting der er blevet lavet på de forskellige værksteder på kulturmaskinen. Det udendørs område kunne om sommeren blive lavet om til en udstilling. Dette arrangement kunne findested to gange hver sommer, da mange er på sommerferie og af den grund ikke har tid til at deltage. Caféen kunne lave noget udenfor samtidig, så folk kan få noget og drikke og spise. Denne udstilling er ting der er blevet lavet igennem de sidste to år på kulturmaskinen. Dette er til 2
fordel for både målgruppen og kulturmaskinen. Målgruppen får en rig oplevelse og får lyst til at komme tilbage. Kulturmaskinen får brugt sit udendørsareal og salget i caféen stiger de to aftener der er fyldt med gæster. 1.2 Brugerprofil Profil I 1 : Navn: Søren Pedersen. Køn: Mand. Alder: 26. Uddannelse: Tømmer. Stilling: Tømmersvend. Civilstand: Single. Internetforbindelse: ADSL 10/1Mbit Profil II 2 : Navn: Josefine Jacobsen. Køn: Kvinde. Alder: 21. Uddannelse: Datamatiker. Stilling: Studerende. Civilstand: Kæreste. Internetforbindelse: ADSL 50/1Mbit Brugerscenarie: Søren vil bruge kulturmaskinen.com til at se hvornår hvilken nye stand-up shows som kommer. Han vil gerne kunne så film og/eller lydklip fra det showet han måske vil se. Han har ikke så meget tid eller interesse foran computeren, så der må ikke være for meget information, men heller ikke for lidt. Josefine ønsker nyheder, nyheder, nyheder det er hendes 3 vigtigste præferencer når hun skal besøge kulturmaskinen.com. Hun vil ikke se på den samme side hver gang hun kommer. Hun vil opleve noget nyt og spændende. Men hun vil heller ikke have for meget. Kun det vigtigste og siden skal være brugbar. Josefine ønsker også at kunne få information hvad der sker på kulturmaskinen. Visuel collage 3 1 Se bilag 1 2 Se bilag 2 3 Se bilag 3 3
1.3 Mission Statement Formålet med hjemmesiden er, at nå ud til folk, et større publikum. Hvis Vores webside er inspirerende og informativ og når ud til mange mennesker vil det skabe interesse og derved vil Kulturmaskinen få flere besøgende. Det er det budskab vore hjemmeside sender de er vigtig. Design 2. Research og analyse af den givne stil. 2.1 Vi har i gruppen besluttet os for, at vores hjemmeside skal bære præg af modernisme. Vi har tidligere arbejdet med modernisme og mente at den stilart gav os rig mulighed for at udfolde os kreativt, og derved lave den mest effektive, men samtidig den mest oplevelsesrige hjemmeside, til vores kunde Kulturmaskinen. Modernisme er en kunstperiode der fik sit gennembrud i 1900-tallet. Modernisme ligger lige før postmodernisme og senmodernismen, men lige efter efterkrigstiden. Måden modernistisk typografi og grafik blev udtrykt på i Midteuropa bærer tydeligt præg af, at det er i efterkrigstiden vi befinder os. Folk ville finde en løsning og et middel til alt. Alt kom i udvikling, medicin, transport, bygninger og viden. Alt skulle have en grund og en funktion. Dette ses tydeligt i blandt andet arkitektur, fra den tid som i høj grad blev inspireret af den tyske Bauhaus-skoles eksperimenter med nye materialer 4. Store geometriske figurer og alt har en funktion, væk med harmoni og unødig pynt. Karakteristika for modernistisk grafik og typografi blev til abstrakte geometriske mønstre, farverkombinationer, abstrakte billeder og tekstmanipulation, med det formål, at det blev set på en interessant måde. I dag er modernistisk stil på en hjemmeside stort set det samme, kontrast, både i farver og størrelser, klar adskillelse mellem tekst og illustrationer. Eksempel to viser tydeligt kombinationen af både typografi og 4 Se bilag 4 4
geometriske figurer 5. Derved gør det værket interessant og det kræver at man lige læser det en gang mere for at forstå det. 2.2 Her ses det tydeligt at hjemmesiden hører til den modernistiske stil 6. Det kommer til udtryk igennem flere elementer, der kan bland andet nævnes følgende. Der er brugt helt klare og tydelige linjer, klare og enkle basisformer, hele navigationen består udelukkende af firkanter af samme dimensioner. Det er tydeligt at se at elementerne flugter med hinanden, og hele sidens opbygning er meget klar. Tekst og billeder er adskilt. Der er udelukkende brugt Sans Serif skrifter, der også understøtter den modernistiske stil. Farvevalget er meget simpelt, der er primært brugt sort og hvidt, og så enkelte primærfarver til at understøtte eksempelvis navigationen. (Rød markering omkring News på eksemplet.). På nyhedssiden 7 er det mange af de samme elementer der gør sig gældende. Farvevalget er det samme som på forsiden, og den røde farve fra navigationen på forsiden videreføres, og markeres tydeligt både i venstre side, men også som en klar linje der understøtter menuen foroven. Der er også tilføjet endnu en basis form, cirklen, som nu optræder forskellige steder på siden som forskellige funktionsknapper der tjener praktiske formål. 2.3 Udformning af websitet og valg af virkemidler Vi har valgt at udforme vores website efter den modernistiske stil. Vi har på forsiden valgt at implementere et slideshow, for at fange brugerens opmærksomhed, og byde på noget spændende indhold. Nedenunder har slideshowet vi valgt at lægge Nyheder og Events, da vi mener det er noget af det allervigtigste ved Kulturmaskinen, da det er det der driver det hele. Man kan så klikke sig videre på de forskellige nyheder eller events hvis man vil læse nærmere om dem. Øverst på siden har vi placeret vores menu, vor der er let adgang til de vigtigste emner omkring kulturmaskinen. Den omfatter: Forside, Konkurrence, Events, Værksteder, Galleri og 5 Se bilag 5 6 Se bilag 6, http://www.bauhaus.de 7 Se bilag 4, http://www.bauhaus.de 5
Om os. For at lette navigeringen på siden har vi sørget for at man i menuen kan se hvilken side man er på. Dette kommer til udtryk ved at det tilsvarende punkt ikke er understreget. Vores website matcher den modernistiske stil gennem hele den overordnede udformning. Vi har brugt lige linjer, i rød for at understøtte stilen. Dette giver siden et meget enkelt og modernistisk udtryk, samtidigt med at det bidrager til at siden fremtræder mere spændende. Derudover har vi holdt siden i sorte og hvide farver, for ikke at tilføje for meget unødvendigt pynt der ikke tjener noget reelt formål. På forsiden har vi brugt en sort bjælke til at adskille nyheder og events, for at gøre siden lettere læselig og brugbar. Alle henvisninger og links på siden er markeret med en tynd rød streg nedenunder, så der ikke hersker tvivl om det er noget man kan klikke på. De eneste elementer der ikke i så høj grad kan knyttes til den modernistiske stil er den store mængde billeder og hele billedgalleriet som ligger på siden. Dette har vi dog valgt at gøre alligevel for at give brugerne en en god visuel oplevelse og stimulere deres sanser. For at imødekomme brugerne har vi ligeledes implementeret videoer på siden, da det giver en anden oplevelse og dermed tilfører lyd. Dette er meget vigtigt da Kulturmaskinen i stor grad beskæftiger sig med koncerter, hvor netop lyden og musikken er i fokus. Som en ny og spændende tiltag har vi lavet en Konkurrence side med Månedens billede. Der vil her være mulighed for alle for at uploade deres eget billede fra en koncert, eller bare en dag på værkstedet. Efterfølgende vil man så kunne stemme på det billede man syntes bedst om, og vinderen vil blive præmieret og billedet vist inde på siden. Virksomhed 3. Observationsbaseret research og konceptudviklingsmetode og gruppe proces 6
3.1 Ved vores besøg på Kulturmaskinen fik vi taget en række billeder, og dannet os et godt indtryk omkring hvordan hele stedet fungerer og hvilke faciliteter og muligheder det byder på. En af de væsentlige ting vi fik et tydeligt indtryk af, er at der er plads til alle, og til mangfoldighed. Det kom blandt andet til udtryk i medieværkstedet, hvor der kommer mange forskellige mennesker for at arbejde med noget grafisk 8. Vi oplevede i blandt andet i ler og tekstilværkstedet en række håndværksmæssige produkter der stod udstillet nogle af dem var endda til salg. Der fik vi idéen til at lave en auktion med nogle af de ting som alligevel er til salg, få taget nogle billeder af dem, og så lægge dem på hjemmesiden til salg 9. Da vi ankom, var noget af det første vi lagde mærke til ligeledes den store gård der ligger omkring Kulturmaskinen og Magasinet. Farvegården, som den bliver kaldt, er perfekt til udendørsarrangerementer. Selvom November kulden ikke ligefrem indbyder til det, så kunne man sagtens forestille sig at der kunne holdes nogle rigtigt spændende arrangerementer i den lidt lunere del af året 10. Inde i den store sal i Magasinet fik vi hurtigt oplevelsen af en meget intim og hyggeligt stemning. De store lamper ledte straks tankerne hen på fede koncert oplevelser 11. Vores valg af koncept udspringer meget i vores indsamlede indtryk og billeder, vi fik ved vores besøg på Kulturmaskinen. Som sagt så vi disse lerfigurer, tøj, hatte og andre ting folk havde lavet, var blevet sat til salg. Disse ting stod i et lille glasskab. Kjolerne og tasker var selvfølgelig klædt på en påklædningsdukke. Vi var alle i gruppen enige om at det var nogle meget unikke ting der var blevet lavet på Kulturmaskinen og vi begyndte at skrive vores mindmap. 12 Mindmap er et redskab vi i gruppen har brugt som et huskekort. Det hjælper os til at holde styr og overblik over alle vores idéer. Vi kom frem til, at kulturmaskinen kunne lave en aktion ud af alle disse ting. Det er til fordel for både Kulturmaskinen og for den enkelte person der har lavet værket. Vores konklusion er, at besøget på Kulturmaskinen og metoden med brug af mindmap har hjulpet os igen og givet os en masse idéer om, lige præcis hvordan vores koncept og website skal se ud og hvilke funktioner begge dele skal have, for det er mest brugervenligt for kulturmaskinens målgruppe. 8 Se bilag 8 9 Se bilag 9 10 Se bilag 10 11 Se bilag 11 12 Se Bilag 9 - mindmap 7
3.2 Projektstyringsforløb/evaluering af gruppeproces. 3.2.1. tidsskema Mandag Tirsdag Onsdag Torsdag Fredag 8.00-10.00 Udvælgelse af projektleder. Stilens karakteristika Design Mindmap idékatalog 10.00-12.00 Brugerprofil Sammenfat observationer og indtryk fra research på kulturmaskine n 12.00-14.00 Besøg på Kulturmaskine n hjemmearbejd e Modernisme Start på Mockup til webside Mission statement Webside Sammens æt rapport Webside Webside Galleri Webside Webside Beskrivelse af udformning af hjemmeside Webside kodeeksempel Færdigskrivnin g af rapport Finpudsnin g af rapport og webside Fælles refleksion over gruppeforlø b 3.2.2 Vi startede projektet mandag morgen og begyndte med at læse opgaven igennem. Vi vedtog en projektleder og fordelte gruppemedlemmernes roller og ansvarsfordelinger ud. Vi blev enige om at Michael skulle være vores projektleder og har ansvaret for, at hele processen hænger sammen og at deadlines bliver overholdt. Derudover er han ansvarlig for vores hjemmesides tekniske opbygning. Jonathan er ansvarlig for siden design og struktur, og Sari har ansvaret for rapporten og at de forskellige dele i rapport bliver kædet ordentligt sammen. 3.2.3 Vi har her sidst på ugen sat os sammen i gruppen og reflekteret over hvordan vores gruppearbejde og ansvarsfordelinger gik. Vi mener i gruppen at ansvarsfordelingerne har været rigtig gode. Alle i gruppen har holdt styr på det de skulle. Vi har været gode til at informerer hinanden og dele alt arbejde på Drop Box. 8
3.2.4 Vi mener i gruppen, at vi har fungeret fint som gruppe. Både Jonathan og Michael er pragmatikere. De har beskæftiget sig med det praktiske og design. Vi har i gruppen tydeligt kunne mærke at der har været mange idéer fra pragmatikerens side, hvilket også et typisk. Sari er teoretikere, og det har gruppen tydeligt kunne mærke, da hun mest har sat sig ind i de forskellige teorier. De to forskellige læringsstille har på tre forskellige måder bidraget med idéer. Vi mener ikke det har været negativt, at vi kun har to forskellige læringsstile i gruppen, det har fungeret fint. Til næste projekt har vi tænkt os, at øre som dette projekt. At holde hinanden opdateret, dele hinandens arbejde og være gode til at kommunikere. Interaktion 4. Kode 4.1 Kodeeksempel 1: Google FONT API Desværre er der ikke mange skrifttyper, som kan bruges til websites, fordi det kræver brugeren har på deres computer og det ved man ikke på forhånd, når man designer. Dette har Google lavet en løsning på med en kode, som man integrere på sin website: <link href='http://fonts.googleapis.com/css?family=pt+sans:regular,italic,bold,bolditalic&subs et=latin' rel='stylesheet' type='text/css'> Dette indsætter man i <head> på samme måde som når man laver en reference til et ekstern CSS dokument. Nu kan man bruge andre typer skrifttyper, blot de findes på Google Font API, som konstant bliver udvidet. Vi valgte PT Sans. Fremgangsmåden er faktisk præcis den samme måde, som man normalt styler sin skriftyper: h1 {font-family: 9
'PT Sans', arial, serif; } Bruger som ikke har skrifttypen installeret på deres computer, skal ikke downloade den, da den ligger på Googles server. Det gør at man ikke får ekstra ventetid, når man åbner siden og den fungere i alle browser, selv Internet Explorer 6. Kodeeksempel 2: rød understregning på hyperlinks Vi har valgt at style vores hyperlinks på en udsædvanlig metode, som ikke er benyttet så meget. Vi har valgt at give dem en rød understregning, som giver dem en unik effekt og sørger for de holder stilarten, men også gør dem brugervenlige, så brugerne kan se at det er links og de vækker opmærksomhed fra traditionelle hyperlinks. Dette gør man på følgende måde. #events a {text-decoration: none; border-bottom: 1px solid red; color: black; font-weight: normal;} Denne kode laver et link, fjerner den almindelig understregning og sætter en border (streg) på som er rød med sort tekst. #events a:hover { text-decoration: none; border-bottom: 1px solid black; color: red; }Denne kode laver hover-effekten (rul-over). Igen fjernes understrengingen, men nu indsættes deres en streg som er sort med rød tekst. 10
Litteraturliste Brugervenligt webdesign 2. udgave af Rolf Molich Nyt Teknisk Forlag The Yahoo! Style Guide af Chris Barr - Yahoo! http://www.realea.dk/ http://www.google.dk/images?um=1&hl=da&biw=1920&bih=859&tbs=isch%3a1&sa=1& q=modernisme+arkitektur+k%c3%b8benhavn&aq=f&aqi=&aql=&oq=&gs_rfai= 11
Bilag 1 Søren er uddannet tømmer, 26 år og bor i en 2 værelset ejerlejlighed i Odense C, fordi det er dejligt centralt. Allerede i folkeskolen vidste han, at han ville være tømmer, præcis som hans far. Søren interesserer sig ikke meget for internet eller computer. Det er blot et redskab, når han skal tjekke noget. Han får en kammerat til at installere og opdatere hans computer, og der kan gå lang tid mellem det sker. Så computeren er ikke altid opdateret. Hans computer en HP bærbar med Windows Vista og han bruger Internet Explorer 8, som var installeret på forhånd. Den har jeg altid brugt og gider ikke installere noget nyt siger Søren om hans valg af browser. Søren gider absolut ikke vente på noget, som han selv siger Mit liv er til at sidde og vente på en side loader en firkant som blinker. Han bruger mest computeren til internet, især Face book, men også til netbank og han har shoppet på nettet nogle gange, da han har opdaget at stylings-udstyr til hans bil er langt billigere i Holland og Tyskland. Søren bruger sin fritid på at spille fodbold, spille Xbox og drukture med vennerne. Han stemmer til valg, men politik interesserer han sig ikke sønderligt og stemmer på Venstre, fordi han ikke gider betale skat. Josefine er en kvinde, som ved alt om computer. Nogle bliver født med en sølvske i munden, Josefine blev født med en computer. Da matematik så også var hendes yndlingsfag på gymnasiumet, vidste hun straks, at hun ville læse datamatiker. Bilag 2 Josefine har den nyeste Apple bærbar og en stationær derhjemme, samt et mobilt ß bredbånd fra 3, så hun altid er på nettet. Hun skifter altid computere ud, når der kommer en ny mobil. Hun bruger Chrome browseren fra Google, da den er den nyeste og den som kan levere flest nye specs. Hun har altid travlt og burger internettet som et redskab, til at holde kontakt med venner og veninder. Hun læser nyheder og holder sig opdateret om alt relevant indenfor hendes uddannelse. Hun bor i 3 værelset lejlighed i Odense sammen med sin kæreste, som hun var mødt på uddannelsen. I hendes fritid elsker hun at gå på cafe, shoppeture og biografture med veninderne. Hun er SF er og hun har været aktiv i SFU i cirka 5 år.
Bilag 3 Bilag 4 ß Bilag 5 ß
Bilag 6 ß Bilag 7 ß
Bilag 8 ß Bilag 9 ß Bilag 10 ß
Bilag 11 ß Bilag 12 Mindmap