Projektrapport Udarbejdet af Bjarne og Connie
Indholdsfortegnelse Projektrapport Udarbejdet af .......................................................................................................... 1 Bjarne og Connie .............................................................................................................................. 1 Indledning: ........................................................................................................................................... 1 Gruppen ...................................................................................................................................... 1 Kontaktperson ............................................................................................................................ 1 Link til website ............................................................................................................................ 1 Foranalyse: ........................................................................................................................................... 2 Kunde: ......................................................................................................................................... 2 Kundemøde: ............................................................................................................................... 2 Målgruppe: ................................................................................................................................. 2 Formål: ........................................................................................................................................ 2 Udviklingsplatform: .................................................................................................................... 2 Distributionsmedie: .................................................................................................................... 2 Udviklingsmetode: ...................................................................................................................... 2 Ressourcer: ................................................................................................................................. 3 Tidsramme: ................................................................................................................................. 3 Ledelsesfilosofi: .......................................................................................................................... 4 Design:.................................................................................................................................................. 5 Informationsstruktur: ................................................................................................................. 5 Informationsdesign: .................................................................................................................... 5 Interaktionsdesign: ..................................................................................................................... 5 Præsentationsdesign: ................................................................................................................. 7 Form: ........................................................................................................................................... 7 Typografi: .................................................................................................................................... 7 Farve: .......................................................................................................................................... 7 Animation og lyd: ........................................................................................................................ 8 Komposition: ............................................................................................................................... 8 Realisering: ........................................................................................................................................... 9 Samarbejde ................................................................................................................................. 9
Videreudvikling: .......................................................................................................................... 9
Indledning
Indledning: Efter at have gennemgået kurset Multimedieteknologi og Interaktionsdesign har vi fået tildelt en projektopgave gående ud på at udfærdige en hjemmeside til Middelfartmc. Projektet udarbejdes som gruppearbejde og skal indeholde de udviklingsværktøjer, kurset har gennemgået. Vi har benyttet HOME til udviklingen dog ikke alle trin, da denne også er beregnet til projekter, der er væsentligt større end dette. Gruppen Bjarne Jensen Connie Egsbo Larsen Kontaktperson Connie Egbo Larsen Mail: Egsbo@tdcadsl.dk Link til website http://phpkursus.tietgen.dk/1912/bc/mmc
1
Foranalyse
Foranalyse: Kunde: Middelfartmc, Bogensevej 12 5500 Middelfart http://middelfartmc.dk Kundemøde: Fredag den 1. juni 2012 var vi på besøg hos Middelfartmc. Tilstede var indehaverne Sussie og Hans. Bilag viser ønsker og krav til den nye hjemmeside. Målgruppe: Aldersmæssigt er der stor forskel på målgruppen, da det fortrinsvis er helt unge lokale, der køber scootere, mens det er modne folk fra hele landet der køber motorcykler. Fælles for målgruppen er, at de ønsker et specielt køretøj, de bruger ikke megen tid på hjemmesiden, det skal være indlysende, hvor tingene findes. De vil derimod gerne have en snak om køretøjet. Formål: En hjemmeside, hvor kunden føler sig i centrum. Der ønskes at signalere, at der her tænkes meget på kunden også efter et køb. Der er stor service og reparation lige ved hånden. Udviklingsplatform: Hjemmesiden udvikles i Wordpress. Distributionsmedie: Ekstern hjemmeside til internettet. Udviklingsmetode: Udviklingsmetoden HOME anvendes i projektet. Ud fra besvarelse af nedenstående spørgsmål har vi af paradigme valgt Vandfaldsmodellen.
2
Foranalyse
Udgangspunkt Holdning til risiko
Specifikt Alt er nøje planlagt i forhold til kunden (og her fordi der er tale om et kursusprojekt)
Dokumentation Vedligeholdelse Tid/Omkostninger
Hensigten er, at kunden selv vil vedligeholde hjemmesiden Skal let kunne vedligeholdes Der er her tale om et kort projekt og deadline kan ikke udskydes Her behov for let at kunne følge projektet
Styring
Ressourcer: Der er her ikke afsat beløb men tid, hvor der er en uge til projektet. Tidsramme: Deadline for aflevering af projektet er mandag, den 11. juni 2012 kl.12.00. Vi har udarbejdet følgende timeplan: Emne
Planlagt (timer)
Forbrugt (timer)
Kundebesøg Informationsindsamling: Se gamle hjemmeside. Få billeder af og links til produkter Timeplan Projektbeskrivelse
2 2
3 2
4 2
4 1
Koncept (formål) Målgrupper
2 1
1 1
1
1
4
6
4
1
Foranalyse
Undersøgelse
Design Information (indhold) Informationsstruktur (hvilke typer produkter, undertyper) Interaktion (struktur) Flowchart (navigation) Præsentation (form) Idéundfangelse (mindmap, ord, slogan)
3
Foranalyse
Idéudvikling (råskitser) Idéudvælgelse (arbejdsskitse) Farver/skrifter mv. Udvælgelse af layout roughs. Planlægning af tekst/billeder Storyboard (stier til indhold, farvenumre etc.)
4 1 2 4
5 1 2 6
3
4
Installér Vælg tema Kodning af sitet Billeder Plugin til lagermodul? Plugin til kontakt Indsættelse af indhold Evaluering Skrivning af rapport
2 6 10 4 4 2 3 0 14 81
2 4 28 7 0 1 3 1 24 108
Realisering
Test Rapport Total
Ledelsesfilosofi: Da det er en projektopgave i forbindelse med kursus, har vi valgt at være fælles om ansvaret for på denne måde begge at komme igennem de forskellige områder af udviklingsarbejdet.
4
Design
Design: Informationsstruktur: For at finde frem til typen af produkter og undertyper har vi udarbejdet skitse over info bilag. Informationsdesign: Udvælgelsen er foretaget på baggrund af den målgruppe informationen skal nå ud til samt de krav og ønsker, der var fra Middelfartmc. Ud fra dette har vi udviklet nogle råskitser over forskellig information på siderne bilag . Vi har arbejdet ud fra, at siderne skal være enkle og overskuelige men samtidig indeholde al den information, der er tiltænkt målgruppen. Da service er en ting, der vægtes højt, er dette lagt som en hovedkategori. For at brugeren aldrig er i tvivl om, hvilken hjemmeside man er havnet på, bruges navneskiltet med logo på alle siderne. Af hovedkategorier har vi valgt Produkter Service Nyheder Hundehjørnet Kontakt med følgende underemner til produkter
Motorcykler Scooter ATV Tilbehør
Interaktionsdesign: Vi har udarbejdet følgende flowchart for navigationen på hjemmesiden. For at gøre navigationen let og overskuelig, har vi valgt at anvende en hierarkisk struktur, der forgrener sig til flere forskellige sider. Hovedmenuen går igen på alle sider, så det er muligt at komme direkte til andre menupunkter uden at skulle tilbage til forsiden først.
5
Design
Nærmere forklaring til Flowchart: Flowchartet viser websidens logiske opbygning. Hver kasse repræsenterer en webside. Linjerne viser i op- og nedadgående retning hvilke websider der linker direkte til hinanden. Websider som er forbundet til underliggende websider indeholder et galleri med billeder og korte tekster der repræsenterer disse sider. Ved at klikke på et billede kommer man til den underliggende side som billedet repræsenterer. Man kan altid komme tilbage til den nærmeste overordnede side ved at klikke på en dertil beregnet knap. Man kan alternativt komme til de andre sider via en vandret navigationsbjælke med undermenuer som med enkelte undtagelser svarer til strukturen i flowchartet. Undtagelser: Kassen "Produkter" repræsenterer en knap på navigationsmenuen, men eksisterer ikke som en særskilt webside. Med navigationsmeuen kommer man til til de fire produktsider via "Produkter" men på websiderne kommer man direkte fra forsiden til de fire produktsider. Og
6
Design
”et niveau op” knappen leder en tilbage til forsiden hvis man er på en af de fire øverste produktsider. Kassen "Om os" findes ikke på navigationsbjælken. Forsiden har naturligvis ikke en knap til at gå til den overordnede side. Selvom forsiden logisk set er overordnet, så findes den som en knap på navigationsbjælken på niveau med de 5 underordnede sider.
Præsentationsdesign: Vi har anvendt temaet Custom Community 1.8.9.1, der indeholder rigtig mange muligheder for ændringer i designparametrene. Med udgangspunkt i kundens ønsker og krav samt målgruppen har vi udarbejdet mindmap bilag Form: Vi har valgt et enkelt design, der ikke af brugeren kræver megen tid til at finde nøjagtig den information, der ønskes. Headeren indeholder logo firmanavn og adresse, så man aldrig er i tvivl om, på hvilken hjemmeside man befinder sig. Herunder er der menubaren, der går igen på alle sider. Her har vi valgt at lave menuknapperne som udstødningsrør, der i stil passer til budskabet. I indholdsområdet har vi valgt at bruge hele siden og i et galleri vise, hvad hjemmesiden indeholder. Brugerfladen er på denne måde med billeder gjort mere indbydende og gengiver klart de budskaber, der ønskes afsendt til målgruppen. Der er ingen footer på siden, da alle oplysninger kan ideholdes i header, menu og indholdsområdet. Denne opbygning går igen på alle sider. Typografi: Vi har valgt at bruge Arial som skrifttype på siden. Denne er letlæselig, websikker og meget tæt på den skrifttype, der er anvendt i navneskiltet i headeren. Farve: Vi har holdt hjemmesiden i hvid og blå ud fra farverne i firmaets navneskilt. Bilag designmanual.
7
Design
Animation og lyd: Der er ikke anvendt animation og lyd på hjemmesiden. Dette kunne være en mulig udvidelse, fx en kørende motorcykel i footer med lyd. Komposition: Elementerne på siden svarer til Poynter eye-tracking adfæren, hvor der fokuseres mest i øverste venstre hjørne og derefter i zigzag ned over siden. Vi har placeret firmaets logo som forventet i venstre hjørne. Efterfølgende kommer menubaren og da opmærksomheden typisk tiltrækkes af foto kommer disse her.
8
Realisering
Realisering: Samarbejde: I analyse og designfasen, har vi i gruppen arbejdet sammen om de forskellige opgaver mens vi i realiseringsfasen måtte dele opgaverne ud i småstykker, hvilket så kom til at minde om Scrum med små opdelte trin og daglige møder. På grund af den store afstand, har vi i gruppen alene holdt telefonmøder og haft elektronisk kontakt. Disse var dog også til tider rigtig lange. Vi mener samarbejdet har gået rigtig godt og, at der er kommet et for os og Middelfartmc tilfredsstillende resultat ud af det. Videreudvikling: Af muligheder kunne være lyd og animation samt en blog på siden, hvor kunder og forretning kunne skrive sammen og udveksle erfaringer eller en link knap til Facebook med oprettelse her.
9
Bilag - Kundemøde
Noter fra kundemøde Salg, reparation, service Hvem køber schooter - lokale mc – hele landet, flest grå atv – landmanden, børn, unge Quad er en ATV-type (til banekørsel) Efter salg huskes kunden Ekspertise ved hånden Rigtig udstyr og hjælp "Vi giver tiden til kunden" "Vi sælger kun hjelme vi selv vil lægge hoved til" Køb først sikkerhedsudstyret og se hvad der bliver tilbage til mc Vil gerne have dyreafdelingen med på hjemmesiden, da det er den støreste indtægt om vinteren Logo bibeholdes: tegningen af en motorcykel, der også er på faktura m.m. Den blå farve på navn bibeholdes + den lyseblå (er ikke lige med på hvad det er for en) Evt oprettelse på Facebook, hvor der kan svares på spørgsmål og kunderne kan skrive sammen. Selvbyg bemærk evt. efter ønske. Der er ikke så mange kunder til kundespecifikke (skræddersyede) mc'er. Sælger og reparerer alle mærker. Tøj mærke Held Kan e-mailes på info@middelfartmc.dk
10
Bilag - Info
11
Bilag - Mindmap
12
Bilag - R책skitser
13
Bilag - R책skitser
14
Bilag - R책skitser
15
Bilag - Designmanual
Designmanual for anvendte skrifter, farver, evt. illustrationer Forretningslogoet er genskabt baseret på billeder af logoet.
Sted
Tekst / mode
Font
Vægt
Str.
Farve
Baggrund
Kontrolleret af
Header
Middelfartmc.dk
Times New Roman
Normal
48pt
#000099
#FFFFFF
OpenOffice Draw fontvalg
Header
Underoverskrift
Latha
Fed
18pt
#FFFFFF
#000099
OpenOffice Draw fontvalg
Header
Telefonnr.
Arial
Normal
18pt
#000099
#FFFFFF
OpenOffice Draw fontvalg
Tema
Sideoverskrift
Arial, sans-serif
Navbar
Arial, sans
28px Fed
Tema: General / Title
16px
#000099
Tema: Menu / Menu background color Teme: Menu / Menu style = closed style
Navbar knap
Navbar knap
Normal mode
Hover mode
Arial, sans
Arial, sans
Fed
Fed
16px
16px
#000099
#000099
Udstødningsrør
Tema: Menu / Menu font color
#FFFFFF
Tema: Menu / Menu font color – current and mouse over
CSS: .menu-item (baggrund)
Tema: Menu / Menu background color – mouse over and drop down list
16
Bilag - Designmanual Navbar knap
Nuværende
Arial, sans
Fed
16px
? (lyseblå)
Udstødningsrør
Tema: Menu / Menu font color – current and mouse over
Dropdown
Normal mode
Arial, sans
Fed
16px
#000099
#FFFFFF
Tema: Menu / Menu font color CSS: .menu-item (baggrund)
Dropdown
Hover mode
Arial, sans
Fed
16px
? (lyseblå)
#FFFFFF
Tema: Menu / Menu font color – current and mouse over Tema: Menu / Menu background color – drop down list mouse over
Dropdown
Nuværende
Arial, sans
Fed
16px
#000099
#FFFFFF
Tema: Menu / Menu font color – current and mouse over Tema: Menu / Menu background color – mouse over and drop down list
Hovedgalleri
Thumb-tekst
Arial, sans-serif
Fed
24px
#000099
#FFFFFF
ng: #ngg-gallery-1-5, ngg-gallery -2-8
Hovedgalleri
Hover mode
Arial, sans-serif
Fed
24px
#000099
#A9A9A9
ng: .ngg-gallery-thumbnail:hover
Undergalleri
Thumb-tekst
Arial, sans-serif
Fed
16px
#000099
#FFFFFF
ng: .ngg-galleryoverview
Undergalleri
Hover mode
Arial, sans-serif
Fed
16px
#000099
# A9A9A9
ng: .ngg-gallery-thumbnail img:hover
Kontaktform
Felttitler
Kontaktform
Feltindhold
Brødtekst Link
Ubesøgt
Tema: General / Links
17
Bilag - Designmanual Link
Besøgt
Tema: General / Links ?
Link
Hover
Tema: General / Links
Link
Aktiv
Tema: General / Links ?
Tema
#FFFFFF
Tema: General / Container
Hovedsider
Landevej
css: .page-id-5 div.padder (Forside) css: .page-id-8 div.padder (Motorcykler)
Andre sider
Himmel
Tema = Stil sat i Theme Settings / (faneblad) css = Stil sat i Theme Settings / CSS faneblad ng= Stil sat i Gallery / Style (nggallery.css
18
Bilag - Designmanual
19