Webbdesign Process till produkt

Webbdesign Process till produkt Umeå Universitet Mediaproduktion för www II 7,5hp Isak Madoun

Introduktion; VÅR-KOKBOK Är en kokbok som i sin första upplgaga kom ut på 50-talet. Boken innehåller mer av de vanligaste svenska matlagningsrecept. Boken släpptes av KF:s Provkök (Coop) och enligt (Christina Möller) beskriver hon att: Med Vår kokbok har svensk matkultur värnats, den goda svenska husmanskosten behållits och förbättrats, och nya influenser tagits tillvara genom decennierna. En överväldigande majoritet svenskar har fått stöd av kokboken och sett boken som en bästa vän i köket. Den senaste upplagan gavs ut 2009 av bokförlaget Norstedts. Norstedts skapades 1823 enligt (Norstedts.se) och är sveriges äldsta förlag. Förutom detta beskriver (Adlibris, 2009) Vår-kokbok att vara grundkokboken med den traditionella svenska maten. Detta ovan förklarar eller introducerar kort om boken som ska användas för att bygga upp en hemsida för tre olika medium. De tre olika medium består av en Ipad, Iphone och PC-skärm liknande format. Det som ska uppnås med dessa tre medium är att de ska på något viss marknadsföra boken genom några utvalda recept och annan information om exempelvis boken. Layouten kommer eller ska vara uppbyggt på det sätt att den är responsiv. Responsiv eftersom varje medium varierar i skärm storlek och som menas att layouten förflyttar sig och minskar i bred utfirån det medium som används. Layouten kommer att förflytta sig på det sätt att användaren kan ta till sig den information som finns på hemsidan. Detta utan att behöva exempelvis förstora in om en användare använder exempelvis en en Iphone. Webbdesignen eller processen kommer att ske i tre olika stadium i form av skisser för att senare bygga upp den färdiga layouten. I första stadiet skapas en snabb skiss av hemsidan (En LO-FI), i andra stadiet skapas en interaktiv skiss (En MID-FI). MID-FI skissen kommer att expertutvärderas för att senare bygga upp den färdiga layouten (En HI-FI). Expertutvärderingen kommer att bestå av (Nielsens, 1990) heuristisker för att testa hemsidans och/eller Layoutens användbarhet exempelvis när gäller meny-knapparnas funktionalitet, om texten på hemsidan är läsbart eller dess navigation. Det som ska uppnås helt enkelt är att en hemsida ska skapas som ska marknadsföra boken på ett användbart sätt i varje medium. Även designprocessen är viktig eftersom det spelar en stor roll i hur slutresultatet kommer att se ut?

Innehållsförteckning Introduktion;... 1 Koncept...3 Boken...3 Marknadsföring...3 Recept... 3 Webbdesign...4 PC- liknande format... 6 Ipad- liknande format...6 Iphone- liknande format...6 Responsiv... 7 Skisser...7 Lo-Fi Layouts... 7 PC- liknande format-1...7 Ipad- liknande format-2... 8 Iphone- liknande format-3... 9 MID-FI- Layouts...10 PC- liknande format-4...10 Ipad- liknande format-5...11 Iphone- liknande format-6... 12 Resultat... 13 Expertutvärderingar... 13 Slutgiltiga Layouts-1...13 Hi-Fi Layouts...14 PC- liknande format-7...14 Ipad- liknande format-8... 15 Iphone- liknande format-9... 16 Slugiltiga Hi-Fi Layouts-2...16 PC- liknande format-10...17 Ipad- liknande format-11...18 Iphone- liknande format-12... 19 Referenser...20

Koncept Boken Vår-kokbok kom som skrivit för första gången under 50-talet och sen dess har flera upplagor släppts. Den boken som kommer att användas i detta projekt är det senaste, som kom 2009. Enligt Adlibris innehåller boken den traditionella svenska maten eller mer exakt beskriver de att Grundkokboken med den traditionella svenska maten. Nu uppdaterad med nya moderna recept och råvaror. Tidsenlig och inspirerande! Gott och lättlagat, med hänsyn till ekonomi, hälsa och miljö. Förutom detta ovan har den svenska matkulturen värnats enligt (Christina Möller) tack vare kokboken. Hon beskriver också att en överväldigande majoritet svenskar har fått stöd av kokboken och sett boken som en bästa vän i köket. Detta är mer eller mindre sant eftersom enligt (Adlibris) har den senaste boken sålts i 2,3 miljoner exemplar. Detta ovan och/eller Boken kommer att användas för att bygga upp en hemsida som ska marknadsföra den. Det viktigaste att ta upp om boken är exempelvis att den har funnit med länge och förklara eller marknadsföra dess påverkan på svensk matkultur. Detta kommer att förklaras med hjälp av hur många exemplar som har sålts av boken. Eftersom det kan påverka användaren syn på vilken kvalite boken håller till. Helt enkelt kommer boken att användas som ramverk för designen av hemsidan men också med hjälp av dess historia exempelvis att boken kom för första gången på 50-talet. Marknadsföring Det som kommer att marknadsföras är som skrivet boken med hjälp av den fakta som har tagits upp. Detta kan vara dess historia, en kort sammanfattning om vad boken erbjuder och så vidare. Det viktigaste när det gäller marknadsföringen av boken är att ge en "provsmakning" till användaren eller kunden genom att lägga upp några recept på hemsidan som lockar. Därför kommer ett antal eller tre till sex olika enkla recept att läggas upp. Anledningen till valen av enkla recept är för att få användaren eller kunden att ge sin tid vilket kan öka möjligheten för att boken "säljs" i fler exemplar. Recept Med största sannolikhet kommer minst tre recept att användas för att bygga upp hemsidan. Recepten kommer att vara enkla för att som skrivet lättare kunna locka till fler kunder att köpa boken. Några av de enkla recepten som har fått blicken på sig är exemplevis: Pankakor och plättar. Tropiskt fruktsallad. Laxpudding. Dessa recpten ovan kan tillagas under en timma och som kan bedömmas vara enkla recept. Recepten är anpassade för två till sex portioner men kan enkelt portioneras för att anpassa en person om personen vill.

Webbdesign Webbdesignen kommer ske precis som skrivet i introduktionen att Layouten kommer att utvecklas i tre olika stadium. De tre stegen är skisser men dock är den första skissen en LO-Fi som innebär att en låg kvalitets skiss tas fram. Medan den andra skissen är mer genomarbetad alltså en MID-Fi (en medelkvalitets skiss). Det sista steget är mer eller mindre i samband med utvecklingen av hemsidan efter att MID-Fi skissen har testats. MID-Fi skissen kommer att testas eller utvärderas med hjälp av ett program (balsamiq) där en person har möjligheten att skapa en interaktiv layout. Utvärderingen sker som skrivet med hjälp av (Nielsens, 2010) heuristiker. Förutom detta ovan kommer webbdesignen att vara responsiv på det sätt att en person kan använda sig av hemsidan på flera medium som i detta fall en Ipad, Iphone och PC-skärm likande format. Den responsiva delen kommer att bearbetas med hjälp av XHTML/HTML och CSS mallen eller mer exakt med hjälp av XHTML/HTML och CSS media queries. Samtidigt kommer också Javascript/Jquery att användas. För att inte komplicera detta för mycket är det som kommer att användas för att bygga upp hemsidan, en form av ett språk som en person kan använda sig av för att bygga upp en hemsida. XHTML/HTML används för att bygga upp innehållet på en hemsida med hjälp av olika element/strukturer exempelvis head, body och div. Head är huvudet på hemsidan där exempelvis en logga samt de flesta kopplingar till olika dokument genomförs för att ge hemsidan bättre utseende eller en uppbyggnad genom CSS och/eller Javascript/jquery. Dock kan dessa kopplingar genomföras också i Body (kroppen) inom ett div element. För att förenkla detta innebär head och body en form av kroppsuppbyggnad som börjar uppifrån och ner där olika div element kan läggas in för att bygga upp strukturen på hemsidan. Varje div element kan döpas olika exempelvis <body> <div id="text"> </div> </body>. Varje element måste också avslutas med "slash" precis som i exemplet; </div>. I sin helhet ser ett XHTML/HTML dokument ungefär på detta sätt: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> 1- Det ovan talar om för olika webbläsare vilken html version som används. <link href="mal.css" rel="stylesheet" type="text/css"/> </head> <body> </body> </html> 2-Här kommer in oftast länkar till olika dokument exemeplvis CSS/CSS media Queries. <title>tittel</title> <div id=""></div>

CSS ger helt enkelt färg till hemsidan där en person kan exemplevis bestämma storleken på texten, loggan, menyerna, på hemsidan. Javascript/jquery är dock ett språk där en person har möjligheten att bygga mer komplicerade funktioner som oftast inte kan göras i CSS exempelvis att öppna utskriftsdialogen för att skriva ut eller skapa ett formulär som valideras. Nedan vissas ett exempel på Javascript/jquery när det gäller utskrift: $(document).ready(function() { $('a.six').click(function() { window.print(); return false; }); 1- Detta ovan visar att först startas skriptet och sen genom att klicka på knappen ("a.six") som är kopllat till skriptet öppnas utskriftsdialogen. När det gäller CSS media queries ger en person möjligheten att anpassa en hemsida på det sätt att den blir responsiv eller kunna skriva ut en del av hemsida med hjälp av olika media typer som i detta fall @media screen and (min-width: px) för att göra hemsidan responsiv eller @media print för att exempelvis skriva ut en del av en hemsida. För att skriva ut skrivs @media print antingen längs ner i CSS efter media screen eller i ett separat dokument. I sin helhet ser ett CSS dokument ungefär på detta sätt: @media screen and (min-width: 400px){ head{ background-image: url (logga.png); width: 400px; height: 600px; margin-left: auto; margin-right: auto; } 1- Detta ovan i taggen talar om att det ska finna en logga med en viss bred och längd samt dess positionering. body{ background-color: #333; } 2- Dett ovan ger kroppen en bakgrundsfärg. #text{ font: "Times New Roman"; font-size: 24px; text-align:left; color:#fff; } } 3- Detta ovan visar att varje <div id=""></div> element i CSS måste använda sig av hashtags för att dem förändringar en person gör ska visas i en webbläsare.

Det en person ska dock komma ihåg är att dessa olika språk i någon nivå kompleterar varandra. Men i sin grundnivå går det att bygga upp en ganska väl fungerande hemsida med hjälp av XHTML/HTML och CSS. När det gäller hemsidan kommer den byggas upp som responsiv. Hemsidan kommer att innehålla för: PC- liknande format En logga (Vår-kokbok). fem till sex olika menyer som består av Hem, Bilder, Mer-info, kontakt och beställ boken genom ett formulär. Fler menyer kan komma att tillkomma. En bakgrund där det mesta av innehållet kommer att finnas exempelvis text och bilder. Knappar som skriver ut recepten. En "under-logga" där andra länkar kommer att finnas exempelvis en Facebook länk, twitter länk och andra länkar. Twitter feed kommer att finnas och en facebook box där en person kommer att se olika användare av hemsidan i form av bilder. Ipad- liknande format Ipad-liknande formen kommer att innehålla ungefär samma innehåll som PC:n. Dock kommer denna del bara innehålla exempelvis en Facebook-länk och twitter länk istället för twitter feed och en facebook box. Iphone- liknande format Iphone-liknande formen kommer också att innehålla ungefär samma innehåll som Ipad-liknande formen. Dock kommer också denna del bara innehålla exempelvis en Facebook-länk och twitter länk istället för twitter feed och en facebook box. Skillnaden här är att menyerna hamnar istället på "underloggan".

Responsiv Hemsida kommer som skrivet att vara responsiv vilket innebär att det är ännu viktigare att skapa skisser för att underlätta processen. Först och främst skapas som skrivet en LO-FI Layout som innebär att en snabb grundläggande skiss av hemsidan skapas. Efter ska en MID-FI layout skapas som ska utvärderas för att senare bygga upp den färdiga layouten alltså en HI-FI layout. Skisser Skisserna är som skrivet anpassade för 3 olika medium. Med hjälp också av CSS mallen senare kommer "skisserna" eller Layouten att vara anpassningsbar utifrån ett visst medium som används. De 3 olika medium består som skrivet av en PC, Ipad och Iphone-liknande format. Lo-Fi Layouts PC- liknande format-1

Ipad- liknande format-2

Iphone- liknande format-3

MID-FI- Layouts PC- liknande format-4

Resultat Utifrån (Nielsens, 1990) heuristiker har min hemsida testats vilket innebär om hemsidan uppfyller en viss funktionalitet? Med det menas om hemsidan har en bra användbarhet eller som det kallas på engelska Usabilty. Utan att gå ifrån för mycket från designprocessen tilltalar (Nielsens, 1990) heuristiker hur en hemsida har en bra funknalitet på det sätt att användaren inte får problem att navigera, kunna läsa text, förstå texten, hitta och se menyerna, anvädaren ska kunna snabbt ta till sig information och nyttja den, veta vart exempelvis olika menyer leder till, det ska vara effektivt att kunna navigera genom hemsidan och så vidare. Det som har beskrivits här är en tolkning av (Nielsens, 1990) heuristiker och utifrån detta har jag genom experternas insyn kunnat förändra och förbättra min hemsidas design och funktionalitet. Expertutvärderingar Utifrån två frågeställningar har min hemsida bedömts. Första frågan var hur det var att använda sig av hemsidan samt navigera genom den i de olika medium? Den andra frågeställning var vilka fördelar och nackdelar fanns det eller mer exakt vad var det som var positivt samt negativt med den strukturen som har byggts upp genom de olika medium? Dessa frågeställningar var inte förberedda till expertutvärdering men utvärderingen kunde ändå genomföras. Frågetällningar kom upp på plats och det som var förvånande är att de två personerna som var delaktiga hade väldigt lite negativ insyn till den interaktiva hemsidans struktur. Det enda som jag "kritiserades" för var att menyerna på Iphone-liknande formen var för dåligt synliga. Detta innebad att jag behövde ändra i designen när det gäller det Iphone-liknande medium. Det som var positivt annars var enkelheten i att navigera och förståelsen när det gäller vad som är vad på hemsidan. Från min observation dock upplevde jag att experterna hade svårt att navigera speciellt eftersom de klicka lite överallt på hemsidan. Detta kan bero på att den interaktiva hemsidan var i princip skapad i svatvitt. Det kan också bero på att när jag byggde den interaktiva hemsidan hade jag väldigt lite text som förklarade vad en person kan göra och inte. Detta betyder i sin helhet att jag behövde se till att den slutgiltiga Layout eller mer exakt självaste produkten/artefakten blir tyldigt utformat. Detta ova betyder att jag inte helt och hållet uppfyllde (Nielsens, 1990) användbarhet punkterna. Det viktiga dock för min del var experternas insyn eftersom att helt och hållet utgå från min observartion skulle inte riktigt vara positivt när det gäller att förbättra min hemsidas struktur och funktionalitet. Slutgiltiga Layouts-1 Resultat av expertutvärderingar blev ungefär som jag hade tänkt mig. Detta beror på att jag hade väldigt svårt att få funktionaliten att fungera utifrån designen. Jag underskattade svårigheten att exempelvis skapa en "flipster" funktion där en användare kan bläddra mellan olika recept och att skapa en responsiv hemsida. Principiellt lyckades jag ändå mer eller mindre från början till slut hålla mig till designen trots svårigheten. Den stora skillnaden är att jag har en panel på "flipstern" som en person kan klicka på som öpnnar och stänger upp sig där användaren har möjligheten att läsa recepten, skriva ut och välja mellan olika portioner. Facebook boxen och twitter Feed delen har dock också "tagits bort" eftersom det inte skulle i dagsläget tjäna något syfte. Tanken är att boken ska marknadföras genom en hemsida och i dagsläget är marknadföringen av boken bara i "början". Detta innebär om projektet i teorin skulle fortsätta är det positivt för marknadsföringen om sociala medier finns mer med på hemsidan. Länkar finns dock med som leder till facebook

och twitter men gör inte en större påverkan på självaste projektet. Tanken är att en person ska komma till Vår-kokbok facebook sida och twitter. Hi-Fi Layouts PC- liknande format-7

Iphone- liknande format-9 Slugiltiga Hi-Fi Layouts-2 På grund av funktionalitetsproblem med flipstern har jag betämt mig att inte använda den. Detta beror också dock på att jag har fått lite insyn i vilket problem flipstern ställer till. Problemet med flipstern är den påverkar panelens funktion att fungera korrekt vilket har lett till några förändringar i designen av min hemsida. Dem flesta delarna utifrån experutvärderingen är detsamma förutom när det gäller som skrivet flipstern som exempelvis logotypen menyerna och så vidare. Skillnaden är att panelen finns bland "text ramen" eller mer exakt där jag har laggt in text. I nästa sida visas det slutgiltiga resultatet av de tre olika medium:

PC- liknande format-10

Referenser 1- Adlibris. (2009). Vår-kokbok. adlibris.com/se/product.aspx? isbn=911302342x&gclid=cp6_gpthlbccfa12caodl1aa1a. (Hämtad-20-05-2013). 2-Modoku. (2013). modoku.com/resources.html. (Hämtad-08-05-2013). 3-Jbjupiter. (2012). jbjupiter.seesaa.net/upload/detail/image/iphone_template.png.html. (Hämtad- 06-07-2013) 4-Norsteds. (1823). norstedts.se/om-norstedts/. (Hämtad-20-05-2013). 5- Norsteds. (2009). Coop: Vår-kokbok. Ost, ägg och mjölk: Pankakor och plättar, (s.86). 6- Norsteds. (2009). Coop: Vår-kokbok. Fisk och skaldjur: Laxpudding, (s.207). 7- Norsteds. (2009). Coop: Vår-kokbok. Efterrätter: Tropisk fruktsallad (s.528). 8-Nielsen, J. (1990). Nielsens Heuristiker. wikipedia.org/wiki/jakob_nielsen. (Hämtad-05-06- 2013). 9-Percival, S. (2013). seanpercival.com/blog/2010/02/16/ipad-template-graphics/. (Hämtad-08-05- 2013). 10- Stina, Å. (2011). Vår-kokbok: Christina Möller. mynewsdesk.com/se/pressroom/norstedts/pressrelease/view/vaar-kokbok-fyller-60-aar-713091. (Hämtad-20-05-2013). 11-Sketchshare. (2013). sketchshare.co.uk/wp/wpcontent/uploads/2012/02/iphoneportrait_sktchs.png. (Hämtad-08-05-2013). 12-W3school. (2013). HTML XHTML. w3schools.com/html/html_xhtml.asp. (Hämtad-06-06- 2013). 13-W3school. (2013). CSS. w3schools.com/css/css_intro.asp. (Hämtad-06-06-2013). 14-W3school. (2013). Jquery. w3schools.com/jquery/jquery_intro.asp. (Hämtad-06-06-2013). 15-Wikipedia. (2013). Media Queries. en.wikipedia.org/wiki/media_queries. (uppdaterad 29-04- 2013).