website for rhytm og blues

Web Webs Website

for

Rhyt

hm &

Blues

,

Bilag

ite

for

Rhyt

hm & Blues, Bilag

site for Rhythm &

Blues, Bilag

Brian Mortensen,

Morten Schärfe , Henriette Nielsen

Webteknologi og

interaktionsdesign,

November 2011,

Erhvervsakademiet

Lillebælt

Website for Rhythm & Blues

http://fronter.com/eal/contacts/users.phtml?edit=645868847

http://fronter.com/eal/contacts/users.phtml?edit=645868847


Side 2

Indhold

Forside ............................................................................... 4

........................................................................................... 1

Indhold .............................................................................. 2

Indledning ......................................................................... 4

Udviklingsmodeller og metoder ....................................... 5

HOME-modellen kort fortalt ........................................ 5

Foranalyse ......................................................................... 7

Projektbeskrivelsen ....................................................... 7

Vores kunde: Rhythm & Blues .................................. 7

Kundeønsker .............................................................. 7

Udviklingsmodel ........................................................ 7

Intressentanalyse ...................................................... 8

Undersøgelse ..................................................................... 9

Udviklingsholdet fastsættes ......................................... 9

Målgruppe og marked ................................................... 9

Produktideén udvikles ................................................... 9

Projektplan ................................................................... 10

Design............................................................................... 12

Informationsdesign ...................................................... 12

Interaktionsdesign ....................................................... 12

Præsentationsdesign .................................................... 13

Designparametre og virkemidler ............................. 13

Form og farve ............................................................ 13

Typografi ................................................................... 14

Illustrationer ............................................................ 14

Lyd og Animationer .................................................. 14

Kontraster ................................................................. 14

Realisering ....................................................................... 16

Designet integreres i Wordpress ................................. 16

Det færdige website ..................................................... 16

Websitets videre udvikiling ......................................... 16


Side 3

Kontaktoplysninger ..................................................... 17

Link til websitet .......................................................... 17

Udviklingsteamet og dets samarbejde ....................... 17

Konklusion ................................................................... 17

Kilder ............................................................................... 19


Side 4

Indledning

Projektet R&B går ud på at lave en redesign af den

eksisterende webside for indehaveren af forretningen

Rhythm & Blues Sten Mogensen.

Nuværende website: http://www.rogb.dk

Udviklingen af nyt website er et eksamensprojekt i

forbindelse med kurset Multimedieteknologi og

interaktionsdesign på Erhvervsakademiet Lillebælt.

http://www.rogb.dk/


Side 5

Udviklingsmodeller og metoder

En udviklingsmetode er en samling af retningslinier og

anbefalinger for arbejdet med udførelsen af et digitalt

produkt. Når en speciel holdning er bestemmende for

organiseringen, vægtning og indhold i

udviklingsprocessen, taler man em et

udviklingsparadigme. Der findes mange

udviklingsparadigmer – i dette projekt har vi som

udgangspunkt 4 forskellige, som vi kan følge slavisk eller

mikse efter behov – Vandfaldsmetoden, Prototyping,

Udforskende programmering og De agile metoder. Mere

om vores valg og sammensætning under afsnittet

Foranalysen - Udviklingsmodel.

Den praktiske udvikling af et website er ofte et samspil

mellem flere aktører, og det er derfor nødvendigt med

nogle metoder til at styre processen, så man arbejder hen

mod det samme mål. Resultatet skal blive et website,

som kunden bliver tilfreds med samt at sikre at

udviklingsholdet får betaling for arbejdet.

Vores projekt med redesign af websitet for Rhythm &

Blues er et forholdsvis lille projekt. Desuden er det et

eksamensprojekt, og i dette tilfælde har vi med en kunde

at gøre, som ikke vil og ikke udviser den store interesse

for at følge arbejdet med udviklingen tæt.

Vi har også en tidsfaktor at tage hensyn til, så vi skal

være hurtige og effektive i vores udviklingsproces.

Den praktiske udførelse af udviklingen af det nye

website følger HOME-modellen. Den kan tilpasses det

aktuelle projekt. I vores tilfælde skal der ske en del

tilpasning, da hele HOME-modellen er velegnet til store

projekter med mange aktører i udviklingsarbejdet. Det

er ikke alle trin, der skal vægtes lige højt i vores lille

projekt.

HOME-modellen kort fortalt

HOME står for Holistic Open Multimedia mEthod –

oversat betyder det Helhedsorienteret Åben Multimedie

Udviklingsmetode. Denne metode er kendetegnet ved at

den er åben, hvilket betyder at den kan tilpasses og

justeres til de fleste udviklingssituationer og

produkttyper. Desuden anskues alle aktiviteter

undervejs både udfra den produktrettede og den

procesrettede vinkel, hvilket gør metoden

helhedsorienteret.

Der er altså to slags aktiviteter i HOME-modellen:

- Udvikling af selve produktet – herunder

foranalyse, undersøgelse, design og realisering


Side 6

- Ledelse af processen med udviklingsarbejdet –

herunder planlægning, vurdering og regulering.

Ledelsestrinene er selve styringen af vores projekt, og en

nærmere beskrivelse heraf kommer under afsnittet om

udviklingsteamet og dets samarbejde.

De fire trin i udviklingen af selve produktet bliver kort

beskrevet i de følgende afsnit samt hvordan vi tilpasser

og arbejder med de enkelte trin i vores projekt.


Side 7

Foranalyse

Foranalysen skal afdække projektets forudsætninger.

Det skal besluttes hvilken udviklingsmodel, der skal

anvendes til styring og udvikling af projektet, og der skal

laves en interessentanalyse, som danner grundlag for

kommunikation med alle interessenter i projektet.

Resultatet er første udgave af projektbeskrivelsen.

Da vores projekt som førnævnt er ret lille, laver vi den

endelige udgave af projektbeskrivelsen med det samme.

Den kommer til at indeholde korte beskrivelser af hvad

projektet går ud på. Vi laver heller ikke en egentlig

interessent-analyse. Blot beskriver vi kort aktørerne,

vores kunde og hans ønsker samt lidt overvejelser om

målgruppen og markedssituationen.

Projektbeskrivelsen

Vores kunde: Rhythm & Blues

Vores kunde er Sten Mogensen, indehaver af

forretningen Rhythm & Blues beliggende i centrum af

Odense (Gravene 7, 5000 Od. C).

Forretningen er specialiseret indenfor

strengeinstrumenter - der ydes salg og faglig rådgivning

fra butikken samt værksted for reparationer.

Til forretningen er knyttet et website, som pt. fortrinsvis

beskriver butikken, dens sortiment samt Sten

Mogensens bog ”Riber Rock”.

Siden bærer præg af at den er under opbygning, så

mange sider og links virker ikke endnu.

Kundeønsker

Websitet har hidtil ikke fyldt ret meget for Sten

Mogensen, og det er da heller ikke færdigudviklet.

Sten ønsker at vi fastholder logoet fra forsiden samt at

baggrunden skal være lidt lysere. Desuden en mere

enkel menu-struktur, men ellers har vi frie hænder med

hensyn til udseende, funktioner mm.

Udviklingsmodel

Vi læner os mest op af De agile metoder. Metoden er

kendetegnet ved at være hurtig og effektiv uden for

meget dokumentation. Kunden spiller en stor rolle i

denne model, og det vil vores kunde også skulle til at

gøre, hvis hele udviklingsprocessen skulle gennemføres.

Da det er et lille projekt afhængig af en bestemt

tidsfaktor, stopper vi projektet, hvor vi har en version af

vores bud på et website klar til præsentation for kunden.

Hvad vi ikke har anvendt i vores proces er deltagelse af


Side 8

kunden eller dennes repræsentant, så her afviger vi lidt

fra modellen. Men hvis kunden f.eks. ikke er helt tilfreds

med denne udgave, kan vi jo gennemløbe endnu en

iteration (kort forløb gennem alle udviklingsfaserne)

igen.

Metoden er også kendetegnet ved så lidt dokumentation

som muligt – til gengæld er metoden hurtig. Netop da

vores projekt ikke er så omfattende udarbejder vi heller

ikke mere dokumentation, end hvad der er nødvendigt.

Intressentanalyse

De primære intressenter i dette projekt er vores kunde

Sten Mogensen samt udviklingsholdet. Sekundært er

brugerne også intressenter, men da sitet er forholdsvis

enkelt og der er tale om et redesign af eksisterende site,

så inddrages brugeren kun i form af at vi afprøver sitet

på os selv. Det er i øvrigt også relevant nok, da vi har en

garvet gitarspiller på udviklingsholdet.


Side 9

Undersøgelse

I undersøgelsesfasen fastsættes projektudviklingsholdet,

produktideén udvikles, der indsamles viden om

markedet og målgruppen samt der udarbejdes en

detaljeret projektplan.

Udviklingsholdet fastsættes

Udviklingsholdet etableres ved at klassens 9 elever går

sammen i grupper med tre personer i hver. Vores

udviklingsteam kommer således til at bestå af Morten,

Brian og Henriette.

Det viser sig at vi sammen udgør et godt og stærkt team,

med hver vores kompetencer.

Målgruppe og marked

Målgruppen for forretningen og websitet er musikerer i

alle aldre, der spiller på strengeinstrumenter – lige fra

den nystartede amatør til den professionelle musiker.

Specielt for butikken er, at der ikke føres de sædvanlige

metervarer – der satses på produkter og kvalitet for

fineschmakere…

I Odense er R&B den eneste af sin slags, der tilbyder

vintage-instrumenter. Lignende butikker i området

handler udelukkende med nye instrumenter. De har

både en fysisk butik og er specialiseret i net-handel.

En af Steen Mogensens specialer er rådgivning i

forbindelse med køb af instrumenter. Hans største

konkurrent er tilstedeværelsen af fejlkøbte

instrumenter, som kommer ud på markedet som second

hand.

Udvidelse af kundegrundlaget foregår mest som mund-

til-mund metoden.

Produktideén udvikles

Sten Mogensen leverer ikke mere materiale, end det der

i forevejen ligger på nuværende website.

Vi skal selv sørge for evt. nyt billedmateriale.

Vi kender et sted på nettet, hvor vi kan finde et stort

udvalg af gratis billeder (www.sxc.hu). Desuden vil vi på

websitet fremhæve butikkens specialer/nicher –

herunder udvalget af vintage-instrumenter. Derfor vil vi

tage nye billeder af de instrumenter, der pt. er til salg i

butikken. Butik og værksted skal vægtes ligeligt på det

nye website.

http://www.sxc.hu/


Side 10

Vi ønsker også at fastholde den specielle stemning, der

er i butikken – den starter helt ude på gaden med

butiksfacaden:

Når man kommer ind i butikken mærker man tydeligt

den intime hyggelige atmosfære, der er i det lille

butikslokale, med instrumenter fra gulv til loft.

Stemningen og atmosfæren skal så vidt muligt gå igen

på websitet, som vi bl.a. vil opnå ved at bruge billeder af

butiksfacaden samt logoet på det nuværende website

som vist ovenfor. Forsiden skal mache butiksfacadens

tredeling.

Gulvet i butikslokalet er rødt. På mange websites af

samme type som Rhythm & Blues indgår røde nuancer.

Den røde farve går igen i bindingsværket på bygningens

facade og den danner en fin kontrast til det gule logo. Vi

vil derfor bruge den røde gulvfarve som baggrund til

vintage-billederne. Det vil efterfølgende også være nemt

for Sten Mogensen, når der skal tages billeder af nye

instrumenter.

Sten Mogensen har skrevet en bog, som kan købes via

nuværende website – til dette vil vi lave en bestillings-

og betalingsformular.

Desuden vil vi for at fastholde stemningen og

atmosfæren og have historien om Sten Mogensens band

med på websitet.

Samtidig med at vi vil fastholde den specielle stemning,

vil vi også lave et mere logisk opbygget website, med let

tilgang til de forskellige emner. Websitet skal desuden

være let for Sten Mogensen at vedligeholde

efterfølgende.

Projektplan

Projektplanen er ikke relevant i dette projekt. Dels er

projektet ret lille – dels er det et tidsbegrænset forløb i


Side 11

forbindelse med et eksamensprojekt, hvor hovedvægten

lægges på Designtrinnet i HOME-modellen.


Side 12

Design

I designprocessen skal projektplanen hele tiden vurderes

og om nødvendigt tilpasses. Det er også her at ideén

konkretiseres i forhold til websitets indhold, interaktion

og præsentation.

I dette projekt er hovedvægten lagt på HOME-modellens

produktaktiviteter på designtrinnet: Informationsdesign,

Interaktionsdesign og Præsentationsdesign.

Informationsdesign

Processen under informationsdesignet gennemløber

aktiviteterne udvælgelse, briefing og strukturering af

websitets indhold af informationer. De overordnede

emner til sitet udvælges. Dernæst beskrives emnerne

under briefingen og til slut struktureres de i forhold til

hinanden. Resultatet er en samlet informationsstruktur

over den information, der skal formidles til brugeren.

I bilagene ses vores arbejde med informationsstrukturen

i form af oversigten med de gule sedler med

emneoverskrifterne.

Emnerne er udledt af det nuværende website med

tilføjelse af nye relevante emner, som vi mener Sten

Mogensen vil kunne få gavn af at have på det nye site.

Vi startede processen med en brainstorm og en mindmap

med alle de emner, som vi kunne komme i tanke om som

relevante. Samme øvelse har vi lavet med fokus på

layoutet, som vi bruger i præsentationsdesignet.

Dernæst overførte vi emnerne til gule sedler, som vi så

efterhånden fik inddelt og rangordnet. Sideløbende

diskuterede vi også nøje frem og tilbage, hvordan

menuerne bedst kunne opbygges samt hvordan

interaktionen mellem punkterne skulle hænge sammen.

Men alle tre designtrin hænger jo sammen, så det har

vist sig vanskeligt at færdiggør eet designtrin inden der

tages hul på det næste.

I bilagsdelen ses vores indledende brainstorm, mindmap

og de første skitser.

Interaktionsdesign

Måden brugeren skal interagere med vores medie på, er

her ganske simpelt med klik og dropdown-menuer, hvor

man kommer til nye sider. Vi bruger både billeder og

tekstbokse som link-funktion.

Der findes en søgefunktion placeret i menulinien, så der

er adgang til den fra alle sider.


Side 13

Vi foreslå at der laves en kontaktformular, så brugeren

let kan stille og få svar på relevante spørgsmål. På denne

side skal kontaktoplysningerne også fremgå.

Nederst på sitet i footeren findes e-mailadressen som

med et klik aktiverer dit mailprogram.

Navigationsstrukturen er den traditionelle web-struktur,

hvor vi maks. har tre klik frem og et tilbage. Desuden er

der flere indgange til den samme ting, som gør

navigationen let uanset hvor på sitet man er.

Navigationsstrukturen udmøntes i et flowchart –

forløbsdiagram – over vejene rundt på websitet. For at

gøre navigationen let og overskuelig for brugeren, har vi

valgt at lave flere indgange til de samme sider. Det

skulle jo gerne blive et website, som kunderne vender

tilbage til, fordi de kan lide det de ser og oplever på sitet.

Flowchartet for vores site ses i bilaget.

Præsentationsdesign

Præsentationsdesignet dækker over formgivning af

brugergrænsefladen – the look and feel. Der er en række

elementer og virkemidler, som tilsammen bruges til at

danne det ønskede helhedsindtryk. I det følgende

beskrives vores valg af elementer og virkemidler.

Resultatet af præsentationsdesignet er et storyboard,

som skematisk viser de enkelte siders opbygning og

egenskaber – se bilaget.

Designparametre og virkemidler

Form og farve

Det udtryk vi gerne vil have frem i websitet understøttes

af de firkantede kasser, som sitet er bygget op af.

Desuden vil vi gerne have en opdeling af forsiden i tre

kolonner, for at understøtte fornemmelsen af

butiksfacaden, der også er tredelt af en dør og to vinduer.

Opbygningen af sitet er som grundlag ret traditionel

med et topbanner, en topmenu, en sidebar og to

indholdsfelter på forsiden. De underliggende sider er

enten to- eller tredelte afhængig af indholdet.

Den oprindelige webside har en meget mørk baggrund.

Sten Mogensens ønske var at den skulle gøres lidt lysere.

Vi synes at de sorte og mørkegrå nuancer virker meget

”gitar-agtige”, så vi har valgt et wordpresstema, der

kunne opfylde de fleste af vores ønsker. Derfor valgte vi

at arbejde videre med temaet Darkford. For at gøre sitet

lidt lysere, har vi valgt et baggrundsbillede af børstet


Side 14

metal, som vi synes passer godt til de sorte og grå

nuancer i temaet.

Det gule logo fra butiksfacaden ønskede Sten Mogensen

at bevare, så det har vi tegnet og indsat i fotoshop, hvor

resten af topbanner-billedet er udviklet. Som førnævnt

vil vi gengive butikkens stemning bl.a. ved at bruge den

røde farve fra butiksfaceden og butiksgulvet. Den røde

baggrund på topbanneret stammer derfor fra et foto af

en gitar placeret på butiksgulvet. Den røde nuance i

øverste menubar macher topbanneret.

Det valgte tema har som udgangspunkt overskrifter mm.

i en lidt mørkere gul farve, som ganske fint macher det

lidt mere skrigende gule logo. Overskriftfarven dæmper

logoet lidt samtidig med at den frisker op på den mørke

baggrund.

Typografi

Vi synes at temaets standard-typografier passer meget

godt til sitets andre elementer, så dem har vi ikke

ændret på.

Illustrationer

Vi har valgt at bruge billeder og tekst på websitet, fordi

de fint udtrykker de informationer, vi vil sende til

brugeren. De er i øvrigt meget traditionelle – og et af

vores ønsker til sitets udstyk er netop seriøsitet.

Lyd og Animationer

Vi har valgt ikke at bruge lydeffekter og animationer. Vi

kan ikke være sikre på hvilke oplevelser, brugeren reelt

sidder med, når de afspiller lyden på egen computer.

Tekniske begrænsninger kan forvrænge den originale

lyd, så man får et forkert indtryk af instrumentet.

Animationer kan hurtigt give websitet et useriøst look og

virke irriterende og forstyrrende.

Video er et element, som vi vil anbefale i den fremtidige

udvikling af websitet, da de kan tilføre nye oplevelser og

videregive oplysningerne til brugeren på en ny

inspirerende måde. Desuden kan man med video

videregive informationer, som man kun vanskeligt kan

illustrere med billeder. Eksempelvis demonstration af

effektpedaler, hvor lyden jo også indgår som element,

men hvor man bliver opmærksom på produktets

spændvidde.

Kontraster

Det gule logo og den røde farve giver en fin kontrast til

de mørkenuancer, vi har valgt at bruge på sitet.


Side 15

I topbanneret har vi også valgt at give en kontrast til de

firkantede bokse, ved at bruge de buede kurver på en

gitar.

AIDA

AIDA-modellen beskriver forløbet i en

kommunikationsprocess for et givent produkt – i dette

tilfælde websitet for Rhythm & Blues.

Attention: Den første opmærksomhed hos kunden skabes

ved, at kunden har en vis interesse for

strengeinstrumenter, så man vej rundt finder frem til

vores website.

Interest: Interessen for at blive på websitet og kigge

videre på de næste sider skabes ved, at forsiden skaber

blikfang – især via topbanneret. Selve logoét er placeret

ca. der hvor øjet først kigger på den øverste del til

venstre.

Demand: Ønsket om at erhverve nogle varer fra

butikken eller om at besøge butikken skabes ved, at vi

gengiver den hyggelige stemning fra stedet. Desuden har

vi forsøgt at gøre sitet så let tilgængeligt som muligt ved

at vise hele menustrukturen i den venstre boks. Så har

man nærmest direkte afgang til de underliggende sider.

Desuden har vi placeret sitets søgefunktion centralt på

siden.

Action: Til slut skal kunden helst reagere ved at tage

kontakt til Sten Mogensen eller ved et fysisk besøg i

butikken.


Side 16

Realisering

Designet integreres i Wordpress

Websitet er integreret i Wordpresstemaet Darkford.

Wordpress er valgt fordi Sten Mogensen selv skal kunne

administrere og vedligeholde websitet efterfølgende uden

at han nødvendigvis skal have kendskab til de

bagvedliggende HTML-, PHP- og CSS-koder.

Det færdige website

Vi har lavet den første version af websitet, som vi tror at

Sten Mogensen vil kunne lide. Udviklingen af websitet

stopper i første omgang her. Næste step er eksamen.

Hvis Sten Mogensen efterfølgende ønsker at gøre brug af

netop vores website, skal der ske en videreudvikling,

indtil han er tilfreds med resultatet, som beskrevet i

afsnittet om Udviklingsmodel.

Skelet og Designmanual ses i bilaget.

Websitets videre udvikiling

Hvis Sten Mogensen ønsker at benytte vores idé til

website forestiller vi os, at en videreudvikling af det

kunne omfatte følgende:

- En egentlig blog/diskussionsforum for eksperter og

andre interesserede.

- Internethandel/Bestillingsformular

- Alle de manglende sider, som vi ifølge

Projektoplægget ikke skulle lave, skal udarbejdes.

Opbygningsmæssigt skal de ligne de sider, som vi

har lavet.

- Forsidens højre kolonne skal bruges til noget for

kunden spændende/interessant – men det må Sten

Mogensen være med til at tage beslutning om

- Sidestrukturen i venstre boks behøver ikke at

være åbnet op – den bør laves så det kun er

hovedpunkterne, der umiddelbart ses. Så kan

kunden selv udvælge de emner, der er

interessante for ham/hende.


Side 17

Kontaktoplysninger

Henriette Nielsen

E-mail: [email protected]

Link til websitet

http://phpkursus.tietgen.dk/3811/Brian/wp/wordpress/

Udviklingsteamet og dets samarbejde

Udviklingsteamet har bestået af Brian Mortensen,

Morten Schärfe og Henriette Nielsen. Generelt har vores

samarbejde fungeret fint, og vi har suppleret hinanden

fint med hver vores kompetencer.

Vi har mødtes et par gange om ugen på hhv.

Erhvervsakademiet og på en café i Svendborg.

I meget af projektet har vi arbejdet sammen alle tre, så

det er mest selve rapportskrivningen, vi har kunne lave

hver for sig.

Konklusion

Generelt har det været en god øvelse at udvikle et

website udfra en bestemt model. Det har i vores tilfælde

vist os, at det er vigtigt at kunne vende tilbage til

tidligere trin i udviklingsprocessen, når noget har vist

sig ikke at være godt nok i første omgang. Det er jo netop

muligt, når vi er et lille udviklingshold og projektet er

enkelt.

Således har vi lavet de første idéudkast på papir, og

resten har vi udviklet direkte i det tema, der passede

bedst til vores ønskede opbygning.

Ligeledes har vi afprøvet forskellige idéer, hvoraf vi har

udvalgt dem, der fungerede bedst.

Vi har også måtte erfare, at det bestemt ikke er alle

wordpresstemaer, der er lige lette at arbejde med, og det

er meget forskelligt, hvilke redigeringsmuligheder, der

er.

Når billeder, tekst og andre elementer er klar, så er det

selve tilpasningen af temaet, der tager lang tid. Og især

det at lokalisere de enkelte elementer i temaet, og finde

ud af navngivningen.

Alt i alt har det været et spændende forløb, der har

været meget lærerigt. Det har også vist os, hvad der er

mailto:[email protected]

http://phpkursus.tietgen.dk/3811/Brian/wp/wordpress/


Side 18

vigtigt at fokusere på, hvis vi efterfølgende selv skal

arbejde og udvikle websider for andre kunder.

Vi vurderer at vores website umiddelbart opfylder de

fleste af Sten Mogensens ønsker, og vi er selv tilfredse

med resultatet.Vi startede med at lave en tidsplan for

det samlede projekt – vi planlagde at bruge 74 timer –

det endte med 71,3 timer, så det macher meget godt med

det forventede.


Side 19

Kilder

Materiale udleveret i forbindelse med undervisningen

2 besøg hos Rhythm & Blues

Oprindelige website for Rhythm & Blues

Bøger

- ”Markedsføring mod år 2000” af Ole Hvidt m.fl.,

Forlaget FUHU

- ”Digital Media Management” af Louise Harder

Fischer, Marie Oosterbaan m.fl.

Wordpres med temaet Darkford (findes på følgende

adresse:

http://www.magpress.com/wordpress-

themes/darkford.html

http://www.magpress.com/wordpress-themes/darkford.html

http://www.magpress.com/wordpress-themes/darkford.html

website for rhytm og blues

Documents

bilag site for rhythm

bilag ite for rhythm

frdige website

bilag brian mortensen

indhold forside

indledning projektet

morten schrfe

websitets videre udvikiling