Projektrapport RHYTHM & BLUES

Projektrapport RHYTHM & BLUES

0


1

Indholdsfortegnelse: Indledning 2 Foranalyse 2 Kundebesøg 2 Projektbeskrivelse 2 Afgrænsning og metodevalg 3 HOME-modellen 3

Undersøgelse 4 Tidsplan 4 Ideudvikling 4

Konceptbeskrivelse 4 Ide og formål 4 Indhold 5 Udformning 5

Kommunikation 6 Formål 6 Afsender 6 Målgruppe 6 Budskab 6

Design 6

Informationsdesign 6 Interaktionsdesign 8 Præsentationsdesign 8 Grafiske designparametre 8 Form 8 Farver 8 Illustrationer 9 Hjem/forside 9 Guitar/bas 9 Forstærker 9 Strenge 9 Typografi/tekst 9 Stil/stemning 9

Realisering 10 Konklusion 10 Designmanual 11 User guide 11 Kontakt 11 Bilag 12 Bilag 1: Tidsplan 12 Bilag 2: SW-analyse 13 Bilag 3: Skitser 14 Bilag 4: Skelet 15 Bilag 5: Storyboard 16 Bilag 6: Flowchart 17


2

Indledning Som afslutning på kurset ”Multimedieteknologi og Interaktionsdesign” skal der udarbejdes et website samt en projektrapport, der danner grundlag for en mundtlig eksamen. Projektrapporten tager udgangspunkt i den i forvejen fastlagte opgave, at lave et redesign af et eksisterende websitet for vores kunde Rhythm & Blues. Vi vil i rapporten beskrive vores ideer, projektudarbejdelsen og det færdige website.

Websitet findes på:

http://phpkursus.tietgen.dk/3811/Tine/wp

http://phpkursus.tietgen.dk/3811/jane/wp

Foranalyse

Kundebesøg

Torsdag den 13/10 2011 kl. 10.00 var vi på et kort kundebesøg hos RHYTHM & BLUES i Odense. Her fik vi mulighed for at se forretningen, samt få en snak med forretningens indehaver Sten Mogensen. Det viste sig, at Sten kun havde ganske få krav til websitet, derfor stod vi med rimeligt frie tøjler til opgaveløsningen. Derfor var der heller ikke brug for yderligere informationer til projektet.

Projektbeskrivelse

RHYTHM & BLUES er en lille forretning, der ligger i den historiske bydel i Odense midtby. Bygningen er hvidkalket med rødt bindingsværk, døren og butiksruderne er rødmalede med sprosser. Området omkring butikken består af smalle veje og fortove, flere af bygningerne er fredet. Med andre ord, butikken emmer af sjæl og historie. Sten Mogensen startede forretningen i 1988 efter, at han selv har beskæftiget sig med musik, som musiker i en del år. Der er ikke nogen form for bevidst markedsføring af butikken, da Sten er en kendt person i musikbranchen, er det primært netværk der bruger forretningen, samt at folk anvender mund-til-mund henvisninger.

Målgruppen er både professionelle musikere og folk, der kommer og skal købe deres første instrument.

RHYTHM & BLUES befinder sig i en niche på markedet inden for musikinstrumenter.

http://phpkursus.tietgen.dk/3811/Tine/wphttp:/phpkursus.tietgen.dk/3811/jane/wp


3

Afgrænsning og metodevalg

Til opgaven har vi fra kunden fået nogle få ønsker, som skulle opfyldes:

Det nuværende logo skal beholdes.

Siden må gerne have en lidt lysere baggrund.

Vil ikke have webshop integreret på sit website.

Ikke for mange undermenuer, max 2-3 stk.

Disse ønsker har dermed været med til, at afgrænse opgaven. Vi har i gruppen valgt, at lave et enkelt og meget overskueligt website. Dette begrunder vi med, at vi fik fornemmelsen af, at kunden gerne vil have et website der er hurtigt og nemt at redigere i.

Vi har i projektet anvendt prototyping og HOME-modellen.

Valget faldt på prototyping for at have muligheden for løbende, at forbedre vores website og afprøve forskellige ideer, der dukkede op undervejs i processen.

HOME-modellen

Projektet er udarbejdet efter HOME-modellen (Holistic Open Multimedia Development Method), som er en metode der beskæftiger sig både med procesforløbet, samt udvikling af produktet. Metoden sætter arbejdet i system ved, at gøre designerens valg sammenhængende, velovervejede og konsekvente i forhold til opgaven. Vi har fulgt de fire overordnede principper, foranalyse, undersøgelse, design og realisering.


4

Undersøgelse

Tidsplan

Det allerførste vi gik i gang med, var at udarbejde en tidsplan, opdelt i estimeret tid og faktisk forbrugt tid.

Formålet med tidsplanen er

At planlægge tidsforbruget og justere arbejdsindsatsen, således at resultatet nås til deadline.

At man kan udarbejde en efterkalkulation på udviklingstiden for hele projektet og derved vil blive i stand til, at finde frem til omkostningerne totalt og i de forskellige udviklingstrin.

Ideudvikling

Ideudviklingen har til formål:

At sikre nytænkning

At generere ideer

At skabe fælles forståelse

Vi har valgt at bruge en del tid på idefasen, hvor vi har taget udgangspunkt i kundens nuværende hjemmeside. Vi lavede en SW-analyse opdelt i sidens stærke og svage sider, for på den måde at danne os et overblik over hvilke ting, som vi syntes skulle være med på det nye website. Derefter var vi i gruppen meget enige om, at der skal være en større sammenhæng i mellem udtrykket på websitet og den nostalgiske stemning i butikken (genkendelsesprincippet).

Konceptbeskrivelse

Ide og formål

Kunden har i forvejen et website, som primært skal bruges til at vise butikkens eksistens, varer i butikken (varesortiment skifter hele tiden), samt at finde kontaktoplysninger og vej til butikken.


5

Indhold

På baggrund af kundens nuværende website, fandt vi det meget vigtigt, at skabe en mere enkel måde at præsentere budskabet på. Vi blev også enige om, at det for os var meget vigtigt, at finde nogle andre farver til websitet. Derudover blev vi enige om, at samle nogle tekstafsnit og forkorte det lidt, for på den måde at kunne anvende et helt andet sidelayout.

Udformning

Derfor gik vi i gang med skitsearbejdet. Den skitse vi begyndte med, var en vi løbende har videreudviklet på (prototyping-modellen se side 3, afsnittet afgrænsning og metodevalg)

Vi var begge to hurtigt inde på, at strukturen i sidelayoutet var meget vigtigt for os. Der var bred enighed om, at for at opnå et overskueligt site, hvor man hurtigt kan finde de informationer man søger, så var det et layout med en venstre spalte og en højre spalte vi søgte.

Menuen vil vi gerne have meget enkel, og har derfor valgt ikke at bruge undermenuer, da flere ”klik” forlænger informationsvej. Derudover vil der være mere website at ændre/vedligeholde for kunden.

Nyt / ændret indhold på til det nye website:

Ændret i antallet af menuer og har ikke længere undermenuer, de er stadig placeret horisontalt på siden. (Hjem=forside, Guitar/Bas= produktside,

Forstærker= produktside, Strenge= produktside)

Samlet åbningstider for øverst i venstre spalte. (for samtidig at få butik/værksted større fokus på værkstedet).

I midten af venstre spalte har vi lagt menuen (adresse, telefon/fax, e-kontaktmail). Da al henvendelse vedr. produkterne skal ske til butikken (kunden ønsker ikke webshop på sitet).

Nederst i venstre spalte har vi lagt menuen , et link til kort på ”De Find vej til osGule Sider” direkte til butikkens adresse.

Logo er placeret i header i øverste venstre hjørne.

I headerens øverste højre hjørne har vi indsat et billede (sammensat i photoshop af tre forskellige billeder, der repræsenterer produktsortimentet i butikken)

I main content har vi øverst skrevet overskriften ”Velkommen til RHYTHM & BLUES i Odense Centrum”

Under overskriften har vi indsat et billede af butikken.

Under billedet har vi lavet ny brødtekst, der er inspireret af teksten på kundens nuværende website, men som vi har flyttet fra nuværende undersider og kogt det lidt ned, så det står pænt i det nye layout.


6

Øverst i højre spalte har vi placeret menuen , der har vi lagt et portræt af HistorieSten Mogensen, samt butikkens historie (var tidligere et link på en underside)

I midten af højre spalte er menuen , derfra bliver der linket direkte til Linksproducenterne af produkterne i butikken (Fender= www.fender.com, Gibson= www.gibson.com, Gordon Smith= www.gordonsmith.com, Marshall= www.marshallamps.com)

Farver.

Billeder.

Kommunikation

Formål

En kommunikationsplan har til formål at sikre, at det korrekte budskab bliver formidlet til målgruppen.

Afsender

RHYTHM & BLUES er en butik der åbnede i 1988, den er ejet af Sten Mogensen. Butikken befinder sig i en niche inden for strenginstrumenter, hvor Sten Mogensen selv indkøber/håndplukker produkterne, han går derfor altid helt bevidst efter at have et specielsortiment, som er svært at finde i andre forretninger.

Målgruppe

Målgruppen er folk, der går efter noget helt specielt. Det kan både være begyndere,

Budskabet

RHYTHM & BLUES ønsker at fremstå som forretningen, der har de produkter som de andre ikke har. Det er specialet og den professionelle rådgivning der skal fremhæves, da det er vigtigt at få det rigtige instrument første gang. (I følge Sten Mogensen er branchen ramt af, at kunden ofte ikke får det rigtige instrument fra starten, hvilket gør instrumentbranchen til en branche med alt for mange fejlkøb.) Derfor skal budskabet være, at her er hyggeligt, afslappet atmosfære, stor viden om produkterne og altid personlig kundebetjening.

Design

Informationsdesign

Al grafisk design handler om at overføre information fra afsender til modtager. Det er derfor vigtigt at tage afsæt i typen af brugere, hvilket vi vil vende tilbage til nedenfor. Et gennemtænkt informationsdesign er en forudsætning for en positiv brugeroplevelse.

http://www.fender.com/

www.gibson.com

www.gordonsmith.com

www.marshallamps.com


7

Kundens ønsker og behov

Inden vores kundebesøg fik vi udleveret projektoplægget, med det i hånden fik vi mulighed for, at forberede nogle spørgsmål til Sten Mogensen inden vores besøg. Derved fik vi opsat følgende ønsker og krav:

Minimum af vedligeholdelse.

Max. 2-3 undermenuer.

Logo bevares.

Vil ikke have webshop.

Kunder opfordres til at besøge butik eller sende e-mail.

Kunden har ikke noget billedmateriale til udlevering.

Kunden har ingen prisliste og ikke nogen brochurer, der skal ligges ind på siden.

Der skal ikke være nogen referencer på siden.

Vurdering af målgruppens behov.

Det er disse krav og ønsker, der er udgangspunktet i websitet. Derudover har vi selv vægtet brugervenlighed meget højt, og gerne vil have flest mulige informationer lagt ind på websitet i et let overskueligt layout.

Vores menulinje består derfor kun af 4 sider, alle uden undersider

Hjem

guitar/bas

forstærker

strenge

Vi har desuden valgt at header, menulinje, venstre spalte og højre spalte skal være gennemgående på alle siderne. På denne måde er åbningstider, kontaktoplysninger, kort og links tilgængelige lige meget hvor man navigerer hen og man skal derfor ikke klikke sig igennem siderne for at få de vigtige informationer. Flowchartet for websitet bliver derfor også ret enkelt, da der ikke er en masse navigationsmuligheder.


8

Interaktionsdesign

Den primære mission med udvikling af interaktionsdesign er at sørge for, at samspillet mellem bruger og website er så nemt og hurtigt så muligt og, at brugerne problemfrit kan navigere på websitet.

Graden af interaktion er meget forskellig fra website til website. Vores hierarkiske opbygning af websitet giver brugeren nogle få men præcise muligheder, at skulle navigere i.

Vi mener derfor, at vi har fået skabt et meget let overskueligt og enkelt website.

Præsentationsdesign

Målet med præsentationsdesignet er at designe websitet med udgangspunkt i alle de informationer, som er fremkommet og indhentet undervejs i de enkelte faser.

Man skal overføre struktur og information til kommunikation og en form for oplevelse, her er det vigtigt at man holder sig til det simple ved at gøre det nemt for brugeren at navigere rundt og finde frem til de rette informationer. Vigtigt er også at alt indhold har en mening/ funktion.

Det vil være optimalt at inddrage brugeren i denne proces, det har dog ikke kunnet lade sig gøre i vores tilfælde.

Grafiske designparametre

Form

Vi har på forsiden valgt formatet 990 x 610, således at der ikke scrolles hverken horisontalt eller vertikalt. Websitet er lavet i WordPress temaet ”State of mind”, der på forhånd er kodet med en venstre spalte og en højre spalte. Centreret på websitet er en billedramme, der fremkalder en fornemmelse af noget mindre, hvilket modsvarer den lille forretning.

Farver

Vi har ladet os inspirere af den historiske bydel, som butikken ligger i.

Der er taget udgangspunkt i den hvidkalkede bygningsfacade, med det bordeauxrøde bindingsværk, samt de bordeauxrøde døre og vinduer med sprosser. I butikken med de hvidkalkede vægge, står instrumenterne tæt sammen, og man lægger straks mærke til de mange forskellige trætyper der anvendes til fremstilling af instrumenterne. Åretegningerne og farverne i instrumenterne giver en helt fantastisk varme, som vi gerne ville have frem på websitet, da det samtidig fremkalder en helt speciel stemning. Den fortæller sin egen historie, selv om man ikke har forudgående viden om musikinstrumenter.


9

Derfor er vores valg faldet på lige præcis WordPress temaet ”State of mind”, der har lige de varme rolige farver og den rette mængde nostalgi, som vi søgte.

Illustrationer

Hjem/forsiden

Kundens krav var, at vi skulle bibeholde det nuværende logo.

Det har vi valgt at placere til venstre i headerens øverste hjørne, det er gjort for at skabe blikfang. Da kunden ikke havde nogen billedefiler han kunne udlevere, har vi måtte hente det fra hans nuværende website. I headerens øverste højre hjørne har vi lavet et nyt billede i photoshop, der er sammensat af tre billeder (downloaded fra www.sxc.hu). Tilsammen repræsenterer de tre forskellige produktkategorier, som vi har valgt at bruge på websitet.

Billedet af butikken, som er centreret i main content på vores website er ligeledes, hentet fra kundens nuværende website. Vi har valgt at placere det midt på siden, for at skabe en genkendelseseffekt hos brugerne af sitet. På denne måde er man ikke i tvivl om, at website og butik er en og samme forretning.

Guitar/bas

I main content har vi indsat billeder af de produkter, der er i butikken lige nu. Der er desuden indsat brødtekst som produktbeskrivelse ved siden af det enkelte billede. Billederne er hentet på kundens nuværende website

Forstærker

I main content er der indsat et billede af en Marshall forstærker, som er hentet på www.sxc.hu. Under billedet er der indsat brødtekst med henvisning til butikken.

Strenge

I main content er der indsat et billede af guitarstrenge, hentet på www.sxc.hu. Under billedet er der indsat brødtekst, med henvisning til butikken.

Typografi/ tekst

Vi har valgt at bruge den letlæselige skrifttype verdana, som på forhånd var indkodet i det valgte tema. I de high-lightede afsnit har vi anvendt farvekoden #ae3300 = tan/brun. Vi har bevidst valgt en lys baggrund, for at øge læsbarheden på websitet.

Stil og stemning

Alle valg der træffes i forbindelse med udformning af et website tager udgangspunkt i målgruppen. Stil og stemning fremkommer ved en kombination af komposition, farver, illustrationer og typografi, som tilsammen gerne skal harmonere med målgruppen og det budskab, man ønsker at formidle. Ud fra den betragtning og ud fra kundens ønske

www.sxc.hu

www.sxc.hu%20

www.sxc.hu


10

om et minimum af vedligeholdelse har vi valgt et simpelt, klassisk og brugervenligt design uden ”forstyrrende” elementer. Stemningen er rolig og indbydende.

Realisering

I realiseringsfasen overføres beslutningerne vedrørende websitets udformning til praksis.

Vi har prioriteret brugervenlighed og design meget højt og derfor også løbende kigget meget på, hvordan vores ideer påvirkede websitet. Fra start var fast besluttet på, at holde websitet enkelt og overskueligt, og da alle valg som bekendt har en konsekvens, har vi gjort meget ud af at holde fast i vores udgangspunkt.

Det viste sig at WordPress temaet ”State of mind” passede rigtig godt til den opbygning af websitet, som vi havde tænkt os. Vi har tilpasset temaet til indholdet i venstre spalte og højre spalte, samt indsat kundens logo og nogle downloadede billeder, der er redigeret i photoshop.

Konklusion

Vi har efterkommet kundens ønsker og krav, samt formået at tilføjet siden et helt nyt udtryk. Da vi har slået nogle af de eksisterende sider sammen og kogt tekstindholdet lidt ned, er det lykkedes os at forenkle siden en hel del. Vi mener at det er lykkedes os, at få lavet et enkelt og meget overskueligt website, der samtidig indeholder alt vigtig information fordelt på de relativt få sider på sitet.

Gruppen har været yderst velfungerende og har suppleret hinanden rigtig godt, med vores forskellige kompetencer. Ingen af os havde kendskab til webdesign på forhånd, en havde lidt erfaring med photoshop, mens den anden var vant til at arbejde med skriveprocessen. Vi har været gode til at overholde vores indbyrdes aftaler, samt at overholde de deadlines vi har opsat. Opgaven er løst i fællesskab, hvor vi hver især har bidraget med vores input.


11

Designmanual

Font

Menu: Times new roman 14 bold Tekst: H2 Georgia 16 normal Verdana 11 normal Verdana 11 bold #AE3300

Farver

Er billeder kodet i WordPress temaet. content_bg.jpg fotter.jpg header1.jpg menu_bg.gif sidebar_head.gif

Logo

Logo er placeret øverst i headerens øverste venstre hjørne.

User Guide

Hvis RHYTHM & BLUES vælger at implementere vores forslag til website, så vil vi udarbejde en user guide med følgende indhold:

1. Sådan får du adgang til at komme ind og rette på websitet

2. Generelt om at rette

3. Tips og tricks hvis rette specifikke steder

4. Kontakt

User guiden laves som en trin for trin guide med skærmbilleder og vejledende tekst.

Kontakt

Kontaktpersoner:

Navn: Jane Clausen, tlf.: 20 10 15 17

Navn: Tine Vestergaard, tlf.: 20 10 15 18


12

BILAG 1

Tidsplan:

Aktivitet Forventet tid Forbrugt tid

Foranalyse Kundebesøg/ krav og ønsker 2 1

Planlægning af projekt/ metodevalg 1 4

Undersøgelse

Tidsplan 1 1

Ideudvikling / prototyping/ skitser 8 12

Design

Websiet 16 20

Realisering

Billedbehandling 8 8

Opsætning af websitet 12 16

Rapportskrivning 18 20

Samlet tidsforbrug 66 82


13

BILAG 2

SW-analyse

STÆRKE SIDER

Flotte produkt billeder Logo (skal bevares) God tekst på forsiden Masser af tekst

SVAGE SIDER

Mørkt farvevalg (baggrund) Uoverskuelig (for mange klik) For mange genveje Ikke fokus nok på værkstedet


14

BILAG 3


15

BILAG 4

Skelet


16

BILAG 5


17


18

BILAG 6

Flowchart

Documents

Projektrapport RHYTHM & BLUES