projektrapport sct. clemens drengekor

PROJEKTRAPPORTwww.clemensdrenge.dkUlrika Guldbæk AdamsJakob Neergaard HaustedLouise StrøhHelle Kloster Klemmensen

INDHOLD

Index

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

22 REALISERING/EVALUERING (REALISERING)

23 Realisering/Evaluering

24 BILAG

KONTAKTPERSON:Louise Strø[email protected]

LINK TIL SITET:

(sitet i Wordpress)

(sitet i HTML/CSS)

BAGGRUND FOR PROJEKTET(FORANALYSE)

/03

Denne projektrapport er skrevet på baggrund af et seksugers uddannelsesforløb i foråret 2011 på Aarhus Tech i faget ”Multimediedesign og Interaktionsdesign”.

KONTAKTPERSON:

LINK TIL SITET:

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

HOME-METODENOpgavens struktur tager sit udspring i HOME-metoden. HOME-metodener 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ættefokus på de valg man træffer undervejs. Metoden er valgt som struktur ogarbejdsredskab 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:

FORANALYSE

UNDERSØGELSE

DESIGN

REALISERING

1

2

3

4

/04 Baggrund for projektet

/05Baggrund for projektet

FORANALYSEN

Kunden er Skt. Clemens Drengekor, som ønsker et mere tidssvarende,vedkommende og funktionelt site, med mere interaktion og nem naviga-tion. På baggrund af første kundebesøg og det udleverede projektoplæger følgende elementer de vigtigste i forhold til udformning af det nye web-site:

De valg der er taget i gruppens arbejdsproces i forhold til sprog, design ogvirkemidler er taget ud fra de opstillede elementer.

KUNDENS BEHOV OG ØNSKER TIL WEBSITET HERUNDER INFORMATIONSINDSAMLING

Sitet skal signalere seriøsitet, og dog stadig holde fast i korets kernenemlig at det består af ”friske drenge”, hvor kammeratskab og sam-væ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 tilkoncertgæ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 detvære et nemt og overskueligt site at opdatere og udbygge.

Websitet skal tale til flere målgrupper.2

2 Dette behandles yderligere i kommunikationsplanlægningen.

/06 Baggrund for projektet

PROJEKTBESKRIVELSESkt. Clemens Drengekor ønsker et nyt design til deres website. Et design der skal være i et tidssvarende, æstetisk og funktionelt de-sign. Formålet er at skabe en skarpere profil af koret, dets formål og aktiviteter og herved hverve nye medlemmer, sponsorere, sa-marbejdspartnere, 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ændskal søge om optagelse i koret, at det bliver nemmere for besøgendeat 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

3Fischer & Oosterbann, 2010, s. 31.

Projektets forløb tager udgangspunkt i udviklingsmetoden ’vand-faldsmetoden’, 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 pro-jektforlø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 faseop-delte 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.

BrainstormMindmapKommunikationsplanFlowchart

KonceptudviklingUdtrykNavigationFunktioner

IndsamlingInformationInspiration

KundebesøgInformationKrav/ønsker

ProjektoplægBaggrundsmateriale

DesignudviklingMock upsInformationsdesignInteraktionsdesignPræsentationsdesign

KodningHTMLCSS

ImplementeringWordpress

Overlevering til kundenwww.clemensdrenge.dkdesignmanualprojektrapport

FORANALYSE UNDERSØGELSE/DESIGN REALISERING

/07Baggrund for projektet

AFGRÆNSNINGERProjektet fokuserer på form, design, funktionalitet og det æste-tiske udtryk. Vi har haft fokus på den retorik, der skal være ken-detegnende for sitet som en del af korets ’nye ansigt’. Vi har ikkekoncentreret os om de eksisterende, fortællende tekststykker.

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.

PROJEKTPLAN OG DEADLINEProjektplan og deadline er vedlagt som bilag 1.

KICKSTART (UNDERSØGELSE)

/08

KICKSTART (UNDERSØGELSE)

/09Kickstart

KICKSTARTRapporten vil hovedsagligt lægge vægt på produktaktiviteterne frem for procesaktiviteter i HOME-modellens forskellige faser. På baggrund af for-analysen og kundeinterviewet udarbejdede vi et mindmap ud fra en brain-storm 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. Kom-munikationsplanens 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æsenta-tionsdesign samt i sitets stil og stemning.

/10 Kickstart

KOMMUNIKATIONSPLAN

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 cen-trale 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 kam-meratskab i fokus og knap så meget traditioner og formalier.

AFSENDERWebsitet 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 opta-gelse i koret. Sitet skal signalere seriøsitet i form af den musikalske (ud)dan-nelse, 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”

BUDSKAB

AFSENDER BUDSKAB MÅLGRUPPESKT. CLEMENS DRENGEKOR “EN PROFESSIONEL

SANGLEGEPLADS”PRIMÆR

SEKUNDÆRTERTIÆR

/11Kickstart

Websitets primære målgruppe er nye potentielle kormedlemmer, dvs. primærtunge 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, konser-vatorieuddannede 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 kon-certer. 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 listerherunder:

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.

MÅLGRUPPER

4 Info er fra kundens oplæg om koret.

ET DESIGN AF ET DRENGEKOR(DESIGN)

/12

/13Et design af et drengekor

ET DESIGN AF ET DRENGEKOR(DESIGN)

ET DESIGN AF ET DRENGEKORI designet har vi arbejdet i vekselvirkning mellem produktaktiviteterne informa-tionsdesign, interaktionsdesign og præsentationsdesign. Vi er løbende vendttilbage for at korrigere informationsstruktur, flowcharts og storyboards (bilag 3)i forhold til de muligheder og udfordringer vi stødte på undervejs. I designud-viklingen skelnes mellem en intern og en ekstern designmanual. Førstnævntedokumenterer 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, kun-den eller en eventuel webudviklingsgruppe modtager for at kunne lave sitet.

INTERNDESIGNMANUAL

EKSTERNDESIGNMANUAL

InformationsstrukturFlowchartsStoryboardsMock ups

DesignkonceptDesignelementerGridBilledstilNavigationsprincipperTekstformatering

INFORMATIONSDESIGNI informationsdesignet har vi arbejdet med, hvilke informationer og retorik-ker 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.

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

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

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

/14 Et design af et drengekor

INTERAKTIONSDESIGNInteraktionsdesignet beskriver, hvordan brugeren skal interagere med me-diet, og til dette har vi udviklet et flowchart, der viser sitets navigations-struktur. Et generelt krav til sitet har været en simpel navigationsstruktur, hvor graden af interaktion er lav, så brugeren er fremme ved ønsket infor-mation ved få klik6. Flowchartet er på baggrund af informationsstrukturenbygget op efter primær, sekundær og tertiære målgrupper, og disse præsenteres således horisontalt i menulinjen. Førstnævnte er koncentreretved 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.

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.

6Den 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


INTERAKTIONSDESIGNFORSIDE

ASPIRANTERBliv en del af drengekoret

FÆLLESKABETLær koret bedre at kende

KONCERTERTidligere og kom-mende koncerter

STØTTERFonde og private bidrag

LINKSAndre kor fra nær og fjern

MEDLEMMERIndgang til den interne side

hvad kan vi tilbyde?

din optagelsesprøve

hvem er vi?

vores historie

vores musikalske rejser

se vores billeder

bestyrelsen

vedtægter

vores koncerter

hør vores musik

omtale af os

vores støtter

støt os

eksterne links internt site

FLOWCHART

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

Som udgangspunkt fandt vi websites, der i vores øjne havde en funk-tionel 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 sto-ryboard 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 stemn-ing 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.



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

FORMFor at skabe et overskueligt site, hvor kundens ønsker er repræsenteret i etseriø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 dropdownmenu-erne – 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 Face-book, Twitter og Youtube. Henvisningerne til de social medier er med for at gøre siden endnu mere interagerende med brugeren, da det er de me-dier, 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.


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

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 arkitek-tur. 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 skullevære kontraster i tekststørrelsen som derved skaber dynamik, flere di-mensioner og liv på sitet.

ILLUSTRATIONDen 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 venstrehjø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å upole-ret 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 re-gel 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 no-get andet end et traditionelt drengekor, og forældrene vil have noget, der kan give deres børn en solid ballast.

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 bill-eder. 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 bill-ederne er i sort/hvid for det seriøse – igen med det vandrette som fælle-snævneren – med det useriøse illustreret i drengenes mimik.


FARVE

ANIMATION

LYD

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 somhover til aktive links på sitet. Den blå farve symboliserer det useriøse og legende på siden. Desuden er blå en farve, som symboliserer dreng.

Vi har valgt ikke at benytte animationer på sitet, fordi nyheds-/billede-loopet 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.

Der er på forsiden, efter ønske fra kunden, lavet en musikafspiller til af-spilning 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 afwebsitet, 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 au-tomatisk 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.


KOMPOSITION

ATTENTION

INTEREST

DESIRE

ACTION

Sitet er klassisk bygget op i overensstemmelse med kommunikations-modellen AIDA , som er en enkel model til at skabe interesse omkringens produkt.

Logoet er placeret, i overensstemmelse med eye-tracking, i øver-ste 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.

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 billed-er 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.

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

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

STIL OG STEMNINGUd 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.

Som det er redegjort for i afsnittet om de seks designparametre, er stilen lagti 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 leverop 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. Menstadigvæ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.

REALISERINGEVALUERING

/22

REALISERINGEVALUERING

/23Realisering

REALISERINGI projektets realiseringsfase har vi arbejdet ud fra arbejdsprocessen SCRUM7. Denne tilgang sikrer ideelt set hastighed og dynamik i projek-tet, 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 over-ensstemmelse 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å “fin-grene” ned i de forskellige produktniveauer.

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 ogkundens ø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 web-site, 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.

EVALUERINGMed 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 at-mosfæ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.

Gruppen har bestået af fire medlemmer med forskellige faglige bag-grunde, 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 arbe-jdsfundament, der har reduceret grundlæggende uenigheder, og sam-tidigt gjort det lettere at kode sitet.

7Fischer & Oosterban, 2010: 185

BILAG/24

01 PROJEKTPLAN

02 LOGOSKITSER

03 INFORMATIONSSTRUKTUR - POST-ITS BILLEDER

04 EKSTERN DESIGNMANUAL

05 IDÉKATALOG

BILAG01 PROJEKTPLAN

02 LOGOSKITSER

03 INFORMATIONSSTRUKTUR - POST-ITS BILLEDER

04 EKSTERN DESIGNMANUAL

05 IDÉKATALOG

Bilag 01/ Projektplan

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

30.maj 31.maj 01.juni 02.juni 03.juni 04.juni 05.juni 06.juni 07.juni 08.juni 09.juni 10.juni

Start

Foranalyse

Undersøgelse

Design

Kodning

Slut

PROJEKTPLAN

Bilag 01/ Projektplan

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

I alt

Planlagt tid Faktisk tid

1,5 1,5

2 2

1,5 0,751 0,5

2 0,5

2 1

1 2,5

3 61 1

1 3

1 0,25

4 16

6 12

2 30,5 0,5

30 30

3 2

62,5 82

PROJEKTPLAN

Bilag 02/logoskiter

LOGOSKITSER

Bilag 03/ Informationsstruktur

INFORMATIONSSTRUKTUR

Bilag 04/ekstern designmanual

EKSTERN DESIGNMANUAL

GridDesignelementerBilledstilNavigationsprincipperTekstformatering

GRID/BOKSE

960px

680px

80px

290px

65px

25px

Header

Menubar

Nyhedsboks

Koncertboks

Footer

Wrapper

485px

130px

220px60px

Musikeksempler

Dropdown190px

130px

Søgeboks

Sprogversionering

75px15px

173px


GRID/MARGIN OG PADDING

20px

20px

20px

20px

20px

15px

50px

20px


DESIGNELEMENTER/LOGO

Logoet er placeret i venstre hjørne i headeren. Loget flugter med contentboksen.

Kilde: logo.png

175px

30px


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: Eurostile, bold, 24px, # 00baff, RGB: 0/186/255Undertitel: Eurostile, Regular, 15px, #fff, RGB: 255/255/255Tekstboks: w:670px h:82px, #000, RGB: 0/0/0, transparens 85%

DESIGNELEMENTER/FOOTER

Footeren er en intern footer, hvilket vil sige at den visuelt er placeret ovenpå indholdsboksen. I foot-eren er der kontaktinformationer til korlederen og genvej til facebook, twitter og youtube.


Tekst: Arial, Regular, 8,5px, # b2b2b2, RGB: 178/178/178Lys farvegradient: # 6d6d6d, RGB: 109/109/109Mørk farvegradient: # 4a4a4a, RGB: 74/74/74

960px

25px


25px

DESIGNELEMENTER/KONCERTBOKS OG MUSIKEKSEMPLER

“Vores næste koncerter” og “musikalske smag-sprøver” er tekstfelter der er placeret under billedgalleriet, som er henholdsvist align left og align right.

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

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

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

BILLEDSTIL


Billederne på sitet står i kontrast til grafiken, og er valgt i varme, menneskelige fraver for at sym-bolisere 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 med-lemmer laver sjove grimasser.

Se: Designelementer/billedgalleri

w:284px h:157px

w:284px h:157px

w:170px h:70px

w:170px h:70px

w:170px h:70px

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


NAVIGATIONSPRINCIPPER/NAVIGATIONSMENUNavigationsmenuen (niveau 1) er placeret under logo, og er den faste ryggrad på siden. Menuen forsvinder aldrig og det er den alle undersider sty-res fra. Der er en dropdown funktion hvor under-siderne (niveau 2) kommer til syne.

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

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

w:284px h:157px

w:284px h:157px

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

DYNAMISK TYPOGRAFIArial bruges til dynamisk (html) tekst, altså tekst der skal kan æn-dres 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 1234567890a b c d e f g h i j k l m n o p q r s t u v w x y

Eurostile regular


Eurostile bold


Arial regular


Arial bold


TEKSTFORMATERING/FARVE SPECIFIKATIONSTATISK TYPOGRAFISitets 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

#939393 rgb 147/147/147

#4a4a4a rgb 74/74/74

#6d6d6d rgb 109/109/109

#00baff rgb 0/186/255

#fff rgb 255/255/255


IDEKATALOG TIL YDERLIGERE UDVIKLING AF WEBSITET

Bilag 05/idekatalog

På undersiden ”Din optagelsesprøve” kunne man lægge en video ind af hvor-dan 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/ kom-mentarfelt, 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.

projektrapport sct. clemens drengekor

Documents