Page 1

Projektrapport Multimedieteknologi og interaktionsdesign Erhvervsakademiet LillebĂŚlt

http://phpkursus.tietgen.dk/0212/ole/pigeliv/site/ Udarbejdet af:

Kontaktperson:

Claus Binger Anette Knudsen Ole Nielsen Christian Rokamp

Ole Nielsen Tlf.: 26211857 E-mail: ole@detnielsen.dk


FORANALYSE .............................................................................................................................. 2 HOME-MODELLEN ........................................................................................................................... 2 PARADIGMEVALG .............................................................................................................................. 3 TIDSPLAN ........................................................................................................................................ 3 UNDERSØGELSE .......................................................................................................................... 4 KUNDEMØDE ................................................................................................................................... 4 BRAINSTORMING .............................................................................................................................. 5 TEMA ............................................................................................................................................. 5 PLUGINS.......................................................................................................................................... 5 DESIGN ....................................................................................................................................... 6 INFORMATIONSDESIGN ....................................................................................................................... 6 INTERAKTIONSDESIGN ........................................................................................................................ 7 PRÆSENTATIONSDESIGN ..................................................................................................................... 8 Form ........................................................................................................................................ 8 Typografi ................................................................................................................................. 8 Illustration ............................................................................................................................... 9 Farver ...................................................................................................................................... 9 KOMPOSITION .................................................................................................................................. 9 LOGODESIGN .................................................................................................................................. 10 REALISERING ............................................................................................................................ 10 VIDEREUDVIKLING ........................................................................................................................... 10 EVALUERING .................................................................................................................................. 11 BILAG 1: TIDSPLAN ................................................................................................................... 12 BILAG 2: BRAINSTORMING ....................................................................................................... 13 BILAG 3: FLOWCHART ............................................................................................................... 14 BILAG 4: SKITSER ...................................................................................................................... 15 BILAG 5: STORYBOARD ............................................................................................................. 16 BILAG 6: SKELET ........................................................................................................................ 17 BILAG 7: DESIGNMANUAL ........................................................................................................ 18 BILAG 8: LOGODESIGN .............................................................................................................. 20

1


Foranalyse Som afslutning på kurset "Multimedieteknologi og interaktionsdesign" har vi fået til opgave at udarbejde et website med tilhørende projektrapport. Websitet skal udvikles i CMS'et WordPress, og kunden er foreningen Pigeliv fra Vollsmose i Odense. Projektet tager udgangspunkt i udviklingsmetoden HOME, som beskrives i bogen "Digital Media Management". En udviklingsmetode er defineret ved at indeholde en række retningslinjer og anbefalinger for arbejdet med udførelsen af et digitalt produkt.

HOME-modellen Udviklingsmetoden HOME er designet til brug ved udvikling af digitale medier. Den bygger på to grundlæggende principper: ●

Den er helhedsorienteret, hvilket betyder, at alle aktiviteter bliver anskuet både ud fra en produktrettet og en procesrettet vinkel.

Den er åben, hvilket betyder, at den kan tilpasses og justeres til de fleste udviklingssituationer og produkttyper.

Det vil sige, at selvom metoden er ret omfattende og gearet til udvikling af store projekter inden for alle slags digitale medier, kan også vores projekt styres i HOME, da vi frit kan plukke de dele ud, som er relevante for os. HOME-modellen bygger på fire trin, som afhængig af paradigmevalget gennemgås på forskellig vis: ●

Foranalyse: Indledende definitioner af processen og produktet, valg af udviklingsmetode, interessentanalyse og projektbeskrivelse.

Undersøgelse: Udformning af projektplanen, kommunikationsplanlægning, research og ideudvikling.

Design: Vurdering og regulering af projektplanen, design af indhold, struktur og form.

Realisering: Opstramning af planer, produktion og integration af medieelementer, evaluering og projektafslutning.

2


Paradigmevalg Et udviklingsparadigme defineres som en særlig holdning til organisering af rækkefølge, vægtning og indhold i udviklingsprocessen. De fire mest markante paradigmer er: ● ● ● ●

Vandfaldsmetoden Udforskende udvikling Prototyping De agile metoder

Vi vælger at arbejde ud fra vandfaldsmetoden (Figur 1), som er kendetegnet ved en lineær og faseopdelt udviklingsproces med et klart defineret udgangspunkt. Vandfaldsmetoden følger HOME-modellens fire trin slavisk, og hvert trin afsluttes, før det næste påbegyndes.

Figur 1: Vandfaldsmetoden Paradigmet egner sig godt til vores projekt, som er begrænset af en kort tidshorisont og derfor kræver en stram styring. Vi har ikke mulighed for i samarbejde med kunden at afprøve mange forskellige løsninger, men kompenserer for dette med et specifikt udgangspunkt på baggrund af en grundig undersøgelse samt med en fyldestgørende dokumentation.

Tidsplan Vi udarbejder en tidsplan for projektets forløb fra start til slut (Bilag 1). Her foretager vi fra projektets opstart en vurdering af, hvor mange timer hvert punkt vil tage at gennemføre. Ved udarbejdelsen af tidsplanen deltager hele gruppen, men alle gruppemedlemmer lægger ikke nødvendigvis lige mange timer i alle projektets faser. Derfor baseres udregningen på "mandetimer" og er altså ikke udtryk for arbejdstimer som samlet gruppe.

3


Undersøgelse Kundemøde Kunden har opstillet følgende ønsker til sitet: Sitet skal opdeles i henholdsvis en offentligt tilgængelig del og en lukket del for foreningens ansatte. Offentlig del: ● ● ● ● ● ● ● ●

Om foreningen: Vedtægter, referater, artikler, udtalelser, fonde Kalender med aktiviteter Debatforum (fælles med Facebook) Præsentation af ansatte/frivillige Kontaktoplysninger Samarbejdspartnere Foto-/videoalbum Eksterne links

Lukket del: ● ● ● ●

Link til vagtplan (Google Kalender) Lukket forum Upload af dokumenter SMS-funktion

På mødet fortæller kunden om foreningen, ligesom der bliver stillet uddybende spørgsmål. Det bliver fastslået, at foreningens målgruppe er piger i alderen fra 14 til 24 år med forskellige etniske baggrunde. Pigerne har brug for et værested, som kun er for piger, og de mødes derfor jævnligt i foreningens lokaler, ligesom de sammen deltager i forskellige arrangementer. På internettet har medlemmer og ansatte hidtil kommunikeret med hinanden via en gruppe på Facebook, hvor man har oprettet "begivenheder" for at gøre opmærksom på foreningens arrangementer. Internt benytter de ansatte en vagtplan i Google Kalender og kommunikerer primært med hinanden via e-mail. Foreningens nye website skal primært henvende sig til medlemmerne samt være kommunikationsplatform for de ansatte, men det skal også være medvirkende til at tiltrække nye medlemmer samt agere informationskilde for forældre og mulige sponsorer. Kunden giver afslutningsvis udtryk for at være interesseret i forslag til et nyt logo til foreningen.

4


Brainstorming Med udgangspunkt i kundemødet går gruppen i tænkeboks og udarbejder en "mind map" (Bilag 2), som skal danne det kreative grundlag for resten af projektet. For at ideerne ikke skal løbe af med os, holder vi os stramt til tidsplanen og lægger papir og blyant fra os efter to timers fælles møde.

Tema Som sidste led i undersøgelsen afprøver vi temaer og plugins til WordPress, som er det Content Management System (CMS), websitet skal udvikles i. Vi kommer til den erkendelse, at denne fase er langt mere tidskrævende end estimeret, da vi overrumples af mængden af temaer og plugins, som foregiver at kunne løse vores tekniske udfordringer, hvorefter det viser sig, at resultatet enten ikke er tilfredsstillende, eller at implementeringen er meget kompliceret. Efter at have analyseret mulighederne i to veldokumenterede temaer, iFeature og Weaver, som hver især har fordele og ulemper, vælger vi at generere et tema i programmet Artisteer for på den måde at opnå det ønskede design.

Plugins Websitets funktionalitet beror i høj grad på plugins, som løser de mere tekniske aspekter. Et plugin er et stykke software, der tilpasser funktionaliteten i en applikation. For eksempel er plugins almindeligt anvendt i webbrowsere til videoafspilning, virusscanning og som i vores tilfælde til webudvikling. Åbne applikationer som WordPress tillader tredjeparter at skabe plugins, der interagerer med applikationen. Plugins er en verden for sig. Først skal man vide, hvad det er for en funktionalitet, man har brug for, og derefter skal man finde ud af, hvilke plugins der kan løse opgaven. Især Facebook volder os problemer, da vi her skal interagere med et komplekst eksternt website, som har sin helt egen måde at gøre tingene på. Det er som nævnt tidskrævende at arbejde med plugins. Hvis man for eksempel søger efter et plugin til Facebook, så får man et utal af resultater. Efter at have læst beskrivelsen af hvert enkelt, vælger man sit plugin, og endelig kan man sætte sig ind i, hvordan det så egentlig fungerer. Når det er sagt, så er plugins nu gode nok, da de er med til at øge kreativiteten inden for webudvikling.

5


Vi forkaster hurtigt ideen om at implementere en SMS-funktion, da disse typisk koster penge, medmindre man indvilliger i at modtage reklamer og samtidig må acceptere visse begrænsninger. Endvidere vurderer vi ikke, at en SMS-funktion er vital for kunden. Efter grundige test vælger vi at implementere følgende plugins: • • • • •

Facebook: Add Link to Facebook Favicon: All in one Favicon Kontaktformular: Contact Form 7 Kalender: Events Manager Billedgalleri: NextGEN Gallery

Design Vores overordnede tanke vedrørende det visuelle indtryk er, at websitet skal signalere, at foreningen Pigeliv er et værested for unge piger, hvor de bløde værdier og sammenhold er i højsædet. Samtidig skal sitet give associationer til noget spændende og livligt samt nye oplevelser. På baggrund af vores undersøgelsesfase udarbejdes først en række løse skitser af sitets overordnede layout (Bilag 4). Disse skitser danner grundlag for en mere tilbundsgående diskussion om sitets informations-, interaktions- og præsentationsdesign samt komposition.

Informationsdesign Informationsdesign omhandler prioritering af informationen på et website, hvor man typisk har en forside samt en antal undersider. Vi ved på baggrund af kundemødet, at et af websitets formål er at tiltrække nye medlemmer og sponsorer, og vi finder det derfor vigtigt at præsentere foreningen på forsiden. Førstegangsbesøgende på websitet skal ikke lede efter denne information. Der skal derimod skabes en interesse, så man får lyst til at læse videre. Kunden har givet os det indtryk, at især kalenderfunktionen er central. På Facebook er problemet, at vigtige informationer om begivenheder drukner i almen snak, hvilket bevirker, at man ikke når ud til alle medlemmer. Vi ønsker derfor en meget synlig placering af kalenderen med særligt fokus på kommende arrangementer og mulighed for tilmelding, så arrangøren kan følge med i tilslutningen.

6


I næste geled af information, som skal være lettilgængelig, ønsker vi at fremhæve emner som forskellige oplysninger om foreningen og dens ansatte, billedgalleri, links til eksterne websites samt ikke mindst Facebook. Det samme gælder sitets lukkede del for ansatte.

Interaktionsdesign Interaktionsdesign omhandler navigation på websitet, og produktet er et flowchart (Bilag 3), som viser interne og eksterne siders placering i forhold til hinanden samt mulighederne for navigation frem og tilbage. Lige meget hvor på hjemmesiden man er, er det vigtigt, at man hurtigt og nemt kan navigere tilbage til forsiden. Derfor indeholder alle websitets sider den samme header i form af en farvet bjælke med logo samt teksten: "Pigeliv i Vollsmose", som ved klik fungerer som link til forsiden. Denne opbygning bevirker samtidig, at man aldrig er i tvivl om, hvilket website man befinder sig på. Selvom brugerens indgang til sitet ikke skulle gå via forsiden, er man aldrig i tvivl om, at man befinder sig på Pigelivs website. Et flowchart er ikke en oversigt over alle informationer på et website, men som nævnt en oversigt over navigationen. Visse elementer ønsker vi at placere på undersider, mens andre skal være synlige overalt på websitet, f.eks. i en fast sidebar, som ikke fremgår af flowchartet. På baggrund af informationsdesignet oprettes seks undersider til forsiden: • • • • • •

Facebook Galleri Kontakt Links Medarbejderportal Om Pigeliv

For ikke at samle for meget information samme sted opdeles "Om Pigeliv" i yderligere fire undersider via en drop-down-menu. Disse undersider er ikke indtegnet i flowchartet, men udgår principielt fra forsiden grundet menuens konstruktion. Vi vælger at linke til de ansattes interne side fra forsiden, selvom vi er klar over, at dette vil tiltrække fokus fra foreningens medlemmer, som er sitets primære brugere. Vi ønsker ikke at skjule medarbejderportalen, da den skal være lettilgængelig for de ansatte. Af samme årsag ønsker vi ikke at besvære de ansatte med at skulle logge ind for at få adgang til siden. I stedet beskyttes "lukket" indhold ved hjælp af et kodeord.

7


Fra undersiden "Links" går der i flowchartet en ensrettet pil ud til et antal eksterne sider. Denne pil synliggør, at der fra eksterne sider ikke linkes tilbage til Pigelivs website. Af samme årsag ønsker vi, at eksterne links åbnes i et nyt faneblad/vindue, således at Pigelivs website forbliver åbent.

Præsentationsdesign Præsentationsdesign omhandler websitets brugergrænseflade, altså det layout, der møder brugeren. Produktet er et storyboard (Bilag 5), et skelet med mål (Bilag 6) samt en designmanual (Bilag 7), som tilsammen viser, hvordan det endelige website skal se ud. Til dette formål anvendes en række designparametre, hver især styret af overvejelser omkring æstetik, funktion og teknik/økonomi, som i samspil danner en helhed. Designparametre: ● ● ● ●

Form Typografi Illustration Farver

Form I opbygningen af websitet tilstræber vi at skabe et resultat, der visuelt og informativt appellerer til målgruppen. I headeren placeres foruden et banner en menubar med links til undersider for nem og intuitiv navigation, mens der i højre side af websitet placeres en fast sidebar indeholdende vigtige funktioner såsom en kalender.

Typografi Når man skriver til web, ved vi, at brugeren aldrig vil læse alt, hvad der er skrevet, men i stedet blot scanner siden for oplysninger. Teksten på sitets forside skal derfor hovedsageligt ses som et supplement til forsidebilledet. På undersiderne er det derimod hensigten, at teksten læses grundigere. Typografien på undersiderne er baseret på læselighed. Tekstens farve er sort, og fonten er Arial, som er designet til skærmbrug og derfor er læselig på alle computere. Overskrifter og mellemrubrikker er sat med Arial Bold, mens brødteksten er Arial Regular. For at øge læseligheden tilsigter vi, at tekstlinjerne højst indeholder 30-35 ord, som er det anbefalede antal for tekster på nettet.

8


Illustration Billederne på sitet er et udpluk fra de forskellige arrangementer, der er blevet holdt i foreningen. De vækker minder og skaber forventninger til kommende aktiviteter. Samtidig bevirker det at se sig selv på billeder, at medlemmerne opnår en samhørighed og tilknytning til foreningen.

Farver Farvevalget på websitet består af nogle få feminine farver, der sammen med den lidt mørkere baggrundsfarve i headeren skaber en kontrast, der bevirker, at helhedsindtrykket ikke bliver alt for lyserødt og piget. Den brune/grå farve i headeren fremhæver de lysere farver i logoet, og tilsammen signalerer det varme og livlighed. For at skabe en dynamik mellem de rene/statiske farver i headeren og resten af sitet, vælger vi en tapetbaggrund, der henleder tankerne på hennatatovering. Farvemæssigt hænger tapetbaggrunden sammen med de farver, vi bruger i logo og header.

Komposition Komposition omhandler måden, hvorpå websitets indhold præsenteres for læseren. En undersøgelse fra det amerikanske Poynter Institute viser, at læseren typisk vil fokusere på øverste venstre hjørne først. Herefter følges et mønster rundt på sitet (Figur 2).

Figur 2: Poynter eye-tracking Med udgangspunkt i Poynter eye-tracking placerer vi indholdet på sitet, således at besøgende som det første fokuserer på foreningens logo. Herefter flyttes fokus til øverste del af sidebaren i højre side, hvor kommende arrangementer præsenteres. Blikket vil herefter kredse om tekstindholdet midt på sitet for til sidst at nå kalenderen. På den måde guider vi læseren rundt på sitet, samtidig med at interessen hele tiden fastholdes.

9


Logodesign Kunden har ønsket forslag til erstatning af Pigelivs eksisterende logo (Figur 3). Da foreningen er et værested, der kun er for piger, tager vi udgangspunkt i kvindesymbolet. Ydermere er foreningens medlemmer primært unge piger, der er af anden etnisk oprindelse end dansk. Vi tilføjer derfor symbolet et grafisk element, der både kan henlede tankerne på hår og et tørklæde. Da medlemmerne har forskellige baggrunde (nationalitet, sprog, religion etc.) er det vigtigt for os at vise, at man har et sammenhold i foreningen på tværs af forskelligheder. I flere trin (Bilag 8) udvikler vi et logo, der indikerer, at foreningen er et sted for unge piger, hvor sammenhold er en vigtig parameter (Figur 4).

Figur 3: Eksisterende logo

Figur 4: Nyt logo

Realisering Videreudvikling Vi forestiller os ikke, at vores bud på et website er det optimale resultat for Pigeliv. Foreningen har ikke tidligere haft et website, og man har derfor næppe været helt klar over, hvilket resultat man ville frem til. Pigeliv er kommet med nogle ønsker til det nye site, som vi efter bedste formåen har forsøgt at opfylde, men vi tror på, at man ved at bruge sitet over tid vil finde ud af, hvad behovet egentlig er. Da websitet er udviklet i et CMS og i øvrigt er veldokumenteret, vil det være muligt for Pigeliv selv at opdatere og videreudvikle sitet. Vores forslag er, at man efter grundig afprøvning af alle projektgruppers websites plukker alt det bedste ud og sætter det sammen præcis som ønsket.

10


Evaluering Samarbejdet i vores projektgruppe har fungeret fortrinligt. Vi er fire personer med hver vores stærke sider, hvilket vi har forsøgt at udnytte på bedste vis. Det er kommet til udtryk ved, at vi hver især har været tovholdere på delprojekter undervejs, hvilket har medvirket til at sikre en stram styring. Alle har været gode til at komme med ideer, stille spørgsmål og give udtryk for meninger, og vi har ligeledes været gode til at lytte til hinanden. Tidsplanen er skredet flere gange undervejs, hvilket er helt forventeligt, når man begiver sig ud i et sådant projekt for første gang. Som det fremgår af tidsplanen (Bilag 1), har det især været det tekniske omkring temaer og plugins, vi har kæmpet med, og det har haft en afsmittende effekt på udarbejdelsen af vores storyboard, som flere gange måtte tilpasses tekniske begrænsninger. Alt i alt har det været en god og lærerig oplevelse - ikke mindst takket være den inspirerende 'kunde' og den spændende udfordring, de gav os.

11


Bilag 1: Tidsplan Emne

Estimeret timeforbrug

Reelt timeforbrug

Forundersøgelse: Udviklingsmetode

1

1

Tidsplan

2

3

Kundemøde

4

4

Materiale

1

1

Brainstorming

8

8

WP-tema

5

4

12

20

Flowchart

3

1

Storyboard

3

12

Skelet

2

1

Designmanual

2

2

15

10

Installation

1

1

Opsætning af tema

4

10

Undersider og plugins

6

8

Kodning: HTML/CSS

6

10

Upload af materiale

3

1

Finpudsning

2

8

80

105

Undersøgelse:

Plugins Design:

Logo Realisering:

Total:

12


Bilag 2: Brainstorming

13


Bilag 3: Flowchart

14


Bilag 4: Skitser

15


Bilag 5: Storyboard

16


Bilag 6: Skelet

17


Bilag 7: Designmanual Header BREDDE OG HØJDE PÅ HEADER: 944 x 126PX HEADEREN ER ET FAST GRAFISK ELEMENT, INDEHOLDENDE LOGO OG OVERSKRIFT Menu BREDDE OG HØJDE PÅ MENUEN: 944 x 40PX BACKGROUND-COLOR: #57AEC1 Links 1. niveau FONT‐FAMILY: ARIAL, HELVETICA, SANS‐SERIF FONTSIZE: 13PX FONT-WEIGHT: REGULAR FONTCOLOR: #000000 Links 1. niveau – valgt (active) FONT‐FAMILY: ARIAL, HELVETICA, SANS‐SERIF FONT‐SIZE: 13PX FONT-WEIGHT: REGULAR FONT‐COLOR: 000000 BACKGROUND‐COLOR: #D47AAB Links 1. niveau – mouse over FONT‐FAMILY: ARIAL, HELVETICA, SANS‐SERIF FONT‐SIZE: 13PX FONT-WEIGHT: REGULAR FONT‐COLOR: #000000 BACKGROUND‐COLOR: #E57694 Links 2. niveau FONT‐FAMILY: ARIAL, HELVETICA, SANS‐SERIF FONT‐SIZE: 13PX FONT-WEIGHT: REGULAR FONT‐COLOR: #000000 BACKGROUND-COLOR: #DFEEF1 Links 2. niveau – mouse over FONT‐FAMILY: ARIAL, HELVETICA, SANS‐SERIF FONT‐SIZE: 13PX FONT-WEIGHT: REGULAR FONT‐COLOR: #000000 BACKGROUND-COLOR: #DCE3E5

18


Højre sidebar BREDDE: 285PX FONT‐FAMILY: ARIAL, HELVETICA, SANS‐SERIF OVERSKRIFT: 17PX FONT-WEIGHT: BOLD BRØDTEKST: 13PX FONT-WEIGHT: REGULAR FONT-COLOR: #000000 BACKGROUND-COLOR: Transparent 20% af #FFFFFF Content FONT‐FAMILY: ARIAL, HELVETICA, SANS‐SERIF OVERSKRIFT: 18PX FONT-WEIGHT: BOLD BRØDTEKST: 13PX FONT-WEIGHT: REGULAR FONT-COLOR: #000000 BACKGROUND-COLOR: Transparent 20% af #FFFFFF Footer BREDDE: 942 x 30PX FONT‐FAMILY: ARIAL, HELVETICA, SANS‐SERIF FONTSIZE: 9PX FONT-WEIGHT: BOLD FONTCOLOR: #FFFFFF BACKGROUND-COLOR: #5D493C Undersider FONT‐FAMILY: ARIAL, HELVETICA, SANS‐SERIF OVERSKRIFT: 18PX FONT‐WEIGHT: BOLD FONT-COLOR: #000000 BRØDTEKST: 13PX FONT‐WEIGHT: REGULAR FONT-COLOR: #000000 Links FONT‐FAMILY: ARIAL, HELVETICA, SANS‐SERIF FONT‐SIZE: 13PX FONT‐WEIGHT: REGULAR FONT-COLOR: #57AEC1

19


Bilag 8: Logodesign

20


Projektrapport  

Pigeliv website

Advertisement
Read more
Read more
Similar to
Popular now
Just for you