website til risskov fysioterapi
DESCRIPTION
Multimedieteknologi og interaktionsdesign, 2011TRANSCRIPT
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: [email protected]
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
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