Projektrapport Christopher, Per, John

PROJEKTRAPPORT

Eksamensopgave på Multimedieteknologi og interaktionsdesign / Erhvervsakademi Aarhus:Redisign af website til Aarhus Fotografiske Amatørklub.

Eksamensopgave af:John Kruuse, Christopher Vejgaard og Peter Christensen - Aarhus, den 5. december 2011

1/13John Kruuse, Christopher Vejgaard og Peter Christensen

Indholdsfortegnelse:

Bilag:

Side 2: 1.0 Opgave og metodevalg

Side 3: 2.0 Foranalyse 2.1 Nuværende website

Side 5: 2.2 Kundebesøg

Side 6: 2.3 Projektbeskrivelse 3.0 Undersøgelse 3.1 Research og idéudvikling

Side 7: 3.2 Konceptbeskrivelse

Side 8: 4.0 Opbygning

Side 9: 4.1 Designvalg Overordnede beslutninger. Placering af elementer Farvevalg Menupunkter Logo Typografi Fravalg

Side 12: 5.0 Realisering 6.0 Konklusion

1. Mindmap: Besøgende på hjemmesiden

2. Mindmap: Klubbens medlemmer

3. Skitse: Første udkast til design af sitet

4. Skitse: Oversigt over sider

5. Storyboard

6. Skitse: Optegning og opmåling af sitet

7. Flowchart

8. Tidsforbrug


Denne rapport beskriver processen i forbindelse medudarbejdelse af det afsluttende projekt for kursetMultimedieteknologi og interaktionsdesign, afviklet novem-ber til december 2011 af Erhvervsakademi Aarhus.Projektoplægget bestod af den bundne opgave at redesigne et website til Aarhus Fotografiske Amatørklub (AFA) med et omfang af 3-4 sider.Sitet skulle implementeres i WordPress og uploades tilgennemsyn.Sitet er tilgængeligt på følgende adresse:

http://www.multimedieteam.dk/4411/christopher/gruppe/wp/hjem

Kontaktperson for projektet er:John Kruuse: [email protected]

Udviklingsmetoden Holistic, Open Multimedia development mEthod (HOME) er benyttet i forbindelse med projektet.Metodens 4 fire trin er:

foranalyse

undersøgelse

design

realisering

Vi har benyttet HOME-metoden for at fremme en planmæs-sig afvikling af projektet.

1.0 Opgave og metodevalg

.

.

.

.


Formålet med analysen var både at skabe klarhed over hvilke forudsætninger og begrænsninger, der var for projektet og ydermere at skabe en ramme indenfor hvilken vi kunne løse opgaven bedst muligt.

En meget væsentlig del af foranalysen bestod af undersøgelse af AFAs nuværende website:

http://www.afafoto.dk

2.0 Foranalyse

2.1 Nuværende website


Sitet er domineret af en meget tung header der fylder hele den horisontale flade med en højde på 180 pixels.Farven er en mørk grå med et tiltet logo i sort placeret i højre side. Med start i venstre side er foreningens navn gengivet i stor rød skrift. Resten af siden er holdt i lysere farver: lys grøn, lys grå og hvid.

Hovedmenu, der følger med på alle sider er placeret i venstre side og under denne menu er der på forsiden mulighed for medlems-login.

I højre side, lige under headeren, er der placeret et mindre foto, der skifter fra side til side (tilsyneladende tilfældigt) og ved klik bliver forstørret mens resten af siden fader ud som baggrund.

Den midterste del af siden er domineret af den information, som den pågældende underside skal formidle og består fx. af tekst, billeder, tabeller og links.

På forsiden inkluderer denne midterste sektion et stort bill-ede (typisk 640x460 pixels), der skifter automatisk hvert 10. sekund. For at se dette billede i sin helhed, skal der bruges scroll.

Mens siden har sine styrker, identificerede vi, baseret på analyse af både design og indhold, følgende overordnede problemer:

Headeren er for tung og fylder for meget på siden. Den røde skrift, der er brugt til foreningens navn, passer dårligt til resten af sitet.

Den måde billedmaterialet er brugt på sitet, yder ikke foreningens interesse for billeder retfærdighed. Fx problemet med at der skal scrolles på forsiden, før man kan billedet i sin helhed.

Det er svært at bestemme hvad sitets egentligt funktion er. Er det information til folk, der allerede har medlemskab? Er det en mulighed for at hverve nye medlemmer? Er det ”bare” et site til alle fotointeresserede?

.

.

.

2.1 Nuværende website/fortsat.


Som supplement til og opfølgning på vores egen analyse af AFAs hjemmeside fik vi mulighed for at indgå i dialog med foreningen vedrørende sitets nuværende funktionalitet og fremtidige ønsker for design og funktionalitet.Fra AFA deltog nuværende webmaster Søren Bo Christensen og bestyrelsesmedlem Peter Baatz.

Mødet tog udgangspunkt i kursusdeltagernes spørgsmål og bidrog til nedenstående overordnede konklusioner:

AFA’s website skal primært tjene de nuværende medlemmers interesser, sekundært vise foreningens ansigt udadtil. Med et medlemstal på omkring 80 og en venteliste på mellem 10 og 20, er formålet er altså ikke at hverve nye - eller fastholde eksisterende – medlemmer.

Man ønsker ikke at give indtryk af, at foreningen kan bidrage med råd og vejledning i brug af avanceret udstyr, eller at man kan udnytte medlemsskabet som et aftenskolekursus i foto-grafi.

Foreningens primære fokus er: det gode billede: komposi-tion og optage-teknik opnået gennemgensidig inspiration og konstruktiv kritik medlemmerne imellem.

Foreningen har en lang tradition. Konkret i forhold til nu-værende og fremtidigt website, blev følgende fremført:

Sitet skal indeholde en ”lukket del” med login, hvor infor-mation, der kun skal være tilgængeligt for medlemmer kan placeres - fx. refarater fra generalforsamlinger og kontaktlis-ter m.m.

Kalenderen med foreningens program og aktiviteter er en central del af sitet. Denne skal gerne have markering af ar-rangementer med farvekodning af fx medlemsmøder og ar-rangementer der kræver tilmelding

Der er interesse for automatiseret udsendelse af ugentligt nyhedsbrev/mail fra bestyrelsen med links til hjemmesiden - alternativt RSS-funktion for kalendersiden.

En (genoplivet) køb/salg/bytte funktion kunne være interes-sant.

En side om AFAs historie med fx tidslinie, prisvindende fotos gennem tiderne osv ville være interssant.

Logoet er en del af foreningens historie, og ligger som sådan fast. Nydesignede logoer er dog ikke decideret forbudt.

Der er ikke nogle hellige køer! Alle dele af sitet må laves om.

2.2 Kundebesøg

.

.

.

.

.

.

.

.

.

.


Med udgangspunkt i ovenstående overvejelser skal pro-jektet resultere i et nyt website for AFA, der efterkommer foreningens ønske om at kommunikere til egne medlemmer på samme tid med at det viser foreningens ansigt udadtil på bedste vis.

Centralt for websitet er konkret formidling af arrangementer m.m. i form af en kalender og derudover funktionelle links til medlemmernes personlige gallerier. I øvrigt er der ganske få restriktioner på opgaven, men en del funktioner og ideer, der vækker interesse hos kunden.

Undersøgelsen, som er foregået gennem kundebesøget, har til formål at indsamle viden om målgruppe og udvikle ideer til det endelige produkt.

Som beskrevet tidligere havde vi brugt en del tid på at under-søge det nuværende website og på denne måde identificeret både styrker og problemer på såvel det indholdsmæssige som på det designmæssige niveau.

Denne analyse blev suppleret med undersøgelser af lignende websites for at få inspiration til både indhold og opbygning. Vi undersøgte bl.a. websites fra både danske og udenlandske fotografiske foreninger, websites med billedgallerier og web-sites med nyheder om billeder.

På baggrund af dette havde vi som gruppe en række ideer og tanker, som vi enedes om at gå videre med. Se bilag: Mindmap.

En central beslutning, der blev truffet allerede på dette tids-punkt var, at vi ville fokusere vores energi på at udvikle den offentlige del af AFAs website, da dette umiddelbart virkede som en passende opgave i forhold til projektets tidshorisont og omfang. Den naturlige konsekvens af dette var også, at den lukkede del af sitet, hvis funktionalitet er eksklusivt rettet mod medlemmerne, ikke ville blive inkluderet i projek-tet.

2.3 Projektbeskrivelse

3.0 Undersøgelse

3.1 Research og idéudvikling


Projektets hovedformål er at redesigne Aarhus Fotograf-iske Amatørklubs website. Websitets formål skal være, at klubbens medlemmer kan læse nyheder og information om arrangementer. Ligeledes skal sitet fungere som klubbens fælles samlingspunkt og social platform for brugerne. Sitet skal også muliggøre, at medlemmerne får offentliggjort deres billedmateriale på nettet via klubbens website. Medlem-merne skal også selv kunne skrive indlæg og kommentarer på sitet og foreslå arrangementer.

Indholdet på sitet skal henvende sig til både medlemmer og ikke medlemmer. For medlemmerne vil websitet fungere som det sted hvor man finder sine informationer, læser om kom-mende arrangementer og deler nyheder og events. Denne del af sitet vil for en stor dels vedkommende ikke være offentligt tilgængelig.

For ikke medlemmer vil websitet være en appetitvækker i forhold til klubmedlemmernes fotografiske arbejde.Det er et ønske, at besøgende på sitet skal kunne booke en fotograf til en begivenhed. En kontaktformular til formålet implementeres.

Som det vigtigste skal sitet vise, hvad der er lidenskaben og det fælles samlingspunkt for klubbens medlemmer: Foto-grafiet. Sitet skal formidle det som besøgende på sitet for-venter af et site for en klub af medlemmerne med fotografiet som brændende hobby: Masser af flotte og spændende bill-eder. Fremvisning af billeder skal således være det centrale og styrende for opbygningen af sitet såvel strukturelt som designmæssigt.

Vi har som tidligere skrevet koncentreret kræfterne om den offentlige del af sitet.

3.2 Konceptbeskrivelse


Websitet kan overordnet opdeles i to dele med underdele:

En ekstern del indeholdende:

en informationsdel

et galleri

en programdel

en kontaktdel

En intern lukket medlemsdel indeholdende:

en forums- og informationsdel

en intern kalender

en salgs- og byttedel

en foreningsdel med referater etc.

Vi har koncentreret os om den eksterne del af sitet.

Informationsdelen:Denne del af sitet skal informere om klubbens foreningsar-bejde, klubbens historie, klubbens konkurrencer, hvilke egne udstillinger klubben har haft og hvilke eksterne udstillinger klubbens medlemmer har deltaget i samt fremtidige udstil-linger.

Galleridelen:Galleridelen af sitet er efter vores mening sitets vigtigste funktion. Billeder og atter billeder er dét som besøgende vil forvente på et fotosite. Vores præmis er også, at de flittigt fotograferende medlemmer af klubben må have et grund-læggende ønske om at få deres billeder vist så ofte og så godt som muligt. Vi har vægtet at finde bedst plugin til dette formål: Let upload, redigering af fremvisningsrækkefølge, tagning og billedtitler.

Programdelen:Vi lægger vægt på en meget synlig og overskuelig kalender, der gør det tilgængeligt og tydeligt, hvad der sker i klubben, hvornår og hvordan det er muligt at tage del i begivenheden. Vi har derfor vægtet et finde det bedst mulige plugin til kal-enderfunktionen. Kontaktdelen:Denne del vil kun bestå af en kontaktformular. En ind-meldelsesformular har ingen relevans, da klubben ikke pt. kan optage nye medlemmer. Mailadresse indkodes af AFA, så de altid ved, hvem der modtager og besvarer henvendelser.

4.0 Opbygning

.

.

.

.

.

.

.

.

.

.

.

.


Overordnede beslutninger:Vi har overordnet besluttet, at sitet skal have et så enkelt og minimalt “larmende” layout som muligt. Det vil sige, at vi øn-sker brug af få elementer og en neutral baggrund uden brug af billede eller grafik. Vi vil give baggrunden samme farve-kode på skærmbilledet som i menubjælken, så sitet bliver integreret i hele skærmbilledetVi har valgt en størrelse på 960x600 px og søgt at undgå scroll.Styrende for dette valg af layout er at sætte fremvisningen af medlemmernes billeder i centrum. Det er de billeder, sitet handler om, og andre elementer eller farver i designet må ikke tage opmærksomheden fra billederne.Vi har i forbindelse med valg af designparametre researchet på såvel danske som udenlandske fotografers og fotoklubbers sites. For størstedelens vedkommende har de truffet samme overordnede valg som vi.

Placering af elementer:Vi har placeret elementerne på siden i en prioriteret form, så vi får ledt den besøgende til det felt, hvor vi ønsker de skal koncentrere opmærksomheden.1. Øverste venstre hjørne: Logo og tydeligt “afsender” for sitet.2. Til højre i midtersektionen: Billedfremviser, kalender. På indexsiden vises et stillbillede, som er månedens foto.3. Øverste højre hjørne: Mulighed for facebook.4. Menuerne er minimale og diskrete.

.

.

4.1 Designvalg


Farvevalg:Vi har som skrevet truffet et valg om neutrale farver, som billeder uanset deres farvekombination vil kunne stå godt til og blive fremhævet.Vores valg er endt på grå nuancer fra det meget mørke spek-ter til lysere. Undtaget er menuerne som skal være umiddel-bart synlige.

Menupunkter (den åbne del af sitet):HjemGalleriKalenderKulturbyKontaktMedlemslogin

Logo:Klubbens logo stillede os i et regulært dillemma. På den ene side synes vi, at klubbens logo trænger til et redesign, men på den anden side er det et væsentligt træk ved foreningen, at den er gammel og traditionsrig. Derfor synes vi ikke, at foreningen historiske logo skal helt væk. Vi har forsøgt at redesigne logoet i respekt for det gamle logo.Vi har ikke anvendt det nye logo, men det er tænkt således at såvel det nye som det gamle kan anvendes på sitet. Vi har ladet “Grundlagt 1896” indgå i headeren på sitet, fordi vi mener det er en pointe, at klubben er stiftet for mere end 100 år siden. Klubbens gamle logo indgår også som et grafisk ele-ment i menulinien.

4.1 Designvalg/fortsat .

.

.

Baggrund: #202020 Bjælker: #414141

Tekstbox: #c4bfb3

Menuer: #ebb857 (inaktivt menupunkt)

Menuer: #fff (aktivt menupunkt)

Nuværende logo Udkast til nyt logo

Grundlagt 1896


Typografi:Vi har valgt at arbejde med websikre skrifter, som alle har på computeren.For at skabe kontrast i tekstblokkene på sitet har vi valgt at bruge både en serif og en sans serif.Vores valg af fonte er muligvis lidt “almindelige” valg, men vi mener de valgte skrifter opfylder vores ønsker:Overskrifter, mellemrubrikker og menupunkter: VerdanaBrødtekst: Georgia

Fravalg:Vi har, som tidligere indikeret, foretaget nogle væsentlige fravalg i arbejdet med sitet:

Vi har fravalgt brugen af mange farver og dermed givet os en skarp ramme at arbejde med fra start.

Vi har fravalgt brugen af “skrappe” farver og holdt os til en neutral farvesammensætning.

Vi har fravalgt muligheden for at indsætte baggrundsbillede eller grafiske effekter og mønstre på såvel baggrund som elementer. Det vil blot forstyrre og tage opmærksomhed fra billederne på sitet.

Vi har fravalgt indsættelse af et søgefelt, da vi ikke mener at sitet er så omfangsrigt, at det har en relevans. Det vil blot forstyrre det samlede billede på skærmen uden at have nogen væsentlig funktionel betydning.

Vi har fravalgt brugen af scroll, så vidt det overhovedet er muligt. Det har også været et parameter for arbejdet med sitet.

.

.

4.1 Designvalg/fortsat


Teknologi:Sitet er opbygget i Wordpress. Vi har taget udgangspunkt i temaet Starkers, da vi ønskede at have så frie hænder som muligt i opbygningen af sitet.

Forberedelse:Vi tog udgangspunkt i vores skitser fra processen med mind-maps og de efterfølgende tegnede skitser i flowchart og story-board.Skitserne og de tanker der var gjort omkring det, var grund-lag for et arbejde med designet, som blev foretaget i Photo-Shop.Grafiske elementer er således først udarbejdet i PhotoShop og efterfølgende er farvekoder og enkelte elementer blevet bearbejdet i PhotoShop til videre anvendelse i Wordpress.

Plugins:Vi vægtede det højt at finde de rigtige plugins til de vigtigste elementer på sitet: Billedfremvisningen, kalenderfunktionen, kontaktformular og RSS-feed.Vi valgte følgende plugins: Kalender: Ajax Event CalenderKontakt: Contact Form 7RSS: HungryfeedGalleri: NextGen gallery

I arbejdet med et nyt website til Aarhus Fotografiske Ama-tørklub har vi vægtet at få produceret en enkel og æstetisk side, som har fokus i omdrejningspunktet i foreningen: Bil-leder og fremvisningen af billeder.

Vi har foretaget en lang række valg og fravalg. Vi har også arbejdet med dele, som vi ikke direkte tager i anvendelse. Vi har fx. arbejdet med nyt logo, men tiden er for knap til at gøre det gennemført. Derfor ligger logoet der blot som en baggrundsinformation og et udkast, så det er ikke implemen-teret i sitet. Foreningen må efterfølgende tage stilling om de vil anvende eller viderebearbejde det.

Vores forarbejde med undersøgelse over diverse skitser til design af sitet, som vi ønskede det, var overskueligt og rela-tivt enkelt at arbejde med.

Den efterfølgende rent tekniske udarbejdelse af sitet har budt på udfordringer og problemer med implementeringen af vore valgte plugins. Navnligt har plugin til kalenderen, Ajax Event Calender, budt på udfordringer vi ikke nåede at løse. Foreningen må selv eller i samarbejde med os arbejde videre med det.

Vores valg af tema har også givet os en udfordring. Vi valgte Starkers, The Completely Naked Theme. Vi har derfor skul-

5.0 Realisering

6.0 Konklusion

.

.

.

let definere vores site fra bunden. Det har været en stor men også lærerig udfordring, at vi ikke blot tog den mest tilgæn-gelige vej og valgte et foruddefineret tema, som vi efterføl-gende tilpassede vores site til. Vi valgte ikke at skyde genvej men at konstruere vores site fra bunden, så sitet blev tilpas-set vores ideer og ikke omvendt.

Heri ligger også noget af forklaringen på, at vi ikke nåede at få implementeret fx. Ajax Event Calender. Vi har leveret de fuldt funktionelle sider vi skal, men vi havde selvfølgelig gerne set, at vi kunne levere den vigtige kalenderside fuldt funktionel.

Samarbejdet i gruppen har været godt og respektfuldt. Vi har arbejdet med respekt for hinandens styrkesider men også med en inddragelse på tværs af styrker, så der er tale om et gruppearbejde og ikke tre enkeltmandspræstationer.


Bilag:

1. Mindmap: Besøgende på hjemmesiden

2. Mindmap: Klubbens medlemmer

3. Skitse: Første udkast til design af sitet

4. Skitse: Oversigt over sider

5. Storyboard

6. Optegning og opmåling af sitet

7. Flowchart

8. Tidsforbrug

1

2

3

4

5

Farv

ekod

er:

Bag

grun

d: #

2020

20 T

ekst

box:

#c4

bfb3

Bjæ

lker

: #

4141

41Skr

iftfo

nte:

Ver

dana

: H

1: V

erda

na B

ody:

Geo

rgia

.

AFA

-site:

960

x 6

00 p

x

100px

132px

20px

20px

20px

20px

20px

30px

15px

640px

260px

20px

77px

438px

438px

6

Flowchart:

Flowchart med repræsentation af central menubar, der går igen på alle sites. Fra tre af siderne (Galleri, Om AFA og Links) kan man komme videre til undersider, der stadig indeholder me-nubaren med de seks centrale sider.

Aktivitet Forventet tidsforbrug Reelt tidsforbrug

Foranalyse

Kundebesøg, krav og ønsker 2 2

Planlægning og metodevalg 1 2

Undersøgelse

Tidsplan 1 1

Research 10 15

Projektrapport 6 8

Ideudvikling 3 3

Design

Flowchart og storyboards 4 3

Grafisk design og logo 4 8

Projektrapport 2 4

Realisering

Projektrapport 2 4

Grafik (Illustrator og

Photoshop)

15 20

WordPress, HTML og CSS 20 60

Opsamling og aflevering 2 5

Samlet tidsforbrug 72 135

Tidsforbrug:

Documents

Projektrapport Christopher, Per, John