Projektrapport Sct. Clemens Drengekor

PROJEKTRAPPORT www.clemensdrenge.dk Ulrika Guldbæk Adams Jakob Neergaard Hausted Louise Strøh Helle Kloster Klemmensen

Index

INDHOLD 03

BAGGRUND FOR PROJEKTET (FORANALYSE)

04

HOME-metode

05

Foranalyse

06

Projektbeskrivelse

07

Afgrænsning/Projektplan

08

KICKSTART (UNDERSØGELSE)

09

Kickstart

10

Kommunikationsplan

12

ET DESIGN AF ET DRENGEKOR (DESIGN)

13 Et design af et drengekor 14

Informationsdesign/Interaktionsdesign

15

Flowchart

16

Præsentationsdesign

17

De seks designparametre

21

Komposition/Stil og stemning

Louise Strøh louisestroeh@gmail.com

22

REALISERING/EVALUERING (REALISERING)

LINK TIL SITET:

23

Realisering/Evaluering

http://multimediekursus.ats.dk/1811/louise/wp/index.php (sitet i Wordpress)

24

BILAG

KONTAKTPERSON:

http://multimediekursus.ats.dk/1811/helle/website/ (sitet i HTML/CSS)

/03

BAGGRUND FOR PROJEKTET (FORANALYSE) Denne projektrapport er skrevet på baggrund af et seks ugers uddannelsesforløb i foråret 2011 på Aarhus Tech i faget ”Multimediedesign og Interaktionsdesign”.

/04

Baggrund for projektet

HOME-METODEN Opgavens struktur tager sit udspring i HOME-metoden. HOME-metoden er en helhedsorienteret og åben metode til udvikling af digitale medier.

Metoden beskriver både projektledelse og udvikling af digitale medier, metodens formål er at systematisere arbejdet i et projektforløb, og sætte fokus på de valg man træffer undervejs. Metoden er valgt som struktur og arbejdsredskab i denne rapport, pga. dens åbne tilgang som derfor kan tilpasses de unikke aktiviteter, dokumentationer og rækkefølger i dette projektforløb.1 Da metoden er meget grundig i sin faseopdeling, fordi den er udviklet til projekter med en længere tidshorisont end vores projekt, har vi valgt at benytte de elementer i HOME-metoden, som giver mening i forhold dette projekt.

Rapporten er bygget op omkring HOME-metodens anvendelse af:

1

1

FORANALYSE

2

UNDERSØGELSE

3

DESIGN

4

REALISERING

Fischer & Oosterbaan, 2010, s. 12-13.

Baggrund for projektet

FORANALYSEN KUNDENS BEHOV OG ØNSKER TIL WEBSITET HERUNDER INFORMATIONSINDSAMLING Kunden er Skt. Clemens Drengekor, som ønsker et mere tidssvarende, vedkommende og funktionelt site, med mere interaktion og nem navigation. På baggrund af første kundebesøg og det udleverede projektoplæg er følgende elementer de vigtigste i forhold til udformning af det nye website: Sitet skal signalere seriøsitet, og dog stadig holde fast i korets kerne nemlig at det består af ”friske drenge”, hvor kammeratskab og samvær er i højsæde.

Sitet skal virke indbydende på både drenge, som ønsker at blive nye kormedlemmerog deres bagland.

Det skal fremgå, at man som en del af koret vil modtage musikalsk dannelse på et højt niveau som et springbræt til videre musikalsk uddannelse. Derfor skal sitet også kunne fungere som drengenes reference til optagelse på uddannelsesinstitutioner mv.

Rekruttering er sitets største funktion, dernæst følger information til koncertgængere, sponsorer m.m.

Sitet skal indeholde en funktion til at høre korets musik, og der skal være mulighed for hurtigt at finde frem til næste koncertdato.

Sitet skal fremadrettet opdateres på frivillig basis, og derfor skal det være et nemt og overskueligt site at opdatere og udbygge.

Websitet skal tale til flere målgrupper.2 De valg der er taget i gruppens arbejdsproces i forhold til sprog, design og virkemidler er taget ud fra de opstillede elementer.

2

Dette behandles yderligere i kommunikationsplanlægningen.

/05

/06

Baggrund for projektet

PROJEKTBESKRIVELSE Skt. Clemens Drengekor ønsker et nyt design til deres website. Et design der skal være i et tidssvarende, æstetisk og funktionelt design. Formålet er at skabe en skarpere profil af koret, dets formål og aktiviteter og herved hverve nye medlemmer, sponsorere, samarbejdspartnere, formidling af koncertdatoer til koncertgængere, udbygge det eksisterende netværk af drengekor i ind- og udland og videreformidle information om koret på en mere indbydende måde.

Målsætningerne for projektet er blandt andet, at flere drenge/mænd skal søge om optagelse i koret, at det bliver nemmere for besøgende at navigere rundt på sitet samt, at man som besøgende får et indtryk af koret som værende seriøse men dog stadigvæk løssluppent.3

FORANALYSE

UNDERSØGELSE/DESIGN

Brainstorm Mindmap Kommunikationsplan Flowchart

Projektoplæg Baggrundsmateriale

Designudvikling Mock ups Informationsdesign Interaktionsdesign Præsentationsdesign

REALISERING

Kodning HTML CSS

Overlevering til kunden www.clemensdrenge.dk designmanual projektrapport

Kundebesøg Information Krav/ønsker Indsamling Information Inspiration

Fischer & Oosterbann, 2010, s. 31.

3

Projektets forløb tager udgangspunkt i udviklingsmetoden ’vandfaldsmetoden’, som er den lineære og faseopdelte udviklingsproces, med vægt på løbende godkendelser og dokumentation.3 Undervejs i arbejdsprocessen blev vi opmærksomme på, de begrænsninger vandfaldsmetoden har i forhold til uforudsete udfordringer i projektforløbet. Derfor endte vores udviklingsmetode med at være en vekselvirkning mellem vandfaldsmetoden, prototypen og den agile metode. Vi har i nogle processer været lineære og meget faseopdelte i arbejdsgangen, i andre processer har vi afprøvet skitser, som vi løbende har forbedret, samtidig har vi i andre processer været nødsaget til hurtig at omstille vores arbejdsgang, når vi endte i en blindgyde.

Konceptudvikling Udtryk Navigation Funktioner

Implementering Wordpress

Baggrund for projektet

AFGRÆNSNINGER

PROJEKTPLAN OG DEADLINE

Projektet fokuserer på form, design, funktionalitet og det æstetiske udtryk. Vi har haft fokus på den retorik, der skal være kendetegnende for sitet som en del af korets ’nye ansigt’. Vi har ikke koncentreret os om de eksisterende, fortællende tekststykker.

Projektplan og deadline er vedlagt som bilag 1.

Der er ikke udarbejdet et fuldstændigt site, hvor alle undersider er funktionelle men derimod en visuel ramme for det endelige site, hvori design af tre forskellige undersider er udformet.

/07

/08

KICKSTART (UNDERSØGELSE)

Kickstart

KICKSTART Rapporten vil hovedsagligt lægge vægt på produktaktiviteterne frem for procesaktiviteter i HOME-modellens forskellige faser. På baggrund af foranalysen og kundeinterviewet udarbejdede vi et mindmap ud fra en brainstorm på begrebet ’drengekor’. Herved udpegede vi de nøgleord, vi så som kendetegnende for et drengekor. Ved en kobling mellem dette og kundeinterviewet nærmede vi os budskabet dvs. de centrale tematikker, oplevelser og visuelle ’fortællinger’, som sitet skal give sine besøgende.

Dette behandles yderligere i informationsdesignet og senere, hvordan det udtryksmæssigt omsættes i præsentationsdesignet. Først redegøres for kommunikationsplanlægningen som rammesætter designet af sitet. Kommunikationsplanens formål har været at holde fokus på målgrupperne og sitets budskab. Ligeledes er det vigtigt, at kommunikationsplanen afspejles i de forskellige designdomæner – informations- interaktions- og præsentationsdesign samt i sitets stil og stemning.

/09

/10

Kickstart

KOMMUNIKATIONSPLAN AFSENDER

BUDSKAB

Websitets afsender er Skt. Clemens Drengekor. Der har eksisteret i 8 år med tilknytning til Aarhus Domkirke, koret er det eneste drengekor i den østjyske region. Der er 45 medlemmer i alderen fra 8 til 60 år. En af de centrale ideer bag koret er at lave et forum for drenge, så de kan skabe sig en seriøs musikalsk (ud)dannelse ved siden af deres almindelige skolegang.

Vægten er lagt på, at sang og musik er sjovt, derfor er fællesskab og kammeratskab i fokus og knap så meget traditioner og formalier.

Websitet skal først og fremmest anses, som det ’ansigt’ nye potentielle medlemmer - og deres forældre - møder, når de påtænker at søge om optagelse i koret. Sitet skal signalere seriøsitet i form af den musikalske (ud)dannelse, drengene får ved at deltage i koret. Samtidig skal sitet vise, at det er helt almindelige og glade drenge, der har det sjovt i koret. Det skal vise det kammeratskab og løssluppenhed, der ifølge korlederen er vigtige værdier og elementer i korets musikalske praksis, læring og fællesskab. Samlet til en enkelt sætning kan budskabet formuleres til: ”Skt. Clemens Drengekor – en professionel ’sanglegeplads og en musikalsk oplevelse for livet”

AFSENDER

SKT. CLEMENS DRENGEKOR

BUDSKAB

“EN PROFESSIONEL SANGLEGEPLADS”

MÅLGRUPPE PRIMÆR SEKUNDÆR TERTIÆR

Kickstart

MÅLGRUPPER Websitets primære målgruppe er nye potentielle kormedlemmer, dvs. primært unge drenge i alderen ca. 8 – 15 år. Da det ofte ifølge korlederen er forældrene, der er de første til at søge informationer om koret, vil det også være denne aktørgruppe, sitet hovedsageligt har i sigte. Den nuværende forældregruppe består af lærere, præster, forældre med længerevarende uddannelse, konservatorieuddannede og/eller forældre, der dyrker musik i deres fritid4. Det synes ifølge korlederen også at være inden for dette samfundsmæssige segment, at den fremtidige forældremålgruppe skal findes. Det er vigtigt, at både drenge og forældre kan identificere sig med sitet derfor må det hverken virke for barnligt i sit udtryk eller for seriøst.

Den sekundære målgruppe er personer, der ønsker at deltage i korets koncerter. Her skal sitets bruger hurtigt (højst et klik) få adgang til korets musik. Der skal ligeledes være en overskuelig oversigt over korets fremtidige koncerter.

Målgruppen kan karakteriseres ved at have interesse i kor- samt klassisk musik og den mere traditionelle/konservative kulturscene. I denne målgruppe findes også familie, venner og bekendte af korets medlemmer. Grunden til, at dette er en sekundær målgruppe er, at korets koncerter bliver annonceret i en lang række andre medier.

Som tertiær målgruppe findes en række andre interessenter, som vi lister herunder: Journalister der søger informationer om koret, lytte til deres musik eller finde billeder til pressemeddelelser.

Organisationer/private fonde og personer, der ønsker at støtte eller allerede støtter koret økonomisk. Disse aktører skal kunne finde informationer om, hvordan de kan større koret.

Uddannelsesinstitutioner der ønsker at få kendskab til drengenes musikalske uddannelse i koret hvis drengene i deres videre karriere refererer til deres tid i koret.

4

Info er fra kundens oplæg om koret.

/11

/12

ET DESIGN AF ET DRENGEKOR (DESIGN)

Et design af et drengekor

ET DESIGN AF ET DRENGEKOR I designet har vi arbejdet i vekselvirkning mellem produktaktiviteterne informationsdesign, interaktionsdesign og præsentationsdesign. Vi er løbende vendt tilbage for at korrigere informationsstruktur, flowcharts og storyboards (bilag 3) i forhold til de muligheder og udfordringer vi stødte på undervejs. I designudviklingen skelnes mellem en intern og en ekstern designmanual. Førstnævnte dokumenterer de overvejelser, redskaber og produkter vi har produceret for at nå frem til det endelige site og fungerede samtidig guideline i kodearbejdet i html/css. Den eksterne designmanual er det udspecificerede dokument, kunden eller en eventuel webudviklingsgruppe modtager for at kunne lave sitet.

INTERN DESIGNMANUAL

EKSTERN DESIGNMANUAL

Informationsstruktur Flowcharts Storyboards Mock ups

Designkoncept Designelementer Grid Billedstil Navigationsprincipper Tekstformatering

/13

/14

Et design af et drengekor

INFORMATIONSDESIGN

INTERAKTIONSDESIGN

I informationsdesignet har vi arbejdet med, hvilke informationer og retorikker sitet skal indeholde, samt hvordan disse skal struktureres. Vi besluttede på baggrund af foranalysen og undersøgelsesfasen, at tematikker som fællesskab og kammeratskab skulle være centrale i sitets retorik. Dette formidler sitet ved at integrere begreber som ”din”, “vores” og “vi” i den generelle sprogbrug i sitets navigationmenu. De personlige pronomener understreger den direkte henvendelse til sitets brugere.

Interaktionsdesignet beskriver, hvordan brugeren skal interagere med mediet, og til dette har vi udviklet et flowchart, der viser sitets navigationsstruktur. Et generelt krav til sitet har været en simpel navigationsstruktur, hvor graden af interaktion er lav, så brugeren er fremme ved ønsket information ved få klik6. Flowchartet er på baggrund af informationsstrukturen bygget op efter primær, sekundær og tertiære målgrupper, og disse præsenteres således horisontalt i menulinjen. Førstnævnte er koncentreret ved menu-linjens første to links ’Aspiranter’ og ’Fællesskabet’. Dernæst kommer ’Koncerter’, ’Støtter’ og ’Links’. Under menu-linket ’Medlemmer’ linkes til korets interne side med mailadresser. Vi har valgt en hierarkisk struktur med en hovedmenu, der forgrener sig i flere undersider, og hvor hovedmenuen følger med disse sider. Dette er en overskuelig opbygning, der gør det let for den besøgende at orientere sig og navigere på sitet.

Til dette arbejde skrev vi forslag på på post-its rettet mod modtagergrupperne, denne plan fungerede også som vores informationsstruktur (se bilag 3). På denne måde kunne vi flytte rundt med rækkefølgen af menupunkter i navigationsmeuen og de forskellige undermenuer, indtil vi fandt den struktur og informationsstruktur, der er mest optimalt og logisk for sitet og dets budskab.

Nye kormedlemmer har vi valgt at kalde ’Aspiranter’, da dette er hvad branchen, generelt benytter om det fællesskab, man træde ind i, når man bliver optaget på en musikuddannelse. Desuden signalerer det, at der er tale om en musikalsk dannelse med krav om optagelsesprøve.

På forsiden linkes til en medieafspiller, hvor der er mulighed for, at lytte til korets musik. Ligeledes er der mulighed for, at linke videre til koncertlisten som figurerer i en oversigtboks over de nærmeste koncerter. På forsiden findes et nyheds- og billedefelt, hvor der looper tre nyheder/billeder, som løbende kan opdateres af kunden.

For at imødekomme kundens ønske om at fremhæve fonde og private, der yder økonomisk bidrag til koret, har vi samlet en kategori, der hedder ’Støtter’.

Den lave grad af interaktion kan forklares ved, at vi har valgt, at brugeren ikke kan ’trække’, ’fange’ eller ’samle’ virtuelle objekter med markøren på sitet, Fischer & Oosterban, 2010, s. 152

6

Et design af et drengekor

FLOWCHART

FORSIDE

ASPIRANTER

FÆLLESKABET

KONCERTER

STØTTER

LINKS

MEDLEMMER

Bliv en del af drengekoret

Lær koret bedre at kende

Tidligere og kommende koncerter

Fonde og private bidrag

Andre kor fra nær og fjern

Indgang til den interne side

hvad kan vi tilbyde?

hvem er vi?

vores koncerter

vores støtter

din optagelsesprøve

vores historie

hør vores musik

støt os

vores musikalske rejser

omtale af os

se vores billeder

bestyrelsen

vedtægter

eksterne links

internt site

/15

/16

Et design af et drengekor

PRÆSENTATIONSDESIGN Præsentationsdesignet handler om at iklæde indhold og interaktioner den rigtige form. Vi redegør her for, hvordan vi grafisk har arbejdet i felterne mellem funktionalitet, æstetik, teknik og ud fra de overvejelser og undersøgelser, vi har gjort undervejs.

Som udgangspunkt fandt vi websites, der i vores øjne havde en funktionel og æstetisk opbygning. Vi printede screen-shots af de udvalgte sites, og udvalgte de delelementer herunder header, footer, menubokse og plugins m.m, som lå tættest på den vison, vi havde om det nye website. Elementerne blev klippet ud og sat på en tom browserside i print. Den tromme browserside blev i bedste Jørn Clevin stil til vores storyboard og udgangspunktet i forhold til det grafiske design og udtryk.

I Photoshop lavede vi herefter udkast til de sites, vi har valgt at udvikle.

Her havde vi mulighed for at gå mere indgående til værks i det grafiske layout med fokus på farver, kontraster skrifttyper, billeder, stil og stemning for til sidst at nå frem til de præcise informationer til den eksterne designmanual. Photoshop-billederne har ligeledes fungeret som vores ’mock ups’, som vi efterfølgende har brugt som skabelon til kodning i html/css. I det følgende redegøres for de grafiske og kompositoriske overvejelser, der er foretaget i forbindelse med udviklingen af sitet.

Et design af et drengekor

DE SEKS DESIGNPARAMETRE Igennem de beskrevne mindmaps, storyboards, internt designmanual, mock ups og informations-, interaktions- og præsentationsdesignet tog websitet sin form ud fra de seks designparametre som har været pejlemærker i udviklingen af websitet.

FORM For at skabe et overskueligt site, hvor kundens ønsker er repræsenteret i et seriøs og moderne udtryk, er scroll ikke en del af forsiden. Derved er alt på sitet synligt ved første øjekast. Sitet fremstår enkelt i sit udtryk, og der er et centralt blikfang. Formen på siden er opbygget – på nær dropdownmenuerne – i vandrette linjer: en header med korets logo i venstre side og en søgefunktion i højre side, en contentboks med navigationsmenuer øverst, et vandret centeret billede/nyhed som blikfang, en boks med information om korets næste koncert og et plugin til afspilning af musik, en internt footer placeret i contentboksen med kontaktinformationer og henvisning til Facebook, Twitter og Youtube. Henvisningerne til de social medier er med for at gøre siden endnu mere interagerende med brugeren, da det er de medier, drengene benytter, derved vil sitet blive en del af de sociale medier og forhåbentlig benyttet endnu mere. Der er valgt dropdown til menuerne for at gøre sitet mere brugervenligt.

/17

/18

Et design af et drengekor

Et design af et drengekor

TYPOGRAFI

ILLUSTRATION

Som typografi er der valgt to skrifttyper, Eurostyle og Ariel.

Den første illustration der møder brugeren, når han surfer ind på websitet, er logoet for Skt. Clemens Drengekor, som er placeret i øverste venstre hjørne. Baggrunden er skabt af rå sten, hvor logoet er mejslet ind. Det lidt rå design til logo og baggrund, symboliserer seriøsitet, og de rå upoleret sten som Aarhus Domkirke består af. De første overvejelser gruppen gjorde, om logoet var, at det ud over det seriøse også skulle symbolisere fællesskab og sjov, men som logoet fremstår i sin endelige form, peger det mest mod det seriøse og rå. Et valg der blev truffet for at gøre logoet mere strømlinet, moderne og enkel i sit udtryk, og fordi vi besluttede at fællesskabet og det sjove, skulle udtrykkes i websitets billedehistorik.

Derved er der skabt en kontrast mellem logoet og billederne, som giver vekselvirkningen mellem det seriøse og useriøse. Logoets rå udtryk, er også valgt for at skabe en kontrast til de associationer, man som regel forbinder med et drengekor som værende traditionelt, regelstyret og lidt kedelig. Logoets udtryk taler derfor til målgruppen, som er nutidens drenge og deres ofte veluddannede forældre, hvor drengene vil have noget andet end et traditionelt drengekor, og forældrene vil have noget, der kan give deres børn en solid ballast.

Eurostyle er valgt til den tekst på sitet, der er statisk. Eurostyle er en font, der veksler mellem det rå og elegante. Ligeledes er det en moderne font, der benyttes inden for kreative miljøer såsom reklame, design og arkitektur. Fonten har ingen “fødder”, og derfor har den et ’ungt’ udtryk.

Arial er valgt til den dynamiske tekst, da den er websikker.

De overvejelser gruppen har gjort omkring fontstørrelsen, er at der skulle være kontraster i tekststørrelsen som derved skaber dynamik, flere dimensioner og liv på sitet.

Af andre illustrationer er der på forsiden lagt vægt på en central vandret domineret nyheds-/billedeserie, som kører i et loop af tre forskellige billeder. Et valg som skaber bevægelse og nyhedsværdi på sitet. Dette er et godt blikfang, og det brede format giver harmoni og ro i sitets opbygning.

Illustrationerne på undersiderne er, som på forsiden, en vekselvirkning mellem det seriøse og useriøse bl.a. undersitet ”Hvem er vi?” hvor billederne er i sort/hvid for det seriøse – igen med det vandrette som fællesnævneren – med det useriøse illustreret i drengenes mimik.

/19

/20

Et design af et drengekor

FARVE De valgte farver til websitet er holdt i neutrale nuancer for at skabe dybde og ro men med en blå farve som det friske og uformelle og som hover til aktive links på sitet. Den blå farve symboliserer det useriøse og legende på siden. Desuden er blå en farve, som symboliserer dreng.

ANIMATION Vi har valgt ikke at benytte animationer på sitet, fordi nyheds-/billedeloopet giver liv og bevægelse. Hvis man ud over dette havde tilføjet animationer, vurderede vi, at der ville komme til at ske for meget på sitet og få et rodet udtryk.

LYD Der er på forsiden, efter ønske fra kunden, lavet en musikafspiller til afspilning af korets musik. Formålet med denne funktion er at brugeren, kan få forsmag på korets kunnen. I idekataloget bilag nr. 5 beskriver vi, hvorfor det vil fungerer godt, hvis der er mulighed for at kommentere på de forskellige lydfiler i en blokfunktion, men dette er en udvikling af websitet, vi vil lade kunden udvikle. Det er bevidst valgt, at brugeren skal gøre en aktiv handling for at afspille musik, frem for at der automatisk starter en musikfil, når man kommer ind på sitet, eller når markøren glider forbi et billede eller lignende, da dette for nogle kan virke som et irritationsmoment.

Et design af et drengekor

KOMPOSITION

STIL OG STEMNING

Sitet er klassisk bygget op i overensstemmelse med kommunikationsmodellen AIDA , som er en enkel model til at skabe interesse omkring ens produkt.

Ud fra kommunikationsplanen udviklede vi den stil og stemning, som vi mener harmoner bedst, med kundens ønsker. Desuden var det et bevidst valg, at siden skulle skille sig ud fra andre drengekors websites´, og at sitet skulle se moderne og professionelt ud.

ATTENTION

Som det er redegjort for i afsnittet om de seks designparametre, er stilen lagt i et enkelt snit med rolige vandrette linjer og en gennemgående pangfarve, i dette tilfælde en blå farve. Vi mener, at disse valg har skab et site, som lever op til budskabet formuleret i kommunikationsplanen, nemlig at sitet skal være det seriøse ansigt til den primære målgruppe, som er en målgruppe med ressourcer, og med forældrene der har videregående uddannelser. Men stadigvæk fremgår det af sitet, især ud fra brugen af billederne, at dette kor ulig andre drengekor ikke går så meget op i formalier og traditioner. Da der netop er mere end én målgruppe, skal sitet tale til alle målgrupperne, og det er lykkedes netop ved at holde fast i det enkelte, moderne snit.

Logoet er placeret, i overensstemmelse med eye-tracking, i øverste venstre hjørne. Dette er hvor, ens øje først falder, når man danner overblik over et site, og det lidt anderledes logo for et drengekor skaber den første opmærksomhed.

INTEREST Dernæst falder øjet på det store billede midt på sitet, som skal vække interesse for sitets indhold. Bevidst har vi valgt varme og levende billeder som kontrast til det rå og formelle i logoet og dets baggrund. Dermed er vekselvirkningen mellem det seriøse og fællesskabet og en interesse for netop dette drengekor vakt.

DESIRE I billedet er der placeret en infoboks med nyheder for koret, som skal lokke brugeren til at udforske sitet.

ACTION Nu hvor interessen for, og ønsket om, at udforske sitet mere indgående er skabt, er action den bevægelse hvor brugeren udforsker menupunkterne og websitet mere indgående og enten melder sig til optagelsesprøven, afspiller musik eller noterer sig korets næste koncert.

/21

/22

REALISERING EVALUERING

Realisering

REALISERING

EVALUERING

I projektets realiseringsfase har vi arbejdet ud fra arbejdsprocessen SCRUM7. Denne tilgang sikrer ideelt set hastighed og dynamik i projektet, hvilket har været brugbart med den korte tidshorisont. I gruppen har vi i uddelegeret arbejdsopgaver imellem os, således at vi hver især har været hovedansvarlige på arbejdsopgaver i udviklingen af sitet. I overensstemmelse med SCRUM har vi dagligt holdt møder (Daily SCRUM Meeting). Formålet har været at berette og vidensdele om de forskellige opgaver, udfordringer og problemstillinger, der er opstået undervejs. På denne måde har de enkelte medlemmer haft mulighed for at få “fingrene” ned i de forskellige produktniveauer.

Med udviklingen af sitet har vi skabt et ’ansigt’ af Skt. Clemens Drengekor, der fremstår i et mere tidssvarende og seriøst design, der samtidig viser fællesskabet, løssluppenheden og den kammeratlige atmosfære i koret. Vi har forsøgt at skabe et billede af den musikalske (ud) dannelse, og legeplads som er centralt for koret. Vi har integreret alle de krav og ønsker, som kunden har haft i forhold sitet og tillige lavet et idékatalog, som kunden kan overveje at integrere på sitet.

Vi har valgt at udvikle sitet i Notepad++ for derefter at overføre koderne til open source-/cms-systemet Wordspress, via STARKERS. Wordpress er kunden kendt med, og sitet vil i Wordpress være let at vedligeholde og opdatere. Grunden til at vi har valgt at udvikle siden i html/css er, at det giver større frihed til at udvikle designet imellem æstetik, funktion og kundens ønsker og behov. Dette skal sammenlignes med alternativet at udvikle sitet i installeret wordpress-tema, hvor man er begrænset af de rammer, temaudvikleren har sat. Disse kan som regel redigeres, men vi argumenterer at begrænsningerne er større end mulighederne.

Desuden har vi haft et ønsket om at afprøver vores færdigheder i html-/ css-kodning, der har været centralt i dette kursus’ formålsbeskrivelse.

Det viste sig dog ikke at være så ligetil at overføre et html/css kodet websitet til Wordpress via STARKERS , da den turtorialvideo, som var en del af kursets pensum, om at skabe et wordpress websitet ud fra html/css koder var illustreret i et ældre program, end det vi har benyttet på kurset. Det, som vi regnede med, ville spare os tid og skabe et website, der ikke ligner et typisk wordpress-tema, viste sig at være langt mere ressourcekrævende end først antaget. På trods af udfordringerne, lykkedes det at overføre vores individuelle designet website fra html/ css til Wordpress, men det krævede som nævnt mere arbejde end først antaget.

Fischer & Oosterban, 2010: 185

7

Gruppen har bestået af fire medlemmer med forskellige faglige baggrunde, der har suppleret hinanden på en konstruktiv måde. Vores tværfaglige tilgang har betydet, at vi har udfordret hinandens idéer og således arbejdet meget reflekteret. Dette ser vi som et positivt element, som gerne skulle afspejle det endelige produkt.

Arbejdet med den interne designmanual - arbejdet med mindmaps, post-its, mock-ups og storyboards - har bevirket, at vi har haft et arbejdsfundament, der har reduceret grundlæggende uenigheder, og samtidigt gjort det lettere at kode sitet.

/23

/24

BILAG 01

PROJEKTPLAN

02 LOGOSKITSER 03 INFORMATIONSSTRUKTUR - POST-ITS BILLEDER 04 EKSTERN DESIGNMANUAL 05 IDÉKATALOG

Bilag 01/ Projektplan

PROJEKTPLAN 30.maj

31.maj

01.juni

02.juni

03.juni

04.juni

05.juni

06.juni

07.juni

08.juni

09.juni

10.juni

Foranalyse Kundebesøg Projektbeskrivelse Undersøgelse Grafisk research af hjemmesider Kommunikationsplan Design Mind maps Storyboards Flowcharts Rentegning af logo Visuel mockups (PSD filer) Slicing Realisering Andet kundebesøg HTML/CSS Wordpress Ekstern designmanual Uploades Skriv rapport Layout rapport

Slut

Kodning

Design

Undersøgelse

Foranalyse

Start

Bilag 01/ Projektplan Planlagt tid

PROJEKTPLAN

Faktisk tid

Foranalyse Kundebesøg Projektbeskrivelse

1,5

1,5

2

2

1,5 1

0,75 0,5

2 2 1 3 1 1

0,5 1 2,5 6 1 3

1 4 6 2 0,5

0,25 16 12 3 0,5

30 3 62,5

30 2 82

Undersøgelse Grafisk research af hjemmesider Kommunikationsplan Design Mind maps Storyboards Flowcharts Rentegning af logo Visuel mockups (PSD filer) Slicing Realisering Andet kundebesøg HTML/CSS Wordpress Ekstern designmanual Uploades Skriv rapport Layout rapport I alt

Bilag 02/logoskiter

LOGOSKITSER

Bilag 03/ Informationsstruktur

INFORMATIONSSTRUKTUR

Bilag 04/ekstern designmanual

EKSTERN DESIGNMANUAL Grid Designelementer Billedstil Navigationsprincipper Tekstformatering

Bilag 04/ekstern designmanual

GRID/BOKSE Wrapper

960px

Header

15px

75px

173px

Søgeboks 80px

Menubar

Dropdown

130px

Sprogversionering

65px

190px

Nyhedsboks

290px 680px

485px

220px 60px 130px

Koncertboks Footer

25px

Musikeksempler

Bilag 04/ekstern designmanual

GRID/MARGIN OG PADDING

20px

20px 15px

20px

20px

50px

20px

20px

Bilag 04/ekstern designmanual

DESIGNELEMENTER/LOGO Logoet er placeret i venstre hjørne i headeren.

Loget flugter med contentboksen.

Kilde: logo.png

175px 30px

Bilag 04/ekstern designmanual

DESIGNELEMENTER/BILLEDGALLERI Blikfang på forsiden er et billedgalleri der køre i loop. Billederne er forsynet med en tekst der fortæller noget om koret, reklamere for kommende evnts eller som i eksemplet søger nye drenge.

960px

290px

Titel: Undertitel: Tekstboks:

Eurostile, bold, 24px, # 00baff, RGB: 0/186/255 Eurostile, Regular, 15px, #fff, RGB: 255/255/255 w:670px h:82px, #000, RGB: 0/0/0, transparens 85%

Bilag 04/ekstern designmanual

DESIGNELEMENTER/FOOTER Footeren er en intern footer, hvilket vil sige at den visuelt er placeret ovenpĂĽ indholdsboksen. I footeren er der kontaktinformationer til korlederen og genvej til facebook, twitter og youtube.

960px 25px

Tekst: Lys farvegradient: Mørk farvegradient:

Arial, Regular, 8,5px, # b2b2b2, RGB: 178/178/178 # 6d6d6d, RGB: 109/109/109 # 4a4a4a, RGB: 74/74/74

Bilag 04/ekstern designmanual

DESIGNELEMENTER/KONCERTBOKS OG MUSIKEKSEMPLER “Vores næste koncerter” og “musikalske smagsprøver” er tekstfelter der er placeret under billedgalleriet, som er henholdsvist align left og align right.

Titel: Undertitel:

Arial, Regular, 10px, # 000, RGB: 0/0/0 Arial, Regular, 8,5px, # 939393, RGB: 147/147/147

Dato/link: Arial, bold, 13px, # fff, RGB: 255/255/255 Dato/link-hover: Arial, bold, 13px, # 000, RGB: 0/0/0 Tekstboks: w:120px h:20px, #00baff, RGB: 0/186/255

Titel: Undertitel:

Arial, bold, 15px, uppercase, #000, RGB: 0/0/0 Arial, Regular, 10px, #888, RGB: 136/136/136

Bilag 04/ekstern designmanual

BILLEDSTIL Billederne på sitet står i kontrast til grafiken, og er valgt i varme, menneskelige fraver for at symbolisere fællesskabet og kammeratskabet. Skt. Clemens drengekor er en fritidsaktivitet derfor har vi valgt billederne med henblik på at motivet skal være sjovt og underholdende og er derfor gået udenom billeder der kan relateres til skole, med tavle og bøger.

Billederne på siden “Hvem er vi” er imodsætning til de øvrige billeder sort/hvide og her er det igen motivet der gør forskellen, nemlig at korets medlemmer laver sjove grimasser.

w:284px h:157px

w:170px h:70px

w:284px h:157px

w:170px h:70px

w:170px h:70px

Se: Designelementer/billedgalleri

Bilag 04/ekstern designmanual

NAVIGATIONSPRINCIPPER/NAVIGATIONSMENU Navigationsmenuen (niveau 1) er placeret under logo, og er den faste ryggrad p책 siden. Menuen forsvinder aldrig og det er den alle undersider styres fra. Der er en dropdown funktion hvor undersiderne (niveau 2) kommer til syne.

Links: Arial, Regular, 9,5px, #ccc, RGB: 204/204/204 Hover: Arial, Regular, 9,5px, #00baff, RGB: 0/186/255

Menupunkt: Undertitel: Tekstboks: Menupunkt: Undertitel:

Eurostile, bold, 12px, #00baff, RGB: 0/186/255 Eurostile, Regular, 9px, #00baff, RGB: 0/186/255 w:130px h:190px, #000, RGB: 0/0/0, transparens 80%

Eurostile, bold, 12px, #000, RGB: 0/0/0 Eurostile, Regular, 9px, #383838, RGB: 56/56/56

Bilag 04/ekstern designmanual

TEKSTFORMATERING/TYPOGRAFI SPECIFIKATION STATISK TYPOGRAFI

Eurostile er den identitetskabende font. Fonten bruges på statiske tekster, altså tekster der ikke skal ændres. Eurostil bruges både i regular og bold.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 1234567890 abcdefghijklmnopqrstuvwxy Eurostile regular

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 1234567890 abcdefghijklmnopqrstuvwxy Eurostile bold

DYNAMISK TYPOGRAFI

Arial bruges til dynamisk (html) tekst, altså tekst der skal kan ændres løbende. Ariale bruges både i regular og bold.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 1234567890 abcdefghijklmnopqrstuvwxy Arial regular

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 1234567890 abcdefghijklmnopqrstuvwxy Arial bold

Bilag 04/ekstern designmanual

TEKSTFORMATERING/FARVE SPECIFIKATION STATISK TYPOGRAFI

Sitets farver er holdt i sort-hvid skala med undetagelse af sitets billeder og den gennemg책ende bl책, pang farve.

Den bl책 farve bruges til at guide, eftersom elementer med den bl책 farve er integrerbare.

#000

rgb 0/0/0

#383838

rgb 56/56/56

#4a4a4a

rgb 74/74/74

#6d6d6d

rgb 109/109/109

#939393

rgb 147/147/147

#fff

rgb 255/255/255

#00baff

rgb 0/186/255

Bilag 05/idekatalog

IDEKATALOG TIL YDERLIGERE UDVIKLING AF WEBSITET På undersiden ”Din optagelsesprøve” kunne man lægge en video ind af hvordan en optagelsesprøve foregår, for at gøre det mere visuelt og håndgribelig hvad den går ud på.

I stedet for at benytte google translator, forslås det at man bruger ressourcer på professionelt at få oversat de væsentligste sider til f.eks. engelsk og tysk.

Undersiden ”links” kunne godt kategoriseres for mere overskuelighed.

Undersiden ”Hør vores musik” kunne med fordel tilføjes en blokfunktion/ kommentarfelt, derved kan besøgende beskrive deres oplevelser, følelser mv. med koret og dets musik.

Undersiden ”støtter” kunne tilføjes en betalingsformular således man som økonomisk støtte kan indbetale sit bidrag direkte fra siden.