Projekt 3: User friendly website Soerenk.dk re-design



Relaterede dokumenter
Portfolio redesign. Kia Dahlen! 1. semester eksamen! MUL-A 2013! !!!

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

Portfolioudvikling. Line la Fontaine. Multimediedesigner

EKSAMENS PROJEKT DECEMBER 2013 JANUAR Lærere: Thomas Hartmann. Jesper Hinchely. Ian Wisler-Poulsen. Morten Rold. Merete Geldermann Lu tzen

Stine Dorry Meulengracht Madsen Rapport Multimedie og kommunikation

Portfolio Redesign Kamilla Klein 1. Semester eksamen

Indledning. Projektplan. Gantt chart

Hvordan kan vi designe et website til studenterorganisationen Analog café?

REDESIGN AF PORTFOLIO 16. jan. 2015

MONIQUE BOOTS-NIELSEN / GRAFIKER

Portfolie Redesign. Forord. Det tekniske. Tema ide. Css. opløsning.

Projekt 3 - Website.

PORTFOLIO SEBASTIAN NYHOLM. Eksamensprojekt. 1. Semester

Analyse af Cinnobershop.dk

Grafisk produktion & workflow

Grafisk Design 70% Skitser

Opgaven. Brugervenlighed. Designparametre. Følgende krav var : Research. Målgruppe. Konklusion. sitet ikke bliver for mørkt.

MÅLGRUPPE Alle typer af boligselskaber, ejer- og andelsforeninger samt div. institutioner (store som små) på Sjælland. Ikke private kunder.

Kend dine brugere. Om brugertest. 2 sem., feb Multimediedesigner, København nord

GRAFISK PRODUKTION & WORKFLOW. Endotest website

Grafisk design. Ide. Designprocess. Målgruppe

Hjemmeside redesign af Dansk Jagt- og Skovbrugsmuseum

Grafisk Design. fra idé til visuelt udtryk Benett

HHBR. Design. Kvalitets vurdering. Opgaven. Målgruppe og Budskab. De Grafiske valg

Responsive design Der er ingen breaking points på hjemmesiden. Det er et astatic website, da det ikke er responsivt.

GRAFISK DESIGN. Diner no. 34 Hjemmeside + Visuel identitet

GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen

WORKFLOW & PRODUKTION

KALAS FESTIVAL. Link til hjemmesiden: Laura Lundby Gravesen

FRISØR VEST. Link til hjemmesiden: Frisorvest.github.io. Lavet af: Aleksander, Benjamin, Line & Cathrine

Denne rapport har til formål at redegøre for tilblivelsen af hjemmesiden beliggende på domænet, Der refereres fra nu af blot

Udover denne simple tidsplan har jeg også lavet et GANTT-kort for at vise den reelle tid jeg har brugt på hver opgave.

Projekt 2, Bannere. Reklamebanner og landing-page for kulturnatten Vejledere: DSK, MORO, FDTA, IWPO

Et krav til portfolien var at det skulle udvikles fra bunden uden brug af CSS-frameworks, samt HTML og CSS skulle valideres uden fejl.

Grafisk Design. Dansk Center For Organdonation

Målgruppe Mænd og kvinder i alderen 30 til 60 år, som er interesret i selvudvikling og ønsker et sundt arbejds- og privat liv.

GRAFISK DESIGN LOOKBOOK TIL KLITMØLLER COLLECTIVE

ELEMENTER Jeg vælger fonten Raleway, som er en af Googles mange gratis webfonte. Det er en grotesk skrift, som især bruges til websites, da de på

Delaflevering. Webdesign og webkommunikation, (hold 2), IT Universitetet, f2011. Kim Yde, Kenneth Hansen,

Grafisk Workflow. hovedforløb 2

Grafisk. Workflow. Side 1

Produktbeskrivelse - Grafisk workflow

COPENHAGEN. Opgaven. Kunden. Målgruppe. Layout 1. GRAFISK DESIGN // METTE-MARIE RANDSKOV

WOODKID. The Golden Age. Banner Projekt - 1 Semester, CPH Business, MUL-A13E. Casper Birch Buchberg, Natahlie Heiden & Sebastian Nyholm

KT OR LOW PRODUKTION // WORKFLOW

primær er informativ og dermed appellerende til fornuften og rationaliteten.

3. Semester Mul-A PROJEKT 3 FUNDING. Louise Marie Bonke Charlotte Bruhn Stine Dorry Meulengracht Madsen.

det færdige resultat

Indholdsfortegnelse Opret engelsk version af hjemmesiden... 2

srum Fritidsaktiviteter : 1. Semester. Multimediedesigner Projektstart: 17/ Aflevering: 4/

T o b i a s W e x i ø S o n n e MultiMedieDesigner CPH-Business 1/26

Afsluttende semesterprojekt - 1. Semester

Grafisk workflow. Se siden her:

GRAFISK DESIGN DOTHOST HJEMMESIDE

Dokumentation. Workflow. Grafisk produktion. Trine Alexandersen 1. hovedforløb

Grafisk Workflow. Website til European Blues Challenge

Rapport. Udarbejdet af: Mayianne Nøks Pedersen. Skole login: knmape68.

P ORTFOLIO 2017 MLTIMEDIA DESIGN M ARIE EGEBERG MUL B Marie Egeberg

Indhold. Grafisk workflow 3 Procesbeskrivelse 4 Inspiration 5 Skitser 6 Flowchart 7 Typografi og farver 8 Skelet 9 Storyboard 12 Html, css og seo 16

Manual til Wordpress. 1. Log ind på din Wordpress-side. Indhold: Sådan opdaterer du din hjemmeside i Wordpress.

Grafisk Design KOM/IT. Kevin, Christoffer & Thor

Disse har alle sammen hjulpet til at skabe min hjemmeside. Ved at give inspiration og få ideerne ned på papir, før de blev vist til omverdenen.

Gruppe 9 Visuel Interface Design, 27/09/2011

Projekt om Københavns Musikteater

CSR. 2. Semester 1. projekt Udarbejdet af MulA: Anders Lauridsen. Casper Christiansen

Redesign af Cinnober. Analyse af hjemmesiden Cinnober

GRAFISK DESIGN SVENDEPRØVE Redesign & kodning af website PETER HOLM SVENDEPRØVE 2013 / 5

grafisk design Se webappen på din mobil

GRAFISK PRODUKTION WORK- FLOW DREAMWEAVER CS5 DESIGN & KODNING AF LANDING PAGE. a.link, a.hover, a.visited. Wrapper. paragraph CSS. h1 h2.

1 Robbins, Jennifer N.: Learning Web Design, s. 41

Ugeopgave uge 40 Hold A

Grafisk design. Filmblad til tablet

WORKFLOW & GRAFISK PRODUKTION

Lav en hjemme side der kan sælge fly billetter til en stor i Europa.

Kommunikation/IT A 2014

Portfolie Redesign. Multimediedesigner CPH Business 1. sem. eksamensprojekt - Clmul-b12e Januar Jens Jákup E.

IDENTIFON. Emil Hauberg, Jakob Christoffersen, Ninette Nielsen og Senia Lundberg

Headeren er for stor når man kommer ind på siden. Det virker irriterende at man skal scrolle for at få indholdet vist.

CSS CSS CODEING CODEING COLOUR HTML PORTFOLIO RAPPORT //2016 MARIE EGEBERG MULTIMEDIE DESINER MULB

Typografi og ombrydning 1. hovedforløb Julia Igaard Abrahamsen

GRAFISK PRODUKTION OG WORKFLOW. Hjemmeside til Team Brügger

Budskab Denne nyhedsmails budskab er, at der er kommet nye kataloger ud og man kan se meget mere på hjemmesiden.

1 // Grafisk design. Hjemmesiden før. Kunde. Produkt. Opgave. Målgruppe. Bogforlaget Frydenlund A/S.

GRAFISK DESIGN. Kenneth Friis Petersen

GRUPPE 5 Line - Nanna - Thea - Sarah

GRAFISK DESIGN. webdesign af pl.dk

Grafisk Design. Facebook: Opdatering fra en Teenager en typisk fredag aften. Kilde: Min kusines datter.

GRAFISK DESIGN G H1 H2 H3 HOVEDFORLØB 1 AARHUS TECH 2013 H1 SIDE 1 / 11

Vi er ikke som de andre. FARVEOPLÆG OG MOCKUP PÅ IDENTITET

Naja Schlüter Roskilde Tekniske Gymnasium 26/ Interessentanalyse

Projekt 1 Re-design af Odense Bunkermuseum

Delaflevering: Webdesign og webkommunikation. Organisation: Københavns Erhvervsakademi. Af Silke Brewster Rosendahl (hold 1) og Marie Anne Svendsen

Multimediedesigner. Identitet. Adventuresport

Transkript:

Projekt 3: User friendly website Soerenk.dk re-design Mul-A, Gruppe 3, URL: http://bruhn-design.dk/index.aspx Annemette Bruhn cph41.webkn.dk Caroline Vikke Lundhild Madsen cph57.webkn.dk Julia Brøndum Emborg cph45.webkn.dk Jonna Gaardbo cph46.webkn.dk Lærere: Morten Rold, MORO Merete Lindemann, MLI Ian Wisker-Poulsen, IWP Ditlev Vestergaard Skanderby, DVS

Indholdsfortegnelse Indledning Projektbeskrivelser Gantt kort Design brief Argumentation for designbeslutning Kommunikationsanalyse Flowchart Eksempel af koder Process og evaluering Litteraturliste Bilag: - Gantt - Kommunikationsmodel - Flowchart side 3 side 3 side 3 side 3 side 4 side 5 side 8 side 8 side 9 side 10 side 11 side 13 side 14

Indledning: I henhold til projekt tre, har vi multimediedesignstuderende på CPH Business Academy Lyngby, fået stillet til opgave at redesinge hjemmesiden www.soerenk.dk. Formålet med denne opgave er at skabe et fuldt funktionelt W3 valideret site. Derudover skal sitet være opbygget således at det er let navigerbart for brugeren. I dette projekt er der desuden stor fokus på at tilegne sig individuel læring, gennem velfungerende gruppearbejde. Projektbeskrivelse: I dette projekt har vi fået til opgave at redesigne restauranten Søren K s hjemmeside, for at gøre den mere overskuelig for potentielle kunder. Vi vil bruge tekst og billeder fra den oprindelige hjemmeside, men selve HTML og CSS kodningen har vi selv lavet fra bunden. Vi har til opgave at overveje og diskutere hvilket design vi vil bruge til hjemmesiden. Desuden skal vi lave to forskellige brugertest på hjemmesiderne og udarbejde en rapport over vores projekt, og lave to Gantt diagrammer - et til første omgang og et endeligt færdigt diagram. Gantt: Da projektet startede udarbejdede vi et Gantt diagram for at skabe et overblik over hele projektet. Vi har sat opgaver og milepæle ind, så vi har haft god tid til hver del af projektet. Til slut laver vi et Gantt diagram med de endelige datoer og tider for arbejdsprocessen. *bilag Design Brief: Søren K Profil: Søren K er et nordisk brasserie, som åbnede for første gang i 1999. Dens beliggenhed er i Den sorte diamant, den nye tilbygning til det kongelige bibliotek. Omgivelserne og design er af dansk eller nærmere sagt, århusiansk arkitektur. (Schmidt, Hammer og Lassen). Søren K er navngivet efter Søren Kirkegaard. Søren K er en tidstypisk restaurant og startede ud med en agenda om Det Fondløse Køkken hvilket siden 2007 er skiftet til det Skruppelløse køkken. Formål: Formålet med re-designet er at skabe en renere struktur, som passer til Søren K s ry og ide. Hjemmesiden skal være mere målrettet til dens kunder. Sitet skal kunne reflektere den oplevelse kunden får når de besøger Søren K og være tiltalende for den aktuelle målgruppe og kunne motivere de potentielle kunder. Kunden skal kende Søren K s menu og vide hvilke kvaliteter menuerne er baseret på. I sidste ende skal sitet skal få flere kunder til at bestille bord, evt. via hjemmesiden. Målgruppen: Søren K har en bred målgruppe, idet at Søren K vil være et midtpunkt i Købehavns kulturliv. Talen er om kvinder og mænd, omkring de 25-60 år. Målgruppens indkomst ligger fra middel til høj. Primært er det folk med eller som studerer på højere uddannelser, hvis man har i tanke om hvilke mennesker besøger biblioteket. Målgruppen kommer primært fra indre København og sekundært fra Københavns omegn og turister. side 3

Målgruppen kan endvidere defineres som den bevidste, moderne, kultiverede type, der sætter krav og foretrækker kvalitet frem for kvantitet. Stikord som skal indgå i det endelige design Design eksempler Sprog: - Dansk. Farver: - sort - hvid - grå Tekst: - simple - kortfattet - oplysende - relevant indehold - Sans Serif Atmosfære: - billeder, video fra restau ranten - rene linjer - enkel - dynamisk - moderne - Cool modern stil Designargumentation: Baggrunden for vores redesign, bygger på en minimalistisk designæstetik. Derudover har vi i vores design også lagt vægt på at det for brugeren skal være nemt at navigere rundt på sitet. Brugeren skal konstant kunne lokalisere sin placering, samt ved hjælp af stier at kunne gå tilbage til forrige eller, hvis ønsket, udgangspunktet. For at understøtte vores designargumentation, har vi valgt at benytte os af nogle relevante designprincipper. Designprincipper kan for brugeren være altafgørende, idet de danner grundlaget for hvorledes brugeren intuitivt anvender og afkoder designet. Genkendelighed: Med udgangspunkt i det oprindelige site, har vi i gruppen valgt at bibeholde en del genkendelige elementer i udarbejdelsen af designet. Dette omfatter blandt andet placering af logo, søgefelt, menupunkter mm. Derudover har vi også valgt at understøtte sitets brand security, ved at fastholde sitets æstetik. På denne måde har brusgeren stadig en forsikring om opretholdelsen af serviceniveau. Ved at anvende princippet om genkendelighed, sikrer vi de identificerbare elementer i designet. Vores interne genkendelighed optræder ved at bibeholde farver, samt billeder og eventuel tekst. Dertilsvarende optræder vores eksterne genkendelighed i vores placering af søgefelt, logo, menupunkter mm. På denne måde kan vi sikre at brugeren får maksimalt udbytte i afkodningen af designet. Enkelthed: Udover genkendelighed, har vi i vores design også lagt fokus på enkelthed. Førhen var sitet proppet med mange forstyrrende og svært håndterbare funktioner, der gjorde det svært for brugeren at navigere rundt på sitet. Især menupunkterne med tilhørende underpunkter, indeholdte et væld af tekst, der for brugeren var uden betydning. Ved at fokusere på enkelthed, skærer man således alt irrelevant indhold fra og erstatter side 4

det med mere overskuelige og informative oplysninger. Farver: Brugen af enkelthed kommer desuden også til udtryk i designets minimalistiske fremstilling. Ved at benytte kontraster såsom hvid, sort samt grå, tillægges sitet et neutralt udtryk. De neutrale kontraster har vi desuden også anvendt i vores grupperede bokse, for at forstærke den visuelle identitet hos restauranten Søren K. Ved at bruge neutrale farver har brugeren også lettere ved at overskue sitet. Havde vi valgt stærke primære eller sekundære farver, kunne dette for brugeren have virket synsforstyrrende. Derudover ville det desuden heller ikke harmonere med sitets originale æstetik. Ensartethed: Brugen af farver, går også igen i vores princip om ensartethed. For os er det vigtigt at brugeren kan se en sammenhæng mellem forside, samt alle andre aspekter af websitet. Der skal være en rød tråd i designet, da det for brugeren skaber sammenhørighed. Vi har anvendt samme typografi, tydeliggjort forskellen mellem overskrifter og brødtekst, samt begrænset mængden af variation i forhold til brugen af farver. Lukkethed: I henhold til brugen af farver, kan man også nævne brugen af lukkethed. Ved at afgrænse tekstområder med brugen af farver, skaber man mere lukkethed på sitet. Denne lukkethed hjælper til at danne grupperinger og klargøre for brugeren hvad der er sammenhørigt. Luft: Når vi tilføjer elementer til et design, så fjerner vi luft. Hvis et element skal have meget opmærksomhed skal der være meget luft, hvis ikke skal der knapt være så meget luft. Elementerne må ikke komme for tæt på kanten, da de derved virker klemt og mindre harmoniske. På vores redesign har vi gjort brug af princippet om luft, ved at lave mellemrum mellem tekstbokse, menubokse mm. som tidligere nævnt, giver dette mere luft og overskuelighed på sitet. Den visuelle oplevelse af sitet bliver for brugeren mere harmonisk. Loven om linjer: Ved at anvende loven om linjer, sikrer vi sitets professionelle udtryk. Ved at opstille eksempelvis det tekstmæssige med rette linjer, skabes der mindre støj på sitet. Hvis vi havde opstillet vores tekst mere rodet, ville brugeren skulle bruge megen energi på at skabe sig et æstetisk overblik. Kommunikations analyse Formål: Formålet med hjemmesiden www.soerenk.dk er at formidle buskabet om at Søren K findes og hvad de beskæftiger sig med. Du kan se deres menuer, historie samt bestille bord og se hvilket stil og atmosfære du kan opleve hvis du vælger at besøge dem inde på den Sorte Diamant. Struktur på sitet: På sitet kan du vælge imellem to sprogvarianter. Der er videre kontakt oplysninger, nyhedsbrev, personalelog-ind, rapport og søgefelt. Et hak længere nede ser du Søren K logo, sitets menu struktur, bestående af deres menuer, side 5

arrangementer, om os info, link til Café Øieblikket samt et bestil bord link. Derefter kommer en brødkrummestig. Dernæst er den et slideshow med billeder fra restauranten, som linker til diverse felter på sitet. På sitets centrum er der en bjælke hvor du kan tilmelde dig deres nyhedsbrev. Igen kommer der billeder som linker til diverse felter på sitet, samt en film. Nederst er der generelle oplysninger, som adresse, åbningstider, salgskontor og bankoplysninger. Her kan vi bliver enige om at der er meget information, som ikke er de primære oplysninger som kunden søger ved at klikke sig ind på sitet. Man kan forestille sig at dette kan nedsætte brugervenligheden, idet at der er mange felter som man skal gennemgå inden man kan være sikker på hvilket objekt man skal klikke sig videre på. Specielt hvis man har en mindre erfaren bruge i tankerne, kunne sitet hurtigt blive uoverskueligt da der er for mange muligheder hvilet også kan gøre det sværere at kunne huske hvorhenne man fandt de ønskede oplysninger. Opbygning: Sitet er opbygget af rene linjer. Der er klar afgrænsning med lukkethed, med at felterne er lukket inde i bokse. Der er også klar afstand imellem felterne, som giver klar besked om hvilke punkter hører sammen. Sitet er opbygget med parallelle linjer i den vandrette retning. Disse effekter tiltaler i en vis grad øjet og giver en fornemmelse af klarhed og rolighed. Man kunne måske forestille sig at det ville give en endnu bedre fornemmelse hvis sitet også var opbygget af lige linjer i den lodrette retning. Sitet er opbygget med få farver, sort, hvid og grå er de dominerende farver, hvilket i norden afspejler klasse, god stil og den enkle minimaliske stil. Hvid: renhed Grå: elegance Sort: sofistikeret De har valgt at bruge blå som kontrastfarve. Vi ser den blå farve på bestil bord og i videoens volumen. Hvilket ikke helt fungerer så iøjnefaldende som nogle andre farver ville have gjørt. Men deres intuition er nok mere farvens betydning, som afspejler fordybelse, stabilitet og ro. http://www.visible.dk/videnom/ Farvers-betydning.php Billederne holdt i farver som giver sitet lidt friskhed samt at du kan få en bedre oplevelse af hvad billederne viser. Der spiller den enkle baggrund også ind hvor man tit får et bedre indtryk af billedet hvis der er sort i baggrunden. Modtager: Modtageren er mænd og kvinder, omkring 25 60 år. Middel til høj indkomst, under uddannelse eller uddannede mennesker. Kvalitetsbevidste og stiller krav. Selvstændige og kultiverede mennesker. Sitet rammer delvist godt sin målgruppe, med det at farver og struktur er rimelig godt gennemtænkt. Sitets basestruktur er enkel nok når man tænker på farver, og opdelingen af de forskellig felter. Men, når man så har i tankerne, at målgruppen er krævende og kritisk at tingene skal være enkle, fungere og der er ikke plads til unødvendigheder; så halter den lidt med al informationen som er proppet ind på forsiden. side 6

Det går lidt imod deres designprincip om enkelthed som skal signalere elegance og rolighed med at lave sitet rodet med al den sekundære information. Dette er også en målgruppe som, er tager hurtige beslutninger, så de kan hurtigt vælge at forlade sitet igen om de ikke finder de oplysninger de har brug for med det samme. Fordelen er dog at dette tit er erfarede websurfere, og flere ville hurtigt kunne finde den blå knap og muligvis menuen, uden at skulle kæmpe sig igennem al den overflødige information. Men for at opnå den optimale virkning, ville basal info som menu, adresse, åbningstider og bestil bord være nok til at fylde forsiden. Så ville modtageren selv kunne vælge om de var interessere i at vide mere om de andre felter på sitet, hvilket generelt ville tiltale målgruppens præferencer angående frihed til at vælge til og fra. Budskabet: Budskabet som hjemmesiden prøver at formidle er lidt det samme som formålet, men med en dybere forklaring. Hjemmesiden vil fortælle os, udover dens menu, åbningstider osv. at dette er en restaurant som er tildelt diverse priser og anerkendelser for dens mad. At restauranten har en interessant historie og nogle konkrete værdier. At Søren K kan tilfredsstille visse prioriteter som tiltaler en bestemt målgruppe. Sitet har valgt at bruge informative metoder, gennem ethos, som tiltaler brugerens tillid. Der ligger der megen information om priser og anerkendelser som skal overbevise/informere brugeren om at det er hold i deres statement. Sitet bruger også pathos som tiltaler brugens sanser og følelser. Dette ser vi med at de har mange billeder, som er taget i reelle situationer, af f.eks. mad der bliver serveret, stemning og omgivelser. Dette gør de ved at henvise til forskellige artikler og anmeldelser. De gør også brug af video fra køknet og masser af billeder. Effekten: Effekten alt i alt af hjemmesiden er at man kan godt forstå hvilken kundegruppe og hvilken status Søren K prøver at ramme. Men det er ikke nok, idet at sitet ikke bliver helt så troværdigt som man ville ønske. De fremstår lidt som en wannabe stilet restaurant. Hjemmesiden er baseret lidt for meget på selvros. Selvfølgelig skal brugeren vide at dette er en anerkendt restaurant men det ville være mere elegant at pakke denne information lidt mere ind og lægge den lidt mere i baggrunden, hvilket burde passe bedre til Søren K s ry. Det klæder ingen at fremstå som selvfed og det tiltaler ikke målgruppen. Der er i første omgang tale om envejs kommunikation Men med muligheder så som at bestille bord, e-mail og telefonnummer er der mulighed for at udvikle tovejs kommunikation, idet at modtageren vælger vende tilbage til afsender med eventuel tilbagemelding. Vi har opsat en kommunikations model - som viser den kommunikative opbygning. Der er tale om en afsender (Søren K), der vil sende et budskab og vil formidle det via et medie (hjemmesiden). Der er dog støj, imellem medie og modtager, som kan påvirke modtager side 7

opfattelse af budskabet. Støj kan definerest som alt fra modtagers fysiske omgivelser til dens færten på nettet. Derfor er det vigtigt at kunne dæmpe så meget af den støj som vi nu har mulighed for - for at buskabet skal trænge igennem. Der opstår siden en effekt, fra modtager, som videreførest til medie, idet om modtager vælger at tage kontakt til afsender, eller om modtager forbliver passiv, hvilket resulterer i om afsender modtager feedback. Firkanterne symboliserer de blokkeringer der kan forekomme, i formidlingen af budskabet. * Bilag Flowchart Vi har tegnet er flowchart, over vores informationsarkitektur og stuktur af vores re-designede side. Vi har lavet en kortsorteringstest, som beviste at vores menu punkter og opsætning er relevant og opsat på en brugbar og fornuftig måde. *Bilag Eksempel af HTML kode: Siden er bygget op i asp.net, så der er brugt en master page til at holde på alt det som ikke skal være dynamisk og flere.aspx sider, som er de dynamiske sider. Dette gør det en del nemmere at arbejde med mange sider, da man ikke behøver ændre en lille ting på alle siderne, men kun på master page, hvis en ændring skulle forekomme. <div class= menuwrapper > <div class= menubox > <ul> <li><a href= bestil.aspx >Bestil Bord</a></li> <li><a href= resturanten.aspx- >Restauranten</a></li> <li><a href= arrangementer.aspx- >Arrangementer</a></li> <li><a href= nyheder.aspx >Nyheder</a></li> </ul> <div class= cafebox > <p>besøg vores egen<br /> <a href= http://www.oieblikket. dk/ >Cafe Øjeblikket</a></p> <div class= infobox > <div class= openbox > <h3>åbningstider</h3> <p>mandag-lørdag<br /> 12.00-16.00 & 17.30-22.00<br /> Lukket søndage<br /> Lukket alle helligdage</p> <div class= adrbox > <h3>søren K</h3> <p>søren Kierkegaards Plads 1<br /> 1221 København K<br /> E-mail: soerenk@kb.dk<br /> Telefon 33 47 49 49</p> Herover kan man se vores menu i HTML koder. Vi har valgt at bygge med en wrapper rundt om, altså en stor boks som holder på de mindre bokse. Denne metode er brugt på hele siden. Klasse navnene er sigende navne, så det er nemmere at huske på og skrive det rigtigt. Hele siden er sat ind i mindre bokse, som allerede ligger inde i større bokse, hvilket også understøtter loven om lukkethed. Man får en side 8

klar følelse af hvad der hører sammen. <form class= bestilform method= get action= godkendtbord.aspx > <div class= inputwrapper >Fornavn: <input class= inputbox type= text name= Fornavn /> <div class= inputwrapper >Efternavn: <input class= inputbox type= text name= Efternavn /> <div class= inputwrapper >Telefon: <input class= inputbox type= text name= Tlf /> </ div> <div class= inputwrapper >Email: <input class= inputbox type= text name= email /> <div class= inputwrapper >Dato: <input class= inputbox type= date name= dato /> <div class= inputwrapper >Klokken: <input class= inputbox type= time name= tid /> </ div> <button class= formbutton >Videre</button> </form> Herover kan vores bestillings form ses, som er lavet som en dummy, altså at den er der og man kan bruge den, men den sender ingen data til eller fra en server. Der en masse inputfelter som har forskellige navne udfra hvad det er som brugeren skal skrive ind i dem. Til sidst er der en knap som sender en videre til en bekræftelsesside, som fortæller brugeren at bestillingen er gået igennem. Beskrivelse af processen og evaluering: I dette projekt har vi primært arbejdet med kodning af Søren K s hjemmeside, herunder har vi lavet et Flowchart, til at få bedre overblik over menuerne og siderne på hjemmesiden. Til sidst har vi taget nogle eksempler på koder fra vores hjemmeside, og skrevet en beskrivelse til, for at give en forståelse af vores valg på hjemmesiden. Desuden har vi diskuteret hvordan designet skulle være på hjemme-siden. Vi har snakket om hvordan udtrykket skulle være på vores side, og har udarbejdet en kommunikations analyse hvor vi har brugt KOMMUNIKATIONS MODEL Vi har brugt forskellige værktøjer til at undersøge hvordan den originale hjemmeside fungere og hvordan vores hjemmeside fungere i forhold til brugbarhed og logik, herunder har vi kigget på den oprindelige side og lavet en ekspertvurdering for at finde fejl og mangler på den eksisterende hjemmeside, og brugt dette så vi ikke selv begår samme fejl. Desuden har brugt kortsorterings testen med en testperson, for at finde ud af om arkitekturen på vores hjemmeside fungere optimalt. Derved har vi fundet ud af om der var nogle problemer med vores menupunkter. Efter første dag blev der udarbejdet et Gantt diagram (Se bilag), så vi hurtigt kunne få overblik over hele projektets forløb. Dette har fungeret godt, dog har vi ikke altid overholdt alle milepæle, og har derfor udarbejside 9

det et endeligt Gantt diagram (se bilag). Til slut har dette været en meget lærerig process, både i forhold til at tage design beslutniger, kodning, men også i forhold til at arbejde i en ny gruppe hvor ideerne og indstillingen til projektet er anderledes. Alt i alt synes vi at vores produkt er blevet rigtig godt og anderledes fra udgangspunktet. Litteraturliste: Gregersen, Ole & Wisler-Poulsen, Ian: Usability, Grafisk litteratur (Danish class only) Lynch & Horton: Web Style Guide, 3rd edition, ch. 1: http://webstyleguide.com www.useit.com/papers/heuristic/heuristic_list.html www.useit.com/papers/heuristic/heuristic_ evaluation.html www.useit.com/papers/heuristic/heuristic_list.html http://www.w3schools.com/css/css_image_ gallery.asp/ http://matthewjamestaylor.com/blog/perfect multi column liquid layouts http://www.htmldog.com/articles/tabs/ side 10

Gantt Diagram 1 Projekt3 0 t3 09-11-2012 iagram Ganttdiagram Navn Navn Start dato Introduktion 05-11-12 05-11-12 05-11-12 05-11-12 og hjemmeside skitser Ekspertvurdering og hjemmeside skitser 06-11-12 06-11-12 06-11-12 06-11-12 se af hjemmeside og påbegyndelse Deadline for på skitse kodning af hjemmeside af hjemmesi07-11-12 og påbegyndelse på kodning af hjemmesi07-11-12 07-11-12 07-11-12 og noter til kommunikations Gantt analyse diagram 1 og noter til kommunikations 08-11-12 analyse 08-11-12 08-11-12 08-11-12 Gruppemøde 09-11-12 09-11-12 09-11-12 09-11-12 munikations analyse og design Deadline brief for kommunikations analyse 13-11-12 og design brief 13-11-12 13-11-12 13-11-12 Skrive rapport 15-11-12 15-11-12 15-11-12 15-11-12 dning Eksempler på kodning 29-10-12 29-10-12 cessen og evaluering Beskrivelse af processen og evaluering 29-10-12 29-10-12 meside og rapport Deadline for hjemmeside og rapport justeringer i rapport Korrektur og div. justeringer i rapport 21-11-12 21-11-12 21-11-12 21-11-12 r på hjemmeside Endelige rettelser på hjemmeside Afleve 23-11-12 23-11-12 23-11-12 23-11-12 Start dato Uge 45 Uge 45 Uge 46 Uge 46 Uge 47 Uge 47 Navn Start dato Slut dato Introduktion 05-11-12 05-11-12 Ekspertvurdering og hjemmeside skitser 06-11-12 06-11-12 Deadline for skitse af hjemmeside og påbegyndelse på 07-11-12 07-11-12 kodning af hjemmeside Gantt diagram 1 og noter til kommunikations analyse 08-11-12 08-11-12 Gruppemøde 09-11-12 09-11-12 Deadline for kommunikations analyse og design brief 13-11-12 13-11-12 Skrive rapport 15-11-12 15-11-12 Eksempler på kodning 29-10-12 Beskrivelse af processen og evaluering 29-10-12 Deadline for hjemmeside og rapport Korrektur og div. justeringer i rapport 21-11-12 21-11-12 Endelige rettelser på hjemmeside Aflevering 23-11-12 23-11-12 45 6 7 8 9 12 13 14 15 16 19 20 21 22 23 45 6 7 8 9 12 13 14 15 16 19 20 21 Projekt3 09-11-2012 Tasks 2 3 side 11

Gantt Diagram 2 Projekt3 22- ramganttdiagram Navn Start dato Navn Start dato Slut dato 05-11-12 05-11-12 05-11-12 05-11-12 06-11-12 06-11-12 06-11-12 06-11-12 af hjemmeside og Deadline påbegyndelse for skitse på kodning af hjemmeside af side og påbegyndelse 07-11-12 på kodning af side 07-11-12 07-11-12 07-11-12 noter til kommunikations Gantt diagram analyse 1 og noter til kommunikations 08-11-12 analyse 08-11-12 08-11-12 08-11-12 Gruppemøde 09-11-12 09-11-12 09-11-12 09-11-12 Skrive rapport 15-11-12 15-11-12 15-11-12 15-11-12 ing Eksempler på kodning essen og evaluering Beskrivelse af processen og evaluering ring User test Kortsortering alyse og design brief Kommunikations færdig analyse og design brief færdig Gruppemøde 2 Korrektur Projekt3 steringer i rapport og div. justeringer i rapport 21-11-12 21-11-12 21-11-12 21-11-12 å hjemmeside Endelige rettelser på hjemmeside port færdig Hjemmeside og rapport færdig Aflevering Tasks 23-11-12 23-11-12 23-11-12 23-11-12 2012 2012 22-11-2012 Uge 44 Uge 44 Uge 45 Uge 46 Uge 47 Slut Uge dato 45 Uge 46 Uge 47 Uge 48 29-10-12 05-11-12 12-11-12 29-10-12 05-11-12 12-11-12 26-11-12 Navn Start dato Slut dato Introduktion 05-11-12 05-11-12 Ekspertvurdering og hjemmeside skitser 06-11-12 06-11-12 Deadline for skitse af hjemmeside og påbegyndelse på 07-11-12 07-11-12 kodning af side Gantt diagram 1 og noter til kommunikations analyse 08-11-12 08-11-12 Gruppemøde 09-11-12 09-11-12 Skrive rapport 15-11-12 15-11-12 Eksempler på kodning Beskrivelse af processen og evaluering User test Kortsortering Kommunikations analyse og design brief færdig Gruppemøde 2 Korrektur og div. justeringer i rapport 21-11-12 21-11-12 Endelige rettelser på hjemmeside Hjemmeside og rapport færdig Aflevering 23-11-12 23-11-12 3 side 12

Flowchart re-design side 13

Kommunikations model side 14