Page 1

Aarhus Tech

Kunstforeningen Tangen Projektrapport

Sinan Ülgü, Bjarke Holst Sørensen & Kilian Bick-Nielsen 10-12-2010


Projektrapport 10. december 2010

Indholdsfortegnelse Indledning ................................................................................................................................... 1 HOME-metoden...................................................................................................................... 1 Foranalyse................................................................................................................................... 2 Projektbeskrivelse .................................................................................................................. 2 Undersøgelsestrin....................................................................................................................... 3 Procesaktiviteter..................................................................................................................... 3 Projektets succesfaktorer ................................................................................................... 3 Holdetablering .................................................................................................................... 3 Planlægning ........................................................................................................................ 3 Brugerinvolvering ............................................................................................................... 3 Testaktiviteter..................................................................................................................... 4 Håndtering af risiko ............................................................................................................ 4 Ideudvikling ........................................................................................................................ 5 Research og dataindsamling............................................................................................... 5 Kommunikationsplanlægning ............................................................................................. 5 Designtrinnet .............................................................................................................................. 5 Informationsdesign................................................................................................................. 6 Interaktionsdesign .................................................................................................................. 6 Præsentationsdesign .............................................................................................................. 7 Logo og header ................................................................................................................... 7 Story board ......................................................................................................................... 8 De 4 grafiske designparametre .............................................................................................. 8 Form.................................................................................................................................... 8 Farver .................................................................................................................................. 8 Illustration........................................................................................................................... 9 Typografi ............................................................................................................................. 9 Realiseringstrin ........................................................................................................................... 9 Afslutning.................................................................................................................................... 9

0


Projektrapport 10. december 2010

Indledning Vi har efter vores færdige undervisningsforløb på Multimedieteknologi og interaktionsdesign kursusset, fået stillet en opgave om at lave en hjemmeside, samt en rapport der dokumenterer processen. Kunden projektet omhandler, er den nystartede Kunstforeningen Tangen (fremover refereret til som KFT) ved G4S i Århus. De afholder internt i virksomheden kunstudstillinger og vil i den forbindelse gerne have lavet en hjemmeside, der kan informere omkring foreningens formål og kommende arrangementer. Vores projektgruppe som består af Sinan Ülgü, Bjarke Holst Sørensen og Kilian Bick-Nielsen, har efterfølgende haft ansvaret for, at løse opgaven inden for den givne tidsperiode. I 2 uger har vi derfor udarbejdet en løsning med et produkt, som efterkommer de udviklingsmetoder og programmeringsteknikker, vi har lært gennem kursusset - selvfølgelig indenfor kundens krav og standarder. Den færdigudviklede hjemmeside kan findes på følgende adresse: http://multimediekursus.ats.dk/mult1/bjarke/wp/ For videre arbejde med hjemmesiden, kan gruppens kontaktperson Kilian Bick-Nielsen kontaktes via mail juniperbrando@hotmail.com eller på tlf. 28578932.

HOME-metoden Projektet er udarbejdet efter HOME-metoden (Holistic Open Multimedia development Method)1, som er en metode der beskæftiger sig både med procesforløbet samt udviklingen af produktet. Formålet med metoden er at sætte arbejdet i system, ved at gøre designerens valg sammenhængende, velovervejede og konsekvente i forhold til opgaven. Dette gøres ved at følge de fire overordnede principper: Foranalyse, Undersøgelse, Design og Realisering, som denne rapport også er bygget op efter.

1

Digital Media Management s. 16

1


Projektrapport 10. december 2010

Foranalyse Vores foranalyse startede ud med et kundebesøg fra vores kontaktperson hos G4S kunstforening, Erik Aabling. Han fortalte om virksomhedens grundlæggende formål og idéen bag hele kunstforeningsprojektet. Ud fra hans tanker og forventninger til hjemmesiden kunne vi i fælles dialog indkredse og konkretisere krav og ønsker til sitet, bl.a. ved hjælp af spørgsmål fra spørgeskema til produktdefinition 2 i bogen. Ud fra omtalte krav og ønsker fra kunden udformede vi en krav-specifikation, som vi kunne arbejde ud efter: • • • • • •

Kunstforeningen skal have deres eget logo Hjemmesiden skal helst følge G4S oprindelige hjemmeside standarder, hvad angår farver og konsistens (Rød, Hvid og Sort). Det skal være muligt at oprette sig som medlem, både for medarbejdere såvel som nye interesserede kunstnere Hjemmesiden skal indeholde et galleri af udstillet kunst Nyheder skal kunne vises på hjemmesiden Arrangementer skal være synlige for medlemmer

Under samme interview udleverede Erik samtidig billeder af kunstmalerier, som han ønskede vist i hjemmesidens galleri.

Projektbeskrivelse Projektets formål er at skabe en hjemmeside for Kunstforeningen Tangen hvor alle medlemmer har mulighed for at vide meget mere om foreningens tilstand og aktiviteter. Kunstforeningen kan således meget hurtigere og mere effektivt gå i samme retning, da beslutninger baseres på viden – og ikke uvidenhed. Hjemmesiden skal visuelt være stærk og elegant så den afspejler kunsten, men samtidig også være let og overskuelig, så alle slags brugere kan finde rundt på siden og være en del af Kunstforeningen Tangen.

2

Digital Media Management s. 51

2


Projektrapport 10. december 2010

Undersøgelsestrin I undersøgelsestrinnet gælder det om at få udarbejdet en fyldestgørende projektplan. Det kan deles op i procesaktiviteter og produktaktiviterer. Først vil vi beskrive de forskellige procesaktiviter vi har været igennem. Pga. af projektets forholdsvis lille omfang samt at der kun er 2 uger sat af til det går vi ikke i detaljer mht. de enkelte dele.

Procesaktiviteter Projektets succesfaktorer Vi har kigget på hvilke faktorer der vil gøre vores projekt en succes. Først og fremmest kræver det at vi som gruppe alle er engagerede og at vi kan få det til at gå op i en højere enhed. Det er også vigtigt vi har styr over hvem der gør hvad og hvornår. Samt at projektbeskrivelsen er klar og forståelig hvilket også øger chancen for succes. Holdetablering Etablering af vores projektteam gav næsten sig selv da vi har lavet lidt gruppearbejde sammen i forvejen. Vi har dog ikke nogen egentligt projektleder af vores projektteam. Det har vi ikke fundet nødvendigt pga. den korte tid vi har til at udfærdige projektet. Planlægning Her gælder det om at få udviklet en projektplan. De involverede i denne proces er projektgruppen. Vi har lavet en tidsplan se bilag 1. Brugerinvolvering Det kan ofte være en god ide at inddrage brugerne i processen. Brugerne af sitet er medarbejderne i firmaet dvs. ca. 110 brugere. Både medlemmer af Kunstforeningen Tangen og ikke medlemmer skal kunne tilgå sitet. I første omgang skal sitet ligge lokalt men det er meningen at det på sigt skal ud at ligge som et website alle kan tilgå. Primært med henblik på at interesserede kunstnere skal kunne kontakte foreningen. Vi vil dog ikke involvere nogen brugere i vores proces lige med undtagelse af Erik som er kommet med oplægget. Vi kender nemlig ingen af de andre brugere og har dermed ikke mulighed for at involvere dem. Da vi først involverer Erik 2 dage før projektet skal afleveres 3


Projektrapport 10. december 2010 er det selvfølgelig begrænset hvor meget indflydelse det vil få for projektet. Men vi vil kunne nå at rette nogle uhensigtsmæssigheder. Men egentlige brugertest vil vi ikke lave. Det tillader tiden ikke, samt det ville kræve flere brugere. Efter 2. møde med Erik fik vi rettet et par ting på sitet. Vi havde sat en kode på fanebladet arrangementer således at kun medlemmer kunne se denne side. Erik ønskede at alle skal kunne se siden og derfor har vi fjernet koden. Derudover havde vi kun bedt om at få oplyst lønnr. hvis en person ønskede at blive medlem af KFT. Det ønskede Erik rettet til det fulde navn da en administrator af sitet ikke har adgang til at se hvilken medarbejder et lønnummer refererer til. Testaktiviteter Vi vil som sagt ikke involvere brugerne i vores testaktiviteter. Vi vil derimod selv teste sitet løbende og rette de fejl vi nu finder. Det er selvfølgelig ikke helt optimalt og vi overvejede da også at involvere andre i at teste. Venner eller evt. personer fra nogle af de andre grupper. Håndtering af risiko Vi tager udgangspunkt i nedenstående skema vedrørende vurdering af risikoprofil 3

Kendt teknologi

Ny teknologi

Stramt struktureret

Løst struktureret

Stort projekt, lav risiko

Stort projekt, lav risiko, men

Mindre projekt, meget lav risiko

Mindre projekt, meget lav risiko, men

Stort projekt, medium risiko

Mindre projekt, medium til lav risiko

påvirkelig af svag ledelse påvirkelig af svag ledelse

Stort projekt, meget stor risiko Mindre projekt, stor risiko

Vores projekt må karaktiseres som et mindre (meget lille) projekt som er løst struktureret. Det vil umiddelbart sige med meget lav risiko. Vi vil derfor ikke begynde på at detaljeret risikoanalyse.Produktaktiviteter

3

Digital Media Management side 81

4


Projektrapport 10. december 2010 Ideudvikling Vi har i gruppen brugt en del tid på ideudviklingen. Det er sket vha. skitser, flowcharts og storyboards. Den overordnede ide er at lave et website for KFT som er brugervenlig og informativ samt baserer sig primært på farverne sort, rød og hvid jf. G4S’ hjemmeside. Det skal være let at redigere i og derfor er projektet baseret på Wordpress som kan bruges som et CMS system. Vi har i vores udvikling af hjemmesidens brugergrænseflade været omkring flere forskellige idéer og muligheder. Vi startede ud med idebank og skitserede alle de forskellige forslag vi havde ned på papir, hvorefter vi i fællesskab fandt frem til fordele og ulemper ved de forskellige forslag og til sidst endte med at udvælge det design der passede bedst til kunden. Processen af de forskellige skitser vi har lavet undervejs er vedlagt i bilag 2-5 sidst i rapporten. Research og dataindsamling Det er selvfølgelig vigtigt at vi har et godt datagrundlag for vores projekt. Vi skal dog ikke bruge så mange data. Så der er ingen grund til at lave spørgeskemaer eller større interviews. På mødet med Erik var de eneste data vi umiddelbart fik vedtægterne for foreningen. Kommunikationsplanlægning Det går ud på at kommunikere vores website ud til målgruppen. Da målgruppen er medarbejderne i afdelingen skal kommunikationen rettes mod dem. Det kan fx ske vha. oplysningen på Intranettet, via emails eller måske et møde vedr. foreningen. Når man så senere beslutter sig for at siden skal være offentligt tilgængelig gælder det om at tiltrække nogle kunstnere som er interesserede i at udstille.

Designtrinnet En webside er blot en måde og præsentere et firma eller et foretagende på en let og attraktiv måde. I dag har stort set alle firmaer eller foretagender en webside som repræsenterer det udadtil. Hvert eneste firma bruger i dag deres hjemmeside til at

5


Projektrapport 10. december 2010 præsentere og sælge deres varer på en attraktiv måde, og gør alt for at siden bliver så effektiv som muligt. En webside prøver med grafik, tema, indhold og meget mere, at henlede de besøgendes opmærksomhed på de varer og tjenester som foretagendet udbyder. I designfasen har været opmærksom på følgende punkter: • • • • •

Målgruppe Brugervenlighed Perfekt logo De rigtige farver og effekter Effektivt indhold

Med udgangspunkt fra foreningens ønsker, blev vi hurtig enig om at websiden skulle være domineret af farverne rød, hvid og sort. De præcise farvekoder har vi taget fra G4S´s hjemmeside ved hjælp af MIOTOOLBOX. Selve sidelayoutet og rammen er i rødt, mens skriftfladerne er domineret af sort på hvidt, som gør at budskabet er meget let læselig.

Informationsdesign Vi har lagt meget vægt på at siden skal virke som KFT´s opslagstavle med diverse informationer til medlemmerne. Derfor har vi valgt og beholde forsiden i blog form, hvor man har de nyeste indlæg øverst. Vi har også valgt at det skal være muligt og kommentere opslagene. Vi ligger vægt på at skriften står klart og tydeligt og at der ikke er forstyrrende elementer omkring budskabet. Der skal være god afstand til sidekant samt til illustrationer.

Interaktionsdesign For at en webside virker dynamisk og nærværende er det vigtigt at man som besøgende har muligheder for at interagere med websiden. Det kan gøres på mange forskellige måder. Mange websider gør meget ud af at få besøgende til og føle en vis tilknytning til websiden. Det gøres ved og få de besøgende og føle sig som en del af websiden.

6


Projektrapport 10. december 2010 Dette kan gøres ved f.eks.: • • • •

Være medlem Kunne oprette ens egen profil på websiden, Kunne uploade billeder, lyd og video-medier Få indflydelse på hvordan ens egen profilside gøres mere personligt

På KFT webside har vi også gjort det muligt for de besøgende at kunne interagere med websiden. Det sker ved at: • • • •

Kunne kommentere på de forskellige indslag der vil være på forsiden Kunne være medlem af foreningen (dog kun med godkendelse) Kunne komme i kontakt med foreningen på kontakt siden Kunne kommentere på de forskellige billeder i galleriet.

Præsentationsdesign En webside præsenterer sig hovedsageligt ved første øjekast ud fra de grafiske elementer på forsiden. En god opsætning, de rigtige farver samt forskellige grafiske effekter skal fange den besøgendes opmærksomhed og gøre at vedkommende bliver på siden. Vi har arbejdet bevist med dette da vi designede KFT´s webside. Det har vi gjort ved og kombinere farver, rammer, og typografi. Logo og header Vi har arbejdet en del med at finde det rigtige logo til foreningen, da vi mener at et logo fortæller meget om en foretagende. Logoet skal placeres øverst i det venstre hjørne på headeren. Vi diskuterede lidt frem og tilbage om det skulle være en del af header billedet, eller om det skulle være et element for sig selv som blev placeret ovenpå det hele. Vi blev enige om at logoet skulle være en del af headeren da det nok ville være det enkleste og den mest stabile løsning. Vi endte med et logo som passer meget godt til en kunstforening. Stafelien signalerer forbindelsen til det kunstneriske og de tre bogstaver ”KFT” kommer fra Kunst Foreningen Tangen. For at henlede opmærksomheden på kunsten igen står ordet KUNST med store bogstaver. Bogstavet ”F” står i et rødt felt og løber lidt ud af den. Dette er gjort pga. forbindelsen til G4S logoet. Den røde farve er den samme farve som i G4S´s logo. Vi har valgt at få rammet siden ind også som en relation til den kunstneriske indramning.

7


Projektrapport 10. december 2010 Foreningsnavnet er skrevet i skrifttegnet ”Bradley Hand ITC” som er den skrift som foreningen allerede har brugt i deres opstartsbrev til medlemmerne. Story board Walt Disney opfandt storyboardsystemet i starten af 1930erne 4. For at kunne holde styr på de tusindvis af tegninger der indgik i hans tegnefilm, fik han sine tegnere til at sætte tegningerne op i rækkefølge på væggene i studiet. På denne måde kunne han følge med i arbejdets forløb og slette eller tilføje scener. Vi bruger storyboardet til at illustrere sidernes opbygning ud fra det valgte tema. Placering og indhold har vi valgt ud fra at siden skal bruges af ca. 110 medlemmer til og få eller videregive information og oplysninger vedrørende foreningens gøremål. Og da det i sagens natur skal være let og hurtigt at videregive information, har vi bestræbt os på at placere indhold og illustrationer sådan så man ikke skal scrolle for meget. Horisontal scroll har vi helt bandlyst mens vertikal scroll er forsøgt minimeret. Vi har valg og fastsætte antallet af indlæg pr. side til 5 for at den vertikale scroll ikke bliver for lang så man derved mister orienteringen.

De 4 grafiske designparametre Form Websitet er lavet i et format på 800px i bredde men ikke nogen fast størrelsen i højden. Det er for at tage hensyn til forskellige skærmstørrelser (også ældre skærme) således at vandret scrollning må formodes ikke blive nødvendig. Farver Vi har som tidligere nævnt valgt primært at gøre brug af farverne rød, hvid og sort. Det er et ønske fra Eriks side om at lægge sig tæt op ad farverne på G4Ss hjemmeside. De få farver giver også et roligt og overskueligt site.

4

http://en.wikipedia.org/wiki/Storyboard

8


Projektrapport 10. december 2010 Illustration Vi har valgt at placere vores logo øverst i venstre hjørne, hvor blikket først falder jf. AIDA modellen. Logoet er som før nævnt staffeli med et billede på som illustrerer forkortelsen af foreningens navn. Det giver et godt indtryk af at siden har noget med kunst at gøre. Vi har valgt ikke at have nogle billeder på forsiden men derimod en separat side kaldet Galleri hvorpå man kan se alle aktuelle billeder. Det giver en rolig og overskuelig forside. På forsiden er der dog en blok hvorpå der kan forekomme billeder. Typografi Vi har valgt verdana da det er en meget læsevenlig skrifttype når man snakker hjemmesider. Verdana er valgt både på vores menubar i vores venstre sidebar samt i body. I vores header i overskriften er dog valgt en mere kunstnerisk skriftype nemlig Bradley Hand ITC som vi synes signalerer at der er tale om en kunstforening. Det er lagt ind som et billede hvilket betyder alle kan se skrifttypen.

Realiseringstrin Det færdige site er opbygget i Wordpress som fint kan bruges som et CMS system, hvilket gør det let at redigere i. Vi har valgt et Wordpress tema som var let at redigere i og som mindede lidt om det ønskede design. Vi har dog redigeret en del i koden for at få det ønskede resultat. De grafiske elementer samt billederne er redigeret i Gimp som et open source program i stil med Adobe Illustrator samt i Paint som er en del af Windows. Efterfølgende er elementerne indsat i Wordpress.

Afslutning I denne projektrapport, hvor vi har skrevet om Kunstforeningen Tangen har vi lært nye ukendte teknikker og udviklingsværktøjer at kende. Vi har arbejdet med HTML, CSS, PHP og efter udviklingsmodellen HOME. Det tog os noget tid at sætte os ind i de forskellige nye områder, som bl.a. WordPress’ plugins, widgets og temaer, men med tiden blev det

9


Projektrapport 10. december 2010 nemmere og gav mere mening. Dette synes vi ogsĂĽ der afspejles meget godt i resultatet af hjemmesiden, som vi synes lever op til kundens krav. Gruppearbejdet har fra start til slut fungeret godt, og vi har alle vĂŚret involveret i de forskellige processer og beslutninger der er blevet taget undervejs. Ydermere har vi udvekslet telefonnumre og emails med hinanden, sĂĽ vi i fremtiden mĂĽske kan komme til at arbejde sammen igen.

10


Bilag 1: Tidsplan

29nov

30nov

01dec

02dec

03dec

04dec

05dec

06dec

07dec

08dec

09dec

10dec

29nov

30nov

01dec

02dec

03dec

04dec

05dec

06dec

07dec

08dec

09dec

10dec

Raporten projekt presentation kundebesøg foranalyse undersøgelse design realisering gennemgang aflevering + evt. udprint Websiden kundebesøg temavalg skrift og farver ideudvikling header logo indhold præsentation ved kunde små rettelser aflevering


Bilag2, side 1: Skitser


Bilag 2, side 2


Bilag 2, side 3


Bilag 3: Skeletopbygning

800 x73 800 x87

2

205

Side 1

Side 2

3

Side 3

2

586 x indholdsafhĂŚngig

800 x43


Bilag 4, side 1: Storyboard

1

LOGO

6

KUNST Foreningen Tangen 3

Forside

4 Billede

Side 1

Side 2

Indslag 1Tekst 2

Bliv

5 Links

Side 3


Bilag 4 side 2: 1:

Header: bkg-header.png og bkg-menu-left.png Bundfarve: #ff000000 (tonet mod sort) Skrift: Bradley Hand ITC #36px

2:

Tekstindhold Bundfarve : #ffffff Overskrift: Verdana

h2 #000000

Brødtekst: Verdana 13 px #000000 Baggrund: bkg-content-left.png

3:

Navigation/Knapper: bkg-current-item.png Bundfarve: #c7c7c7 ved aktiv Understreget ved hover Skrift: Verdana #h2 #ffffff Valgt menu: Verdana #36px #000000

4:

Sidespalte Overskrift: Bundfarve: #ffffff Skrift: Verdana #12px #000000

5:

Footer: bkg-footer-left.png Bundfarve: #ff0000 (tonet mod sort) Skrift: Verdana #9px #454545; #ffffff

6: Logo: En del af Header


Bilag 5: Flowchart

Forside

Arrange menter

Galleri

VedtĂŚgter

Kontakt

Om KFT

GruppeKilianBjarkeSinan  

Vores Projekt rapport

Read more
Read more
Similar to
Popular now
Just for you