1 INDHOLD
PROJEKTRAPPORT www.fdfaarhus14.dk Annie Flydtkjær Lina Lissner Marie Laursen Naja Ravn-Jensen
2
KONTAKTPERSON Marie Laursen marielaursen10@hotmail.com 20743692 LINK TIL SITET www.multimedieteam.dk/1812/marie/fdfmarie/wpfdf
3 INDHOLD 4
1.0 Foranalyse
4
1.1 HOME-metoden
5
1.2 SCRUM
6
1.3 Kundemøde
7
1.4 Projektplan
7
1.5 Tidsplan
8
2.0 Undersøgelse
8
2.1 Kommunikationsplan
10
2.2 Ideudvikling
11
3.0 Design
11
3.1 Information-, interaktion- og præsentationsdesign
14
3.2 De seks designparametre
16
3.3 Grafiske virkemidler
19
3.4 Andet kundemøde
20
3.5 Designmanual
21
4.0 Realisering
21
4.1 Realisering og evaluering
23
5.0 Bilag
4 1.0 FORANALYSE 1.1 HOME-metoden Til at strukturere projektopgaven har vi valgt at anvende Louise Harder Fischer og Marie Oosterbaans Home-model, hvilket er en forkortelse for Holistic, Open Multimedia development Method. Modellen henvender sig specifikt til udvikling af produkter til alle typer digitale medier, hvilket også gør den anvendelig til vores projekt på internettet. Vi finder metoden anvendelig, da den har en helhedsorienteret tilgang til udviklingen, hvilket betyder, at man ser på alle aktiviteterne ud fra både en produktrettet og procesrettet vinkel.Vi vil i dette projekt hovedsagligt lægge vægt på den produktrettede vinkel, da denne vinkel er mest relevant ift. projektets størrelse. Derudover er det en åben metode, hvilket giver os mulighed for at tilpasse og justere den til netop vores projekt, da vi kan fravælge elementer, som vi ikke finder passende. HOME-modellen består af følgende fire trin: FORANALYSE
UNDERSØGELSE
DESIGN
REALISERING
5 INDHOLD 1.2 SCRUM Vi vil i projektarbejdet desuden arbejde efter principper i udviklingsmetoden SCRUM, hvor projektet opdeles i mindre elementer for at sikre hastighed og dynamik i det samlede projekt. Når projektet starter opskrives elementerne i en liste. I denne opgave er elementerne opstillet i en projektplan. Metoden er agil, og en af fordelene er derfor, at man undervejs i projektarbejdet løbende kan tage hensyn til ændringer i kravene til sitet. Derudover er metoden iterativ - dvs. der arbejdes i iterationer/ projektet er opdelt i faser, og man har altid mulighed for at gå tilbage til en tidligere iteration og rette istedet for kun at arbejde fremad som f.eks. vandfaldsmodellen.
SCRUM Inputs
kunder, team, brugere m.m.
Product Owner
Product Backlog
SCRUM Master
Team
Sprint planning meeting
Alle i projektet har adgang til viden og ressourcer, og der holdes dagligt et møde, hvor det klarlægges, hvor langt man er i projektet, hvad der er færdigt, hvad der mangler, og hvordan arbejdet går.
Product Backlog refinement
Sprint Backlog
24 t
Dagligt SCRUM møde
1-4 uger
Review
Sprint
Fremgang
Retrospective
Release Backlog
Burndown Chart
6 1.3 Kundemøde Vi mødtes den 25. maj med vores kunde, FDF Århus 14. kreds, som er en lille lokal afdeling, der hører til Christianskirken under organisationen FDF. FDF Århus 14. Kreds har et behov for et website, da den de har på nuværende tidspunkt er stort set ikke-eksisterende. Under kundemødet fremførte FDF Århus 14. Kreds følgende ønsker:
• Et website, der fungerer som appetitvækker for potentielt nye børn og forældre, hvor de kan se, hvordan FDF-livet er. Samtidig skal websitet fungere som en side, der kan bruges af de nuværende FDF’er, hvor de kan se informationer om arrangementer, mødeoversigter m.m. • FDF Århus 14. Kreds havde ikke nogle specifikke ønsker til sitets design, udover at FDFs logo skal bruges. Desuden havde de et ønske om at FDFs blå farve skal bruges, men det var ikke noget krav. • Et galleri. Der var dog lidt uenighed om, hvorvidt det skulle være et åbent eller lukket galleri af forskellige årsager. • En form for kalender, men da de kun har 3-5 store arrangementer om året, mente de, at en kalender vil komme til at se tom ud. • Sitet skal styres af lederne. • Et af deres vigtigste behov var, at hjemmesiden skal kunne passe sig selv uden de store vedligeholdelser fra lederne.
7 1.4 Projektplan FORANALYSE
UNDERSØGELSE
DESIGN
REALISERING
HOME-modellen Kundemøde Tidsplan
Ideudvikling Research Målgruppeanalyse FDF kreds 14 Kommunikationsplan
Interaktion, information, præsentation De seks designparametre Grafiske virkemidler Stil og stemning Komposition Poynter eye-tracking Navigation Kontraster Gestaltlovene Billeder Flowchart, storyboard Designmanual
Vurdering/evaluering af arbejdet, forløb og resultat Uploades/gøres online Validering HTML, CSS Wordpress
1.5 Tidsplan
Gantt-diagram og tidsplan er vedlagt i bilag 1 og 2.
8 2.0 UNDERSØGELSE 2.1 Kommunikationsplan Vi har valgt at udarbejde en kommunikationsplan, der inddrager elementer fra konceptbeskrivelse, projektbeskrivelse og kommunikationsplan for at samle og overskueliggøre projektets elementer. Formål At skabe et enkelt og minimalistisk website der: 1. Kan være med til at trække nye medlemmer til 2. Indeholder relevant information til både medlemmer og deres forældre på en overskuelig og indbydende måde Med websitet vil vi signalere leg og glæde og lægge vægt på udendørsliv. Afsender FDF har den dominerende afsenderrolle, og der skal således ikke være brugergenereret indhold på sitet. Designet skal stemme overens med kundens stil og ønsker samt illustrere troværdighed og autoritet i de informationer, der leveres.
Opmærksomhedsområder Indholdsmæssigt henvender siden sig hovedsageligt til forældrene, dog også til børnene via farver og billeder.Vi vil overskueliggøre informationen for forældrene og gøre det nemt tilgængeligt via et simpelt grafisk design samt en simpel opbygning af websitet. Det skal være let for målgruppen at tilgå informationerne på hjemmesiden. Både hvis de ved, hvad de leder efter, men også hvis de ikke ved, hvad de leder efter. Der skal derfor være en god struktur, sigende menuknapper og ikke for mange klik for at finde de informationer, man mangler.
9 Målgruppe FDF 14. kreds har to primære målgrupper bestående af henholdsvis forældre, der har FDFbørn, og forældre, der ikke har FDF-børn samt to sekundære målgrupper, der ikke er beslutningstagerne i familien, men stadig har gavn af sitet: Børn, der er med i FDF 14. kreds og børn, der ikke er med (endnu). Da FDF 14. kreds er beliggende i Århus befinder målgruppen sig også her. Forældrenes incitament for at gå ind på sitet er at dække et informationsbehov (Digital Media Management, s. 124) – at finde informationer om arrangementer, ture m.m., finde ud af mere om FDF 14. kreds og for potentielle medlemmer at vurdere om de skal være med. De sekundære målgrupper, børnene, er med på sidelinien, når forældrene bruger sitet. Sitet skal derfor også tiltale børnene. Selvom det er forældrene, der tager beslutningerne, er det stadig børnene der skal have lysten til at være med i FDF. Forældrene og/eller børnene vil ofte tilgå websitet fra hjemmet, og det skal derfor være nemt at bruge og passe ind i forældrenes måske travle hverdag.
Minerva
http://www.samfundsfag.com/index.php?option=com_content&view= article&id=254&Itemid=350
Målgruppen kan både placeres i det grønne og det rosa segment i Minerva-modellen. Folk i det grønne segment har engagement og er fællesskabsorienterede principmennesker. Det rosa segment er gruppe-orienteret og fokuserer på tradition, familie og det nære miljø. De har vægt på at realisere traditionelle, sociale mål som familie, venner, lokalsamfund (lokal solidaritet) Gallup
http://www.tns-gallup.dk/vores-markedsfokus/medier/printmedier/ gallupkompas/kompas-segmenter.aspx
Målgruppen kan placeres i det Fællesskabsorienterede segment, hvor nøgleordene er medmenneskelighed, social ansvarlighed, omsorg, økologi og sundhed.
10 2.2 Ideudvikling Vi har benyttet mindmap i ideudviklingen for at finde ud af, hvilke elementer sitet skal indeholde samt hvilken designmĂŚssig stil, det skal have.
Se skitser fra ideudviklingen i bilag 3.
11 3.0 DESIGN 3.1 Information-, interaktion- og præsentationsdesign Informationsdesign I informationsdesignet har vi arbejdet med hvilken information og retorik, der skal være på websitet. På baggrund af kundens ønsker til websitet samt vores foranalyser, herunder målgruppe, er vi nået frem til at glæde, fællesskab og leg skal være retorikken på websitet. I forhold til dette, har vi valgt et almindeligt sprogbrug, der er nemt at forstå, da sitet henvender sig til almindelige familier med børn. Endvidere i forhold til sprogbruget fokuserer vi på at få et sjovt og nemt sprog frem på siden, der fanger målgruppens opmærksomhed, og som udtrykker de rigtige værdier i forhold til kunden. Det ses bl.a. ved, at der er brugt en del billeder på siden frem for tekst, da vi mener billeder vil tale bedre til målgruppen end ord.
Interaktionsdesign For at gøre websitet overskueligt og nemt at bruge, gør vi det muligt at tilgå forsiden og undersider i hovedmenuen fra alle sider på sitet. Det vil sige, at vi har opbygget en hierarkisk struktur, hvor det er nemt for brugeren at komme frem til den ønskede side gennem få ’klik’ (se flowchart på næste side) Vi har fravalgt en søgefunktion på websitet, da siden er meget simpel at navigere på, og vi mener, at en søgefunktion ville kræve en større virksomhed med flere undersider. Vi har valgt at lave en kontaktformular, da det skal være nemt for brugeren at kontakte kunden med spørgsmål eller lignende. En kontaktformular gør det lettere for brugerne end hvis de skal copy-paste en emailadresse. En emailadresse på sitet øger desuden risikoen for spam. Kontaktformularen suppleres af et telefonnummer til dem, der foretrækker at benytte en mere personlig kontakt end e-mail. Vi har endvidere lavet en fane, der hedder ”Aktiviteter”, som indeholder bl.a. en ”Mødekalender” og ”Andre Aktiviteter”. Grunden til dette er, at målgruppen skal have nemt ved at se hvilke forskellige aktiviteter deres børn laver og hvornår.
12 Flowchart
13 Vi har af samme årsag lavet ”Huskelisten”, hvor man kan gå ind og se, hvad man skal huske til de forskellige arrangementer og aktiviteter. Under menupunktet ”Det Sker” har ledere mulighed for at skrive om bl.a. deres positive og gode oplevelser ved forskellige møder, events eller ture. Dette er med til at gøre websitet mere levende og skabe dynamik. Præsentationsdesign I præsentationsdesignet har vi arbejdet med at præsentere websitet på bedst mulige måde. Det gjorde vi ved at vælge et nemt og overskueligt layout, vi synes stemmer overens med de ønsker, kunden og målgruppen har.Vi vil bl.a. bruge mange billeder frem for megen tung tekst. Der bruges derfor korte, klare og letlæselige tekster, så brugeren hurtigt og let kan skimme siderne og teksten, danne sig et overblik og finde de nødvendige informationer. Overskrifter skal ligesom menupunkterne være sigende, så læseren finder det relevant og interessant at læse videre i stedet for bare at lave en hurtig scanning af siden.
Billeder vil på dette site være en god måde at kommunikere på, da man med et billede kan vise et fællesskab og glæde frem for at skrive ”vi er et fællesskab”, og man husker bedre billeder end tekst. Vi har ikke lagt video ind, men muligheden er der, da man sagtens kan uploade et video af f.eks. et af børnene, der fortæller om sin oplevelse på sommerlejren.
14 3.2 De seks designparametre 1
2
3
4
5
6
Form Vi vil udarbejde websitet i Wordpress, da vi her har mulighed for at vælge imellem et stort antal temaer, hvor design og et varierende antal elementer er defineret på forhånd. Blandt de mange temaer har vi udvalgt Mantra, da det i høj grad lever op til de opsætnings- og designmæssige krav, vi har defineret i de foregående samt flowchartet. Samtidig har dette tema adskillige redigeringsmuligheder, hvilket gør, at vi har mulighed for at ændre de elementer på sitet, som ikke passer til vores site. Alle sider er opbygget med samme baggrundsbillede, header og footer. For at holde sitet simpelt vi vil ikke tilføje flere elementer på de enkelte sider end højest nødvendigt.
Farver Vi vil primært benytte os af grønne skovfarver, for at illustrere udeliv. Derudover vil vi benytte os af en blå farve, da blå er kendetegnende for FDF. På siden med klasserne vil vi benytte de på forhånd bestemte klassefarver listet op på FDFs website under siden: http://leder.fdf.dk/kredsservice/pr-hjaelp-til-kredsen/ grafik-og-layout/ Typografi I valg af typografi fandt vi det vigtigt at gå væk fra de typografier, der er anvendt i kundens brochurer, da disse ikke udtrykker design, stil og kreativitet. Derudover ønskede vi at bruge en diskret typografi, bl.a. for at holde sitet simpelt, Vi har derfor valgt at anvende Gill Sans, da denne lever op til ovenstående krav. Fonten er en del af sans-serif familien, som er typografier uden fødder, hvilket gør den let at læse på en computerskærm og derfor velegnet til web. Derudover har det også været afgørende for valget, at den samme font bruges på FDFs nationalside, og vi derfor skaber en sammenhæng mellem de to sider.
15
Billeder Et billede siger mere end tusind ord. Derfor har vi benyttet billeder til at understøtte tekster, skabe en stemning på sitet og sælge budskabet. Det fungerer bedre at vise FDF-kredsens aktiviteter og værdier ved brug af billeder end gennem beskrivelser. Billeder gør desuden, at websitet bliver mere interessant og nærværende at besøge. Vi har anvendt billeder med motiver, som vi føler på bedste vis illustrerer, hvad det betyder at være FDF’er. Motiverne er fra naturen, møder, arrangementer og af glade børn. Billederne er primært kundens egne, da det giver det mest ærlige udtryk, men der er anvendt enkelte billeder fra sxc.hu (f.eks. baggrundsbillede) for at få den nødvendige høje opløsning/dpi. Lyd Vi har valgt ikke at anvende lyd på websitet, da kunden ønsker et minimalistisk og simpelt site. Vi vurderer desuden, at det ikke er nødvendigt at inddrage lyd for at skabe den ønskede stemning på sitet.
Animation I forbindelse med ideudviklingen diskuterede vi brugen af animation på forsiden i form af et slideshow af billeder.Vi har valgt at anvende et sådan slideshow, da det er med til at tiltrække opmærksomheden, og det giver mulighed for at linke til sider eller undersider. Det indeholder kun få billeder, og der linkes kun til sider, som også findes i hovedmenuen, da vi ønsker at bevare overskueligheden.
16 3.3 Grafiske virkemidler Ud fra ovenstående designvalg udarbejdede vi følgende storyboards: Stil og stemning Medievalg, komposition, farver og typografi er alt med til at skabe en stil og stemning på sitet. En stil og stemning som skal stemme overens med målgruppen, afsenderen og budskabet. Stilen skal være simpel og minimalistisk. Det skal være legende og sjovt for børnene samt seriøst og flot for forældrene. Det skal udstråle funktionalitet og overblik og gøre det let for brugeren at navigere rundt på siden. Komposition Sitet er bygget op af en forside, 6 forældresider samt 11 undersider. Forældresiderne er administreret i en hovedmenu i toppen af siden med logo og navn placeret til venstre. Hovedmenuen har dropdown-menuer, hvor man kan tilgå undersiderne. Denne top går igen på alle siderne og skaber sammenhæng/rød tråd i sitet, samtidig med at den
17 gør det muligt altid at navigere frit rundt mellem alle siderne. De forskellige sider følger forskellige layouts, men flere deler samme type layout. Dette er ligeledes med til at skabe en rød tråd i sitet og er med til at gøre det overskueligt og simpelt. Siderne i hovedmenuen er de primære sider og fungerer som forældre til undersiderne i dropdownmenuerne. Hovedmenuen indeholder således de vigtigste menupunkter. Der er lavet dropdown med underpunkter for at skabe overskuelighed og gøre det let at navigere. Poynter eye-tracking Eye-tracking studier viser at brugerne læser et website med tekst og billeder på en helt bestemt måde. De fokuserer først på øverste venstre hjørne, og den vigtigste information skal derfor være her.Vi har derfor placeret logo og navn her, så man med det samme ved, hvad siden handler om. Derefter følger læserne et zigzag-mønster henover og ned ad siden.Vi har derfor placeret hovedmenu, et flot slideshow med korte tekster samt links til sider i dette område. Derefter fokuserer læserne på højre side af sitet. På forsiden er der ikke noget i dette område, da for mange elementer på forsiden giver
et rodet førstehåndsindtryk. Der er dog placeret noget til højre på andre sider. F.eks. siden Det sker!, hvor der er en widgets menu med bl.a. kategorier og arkiv. Navigation Teksten i hovedmenuen skifter farve, når musen føres hen over, så man kan se, at det er en klikbar tekst. Teksten i dropdownmenuerne samt billeder og tekst i bunden af forsiden gør det samme. Når et menupunkt er valgt skifter tekstfarver og feltet flyder sammen med siden. På den måde kan man se, hvilken side der er aktiv/hvilken side man befinder sig på. Teksten i menupunkterne er sigende, så man ikke skal gætte sig frem til, hvilken information, der er hvor. På forsiden er et slideshow, hvor der er pile i siderne, som indikerer, at der er flere billeder ”på vej”, og de giver mulighed for selv at skifte mellem billederne i slideshowet.Ved billeder med kort tekst er der tilføjet ”Læs mere”, som indikerer, at området er klikbart, og at man navigeres til en side med mere information ved at klikke.
18 Kontraster Der er farvekontrast mellem baggrund og forgrundsfeltet main-content box, hvilket skaber dybde og dynamik på sitet. Forgrundsfarven er lys grøn, baggrunden er et skovbillede, header og footer er mørk grøn, teksten på siderne er mørk brun, og dette sammen med livlige og glade billeder skaber kontraster. Gestaltlovene Gestaltlovene handler om, hvordan vi opfatter helheder i billeder. Der er tre love: Loven om nærhed, loven om lukkethed og loven om lighed. Det er tydeligt at felterne i hovedmenuen er sammenhængende, da de er anbragt nær hinanden, og de er placeret i samme område/linie øverst på sitet, hvor de indrammes af en mørke farve.Ved billederne på forsiden ses det at tekst og billede hænger sammen, da de er placeret nær hinanden, jf. loven om nærhed. Teksten følger desuden billedets bredde og fremstår som en lukket firkant. Billederne har en ramme, som lukker billedet inde og giver det sin plads på siden. Uden rammen ville billedet ”flyde” ud i resten. På siden Det sker! er widgets-menupunkterne placeret sammen i højre sidebar. Punkterne er ens af udseende og opfattes derfor som
en sammenhængende menu. Dropdown-menuerne er indrammet af en boks og er placeret tæt under hovedmenupunktet, så det opfattes som hørende herunder.
19 3.4 Andet kundemøde
• De syntes websitet var sindsygt professionelt.
På andet kundemøde præsenterede vi et foreløbigt website og idéerne, der lå bag det.Vi fik følgende respons:
• Vi havde lavet en side med sjov og spas, som de syntes var en god ide, men de troede ikke, de vil få den brugt.Vi valgte derfor at slette den. • De kunne godt lide ideen med de tre billedbokse på forsiden. • De kunne godt lide slideshowet på forsiden. • De kunne godt lide farverne. • Lauge syntes skovbaggrunden virkede rodet. Christina kunne godt lide den og syntes, det vil blive forkert uden.Vi valgte at beholde den. • De ville gerne have et åbent galleri.Vi erstattede derfor siden “Sjov og spas” med et galleri. • De kunne godt lide ideen med siden “Det sker”. De var enige med os i, at det ikke skal være muligt for brugere at kommentere.
20 3.5 Designmanual Designmanual vises i bilag 4.
21 4.0 REALISERING 4.1 Realisering og evaluering Vi har valgt at udarbejde sitet i Wordpress frem for en texteditor som f.eks. Notepad++. I Wordpress er der forskellige muligheder for at tilpasse designet: Nogle elementer er i temaets menu, nogle er under indstillinger. De elementer, man ikke kan ændre disse steder, har vi rettet i HTML og CSS koderne, så det blev, som vi ønskede det. Selve arbejdsprocessen er gået rigtig godt.Vi har fulgt vores tidsplan ganske fint og har taget ting-ene et skridt af gangen for at nå frem til resultatet.Vi har i gruppen arbejdet rigtig godt sammen og har været gode til at uddele opgaverne.Vi har været gode til at mødes og arbejde på projektet sammen, men også hver især været gode til at få lavet arbejdet på de tidspunkter, der har passet. Vi er tilfreds med resultatet ift. fra den viden og projektramme, vi har haft. Så alt i alt: Et rigtig godt projektarbejde!
22 5.0 BILAG 1 Gantt-diagram
Emne
Antal dage
Foranalyse Kundemøde
1
Tidsplan
1
Undersøgelse Ideudvikling
1
Research
1
Kommunikationsplan
1
Design Flowchart, storyboard
1
Designparametre
2
Interaktion, information, præsentation
2
Grafiske virkemidler
2
Designmanual
2
Realisering Evaluering
1
Upload
1
HTML/CSS
2
Wordpress
2
Rapport Korrektur
1
Aflevér
1
Skrive rapport
8
25/5
26/5
27/5
28/5
29/5
30/5
31/5
1/6
2/6
3/6
4/6
23 INDHOLD EMNE
2 Tidsplan
Foranalyse
Kundemøde
PLANLAGT TID FORBRUGT TID
1 time
1 time 30 min.
2 timer
2 timer
1 time
1 time
Flowchart
30 min.
20 min.
Designparametre
4 timer
2 timer
Tidsplan
Undersøgelse Ideudvikling
Research
Kommunikationsplan Design
Storyboard
Interaktion, information, præsentation
Grafiske virkemidler
Designmanual Realisering Evaluering
1 time
1 time 30 min.
2 timer
45 min.
1 time
1 time
2 timer
2 timer 30 min.
2 timer
1 time
4 timer
15 min.
1 time 30 min.
15 min.
Upload
30 min.
10 min.
Wordpress
8 time
12 timer
-
-
HTML/CSS Korrektur
Aflevér
Skrive rapport
1 time
1 time -
5 timer 1 time -
24 3 Skitser fra ideudvikling
25 INDHOLD 4 Designmanual Skrifttype General font: Gill sans, calibri, trebucket ms, sans-serif General font size: 15px
ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ 1234567890 abcdefghijklmnopqrstuvwxyzæøå
Farver
#7a9e2d Header Footer
#99d019 Content main background color
#36250c Content text color
#000 Links color Post title hover color
#292b29 Links hover color Sidebar header background color
#0d85cc Menu color Post title color Sidebar header text color
26 Baggrundsbillede
27 INDHOLD Billeder Billederne skal være af god kvalitet, skarpe, klare i farverne, vise liv og glæde, illustrere FDF-livet og være kreativt tilskåret. Se eksempler:
Headerlogo
Favicon