Indholdsfortegnelse UNG & SUND

Relaterede dokumenter
GRAFISK WORKFLOW H1 MARIA SCHELDE

Martin Møller Web1b Tirsdag den 19 juni 2012

Projekt-studieweb. Om kommunikationsteorierne. Morten, Jacob, Kristian og Cihat

5. Billeder og logo til websitet er optimeret til web via Photoshop, så de fylder mindst muligt for at mindske indlæsningstiden for websitet.

web via Photoshop, så de fylder mindst muligt for at mindske indlæsningstiden for websitet.

Mit grafiske workflow inkluderer:

Efterlyst! Introduktion HTML & CSS. I dette projekt skal du lære, hvordan du laver din egen plakat. Arbejdsliste. Test dit Projekt.

GRAFISK WORKFLOW GRAFISK WORKFLOW DIGITAL KOMMUNIKATION OLEMOGELBY.COM

kollegiekokkenet.tmpdesign.dk Side 1

Grafik & Billede weloveorganic.com webshop

REDESIGN AF GRAFISK FORUMS HJEMMESIDE. Grafisk Workflow

Grafisk Redegørelse Opgaven Programvalg Kvalitetsvurdering Målgruppe Arbejdsproces Kvalitet Komposition og layout Brugervenlighed

GRAFISK DESIGN. Min personlige e-portfolio

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

GRAFISK WORKFLOW GRAFISK WORKFLOW

workflow Programmer: Om opgaven: Kvalitetsvurdering: Afsender: Modtager: Cathrine Laulund Web: Dreamweaver Billedbehandling: Photoshop

grafisk workflow Madmagasinet

OPGAVE: WELOVEORGANIC.COM WEBSHOP

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

Grafisk workflow. website til duckhead music

KT OR LOW PRODUKTION // WORKFLOW

Grafisk Workflow. Endeligt layout. Om mig. Forside. Portfolio

GRAFISK WORKFLOW Hjemmesidedesign

Byg et website med Dreamweaver

Nu skal vi især se på <font> og <center> samt centrering af hele siden på skærmen.

CSS fortsat: Boksmodel, floating & positionering

Grafisk Workflow. hovedforløb 2

FORSTÅELSE FOR GRAFISK PRODUKTION OG WORKFLOW

GRAFISK WORKFLOW Hjemmeside - Husk hjelmen.

Grafisk. Workflow. Side 1

Grafisk workflow. Hjemmeside til Bærkompagniet

Nolde Museet. I gang med Dreamweaver. Opgave. Opgavebeskrivelse. Layout. Mål og CSS

Grafisk Workflow STILHISTORIE. Website lavet i forbindelse med et projekt om stilhistorie. Klik her for at se websitet:

Forståelse for grafisk produktion og workflow

Roskildes tekniske gymnasium. Kulløse Mijlømesse. Afsluttende kom/it projekt

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

GRAFISK WORKFLOW. Layout Layout af hjemmesiden laves i Photoshop og siderne inddeles i mapper for bedre overblik.

GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen

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

Grafisk produktion og workflow

Denne artikel er til dem der ønsker at vide mere om hvad CSS er og hvad CSS kan bruges til hvad angår WWW.

Dokumentation. Karen-Louise Fejerskov

GRAFISK PRODUKTION & WORKFLOW. Endotest website

Grafisk workflow. Se siden her:

Nyhedsbrev april: spørgeskemaundersøgelse

Tillykke Med Fødselsdagen

Oversigt HTML5 nye tags til sideopbygning

GRAFISK WORKFLOW HJEMMESIDE EL FIRMA ANDERSEN EL

Projekt i Programmering C Menu til hjemmeside.

Superskolernes kampagne

GRAFISK WORKFLOW OPGAVEBESKRIVELSE KVALITETSVURDERING HJÆLPEMIDLER BROWSER BRUGERVENLIGHED/USABILLITY

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

Grafisk Design 70% Skitser

1. Bilag: Brugertest for gammel site

Mark André Lyhne. Eksamen web1b

GRAFISK PRODUKTIONSFORSTÅELSE

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.

OPGAVEN PROGRAMVALG. Jeg har brugt Illustrator til at lave logo og ikoner.

! }! FORSIDE! <html>! <head>!

OPGAVE BESKRIVELSE ARBEJDSPROCES. Idéudvikling. Inspiration. Skelet. Uploade til server. Kodning. Teste sitet igennem. Rettelser og godkendelse

Grafisk workflow. Maria Clausen Svendeportfolio Grafisk workflow

GRAFISK WORKFLOW PORTFOLIO NIKLAS POULSEN H1

Grafik Workflow...2 Opgave Kunden Min opgave Nuværende Design...4 Overvejelser Brainstorm...6 Målgruppe Signalværdi Sitemap Nuværende sitemap...

Her vil jeg forsøge at gennemgå hvordan vi kan opnå at centrere en»div-container«både vertikalt og horisontalt i browser vinduet.

Grafisk produktion og workflow

Opgaven. Væsentlighed. Problemstillinger. Browserkompabilitet. Layout. Kvalitetsvurdering. Format. Processer. Komposition og modulopbygning

Grafisk. Hjemmesiden er designet til en nyopstartet virksomhed kaldet Tegnestuen M. De har både en arkitektafdeling og en tømrer-/ snedkerafdeling.

Form og dens underlige box model

OPGAVEN Konditoren skulle have lavet et site til deres opskrifter. Konditoren.dk er en blog for bageglade amatørere i alle aldre.

Brugervejledning til Design Manager Version 1.02

Grafisk produktion & workflow

GRAFISK WORKFLOW WEBSHOP TIL KLITMØLLER COLLECTIVE

Laura Svendsen Kernekompetencer GRAFISK WORKFLOW

Grafisk workflow 3. Hovedforløb

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

PORTFOLIO SEBASTIAN NYHOLM. Eksamensprojekt. 1. Semester

Naja Schlüter Roskilde Tekniske Gymnasium 26/ Interessentanalyse

ActiveBuilder Brugermanual

GRAFISK WORKFLOW - RESPONSIV WEBSIDE

Marc Creutzberg aarhusportalen AARHUSTECH 19/

3. PROJEKT, 2 SEMESTER

Bootstrap Tutorial LAV EN SIMPEL RESPONSIVE SIDE MED BOOTSTRAP MATHIAS HERSKIND GROTRIAN

Grafisk Design. fra idé til visuelt udtryk Benett

GRAFISK WORKFLOW PHILIP CREAMER AARHUS TECH SVENDEPRØVE NOVEMBER 2016

GRAFISK PRODUKTIONSFORSTÅELSE

GRAFISK DESIGN. webdesign af pl.dk

Eksamen. Jonas Langhoff Nielsen Web01b

1. Hovedforløb. Mediegrafiker

GRAFISK DESIGN. Kenneth Friis Petersen

Grafisk Design. Svendeprøve Portfolio Anja Jelstrup Jensen, Kailow

Om styles / typografier / typografiark / stylesheets

Portfolioudvikling. Line la Fontaine. Multimediedesigner

Webside score theimblog.net

JEG GIVER SELLS.DK NYT LIV MED ET MODERNE RE-DESIGN.

Transkript:

Rapport Web site mad og livsstil www.arikashika.dk/ungogsund Lavet af Michael Vinzent Dalgaard Peter Michael Schindler Stefan Skjerning Renata Tautavice Sara Vang Erhvervsakademiet København Nord MULTIMEDIEDESIGNER 2. SEM. 12. FEBRUAR - 3. MARTS 2009 UNG

Indholdsfortegnelse Indledning... side 2 Problemformulering... side 3 Udviklingsmetode... side 4 Profil af målgruppe... side 5 Segmenteringsanalyse... side 6 Interessentanalyse... side 6 Informationsdesign, interaktionsdesign og præsentationsdesign... side 7 Designbrief... side 8 Logo til Ung og sund... side 8 Gestaltlove... side 9 Use case-model og -beskrivelse... side 10 Site map og beskrivelse... side 11-12 Navigationsdiagram... side 13 Søgemaskineoptimering... side 14 Konklusion... side 15-16 Evaluering af produkt og proces... side 17 Bilag: Behandling og resultat af spørgeskema... bilag 1 Relevante screen dumps fra websiderne og centrale dele af koden... bilag 2 Tidsplan (gantt-diagram)... bilag 3 1

Indledning Mad og livsstil er emnet på dette projekt, som vi har fået stillet i 2. semesters første projekt. Formålet med projektet er at lave et web site omhandlende mad - i form af opskrifter, kostråd og artikler - som både indholdsmæssigt som designmæssigt er attraktivt at besøge for studerende mellem 19 og 24. Kollegie-venligt De studerendes forholdsvis dårlige økonomi har en afgørende betydning for web sites udvalg af opskrifter. Da selve målgruppen tager udgangspunkt i kollegiesegmentet, vil der også blive taget hensyn til en gennemsnitlig begrænset erfaring med madlavning samt en begrænset adgang til tilberedningsudstyr. Endelig skal indholdet også komme med konkrete råd og anbefalinger om en sund kost. Derfor vil indholdet på vores web site dels være præget af billige madretter, der er nemt tilgængelig for studerende, dels af madretter, der kan tilberedes med få kogeplader og en lille ovn, og dels et indhold, der værner om ernæringsrigtige opskrifter og kommer med brugbare råd og artikler. disse resultater har vi kunnet vurdere, om vores egne ideer omkring web sites indhold og design harmonerer med den virkelige verden. Opgaveløsning I vores gruppe har vi lagt vægt på et kollaborativt samarbejde, hvor vi snakker sammen om forestående opgaver og hver især bidrager til vores fælles opgave. Som en hjælp hertil har vi lagt en tidsplan gældende for den tid, projektet er sat til (jf. bilag 3). På den måde har vi kunnet danne os et godt overblik over projektets indhold og de stillede krav. Selv om der har været mange navneforslag til web sitet oppe at vende, er vi i gruppen blevet enige om ét navn, der beskriver vores web site ganske godt: Ung og sund. Indramning af målgruppen For at kunne tilpasse web sitets indhold og design til målgruppen, har vi udarbejdet et spørgeskema omhandlende studerendes kost og madvaner samt foretrukken web site-type og skrifttype, som vi har givet en række unge studerende i kollegiesegmentet. Ud fra 2

Problemformulering Hvordan kan vi konstruere et web site, der appellerer til studerende i aldersgruppen 19-24 år om en sund og varieret kost? Hvordan udvælger vi web sitets retter, så de tiltaler målgruppen prismæssigt, sundhedsmæssigt og kvalitetsmæssigt, samtidig med at web sitet bliver overskueligt? Hvordan får vi afstemt indhold til målgruppen, så det skaber interesse og nysgerrighed? Hvad vil vi sætte specielt fokus på, så sundheden bliver afspejlet i web sitets indhold? Hvordan sikrer vi, at designet er attraktivt, nemt at navigere i, konsistent og målrettet til målgruppen? 3

Udviklingsmetode HOME Da HOME er en meget åben udviklingsmetode, er den forholdsvis nem at tilpasse forskellige projekter. Dette er den primære grund til vores valg om at arbejde ud fra denne metode. HOME er dog meget omfattende, hvilket gør at vi ikke vil have tid til at udføre projektet i HOMEs fulde version. Derfor skærer vi det ned til en light version, hvor vi bruger de væsentligste dele fra hvert trin. Derved får vi sikret os den bedste gennemgang til præcist dette projekt, samt sikret at vi får mest mulig af den relevante læring til netop dette projekt. Adskillelsen som HOME giver mellem aktiviteterne vil gøre arbejdet lettere, og mere målrettet, da vi får lettere ved at holde tingene adskilt, og bevare overblikket. Udviklingsmetoden HOME Prototyping Vi har valgt at opstille vores HOME light med inspiration fra prototyping-metoden, da denne metode søger at teste produktet hos målgruppen. Derved kan vi teste, hvad målgruppen vil have med hensyn til design og indhold, og forholde os til dette i vores arbejde. På denne måde kan vi sikre os, at designet og indholdet henvender sig til vores målgruppe. 4

Profil af målgruppe Generel profil af målgruppen med udgangspunkt i Oscar, som er en af målgruppens typer. Studerende med begrænset økonomi Oscar er 21 år og studerer medicin på Københavns Universitet. Han er lige fløjet fra reden og har fundet sig til rette i et kollegium på det ydre Nørrebro. To gange om ugen spiller Oscar fodbold. Derudover bruger han sin tid på lektier, familie og venner. Oscars eneste indkomst er SU, som udgør 5200 kr. pr. måned før skat. Oscar har udregnet, at efter alle hans udgifter er betalt, har han et rådighedsbeløb på 50 kr. til mad pr. dag. Hjælp at hente Oscar savner sin mors gode madlavning, men der er langt til et besøg på den anden side af sundet. Oscar søger varieret og lækker kost for få penge. Det skal være nemt at tilberede i deres fælles kollegiekøkken. Køkkenet har kun en lille ovn og to små kogeblus. Selv kender Oscar ikke meget til madlavning og opskrifter på mad. Derfor spiser han meget ensformig og kedelig mad så som pasta, run osv. Oscar savner ideer til lækre retter, der er nemme at tilberede. Han kunne godt tænke sig, at der var et sted at søge inspiration om madlavning for studerende. 5

Segmenteringsanalyse Interessentanalyse I vores segmentering har vi målrettet og afgrænset vores produkt til en konkret målgruppe, hvilket allerede er defineret i opgavebeskrivelsen. Projektets formål er at lave et web site, som skal hjælpe unge studerende til at få en sundere og mere næringsrig hverdag for et forholdsvis lille beløb. Vi har segmenteret efter. Web sitets interessenter er: Alder: 19-24 år Beskæftigelse: Studerende Bopæl Kollegium / udeboende Derudover skal de studerende have adgang til max. 2 blus og en lille elektrisk ovn, gerne en mikrobølgeovn. Idet vores produkt er et web site, har vi antaget, at de har adgang dertil (igennem internettet). Vi skal selvfølgelig ikke udelukke, at alle folk i alle aldre kan benytte vores kostplaner og bud på indkøb, da dette er billige løsninger og sund mad for alle. Lærerne (styregruppe): Har bl.a. lagt rammer for hvad et kollegiekøkken indeholder og givet retningslinier for web siden, derfor vil det få indflydelse på vores endelige resultat, da disse forhold skal tages i betragtning. Udvalgte studerende (referencegruppe): Vi har i gruppen til dette projekt været ude på et kollegium og rundt på skolen, for at indsamle meningsmålinger til hvordan de helst vil se projektets webside opbygget. Disse er selv følgelig vores elementære interessenter, da de er den afgø rende målgruppe i dette projekt. Projektudviklere (projektgruppe) Denne gruppe er os, der udvikler dette web site. Vi er en slags projektmedarbejdere i en fiktiv problemstilling. Vores meninger og indsamlede informationer udgør det endelige resultat. 6

Informationsdesign, interaktionsdesign og præsentationsdesign Ud fra den definerede målgruppe, web sitet Ung og sund tager udgangspunkt i, har vi lagt nogle gode strategier for, hvordan vores målgruppe får mest gavn af web sitets information og opbygning. Information Vi har med et web site at gøre, der er informativt. Det er afgørende, at de besøgende får den information, der er nødvendig for at kunne tage web sitet til sig. Derfor har vi som udviklere udvalgt lige præcis den information omkring opskrifter, artikler, gode råd osv., de besøgende finder interessante, og som skal gøre dem til en del af vores målgruppe, hvis ikke de var det i forvejen. Web sitets information har vi designet og struktureret ud fra princippet om enkelthed. Vores unge målgruppe er vant til en vis hastighed i det, de foretager sig, og har derfor ikke lyst til at skulle rode længe rundt efter den information, de har brug for. Interaktion Enkeltheden og brugervenligheden går også igen i den måde, web sitet er i interaktion med den besøgende. Det er vores mål, at alle besøgende, om det er i målgruppen eller ej, føler, at de har nem adgang til de informationer, de har behov for. Den hierarkiske struktur, vores web site anvender, gør det nemt at danne sig et overblik over mulighederne. Selve menutypen er den klart mest foretrukne blandt web sitets målgruppe (som vores undersøgelse har vist) og overskueliggør på en sikker måde de forholdsvis simple interaktionsinput, web sitet tilbyder. Præsentation Det måske vigtigste medieelement, Ung og sund gør brug af, er den tekstmæssige kommunikation. Og her er brugervenlighed også prioriteret højt. Teksten er let læselig og forståelig, og dens ikke alt for lange afsnit gør det let at danne sig et overblik. Web sitet har også et rigt indhold af billeder, der gerne har en illustrativ funktion. Billederne gør indholdet lettere at forstå og bidrager til det rene design, Ung og sund praktiserer. Designet skal med valget af lyse grønne og hvide farver, overskuelig opstilling og ung skrifttype kommunikere information og stemning. Ung og sund imødekommer brugernes krav om et funktionelt site, der er nem at forholde sig til samt en æstetik, der tiltaler dem. 7

Designbrief Logo til Ung og sund Herunder er vores design brief til Ung og sund, som resultaterne fra spørgeskemaerne også har haft lidt indflydelse på. Logoet er sammensat af tre ikoner, som hver især er udtryk for: Vores web side skal udstråle en sund, billig og let måde for en ung studerende at lave mad på. Web sitet skal være pænt og i et simpelt design, hvor vi har taget højde for gestaltlovene såvel som interaktions- og præsentationsdesignet. Altså skal siden være lavet med henblik på vores målgruppe i et moderne design. Vi vil prøve at gøre siden så indbydende som mulig, så appetitten vækkes hos modtageren. Man skal få lyst til at lave den mad, vi skilter med, og det skal være let og ligetil...også selvom det er sund og næringsrig mad. Vores opsætning af siden skal være let overskuelig, såden besøgende hurtigt kan finde opskrifter, gode råd og simple kostplaner. Kokkehue: Mad/lækker mad, tilberedning, kogekunst, kokke-/mad-ekspert. Æble: Sund mad, frugt, helse, varieret, anbefalet kost. Bestik: Spise, madsted, få stillet sin sult. Fællestræk for de tre ikoner: Alle 3 ikoner er noget, vi forbinder mad. Tilsammen illustrerer de lækker mad, der er sund og appetitligt. Vi har altså tale om en treenighed, som har at gøre med mad, forberedelse af mad samt spisning af mad. Hvilket vi mener har et fuldkomment udtryk for madkunsten. Farverne på ikonerne er valgt ud fra deres naturlige farver. Dog er bestikket anlagt i sort og er placeret i baggrunden. Den sorte farve skal forstås som en skyggeeffekt, der her ligger i baggrunden for selve mad-processen (altså spisning efter madlavning). Bestikket skal forstås som udstrakte arme, der lægger op til et åbent og glædeligt udtryk, også selvom den besøgende foretrækker information om det eftersøgte hurtigt. 8

Gestaltlove Loven om figur og baggrund Som udgangspunkt er det vigtigt at baggrunden på vores hjemmeside ikke har en for kraftig nuance, da dette forvirrer modtageren, om hvorvidt det er baggrund eller forgrund. Derfor vil vi på vores web site tone farven ned på baggrunden, sørge for at skrift og andet visuelt træder frem for baggrunden. Dette hjælper vi også til med ved at vælge en baggrund med rolige farver frem for en skrigende og alt for iøjnefaldende baggrund. Loven om nærhed Det er vigtigt at alle punkter på siden holdes adskilt, hvis tingene skal forstås hver for sig. Derudover er det lige så vigtigt, at elementerne har mindre mellemrum fra hinanden, hvis de skal tolkes som sammenhængende (f.eks. billede og tekst). Der skal her fokuseres på afsnit, margin og luft mellem kolonner for at gøre det så logisk og letlæseligt som muligt. Loven om lighed I dette punkt er det elementært, at vi på siden adskiller ting med f.eks. farver eller i form af afsnit. Hvis de forskellige elementer skal ses i sammenhæng, vil de have samme form eller farve. Der er sågar fokus på, at understregninger er forbudte, da modtageren forbinder dette med et link. Det er vigtigt, at web sitets menuer, skrifttype, opstilling m.m. tager udgangspunkt i samme form eller farve, så der ikke opstår forvirring. Loven om lukkethed Denne lov hænger lidt sammen med loven om lighed, da disse to skal kombineres logisk for at få det rigtige budskab ud til modtageren/brugeren. Ung og sund-web sitet gør brug af rammeafdelinger, der får indholdet til at give den besøgende ro og overblik. Man kan således i mange tilfælde anvende rammer til at omkredse informationsfelter, der normalt ville virke forvirrende, hvis disse stod løst og ikke i fastlagte rammer. Loven om forbundethed Dette er den sidste, men vel også vigtigste lov. Som webdesigner kan man anvende tråde og overlapninger for at linke ting som billeder og tekst sammen, ligesom det også er tilfældet med kroppens anatomi, når bestemte organer er forbundet til et navn. Det essentielle i denne lov er at de forskellige love kan modarbejde hinanden, og det er vigtigt at være opmærksom. Det sker ofte, at folk glemmer enkelte love i et forsøg på at overholde en anden lov. Derfor er det meget vigtigt at have alle lovene med i sin betragtning, når man laver et web site. 9

Use case-analyse og beskrivelse Use case Actors Til vores hjemmeside har vi 3 forskellige actors at have med i vores overvejelser: Studerende, webmaster og madudvalg. Kostplaner Studerende De studerende, som ofte har begrænsede midler at gøre godt med og også gerne har mange ting at se til, er Ung og sunds målgruppe og dermed primære besøgende. De har som besøgende abcdef 7-dages kostplan Artikler Madudvalg adgang til web sitets forskellige muligheder. Webmaster Kost sport Webmasteren er ansvarlig og styrer hjemmesiden. Dvs. stå for oprettelse af web sitet, links og som også kan blive kontaktet af Studerende Fødselsdag hjemmesidens brugere. Kontakt Madudvalg Der er dem, som styrer hjemmesidens indhold, skriver artikler, Links vælger opskrifter osv. Webmaster 10

Site map Kort beskrivelse af web sitet Kostplaner Varieret kost Mad-pyramide Kostplaner På denne side kan man se veldokumenterede anvisninger om sund og varieret kost til unge. 7-dages-kostplan Om 7-dages kostplan Mandag Tirsdag Onsdag Torsdag Fredag Lørdag Søndag Printervenlig version 7-dages-kostplan På denne side man kan se en kostplan på 7 dage med tre retter mad for en person, en ret fra et fremmed land uden for Europa og en alfabetisk liste med opskrifter til hele ugen. Der er også printvenlige sider. Artikler Profil fra målgruppen Køkkenudstyr for unge. Middag med kæresten Økologiske varer. Kost sport Råd om kost til Maratonløberen og basketballspilleren. Artikler På denne side kan man finde forskellig artikler, der beskriver en profil fra målgruppen (studerende), køkkenudstyr for unge, en middag med kæresten samt økologiske varer. Kost sport På denne side kan man både se en artikel om mad til sportsmanden/kvinden, der træner til en Maraton samt læse om basketballspillers råd om kost og madvaner. 11

Site map (fortsat) Kort beskrivelse af web sitet (fortsat) Fødselsdag Artikel og fødselsdagsmiddag for 7 personer. Alfabetisk liste over web sitets opskrifter Fødselsdag På denne side kan man se én artikel og et kostforslag til en fødselsdagsmiddag for 7 personer. Kontakt Mail-adresse til webmaster Mail-adresse til madudvalg Kontakt Via dette link kan man komme i kontakt med webmaster og madudvalget. Links Links Her er der mulighed for at lægge relevante links ud. 12

Navigationsdiagram Forside / index Kostplaner 7 dageskostplan Artikler Kost sport Fødselsdag Opskrifter Kontakt Links Varieret kost Om 7-dageskostplan Økologi Maraton Fødselsdagsfest på SU A-E F-J Mail til webmaster Links til andre web sites Mail til madudvalg Madpyramide Mandag Middag til kæresten Basketball Fødselsdagsmiddag K-O Søndag Tirsdag Køkkenudstyr P-T U-Å Lørdag Onsdag Fredag Torsdag Profil fra målgruppen 13

Søgemaskineoptimering Et web site, der forsøger at ramme en bestemt målgruppe, bør have gjort sig overvejelser om, hvordan det når ud til målgruppen. Vi har med vores Ung og sund-web site målrettet indholdet og designet efter vores målgruppe. Så er der en stor chance for, at målgruppen bliver hængende på web sitet, når de har fundet det. Men hvis de ikke kan finde vores web site, er selv det bedste indhold nyttesløst. Det er her, søgemaskineoptimeringen kommer ind i billedet, da interesserede så vil være i stand til at finde web sitet, når de søger på Internettets søgemaskiner. Den bedste optimering foregår ved at få andre web sites til at referere til éns eget. På den måde vil éns eget web site opnå en højere søgemaskine-ranking. Det kræver dog, at man har et godt netværk og gerne nogle, der har web sites af samme slags som en selv. Man kan også lave en søgeoptimering, der ikke stiller andre krav end en lille udvidelse af de forskellige HTML-koder. I kodens head-del indskrives to typer meta-tags: Keywords: Det er en fordel at vælge de keywords, folk vil søge på for at finde vores web site. Men det er vigtigt, at hver underside har sine egne søgeord, og at ordene indgår et eller andet sted på siden. Ung og sunds hovedside kunne have følgende keywords: kollegium, kollegiemad, sund mad, billig mad, opskrifter, madartikler. Description: Her skrives en præcis beskrivelse af web sitet, men på højst 160 tegn. Hvis hovedsiden indeholder en beskrivelse, som søgende er tænkt til at søge efter og dernæst klikke sig ind på hovedsiden, skal beskrivelsen også indeholde nogle af de søgeord. Ung og sunds hovedside kunne have følgende description: De studerendes mad-web site med sunde og billige retter. Udførlige opskrifter med fremgangsmåde. Ideelt for den travle studerende. Vi har bevidst undladt at lave denne søgeoptimering på det uploadede Ung og sund-web site, da det nemt kan give os problemer. Det vil helt sikkert se uheldigt ud, at et fiktivt web site får tonsvis af hits 14

Konklusion Målrettet website Samlet set prøver vi at præsentere vores web site med et flot og overskueligt design, nyttige informationer samt et godt (og sundt) indhold, hvilket vi efter vores bedste vurderingsevne føler, vi har løst godt. Vi har udviklet et web site, hvor der er blevet taget højde for modtageren, og hvor deres mening har vejet tungt på vægtskålen. Vi har konkluderet ud fra vores undersøgelse af målgruppen, at de medvirkende ønsker at finde den relevante information hurtigt og nemt. Derudover har vi fokuseret på, at indholdet skal have et vis pædagogisk aspekt. Vi har hovedsagelig vægtet nøgleordene hurtig, nem, overskuelighed, forståelig information. Disse ord er vigtige for at kunne holde på vores besøgende. Visuel opsætning Vi har opsat billederne på opskrifterne på venstre side og fremgangsmåden på højre side. Placeringen af menufelterne er der også i høj grad sat fokus på, så den mest relevante information og den antagne mest brugte fremkommer først. Det kom det bag på os, at der blandt de adspurgte kollegianere var 60 %, der foretrak down-menuen, men vi valgte at benytte denne menu som navigationsmenu på web sitet, da det var vores målgruppe vi havde spurgt. Jævnfør evt. bilag 1. Farvevalget er holdt meget konsistent igennem hele websitet. Vi har forsøgt at holde sitet på rene og pæne nuancer uden for meget støj. Den grønne farve går igen på hele web sitet og skaber derved en ro og samhørighed mellem siderne. Menuen går igen på alle sider og gør det nemt at forholde sig til strukturen. Siderne indeholder varierende billeder med sammenholdt tema. Billig og sund Vi har gået ud fra, at de studerende rundt regnet benytter 50 kr. om dagen på mad. Hvis vi tager et hurtigt kig på vores spørgeskema (spørgsmål 2), ser vi forundrende nok, at de fleste at de adspurgte brugte mellem 300 og 400 kr. om måneden. Det giver ca. 50 kr. om dagen, som jo egentlig var vores udgangspunkt for hvor meget, en studerende brugte på mad om dagen. Dette beløb har vi haft meget fokus på ved udvælgelse af retterne. Et vigtigt mål er, at vi får vist, at vi er bevidste om ernæringsrigtig mad, og at vores indhold afspejler det. På denne måde kan man søge den rigtige information og hermed ikke komme i tvivl om vores viden om mad. Vi har hermed igennem vores vejledning om rigtig kost og opskriftvalg mv. gjort det klart, at vi tager sund kost seriøst. Det ses også i kostpyramiden og sundhedsafsnittet, hvor man kan læse en del information om rigtig kost og hvad Sundhedsstyrelsens anbefaler. Ved at lave en kostplan for en uge har vi måttet genbruge mange af ingredienserne/madvarerne de følgende dage. Vi har fundet 15

Konklusion (fortsat) meget gode opskrifter, så man spiser varieret og får dækket langt størstedelen af det vitamin- og mineral-behov, en voksen person har brug for. Interesse nysgerrighed I vores forsøg på at skabe interesse og nysgerrighed på vores web site er vores farve- og billedevalg også en yderst fremtræden karakter på web sitet. Det er altså i høj grad ikke kun indholdet og opskrifterne, der er blevet fokuseret på, men i lige så høj grad vores samlet visuelle udtryk (via skrift-, farver- samt billedvalg). Vi har hentet inspiration til vores indhold fra allerede eksisterende mad-websites, men samtidig været opmærksom på at skulle tilpasse det vores web sites udtryk. 16

Evaluering af produkt og proces Evaluering af mål Gruppens læringsmål er, at vi vil lære alle de mål, som står beskrevet i opgaven. Dette inkluderer forståelse af gestaltlovene, segmentering og interessentanalyse, søgeoptimering af hjemmesiden, sådan at den er let at finde på fx Google. Udover disse grundlæggende mål har vi haft for øje at gøre hjemmesiden simpelt samt professionelt opbygget, sådan at den er indbydende for unge og studerende. Derudover var vores mål, at vores gruppe skulle fungere godt, og alle skulle have mulighed for at bidrage med deres syn på projektet. Evaluering af arbejdsprocessen Vi har alle været en del af den samlede løsning og alle i gruppen har bidraget hertil. Vores procesforløb og selve udformningen af web sitet er noget, vi alle kan være stolte af. Allerede fra start har vores arbejdsfordeling fungeret godt, og vi har hver især givet vores mening til kende og ud fra disse meninger opnået en samlet konklusion, som har dannet grundlaget og rammen for det færdige resultat. Opgaverne er som nævnt blevet delt jævnt imellem os og er blevet set af alle fra gruppen. Heraf har hver især haft deres præg på alle afskygninger af projektet og web sitet. Samlet set har vi brugt hinanden til at få det bedste resultat. Evaluering af projekt I starten af projektet begyndte vi at planlægge, hvordan selve hjemmesiden kom til at se ud. Alles meninger spillede en rolle. Derfor opdelte vi opgaverne kollaborativt. Vi fandt frem til at benytte prototyping i HOME-udviklingsmetoden - i en light udgave. Herefter begyndte vi at analysere mere konkret omkring, hvordan vi bedst når ud til vores målgruppe. Vi besluttede at finde løsningen gennem undersøgelser på kollegiet ved skolen, hvor vi spurgte studerende om farver, skriftyper og mad, samt hvad de vil forvente at finde på denne hjemmeside, vi kommer til at lave. Navnet på hjemmesiden blev fundet gennem 24 forskellige forslag som vi lavede en afstemning omkring, og den med flest stemmer blev Ung og sund. Ud fra resultaterne af undersøgelsen kunne vi begynde at danne os et mere nuanceret billede af vores design samt fremgangsmåde. Da rammerne hermed var fastsat, kunne vi begynde endnu mere struktureret og intens på tidsplanen designdelen og layoutet og ikke mindst indholdet. Alt i alt har vi nået det, vi har sat os som mål. 17

Spørgeskema Bilag 1, side 1 Resultat af spørgeskema til studerende Vi har tilrettelagt et spørgeskema, der tager udgangspunkt i unges madvaner og designsmag, så vi kan danne os et billede af vores målgruppe. Dette er resultatet. Graferne viser i procent de forskellige svar fra vores 15 adspurgte personer, der alle er unge samt i kollegiesegmentet. 1. Er du bevidst om, hvor mange penge du bruger på mad og drikke? Illustrationen (cirkeldiagrammet) viser, hvor mange af de adspurgte der er beviste om deres ugentlige pengeforbrug på mad. Svar: Nej: 3 Ja: 12 2. Hvor mange penge bruger du på mad om ugen? Søjlediagrammet viser den procentmæssige fordeling med antal personer lodret og beløb i kr. vandret. Svar på beløb: Antal Personer: 1 Beløb: Under 200 Kr Antal Personer: 4 Beløb: Mellem Kr. 200 300 Kr Antal Personer: 5 Beløb: Mellem 300 400 Kr: Antal Personer: 3 Beløb: Mellem 400 500 Kr Antal Personer: 2 Beløb: Over 500 Kr

Spørgeskema Bilag 1, side 2 3. Har du nogen madvaner? Hvis ja, hvilke? Cirkeldiagrammet illustrerer de madvaner, der er gengangere blandt de adspurgte i spørgeskemaet. Samtidig viser diagrammet, at gengangerne er fordelt rimeligt jævnt blandt frugt og grønt, hjemmelavet mad samt pasta. Svar på madvarer: Pasta: 5 personer Lave maden selv: 4 personer Salat Økologi Frugt og grøntsager: 4 personer Spise sundt Junk food 5 6 måltider om dagen Ris Lidt kød 4. Hvilken slags mad kan du bedst lide (gerne retter)? Søjlediagrammet nedenfor viser de retter (eller andet), der optræder mere end en gang. Diagrammet illustrerer f.eks., at der var 40 procent af de adspurgte, som spiste pasta mindst en gang om ugen. Her er hvad der ellers blev udpeget som ynglingsretter. Stegt mad Frugt Desserter Kanelsnegle Pasta og pastaretter: 6 personer Sund mad: 3 personer Kylling Grøntsager Grøntsagstærter Lasagne: 2 personer Risretter: 2 personer Pizza: 2 personer Kødretter Italiensk Chokolade Crepe (fransk mad) Pesto Tun Kinesisk

Spørgeskema Bilag 1, side 3 5. Spiser du varieret? Cirkeldiagrammer viser procentfordelingen blandt de 15 adspurgte. Svar på varieret kost: Ja: 11 Ikke nok, men prøver: 2 Nej: 2 (N.B. Vores henblik var her at undersøge, om varieret kost er noget, vi skulle veje tungt i henhold til vores madudvalg på web sitet.) 6. Går du op i økologi, og er det noget, du vil bruge penge på? Svar på økologi: Ja: 33% Nej: 26,% forsøger: 40% (N.B. Her ville vi undersøge, om økologisk kost er noget, vi skulle inddrage i web sitets madudvalg.) 7. Hvis du fandt en madhjemmeside til studerende, hvad ville du så gerne kunne finde på den? Svar på ideer til madside: (N. B skemaet er ikke angivet i procent men i personer og hvad disse ligger vægt på i et web site om mad). Gode opskrifter x 7 Opskrifter til sund mad som er nemt og billigt x 5 Ernæringsrigtig mad x 2 Sjov Opskrifter med pasta, ris, hvidløg, chili, grøntsager Specielle måltider Uge menu Info og råd om kost x2 KJ, protein, kulhydrat, fedt Mødesteder De studerende ligger hermed hovedsaglig vægt på, at siden skal indeholde gode opskrifter, samt at det skal være sundt, billigt og nemt.

Spørgeskema Bilag 1, side 4 Valg af farvekombination: Hvilken farvekombination vil du foretrække på en hjemmeside der omhandler mad til studerende? Svar på farvekombination. Antal stemmer: 4 (i procent 28.5 %) Antal stemmer: 1 (i procent 7,1 %) Antal stemmer: 5 (i procent 35,7 %) Antal stemmer: 1 (i procent 7,1 %) Antal stemmer: 3 (i procent 21,4 %) NB! Den sorte baggrundsfarve har kun den funktion at tydeliggøre farverness fremtræden og er ikke en del af farvevalget på websitet.

Spørgeskema Bilag 1, side 5 Valg af skrifttype Hvilken skrifttype vil du foretrække på en hjemmeside, der omhandler mad til studerende? Svar på skrifttype: Antal stemmer: 5 (35,7 %) Antal stemmer: 0 (0,0%) Antal stemmer: 3 (21,4 %) Antal stemmer: 1 (7,1 %) Antal stemmer: 0 (0,0%) Antal stemmer: 3 (21,4 %) Antal stemmer: 0 (0,0%) Antal stemmer: 2 (14,2%) Antal stemmer: 0 (0,0%) Antal stemmer: 0 (0,0%)

Spørgeskema Bilag 1, side 6 Valg af menutype Hvilken menustruktur vil du fortrække at navigere rundt i? Diagrammet viser, hvad der blev svaret i procent. Svar på menu: Menu 1 (Folde ud menu): 2 Menu 2 (Drop down menu): 9 Menu 3 (Menu med faneblade): 4 Nedenfor er de menutyper, de adspurgte blev stillet over for. Menu 1 (Folde ud menu): 2 Menu 2 (Drop down menu): 9 Menu 3 (Menu med faneblade): 4

Relevante screen dumps fra www.arikashika.dk/ungogsund Bilag 2

Kode fra index.html Bilag 2 UNG <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional. dtd > <html xmlns= http://www.w3.org/1999/xhtml > <head> <meta http-equiv= Content-Type content= text/html; charset=utf-8 /> <title>ung og sund</title> <link href= style.css rel= stylesheet type= text/css /> <script type= text/javascript src= http://ajax.googleapis.com/ ajax/libs/jquery/1.2.6/jquery.min.js ></script> <script type= text/javascript src= jqueryslidemenu.js ></script> </head> <body class= onecolfixctrhdr > <div id= container ><!-- start#container --> <div id= header ><!-- start#header --> <img src= images/logo.png border= 0 align= left /> <!-- end #header --></div> <div id= maincontent ><!-- start #maincontent --> <!-- startmenulinie --> <div id= myslidemenu class= jqueryslidemenu > <ul> <li><a href= index.html >Forside</a></li> <li><a href= varieret.html >Kostplaner</a> <ul> <li><a href= varieret.html >Varieret kost</a></li> <li><a href= trekant.html >Kost trekant</a></li> </ul> </li> <li><a href= plan.html >7-dages kostplan</a> <ul> <li><a href= plan.html >7-dages kostplan</a></li> <li><a href= 1dag.html >Mandag</a></li> <li><a href= 2dag.html >Tirsdag</a></li> <li><a href= 3dag.html >Onsdag</a></li> <li><a href= 4dag.html >Torsdag</a></li> <li><a href= 5dag.html >Fredag</a></li> <li><a href= 6dag.html >Lørdag</a></li> <li><a href= 7dag.html >Søndag</a></li> </ul> </li> <li><a href= oko.html >Artikler</a> <ul> <li><a href= oko.html >Økologi</a></li> <li><a href= kareste.html >Mad til kæresten</a></li> <li><a href= udstyr.html >Køkkenudstyr</a></li> <li><a href= profil.html >En studerende i køkkenet</a></li> </ul> </li> <li><a href= marathon.html >Kost og sport</a> <ul> <li><a href= marathon.html >Marathon</a></li> <li><a href= basket.html >Basketballspilleren</a></li> </ul> </li> <li><a href= bday.html >Fødselsdag</a> <ul>