PROJEKTOPGAVE -Et brugervenligt website af: Michéla, Mathilde, Christian & Andreas

Transkript

1 PROJEKTOPGAVE -Et brugervenligt website af: Michéla, Mathilde, Christian & Andreas

2 INDHOLD GRUPPEMEDLEMMER...3 DESIGNBRIEF...4 KOMMUNIKATIONSANALYSE KOMMUNIKATIONSMODEL...5 ARGUMENTATION FOR DESIGNPRINCIPPER...6 KODE-EKSEMPLER PROCESSBESKRIVELSE EVALUERING...9 FLOWCHART...9 GANTT-KORT

3 GRUPPEMEDLEMMER: Michéla Kaae Andersen :: Mathilde Dahlin :: Christian Lund :: Andreas Brix :: 3

4 DESIGNBRIEF Hvilket firma har vi med at gøre? Søren K er en restaurant beliggende inde i den sorte diamant. Det er en restaurant der leverer god mad til rimelige penge. De kalder selv deres køkken for gastronomisk, og ud fra hvad vi kan se på billederne på deres site, må man gå ud fra at maden er i den fine ende af skalaen. Vores mål med det nye site: Vi vil gerne skabe et mere brugervenligt site, med udgangspunkt i det samme udseende som den gamle. Designet er æstetisk, og fremstår flot og professionelt, men der er alt for mange informationer, og navigationsmuligheder. Vi vil gøre det mere enkelt for brugeren at navigere rundt, og finde de nødvendige oplysninger, man søger. Derfor vil vi skære en masse informationer fra, og cutte indholdet ned til hvad det hele handler om. Nemlig god mad. Målgruppen: De fleste besøgede på restauranten er alle, som søger en gastronomisk oplevelse, til rimelige penge. Ud fra beliggenheden må man gå ud fra, at de fleste besøgende er mere eller mindre kultiverede, i og med at det ligger ved det kgl. bibliotek. Indhold på siden: Alle billeder og tekst bliver genbrugt fra den gamle side. En del af billederne og teksten vil dog blive skåret drastisk ned, eller måske helt fjernet fra det nye site. Vi vil ligeledes samle flere af informationerne under samme menupunkt, i stedet for at det ligger spredt på en masse undersider, som det er tilfældet nu. Mediet: I og med at det er et redesign af et website, er det logisk, at mediet er computeren/internettet. Bredden på sitet vil blive maks 960px, da det er en websikker bredde. Deadline: Vi har en overordnet deadline der hedder d. 23. november kl Derudover har enkeltpersoner i gruppen også nogle individuelle deadlines. Se gantt-kort. 4

5 KOMMUNIKATIONSANALYSE For at kunne påbegynde et projekt på ordentlig vis, er det vigtigt at have gjort sig en masse overvejelser omkring afsender, budskab og modtager med andre ord, er det vigtigt at have de kommunikative aspekter af projektet på plads. Som afsender har det været nødvendigt for os at starte med at finde ud af, hvad vores egentlige opgave var, og hvordan vi gerne ville brande os selv, således at det i sidste ende i praksis ville kunne gavne os selv. Det handler for afsenderen om at være så professionel som muligt, og ligeledes forstå vigtigheden af at tage sig af den givende opgave som dét firma, der har fået stillet opgaven for hånden. Som afsender har vi skullet planlægge og redegøre for hele arbejdsprocessen, med de midler vi har haft til rådighed. Et budskab er dét som vi, via vores arbejde og projekt, gerne vil formidle. Under budskabet er det også vigtigt at nævne mediet/kanalen, som budskabet skal formidles i. I dette tilfælde er mediet derfor internettet, nærmere bestemt hjemmesiden Søren K. Én ting er at formidle noget ansigt til ansigt, ved brug af tale en anden er at formidle et budskab på en side via billeder, informationer og gennemtænkt design. Her kan det være betydeligt mere vanskeligt at ramme den rigtige målgruppe, fordi man ikke har nogen anelse om, hvordan de vil modtage og reagere på hele tanken bag. Som nævnt i vores designbrief, er de besøgende på hjemmesiden og restauranten alle, som søger en gastronomisk oplevelse til en billig pris. Vi anslår derfor at målgruppen primært er gennemsnitsdanskeren med sans for god smag og lækker mad. Herpå har det, i indkodningsfasen, været relevant for os at finde ud af, hvordan vi på bedst mulig vis kunne vække interessenternes nysgerrighed og tilfredsstille denne, i et flot, enkelt og dynamisk design. Siden i sig selv har et utrolig flot og let tilgængeligt design, som vi derfor har valgt at bibeholde, dog med små ændringer. Vores målgruppe har et informationsbehov, som vi har været nødt til at tage højde for, gennem hele vores redesign. Det har været vigtigt for os at vælge de væsentligste informationer omkring restauranten ud, og derfor har vi også fjernet nogle af de basale ting såsom medarbejder login, fra siden, da vi ikke mener at et sådan felt har nogen relevans i forhold til de besøgendes krav. Gennemsnitsdanskerens informationsbehov bliver stillet ved hjælp af æstetiske virkemidler og nøje udvalgte fakta om restauranten. Vi har i vores proces taget højde for, at der kan forekomme støj, i form af negativ feedback og konkurrence. I dette projekt er der ingen direkte konkurrence, da det jo i princippet kun er os som har fået stillet redesignopgaven, men i praksis kan konkurrence på arbejdsmarkedet let forekomme. Her handler det derfor om at arbejde målrettet, og hele tiden 5

6 have fokus på selve den stillede opgave. Det handler ligeledes om at kunne tænke kreativt og indstille sig på, at ændre i arbejdsprocessen, så man udnytter den tildelte bedst muligt. KOMMUNIKATIONSMODELLEN En relevant kommunikationsmodel i denne sammenhæng og som vi har benyttet os af - er denne model som tager udgangspunkt i Laswells teori omkring kommunikation. Her ser vi en udvidet kommunikationsmodel, hvor både formål, støj, medie og effekt er tilføjet til den grundlæggende kommunikationsmodel med blot afsender, budskab og modtager. Med denne model har det været lettere for os, at specificere de enkelte elementer i hele processen. 6

7 ARGUMENTATION FOR DESIGNPRINCIPPER Vi har i vores design inddraget nogle af de designprincipper vi har lært om her på første semester. Vi har valgt at bibeholde store dele af det oprindelige design fra siden, da vi mente det var et flot, æstetetisk design, som var overskueligt i henhold til designprincipperne, men hvor sidens struktur generelt var et stort rod. Principperne om ensartethed har vi brugt i bl.a topnavigationen, samt hovednavigationen. Her ses det at alle links er ens i forhold til tekststørrelse, farve, og afstand (reglerne om ensartethed og nærhed). Søgefunktionen som var en del af den oprindelige side, har vi valgt at fjerne, da vi har fjernet utroligt meget overflødig indhold, og dermed gjort siden mere overskuelig. Desuden er en masse menupunkter skåret ned til få punkter i stedet for. Man er højst 2 klik fra hvad man vil finde, og hermed er siden gjort meget mere brugervenlig, og vi mener derfor at sidens navigation er blevet så enkel, at en søgefunktion er overflødig. Principperne om lukkethed har vi også gjort brug af. Især i nyhedssektionen på forsiden, fremgår det tydeligt. Hele nyhedsboksen er rammet ind, hvorefter det er opdelt yderligere (en header i en anden farve, og herefter nyhedspunkterne, som er adskilt af en ruler, og med et billede for hver nyhed). 7

8 KODE-EKSPEMPLER <div id= footer ><!--Footer start--> <div class= inner > <div id= kontaktfooter > <h1>kontakt</h1> <p>søren Kierkegaards Plads 1<br /> 1221 København K<br /> <a href= a><br /> Telefon <br /> CVR nr </p> </div> <div id= aabningstider > <h1>åbningstider</h1> <p>mandag-lørdag <br /> & <br /> Lukket søndage<br /> Lukket alle helligdage</p> </div> </div> </div><!--footer slut--> Vi har taget udgangspunkt i vores footer, hvor vil vil forklare lidt om html- samt css-delen. Vi har en footer på vores site, hvor man kan finde oplysninger som kontakt, og åbningstider. Vi har lavet en overordnet div, som vi har kaldt footer. Inde i footer har vi yderligere lavet to div er. En div vi har kaldt kontaktfooter og en med navnet aabningstider. Selve footer har vi desuden givet en class= inner. Dette er kun fordi at vi vil holde alt indhold inden for en max bredde af 960px. Dette er defineret i vores CSS-dokument. Kontakt ville vi gerne have til at være ude i venstre del af footer, og åbningstider i højre side. Det har vi kunne opnå i CSS, da HTML kun indeholder informationer (tekst, billeder mm.) Hvor man i CSS kan bestemme udseende og placering af denne info. 8

9 #kontaktfooter { margin-top: 10px; position:relative; width:200px; float:left; Så kontakt altid flyder ud i venstre side, af den div den ligger indeni. border-left: 1px solid #333; border-right: 1px solid #333; padding-left: 10px; height:125px; } #aabningstider { margin-top: 10px; width:200px; height:125px; float:right; Så åbningstider altid flyder ud i højre side, af den div den ligger indeni. border-left: 1px solid #333; border-right: 1px solid #333; padding-left: 10px; } PROCESSBESKRIVELSE Inden påbegyndelse af projektet, lavede vi en masse forundersøgelser, som skulle afgrænse vores område og gøre os klart hvad den egentlige opgave ville kræve. Vi fandt i fællesskab ud ad hvad vi syntes der var godt, hvad der var skidt og hvad der eventuelt skulle fjernes fra sitet i et redesign. Vi lavede en hurtig grovsortering, og fjernede alle overflødige elementer på sitet. Vores formål var at kommunikere klart og tydeligt til brugeren. Vi besluttede i projektets begyndelse, at vi løbende ville holde møder med updates på hele arbejdsforløbet, så eventuelle problemer og fremskidt blev klart for alle. Efterfølgende fik vi tildelt hver vores ansvarsområder. For at specificere hvad vi helt nøjagtig ville foretage os i vores redesign, satte vi os sammen i gruppen og lavede en mockup i photoshop. 9

10 Her havde vi mulighed for at se hvordan det nye site ville fungere på det rent æstiske plan. Herefter gik kodningsprocessen i gang. Undervejs i forløbet blev de rettelser der altid er nødvendige i et webdesign foretaget. Som slut på projektet har vi valideret vores website med succes i w3c validator. Det skulle gerne gøre siden tilgængelig i alle webbrowsere. EVALUERING Projektet er forløbet godt og gnidningsfrit, og vi har under hele forløbet været meget enige om målet for projektet. Seriøsitet og målrettethed er en vigtig faktor, for at kunne bibeholde gejst og engagement i gruppesammenhæng. Vi har overholdt alle vores deadlines, til trods for at nogle af medlemmerne i gruppen har vist mindre engagement end andre. Vores kommunikation har fungeret fint og vi har holdt hinanden opdateret gennem hele projektforløbet. Vi er meget tilfredse med det færdige resultat. FLOWCHART 10

11 GANTT-KORT 11