kollegiekokkenet.tmpdesign.dk Side 1
Indholdsfortegnelse Forord 3 Problemformulering 4 Udviklingsmetode 5 Tidsplan 6 Målgruppe 7 Design brief 8 Logo 10 Typografi og farve 11 Navigationsdiagram 12 Usecase 13 Usability test 14 Konklusion 15 Side 2
Forord Spis rigtigt, det er vigtigt! Det er der mange, der går og siger, men de ved rent faktisk ikke hvorfor. Mad er nødvendigt for at kroppen fungerer, men ikke mindst at vi fungerer rent. Desværre er det ikke alt mad, der er lige sundt at indtage for meget af i for store mængder. Sukker og fedt i alt for store mængder alt for ofte kan f.eks. medføre til fedme og andre livsstilssygdomme som diabetes. Burger og pizza er ej just sundt, men er alligevel mad unge spiser meget af, fordi det er nemt og hurtigt. Nogle gange er det endda billigere i nogles overbevisning at spise junkfood, men det er ikke sandt. Det er billigere at lave maden selv, og det kan tilmed være sjovt og hurtigt. Vi vil i vores opgave sætte fokus på billig og nem mad, som enhver har adgang til. Side 3
Problemformulering Hvordan får vi skabt en attraktiv webside, der får den studerende til at interessere sig for madlavningen i dagligdagen, til fester, til kæresten m.m.? Hvordan får vi kommunikeret vores koncept ud på en måde, så man får lyst til at bruge sitet jævnligt, som en del af den daglige mad-planlægning for den studerende? Hvordan får vi udformet et brugervenligt website, der er nem og hurtig at navigere rundt på? Hvordan får vi designet til at passe til målgruppen? For at udforme et website med et attraktivt design og en optimal navigering for målgruppen, vil vi kigge på farveanalyse, målgruppeanalyse og forskellige metoder. Vores mål med projektet, er at udforme et enkelt, attraktivt og ungdommeligt website, der skal få den studerende til at spise andet en junkfood og desuden spare penge derved. Side 4
Udviklingsmetode Vi har valgt at følge en udviklingsmodel kendt som Vandfaldsmetoden, fordi vi mener, at det er vigtigt, at dokumentere og få godkendt løbende under hele udviklingsprocessen, da der ikke er tid og resurser nok til fejl under det korte projektforløb. Grund principperne i denne udviklingsmetode, består i at man fra starten laver alt analysearbejdet og får det godkendt løbende af kunden, så der ikke bliver nogle misforståelser mellem projektgruppen og kunden. Ved brug af denne udviklingsmetode får man altså elimineret en del risici ved, at man får verificeret hele vejen gennem udviklingsforløbet. Denne verifikation bliver senere del af dokumentationen for multimediet. Side 5
Tidsplan Side 6
Målgruppe Kollegiekøkkenet henvender sig primært til unge mellem 20-26 år. De behøver ikke nødvendigvis at være studerende, men siden berør nok mest dem der er udeboende, og har en økonomi på lige fod med en under uddannelse. Ifølge Gallup kompasset består vores målgruppe primært af folk fra det moderne, individ-orienterede og moderneindividorienterede segment. Ifølge Gallup er det typisk unge der er dynamiske og karrierelystne og villige til at yde den indsats, der skal til for at nå højt op på karrierestigen. Desuden er der nogle af dem, der viser mindre interesse for samfundsøkonomiske og politiske spørgsmål, fordi de i højere grad koncentrerer sig om deres egen tilværelse og succes. Side 7
Design Brief Første udkast: Dette er et udkast af vores første layout. Hjemmesiden er designet som et stykke papir, med hjemmesidens logo øverst på siden. Logo skriften valgte vi skulle være grøn fordi den grønne farve i Danmark symboliseres med ungdom, vækst og ikke mindst at glemme, håb. Vi har omdannet O et i Kollegiekøkkenet til et æble for at vise at det er sund I henhold til vores hjemmeside kan vi tilmed drage værdierne om sundhed og økologi til farven. Baggrundsfarven valgte vi skulle være rød, da den er den komplementære farve til grøn, men også ofte symboliseres med kærlighed og lidenskab. Ved siden af logoet havde vi indsat to billeder på den ene side, for at bryde symmetrien på hjemmesiden. Selve hjemmesiden er to opdelt således, at man menuen altid er øverst og ikke gemt af vejen, hvis man ønsker at finde en anden madopskrift end den pågældende man kigger på. Menu punkterne er således placeres tæt op ad hinanden for, at vise at de er i relation til hinanden. Ligeledes er informationerne i undersiderne placeres således, at man uden tvivl ved hvilke informationer der hører til hvad. Dette er også kendt som reglen om lukkethed og nærhed i gestaltlovene. Side 8
Design Brief Færdige Layout Dette er forsiden til det færdige layout, for vores hjemmeside. I gennemgående træk har vi bibeholdt det meste af designet og opsætningen af siden, dog har vi valgt at ændre nogle få ting grundet sværhedsgraden for implementering at visse funktioner. Vi har valgt, at benytte andre farver i stedet for de farver vi i første omgang havde forestillet os. Grunden til dette er, at kontrasterne på farverne var for store, og ville medføre at selve designet på siden ville virke tungt og belastende, at se på i alt for lang tid. Derfor er vi gået over til at benytte færre farver, men i forskellige nuancer, som ikke virker så belastende og forvirrende. Vi har valgt at bruge nogle friske farver fra frugter på vores banner, for at understøtte værdierne om sundhed på vores side. De grafiske elementer som border en, har vi valgt at gøre rund, for at give hjemmesiden et roligt look samt at det hele ikke ser alt for firkantet ud. Ligeledes har vi valgt at bibeholde den brune streg for at adskille menuen fra alt indholdet på siden. Det er også kendt som loven om lukkethed, når man snakker om gestaltlovene. På alle vores undersider har vi gjort det muligt, at kunne komme hurtigt tilbage til hvor man kom fra. Desuden har vi sat et sitemap link nederst på siden, så man kan finde sin eksakte position på sitemappet. Grunden til at vi har sat sitemaplinket nederst på siden, frem for øverst, som er mest brugt, er at vi i forvejen har gjort sitet overskuelig og nem at navigere rundt i. Side 9
Logo Logoet til Kollegiekøkkenet er designet således at O et ligner et æble for det er typisk noget vi forbinder med er sundt - et æble om dagen holder lægen væk. For at holde værdierne i æblet har vi tilmed gjort skriften grøn, som også har den bonus, at den symboliserer ungdom og vækst. Ligeledes har vi valgt en typografi, som vi giver et ungt præg på vores logo. Fonten vi har benyttet os af hedder Neuropol. De naturlige farver har fra naturen har vi så tilføjet den brune farve for virkelig at understrege sundheden for vores opskrifter, men som også indrammer logoet så det giver et lækkert finish. KollegieKøkkenet Neuropol A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0! # & / ( )?., - + @ * < > \ = { } [ ] Side 10
Typografi og farve Typografi familien til informationerne på vores hjemmeside er: Verdana, Arial, Helvetica og Sansserif. Til selve menuen har vi brugt: Hobo Std (Som er en font som findes på alle computere) AD7214 - Brun FF200F - Rød 003300 Mørke Grøn 00FF01 Grøn Verdana A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0! # & / ( )?., - + @ * < > \ = { } [ ] Arial A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0! # & / ( )?., - + @ * < > \ = { } [ ] Hobo Std A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0! # & / ( )?., - + @ * < > \ = { } [ ] Side 11
Navigationsdiagram Øverst på forsiden har vi vores menu. På den kan man navigere sig frem til hovedpunkterne på vores side: Indkøbslisten, opskrifterne og vores kontakt side. På indkøbslisten kan man finde links til tre butikker, som vi mener generelt er billige. Prislisten er de gennemsnitlige priser for butikkerne, og som er nødvendige for den ugentlige indkøbsliste. Opskrifterne er her vi har lagt mest arbejde i. Her kan man finde en oversigt over alle de opskrifter vi har på vores side, som man kan trykke på og komme videre til en specifik opskrift. På vores side har man også muligheden for at kontakte os, hvis man ønsker at dele sine opskrifter med os. På siden er der er formular, som man bare udfylder og sender af sted. Side 12
Use case Aktører: Studerende på SU som er under en uddannelse, og som vil finde inspiration til mad i hverdagene, til fester, til kæresten, osv. Webmaster som skal holde hjemmesiden opdateret, så brugeren fortsat kan få mad inspiration via hjemmesiden. Use Case Deskription: Finde inspiration til opskrifter: Use Casen startes typisk af en studerende der søger inspiration til madlavning. Klikker på opskrifter hvorefter han vil blive overført til undersiden. Finde et eksempel på en ugentlig indkøbsliste: Use Casen startes oftest via at brugeren klikker sig ind på indkøbslisten, hvorefter han vil have mulighed for at planlægge sit budget, og spare en masse penge via at følge selve indkøbslisten. Få mulighed for indflydelse websitets indhold: Use casen startes ved at brugeren klikker sig ind under kontakter, hvorefter brugeren vil få mulighed for at tilføje, artikler, opskrifter, konstruktiv kritik til at forbedre sitet. Holde sitet opdateret: Use casen startes af webmasteren, webmasteren holder sitet opdateret og sørger for at sitet bliver holdt kørende Side 13
Usability Test Vi har valgt at bruge ganster testen for at sikre at vi har en overskuelig og nem hjemmeside at finde rundt på. Vi mener det er vigtigt at den skal være så simpel som muligt så folk ikke bare vælger at finde en anden hjemmeside når de finder den via google. Vi har valgt at lave testen på én person vi mener kunne være en del af målgruppen. Spørgsmål: Type Spørgsmål Points Søgefunktion Hvor kan jeg søge? 0-3 Du er her - indikator Lokal navigation Sektioner Hvor er jeg i den samlede struktur? Hvad er mine muligheder på dette niveau? Hvilke overordnede sektioner findes på denne hjemmeside? 0-3 0-3 0-3 Underside Hvilken underside er jeg på? 0-3 Hjemmeside Hvilken hjemmeside er jeg på? 0-3 Resultat: Type Spørgsmål Points Søgefunktion Hvor kan jeg søge? 0 Du er her - indikator Lokal navigation Sektioner Hvor er jeg i den samlede struktur? Hvad er mine muligheder på dette niveau? Hvilke overordnede sektioner findes på denne hjemmeside? Underside Hvilken underside er jeg på? 2 Hjemmeside Hvilken hjemmeside er jeg på? 3 3 3 3 Side 14
Konklusion Vi mener, at det er blevet en meget succesfuld hjemmeside. Den er blevet nem og overskuelig, således at folk der komme ind på hjemmesiden via søgemaskiner ikke trykker ud af den med det samme, fordi de ikke kan finde noget der interesserer dem. Via vores usability test er vi i det mindste sikker på at vores hjemmeside ikke er helt umulig at finde rundt på. Indholdet derimod kan vi dog ikke med sikkerhed vurdere om er relevant for brugeren. Men vi har i høj grad taget hensyn til vores målgruppe, og sørget for at indholdet er så specifikt rettet mod dem, at de fleste vi har interviewet er godt tilfreds med resultatet af vores side. Side 15