sct. clemens drengekor rapport

2011

Multimedieteknologi og interaktionsdesign – Hold 1811 Lone Jessen, David Garcia, Morten Holmboe og Cecilie Vogel

[SCT.CLEMENS DRENGEKO

Simpelt og enkelt! Leg, læring og fællesskab!

SCT.CLEMENS DRENGEKO

Simpelt og enkelt! Leg, læring og fællesskab!

SCT.CLEMENS DRENGEKOR]

2

Indhold

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

Metode ................................................................................................................................................. 4

HOME modellen ............................................................................................................................... 4

1. Foranalyse ..................................................................................................................................... 5

Projektbeskrivelse ............................................................................................................................ 5

Projektets motivation ................................................................................................................... 5

Projektets formål og resultater .................................................................................................... 5

Projektets mål og afgrænsninger ................................................................................................. 5

Projektkoncept og udviklingsmetode ........................................................................................... 5

Tidsplan og deadline ..................................................................................................................... 6

Organisering .................................................................................................................................. 6

Økonomi og ressourcer ................................................................................................................ 6

2. Undersøgelsestrinnet ................................................................................................................... 6

Konceptbeskrivelse .......................................................................................................................... 6

Kommunikationsplanlægning ........................................................................................................... 7

Formål ........................................................................................................................................... 7

Afsender ........................................................................................................................................ 7

Målgruppe .................................................................................................................................... 7

Budskab......................................................................................................................................... 8

Medie ............................................................................................................................................ 8

3. Designtrinnet ................................................................................................................................ 8

Informationsdesign .......................................................................................................................... 8

Interaktionsdesign ............................................................................................................................ 9

Præsentationsdesign ...................................................................................................................... 10

Grafiske virkemidler .................................................................................................................... 11

Grafiske designparametre .......................................................................................................... 11

4. Realiseringstrinnet ...................................................................................................................... 12

Anvendt teknologi .......................................................................................................................... 12

5. Konklusion og evaluering ............................................................................................................ 13

Perspektivering ............................................................................................................................... 13

3

Det færdige resultat ....................................................................................................................... 14

Bilag .................................................................................................................................................... 15

Bilag 1 - Kundens ønsker til website .......................................................................................... 15

Bilag 2 - Tidsplan ........................................................................................................................ 15

Bilag 3 - Kreativ ideudviklingsproces ......................................................................................... 16

Storyboards udvikling ..................................................................................................................... 17

Bilag 4 - Logo udvikling .............................................................................................................. 19

Bilag 5 - Færdigt storyboard ...................................................................................................... 20

Bilag 6 - Designmanuel .............................................................................................................. 21

Bilag 7 - Vejledning til websitet ................................................................................................. 22

Fjerne kommentar fra indlæg og sider i wordpress ....................................................................... 22

Bilag 8 - Websitets forside + 4 sider .......................................................................................... 24

4

Indledning

Som afsluttende eksamens opgave, på vores 6 ugers kursus i multimedieteknologi og

interaktionsdesign, fik vi til opgave at producere et website til Sct. Clemens Drengekor, som var

mere informations- og navigationsvenligt til den ønskede målgruppe. Sct. Clemens drengekor har

som udgangspunkt 3 målgrupper: Tilskuer til koncerter, drengene der er eller ønsker at være med i

koret samt forældrene. For at holde fokus tog opdragsgiver (dirigenten) en beslutning om, at

sætte fokus på èn målgruppe. Målgruppen blev forældre til drenge, som søgte information

omkring korets muligheder. Dette var det overordnede udgangspunkt – og der var ingen specifikke

krav til farver og layout. Der var dog en række ønsker til websites indhold. Se Bilag 1 - Kundens

ønsker til website.

Dette åbnede op for muligheden for at tænke ud af boksen.

Det færdige website kan findes på:

http://multimediekursus.ats.dk/1811/david/wp/

Desuden har vi valgt at detaljere følgende sider, så man derigennem kan se hvilken retning vi

ønskede at tag layoutet:

Forside: http://multimediekursus.ats.dk/1811/david/wp/

Om Koret: http://multimediekursus.ats.dk/1811/david/wp/index.php/forside/om-koret/

Koncertkalender:

http://multimediekursus.ats.dk/1811/david/wp/index.php/forside/koncertkalender-2/

Media: http://multimediekursus.ats.dk/1811/david/wp/index.php/forside/media/

Kontakt os: http://multimediekursus.ats.dk/1811/david/wp/index.php/forside/kontakt-os/

Metode

Med udgangspunkt i udviklingsmetoden HOME vil vi skabe et brugervenligt website som opfylder

målgruppens ønsker og behov, men som også afspejler de værdier, som kendetegner Sct. Clemens

drengekor.

HOME modellen

Vi har valgt at strukturere vores projekt efter HOME modellen, da dette er med til at gøre vores

projektarbejde systematisk. HOME står for ”Holistic Open Multimedia Development Method”. Den

anvendes som en åben metode til udvikling af multimedier.

HOME modellen består af fire trin:

1. Foranalyse

5

2. Undersøgelse

3. Design

4. Realisering

Disse 4 trin benyttes i de følgende afsnit til at præsentere det aktuelle projekt.

1. Foranalyse

Projektbeskrivelse

Projektets motivation

Projektets motivation er skabt blandt bestyrelsens medlemmer, som ønsker et flot og

informationsrigt visitkort udadtil. Udfordringen for bestyrelsen er af der er mange forskelligartede

funktioner og informationer, som man gerne vil have på websitet. Dette havde indtil videre

resulterede i et website uden fokus på nogen særlig målgruppe og disses behov. Hvilket

resulterede i faldende interesse for websitet. En ny website er relevant, da denne ønsker fokus på

hvervning af nye medlemmer og sekundær ønsker at informer om arrangementer.

Projektets formål og resultater

Et drengekor hvor nye potentielle kordrenge og forældre har mulighed for at indhente faktuelle

informationer samt danne sig et indtryk af muligheder og fællesskabet i koret. Drengekoret kan

således opleve en stigende interesse fra forældre og ”mulige” kordrenge. Da information og kultur

er klar for alle og optagelses krav, socialt miljø og tids engagement bliver præsenteret på en

overskuelig og appetitlig måde.

Projektets mål og afgrænsninger

Drengekoret skal stå med en forside samt yderlig 4 sider. Websitet skal være tidssvarende,

vedkommende og funktionelt med øget internaktion. Sitet skal derudover være overskueligt, nemt

og hurtigt at finde rundt på.

Projektkoncept og udviklingsmetode

Konceptet er deling af viden over nettet samt øge markedsføring og informationsniveauet af Sct.

Clemens drengekor til en specifik målgruppe. Nemlig forældrene. Opgaven struktureres efter

vandfaldsmetoden med brugerinddragelse vha. en repræsentant fra koret. Vandfaldsmetoden

tages i brug, da denne er god, når der er tale om et specifikt udgangspunkt med stor fokus på

dokumentation, så den er nem at vedligeholde og videreudvikle på for en webmaster. Samt når

der er tale om korte projekter. Som en del af realiseringstrinnet vil en repræsentant fra koret

bliver inddraget, så evt. små justeringer kan ske.

6

Tidsplan og deadline

Projektet mål skal være afsluttet d.10. juni og dokumentationen skal være tag sig ud i en rapport.

Færdiggørelse af indholdet på hele websitet – som strækker sig ud over projektets afgrænsning -

er op til drengekorets bestyrelse og dens frivillige selv at udføre.

Organisering

Projektgruppen arbejder selvstændig med projektet men har mulighed for at kontakte

opdragsgiveren, hvis yderlig information kræves.

Økonomi og ressourcer

Der er afsat 54 timer til projektet. Det er udregnet efter at gruppen er der i 7 timer hver dag

fordelt på 4 gruppemedlemmer.

2. Undersøgelsestrinnet

I dette trin var opgaven at udvikle en tidsplan med specificeret med konkrete arbejdsopgaver. (Se

Bilag 2 -Tidsplan). Der blev taget udgangspunkt i afleveringstidspunktet og regnet bagud. Så det

blev nemt at overskue hvad der skulle opnås på de enkelte dage. Efter at denne plan var blevet

fastlagt påbegyndte gruppen at foretage research samt idegenerering og konceptudvikling. Ved

hjælp af forskellige kreative ideudviklingsteknikker (se Bilag 3 -Kreativ ideudviklingsproces) fik vi

udviklet en masse ideer til henholdsvis koncept og storyboards. Disse skitser er blevet diskuteret

og redigeret i forhold til hvad der hvad teknisk muligt og hvilken målgruppe man henvendte sig til.

Nogle ideer blev tegnet på computeren og der blev ligeledes søgt efter færdige wordpress

templates, som levede op til ønskerne. Nogle elementer blev forkastet fordi det ikke virkede på

skærmen eller ville være for komplekse, at udvikle. Der er generelt i denne fase blevet lagt meget

vægt på kommunikationsmodellens 4 designparametre: Afsender, Budskab, Modtager og Medie.

De vil efterfølgende blive specificeret.

Konceptbeskrivelse

I konceptbeskrivelse vil vi opsumme ideen/konceptet, som vi har fra ideudviklingsprocessen.

At lave en side som viser at det ikke kun er sangundervisning drengene får, når de melder sig ind i

koret. At der er fællesskab og leg samtidig med læring. Websitet skal være enkelt opbygget med

fokus på fornævnte i form af billeder og korte sætninger – der skaber stemning. Det skal være

billederne, der falder brugeren/forældrene først for øje – derefter skal de hurtig kunne finde det,

som de fleste bruger oftest søger efter. Nemlig hvad det kræver at komme ind i koret og

presselinks, så de kan se den gode omtale koret har fået. Derudover skal kalenderen også være

hurtig, at komme til, så forældre evt. kan tjekke koret ud til en koncert. Grund farverne skal

komplementer billederne, men ikke tag magten. Som en sekundær ting skal der være fokus på

muligheden for at støtte koret. Da dette er vigtigt for eksistensgrundlaget for koret.

7

Kommunikationsplanlægning

Kommunikationsplanlægning er vigtigt, da man kan have nok så mange gode ideer – hvis man ikke

ved hvad man vil sige, hvordan og med hvilket formål. Derfor er det fundament for det videre

forløb.

Formål

Kunden har et website som de ikke identificerer sig med. Kunden føler ikke at det repræsenterer

dem på en positiv måde. Som det er nu, bliver websitet ikke opdateret regelmæssigt, og det bliver

efter kundens udsagn ikke benyttet af korets medlemmer og familie i den udstrækning som kunne

være ønskeligt. Hvor mange nye sangere, medlemmer, sponsorer og jobs kunden har fået via

aktuelle website vides ikke.

I modsætning til nuværende website er ønsket til en ny website, at den skal være tidssvarende,

vedkommende og funktionel, gerne med større interaktion. Websitet skal endvidere være

overskueligt, og nemt og hurtigt at finde rundt på.

Ud over de informationer der findes på nuværende website (www.clemensdrenge.dk) ønskede

kunden også andre informationer på siden. Se Bilag 1 -Kundens ønsker til website.

De mange forskelligartede informationer tjener mange forskellige formål og henvender sig til

forskellige målgrupper. For at kunne disponere rigtigt var det vigtigt for os at prioritere imellem

disse formål. Igennem samtale med kunden fandt vi frem til at det primære formål skal være

hvervning af nye kordrenge, og den ønskede effekt er, at flere drenge kommer til optagelsesprøve

i Sct. Clemens drengekor.

Afsender

Afsender er Sct. Clemens drengekor, og kommunikationen skal opleves som kommende direkte fra

koret. Domkantor Carsten Seyr-Hansen er kontaktperson, og har en lidt mere fremtrædende rolle

som afsender og kommunikator i koret. Kunden beskriver sig selv som et kor, der gerne adskiller

sig fra det til tider stive image forbundet med drengekor. Nøgleord er løssluppenhed og

kammeratskab, seriøsitet men også friske drenge. Afsenderes troværdighed og viden vurderes

som høj på baggrund af deres arbejde og uddannelse han har.

Målgruppe

I følge kunden er det typisk på forældreinitiativ at drenge kommer til optagelsesprøve. En af

forældrene er typisk præst, lærer og/eller har en musikalsk baggrund. Med henblik på at skabe et

overblik over hvad der karakteriserer denne gruppe, er holdningen den, at det bedste resultat nås

ved at klarlægge situationen og det behov der skal tilfredsstilles, når en modtager søger ind på Sct.

Clemens webside og beslutter at sønnen skal tilmeldes. Da det ligger uden for projektets omfang

8

at anskaffe og behandle de kvalitative data det ville kræve, har vi valgt at adfærdssegmentere

målgruppen ved hjælp af den forenklede sociologiske model “Minerva”1.

Minerva inddeler befolkningen i fire segmenter. Vores målgruppe hører ind under det segment,

der bliver kaldt “de grønne”. De grønne er kendetegnet ved at være veluddannet, ofte beskæftiget

indenfor uddannelse, omsorg eller offentlig administration. De lægger vægt på at udvikle sig selv,

og går op i kunst og kultur (musik). De tager afstand fra popkulturen og de har “god smag” og sans

for “kvalitet”. De er idealistiske og har stærk solidaritet med personer der har samme uddannelse

som dem selv. De grønne er moderne mennesker der, selv om de er kritiske forbrugere, også når

det kommer til internettet, er fortrolige med at søge informationer og viden den vej.

Budskab

Budskabet er: ”Hvis mit barn bliver kordreng i Sct. Clemens drengekor vil han få mulighed for at

uddanne sig musikalsk gennem leg, læring og fællesskab”.

Medie

Da målgruppen kan kategoriseres, som ”grønne” forventer vi, at en søgning på internettet for at

lære mere om Sct. Clemens drengekor er realistisk for denne gruppe. De er ikke bange for at bruge

det – og de er vant til at det er her at information findes. Lyd og billeder er her et vigtigt element,

da de ligger vægt på at få et helhedsindtryk af koret.

3. Designtrinnet

På designtrinnets produktniveau skal man på baggrund af konceptbeskrivelse,

kommunikationsplan og øvrige data – til at give projektet indhold, struktur og form.

Informationsdesign

Information er et vidt begreb. Alle medier vil indeholde en eller anden form for information. Men

der er forskellig vægt på betydning og placering i forhold til det øvrige indhold. Vi vil kigge på

indhold og strukturering af information på vores udarbejdede website i dette afsnit.

Sitet er bygget på en færdiglavet Wordpress skabelon med enkelt design, hvid baggrund og

grå/sort detaljer. Logoet har to farver, grå og blå. Den sidste er også blevet brugt til linkene.

Meningen med sitets enkelthed er dobbelt: på den ene side vil man skabe ro og fokusere på

media, dvs. billederne, videoer, og på de “sociale knapper” øverst til højre. Det er dem, der giver

farve til sitet. På den anden, den enkelte design giver redaktøren mulighed for yderligere

tilpasning af sitet til deres egne ønsker.

1 ” (Dahl, Henrik. 1997. “Hvis din nabo var en bil”. København: Akademisk Forlag A/S)

9

Der er desuden ikke meget tekst på forsiden. Dette er fordi at vi ønsker, at brugeren skal opleve de

værdier, som Sct. Clemens Drengekor står for. Teksten kommer på de øvrige sider, når brugeren

begynder aktivt at interagere med siden.

Interaktionsdesign

Sitet har en hierarkisk navigationsstruktur. Hovedmenuen har 5 afsnit: forside ikon, om koret,

koncertkalender, media og kontakt. Undersider vises ved at placer musen over for de forskellige

menupunkter, på en dynamisk måde.

• Om koret. Her findes alt som er relateret til gruppen selv: historien, CV, formål, optagelse,

medlemskab, intranet samt om korets forening. Disse sider er forholdsvis statiske. Men

indeholder også stemningsbilleder.

• Koncertkalender. En liste over for de kommende koncerter. Den har en lidt mere dynamisk

karakter, da den kan blive opdateret jævnligt. Som underside, findes der også en liste over

for afholdte koncerter. Gamle koncerter (frem til 2010) vises lige som på den gamle site.

Takket være Simple Events Wordpress-plugin, vil de nye afholdte koncerter vises i denne

side, hvilket vil spare tid og arbejde til administratorerne.

• Media. Her er alt, som har med media at gøre, inkluderet. Billeder, videoer og event.

lydfiler.

• Kontakt. En enkelt side med kontaktinformation og en kontaktformular.

Udover hovednavigation, findes der en række “sociale” redskaber, som øger brugernes interaktion

med sitet. F.eks. links til Facebook, YouTube, Google Maps og Mail. Twitter kan også tilføjes i

temaets kontrolpanel. Der findes også quick links til at fremhæve og tilbyde nemt adgang til sider,

koret vil promovere: Støt os, Koncert Kalender, Intranet og Optagelse i koret. Selvom Intranet

siden ikke er påbygget er der lagt op til at dette skal gøres. Samt at det skal være et nemt link at

følge.

Til sidst, er der også en række in-line links inkluderet i flere siders tekst. F. eks. er der i media siden

links til dens forskellige underside samt til kontaktsiden.

10

Tegning - Flowchart

Præsentationsdesign

Præsentationsdesign er en konkretisering og en udvidelse af interaktionsdesignet. Her bliver

indhold og struktur forenet til et færdigt storyboard – på baggrund af de storyboardskitser, der

blev lavet da vi udarbejdede konceptet. Se Bilag 5 - Færdigt storyboard.

Websitet har en hvid baggrund. Logoen er placeret øverst til venstre hen til ca. midten af siden. Til

højre er der flere “sociale” knapper. Under disse findes der vandret navigationsbar i grå med

gradient (som bliver lidt mørkere, når aktiv) og med hvid tekst. Menuen er opbygget med

dropdown og skriften på hele siden er Tahoma. I forlængelse findes også en ikon til forside og

søgefeltet. Under navigationsbar’en er forsiden delt vertikalt i to tredjedel og en tredjedel. Den

brede spalte til venstre indeholder et stort billedeshow med i den nederste del af billedet. Under

billedet er der en kort tekst samt en ”Facebook like-it” knap. Sidebar til højre har en grå baggrunds

overskrift og en lidt mørkere grå skrift. Link har en blålig farve, som er den samme der er i logoet.

Her er indsat Quick links, presse links og banner reklamer. Footer har en mørkere grå baggrund.

Udvidet footer er sort.

Websitets undersider er bygget op over samme ramme, hvor baggrundsfarve, header, menu,

footer og menu til højre. Således at de to spalter går igen på alle sider.

Forside

Om Koret Media Kommende koncerter Kontakt

Optagelse i koret

Bliv medlem

Støt os

CV

Undervisere

Vedtægter

Bestyrelse

Presse

Forrige koncerter Billeder

Videoer

Musik

11

Grafiske virkemidler

Komposition

Med udgangspunkt i AIDA som har omtanke for øjets bevægelses flow, når brugeren første gang

kommer til sitet, har vi opbygget således:

• Opmærksomhed: Dette er den del, som fanger øjet og er oftest placeret i øverst venstre

hjørne. Vi valgte derfor at have vores udarbejdet logo placeret der. På denne måde er

brugeren sikker på hvem afsenderen og at de er kommet det rigtige sted hen.

• Interesse: Dette er den del, som får læseren til at fastholde interessen. Her er billedshowet

en eye catcher som giver et hurtigt visuelt indtryk af koret.

• Ønsker: Dette er den del, som får læseren til at ønske, at han havde produktet. Denne del

består ofte af en masse positive ord om produkt, og hvad produktet kan. Her har vi valgt en

kort tekst omkring hvad koret står for. Der kan trykkes på billede/tekst, som leder ind til en

beskrivelse af den stemning, som koret ønsker at skabe.

• Handling: Her skal kunden til at handle efter det de har set. Øjet ledes ned af siden og vi

har placeret en reklame for at melde sig ind i koret i højre hjørne.

Stil og stemning

Vi har valgt en ren og klassisk stil til korets website. Det store billedeshow skaber dynamik og giver

farve til sitet. Det viser stemning med billeder i stedet med ord. Der er kun to billeder for ikke at

være for dominerende (men flere kan tilføjes, hvis det ønskes). Under billedet er der en kort

velkommen-besked, der inviterer til at navigere rundt om sitet og mulighed for at dele det med

brugerens social netværk

Logo

Vi ønskede at skabe et logo som gik godt hånd i hånd med den rene stil, som vi opbyggede

hjemmesiden efter. Men også med lidt farve, der kunne skabe lidt kontrast på websitet. Se Logo

udvikling. Vi fravalgte de helt skrappe farver. Men gjorde det lidt kækt med de gyngende

bogstaver, som er med til at give et meget ungdommeligt logo.

Billede - Det færdige logo

Grafiske designparametre

Format

Websitet er lavet i et fleksibelt format med en bredde på 980px og en fleksibel højde. Dette er for

at tag højde for brugere med forskellige skærmopløsninger. På forsiden har vi stræbt efter at der

skal være et minimum af scroll. Dette har vi gjort ud fra den tese om at bruge af scroll ikke er

optimal, da man fanges at det første man ser. Så derfor vil information længere ned på siden være

”ekstra”.

12

Farver

Farverne vi har valgt er sort, hvid, grå og blå. Denne enkle farvekombination er for at gøre siden

enkel uden at være ”kedelig”. Den blå farve er frisk og faktisk også den mest populære farve på

nettet2. Blå symboliserer nemlig stabilitet, loyalitet og troværdighed. Derudover er blå den

maskuline farve og betyder også intelligens og håb. De grå og sorte er med til at skabe spil på

siden og den hvide baggrundsfarve viser åbenhed – og lad den blå farve skinne igennem.

Illustration

Der er lagt op til at bruge billeder på stort set alle sider. Da dette er med til at skabe farve og

stemning. Undtagen på kontaktsiden hvor brugerens mål er meget klart og der ikke er nødvendig

at skabe stemning – på samme måde som de andre sider.

Typografi

Til hele websitet har vi valgt at bruge Tahoma, da denne er meget læsevenligt på web. Den har et

bedre flow og at vi syntes dens bløde runde former, passer godt til sidens indhold. Til de faste

elementer er der valgt en hvid farve, så de fremtræder tydeligere mod den grå baggrund. Dette er

for at lede brugerens opmærksomhed hen på bl.a. navigationen, så de hurtigt kan finde det de

søger. Til brødtekst er der valgt sort, som tager sig godt ud på den hvide baggrund. Dette er en

meget anvendt sammensætning. Der leveres den viden som der skal uden at brugeren bliver

følelsesmæssigt påvirket af farven. Se Bilag 6 - Designmanuel for at få mere teknisk information.

4. Realiseringstrinnet

Realiseringstrinnet er den afsluttende fase i udarbejdelse af websitet. Her vil vi evaluere forløbet og

vi har lagt den sidste hånd på projektet. Der har desuden været et kundebesøg i denne fase, hvor

der var dialog om evt. forbedring.

Anvendt teknologi

Med udgangspunkt i Skt. Clemens Drengekors Bestyrelses ønske om et mere informationsrigt og

funktionelt site, har vi re-designet Skt. Clemens Drengekors hjemmeside.

Sitet er opbygget på CMS platformen Wordpress, version 3.1.3. I forbindelse med valget af

Wordpress skabelon, har gruppen lagt stor vægt på de informationer vi fik under det første møde

med kunden omkring hvordan video, billeder og lyd, skal have stor betydning i hverveprocessen af

nye kormedlemmer, som også er sitets hovedformål.

Vi har derfor valgt temaet/skabelonen “iFeature 1.1.4 - på grund af dens mange muligheder og

dens æstetiske tiltalende design. Her i blandt kan nævnes iFeature slideren, den dynamiske header

med plads til eget logo, samt sociale logoer som Facebook og Twitter, en kontakt sektion samt

2 http://owix.dk/artikler/farvesymbolik-hjemmeside/

13

typografi mulighederne fra Google. Udover ovenstående har vi brugt forskellige Plugins for at opnå

de ønskede funktionaliteter.

En speciel videoafspiller har f. eks. været nødvendig for at gøre det muligt at afspille film, således

den kan ses via Apples iPhone og iPad platforme. Kontaktformen er genereret via et plugin,

billedgalleriet, kalenderen ligeså.

Enkelte steder har vi omskrevet CSS’en en smule for at tilpasse det æstetiske udtryk eller

simpelthen fjerne overflødige blog funktioner, som ikke er primære for denne hjemmeside. Det

tilgængelige billedmateriale (fotogalleriet) er blevet behandlet en smule i Photoshop, hvor der

også er blevet brugt en del tid på nogle få grafiske elementer.

5. Konklusion og evaluering

Formålet med kurset og det afsluttende projekt var at udvikle og udvide vores forståelse og evner

indenfor brugerfladedesign. At udvikle en ide og arbejde med den i skitser til sidste at står med et

færdigt website. Vi føler at dette er opnået. Vi har fået en stor viden om vigtigheden i at

dokumentar hvert trin, så det senere hen kan tages frem af en ny webmaster. Så denne kan se

baggrunden for valgene samt de præcise valg. Fx hvilke farvekoder der anvendes og hvilke

muligheder plugins har og hvorfor man fx har fravalgt meget tekst på forsiden. Vi har fået en stor

indsigt i de muligheder Wordpress verdenen har. Samt at vi med vores html og css viden kan

ændre i allerede eksisterende designs.

Som en led i vores proces var det også vigtigt at få input fra en repræsentant af koret. Vi viste ham

det websitet, som stort var færdigt – efter gruppens mening. Vi spurgte indtil hvad han syntes om

de udviklede logoer. Repræsentanten syntes godt om det valgte logo og havde kun et ønske om at

det fyldte mere på websitet. Men ellers var han tilfreds med siden, som han synes var indbydende

enkelt og informationsrigt.

Samarbejdet i gruppen har været godt. Vi har været gode til at fordele opgaverne ligeligt imellem

os. Vi har alle været med til idegenering, beslutning af design og til opbyggelse af websitet. Samt

været gode til at informer hinanden om de ting vi arbejdede med. Så hvis en installerede et plugin,

så blev de andre informeret om mulighederne med dette plugin.

Vi synes i gruppen at vi er kommet frem til et rigtigt godt resultat. Vi føler at det viser hvad koret

står for og at budskabet bliver understøttet af det rene design – uden at blive kedeligt. Der er

indlagt forbindelse til sociale medier og dette har været vigtigt for os – når websitet også har unge

brugere. På den måde kan der ske en god interaktion mellem websitet og de sociale medier.

Perspektivering

Hvis dette design bliver valgt som det endelig design på Sct. Clemens drengekors website er det

lige til at gå til. Der er utrolig mange muligheder i denne skabelon. Vi har valgt at fravælge

14

kommentar, men hvis koret kan se at denne mulighed vil blive brugt har vi lavet en vejledning til at

aktivere det. Se Bilag 7 - Vejledning til websitet. Der vil også være mulighed for at oprette en

fælles mail samt en intranet side, som det har været korets ønske. Brugen af de sociale medier kan

også øges eller trappes ned. Muligheden for at ligge en Facebook banner ind med, som viser hvem

der er fan af sitet – er også endnu en mulighed. Hvis Sct. Clemens drengekor ønsker at gå videre

med sitet er kontaktpersonen Cecilie Vogel ([email protected]). Som har kontakt til

gruppens øvrige medlemmer.

Det færdige resultat

15

Bilag

Bilag 1 - Kundens ønsker til website

Forsiden:

• Oplyses om kommende koncerter, ligesom der tænkes interaktion i form af brugerens

mulighed for at vælge video eller lydoptagelse af koret.

• Noget der gerne må være inkluderet udover det allerede eksisterende materiale på

hjemmesiden:

o Tidligere korrejse – med dem som har støttet os

o Oversigt over fonde og virksomheder, der har støttet os

o Korets CV

o Side med gamle koncertplakater

o Fælles mailadresse.

Bilag 2 - Tidsplan

Dato Opgaver

Mandag d.30/5-2011

-Kundebesøg -Analyse -Udarbejdelse af projektbeskrivelse

Tirsdag d. 31/6-2011

-Udarbejdelse af tidsplan -Idéudvikling

Onsdag 1/6-2011

-Skitsering af flowcharts og storyboards -Kommunikation -Målgruppesegmentering -Fordeling af arbejdsopgaver

Helligdag

Fredag d. 3/6-2011

-Skitsering af flowcharts og storyboards

Weekend

Weekend

Mandag d. 6/6-2011

-Diskusion af skitser til hhv. flowchart og storyboards -Fastlæggelse og og udarbejdelse af flowchart -Udarbejdelse af designskabelon

Tirsdag d. 7/6-2011

-3-4 storyboards fastlægges -WordPress -Rapport

16

-Layout

Onsdag d. 8/6-2011

-WordPress -Korets repræsentant besøger os (evt. ændringer) -Rapport -Layout -Bilag

Torsdag d. 9/6-2011

-WordPress -Rapport -Korekturlæsning

Fredag d. 10/6-2011

-Aflevering af rapport

Bilag 3 - Kreativ ideudviklingsproces

Vores ideudviklingsproces foregik således:

1. Tømme hovedet for ideer både når det gjaldt hvad siden skulle udtrykke, men også

hvordan den kunne opbygges

2. Associationsteknik hvor vi første skrev en masse random ord ned på et stykke papir.

Ordenen var: chokolade, cykel, plakat, Berlin, Cirkel, peber, strøm, lomme tørklæde.

Herefter sagde vi: ”hvordan gør vi et drengekors website spændende med ”ord”. Dette

kommer der en masse spændende ideer ud af. Herefter sagde vi en nogle random

bogstaver som A og W –og spurgt os selv om det samme spørgsmål.

3. Herefter gik vi over i den røde zone og kiggede med skeptiske øjne på vores ideer. Det

endte ud med at vi gerne vil arbejde videre med. Da vi synes at disse nedenstående ord

faldt godt i overensstemmelse med hvad koret havde udtrykt.

4. Vi former det hele menneske

5. Læring, leg, krop og fællesskab

6. Herefter begyndte vi at tegne storyboards, som vi følte kunne få dette budskab med (se de

7 storyboards på næste side).

7. Efter at have lavet storyboards prøvede vi også at tegne dem ind i et tegneprogram for at

se hvordan det tog sig ud. Se disse på næste side.

8. Sidste del af denne proces var at gennemgå de forskellige ideer – og trække de elementer

ud, som vi synes der fungere godt. Disse opsummeres i konceptbeskrivelsen.

9. Efter at have afklaret konceptet for websitet påbegyndes udvikling af logoer. På baggrund

af mange udviklede logoer udvalgte gruppen en række elementer, som til sidst endte med

logo, som er på websitet. Se logoerne på s.19

17

Storyboards udvikling

19

Bilag 4 - Logo udvikling

20

Bilag 5 - Færdigt storyboard

Navigation/Knapper:

• Links - Tahoma - 14 pixel - #0088AA - Hover - #868686

• Links i footer - Tahoma - 14 pixel - #FFFFFF - hover - #000000

Tekstindhold:

• Titel - Tahoma - 24 pixel - #000000 - bold

• Brødtekst - Tahoma - 14 pixel - #000000

Faste grafisk elementer:

• Style: iFeature 1.1.4 af CyberChimps

• Højre menubar med Quick links

• Højre menubar med Presse links

• button_kor02.png til støt koret bannerknap

• nye_drenge1.png til reklame for optagelse bannerknap

• logo_8.png

• favicon.ico

Animationer

• iFeature slider

o faellesbilled-fokus.jpg som linker til indlæg “Fællesskab - Leg - Læring”

o kor-synger.jpg som linker til indlæg “Oplevelser for livet”

21

Bilag 6 - Designmanuel

Designmanual

Skriftype

Tekst Tahoma 14px black

Titler Tahoma 24px bold

Sidebar Tahoma 16px bold

Links Tahoma 14px #0088AA

Hover Tahoma 14px #868686

Navbar Tahoma 13px bold white

Farver

Hvid

#FFF

Sort

#000

Grå

#868686

Tahoma 14px black

Tahoma 24px bold Tahoma 16px bold

Tahoma 14px #0088AA

Tahoma 14px #868686

Tahoma 13px bold white

#868686

Blå

#0088AA

22

Bilag 7 - Vejledning til websitet

Fjerne kommentar fra indlæg og sider i wordpress

Kommentarfunktioner er blevet deaktiveret fordi de giver ekstra arbejde til websitets redaktører:

de skal besvares og renses for eventuelt spam. Vi tror på at sitet giver rigelige muligheder for

interaktion med de sociale-knapper (Facebook, Twitter, osv), Kontakt-siden og kontakformularen.

Da vi ønsker at kommentarerne er fjernet både fra indlæg og sider, har vi valgt at gå ind i koden og

"kommentere ud" de linjer, der har med kommentarerne at gøre.

De filer, vi har "hacked" er:

1- Arkiver (archive.php)

2- Enkelt indlæg (single.php)

3- Index (index.php)

4- Sider (page.php)

5. Full width Page sideskabelon (page-fullwidth.php)

For at aktivere kommentarene igen gå til Administrationspanel->Udseende->Editor.

1.-Åben filen Arkiver (archive.php). Brug din browsers tekst-søgnings funktion (normalt ved at

klikke CTRL+F) og tast "comment". Find i editoren denne linje:

<div class="comments">



</div>

Slet  som er lige efter ?>

2.- Åben filen Enkelt indlæg (single.php) og find:




</div> 



3.- I filen Index (index.php) find:


<!-- <?php comments_popup_link('No Comments »', '1 Comment

23

»', '% Comments »'); ?> -->

</div> 



4.- I filen sider (page.php) find:

<?php /*comments_template(); */?>

Slet /* som er lige inden comments.

Slet */ som er lige efter ();

5.- I filen Full width Page sideskabelon (page-fullwidth.php) find:

<?php /*comments_template(); */?>

Slet /* som er lige inden comments.

Slet */ som er lige efter ();

Er kommentarene aktive igen og ønsker man at deaktivere dem i siderne (men ikke i indlæg) kan

det være en god ide at installere og aktivere plugin No Comments on Pages

(http://wordpress.org/extend/plugins/no-comments-on-pages/).

24

Bilag 8 - Websitets forside + 4 sider

sct. clemens drengekor rapport

Documents