Hjemmeside: http://multimediekursus.ats.dk/3511/RoopRusbjerg/wordpress/

Udarbejdet af:

Kate Overgaard

Roop K. Rusbjerg

Kontaktperson: Kate Overgaard

mail: kateovergaard@gmail.com

Multimedieteknologi og Interaktionsdesign - Afsluttende Projekt Rapport

Indhold

Indledning 2

Udviklingsmetode 3

HOME 3

Foranalyse 4

SWAT-analyse 4

Undersøgelse 5

Projektplan og idéudvikling 5

Kommunikationsplanlægning 6

Design 7

Informationsdesign 7

Interaktionsdesign 7

Præsentationsdesign 8

Form 8

Typografi 8

Illustrationer 9

Farver 9

Komposition med AIDA 10

Attention 10

Interest 10

Desire 10

Action 10

Stil og stemning 11

Realisering 11

Evaluering 12

Bilag 13

IndledningSom afsluttende projekt på vores 6-ugers kursus i Multimedieteknologi og Interaktionsdesign fik vi til opgave at redesigne det nuværende website for Besættelsesmuseet Aarhus på baggrund af kundens ønsker og oplysninger udtrykt ved kundemødet. Besættelsesmuseet nærer et stort ønske om et nyt og redesignet site, da det nuværende har mangler og fejl på flere niveauer. Kunden påpegede især stavefejl og overflødige sider som kritiske fejl ved hjemmesiden.

Opgaven lød derfor i høj grad på at producere et website, der i mere tilfredsstillende grad opfylder kravet om en overskuelig navigations- og informationsstruktur samt brugervenlighed. Hjemmesidens fokus skulle være på lettilgængelige oplysninger om især adresse, åbningstider o.l. samt at informere om stedets historiske relevans i forhold til besættelsen, da lokalerne fungerede som hovedkvarter for Gestapo.

Den generelle målgruppe for museer i Danmark er mænd og især kvinder i aldersgruppen 40+. Afsender havde ingen krav til layout og struktur ud over undgåelse af uheldige farvekombinationer som rød/sort. Dette giver os som designere langt friere tøjler med udarbejdelsen af sitet end havde vi mange restriktioner. Afsender, målgruppe og andre parametre i den moderne kommunikationsmodel vil senere blive uddybet.

Vi vil i det følgende gennemgå HOME-modellen i forhold til vores proces og herunder inddrage relevante teorier og metoder. Slutteligt vil vi konkludere på det færdige produkt.

Det færdige produkt findes på følgende adresse:

Hjemmeside: http://multimediekursus.ats.dk/3511/RoopRusbjerg/wordpress/

Information: http://multimediekursus.ats.dk/3511/RoopRusbjerg/wordpress/?page_id=11

Om os: http://multimediekursus.ats.dk/3511/RoopRusbjerg/wordpress/?page_id=13

Udstillinger: http://multimediekursus.ats.dk/3511/RoopRusbjerg/wordpress/?page_id=15

Webshop: http://multimediekursus.ats.dk/3511/RoopRusbjerg/wordpress/?page_id=9

2

UdviklingsmetodeUdgangspunktet for vores site har balanceret mellem det åbne og diffuse og det mere specifikke. Afsender havde få krav til sitet men var generelt åben for vores bud på, hvordan deres side burde se ud. Afsender fokuserede især på, at brugervenligheden skulle højnes, informationen skulle i højere grad være lettilgængelig, og hjemmesidens struktur skulle revurderes og redesignes. Vores risikovillighed skal ses i lyset af, at afsender pt. ikke ved, om det er sandsynligt, at et af holdets produkter anvendes efterfølgende som museets site. Da vores udgangspunkt balancerer mellem det diffuse og det specifikke, gør vores risikovillighed det ligeså, da vi ikke fra afsenders side har en klar fastlæggelse af krav til siden. Dokumentationen dækkes af denne rapport, hvorfor grundlaget for at andre udviklere kan overtage vedligeholdelsen efterfølgende burde være dækket, da denne er forholdsvis detaljeret. Dog ville det være at foretrække, at produktet på sigt i højere grad kunne verificeres og valideres. Da produktet er implementeret i Wordpress burde vedligeholdelsen af sitet på sigt heller ikke volde afsender problemer, da Wordpress er yderst brugervenligt.

I lyset af disse grundholdninger til vores site kan vi konkludere, at vores projekts forløb har meget til fælles med vandfaldsmetoden, da det i høj grad er en lineær og faseopdelt proces. I processen er vi dog blevet bevidste om vandfaldsmetodens manglende fleksibilitet, hvorfor projektets forløb til tider har lænet sig mere op ad prototyping og de agile metoder.

HOME Opgavens struktur tager udgangspunkt i HOME-metoden, som er en helhedsorienteret og åben multimedieudviklingsmetode. Udviklingsarbejdet i denne metode fokuserer på både udviklingen af selve produktet og ledelsen af processen. Metoden systematiserer de valg, der træffes i forhold til disse to aktiviteter og er valgt som værktøj for denne rapport, da dens åbne tilgang gør, at den med lethed kan tilpasses vores unikke udviklingssituation. Dog er HOME udarbejdet til længere processer end vores, hvorfor det ikke har været relevant systematisk at gennemgå alle elementer i hvert trin. Vi har derfor valgt at fokusere på de elementer i HOME-modellen, som er relevante for udviklingen af vores produkt og denne rapport.

HOME-modellen er inddelt i fire trin:

• Foranalyse

• Undersøgelse

• Design

• Realisering

Hvert trin vil i det følgende blive gennemgået inklusive de dertil hørende relevante elementer.

3

Foranalyse

På dette trin afdækkes projektets forudsætninger. Vi har her gennemført en foranalyse af grundlaget for opgave med det formål at fremskaffe tilstrækkeligt informationsgrundlag.

Kunden er Besættelsesmuseet Aarhus. Det blev på kundemødet klart, at kunden selv ikke havde positiv kritik til det nuværende website, hvorfor de nærer et stort ønske om et nyt website. Ønsket var især, at det nye website skulle være overskueligt, brugervenligt og have en klar navigations- og informationsstruktur, således at brugere ikke ville være i tvivl om, hvor på siden de skal hen, for at finde ønsket information. Vi har opsummeret kundens ønsker således:

• Klar, overskuelig og brugervenlig informations- og navigationsstruktur

• Lettilgængelige informationer om essentielle emner såsom åbningstider, lokation osv.

• Fokus på at deres lokaler fungerede som Gestapos hovedkvarter under besættelsen

• Sitet skal på sigt gerne kunne varetages af museumsdirektøren selv, hvorfor det skal være nemt og overskueligt at kunne foretage tilføjelser og ændringer

Disse ønsker fra kundens side har været udgangspunktet for gruppens valg og beslutninger i forhold til layout og design, virkemidler, sprog og indhold.

SWAT-analyse

Som en del af forundersøgelsen og informationsindsamlingen har gruppen foretaget en SWAT-analyse i forhold til Besættelsesmuseets website.

Museet har på nuværende tidspunkt ikke synderlige fordele eller styrker på hjemmesiden. En klar styrke er dog de meget interessante og opmærksomhedsfængende billeder, som skildrer personer og genstande fra besættelsestiden.

Museets nuværende website har betydelige svagheder inden for layout og design, navigations- og informationsstruktur og sproglig udformning. Navigationsstrukturen har grundlæggende fejl i og med, at den ændrer sig fra side til side, og den nærmest helt forsvinder, når man klikker på et punkt i den meget lange menu. Den første side man kommer ind på har ikke anden funktion end at informere om særudstillingen samt at få brugeren til at vælge et sprog. Klikker man på ’hjem’, kommer man tilbage til den første side, hvorfra man igen skal klikke på et sprog for at bevæge sig ind på det egentlige indhold. Informationsstrukturen er meget forvirrende og uoverskuelig, da mange informationer er spredt ud over alle sider uden egentlig sammenhæng med websitets formål. Mange informationer virker til at være inkluderet på websitet, fordi kunden mener, det er interessante oplysninger, frem for at der er fokus på, hvad de egentlige brugere anvender sitet til. Sitet er ikke specielt brugervenligt, da der bl.a. er centreret tekst, meget lang linjelængde på samtlige sider samt meget lille linjeafstand. Billeder er placeret meget langt nede på siderne, hvilket bevirker, at kun skærme af en vis størrelse vil vise disse, når man går ind på sitet. Derudover er der stavefejl på siden, hvilket vil få en negativ effekt på brugerens tiltro til museet som værende professionelt og troværdigt.

De meget grundlæggende fejl på museets site gør, at der er klare muligheder for forbedring. Analysen understreger dermed vigtigheden af at overholde og opnå de ovennævnte ønsker til det nye site, da disse vil eliminere det nuværende sites svagheder. Det kan derfor antages, at kunden i høj grad vil have gavn af et nyt site, da dette kunne have en tiltrækkende effekt på potentielle besøgende.

4

Gruppen har i forbindelse med museets trusler undersøgt, hvilke konkurrenter de står overfor. På mikroniveau har museet lokale konkurrenter som Kvindemuseet, Den Gamle By og Aros. På makroniveau konkurrerer museet med museer i hele landet. Heraf kan nævnes Tøjhusmuseet, Nationalmuseet, Glyptoteket og H.C. Andersens hus. Det er derfor en betydelig svaghed, at museets hjemmeside fremstår mindre professionel end konkurrenternes, da det kan få en indvirkning på, hvor besøgende vælger at tage hen.

Undersøgelse

På dette trin er der fokus på forstadiet til det egentlige design, herunder idégenerering og planlægning. Gruppens fokus har været på de produkt-orienterede elementer af HOME-modellen, hvorfor det ligeså vil være det i denne rapport. Dog vil vi inddrage de proces-orienterede elementer, hvor det har været relevant.

Projektplan og idéudvikling

I dette andet trin af HOME-modellen udviklede gruppen først og fremmest en overordnet projekt- og tidsplan. Efterhånden som projektet udviklede sig, blev projekt- og tidsplanen dog revurderet og udvidet. Den endelige tidsplan kan ses i bilaget, hvor det planlagte antal timer er sammenholdt med det egentlige forbrug af timer.

På baggrund af kundemødet og forundersøgelsen udarbejdede gruppen et mindmap over mulige emner og sider på et museums website. Mindmappet kan ses i bilaget. Ud fra mindmappet valgte vi de sider, der på baggrund af kundemødet og SWAT-analysen ville være mest relevante for kunden på et nyt site. Vi strukturerede disse udvalgte sider i et system af post-its, der hver repræsenterede en side på sitet og hver farve repræsenterede et nyt niveau. Efter at have sat dette op revurderede vi de udvalgte sider og satte dem i et endeligt ’parent/child’-forhold. Resultatet af dette arbejde kan ses på fotografiet.

Da vi nu havde et overblik over kundens ønsker, markedet de bevæger sig på og indholdet på sitet, udarbejdede vi skitser over sitets layout. Processen for dette bestod af en brainstorm af ideer, hvorefter vi udvalgte gruppens favorit. Skitserne – de afviste såvel som de udvalgte – kan ses i bilaget.

5

Kommunikationsplanlægning

Som en del af kommunikationsplanen kiggede gruppen på den moderne kommunikationsmodel og satte denne i forhold til den aktuelle kunde. De anvendte elementer fra kommunikationsmodellen er som følgende:

Afsender er Besættelsesmuseet Aarhus. Besættelsesmuseet Aarhus hører organisatorisk set under Den Gamle By. Indtil nu har museet haft sin egen hjemmeside men står nu i en situation,

hvor det i ledelsen diskuteres, hvorvidt museet skal høre ind under Den Gamle Bys website og dermed miste sit selvstændige site. Museet drives hovedsagligt af frivillige, da museumsdirektøren er den eneste betalte ansatte. De øvrige ansatte kommer fra venskabsforeningen. Kunden gjorde det klart, at der skulle være fokus på lettilgængelige oplysninger og en videreformidling af den historiske relevans, museets lokaler har.

Det nuværende site har et meget tvetydigt budskab. Dette har gruppen søgt at gøre op med ved allerede fra starten at klarlægge det budskab, man ønsker at sende med det nye site. Budskabet for det nye site er, at Besættelsesmuseet er et interessant sted i historiske lokaler, hvor besøgende får viden om anden verdenskrig og besættelsestiden i Aarhus og omegn.

Det nuværende og det nye site deler medie, da begge er formidlet via et website på internettet. Dette er et praktisk medie, da man på kort tid kan nå en stor målgruppe uafhængigt af nationalitet. Mediet stiller også høje krav til brugervenligheden målgruppen taget i betragtning, da ikke alle er vante med websites, og det derfor skal være nemt og overskueligt at bevæge sig rundt på sitet.

Modtageranalysen er begrænset af den korte tidshorisont. Dog ønskede gruppen at søge en større indsigt i modtageren og har derfor anvendt GallupKompas på målgruppen. GallupKompas er en omfattende og letanvendelig model, der inddeler befolkningen i 9 segmenter baseret på forskellige parametre. Kunden oplyste, at de besøgende hører til aldersgruppen 40+ og er ofte kvinder. Modtagere i denne aldersgruppe hører hovedsagligt til de fællesskabsorienterede og traditionelt-orienterede segmenter. Nøgleord for de fællesskabsorienterede er medmenneskelighed, social ansvarlighed og omsorg. De er stærkt interesserede i spørgsmål, der går tæt på det enkelte menneske og dennes hverdag. Fritiden tilbringes ofte på museer, kunst/maleri-udstillinger og teater-besøg. Disse oplysninger stemmer overens med oplysningerne givet på kundemødet om modtagergruppen. Ved udviklingen af vores site har vi derfor haft denne målgruppe for øje ved at sørge for, at vi spiller på værdier, der ligger sig op af denne gruppes interesser. Familieværdier betyder meget for målgruppens andre segmenter: de traditionelt-orienterede. Denne målgruppe nærer et stort ønske om at bevare de traditionelle danske værdier, og en del af dem har en vis skepsis overfor teknologi. Vi har ved udviklingen af vores produkt haft denne målgruppe for øje ved at lægge vægt på en særdeles overskuelig navigations- og informationsstruktur samt at lægge vægt på frihedskæmperne bl.a. ved at bibeholde kundens logo tydeligt på hjemmesiden, da denne er sammensat af frihedskæmpernes farver samt det danske flag.

Effekten af kommunikationen skulle gerne være, at modtagerne bliver interesserede i at se mere og derfor besøger museet. En sekundær effekt kunne være, at de bliver interesserede i venskabsforeningen og melder sig ind i denne.

EffektAfsender

Budskab Medie

Modtager

6

Design

På dette trin munder overvejelser, beslutninger og analyser på de foregående trin ud i konkret informationsdesign, interaktionsdesign og præsentationsdesign. Til at understøtte dette er der udarbejdet flowchart, storyboard og skeletopbygning, og der refereres i gennemgangen af designtrinnets elementer til disse hvor relevant. Flowchart, storyboard og skeletopbygning kan ses i bilaget.

Informationsdesign

I informationsdesignet har vi fokuseret på hvilke informationer, der er relevante for sitet, og hvorledes disse skulle struktureres og placeres. Vi har ligeledes fokuseret på retorikken, og hvorledes vi via sproget kan nå målgruppen bedst muligt. Informationsdesignet på det nuværende site er meget forvirrende og uoverskueligt. Mange sider har især information om det historiske aspekt. Dette er søgt gjort op med på det nye site ved at samle disse informationer under ét: historie. Men eftersom et museum er en meget visuel oplevelse, skal der ligeledes være fokus på dette på hjemmesiden. Vi har derfor givet teksten sekundær fokus i forhold til hjemmesiden, hvor der ikke forefindes anden tekst end overskrifter. Søger man yderligere information og mere tekst, skal man bevæge sig ned på undersiderne, hvor der er større fokus på det sproglige. Klikker brugeren sig dybere ind på siden, er det netop for at finde yderligere informationer, hvorfor tekst vil være mere relevant der. Ved udformning af teksten har der været fokus på en balance mellem det professionelle og det personlige. Hvor gruppen selv har formuleret tekst, har vi derfor rent retorisk skiftet mellem passive sætningsstrukturer og brugen af personlige pronominer som vi og du.

Interaktionsdesign

Interaktionsdesign beskriver, hvorledes brugeren interagerer med websitet. Målgruppen og budskabet taget i betragtning er navigationsstrukturen holdt simpel og hierarkisk. Der har ved overvejelserne om interaktionsdesignet været fokus på målgruppe, budskab, brugervenlighed og overskuelighed. Ud fra dette er der udarbejdet et flowchart, der viser interaktionsdesignet. Flowchartet kan ses i bilaget. Gruppen satte som krav, at brugeren fra alle sider kan navigere til de øvrige sider på sitet for at opnå højest mulig brugervenlighed. Overordnet opererer sitet med kun fem menupunkter, som alle har fået korte, sigende navne for indholdet. Dette skulle gerne have den effekt, at alle brugere, uanset alder og formål, i løbet af få sekunder har orienteret sig om, hvor de kan finde den information, de søger. Som flowchartet illustrerer, er sitets interaktionsdesign opbygget således, at reglen om ”tre skridt frem og ét tilbage” overholdes.

Der er på sitet placeret både en horisontal menulinje under topbanneret og en vertikal menu i den højre sidebar. Den horisontale menu udløser en dropdown menu, mens menuen i sidebar er ”foldet ud”. Den horisontale hovedmenu er et fast element på alle sider. Brugeren har derfor et konstant overblik over sitets øvrige sider, mens den ordnede hierarkiske struktur afspejles.

7

Præsentationsdesign

I præsentationsdesignet skal information og interaktion konkretiseres og tage egentlig form. Det er altså her, vores beslutninger om informations- og interaktionsstruktur lægges til grund for beslutninger om bl.a. designparametrene. I processen med præsentationsdesignet har vi haft fokus på de fire designparametre, og hvordan vi skulle bevæge os mellem felterne æstetik, funktion og teknik for at sitet hensigtsmæssigt kommunikerer indhold og struktur ud til modtageren. Beslutninger om hvordan kommunikationen ville være mest hensigtsmæssig er styret af tidligere analyser og overvejelser beskrevet i denne rapport.

Form

På baggrund af skitser, storyboard og flowchart udarbejdes nu det endelige storyboard. For at skabe et overskueligt site er hele hjemmesidens indhold synligt uden brug af scroll. Modtageren kan derved allerede ved første øjekast orientere sig om såvel hjemmesidens som sitets indhold. Det var kundens ønske at bibeholde det nuværende logo, hvorfor dette er placeret i topbanneret sammen med museets navn. Til højre i banneret er museets nuværende åbningstider placeret, da det formodes, at mange går ind på hjemmesiden for netop at finde grundlæggende informationer som åbningstider og adresse. Under banneret forefindes en horisontal hovedmenu, der fungerer som dropdown. Indholdet er struktureret i en højre sidebar og i en venstre boks. Sidebar viser overskrifter på seneste nyhedsindlæg og en udfoldet menu. I footeren oplyses museets adresse og telefonnummer af samme årsag som åbningstidernes placering i topbanneret. Banner, hovedmenulinje og footer er gennemgående på samtlige sider og skaber et ensartet udtryk og en rød tråd gennem sitet. Over footer i højre side henvises til museets Facebook profil samt deres Youtube-kanal, hvilket indbyder til øget interaktion med museet. I venstre boks er der placeret en overskrift, under hvilken der forefindes en slider, som skifter mellem 4 forskellige billeder af museets permanente udstilling. Under slideren forefindes 4 illustrationer, der linker til 4 forskellige undersider, som gruppen, baseret på kommunikationsanalysen, vurderer, er mest relevante for besøgende på siden. Undersiderne er for det meste blottet for illustrationer, da fokus har været på at informere og formidle i forhold til det valgte menupunkt. Det har dog virket naturligt at indsætte billeder på fx undersiderne til menupunktet udstillinger. Afhængigt af mængden af information på siderne skal der her benyttes scroll for at se hele indholdet. Ved særligt lange tekster som fx på siden historie under punktet information er der dog anvendt interne links på siden, således at brugeren kan hoppe til det punkt, han/hun finder interessant.

Der er endvidere anvendt formkontrast på sitet, da sitet i overvejende grad er holdt i firkantede former. Dog bryder indholdsboksen med denne ellers meget firkantede udformning, da hjørnerne er buede. Ligeledes er logoet bevidst placeret, så nederste del af dette bryder med linjen fra topbanneret.

Typografi

Som det kan ses i designmanualen, er der på websitet brugt formkontrast i typografien, da overskrifter er ført i Georgia 20px og brødtekst, og menupunkter er ført i henholdsvis Arial 15px og Arial 13px og 10px. Georgia er en antikva skrift, som kendetegnes ved seriffer. Formkontrasten findes i, at Arial er en grotesk skrift, hvilket vil sige, at denne ikke har seriffer. Valget af Arial som den mest fremtrædende skrifttype på sitet grunder i, at denne betegnes som værende en af de mest websikre skrifter. Derudover er groteske skrifter også mest velegnede til nettet, da de på skærm er mere læsevenlige end antikva-skrifter. Endvidere er der størrelseskontrast i skriftstørrelserne, da overskrifter er betydeligt større end brødtekst.

8

Placeringen af en højre sidebar har også en positiv effekt på linjelængden, da linjerne bliver afskåret fra at fylde hele længden på siden. Linjelængden er derved ikke stor, hvilket også har en positiv indflydelse på læsevenligheden og brugervenligheden. Tekst på sitet er holdt med løs bagkant for at skabe en kontrast til sitets generelt firkantede form.

For at højne læsevenligheden og brugervenligheden er der anvendt halvanden linjeafstand, hvilket gør teksten nemmere at læse og overskue. Nye afsnit er markeret ved afsnitsskydning, da der er anvendt en linje luft mellem afsnit.

Illustrationer

Illustrationerne anvendt på sitet er på nær ét alle fotografier, der er valgt bevidst ud fra overvejelser om kommunikationssituationen, æstetik, funktion og teknik. Endvidere er illustrationerne valgt således, at de understøtter budskabet, den tekst og de menupunkter, de eventuelt står i sammenhæng med. Derved bliver noget af indholdet præsenteret af både tekst og illustrationer. Som overordnet baggrundsbillede på siden er valgt en betonmur. Slideren på hjemmesiden viser fire forskellige billeder: En træudskæring af en ørn, der holder et swastika, jernbaneskinner, et skilt med teksten ”I Gestapos kløer” og Aarhus Domkirke under besættelsen, hvor der var opsat piktrådshegn omkring. Under slideren er der placeret fire mindre billeder. Første billede skildrer en maske, der blev brugt til tortur, andet billede viser museets lokaler med fokus på Dannebrog, der hænger ved receptionen, tredje er et snit af et krakkort, der viser hvor museet har adresse, og sidste billede skildrer særudstillingen om Grethe Bartram. De fire små billeder går igen på de undersider, de hører til. Der er således størrelseskontrast i illustrationerne, da billederne i slideren er betydeligt større end de fire små billeder placeret under denne.

Farver

På hele sitet er der lagt et blåtonet billede af en betonmur som baggrundsbillede. Museet skildrer netop Anden Verdenskrig og besættelsen, hvilket er en tid, der for alle i overført betydning var kold og kynisk. Den blåtonede betonmur symboliserer netop disse betydninger og er anvendt med det formål. Endvidere er der en forbindelse mellem betonmuren og koncentrationslejre under Anden Verdenskrig, hvorfor en sekundær effekt af baggrundsbilledet vil være, at der associeres til Anden Verdenskrig. Både topbanner og footer er holdt i blå farver. Som kontrast dertil står både indholdsboksens baggrundsfarve og farverne på de fleste illustrationer. Indholdsboksens baggrundsfarve er holdt i en varm cremefarve, som står i kontrast til baggrundsbilledets kolde blå farve. Med undtagelse af det gråtonede billede og skiltet i slideren samt kortet nederst på hjemmesiden indeholder alle billeder enten varme brune farver eller komplementærfarven gul. Den cremefarvede baggrundsfarve står også i styrkekontrast til den sorte tekstfarve. Den subtile brug af kontraster og komplementærfarver på sitet skaber harmoni, ro og balance.

9

Komposition med AIDA

Under designtrinnet har gruppen bevidst tænkt over AIDA, som er en model, der anvendes til at skabe opmærksomhed og interesse for derefter at føre modtageren hen til handling.

Attention

Attention på hjemmesiden skabes i overensstemmelse med eye-tracking af logoet i øverste venstre hjørne samt overskriften ”Velkommen til Gestapos hovedkvarter”, som også er placeret strategisk i det gyldne snit.

Interest

I overensstemmelse med eye-tracking vil slideren på hjemmesiden skabe en interesse for produktet. Her ser modtageren de fire skiftende billeder, som både navngiver den permanente udstilling og viser billeder fra udstillingen.

Desire

Ifølge Poynter eye-tracking vil modtageren efter at have undersøgt elementer i nærheden af midten bevæge sig ned i venstre hjørne. Her har vi placeret et opmærksomhedsvækkende billede af en torturmaske fra den permanente udstilling. Modtageren vil derefter undersøge de tre efterfølgende billeder. De fire billeder under slideren får derfor funktionen desire, hvor et ønske om at besøge museet og se udstillingen skabes.

Action

Action på hjemmesiden kan ske forskellige steder. Finder modtageren et af de fire små billeder særligt interessante, vil denne eventuelt klikke på det, og dermed er action sket. Bevæger modtageren sig i overensstemmelse med eye-tracking videre hen og undersøger højre side af skærmen, vil denne se den vertikale menubar og eventuelt klikke på et af punkterne eller en af nyhedsindlæggene, såfremt disse er relevante for modtageren. Sker dette vil action være i højre sidebar.

10

Stil og stemning

I overensstemmelse med kommunikationsplanen og kundens ønsker har vi udviklet et produkt, vi mener, kommunikerer dette ud til modtageren på hensigtsmæssig vis. Der er anvendt både størrelses-, styrke-, farve- og formkontrast, dog subtilt således at det ikke skaber støj på sitet. Der er endvidere tænkt over associationer i forbindelse med billedvalget. Layoutet er holdt rent med klare linjer og fokus på at formidle budskabet visuelt ved hjælp af billeder på hjemmesiden og i højere grad ved hjælp af sproget på undersiderne. Sitet signalerer åben professionalitet og virker indbydende på såvel den primære modtagergruppe som andre besøgende på siden.

Realisering

Det udviklede produkt er udarbejdet i CMS-systemet Wordpress. Der er arbejdet i et allerede eksisterende tema, TwentyEleven, da gruppen vurderede, at dette på nogle punkter mindede om det, vi havde tænkt os. Vi har derefter redigeret og ændret i temaet, således at vi tilpassede det vores vision og det udtryk, vi ønskede. Frem for at anvende Wordpress’ ellers brugervenlige muligheder har gruppen i høj grad selv arbejdet i html/CSS i programmet. Dette er grundet visioner, der gik ud over Wordpress forudindstillede muligheder samt egne ønsker om i højere grad at få ”fingrene ned i html og CSS”. Billeder og illustrationer er redigeret i Photoshop og derefter uploadet til Wordpress.

Samtlige elementer i produktet og rapporten er udarbejdet i samarbejde med hele gruppen, da vi fandt dette mest hensigtsmæssigt i forhold til at skabe et ensartet udtryk, der også inddrog hele gruppens ønsker. Dog har vi hver især været hovedansvarlige på forskellige områder af udarbejdelsen af såvel produktet som rapporten.

Wordpress tilgodeser i høj grad kundens ønsker om selv at kunne vedligeholde sitet, da Wordpress er særdeles brugervenligt og ikke kræver forudgående kendskab til html/CSS.

11

EvalueringMed udarbejdelsen af det nye site for Besættelsesmuseet Aarhus har vi skabt et tidssvarende, overskueligt, brugervenligt og enkelt design, der tilgodeser kundens ønsker om fokus på sitet. Vi har udviklet vores evner inden for design af brugerflader fra idégenerering og skitser til undersøgelse og design. Vi har gennem processen haft funktion, æstetik og teknik for øje ikke mindst med henblik på afsender, budskab, medie og målgruppe. Som det fremgår af tidsplanen i bilaget, er den forbrugte tid større end den planlagte tid, hvilket dog er at forvente, da uforudsete elementer vil optage mere tid end forventet.

Gruppen består af to personer med forskellige faglige baggrunde. Dette har dog snarere vist sig at være en styrke frem for en svaghed, da vi har formået at komplementere hinanden konstruktivt. Vi har gennem processen haft samme vision for sitet og har respekteret hinandens ønsker og ideer.

http://kvindemuseet.dk/dk.aspx

http://www.dengamleby.dk/

http://aros.dk/

http://www.thm.dk/

http://www.natmus.dk/sw4509.asp

http://glyptoteket.dk/

http://museum.odense.dk/museer/hc-andersens-hus.aspx

http://gallup.dk/vores-markedsfokus/medier/printmedier/gallupkompas.aspx

http://webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html#wireframes

12

Bilag

Tidsplan

= Foranalyse = Undersøgelse = Design = Realisering

Uge Aktivitet Planlagt tid Forbrugt tid HOME

37 Teametablering 0,5 0,1Forberede kundemøde 1 0,3Informationsindsamling 2 1,5

38 Kundemøde 1 1,5Projektbeskrivelse 0,1 0,1Mindmap 2 3Skitser, idéudvikling og udvælgelse af favorit

1 2

Analyse af konkurrenters websites

2 2

Analyse af kundes nuværende site

1 1,5

Udarbejdelse af tidsplan 0,5 0,5Rapportstruktur 1 1

39 Informationsdesign 5 9Interaktionsdesign 5 6Præsentationsdesign 15 18Storyboard 1 0,5Billedredigering 2 4Dokumentation 7 10Vurdering 0,5 0,5Regulering 2 1I alt 49,1 62,5

13

Mindmap

14

Skitser

15

16

17

18

Flowchart

19

Navigation/Knapper Tekst Animationer

Faste Gra�sk Elementer Gra�k Andet

En enkelt menu som bliver på toppen i font ‘Arial’.

Der vil være en hover e�ekt enten i form af en understregeller som ‘bold’.

Inholdet på sitet vil også være‘Arial’ mens alle overskrifter er‘Georgia’.

Font størrelsen er omkring 15pxtil indholdet og til overskrifterneer det 20px.

I skitsen vises en større kassemed tekst ‘Billeder fra PermanentUdstilling’. Der skal der være en slider animation, som bliver lavetved af jQuery istedet for Flash.

Det vil være det eneste animationpå siden og kun på forsiden.

Logoet i headeren, ‘facebook’ logo og et ‘youtube’ logo er de 3 enestefast gra�sk element.

I body har vi tænkte på at brugen lys blå farve og generelt på sitet har vi overvejet en grå / blåfarve.

Bag indholdet overvejer vi encreme / brun farve.

Storyboard - Forside

Forskellige billeder fra udstillingervil blive brugt på andreundersider og gennem hele sitet.

Storyboard

20

Storyboard - Underside

Navigation/Knapper Tekst Animationer

Faste Gra�sk Elementer Gra�k Andet

En enkelt menu som bliver på toppen i font ‘Arial’.

Der vil være en hover e�ekt enten i form af en understregeller som ‘bold’.

Inholdet på sitet er ‘Arial’ mensalle overskrifter er‘Georgia’.

Font størrelsen er omkring 15pxtil indholdet og til overskrifterneer det 20px.

Animationer vises ikke i undersiderne.

Forskellige billeder fra udstillingervil blive brugt på andreundersider.

I starten af teksten vil der være etbillede af det siden informere om.

I body har vi tænkte på at brugen lys blå farve og generelt på siden har vi overvejet en grå / blåfarve.

Bag indholdet overvejer vi encreme / brun farve.

Logoet i headeren, ‘facebook’ logo og et ‘youtube’ logo er de 3 enestefast gra�sk element.

21

Skeletopbygning

22

Besættelsesmuseet Aarhus

Designmanual

URL: http://multimediekursus.ats.dk/3511/RoopRusbjerg/wordpress/

Udarbejdet af:Kate Overgaard og Roop K. Rusbjerg

Designmanual

2

Indhold

Typografi...3

Farver...4

Grafisk Elementer...5

T-shirts...6

Taske...7

Konvollutter og Brevpapir...8

Georgia regular 12 pt/16 pt

Georgia italic 12 pt/16 pt

Georgia bold 12 pt/16 pt

Fonten Georgia (se til venstre) er valgt som den font der skrives forretningsbreve med. Der bruges en font størrelse på 12 pt/16 pt. Til citater bruges der Georgia italic og til forhævelse bruges der Georgia bold.

Den er også brugt på Museets’ site som overskrift på en størrelse 20px.

Typografi

3

Georgia bold 20px

Arial 15px Fonten ‘Arial’ er brugt til indholdet på sitet på en størrelse 15px.

Den er også brugt til sidebar menuen i to forsekllige størrelser, overskriften er på en størrelse 10px og punkterne under er på 13px.

A B C D E F G H I J K L M N O P Q R S T U V Z Æ Ø Åa b c d e f g h i j k l m n o p q r s t u v z æ ø å

A B C D E F G H I J K L M N O P Q R S T U V Z Æ Ø Åa b c d e f g h i j k l m n o p q r s t u v z æ ø å

Georgia Regular

Georgia Bold

A B C D E F G H I J K L M N O P Q R S T U V Z Æ Ø Åa b c d e f g h i j k l m n o p q r s t u v z æ ø å

A B C D E F G H I J K L M N O P Q R S T U V Z Æ Ø Åa b c d e f g h i j k l m n o p q r s t u v z æ ø å

Arial Regular

Arial Bold

Hex #3e7494C= 86 M= 60 Y=17 K=2

Hex #373737C= 69 M= 63 Y=62 K=58

Hex #FFFFE0C= 1 M= 0 Y=24 K=0

Farven(se til højre) er valgt til sitet header og footer.

Farven(se til højre) er valgt til brødtekst i alle undersider.

Farver

Farven(se til højre) er valgt som baggrund bag indhold teksten.

4

Hex #707070C= 69 M= 63 Y=62 K=58

Farven(se til højre) er valgt til sidebar menuen og menuen til nyheder.

Grafisk Elementer

Billedet her er der blevet brugt som et ‘background-image’ på sitet. Det er en jpg billed der fylder kun 427 KB. Placering af billedet er ‘fixed’ og sat til ‘no-repeat’.

Facebook og Youtube logoer er også brugt på sitet på den nederst højre hjørne. Begge elemneter er PNG format med gennemsigtig baggrund.

Størrelsen på Facebook logo er 30X30px og Youtube logo er 73X30px.

5

Breden på tabelen (billedet til venstre) er 380px.

Font størrelsen er 13px og den har samme farve som resten af brødtekst på sitet.

Tabelen har en border på 1px i samme farve som sidebar menuen.

T-shirts

6

Taske

7

Konvollutter og Brevpapir

8

9

Besættelsesmuseet Aarhus Mathilde Fibigers Have 2 8000 Aarhus C Tlf: 86184283

Lorem ipsum dolor sit ametVivamus facilisis interdum ante 406190 sit ametTlf: 93738799Email: Lorem.ipsum@dolor

Kære Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus facilisis interdum ante, eu faucibus sem tincidunt sit amet. Etiam volutpat elit lorem, in ornare urna. Nulla vehicula erat et turpis ultrices feugiat. Sed sit amet ante in arcu sollicitudin eleifend.

Curabitur dignissim vulputate nisi, eget aliquet eros suscipit at. Suspendisse aliquet fauci-bus hendrerit. Nulla fringilla volutpat nisl vitae adipiscing. Nam eget placerat lacus. Morbi vel mi eget ligula ultricies malesuada a vel leo. Nam tempor elementum nisi, at egestas nunc pulvinar et. “Integer aliquam commodo urna, condimentum eleifend metus aliquet vitae.” Aliquam a diam ante, scelerisque porta felis.

Donec et enim id mi lobortis lobortis. Maecenas vitae justo nec libero euismod scelerisque. Sed gravida aliquam nulla, sit amet faucibus neque ultrices vel. Sed ultricies dignissim cursus. Cras ullamcorper semper eros, at rutrum mauris egestas in. Vivamus vehicula justo eu dolor condimentum vitae ullamcorper nisi hendrerit. Phasellus accumsan varius vesti-bulum.

Med venlig hilsen

Lorem ipsum dolor sitAmet, consectetur

30. Maj 2011

95mm

202m

m

17mm

171mm 22mm

63mm

69mm24 mm

60 x 70 mm

10

Besættelsesmuseet Aarhus Mathilde Fibigers Have 2 8000 Aarhus C Tlf: 86184283

Lorem ipsum dolor sit ametVivamus facilisis interdum ante 406190 sit ametTlf: 93738799Email: Lorem.ipsum@dolor

Kære Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus facilisis interdum ante, eu faucibus sem tincidunt sit amet. Etiam volutpat elit lorem, in ornare urna. Nulla vehicula erat et turpis ultrices feugiat. Sed sit amet ante in arcu sollicitudin eleifend.

Curabitur dignissim vulputate nisi, eget aliquet eros suscipit at. Suspendisse aliquet fauci-bus hendrerit. Nulla fringilla volutpat nisl vitae adipiscing. Nam eget placerat lacus. Morbi vel mi eget ligula ultricies malesuada a vel leo. Nam tempor elementum nisi, at egestas nunc pulvinar et. “Integer aliquam commodo urna, condimentum eleifend metus aliquet vitae.” Aliquam a diam ante, scelerisque porta felis.

Donec et enim id mi lobortis lobortis. Maecenas vitae justo nec libero euismod scelerisque. Sed gravida aliquam nulla, sit amet faucibus neque ultrices vel. Sed ultricies dignissim cursus. Cras ullamcorper semper eros, at rutrum mauris egestas in. Vivamus vehicula justo eu dolor condimentum vitae ullamcorper nisi hendrerit. Phasellus accumsan varius vesti-bulum.

Med venlig hilsen

Lorem ipsum dolor sitAmet, consectetur

30. Maj 2011

63mm

11