23
Højt til loftet - Redesign af Skt. Clemens Drengekors hjemmeside Multimedieteknologi og interaktionsdesign Hold: 1811 Underviser: Per Rasmussen Afleveringsdato: 10. juni 2011 Den færdige hjemmesides adresse: http://multimediekursus.ats.dk/1811/anette/wp/ Anette Wiklund Finn Knudsen Morten Bindesbøll

Højt til loftet

Embed Size (px)

DESCRIPTION

Opgave fra Anette, Finn og Morten

Citation preview

Page 1: Højt til loftet

Højt til loftet

- Redesign af Skt. Clemens Drengekors hjemmeside

Multimedieteknologi og interaktionsdesign

Hold: 1811

Underviser: Per Rasmussen

Afleveringsdato: 10. juni 2011

Den færdige hjemmesides adresse: http://multimediekursus.ats.dk/1811/anette/wp/

Anette Wiklund

Finn Knudsen

Morten Bindesbøll

Page 2: Højt til loftet

Højt til loftet- Redesign af Skt. Clemens Drengekors hjemmeside

http://multimediekursus.ats.dk/1811/anette/wp/ Side 2

INDLEDNING 3

FORANALYSE 3

UNDERSØGELSESTRINNET 4

DESIGNTRINNET 5

INDHOLDSSTRUKTUREN 5

DESIGNPARAMETRE 7

AIDA 9

REALISERINGSTRINNET 10

KONKLUSION 10

BILAG 1: PROJEKTBESKRIVELSE 12

BILAG 2: PROCESDOKUMENTATION 13

BILAG 3: KONCEPTBESKRIVELSE 14

BILAG 4: KOMMUNIKATIONSPLAN 15

BILAG 5: TIDSPLAN 16

BILAG 6: FLOWCHART 17

BILAG 7: STORYBOARDS MED INDHOLDSSKELET 18

BILAG 8: DESIGNMANUAL 23

Page 3: Højt til loftet

Højt til loftet- Redesign af Skt. Clemens Drengekors hjemmeside

http://multimediekursus.ats.dk/1811/anette/wp/ Side 3

Indledning

Formål med denne opgave er at beskrive udviklings- og fremgangsprocessen for vores

bud på et redesign af Skt. Clemens Drengekors hjemmeside. Opgaven har til hensigt at

være bindeleddet mellem redesignet og hvilke processer og overvejelser, der har skabt

grundlaget for vores forslag. Projektets formål, motivation og målsætninger samt

tidsplan og organisering er uddybet mere detaljeret i foranalysens projektbeskrivelse

(bilag 1).

Udviklingsarbejdet i projektet har fulgt en komplimenterende sammenkobling af

vandfaldsmetoden og prototyping. Vi har anvendt den lineære og faseopdelte

udviklingsproces fra vandfaldsmetoden til succesfyldt at sikre og kontrollere et naturligt

flow i udarbejdelsen af vores færdige dokumenter. Undervejs i vores projekt har vi

ligeledes gjort brug af den iterative udvikling i prototyping. Paradigmet har været

særdeles anvendeligt, da vi har afprøvet forskellige muligheder i WordPress og igennem

en udviklingsproces har implementeret de bedste funktioner på hjemmesiden.

Som metodisk værktøj har vi valgt at benytte grundelementerne af den holistiske

helhedsorienterede HOME-model. Modellen er anvendelig fordi den er åben og yder

mulighed for at situationstilpasse aktiviteterne i foranalyse, undersøgelses-, design- og

realiseringstrinnene, så den passer til vores projekt. Hermed vil denne opgave naturligt

falde i fire afsnit, der hver tager hånd om proces- og produktniveauerne i hvert trin.

Opgaven afrundes herefter med en konklusion, der sammentrækker trådene fra hele

projektprocessen.

Foranalyse

Foranalysen har til formål at afdække projektets forudsætninger og er således et yderst

vigtigt trin, da det er her projektets fundament i form af mål og kurs fastlægges.

Foranalysen er specielt vigtigt i vores projekt, da vores produktniveau indeholder en

projektbeskrivelse, der har været vigtig for vores overblik og retning af projektet.

Indholdet i dette projekt er et redesign af en eksisterende hjemmeside og derfor tog

vores projekt et naturligt udgangspunkt i procesniveauet med informationsindsamling

om Skt. Clemens drengekor, hvorefter vi holdte et samlet ”kundemøde” med

repræsentanter fra koret. Fra vores synspunkt var mødet rettet mod en behovsafdækning

og identificering af ønsker til layout og funktionalitet. Vi fandt hurtigt frem til ønsket

Page 4: Højt til loftet

Højt til loftet- Redesign af Skt. Clemens Drengekors hjemmeside

http://multimediekursus.ats.dk/1811/anette/wp/ Side 4

om et spændende og funktionelt site, hvis hovedbudskab skulle være at tiltrække flere

medlemmer til koret. Ellers var projektet rimeligt ”frit”, dog skal sitet være korets ansigt

udadtil og dermed afspejle den daglige omgangstone og jargon.

Med de indhentede informationer var det muligt at definere projektbeskrivelsen, der

agerer rettesnor for resten af projektet (se bilag 1).

Undersøgelsestrinnet

Med vores definerede projektbeskrivelse tog vi hul på næste fase og

undersøgelsestrinnet. På dette trin bevægede vi os ind på, hvad vi gerne vil med

projektet. Da vores gruppe var sammensat på forhånd, startede vi på produktniveauet

med idéudvikling.

Selve idéudviklingen tog afsæt i vores kendskab til koret sammen med materiale, vi

havde til rådighed. Vi tog de centrale kendetegn og buzz-words fra kundemødet og

sammenholdte det med vores udleverede billedmateriale. Det var vigtigt for os at

kanalisere ideen igennem korets målsætning og hjemmesidens budskab, nemlig at

tiltrække nye medlemmer. Samtidigt skulle ideen danne fundamentet for design og

realisering.

Til vores idéudviklingsproces antog vi et miks mellem almindelig brainstorming,

mindmapping og koncepttest med familie og venner. Vi lavede en planche med vores

buzz-words fra kundemødet og gennemgik billedmaterialet. Billedmaterialet var meget

centralt, da vi ønskede at spille på visuelle effekter for at appellere til målgruppen. Med

vores planche på bordet og et slideshow af billeder som inspirationskilde nedskrev vi

alle ideer og associationer (se bilag 2). Det viste sig hurtigt, at billederne skabte

rammerne om ideerne, som en levende interaktiv forside med overskuelige sætninger og

buzz-words med slideshow og andre visuelle effekter, der skulle give brugeren lyst til at

læse videre i de enkelte menupunkter. Dermed skulle forsiden være den feminine

appetitvækker, der spiller på følelser, hvorefter man i menuerne kunne søge yderligere

information. Denne idé blev hovedsageligt skabt på baggrund af målgruppen, som må

forventes at blive tiltrukket af interaktion, glæde og farver. Som kvalitetstest af vores

ideer koncepttestede vi det med familie og venner og kom den efterfølgende dag frem til

den endelige idé:

Page 5: Højt til loftet

Højt til loftet- Redesign af Skt. Clemens Drengekors hjemmeside

http://multimediekursus.ats.dk/1811/anette/wp/ Side 5

Et levende lyst site med visuel interaktion i form af slideshow med buzz-words, der

appellerer til målgruppen. Det visuelle siger mere end ord.

Med vores formulerede idé og projektbeskrivelse var vi i stand til at udvikle vores

konceptbeskrivelse (se bilag 3).

For at fuldende undersøgelsestrinnet var det vigtigt for os at få lavet en

kommunikationsplanlægningsplan, hvor vi definerede, hvad vi vil kommunikere og til

hvem. Yderligere at få afsat en klar afsender og et tydeligt formål med hjemmesiden. På

den måde sikrede vi at få indfanget alt relevant information og præsenteret det på en

brugervenlig facon til målgruppen. Se bilag 4 for projektets kommunikationsplan.

Designtrinnet

Designtrinnet udspillede sig noget anderledes end de foregående to trin. Fordi vi havde

valgt at lade vores udviklingsarbejde være styret af både vandfaldsmetoden og

prototyping, har vi i de foregående trin arbejdet meget slavisk, hvorimod vi i

designfasen arbejdede mere kreativt og prøvede os frem med forskellige grafiske

muligheder og interaktioner. Derfor oplevede vi også overlap imellem design- og

realiseringstrinnet. Men det var bestemt ikke en ulempe. Tværtimod gav det os

muligheder til at realisere vores muligheder ud fra et afprøvende innovativt designtrin.

Dette resulterede i en afprøvende adfærd, som vil være meget svært at beskrive

detaljeret i nedenstående og derfor har vi valgt at skematisere designtrinnet i

indholdsstruktur, designparametre og AIDA-modellen. Det skal understreges, at

designtrinnet ikke har fokuseret på hjemmesidens faglige indhold, men i stedet

fokuseret på et redesign og en mere appetitvækkende version af den oprindelige.

Indholdsstrukturen

I forhold til den gamle hjemmeside har vi samlet informationen under nye og mere

sigende menupunkter. Disse nye menupunkter er:

Hjem: Dette er forsiden med et slideshow indeholdende buzz-words og en mindre tekst,

der formidler hjemmesidens budskab.

Page 6: Højt til loftet

Højt til loftet- Redesign af Skt. Clemens Drengekors hjemmeside

http://multimediekursus.ats.dk/1811/anette/wp/ Side 6

Om os: Indeholder en drop-down menu med følgende undersider: Historie, Bestyrelsen,

Vedtægter og Støt os. Alle disse undersider indeholder den mere tunge information,

som især er målrettet mod drengenes forældre.

Vi diskuterede om siden ”Støt os” skulle op på hovedmenuen, men da det er de nye

medlemmer og deres forældre, der er målgruppen, blev vi enige om, at det, at man kan

støtte selve foreningen, er en mindre væsentlig detalje i forhold til målsætningen med

siden, nemlig at skaffe nye medlemmer. Derfor blev det et underpunkt i ”Om os”.

Nye medlemmer: Her har vi samlet alle de praktiske oplysninger i forbindelse med

optagelsesprøve, undervisningssted, undervisere og hvem man skal kontakte for at

komme til optagelsesprøven. Menupunktet ligger som nummer to på listen, da det er

vigtigt hurtigt at guide nye medlemmer ind på siden med de praktiske oplysninger. Vi

forestiller os at nye medlemmer hurtigt vil vide noget om, hvordan man bliver medlem

af koret.

Kontakt: Er en kontaktformular, der kan bruges af alle til alle formål. Det kan være

sponsorer, forældre, koncertgængere og pressen. Der linkes til denne side fra alle

relevante sider. Menupunktet ligger som nummer tre på listen, da det er en væsentlig

funktion i forhold til mange mennesker. Også i forhold til de kommende medlemmers

forældre, der ønsker yderligere information om koret.

Presse: Her er links til spændende artikler, der fortæller noget om drengekoret. Det er et

væsentligt punkt, da den gamle hjemmeside lænede sig meget op af, at man skal læse

disse artikler om koret.

Det er meget lidt de selv har formuleret omkring, hvordan det er at være i koret og de

pædagogiske principper. Vi har læst disse artikler og trukket nogle af formuleringerne

ud på vores forside. Da meget af den bløde information om drengekoret er at finde i

artiklerne, har vi lagt dette menupunkt før gæstebog og galleri.

Gæstebog: Dette er et nyt menupunkt i forhold til den gamle side, hvor der kan gøres

brug af en WordPress blogfunktion, og bruge denne funktion til at publikum,

medlemmer og andre kan skrive om deres oplevelser i forbindelse med koncerterne.

Page 7: Højt til loftet

Højt til loftet- Redesign af Skt. Clemens Drengekors hjemmeside

http://multimediekursus.ats.dk/1811/anette/wp/ Side 7

Publikum kan give ris og ros og opfordres til det ved, at punktet ligger i hovedmenuen.

Det kan give de nye medlemmer et billede af, hvad sangen kan gøre for publikum og

måske give ekstra blod på tanden til at melde sig til en optagelsesprøve. Denne funktion

er ikke implementeret i det nuværende design, men eksisterer som en fremtidig

mulighed for kunden.

Galleri: Til sidst i menuen ligger galleri-siden. Allerede på forsiden har besøgende set

en del billeder. Det kan have mættet behovet for det visuelle. Galleriet er til dem, der vil

se mere og til de medlemmer, der allerede er i koret. Ved kundebesøget blev vi gjort

opmærksom på, at medlemmerne var glade for, at kunne gå ind og se billeder fra de

forskellige koncerter.

Links: På denne side er der links til en masse andre kor. Dette var en vigtig ting at få

med, da der er en indbyrdes aftale korene imellem at linke til hinanden. De ligger til

sidst, da linkene samtidig er en vej ud af sitet. Det kan besøgende gøre efter, at have

undersøgt de links, der ligger foran.

Designparametre

Form: Vi valgte fra starten, at bestræbe os på at designe en forside uden scroll.

Grunden til at vi ønskede dette var, at gøre det let for brugeren at navigere på forsiden.

På de fleste undersider har vi ladet indholdet bestemme, om der skulle være scroll.

Siden ”Vedtægter” er f.eks en lang tekst, der skal scrolles i. Denne regner vi dog ikke

med er den mest besøgte i forhold til målgruppen. Vi har komprimeret teksten på flere

af siderne (ex. Nyt medlem”, Støt os”) og det gør, at der heller ikke her er scroll.

For at man kan se hjemmesiden ordentlig, også på små skærme, har vi valgt Weaver

som tema.

Tema: Efter test af flere forskellige WordPress temaer valgte vi Weaver. Det skyldes

muligheden for at tilpasse det til vores ideer med hensyn til antal kolonner og header.

Temaet er endvidere overskueligt at redigere i og det er nemt at videregive til dem, der

skal vedligeholde hjemmesiden. Kundens hjemmesideadministrator er kvalificeret til at

Page 8: Højt til loftet

Højt til loftet- Redesign af Skt. Clemens Drengekors hjemmeside

http://multimediekursus.ats.dk/1811/anette/wp/ Side 8

arbejde med temaer i WordPress, hvilket gør temaet relevant og anvendeligt

fremadrettet.

Typografi: Bortset fra logoet og på billedernes buzz-words har vi valgt skrifttypen

Verdana. Vi syntes denne skrifttype passede visuelt godt til siden, og er en type, som de

fleste brugere kan se i deres browser.

Logoet er en manipulation af skrifttypen MS PGothic, der er blevet behandlet i

fotoshop, hvad angår størrelse og farver. Meningen i logoet er at fremhæve CLEMENS

DRENGE, for at give en fornemmelse af frisk afslappethed. Det må gerne være lidt cool

at være kordreng. Samtidig skulle det kirkelige og den klassiske musik tages alvorlig.

Derfor blev SKT. og KOR fremhævet med blå, der matcher med sidens baggrundsfarve.

Buzz-words er ligeledes lavet med skrifttypen MS PGothic.

Illustration: Vi har brugt logo og billeder på websiden for at illustrere og levendegøre

Skt. Clemens Drengekor. Billederne i slideshowet har vi givet særlig stor fokus ved at

give dem buzz-words, der fortæller noget om, hvorfor det er en god ting at være med i

et drengekor. På flere af undersiderne har vi lagt fotos, hvor det var relevant, fordi det

gør siden mere levende. På siden ”Støt os” har vi lagt et foto af en kirkebøsse, for at

illustrere hvad det er, man støtter ved at støtte drengekoret, der jo hører til Århus

Domkirke. På siden ”Historie” har vi lagt et foto af Århus Domkirke, for på samme

måde at illustrere hvor koret hører til. På siden ”Nyt medlem” var det oplagt at lægge et

mere formelt foto af drengekoret, som illustration af den gruppe, man kan blive en del

af.

Farver: Da vi studerede kundens nuværende hjemmeside, kunne vi se, at den i sit

udtryk var lidt tung og dyster. Kunden havde et ønske om, at gøre siden mere moderne

og lettere. At det er et drengekor gør, at vi skulle passe meget på med, at der var den

rigtige grundfarve på siden. Røde og lyserøde farver er ”pigefarver” så dem udelukkede

vi med det samme.

Vi snakkede om, hvad det er for følelser og associationer vi får, når vi tænker

drengekor. Begrebet ”Højt til loftet” samlede dette i farven blå. Blå kan være alt fra

mørk havblå til himmelblå og babylyseblå. Vi arbejdede meget med, at de blå nuancer

Page 9: Højt til loftet

Højt til loftet- Redesign af Skt. Clemens Drengekors hjemmeside

http://multimediekursus.ats.dk/1811/anette/wp/ Side 9

ikke måtte være for babyblå eller douchede, da vores logo lægger op til det seje ved at

synge i kor. Den blå baggrundsfarve blev mørk, så den fremhævede selve siden.

Menuen og buzz-words blev holdt i samme lysere blå. Dette gjorde vi for at give en

sammenhæng mellem menuen og ønsket om at tilhøre det kor, som oplever det, der står

på buzz-words’ene. Vi har ikke brugt komplementærfarver, da vi ikke syntes, at den

klassiske musik lægger op til dette. Musikken lægger mere op til stille fordybelse,

hvilket udtrykkes ved at bruge den samme farve i forskellige nuancer.

Animation: Vores grundide gik ud på at tiltrække flere medlemmer ved at gøre det

attraktivt at synge i kor. Vores slideshow er direkte affødt af målet, ved at ord og

billeder spiller sammen og giver en stemning.

”Show it, don’t tell it” er hovedideen med slideshowets fotos. Vi kunne lige så godt

gøre direkte brug af det gode billedmateriale, som kunden har leveret. Billederne giver

stemningen og med buzz-word sat på forstærkes denne stemning.

Lyd og video: Selvom kunden havde et ønske om, at der skulle være musik på, valgte

vi ikke at putte lyd på, når man kommer ind på forsiden, men i stedet give muligheden

for at høre koret via et link. Det valgte vi, fordi vi var enige om, at det er et

irritationsmoment, når der kommer lyd frem, vi ikke selv har valgt. Kunden kan evt.

erstatte linket med et lille lyd-plugin, man kan aktivere på forsiden. På samme måde er

der link til en video med koret, som kunden er i gang med at få produceret. Denne video

forestiller vi os, skal åbne i et nyt vindue.

AIDA

AIDA-modellen er overvejet i projektets fremstilling og er repræsenteret i vores forside

til hjemmesiden. Nedenstående redegør for vores tanker og valg.

Attention ligger øverst til venstre, hvor vores logo ligger.

Interest er placeret til højre, hvor vi har placeret en kort sigende tekst, der danner

ramme om hjemmesidens bud.

Desire ligger i midten til venstre, hvor vi har vores slideshow med fremhævdede buzz-

words.

Aktion ligger både som menupunkter under header og som links under teksten til højre.

Page 10: Højt til loftet

Højt til loftet- Redesign af Skt. Clemens Drengekors hjemmeside

http://multimediekursus.ats.dk/1811/anette/wp/ Side 10

Realiseringstrinnet

Med vores ideer og dokumenter til projektets form, funktionalitet og udseende kunne vi

begynde den egentlige realiseringsproces. Realiseringsprocessen var dog allerede i

gang, da vi undervejs i designtrinnet havde afprøvet visualisering, og hvordan vi kunne

udleve vores ideer i WordPress. Derfor er afsnittet om designtrinnet også så detaljeret,

da det var på dette trin, vi virkelig fik gennemarbejdet vores ideer. Denne del er

yderligere begrundet af vores valg af udviklingsarbejde, som beskrevet i indledningen,

hvor vi havde valgt at benytte os af en sammenkobling mellem vandfaldsmetoden og

prototyping. Dermed havde vi vores kronologiske beskrevne dokumenter at forholde os

til, men undervejs i processen via prototyping hoppe mellem design- og

realiseringstrinnet for at designe vores ideer igennem realisering.

Hovedelementet og den vigtigste faktor i realiseringen var at få udlevet vores ide med et

slideshow for at få hjemmesiden til at virke indbydende, men samtidigt fange brugerens

interesse med det visuelle. Valget af slideshowet gav os nogle udfordringer rent teknisk

med at finde det rette plugin, og få de enkelte buzz-words på billederne, men valget af

slideshowet er velbegrundet i undersøgelses- og designtrinnet. Den vigtigste bekræftelse

kom igennem accepttest af det sidste møde med kunden, hvor vi var i stand til at

præsentere forsiden, hvor specielt slideshowet blev mødt af begejstring.

Efter realiseringen af vores foranalyse, undersøgelses- og designtrin var vi i stand til at

evaluere som det sidste procesniveau i realiseringstrinnet. Det er lykkedes os at realisere

de ideer, vi var kommet frem til og få designet til at udtrykke det, vi gerne ville. Denne

interne holdning blev styrket på det sidste kundemøde.

Konklusion

Med det færdige udkast til et redesign af Skt. Clemens Drengekors hjemmeside kan vi

konkludere, at det er lykkedes os på bedste vis at få realiseret vores ideer til indhold,

struktur og design. Ved anvendelse af både vandfaldsmetoden og prototyping som

udviklingsmetoder, har vi været i stand til at opretholde en god struktur for projektet,

men samtidigt haft mulighed for at forsøge og udvikle os frem til det bedste resultat. Vi

har bevidst valgt at holde hjemmesiden åben for videreudvikling, så Skt. Clemens

Drengekor kan få det optimale ud af vores arbejde.

Page 11: Højt til loftet

Højt til loftet- Redesign af Skt. Clemens Drengekors hjemmeside

http://multimediekursus.ats.dk/1811/anette/wp/ Side 11

Foranalysen, undersøgelses-, design- og realiseringstrinnene har ageret rettesnor for det

endelige projekt, men det har været gruppens samarbejdsdynamik, der har sikret det

endelige resultat. Internt i gruppen har vi formået at udnytte hinandens kompetencer, der

har vist sig yderst komplimenterende. Det har faktisk været et ”kick” at arbejde sammen

i gruppen og det at vi har siddet fysisk i sammen i processen resulterede i at vi hele

tiden har kunnet overskue projektprocessen og imødekomme fælles mål.

Kontaktperson for evt. videre arbejde med hjemmesiden:

Anette Wiklund – [email protected]

Page 12: Højt til loftet

Højt til loftet- Redesign af Skt. Clemens Drengekors hjemmeside

http://multimediekursus.ats.dk/1811/anette/wp/ Side 12

Bilag 1: Projektbeskrivelse

Projektets motivation: Skt. Clemens Drengekor vil gerne have et mere nutidigt

brugervenligt redesign af eksisterende hjemmeside. Projektet er relevant fordi koret

gerne vil tiltrække nye medlemmer.

Projektets formål og resultater: At formulere en eksistens af koret og til at tiltrække

nye medlemmer

Projektets mål og afgrænsninger: At få udviklet en ny og spændende hjemmeside der

kan tiltrække flere medlemmer til koret. Enten via dem selv eller gennem forældre. Det

skal ikke være en koncertkalender eller et socialt samlingssted for nuværende

medlemmer, det kører igennem andre kanaler.

Projektkoncept og udviklingsmetode: En appetitvækker til potentielle nye

medlemmer og deres forældre. En komplimenterende sammenkobling af

vandfaldsmetoden og protyping anvendes som udviklingsmetode. Den 8. maj skal

kunden være tilfreds med et udkast til hjemmesiden.

Projektets tidsplan og deadline: Tidsplan se bilag 5. Projektet har deadline d. 10. juni

2011 kl. 12.00

Projektets organisering: Demokratisk delt ansvar på alle niveauer

Page 13: Højt til loftet

Højt til loftet- Redesign af Skt. Clemens Drengekors hjemmeside

http://multimediekursus.ats.dk/1811/anette/wp/ Side 13

Bilag 2: Procesdokumentation

Færdige produkter af sitet ses i de enkelte storyboards for hjemmesidens sider.

Page 14: Højt til loftet

Højt til loftet- Redesign af Skt. Clemens Drengekors hjemmeside

http://multimediekursus.ats.dk/1811/anette/wp/ Side 14

Bilag 3: Konceptbeskrivelse

Titel: ”Højt til loftet – Redesign af Skt. Clemens Drengekors hjemmeside”.

Idé: Et levende lyst site med visuel interaktion i form af slideshow med buzz-words, der

appellerer til målgruppen. Det visuelle siger mere end ord.

Brug: Hjemmesiden skal bruges til at tiltrække nye medlemmer til koret

Indhold: Forsiden skal være den altdominerende del af hjemmesiden, hvor interessen

hos brugeren skal vækkes. De forskellige undersider skal være informerende tekst.

Behov: Hjemmesiden skal gøre folk opmærksomme på korets muligheder og gøre

medlemskab attraktivt.

Opmærksomhedsområde: Grafisk virkemiddel i form af slideshow med tilhørende

buzz-words. Der skal være lyse farver, der virker tillokkende. Samtidigt skal der ikke

være tvivl om, at hjemmesidens budskab er at tiltrække nye medlemmer til koret.

Page 15: Højt til loftet

Højt til loftet- Redesign af Skt. Clemens Drengekors hjemmeside

http://multimediekursus.ats.dk/1811/anette/wp/ Side 15

Bilag 4: Kommunikationsplan

Formål: Vi skal redesigne Skt. Clemens Drengekors hjemmeside med et seriøst og

troværdig udtryk, der signalerer åbenhed og lyst til at synge i kor. Det musikalske

samvær er prioriteret højt til at tiltrække nye medlemmer

Afsender: Skt. Clemens Drengekor skal fremstå som den tydelige afsender. Det er

forventet, at besøgende har et ønske om at synge i kor, og derfor må der ikke være den

mindste tvivl om afsenderen.

Målgruppe: Drenge fra 8 års alderen der har interesse i at synge i kor, samt deres

forældre. Det er forventet at modtager- og målgruppen er sammenfaldende.

Budskab: Gennem interaktive virkemidler og buzz-words at tiltrække nye medlemmer

til koret.

Medie: Internetmediet var givet fra starten, da der er tale om et redesign af en

eksisterende hjemmeside. Yderligere er det mediet, der appellerer til målgruppen som

den umiddelbare kilde til informationssøgning.

Page 16: Højt til loftet

Højt til loftet- Redesign af Skt. Clemens Drengekors hjemmeside

http://multimediekursus.ats.dk/1811/anette/wp/ Side 16

Bilag 5: Tidsplan

Tidsplan Aktivitet Forventet tid Forbrugt tid Difference

Foranalyse

30.05 Kundebesøg 1 1 0

30.05 Projektbeskrivelse 2 2 1,5

30.05-31.05 Informationsindsamling 2 1 1

Undersøgelse

30.05 Planlægning 0,5 0,25 0,25

30.05-31.06 Ideudvikling 3 1,5 1,5

31.06 Research 1 1 0

02.06-03.06 Konceptbeskrivelse 3 1,5 1,5

31.05 Beskrivelse af grafiske virkemidler 2 3 -1

Design

Information/informationsstruktur 3 3,5 -0,5

Interaktion 1 0,5 0,5

Præsentation 0,25 0,25 0

Brugertest 1 2,25 -1,25

Flowchart 2 2,5 -0,5

Storyboard 1 1,5 -0,5

Designmanual 1 0,5 0,5

Redegørelse for designparametre 2 2,5 0,5

Realisering

Produktion 20 35 -15

Systemtest 3 5 -2

Evaluering/vurdering af samarbejde 1 1 0

Revurdering 1 2 -1

Procesdokumentation 10 10 0

IALT 60,75 77,75 17

Page 17: Højt til loftet

Højt til loftet- Redesign af Skt. Clemens Drengekors hjemmeside

http://multimediekursus.ats.dk/1811/anette/wp/ Side 17

Bilag 6: Flowchart

Page 18: Højt til loftet

Højt til loftet- Redesign af Skt. Clemens Drengekors hjemmeside

http://multimediekursus.ats.dk/1811/anette/wp/ Side 18

Bilag 7: Storyboards med indholdsskelet

Forside

Weaver tema 940px bredt

Header 940px bredt, 198px højt

Menubar 940px bredt, 37px højt

Tekstområde 940px bredt

Footer 940px bredt, 39px højt

Page 19: Højt til loftet

Højt til loftet- Redesign af Skt. Clemens Drengekors hjemmeside

http://multimediekursus.ats.dk/1811/anette/wp/ Side 19

Overordnet på alle sider :

Headeren består af et logo og et billede som er sammensat til en jpgfil,

Menu-baren :

Består af 8 elementer hvoraf ”Om os” er en dropdown.

”Hjem” er denne forside.

Footer indeholder oplysninger om WordPress samt Weaver tema på alle sider i sitet

Farver på sitet er præget af de blå toner:

Baggrundsfarven er #0E10B2.

Menubaren har farven #659CD4 .

Tekst er skrevet i verdana.

Forsiden (Hjem) er delt i 2 kolonner:

Venstre side er et slideshow med 15 billeder som skifter ved start.

Højre side består af en widget med tekst samt 3 links.

Page 20: Højt til loftet

Højt til loftet- Redesign af Skt. Clemens Drengekors hjemmeside

http://multimediekursus.ats.dk/1811/anette/wp/ Side 20

Nye medlemmer

Nye medlemmer er delt i 2 kolonner:

Venstre side er tekst verdana.

Højre side består af et billede: Skt_Clemens-4487.jpg.

Page 21: Højt til loftet

Højt til loftet- Redesign af Skt. Clemens Drengekors hjemmeside

http://multimediekursus.ats.dk/1811/anette/wp/ Side 21

Om os – Historie

Historie er delt i 2 kolonner:

Venstre side er tekst verdana.

Højre side består af et billede: Aarhus_Domkirke_download.jpg.

Page 22: Højt til loftet

Højt til loftet- Redesign af Skt. Clemens Drengekors hjemmeside

http://multimediekursus.ats.dk/1811/anette/wp/ Side 22

Kontakt

Kontakt er delt i 2 kolonner:

Venstre side er et plugin cformsII .

Højre side er pt blank.

Page 23: Højt til loftet

Højt til loftet- Redesign af Skt. Clemens Drengekors hjemmeside

http://multimediekursus.ats.dk/1811/anette/wp/ Side 23

Bilag 8: Designmanual

Typografi

Den gennemgående skrifttype på sitet er Verdana

Menubar

Verdana

Str. 12pk fed

Farve: #FFFFFF

Hoover: #0E10B2

Active: #222222

Forsidetekst

Verdana

Overskrift: 18pk. normal

Farve: #222222

Brødtekst: 12pk. Fed

Farve: #222222

Links: 10pk. Normal

Farve: #0E10B2

Hoover: Understreget

Footer

WordPress og Weaver standard typografi

Tekst i menupunkterne

Verdana

Farve: #222222

Overskrifter: 18pk. fed

Overskrift brødtekst: 14pk. fed

Brødtekst: 14 pk. normal

Links: 14pk. understreget

Farve: #0E10B2