Issuu on Google+

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


middelfartmc.dk website