Page 1

Multimedieteknologi og Interaktionsdesign            

Website Til Århus fotografiske Amatørklub December 2011                                    

Gruppen ParPetTob Parham Peyrovi Peter Junø Tobias Jacob Buskbjerg Thomasen


Multimedieteknologi og Interaktionsdesign .........................................................................................................  1   Udviklingsparadigmer  .............................................................................................................................................  3   Den  iterative  udviklings  model  ...................................................................................................................................................  3   Vandfaldsmodellen  ...........................................................................................................................................................................  4   Home  metode  ......................................................................................................................................................................................  5   Valg  af  metode    .......................................................................................................................................................................  6   Foranalyse  ...................................................................................................................................................................  6   Interviews  .............................................................................................................................................................................................  6   Tidsplan  .................................................................................................................................................................................................  6   Undersøgelsestrin  .....................................................................................................................................................  6   Det  eksisterende  website  ...............................................................................................................................................................  6   Mindmap  ...............................................................................................................................................................................................  6   Flowchart  .............................................................................................................................................................................................  7   Designtrin  ....................................................................................................................................................................  7   Informationsdesign:  .........................................................................................................................................................................  7   Interaktionsdesign:  ..........................................................................................................................................................................  7   Præsentationsdesign:  ......................................................................................................................................................................  8   Designvalget:  ...........................................................................................................................................................................  8   Apple.com  .................................................................................................................................................................................  8   Tekst:  ..........................................................................................................................................................................................  8   Billeder:  ......................................................................................................................................................................................  8   Animationer,  video  og  lyd:  .................................................................................................................................................  8   Kontrast  .....................................................................................................................................................................................  8   Gestalt  lov  .................................................................................................................................................................................  9   Farver:  ........................................................................................................................................................................................  9   Typografi  ...................................................................................................................................................................................  9   Sammenligning  mellem  sites:  ......................................................................................................................................................  9   Mockup:  ..................................................................................................................................................................................  10   Vores  bud  på  AFA’s  hjemmeside:  ................................................................................................................................  10   Konklusion  på  designfasen:  ................................................................................................................................  11   Realiseringstrin  ......................................................................................................................................................  11   Wordpress  tema  ..................................................................................................................................................................  12   Konklusion  ................................................................................................................................................................  12   Bilag  ............................................................................................................................................................................  13   Bilag  1  -­‐  tidsplan  ............................................................................................................................................................................  13   Bilag  2  -­‐  Mindmap  .........................................................................................................................................................................  13   Bilag  3  –  Flowchart  .......................................................................................................................................................................  14   Bilag  4  –  Apple.com  .......................................................................................................................................................................  15   Bilag  5  –  kundens  nuværende  website  ..................................................................................................................................  16   Bilag    6  -­‐    Mockup  ...........................................................................................................................................................................  17  

   


Udviklingsparadigmer   Det  er  væsentligt  at  vælge  det  udviklingsmetode  der  er  tilpasset  ens  system,  ellers  kan   software  projekter  nemt  risikerer  at  overskride  deadlines  og  dermed  det  planlagte  budget.   Her  er  der  dog  ikke  noget  planlagte  budget  men  det  er  et  interessant  faktum  når  det  gælder   projekt  styring.   Følgende  er    to  kendte  udviklingsparadigmer  der  kan  bruges  under  forskellige  projekter.   Hvert  af  disse  udviklingsparadigmer  har  sine  udviklingsmetoder.  De  to  udviklingsparadigmer   er  henholdsvis  den  iterative  udviklingsmodel  og  vandfaldsmodellen  (Overgaard  Hansen,   2005).  Det  benyttede  udviklingsparadigme  i  dette  projekt  er  baseret  på  den  iterative   udviklingsmodel  og  den  benyttede  udviklingsmetode  er  ROPES  (Douglass,  1999).   Efterfølgende  gøre  rede  for  disse  to  ovennævnte  udviklingsparadigmer:  

Den iterative  udviklings  model    

En iterativ  udviklingsmodel  er  en  model  der  beskriver  systemer  hvis  udvikling  foregår  i  flere   iterationer.  Her  er  formålet  at  lave  dele  af  systemet  i  hver  iteration,  dernæst  reflekter  over  det   opnåede  prototype.  Det  næste  vil  så  være  at  gå  i  gang  med  den  næste  iteration.  I  Men  man  i  et   iterativt  udviklingsmodel  er  i  gang  med  den  nye  iteration,  er  der  lejlighed  til  at  gå  tilbage  og   optimerer  det  forrige  iteration.   Herunder  hører  udviklingsmetoden  ROPES  Rapid  Object-­‐Oriented  Process.  Denne  metode  er   designet  af  Bruce  Douglas  hovedsageligt  for  udvikling  af  komplekse  embedded  systemer.  Her   tager  metoden  hånd  om  en  iterativ  proces  der  fordeler  opgaverne  i  flere  iterationer.      

Figur x:  Ropes  spiral  model  

  En  iteration  i  Ropes  består  a  et  gennemløb  fire  faser,  analyse,  design,  implementering  og  test,   hvor  man  ender  ud  med  en  prototype,  som  opfylder  de  krav  som  er  defineret  for  iterationen.  I   næste  iteration  gennemgås  det  samme  faser  for  de  nye  krav.  Denne  model  giver  mulighed  for   at  man  i  senere  iterationer,  kan  vende  tilbage  og  rette  fejl  og  mangler  i  tidligere  iterationer.   Fordele  og  ulemper  ved  sådan  en  metode  kan  være  som  følgende:  


Fordele:   • God  tids  planlægning  og  budgettering  ved  man  kan  kigge  tilbage  og  være  i  stand  til  at   korriger  tidspanen.   • Hurtigt  at  få  en  prototype  op  at  køre   • Optimering  af  kode  i  det  næste  iteration   • Fejl  kan  fanges  tidligt  i  forløbet.        Ulemper:     • Kan  være  tidskrævende  da  man  skal  igennem  flere  iterationer.    

Vandfaldsmodellen   Den  model  er  designet  af  W.  W  Royce  i  1970,  og  samtidigt  forklarede  han  at  modellen  ikke   egner  sig  til  udvikling  af  software  (Royce,  1970),  da  der  altid  vil  opstår  rettelser  i   projektforløbet.  Her  foregår  hele  projektforløbet  i  teorien  kun  på  en  iterarion.  Modellen   består  hovedsageligt  af  analyse,  Design,  implementering  og  test  hvilket  følges  lineært.    

Figur X:  Vandfaldsmodellen   Modellen  egner  sig  ikke  til  projekter  hvor  problem  domænet  er  usikker  fra  begyndelse.  Her  vil   modellen  ikke  tillade  at  man  går  tilbage  og  udføre  rettelser  i  projekt  forløbet.  Her  tilstræbes   så  godt  som  muligt  at  udføre  en  fase  (f.eks.  Design)  fuldt  ud  før  man  bevæger  sig  til  den  næste   fase  (f  eks.  Implementering).  Denne  model  bliver  oftest  kendt  benyttet  til  bro  konstruktion.   Her  er  der  ikke  plads  til  ændringer  løbende  under  udvikling.  Yderligere  er  domænet   efterhånden  så  velkendt  og  mange  usikkerheder  ved  bro  konstruktion  er  elimineret  at  det  er   oplagt  at  benytte  en  model  der  afspejler  deres  behov.  Software  udvikling,  i  modsætning  til  bro   konstruktion  kan  indeholde  mange  fejlkilder  og  domænet  vil  oftest  være  usikker  til  mange   udvikler.  Her  er  det  nødvendigt  at  man  baserer  udviklingen  på  en  iterative  udviklings  proces.   Her  kan  nævnes  følgende  fordel  og  ulemper:   Fordele   • Hvis  teknologierne  er  kendt  på  forhånd   • Hvis  probemdomønet  er  velkendt  på  forhånd  


Ulemper • Hvos  teknologierne  ikke  er  kendt  på  forhånd   • Hvis  der  er  tale  om  et  nyt  arbejdsområde     I  projektet  fravælges  denne  model  da  projektet  er  et  undersøgelses  projekt,  hvor  der  ønskes   en  iterativ  udviklingsmodel,  således  at  implementering  af  løsningens  krav  kan  blive  testet  og   eventuelle  rettelser  og  ændringer  kan  forekommer  tidligt  i  forløbet.      

Home metode  

Den metode  er  designet  af  Louise  Harder  Fisher    som  en  åben  metode  til  udvikling  af  digital   medier.  Metoden  består  af  fire  trin:  Foranalyse,    undersøgelse,  Design  og  Realisering.      

figur X  Home  metode  

Foranalyse  fasen  fremskaffer  information  til  udviklingsmodel.  Dette  er  i  form  af  interviews  og     Andre  former  for  dataopsamlingsmetoder.     Under  undersøgelsestrinet    etableres  projektteamet  og  laves  en  projektplan.  Her  indsamler   man  blandt  andet  det  viden  der  skal  danne  grudlag  for  design  og  realisering.  Det  kan  blandt   andet  opnås  i  form  af  brainstorming.     Design  fasen  består  af  design  af  vores  produkt    hvor  man  etableres    en  interaktion  og   præsentation  design  og  udarbejdes  måder  brugeren  skal  kunne  interagere  med  mediet  på.   Det  kan  være  i  form  af  storyboards  og  flowcharts.   Under  realisering  vil    prototypen  eller  det  færdige  produkt  blive  realiseret  og  færdig  udviklet.      


Fordele • Aktiviteter  bliver  anskuet  både  udefra  produktrettet  og  procesrettet  vinkel.   • Helhedsorienteret  metode  der  er  beregnet  til  multimedieudvikling.   Ulemper   • For  generelt  og  kan  til  tider  virke  diffust.       Valg  af  metode     I  projektet  fald  valget  på  den  Home  da  projektet  er  et  undersøgelses  projekt,  hvor   teknologierne  var  nye.  Man  kunne  fint  have  valgt  at  bruge  Ropes  i  stedet  da  den  er  en  agile   Iterativ  udviklingsmetode  metode  til  udvikling  af  software.    

Foranalyse Interviews     Interview  (Sharp,  Rogers,  &  Preece,  2007,  p.  s.299)  var  udarbejdet  under  foranalyse  hvor   kunden  blev  inviteret  til  en  gruppe  interview.  Typen  af  interview  der  blev  udført  var  semi   struktureret.  Åben  og  lukket  spørgsmål  blev  præsenteret  til  kunden.  En  liste  af  specifik   spørgsmål  bliver  stilet  til  kunden  hvorefter  ”follow  op”    spørgsmål  blev  stillet  om  de   interessante  ting  som  kunden  sagde  udover  de  spørgsmål  der  blev  stillet.  

Tidsplan   Tidsplanen  har  været  med  til  at  give  os  et  overblik  over  den  estimerede  tid  vi    kunne  forestille   os  at  bruge  på  de  enkelte  dele  af  projektet  og  dermed  de  forskellige  udviklingstrin.  Vi  kan   konstater  at  når  man  har  at  gøre  med  et  undersøgelses  projekt  hvor  domænet  samt  teknikker   er  ukendte  har  tidsforbruget  i  vores  tilfælde  været  langt  større  end  forventet.  

Undersøgelsestrin Det  eksisterende  website    Efter  at  have  brugt  noget  tid  på  at  undersøge  det  eksisterende  AFA  website,  kunne  vi  blandt   andet  konstatere  at  det  grafisk  udtryk  var  meget  rodet.  Derudover  kunne  vi  i  gruppen  være     enig  om  at  der  ikke  har  været  tænkt  i  kontraster  i  og  med  at  farvekontrasten    mellem  menu   tekster  og  deres  baggrund  ikke  er  tilstrækkelig  stor.   Når  det  gælder  AIDA  modellen  kan  det  siges  at  det  eksisterende  website  opfylder  noget  af   modellen  .  Attention  delen  stemmer  overens  med  det  faktum  at  en  opmærksomhed  bliver   fanget  af  den  øverste  venstre  del  af  siden.    Interest  delen  bliver  opfyld  af  det  slideshow  der   kør  midt  på  siden.  Men  pga.  det  rodede  udtryk  får  man  ikke  desire  delen  med.  Dette  medfører   at  man  ikke  kommer  videre  til  aktion  delen.    

Mindmap Mindmappen  var  med  til  at  forme  nogle  ideer  til  design  af  vores  nye  website.  Her  skulle  vi   huske  at  minde  hinanden  om  at  alt  er  i  spil  og  ingen  ideer  er  dårlige.  Se  bilag  afsnittet.  


Flowchart   Flowcharten  var  med  til  at  give  os  et  overblik  over  struktur  og  til  dels  indhold  af  websitet.   Flowcharten  gennemgik  en  iterativ  udvikling  efterhånden  som  design  processen  skred  frem.   Vi  har  at  gøre  med  en  non-­‐lineær  flowchart    med  flere  navigations  muligheder.  Se  Bilag  afsnit.  

Designtrin   Informationsdesign:     Da  vores  målgruppe  er  ret  bred  og  vil  være  folk  med  forskellig  teknisk  viden  ifht.   hjemmesider,  er  det  vigtigt  at  skaffe  en  nem  adgang  til  informationer  på  sitet.  Derfor  er  sitets   information  via  menubjælken  så  logisk  som  mulig.  Udfra  mantraet  ”alle  sider  er  en  forside”  fra   bogen  ”Digital  media  management”  har  vi  valgt  at  alle  sider  er  ens  ifht.  menu  og  udseende.  Da   sidens  funktion  mest  af  alt  er  af  informativ  karakter  er  netop  informationernes  tilgængelighed   yderst  vigtig.  Det  har  vi  efter  bedste  evne  bestræbt  os  på  at  efterleve.     For  medlemmerne  af  foreningen  er  informationen  vigtigst,  mens  det  for  udefrakommende   måske  er  lidt  vigtigere  at  præsentere  foreningen.  Til  det  formål  er  billederne  på  forsiden  og  i   galleriet  vigtige.  Netop  derfor  er  det  godt  at  billeder  er  det  første  man  møder  på  forsiden.   Placeringen  er  valgt  udfra  målet  om  attention,  hvilket  man  må  sige  opnås  ifht.  størrelsen  på   billederne  og  slideshowet  der  sikrer  at  der  er  en  mulighed  for  at  mindst  en  af  billederne   fanger  brugerens  opmærksomhed.    

Interaktionsdesign:

Vi  vil  her  have  en  hierarkisk  struktur,  med  en  en  statisk  menubjælke  på  alle  sider.  Dette   skaber  overblik  og  brugbarhed.  Som  man  kan  se  i  vores  flowchart  (se  bilag)  har  vi  valgt   menupunkterne  ud  fra  kundens  prioriteter.     ”Hjem  sender  selvsagt  brugeren  tilbage  til  forsiden.  ”Aktiviteter”  var  deres  højeste  prioritet  og   kommer  derfor  lige  efter  hjem.  Her  skal  foreningens  medlemmer  hurtigt  kunne  danne  sig  et   overblik  over  næste  aktivitet.  Dette  kan  også  ses  på  alle  sider  i  form  af  kalenderen.  ”Links”-­‐ menupunktet  skal  bestå  af  links  til  de  forskellige  fotografers  hjemmesider,  mens  ”forum”  skal   fremstå  som  en  metode  til  at  interagere  medlemmerne  imellem.  Links  vil  i  øvrigt  åbne  i  et  nyt   vindue,  så  brugeren  ikke  bliver  ledt  væk  fra  siden  uden  mulighed  for  at  finde  tilbage.  Under   menupunktet  ”galleri”,  skal  man  kunne  se  et  udvalg  af  fotos  som  medlemmerne  har  taget.  .   Kunden  er  ikke  helt  sikker  på  hvordan  de  vil  bruge  galleriet,  men  har  idéer  herom.  ”Om  os”   Skal  fortælle  historien  om  den  gamle  forening  og  også  lidt  om  hvilken  slags  forening  det  er   osv.  Til  sidst  skal  ”kontakt”  knappen  give  brugeren  mulighed  for  at  kontakte  foreningen.  Dette   gøres  ved  en  formular  så  modtager  ikke  får  tilsendt  spam  eller  andet  i  sin  post.     Vi  har  valgt  at  bruge  dropdown  i  menuen,  da  dette  skaber  overblik  og  hurtig  tilgang  til   siderne.  En  hvid  highlight  af  menuknapperne  viser  hvilken  side  brugeren  er  på.  Der  er  på   dette  site  ikke  brug  for  en  ”besøgt  link”-­‐highlightning  og  dette  er  derfor  ikke  lavet.    


Præsentationsdesign:  

Designvalget:  Udfra  målgruppen  som  hovedsageligt  består  af  2/3  mænd  fra  midt  i  20’erne  og  op  til  80  år,   har  vi  valgt  at  gøre  designet  så  enkelt  og  nemt  at  finde  rundt  i  som  muligt.  Dette  valg  er  også   gjort  ud  fra  betragtningen  at  det  er  brugernes  fotos  der  skal  være  i  fokus  og  at  siden  mest   bruges  af  foreningens  medlemmer.  Vi  har  arbejdet  ud  fra  mantraet  ”less  is  more”  og  har  taget   udgangspunkt  i  bla.  http://www.apple.com/  som  ses  i  Bilag.         Apple.com     Her  er  det  produktet  der  er  i  fokus  i  en  meget  brugervenlig  navigation.  Dette  ville  vi  dermed   også  kunne  gøre  på  AFA’s  hjemmeside  ifht.  deres  fotos  som  ”produkt”.     Tekst:   Arial  bla  bla   Billeder:   Billederne  på  forsiden  skal  fremvises  så  flot  som  overhovedet  muligt,  da  det  er  foreningens   ”produkt”.  De  virker  samtidig  som  blikfang  ifht.  nye  besøgende  på  siden.  Da  billeder  som  sagt   fortæller  mere  end  ord  er  de  dermed  også  vigtigt  at  møde  som  det  første  på  denne   hjemmeside.  Da  de  her  fungerer  mere  som  blikfang  er  de  lagt  ind  som  et  slideshow  der  blot   skal  vække  nysgerrigheden  hos  brugeren.  I  galleriet  vil  de  fremstå  som  ”thumbnails”,  som   man  kan  klikke  sig  ind  på  for  at  nyde  billedet  i  stort  format  så  længe  man  lyster  det.  Dette  var   også  en  stor  prioritet  for  kunden,  da  foreningens  medlemmer  gerne  vil  have  ro  til  fordybelse  i   billederne.     Animationer,  video  og  lyd:   Da  foreningen  kun  er  for  still-­‐billede  amatørfotografer,  har  kunden  ikke  brug  for  video  eller   animationer  på  sitet.  Informationen  og  fremvisningen  af  billeder  er  klart  det  vigtigste  for  dem.   Lyd  udenfor  video/animationer  forstyrrer  generelt  mere  end  de  gavner  og  er  derfor   udelukket.     Kontrast   Vi  er  her  gået  efter  klare  kontraster  i  både  tekst  og  design.  Det  ses  bla.  I  brugen  af  hvid  logo  og   tekst  på  mørk  baggrund  i  headeren.  Samt  sort  tekst  og  sort  indramning  af  billederne  på   forsidens  hvide  baggrund.  Når  man  tænker  på  fotoets  verden  er  den  jo  også  meget  ”sort/hvid”   i  den  henseende,  at  man  tidligere  i  hvert  fald  har  arbejdet  udfra  negativer  og  positiver.   Derudover  har  vi  tænkt  ud  fra  størrelses  kontrast  i  og  med  billede præsentation altså slides er meget større end alle andre elementer for at tiltrække brugerens opmærksomhed.  


Gestalt lov   Vi  har  i  projektet  tænkt  ud  fra  Gestalt  loven.  Loven  om  Lukkethed  har  vi  brugt  til  at  isolere   menu  linien  for  at  få  menu  punkterne  til  at  holde  sammen.   Loven  om  Nærheden  har  vi  brugt  til  at  få  links  til  sociale  medier  at  opfattes  sammenhørende.   Loven  om  lighed  benytter  vi  til  at  gruppere  menu  punkterne  samt  at  gruppere  det  grafiske   udtryk  i  menu  linien  og  headeren.     Farver:   Udover  farverne  i  billederne  er  der  ikke  rigtigt  noget  farveindhold  på  siden.  Dette  er  som   tidligere  nævnt  et  bevidst  valg.  Men  der  er  forskellige  gråtoner  som  er  vist  med  hexkode   nedenunder:  

Typografi    På  vores  website  har  vi  brugt  Arial  som  er  en  sans-­‐serif  skrifttype  til  al  tekst.  Både  i  header  og   footer  grafikken  og  til  overskrifter  og  brødtekst.  

Sammenligning mellem  sites:  

Som  i  kan  se  udefra  Bilag,  har  AFA  en  allerede  eksisterende  hjemmeside:  http://www.afa-­‐ foto.dk.  Den  er  noget  mere  skabelonsskåret  og  har  ikke  haft  så  mange  tanker  om  design   indover  sig.  Deres  valg  af  den  grønne  farve  er  tilfældig  og  siden  viser  ikke  rigtig  at  den  har   med  foto  at  gøre.  Den  kunne  på  sin  vis  være  en  hjemmeside  for  alt  muligt.    


De har  på  sitet  valgt  at  have  en  menu  i  siden  i  stedet  for  toppen,  hvilket  kan  være  fint  nok  og   en  smagssag  for  den  enkelte.  Deres  valg  af  limegrøn  tekst  på  hvis  baggrund  gør  det  yderst   svært  at  læse  noget  af  teksten.  Billederne  kommer  heller  ikke  helt  til  sin  ret  på  den  hvide   baggrund.  Som  AFA  selv  siger  er  hjemmesiden  lavet  for  noget  tid  siden  og  er  ikke  ”up  to  date”   med  deres  ønsker.  Det  vil  vi  på  følgende  mockup  prøve  at  indfri.         Mockup:     Som  man  kan  se  ud  fra  Bilag,  har  vi  bevidst  designet  af  kontraster  mere  end  farver.  Billedet  er   i  centrum  da  det  næsten  er  det  eneste  med  farve  og  det  har  fået  en  sort  baggrund,  hvilket  er   den  bedste  måde  at  omkranse  et  billede  på.  Samtidig  er  teksten  letlæselig  og  man  kan  nemt   finde  rundt  i  menuen.  Kalenderen  fortæller  brugeren  omkring  aktiviter  og  ovenover  kan   seneste  nyheder/aktiviteter  og  indlæg  læses.  Det  skaber  overblik  og  let  navigation  på  siden.         Vores  bud  på  AFA’s  hjemmeside:   Her  kan  man  se  vores  næsten  færdige  produkt.  Vi  har  været  tro  vores  mockup’s  design  og  har   næsten  ikke  ændret  noget  undervejs.  Efter  samtale  med  kunden  fandt  vi  ud  af  at  designet  var   godt  og  passende  og  de  eneste  ændringer  de  havde  var  ifht.  menu-­‐punkter.  Disse  er  nu   kommet  med  og  det  nye  site  burde  herved  være  som  kunden  ønskede  det.    


Konklusion på  designfasen:  

Efter  at  have  arbejdet  forholdsvis  målrettet  med  designet  er  vi  godt  tilfredse  med  det  færdige   design  af  sitet.  Vi  har  været  ret  enige  i  hvad  målgruppen  havde  brug  for  ifht.  navigation  og   design  og  kan  konkludere  at  vi  har  nået  vores  mål  hurtigt  i  processen.  Da  vi  har  haft   forskellige  problemer  med  kodningen  af  siden  er  det  der  har  brugt  det  meste  af  vores  tid.    

Realiseringstrin

Mockupen er  lavet  i  Appen  iMockup  på  en  iPad  og  størrelserne  er  målfast  i  programmet.   Målene  er  i  pixel  og  her  har  vi  taget  højde  for  en  laveste  fællesnævner  på  1024  px  i  bredden.     Idet  vi  mener  næsten  ingen  har  skærme  mindre  end  1024  med  mindre  det  drejer  sig  om   mobile  enheder.  En  iPad  2  har  1024X  768  PX  hvilket  fint  vil  kunne  bruges  i  denne   sammenhæng.   Wrapper  960  X  800  ,  Header  920X70,  Menu  linien  920  x  43,  slides  show  476x  345,  widget   nyheder  233x  159,  widget  kalender  233x  180,  social  medier  ikoner  30X30,  footer  920X40     Vores  produkt  er  blevet  implementeret  i  Wordpress,  som  er  et  content  mangment  system  (   CMS).    Det  tema  vi  har  valg  er  at  skræddersyere  efter  vores  ønskede  design.      


Wordpress tema   Vi  har  I  processen  omkring  udvælgelse  af  wordpress  tema  set  på  følgende  temaer:     EvoLve,  News,Twenty  Ten  (1),  zeeCorporate  og  portfolio  press,  Dot-­‐B  (2).  Iblog(2),  zdark.   Konklusionen  var  at  Twenty  Ten  Passer  bedst  til  vores  Mockup,  da  vi  anså  Twenty  Ten  som   det  nemmeste  at  tilpasse  vores  design.    

Konklusion  

Vi har  i  gruppen    forsøgt  at  imødekomme  kundens  ønsker  ud  fra  data  opsamlings  fasen.  Og  ud   fra  vores  sidste  kundemøde  har  det  vist  sig  at  de  har  været  tilfredse.  Vi  mener  vi  er  nået  frem   til  et  design  der  efterkommer  kundens  ønsker  m.h.t.  at  siden  både  skal  være  en  præsentation   ud  ad  til  og  samtidigt  fungere  for  klubbens  medlemmer  som  kommunikationsmiddel.     I  gruppen  har  vi  besluttet  at  alle  var  med  i  arbejdet  omkring  grafisk  design,  kodning  (  HTML   CSS  og  PHP)    og  dokumentation.  Men  vi  har  også  i  udstrakt  grad  benyttet  os  af    gruppe   medlemmernes  forskellige  kompetencer.     Vores  reelle  tidsforbrug  var  noget  højere  end  det  forventede  i  kraft  af  at  domænet  var  nyt  for   os  og  vi  derfor  stødte  ind  i  især  tekniske  showstoppere  der  gav  øget  tidsforbrug  især  i   realiseringsfasen.     Alt  i  alt  har  vores  samarbejde  fungeret  fint.  Vi  har  haft  nogle  gode  diskussioner  i  gruppen  som   har  ført  til  nogle  fælles  beslutninger                                   .      


Bilag   Bilag  1  -­‐  tidsplan     Emne  

Planlagt tid  

Forbrugt tid  

Metode Foranalyse   Undersøgelse   Design   realisering   Feedback   Konklusion  

3x1/2 time   3x4  timer   3x3  timer   3x2  1/2  time   3x3  timer   3x31/2  time   3x7  timer   3x10  timer   3x10  timer   3x16  timer   3x1  time   3x1/2  time   3x1  time   3x1  time  

I alt  

3x25 1/2  time   3x34  1/2  time  

          Bilag  2  -­‐  Mindmap  


Bilag 3  –  Flowchart      

 


Bilag 4  –  Apple.com    

   

                           


Bilag 5  –  kundens  nuværende  website    

 

                       


Bilag  6  -­‐    Mockup  

Projekt Raport ParPetTob  

Parham, Peter og Tobias

Advertisement