Marts 2011 Projektrapport og website udarbejdet af

Peter Rønn Jensen Abdolrahman Rezazadeh Laura Skriver Sidsel Bjerregaard Ole Munk Petersen

Website til RISSKOV FYSIOTERAPI

Multimedieteknologi og interaktionsdesign

2 / 25

Indholdsfortegnelse

Indholdsfortegnelse 2 Indledning 3

Hvad er vores opgave 3 Hvem er vi? 3 Det færdige website 4 Teori og metode 5 Foranalyse 7

Undersøgelse 8 Kunden 8 Målgruppe 8 Projektbeskrivelse 9

Design 10 Informationsdesign og interaktionsdesign 10 Præsentationsdesign 11

Realisering 14 Samarbejdet 15 Afslutning 15 Bilag 1. Tidsplan 16 Bilag 2. Mindmap 17 Bilag 3. Skitser 18 Bilag 4. Flowchart 20 Bilag 5. Skelet 21 Bilag 6. Designmanual 22 Bilag 7. Storyboards 23 Bilag 8. Udkast til logo 25

3 / 25

Indledning Denne rapport er udarbejdet som en del af vort afsluttende eksamensprojekt på kurset

”Multimedieteknologi og interaktionsdesign”, som forløb i perioden 3. februar til 23. marts 2011 på

Erhvervsakademi Århus / Århus Tech. Rapporten beskriver tilblivelsen af et nyt website for kunden,

Risskov Fysioterapi.

Hvad er vores opgave

Opgaven består i at udarbejde et nyt website for Risskov Fysioterapi, der i forhold til sin nuværende

hjemmeside, ønsker et mere tidssvarende site bl.a. med opdaterede billeder i god kvalitet. Sitet skal

være overskueligt og nemt at navigere i, samt give potentielle og nuværende patienter lyst til at

kontakte klinikken for behandling. Websitet skal implementeres i WordPress og bygge på HOME-

modellen.

Hvem er vi?

Vores gruppe består af fem medlemmer: Sidsel Bjerregaard, Ole Munk Petersen, Peter Rønn Jensen,

Abdolrahman Rezazadeh og Laura Skriver. Vi har tilstræbt, at alle i gruppen tager del i de forskellige

4 / 25

faser i opgaven - dog har vi ud fra vores individuelle spidskompetencer foretaget en ansvarsfordeling,

der fordeler fokus som følger:

• Sidsel Bjerregaard: Udarbejdelse af forslag til logo.

• Ole Munk Petersen: Projektleder. Teknisk opsætning af sitet. Diagramtegninger. Rapportlayout.

• Peter Rønn Jensen: Illustrationer herunder arbejde med Photoshop, billeder og tegninger.

• Abdolrahman Rezazadeh: PHP, formater samt animation.

• Laura Skriver: Layout af sitet samt udarbejdelse af projektrapportens skriftlige del.

Det færdige website Vores færdige website kan besøges på følgende adresse:

http://multimediekursus.ats.dk/0511/risfys6/wp/

Login: admin/risfys6

Kontaktperson for eventuelt videre arbejde med websitet:

Abdolrahman Rezazadeh

Rydevænget 19,2,th

8210 Aarhus V

email: rahman@stofanet.dk

tlf.: 22933810

5 / 25

Teori og metode

Som nævnt udarbejder vi vort projekt med HOME-modellen (Holistic, Open Multimedia development

mEthod) som grundlæggende metode. HOME-modellen tilbyder et helhedsorienteret syn på opgaven,

idet den både anlægger en produkt- og procesrettet vinkel. Formålet med metoden er netop at sætte

arbejdet i system og den hjælper os derved til at gøre vore valg sammenhængende, velovervejede og

konsekvente i forhold til opgaven. Modellen indeholder fire trin, som har styret vores arbejdsproces.

Disse trin har vi endvidere valgt at lade danne grundlaget for struktureringen af denne rapport. De fire

trin er som følger:

• Foranalyse: Indledende definitioner af processen og produktet, valg af udviklingsmetode,

interessentanalyse og projektbeskrivelse.

• Undersøgelse: Udformning af projektplanen, kommunikationsplanlægning, research og

ideudvikling

• Design: Vurdering og regulering af projektplanen, design af indhold, struktur og form.

• Realisering: Opstramning af planer, produktion og integration af medieelementer, evaluering og

projektafslutning.

6 / 25

Vi har valgt at tilrettelægge arbejdet i overensstemmelse med ”Vandfaldsmetoden”, der kendetegner en

lineær og faseopdelt udviklingsproces med vægt på løbende godkendelser og dokumentation.

Rent teknisk udformes sitet ved hjælp af et WordPress-tema, som vi tilretter efter vore egne

designmæssige ønsker.

7 / 25

Foranalyse Projektet indledtes med en fælles briefing om kravene til opgavens indhold, både i forhold til website

og projektrapport, samt med et kundemøde. Mødet med kunden klargjorde dennes forventninger og

ønsker og lod os få et indblik i virksomheden som helhed.

Da vi opgavens primære forudsætninger således var klargjort, samledes vi i gruppen og foretog en

fælles analyse af kundens nuværende website og fik herved en diskussion i gang omkring, hvad vi

ønskede skulle være anderledes og hvilket udtryk vi mente passede til sitet i forhold til selve

virksomheden og det signal kunden ønsker at sende. Vi foretog en brainstorm i forhold til indhold og

layout og udformede herudfra et mindmap (se bilag 2).

Da vi havde et nogenlunde overblik over den forventede arbejdsproces udarbejdede vi endvidere en

tidsplan (se bilag 1).

8 / 25

Undersøgelse I denne del af processen indsamlede vi yderligere viden omkring afsender, målgruppe og målsætning

og udformede herigennem en mere præcis projektbeskrivelse.

Kunden

Som nævnt er Risskov Fysioterapis primære ønske med det nye website, at dette skal være mere

overskueligt og lettere at navigere i. Derudover gav kunden under mødet udtryk for at vægte sin

historie højt og at være en velrenommeret klinik, der i høj grad hverver patienter gennem mund-til-

mund-metoden. Af samme grund er kundens primære hensigt med sitet ikke at hverve nye patienter,

men i højere grad at fungere som oplysningsportal og bindeled mellem klinik og patienter. Desuden gav

kunden til kende, at man gerne ville sende det signal at klinikken har en god og afslappet atmosfære,

samt at behandlingen foretages af kompetente fysioterapeuter. Hvordan dette signal skulle komme til

udtryk på sitet, fik vi frie hænder til at beslutte.

Målgruppe

Ifølge kunden er målgruppen alle mellem 0 og 98 år. Målgruppen besøger primært sitet for at finde

oplysninger og opnå kontakt med klinikken, fordi de har et behov for behandling, og kun sekundært af

9 / 25

interesse for virksomheden som sådan. Sitets vigtigste mål er derfor at tilbyde den besøgende patient

mulighed for oplysning om og kontakt med klinikken på så præcis og konkret vis som muligt.

Projektbeskrivelse

Undersøgelsesprocessen ledte os således frem til følgende projektbeskrivelse:

Vi skal lave et website for Risskov Fysioterapi udarbejdet i WordPress. Sitet skal være overskueligt og let at

navigere i og give patienten indtrykket af en klinik der tilbyder kompetent behandling i en behagelig og

afslappet atmosfære. Dette indtryk vil vi efterstræbe at opnå ved at holde en enkel og let stil – både i

forhold til layout og indhold. Endvidere vil vi efterstræbe at skabe nærhed i udtrykket, ved i højere grad

end det nuværende site, at personliggøre indholdet i forhold til dets afsender. Frem for alt, vil vi sørge for

at det tydeligt fremgår hvor og hvordan man kan komme i kontakt med klinikken og hvilke former for

behandling, der tilbydes.

10 / 25

Design Den røde tråd i projektet har været enkelthed, overskuelighed og brugervenlighed, hvilket afspejler

sig i de valg vi har foretaget.

Informationsdesign og interaktionsdesign

Som nævnt skal sitet fungere som oplysningsportal og bindeled mellem patient og klinik. Mængden af

informationer, har vi dog valgt at begrænse til det mest væsentlige for overskuelighedens og

læsbarhedens skyld. Den begrænsede mængde tekst muliggør, at vi undgår scroll-bars og kan have alle

informationer i ét vindue ad gangen. Ligeledes har vi valgt ikke at lave en links-side – igen for

overskuelighedens skyld – men i stedet at placere relevante links på de sider, hvor de naturligt hører

hjemme. Eksempelvis findes et link til Google Maps under menuen ”Find os”. Linket til Google Maps

indeholder automatisk klinikkens adresse og viser derfor straks det aktuelle område med relevante

oplysninger. På ”Find os”-siden findes også et link til rejseplanen, hvor patienten blot indtaster sin egen

adresse for at få foreslået transportmuligheder. På alle sitets sider optræder klinikkens adresse og

telefonnummer endvidere i footeren. Vi har således søgt at gøre det nemt og overskueligt at finde

klinikken og at komme i kontakt med denne. Under menuen ”Kontakt os” har patienten endvidere

mulighed for at kontakte klinikken direkte med spørgsmål, afbud og lignende.

11 / 25

I bestræbelsen på at gøre siden så let at navigere i som muligt, lader vi desuden menu-baren være

synlig uanset hvilken side man befinder sig på, så man nemt kan bevæge sig frem og tilbage. Vi har valgt

ikke at benytte drop-down-menuer, men i stedet at lade eventuelle underpunkter optræde som links på

de relevante sider, da vi finder dette mindre forstyrrende.

Præsentationsdesign

Som nævnt ønsker kunden et brugervenligt og overskueligt site, der er nemt at manøvrere i. Dette

søger vi at afspejle layoutmæssigt, idet vi har efterstræbt lethed og enkelthed i designet. Forsiden har vi

opbygget som følger (se bilag 7. Storyboards): Øverst findes en header indeholdende logo og billede.

Under headeren har vi valgt at placere menu-baren horisontalt, da vi mener at dette giver siden mere

luft og overskuelighed. Menu-baren indeholder links til sitets syv sider: (Hjem, forsiden), Klinikken, Vi

udfører, Priser, Nyheder, Find os og Kontakt (Se bilag 4. Flowchart)

Under menu-baren findes et tekststykke, der byder den besøgende velkommen og kort præsenterer

klinikken. Herunder befinder den informative footer sig og således indrammes teksten af header/menu

og footer for oven og for neden og af en gradient i siderne. Denne struktur går igen på alle sider på sitet,

idet header, menubar og footer er ens hvor end man befinder sig på sitet.

12 / 25

Vi har bevidst søgt at undgå det kantede og skabe runde og bløde former. Menu-linjen, menu-

knapperne og andre elementer med hjørner der derfor afrundede. Dette har vi gjort, da vi mener at

runde former i højere grad end kantede, signalerer velbehag og afslappethed.

Farvemæssigt har vi også søgt at underbygge klinikkens afslappede atmosfære, ved at holde siden i

rolige, dæmpede farver. Selve baggrunden har vi holdt i en lys blå farve, der er gradueret, sådan at den

er mørkest i siderne og lysest i midten. Da vi ikke har nogen bokse i siderne, hjælper dette os med at

skabe ”hold” på siderne, hvor header og footer skaber rammen om top og bund. Menu-bar og footer er

holdt i en lys grøn farve, der ligeledes er gradueret. (Se Designmanual, bilag 6). Dette giver, i

sammenhæng med elementernes runde former, siden et blødt og behageligt udtryk.

Gennem brug af illustrationer søger vi at styrke følelsen af nærhed, at fremstille de arbejdende

fysioterapeuter som kompetente, samt at underbygge indtrykket af klinikkens afslappede atmosfære.

På undersiden ”Klinikken” viser vi eksempelvis billeder fra klinikken og af forskellige

behandlingssituationer i tillæg til billeder af hver af de ansatte. I stedet for at lave et traditionelt

billedgalleri med billeder fra klinikken, har vi valgt at lave et slideshow, så et antal billeder fader ind og

ud efter hinanden. Begrundelsen er, at et galleri med thumbnails og et stort billede med mulighed for at

klikke næste og forrige, ofte virker forstyrrende og så fylder det meget på vores forholdsvis lille side.

Ydermere har vi valgt at anvende små illustrative skitser af ”hænder i arbejde” forskellige steder på

sitet. I headeren har vi desuden valgt at placere et billede af Risskov Strand, der tjener som baggrund

13 / 25

for et fællesbillede af de ansatte fysioterapeuter. Formålet med dette er netop at markere

tilhørsforholdet til lokalområdet. I forhold til logoet, som også optræder i headeren, valgte vi at bevare

det oprindelige logo, da det har en tilknytning til klinikkens historie og har fulgt klinikken gennem alle

årene. Dog modificerede vi det en smule, ved at flytte rundt på elementerne og forstørre det. Efter

kundens ønske lod vi endvidere det autoriserede fysioterapeut-logo optræde på forsiden. Dette

markerer tillige, at man på klinikken udfører et stykke kvalificeret arbejde.

Da målgruppen er så bred, skal teksten formuleres i et sprog, der er klart og forståeligt for alle. Af

samme grund, har vi valgt at benytte skrifttypen Verdana, da denne er letlæselig og da vi synes den

matcher vores design godt. Både overskrifter og brødtekst holdes i denne skrifttype. Menu, footer og

brødtekst har vi valgt at holde i størrelse 12 px, mens overskrifterne holdes i størrelse 14px.

Selve formatet af siden fremgår af bilag 5. Skelet, hvor alle mål er angivet.

14 / 25

Realisering Opgaven tilskriver, som nævnt, at vi benytter CMS-systemet WordPress, som er et blog-system, der dog

også kan vise statiske sider med dynamisk indhold. Layoutet dannes af et tema, der kan udskiftes og

tilrettes. Vi lagde dog entusiastisk ud med at opbygge et tema fra grunden. Det var nemt at kode

statiske sider i HTML og CSS, men når der skulle tilføjes dynamisk indhold – altså indhold, hvor kunden

selv kan ændre på sitet – var kodningen mere kompliceret, hvorfor vi i stedet valgte at tilrette et

færdigt tema. Vi prøvede os frem med flere forskellige temaer, men på grund af vores enkle design,

skød de alle ret langt over målet, hvilket betød en del tilretning for at få det ønskede design frem. Vi

prøvede derfor et par temageneratorer, som var lækre at bruge, men ikke kunne opfylde vores design

uden efterfølgende tilretninger, så vi endte med at bruge Starkers Theme, der er et tomt tema baseret

på default temaet Twenty Ten. Ved hjælp af HTML, CSS og PHP fik vi således sammenstykket det

ønskede tema.

På grund af vores enkle design har vi ikke lavet Templates, men til gengæld installeret et par Plugins.

Bl.a. et der gør det muligt at lave tabeller, som gør det nemmere for kunden at ændre priserne på

Priser-siden.

Efter indtastning af indhold på siderne testede vi sitet i forskellige browsere og så små, men

ubetydelige forskelle.

15 / 25

Samarbejdet

Alt i alt synes vi at arbejdsprocessen er forløbet rigtig godt. Der har været stor enighed i gruppen og vi

har været åbne og lydhøre over for hinanden. Vi har været villige til at hjælpe hinanden og vi har alle

været meget engagerede i projektet.

Afslutning

Resultatet er også efter vores mening blevet et godt og overskueligt site, der svaret til kundens ønsker.

16 / 25

Bilag 1. Tidsplan

P FForanalyse

Kundebesøg 1 1 1 1Tidsplan 1 0,5 1 0,5Projektbeskrivelse

Produktdefinitionoplæg, målgruppe… 2 2 2 2

Procesdefinitionudviklingsmetode, organisering… 2 2 2 2

UndersøgelseIdéudvikling

Brainstorm - logomindmapping 0,5 0,5 0,5 0,5

Brainstorm - Websitemindmapping 1 1 1 1

Udarbejdelse af skitser 2 2 2 2Design

InformationsdesignValg af skitse 0,5 0,5 0,5 0,5Uddybning af skitse 0,5 0,5 0,5 0,5

de 4 designparametre 0,5 0,5 0,5 0,5grafiske virkemidler 0,5 0,5 0,5 0,5

InteraktionsdesignFlowchart 3 2 3 2

PræsentationsdesignStoryboards 3 4 3 4Designmanual 1 0,5 1 0,5

skrifter, farver, illustrationerRealisering

Installering af WordPress 1 1 1 1Valg, installering og tilretning af tema 6 10 6 10Valg, installering og tilretning af plugins 0,5 4 0,5 4Opbygning af siderne 3 6 3 6Billedbehandling 4 6 4 6Indsættelse af indhold

tekst, billeder 5 8 5 5 10 13Kundebesøg 1 0,5 1 0,5Tilretning efter feedback 2 3 2 3

Projektrapport 4 3 4 3 4 3 4 4 2 16 15IndholdsfortegnelseHOME-metoden osv.

Tekst incl. tegninger etc.LitteraturlisteEvaluering af gruppens samarbejde…

…forløb og resultatBilag

TidsplanMindmapsFlowchartSkeletDesignmanualStoryboardsUdkast til logoerSkitser til forsidenStil og stemning: kollage

Korrekturlæsning 1 2 1 2Aflevering

Upload 1 0,5 1 0,5Udskrivning 1 1 1 1

65 80

I altMandag14-03-11

Tirsdag15-03-11

Onsdag16-03-11

Torsdag17-03-11

FredagOnsdag09-03-11

Torsdag10-03-11 18-03-11

Fredag11-03-11

17 / 25

Bilag 2. Mindmap

18 / 25

Bilag 3. Skitser

19 / 25

20 / 25

Bilag 4. Flowchart

Velkommen

Klinikken Vi udfører Priser Nyheder Find os Kontakt os

Google Maps

Midttrafik

Rejseplanen

E-mail

21 / 25

Bilag 5. Skelet

900px

110px

39px

30px

25pxFooter

Header

Menu

Main 400px

20px

20px

22px4px

4px

1px40px 820px

Wrapper

Sidebar

22 / 25

Bilag 6. Designmanual

Typografi Overskrift: Verdana 14px, sort #000000, normal Brødtekst: Verdana 12px, sort #000000, normal Menu og footer: Verdana 12px, sort #000000, fed Menu ved hover: Verdana 12px, hvid #FFFFFF, fed Farver Body: Blålig #80B2CE (RGB 128,178,206) i siderne vandret gradueret til næsten hvid

#F4FDFF (RGB 244,253,255) i midten Progressiv graduering så den blå farve først bliver kraftigere ud mod kanten Menu og footer: Grønlig #92C638 (RGB 146,198,56) i midten lodret, lineært gradueret op og

ned til hvid #FFFFFF (RGB 255,255,255) Menu ved hover: Blålig #80B2CE (RGB 128,178,206) i midten lodret, lineært gradueret op og

ned til hvid #FFFFFF (RGB 255,255,255) i top og bund

23 / 25

Bilag 7. Storyboards

Web-side: Nedenstående er generelt for alle siderne på web-sitet, da siderne er meget ens i opbygningen. Sidernes indhold er uddybet under de enkelte sider.

Faste elementer

1. Header: header.png 2. Menu: menu-link.jpg hhv. menu-hover.jpg gentaget horisontalt i hele sidens bredde. 3. Body: body.jpg gentaget vertikalt i området mellem menu (2) og footer (4). Se de næste

sider angående indhold 4. Footer: footer.jpg. gentaget horisontalt i hele sidens bredde

Fonte

• Overskrifter Verdana 14px sort #000000 • Brødtekst Verdana 12px sort #000000 linjehøjde 1,5 em • Tekst i menu og footer Verdana 12px • Links (ikke menu) Verdana 12px og standardfarver

Navigation

• Rammen om menu-knapperne 1px solid sort #000000 • Tekst ved Link og Visited sort #000000 • Tekst ved Hover hvid #FFFFFF

Det er muligt at komme til alle sider fra alle sider på web-sitet.

4

1

2

3

24 / 25

På de fleste sider er der benyttet en tabel i WordPress’s Visual-editor for at opdele indholdsområdet Body. Der er lavet skabeloner for at lette arbejdet med opbygningen af tabellerne. En spalte tekst eventuelt flankeret af tegninger og billeder:

To spalter tekst til teksttunge sider uden tegninger og billeder:

Bredden af kolonnerne er angivet på tegningen, højden regulerer sig efter behov. De smalle kolonner er sat til Center i både horisontal og vertikal justering, mens tekst kolonnen / kolonnerne er sat til Left i horisontal og Top i vertikal justering. Det er nemt i editoren at tilføje rækker over eller under tabellen. For at skabe lodret mellemrum uden at skulle indsætte HTML-koder bruger vi et transparent billede på 20 x 20px i en celle i den relevante række.

150px 150px

820px

440px 40px40px

30px 30px

820px

20px370px 370px

25 / 25

Bilag 8. Udkast til logo