sct. clemens drengekor rapport
DESCRIPTION
Lone Jessen, Morten Holmboe; David Garcia og Cecilie VogelTRANSCRIPT
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
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">
<!-- <?php comments_popup_link('No Comments »Comment
»', '% Comments »'); ?> -->
</div><!--end comments-->
Slet <!-- som er lige inden <?php
Slet --> som er lige efter ?>
2.- Åben filen Enkelt indlæg (single.php) og find:
<div class="comments">
<!-- <?php comments_popup_link('No Comments »', '1 Comment
»', '% Comments »'); ?> -->
</div> <!--end comments-->
Slet <!-- som er lige inden <?php
Slet --> som er lige efter ?>
3.- I filen Index (index.php) find:
<div class="comments">
<!-- <?php comments_popup_link('No Comments »', '1 Comment
23
»', '% Comments »'); ?> -->
</div> <!--end comments-->
Slet <!-- som er lige inden <?php
Slet --> som er lige efter ?>
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/).