Page 1

PROJEKTRAPPORT www.fdfaarhus14.dk UDARBEJDET AF Emil Tolstrup Pierino Gnoni Jesper Møgeltoft Stig Gamborg Hansen Jens Holm-Christensen

Multimedieteknologi & Interaktionsdesign Erhvervsakademi Aarhus juni 2012


INDEX 03 Kundebrief 04 HOME-metoden FORANALYSE 06 Projektbeskrivelse 07 Udviklingsmetode 08 Interessentanalyse UNDERSØGELSE 10 Mindmapping 11 Kommunikationsplan 12 Målgruppe 13 Konceptbeskrivelse DESIGN 15 Informationsdesign 16 Interaktionsdesign

16 Præsentationsdesign 17 Designparametre 19 Poynter eye-tracking 20 Grafiske virkemidler REALISERING / EVALUERING 22 Valg af Wordpress-tema 23 Liste over Plugins 24 Vedligeholdelse af websitet 25 Evaluering af samarbejde BILAG 27 Flowchart 28 Storyborard 29 Grafisk storyboard 30 Designmanual 31 Tidsplan

CASE Udvikling af website i Wordpress CMS KUNDE FDF Århus 14. kreds (Asger og Christina) KONTAKTPERSON Jens Holm-Christensen - hc.jens@gmail.com LINK TIL WEBSITE www.multimedieteam.dk/1812/jens/wp


03

KUNDEBRIEF FDF Århus 14. kreds holder til i det nordlige Århus. Det er en mindre lokalafdeling som består af ca. 20 aktive medlemmer og 10 engagerede ledere. Foreningen er cirka 60 år gammel. De ønsker et funktionelt website, som kan erstatte deres gamle medlemsblad i forhold til medlemsinformation. Derudover skal det nye site også være med til at tiltrække nye medlemmer. Selvom FDF bygger på et kristent livssyn, bliver der lagt vægt på at dette ikke behøver fremgå tydeligt på sitet. Websitet skal være stilrent, enkelt og gerne let at redigere for lederne i FDF. På baggrund af det første kundebesøg og det udleverede projektoplæg, er følgende specifikationer de vigtigste i forhold til udviklingen af deres nye website.

Sitet skal være kompatibelt med unoeuro.com, hvor de har deres domæne. Omkostninger forbundet med websitet skal reduceres til et minimum. Gallerifunktion, hvor de kan lægge billeder af lejrture- og aktiviteter op. Opdeling af FDF klasser fx væbnere, pilte, seniorer osv. “Kommende arrangementer” funktion på forsiden, der kan give brugeren et hutigt overblik - IKKE en kalender, da den vil komme til at se tom ud. Info om priser, klasser, og info til potentielle medlemmer. vigtig info til forældre, er at de har et fritidspas. Det er et spørgsmål som de ofte får. Et kort, der viser hvor de er fx integration med Google maps. Link FDF hovedforening. Kontaktformular med mulighed for at skrive mail til lederne.


04

HOME-METODEN

Projektets struktur er opbygget efter principperne i HOME-metoden (Holistic Open Multimedia development mEthod), som bruges bredt indenfor digitale multimedieproduktioner Metoden kendetegnes ved at være: / Holistisk dvs. omfatte både produktionsog proces-aktiviteter. / Åben dvs. den kan tilpasses en bred vifte af multimedieopgaver og produkttyper. Modellen lægger op til, at der kun udvælges de aktiviteter, som giver mest mening for det enkelte projekt. De fire arbejdstrin gør det nemt at overskue hele projektforløbet og har hjulpet os med at strukturere arbejdsprocessen. I det følgende beskriver vi de enkelte delprocesser og de overvejelser vi har gjort os undervejs.


FORANALYSE

Projektbeskrivelse - Udviklingsmetode - Interessentanalyse


06 FORANALYSE

PROJEKTBESKRIVELSE Det nye website skal udvikles i Wordpress cms og have et omfang på minimum 3-4 sider. Det skal være enkelt for de frivillige ledere i FDF at kunne uploade og redigere indhold. Farver og logo skal hentes fra FDF designmanual på http://leder.fdf.dk/kredsservice/prhjaelp-til-kredsen/kredshjemmeside/. Der må gerne være mange billeder og illustrationer på sitet, men navigationen skal være intuitiv og simpel. En designmanual for websitet skal vedlægges. Der ønskes en stærkere profil af FDF Århus 14. kreds, dens formål og aktiviteter. Websitet skal være med til at skabe større digital synlighed og videregive information på en mere indbydende og lettilgængelig måde. Herved håber man nemmere at kunne hverve nye medlemmer.

Tidsplan & deadline Deadline er mandag d. 4 juni 2012 kl. 12.00, hvor websitet skal uploades til www.multimedieteam.dk/1812/ og projektrapport uploades til issuu.com/perrasmussen. Tidsplan er vedhæftet som bilag.


FORANALYSE 07

UDVIKLINGSMETODE Prototype Op til andet kundemøde, blev der udarbejdet en prototype som i grove træk indeholdt det som kunden efterspurgte. Herved fik kunden en nogenlunde klar ide om hvordan websitet vil komme til at se ud, når det er færdigudviklet, mens de fik mulighed for at komme med kritik og rettelser inden den endelige kodning og udvikling af websitet blev påbegyndt. Det er en enkel og tidsbesparende måde at udvikle websites på.


08 FORANALYSE

INTERESSENTANALYSE For at kunne bestemme det endelige indhold af websitet, er det nødvendigt at identificere de interessenter som vi skal kommunikere med. Et overblik over de vigtigste interessenter kan ses herunder: Nuværende FDF’ere Nye FDF’ere

Lokalsamfund/nærmiljø

FDF Århus 14. kreds Foreningen FDF

Tropførere/ledere

Det nye website skal tilgodese så mange af disse interessenters behov som muligt. Men ikke alle interessenter er lige vigtige. Tiltrækning af nye medlemmer og information til eksisterende medlemmer, er de behov som websitet primært skal dække. Fx har nye FDF’ere et behov for at finde information om hvad det indebærer at være medlem og hvor meget det koster. Eksisterende medlemmer skal kunne finde oplysninger om kommende arrangementer, mødetidspunkter for de forskellige klasser, se billeder fra sidste lejrtur osv. Dette er websitets hovedfunktion – mens ledernes og de resterende interessenters behov kan betegnes som sekundære.


UNDERSĂ˜GELSE

Mindmapping - Kommunikationsplan - Konceptbeskrivelse


10 UNDERSØGELSE

MINDMAPPING Ideudviklingen bærer præg af at websitets opbygning og funtionalitet på forhånd er fastlagt. Derfor har vi valgt kun at lave et mindmap, som uddyber hvad de forskellige funktioner på siden skal kunne. Mindmappet kan ses her:

Mindmappet er en god måde at få klarhed over hvilke muligheder vi lige nu og her kan se i udviklingen af sitet.


UNDERSØGELSE 11

KOMMUNIKATIONSPLAN / Under kundemødet kom følgende ønsker frem til den kommende hjemmeside for FDF 14. Kreds i prioriteret rækkefølge:

Formålet: At opfylde kundens ønsker med ovenstående punkter

Afsender: / Informationsmedie til medlemmer og deres forældre, mødetider, aktiviteter, priser, FDF, Århus 14. Kreds tider mm. Målgruppe: / Informationsmedie til kommende medlem- Se side 12 for detaljeret beskrivelse af målgruppen mer med geografisk placering, aktiviteter, priser, tider mm. Budskab: Det er sjovt at være FDF’er / Links til Christianskirken og FDF’s Det er en sund fritidsinteresse der bidrager hjemmeside. til børns læring. / Ikke ønske om samspil med øvrige sociale FDF giver børn en “god opdragelse” Vi bruger naturen som legeplads medier på nettet, facebook mm. Du får en masse nye venner / Hjemmeside skal have et minimum af vedligeholdelse

Medie: Egen hjemmeside Kommunikationsmiljø: I galleriet - Ikke billeder af børn, hvis forældre ikke har accepteret billeder på hjemmesiden Websitet skal ligge opad FDF’s eksisterende grafiske flade.


12 UNDERSØGELSE

MÅLGRUPPEN Websitet henvender sig til folk der godt kan lide at lege og bruge naturen. FDF Århus 14. Kreds holder til i et delvist belastet område i det nordlige Aarhus. De nuværende medlemmer består af børn i alderen 6-18 år, hvoraf de fleste er mellem 8-14 år. Nogle af dem har oplevet en opvækst med sociale problemer og derfor er FDF et godt sted at knytte nye tætte kammeratskaber. Websitet skal henvende sig til forældre der vil give deres børn en sund fritidsinteresse med naturoplevelser og udendørsliv. Det kan være forældrepar, men også enlige forældre, typisk i alderen 30-45 år. Dagligdagen er præget af lange arbejdsdage og de har sjældent tid til at give deres børn de oplevelser, som FDF kan tilbyde.


UNDERSØGELSE 13

KONCEPTBESKRIVELSE Titel: ”Bliv FDF’er! Og få mange nye venner, sammenhold og sjove oplevelser” Idè: At lave et website der primært kommunikerer i billeder. Sitet skal have en indbydende og overskuelig forside, der vidner om at der sker en masse i FDF Århus 14. Kreds. At lære børnene at have en positiv og unik tilgang til naturen. Udvikle deres kreativitet og sociale kompetencer, der kan supplere den de får fra andre aktiviteter. Brug: Alle børn og unge kan deltage uanset køn, etnicitet, alder osv. Indhold: Udendørsliv, weekendture, hvor fantasien og færdighederne bliver sat på prøve, lære nogle færdigheder i naturen, spille teater og rollespil, fire årlige mødeaktiviteter. Udforming: Websitet skal have en klassisk sideopbygning, så det er nemt at navigere rundt. Stilen skal følge FDF’s overordnede designmanual og signalere fællesskab, og leg i naturen. Behov: Fællesskabet,hvor alle er med, er meget vigtigt for et godt socialt liv. Vi har fokus på at børnene generelt kan fungere i grupper og vi har fokus på at udvikle deres sociale fædigheder. Opmærksomhedsområde: det skal være sjovt og samtidig skal der være respekt for naturen, så børnene er ansvarlige for begge dele. Man kan altid komme i kontakt med en leder hvis man ønsker dette.


DESIGN

Informationsdesign - Interaktionsdesign - PrĂŚsentationsdesign Designparametre - Grafiske virkemidler


DESIGN 15

INFORMATIONSDESIGN Ud fra kundens ønsker, har vi valgt et simpelt informationsdesign. Al unødvendig information er skåret fra, hvilket har givet os følgende inddeling af information:

Hovedkategorier:

/ Nyheder/aktuelt i FDF Århus 14. Kreds / Information om de forskellige klasser / Information om hvordan man bliver medlem / Et galleri med billeder / Kontaktside

Underkategorier:

skitse: flowchart

Klasser: Puslinge, tumlinge, pilte, væbnere, seniorvæbnere, seniorer. Prislister, mødetidspunkter, generel info til forældre, Galleri opdelt efter årstal og aktiviteter. kontaktformular, samlet oversigt med telefonnumre til lederne, og et kort der viser lokation. Side- og linktruktur af den valgte information er fastlagt ved hjælp af et flowchart (se bilag). I informationsdesignet lægger vi vægt på, at hovedkategorierne kun indeholder et underniveau hver.. Dette betyder at brugeren kun vil skulle foretage 1-2 klik for at finde frem til den ønskede information.


16 DESIGN

INTERAKTIONSDESIGN

PRÆSENTATIONSDESIGN

Hvordan interagerer brugeren med vores site? Websitet har en klassisk hierarkisk struktur med en låst menubar over headsektionen. Her kan brugeren klikke sig ind på samtlige sider - nemt og enkelt. På alle sider linker logoet tilbage til forsiden. Eksterne links til FDF hovedorganisation og Christianskirken findes nederst til højre. På siden “kontakt”, er der mulighed for at skrive en mail med spørgsmål til webredaktøren.

I forhold til målgruppen, mener vi det er hensigtmæssigt at benytte et velkendt webside-design med vandret navigationsmenu i toppen. Forsiden skal være opmærksomhedsskabende og derfor skal temaet indeholde mulighed for foto-content, sideshow eller lignende. Billeder er en vigtig del af vores site og resten af informationen skal være informativ og letlæselig.Vi har bevidst fravalgt brug af flash eller anden form for indhold, som kan forstyrre brugeren - derudover vil det også gøre sitet langsommere.

Spalten til højre viser nyeste indlæg. Ved at klikke på en nyhed i denne oversigt, kommer brugeren automatisk ind på den klasse, hvor nyheden oprindeligt er postet. På Et detaljeret storyboard er vedhæftet som klasse-siderne er det således kun nyheder bilag på side 28. som vedrører den enkelte klasse der vises.

skitse: storyboard


DESIGN 17

DESIGNPARAMETRE en forside hvor det primære element er et stort slide-show med billeder til at fange opmærksomheden og hurtigt fortælle læseren hvem FDF Aarhus 14. kreds er. Vi har med vilje fravalgt al animation (udoDerudover består forsiden af mindre ver forsidens slide-show), video og audio, Vi har forsøgt at koble læserens erfaringer og forhåndsopfattelse af FDF sammen med da dette ville gå ud over vores overordnede grafiske elementer der står i kontrast til slide-showet. sidens grafiske elementer. I det spil er logo ide med at siden skal fremstå simpel, minimalistisk, funktionel og overskuelig.Vi har og skrifttype gode værktøjer til at brande Typografi samtidig med vilje ikke valgt et baggrundsorganisationen. Samtidig har vi overvejet Vores side anvender skrifttypen ”Gill Sans” det layoutet så det giver et ensartet udtryk, billede da dette ville virke for støjende og opmærksomhedskrævende som igen ville gå som indgår i FDFs standard. En god weblæseren kan identificere med FDF. Det fond som vises klart på computerskærmen. overordnede grafiske budskab skal signalere udover overblik og funktionalitet. FDF som et synligt, folkekirkeligt børne- og Form ungdomsarbejde med livsvigtige fællesskVi har valgt en forholdsvis smal wrapper til aber og meningsfyldte aktiviteter. vores side for at øge overblikket og funktionaliteten.Vi har forsøgt at gøre det visuVores valg af designparametre er overvejene styret af FDFs grafiske standard. Stand- elle indtryk så overskueligt og funktionelt Gill sans Regular Gill sans Bold arden omfatter typografier og logoer.Vi har som muligt, da dette var kundens ønske. Form-elementerne er valgt ud fra principdog selv bestemt farver og andre grafiske pet om kontrastforhold.Vi har derfor valgt elementer efter en vurdering af hvilke, der Designparametrene handler overordnet om branding af organisationen FDF og nærmere FDF Århus 14. Kreds.

går godt i spænd med FDFs overordnede grafiske standard.

Tgfe Tgfe


18 DESIGN

Illustrationer Billedmaterialet stammer fra et større arkiv af billeder vi har modtaget fra kunden. Vi har til forsidens slide-show udvalgt de billeder der er mest sigende i forhold til at vi har med Åarhus 14. kreds FDF at gøre. Det er meningen at disse billeder skal fange læseren med det samme han eller hun besøger siden og derved for lyst til at udforske siden videre. Header-logoet er taget fra FDFs grafiske standard.Vi har blot tilføjet underoverskriften ”Århus 14. kreds” for nærmere at specificere sidens afsender.

kopi af hovedsiden fdf.dk.Vi ville give Århus 14. kreds deres særegne udtryk samtidig med at de selvfølgelig kan identificeres som hørende under FDF. Farver Farvepaletten er udvalgt så denne reflekterer FDF logoets farver, da disse er meget genkendelige for organisationen FDF. FDF-blå: (#2872a8)

FDF-rød: (#d00024) Vi har fravalgt FDFs slogan og andet billedmateriale fra deres grafiske standard, da vi ikke ønskede at siden blot skulle ligne en

Fontfarven er primært sort, men der bruges ovenstående blå farve ved links eller er hvid, når baggrunden er den blå farve. Diverse illustrationer (såsom kontakt-logoer) er valgt i samme farvetema.


DESIGN 19

POYNTER-EYE TRACKING Udfra Poynter eye tracking har vi valg at placere FDF logoet i øverste venstre hjørne for at vise brugeren, at det er den rigtige hjemmeside man er inde på.

Herefter fanges blikket af store billeder i bevægelse og menubaren, for senere at gå ned på nyhedsbloggen med billeder for seneste info. Slutteligt de mere statiske emner som: links, kommende aktiviteter, det sker, seneste indlæg og sluttelig kontakt informationer til FDF Århus kreds 14.


20 DESIGN

GRAFISKE VIRKEMIDLER Komposition Til hjemmesidens komposition er der taget udgangspunkt i poynter-eye-tracking-metoden. Hvor vi har placeret logoet i øverste venstre hjørne, fordi det er her, man først kigger, og det er her, det etableres om man befinder sig på den ønskede side. Derefter har vi fokuseret på, at man som bruger hurtigt bliver fanget af et visuelt element, og til det har vi brugt et slideshow. Desuden har vi forsøgt at skabe genkendelighed vha. træet i højre hjørne, der er et af FDFs gængse symboler. I content har vi placeret FDFs blog til venstre og ”recent blog posts”, ”upcoming events” og ”links” til højre. Denne komposition giver en hurtig og nem indgang til, hvad der sker i FDF 14. kreds både siden sidst og i fremtiden.

Sidens overordnede fokus er netop at give indtryk af, at der sker en masse ting i FDF 14. kreds. Det gøres gennem billeder, nyheder og kommende aktiviteter. Målet er at skabe en side, der er mere end blot et informationssite – i stedet er målet at sitet bruges regelmæssigt af nuværende medlemmer, forældre, ledere og kommende medlemmer. Stil, stemning,og kontraster Vi har taget udgangspunkt i at FDF 14. kreds ønsker at være en åben og aktiv kreds, derfor har vi valgt lyse farver, der nemt kan relateres til naturen. Her tænkes der specielt på den blå baggrundsfarve, der minder om en himmel. Den mørkeblåfarve, der er gennemgående for temaet, er med til at skabe genkendelighed, da det er FDFs officielle farve. Træet i øverste højre hjørne er med til at give sitet lidt ekstra fornemmelse af natur.

Diversiteten i sidens målgruppe er stor, og det er derfor vigtigt, at sidens stil passer så godt som muligt til alle brugere. Det har derfor været vigtigt at have en forholdsvis neutral stil. Desuden er sitet stilrent, for at gøre det nemt at finde frem til den information man ønsker og for ikke at skabe støj, der svækker sidens budskab om en aktiv, sjov og seriøs FDF-forening.


REALISERING/EVALUERING

Valg af Wordpress-tema - Liste over plugins Evaluering af samarbejde


22 REALISERING/EVALUERING

VALG AF WORDPRESS-TEMA Efter en grundig gennemgang af mulige gratis wordpress-temaer, er valget faldet på temaet “Westward”. Temaet giver mulighed for at indsætte et slideshow med op til 5 billeder på forsiden og indeholder mange redigeringsnuligheder som fx automatisk slideskift, glidende overgang, billedtekst og at billederne kan bruges som links. Det understøtter samtidig pluginnet NextGEN Gallery, som er vigtigt i forhold til websitets visulelle stil. Desuden er der mange widgets muligheder og mulighed for to menubarer., hvis det ønskes. Det er et enkelt tema at redigere for de FDF-ledere, som skal arbejde videre med sitet efter overdragelsen. Temaets overordnede stil er bevaret, men vi har foretaget småjusteringer i forhold til farver og font. Navigationsmenuen har vi gjort gennemsigtig, da den oprindelig menu virkede for klodset og tung i sit utryk.. Og baggrundsfarven har vi ændret til blå vandret graduerende.


REALISERING/EVALUERING 23

LISTE OVER PLUGINS / Akismet spamfilter / All-in-one Calendar / Backup - automatisk backup af sitet hver uge / Contact Form 7 - kontaktformular / NextGEN Gallery - Galleri med mange redigeringsmuligheder / Quick Page/Post Redirect DEV - Gør det nemt at kategorisere nye indlæg under de enkelte klasser / WP Google Maps - Et kort der viser lokation via google maps tjeneste / SEO 4.3.9 - Søgemaskine optimering der får siden højere placeret på fx Google / Google Analytics - Gratis statistik program som gør det enkelt at tracke hvor besøgende kommer ind på sitet fra, hvad de klikker på osv.


24 REALISERING/EVALUERING

VEDLIGEHOLDELSE AF WEBSITET Det er frivillige ledere som skal vedligeholde og opdatere sitet. Derfor afleveres det i en form, hvor nyheder og upload af billeder, kan foretages uden meget forhåndskendskab til wordpress-kontrolpanel. Der er hjælp af hente i designmanualen (bilag x)


REALISERING/EVALUERING 25

EVALUERING AF SAMARBEJDE Formål: Lave et redesign på FDF’s Århus kreds 14 hjemmeside med omfang på 3-4 sider. Hjemmesiden implementeres i Wordpress på multimedieteam serveren. Lave projektrapport udfra HOME modellen på 10 sider+bilag. Projektrapporten lægge ud på ISSUU portalen. Forarbejde Gruppen kom hurtigt fra start med at lægge en tidsplan for hjemmeside og rapport. Mødetid for gruppen hver dag mellem kl. 09-15. Det var aftalt med kunden, at andet kundebesøg ville blive om torsdagen, hvorfor der blev sat en milepæl mht. hjemmesidepræsentation til torsdag middag. Forløbet Tidligt i forløbet blev vi enige om et skelet tid siden, hvor alle hjemme ledte efter egnet tema til siden. De enkelte dele på siden og rapporten blev uddelegeret til den enkelte, hvorefter vi alle samtidigt arbejdede side om side i grupperummet. Resultat Tidsplanen er blevet overholdt. Projektrapporten er færdig. Tidsplanen over planlagt tid og forbrugt tid er ......... Idet vi har arbejdet i grupperummet samtidigt, har vi været gode til at hjælpe hinanden med opgaven.


BILAG

Flowchart - Storyboard - Designmanual - Tidsplan


BILAG 27

Forside

FLOWCHART Forside

Klasser

Nye indlæg Det sker Links

Klasser

Eksterne links

Vær med

Beskrivelse FDF+formål

Galleri

Kontakt

Galleri thumbnail s

Puslinge

2011 billeder

Tuninge

2012 billeder

Pilte

Arkiv billeder

Kontakt info, krak kort, formular

Væbnere Interne links

Seniorvæbner

Signaturforklaring Navigationsknap

Seniorer Side


28 BILAG

STORYBOARD (Skelet med m책l og placeringer


BILAG 29

GRAFISK STORYBOARD


30 BILAG

DESIGNMANUAL Typografi, Logo og farver: Som angivet i FDF’s folder om grafiske standarder. Kan downloades på: http://leder.fdf.dk/fileadmin/filer/leder/Kredsservice/PR-hj%C3%A6lp%20til%20kredsen/Grafisk_standard.pdf Font: Gill Sans (Regular & Bold) i sort skrift. FDF-blå: (#2872a8)

FDF-rød: (#d00024) Farver: http://leder.fdf.dk/kredsservice/pr-hjaelp-til-kredsen/grafik-og-layout/ Billeder og størrelse: Slideshow billeder 900 x 300 px Galleri billeder: Tilpasses af pluginet Nyheds billeder: Tilpasses af pluginet


BILAG 31

TIDSPLAN

Projektrapport gruppe 3  

rapport FDF-side

Read more
Read more
Similar to
Popular now
Just for you