Analyse af websiden FeelgoodBakery.dk

1.semester Multimediedesign Gruppe:Alba,Jacqueline,NadiaogAnneMai Uge40 Gruppeopgave Analyse af websiden FeelgoodBakery.dk Link til redesign af webside: http://nadiacah.com/uge40/landingpage.html Hvem er afsenderen? -! Feelgoodbackery Hvem er målgruppen? -! Den moderne familiemor -! Det moderne-fællesskabsorienterede segment -! Det grønne segment -! Det senmoderne menneske Hvad er afsenderens budskab? -! Lægger vægt på kvalitet, sundhed, økologi og miljø -! Inkarnere det glutenfri produkter i danskernes hverdag -! Gøre glutenfri produkter lettere tilgængeligt Hvilken effekt ønsker afsenderen at opnå? Hvad kan du forstille dig, at afsenderen ønsker, at målgruppen skal tænke om afsenderen? -! Professionelle -! Dedikeret og passioneret -! Tryghed -! Erfarende -! Intimt/personligt Responsive design Breakpoints Desktop breakpoints Min 640 x max 1440 1440x805 1226x577 1040x577 1024x577

1.semester Multimediedesign Gruppe:Alba,Jacqueline,NadiaogAnneMai 900x577 898x577 850x577 800x577 694x577 640x577 Uge40 Gruppeopgave Tablet breakpoints Max 768 Mobil breakpoints Iphone 4: 320x480 Iphone 5: 320x568 Iphone 6: 375x627 Iphone 6 plus: 414x736 Wireframes

1.semester Multimediedesign Gruppe:Alba,Jacqueline,NadiaogAnneMai Uge40 Gruppeopgave Designprincip Siden følger princippet for mostly fluid Kommunikation og virkemidler

1.semester Multimediedesign Gruppe:Alba,Jacqueline,NadiaogAnneMai Uge40 Gruppeopgave Det funktionelle behov: @! Det er forholdsvist tydeligt hvilke funktioner diverse elementer på websitet har. Synligheden er opfyldt i en middel grad, da mange af navigationsknapperne samt knapper til links er små og falder i et med baggrund. @! Det er meget simple og korte beskrivelser. @! Strukturen er simpel og klassisk opbygget. Man kender sitet eller føler man har set det før, da det er en meget brugt website struktur. Behov for relevans: @! Billeder og illustrationer er meget relevante. Idet man trykker sig ind på sitet ved man at det handler om brød og bagværk. Logoet er dog ikke særlig relevant, da det visuelle look for logoet ikke har noget med produktet at gøre. Billederne under OM FEELGOOD BAKERY kunne være mere relevante, for at give et mere professionelt udtryk til modtager. Farverne i navigationen skaber kun forvirring og er unødvendige. @! Hovedinformationer er korte og præcise, med et lille personificeres twist. Enkelte afsnit og punkter virker lidt irrelevante, og giver udtryk for en mere useriøs side, dog viser den mere om afsender som personer. @! For mange afsnit og knapper. Mange elementer kunne slås sammen for at skabe mere renhed på sitet, så man ville opnå et bedre overblik. Det emotionelle behov: @! En simpel stil med få features med et alternativt twist. @! En enkel og personlig skrivestil. Den er let og tilgængelig. Det bliver givet passende informationer, og man får samtidig et indtryk af deres karakter. @! Det er et sitet præget meget af afsenders ambitioner og mål med produktet, som i dette tilfælde er et livsprojekt. Man bliver en del af deres ide og koncept! en del af et bagværks fællesskab.

1.semester Multimediedesign Gruppe:Alba,Jacqueline,NadiaogAnneMai Uge40 Gruppeopgave Grafiske virkemiddel Stilart, udtryk og den røde tråd Har siden en rød tråd i sine visuelle elementer? Fotostil, illustrationsstil, animationsstil, typografi, farver osv. Der er en overordnet rød tråd på siden, ved at der er ting der gentager siger, så som typografien, boksene og baggrunden er ens på hver side. Dog bliver den røde tråd brudt, når man går ind i webshoppen. I webshoppen kommer man, ind på en helt anden side der er mere simpel, siden er uden baggrund, menuen og font er også anderledes, hvilket gør det forvirrende for kunden. Er der brugt en stilart? Hvordan vil du kategorisere stilen? Siden har en simpel/enkel stil. Den er overskuelig at se på og forholdsvis nem at finde rundt på. Farver Er der brugt en overskuelig farvepalet? Og i så fald hvilke kontraster og harmonier er der i farverne? Komplementær kontrast, Lys/mørke kontrast, Monokromatiske farver Treklangs farver osv. Understøtter brug af farverne hierarkiet og sidens indhold? Farverne er meget overskuelige og rare for øjnene at kigge på. Der blevet gjort meget brug af jord/brunlige nuancer, hvilket er harmoniske og komplementær farver. Derudover er der også blevet gjort brug af kontraster i form af hvid og sort.

1.semester Multimediedesign Gruppe:Alba,Jacqueline,NadiaogAnneMai Uge40 Gruppeopgave Typografi og tekstopsætning Hvor er der brugt, display skrif, brødtekst og konsultativ tekst? Der er blevet brugt display skrift i logoet. Brødtekst er der blevet når der information om firmaet og om deres produkter. Konsultativ tekst er blevet under kontakt feltet. Hvor mange forskellige skrifer er der brugt? Der er blevet brugt 3 forskellige skrifttyper; Adellekøbt), Asap, Neue Helveticakøbt). I hvilke klassificeringsgrupper tilhører disse skrifer? Der er blevet gjort brug af én pladeserif adelle) og resten er sans-serif Følger tekstopsætningen konventionerne? Ja. Er brødteksten fx let at læse, er der for lange linjer osv. Passer valget af skrif til sidens budskab og indhold? Brødteksten er forholdsvis let at læse, dog er linjerne lidt for lange på om siden. Teksten kunne godt være lidt smallere, så der i stedet var en lidt smallere boks med flere linjer. Brødteksten passer meget godt til sidens indhold, da den også er simpel og enkel at læse. Komposition Gestaltlove: På deres landing page ser man to former for gestaltlove der er blevet anvendt. Ser man på menuen, er der blevet anvendt loven om nærhed. Hvilket betyder at vi ved selvom det ikke er i en boks, at de hører sammen. Desuden er der farvekontraster i menuen. Farven pink indikere at jeg nu står på HOME siden. Men kører jeg cursoren over på en af de andre menupunkter ændre farven sig til grøn. Hjemmesiden er som helhed er harmonisk og symmetrisk, det eneste der forstyrre freden er faverne i navigationen. Se nedenfor.

1.semester Multimediedesign Gruppe:Alba,Jacqueline,NadiaogAnneMai Uge40 Gruppeopgave og her ser man loven om lukkethed Der er også blevet gjort brug af whitespace. Det er den samme baggrund, der bliver anvendt på alle sider billede 1), undtagen webshoppen. Men her anvendes der også whitespace billede 2). Webshoppen:

1.semester Multimediedesign Gruppe:Alba,Jacqueline,NadiaogAnneMai Uge40 Gruppeopgave Derudover bruges der også styrkekontrast. Her ser man at den øverste og nederste del af er mere gennemsigtig i forhold til i midten. Størrelses/styrke-kontrasterne hierarki) ses tydeligt i form at skriften. Øverst ser vi logoet og navnet på virksomheden i storskrift. På midten er informationen i normal læsestørrelse, og nederst på siden blevet teksten mere utydelig, det er ikke her vi lægger fokus, men det er stadig relevant information. Sproglige virkemiddel Hvordan er tonen? Tonen er i visse afsnit ovre i den mere formelle stil, men dette er i form at opskrifter og beskrivelse af produkter. Der bliver dog også implementeret en stor del af deres personlighed i form af afvigelser som Vores Chocolate Chip Cookies har efterhånden fået sin egen fanskare - folk elsker dem, uanset om hvede og gluten er et problem eller ej!. En meget personlig stil, som passer godt til deres udtryk og budskab, et fælles-brød-projekt. Er der meget eller lidt tekst? Ikke for meget tekst. Teksten er i fin balance med billeder og andre visuelle elementer på siden. Er teksten relevant? Mange af informationerne og afsnittene er korte og præcise, med et lille personligt touch. Enkelte afsnit og punkter virker lidt irrelevante, og giver udtryk for en mere useriøs side, dog viser den mere om afsender som personer. Er teksten let at læse og overskuelig? Teksten er letlæselig og overskuelig. Hvordan er tekstens personlighed? En ung og ambitiøs kvinde i midt 30 erne bosiddende i indre by. Strukturel virkemiddel

1.semester Multimediedesign Gruppe:Alba,Jacqueline,NadiaogAnneMai Uge40 Gruppeopgave Site-arkitektur post it agtig sturktur) Home: @! Navigations bar @! Logo @! Img. Med tilhørende links til opskrifter @! Kontakt @! Links til facebook og instagram Butik: @! @! @! @! @! Navigations bar Logo Txt: location + åbningstider Kontakt Links til facebook og instagram Webshop: serperate side @! Navigations bar @! Logo @! Img. Med link til køb af vare + Melmix og mel: flere undersider m. Samme tema) @! Navigations bar @! Logo @! Overskrift @! Tilhørende txt @! Link til webshop @! Img. X 4 x 1 m. Special effekt af billede skift @! Kontakt @! Links til facebook og instagram + opskrifter: @! Navigations bar @! Logo @! Overskrift @! Tilhørende txt @! Link til webshop @! Img. X 14 M. Links til webshop @! Kontakt @! Links til facebook og instagram Spørgsmål og svar:

1.semester Multimediedesign Gruppe:Alba,Jacqueline,NadiaogAnneMai @! Navigations bar @! Logo @! Overskrift @! Tilhørende txt @! Link til mail, facebook @! Txt: spørgsmål og svar @! Links til diveres sider relateret til spørgsmål @! Kontakt @! Links til facebook og instagram Uge40 Gruppeopgave Testimonials: @! Navigations bar @! Logo @! Overskrift @! Tilhørende txt @! Links relevant til indhold @! Img. X5 @! Kontakt @! Links til facebook og instagram Om feelgood bakery: @! Navigations bar @! Logo @! txt @! Img. X 4 @! Kontakt @! Links til facebook og instagram Kontakt: @! Navigations bar @! Logo @! txt @! Kontakt @! Links til facebook og instagram Hvordan ser navigationen ud? Er den overskuelig? Kan du benævne hvilken type for navigation, der er brugt? @! Navigationen er placeret øverst på siden, den er uoverskuelig og tilpasser siden efter størrelse, responsiv. Måske skulle den forenkles og fastgøres på siden

1.semester Multimediedesign Gruppe:Alba,Jacqueline,NadiaogAnneMai Hvad kan forbedres Uge40 Gruppeopgave Hvad fungerer godt?! Delvis layout, opbygning, bokse fungere udmærket.! Farvevalg er også fin i forhold til koncept og budskab Hvad kan forbedres?! Der kan helt klart ske en forbedring i navigationsbaren. På den eksisterende side er navigationsbaren lidt for uoverskuelig. Meget af indholdet i de forskellige faner kan snildt samles til en. En klar forbedring ville være mere stuktur i indholdet, og samle faner der er nært relateret.!!! Det er slet ikke nødvendigt at have kontakt nævnt på så mange sider. Deres landingpage kunne godt trænge til en forbedring. På den eksisterende side er vi klare over at det har noget med brød at gøre, men det er vigtig at ens landingpage illustrere ens ønskede budskab og formål, og dermed gøre det attraktivt og nemt forståligt for kunden, så de får lyst til at kigge videre og blive på siden, og det gør den der findes nu ikke. Feelgood har en webshop tilknyttet deres hjemmeside, dog leder dette link videre til en ny side, som ingen relation har til deres egen hjemmeside. Det ville være en klar forbedring hvis det var en del af deres engen side og at man ikke bliver ledt videre. Research De diverse bageri websites er meget lig hinanden. Der er fokus på produktet, kvaliteten og processen fra ovn til bord. Mange store og iøjnefaldende billeder som popper ud af skærmen. Centreret og overskuelig tekst. Feelgood Bakery kan have hentet inspiration fra Lagkage Husets website, det opbygningen, det visuelle og indholdet er ensartet. Andersen Bakery and Cafe http://andersen-danmark.dk Bæst & Mirabelle http://baest.dk Lagkagehuset http://www.lagkagehuset.dk Koncept og idé Vores idé til redesignet af websiden FeelgoodBakery.dk, var at forenkle siden, gøre den mere overskuelig samtidig med at bibeholde nogle af de elementer som siden havde i forvejen.

1.semester Multimediedesign Gruppe:Alba,Jacqueline,NadiaogAnneMai Uge40 Gruppeopgave Grundlæggende ville vi samle sider og indhold som var nært relateret, forenkle menuen, gøre webshoppen til en del af siden, og ikke som en ekstern side som den var på den eksisterende. Desktop: Wireframes Tablet:

1.semester Multimediedesign Gruppe:Alba,Jacqueline,NadiaogAnneMai Uge40 Gruppeopgave Mobil: Styeguide

1.semester Multimediedesign Gruppe:Alba,Jacqueline,NadiaogAnneMai Uge40 Gruppeopgave Mockups

1.semester Multimediedesign Gruppe:Alba,Jacqueline,NadiaogAnneMai Uge40 Gruppeopgave

1.semester Multimediedesign Gruppe:Alba,Jacqueline,NadiaogAnneMai Uge40 Gruppeopgave Layoutdiagrammer Desktop:Hjem

1.semester Multimediedesign Gruppe:Alba,Jacqueline,NadiaogAnneMai Desktop: Om Uge40 Gruppeopgave Desktop: website Desktop: kontakt

1.semester Multimediedesign Gruppe:Alba,Jacqueline,NadiaogAnneMai Uge40 Gruppeopgave Tablet og Mobil: hjem

1.semester Multimediedesign Gruppe:Alba,Jacqueline,NadiaogAnneMai Tablet og Mobil: Om Uge40 Gruppeopgave Tablet og Mobil: webshop

1.semester Multimediedesign Gruppe:Alba,Jacqueline,NadiaogAnneMai Tablet og Mobil: kontakt Uge40 Gruppeopgave Skema til Usability test Gruppe nr. 7 Test gruppe nr. 9 Beskrivelse af test og testresultater Spørgsmål 1.! Find ud af hvem der står bag sitet 2.! Find butikkens adresse og åbningstider 3.! Find eksempler på butikkens varer. Køb en vare. 4.! Send en mail til butikken find kontaktinformation) 5.! evt...

1.semester Multimediedesign Uge40 Gruppeopgave Gruppe:Alba,Jacqueline,NadiaogAnneMai Nr. Svar Problemer Forslag0til0løsning Hvor0lang0tid0vil0det0 tage0at0løse? 1 FeelgoodBakery meget tydeligtpåfrontpagen. 2 Megetnemtogoverskueligtat finde.iogmedatnavligger øverstpåsitet. 3 Webshoppenerstadigikke færdiggjort.mensiteter megetoverskueligt,ogvi forstårpointen.menhvorer kurven?"" 4 Mailenernematfinde,men mangelpårubrik. 5 Logoetpåfrontpagener forstørretformeget,dettegør atdetermegetpixileret. Mindregodt. Yderligekommentarer:Vi synesatjereswebsiteer lækkertafdesign.superenkelt ogoverskueligt. Pissegodttøser. Ingenproblemer. Ingenproblemer DetvedIgodt!" Refleksion Beskrivelse af vores redesign af websiden FeelgoodBakery: I vores redesign af websiden FeelgoodBakery har vi forsøgt at bibeholde nogle af de features og træk som den eksisterende side indeholder, dog var vores intention med vores redesign at vi skulle forenkle hjemmesiden og gøre den mere overskuelig for brugeren. Vi har lavet en del ændringer i vores redesign i forhold til den eksisterende webside. Vi har lavet ændringer i kompositionen, kommunikationen, designet og interaktionen.

1.semester Multimediedesign Gruppe:Alba,Jacqueline,NadiaogAnneMai Uge40 Gruppeopgave Komposition: I forhold til kompositionen har vi bibeholdt de samme features som den eksisterende side indeholder og vores layoutet minder forholdsvis meget den eksisterende webside. Vi har brugt gestaltlove, så som loven om nærhed i menuen, på alle websidens sider, derudover er den fortsat harmonisk og symmetrisk. Dog har vi med hensyn til menuen slået flere menu punkter sammen så den kunne blive lidt mere overskuelig. Vi har også brugt loven om lukkethed på samme måde som på den eksisterende webside. Det har vi gjort ved brug af whitespace, på alle undersider: Vi har også bibeholdt styrkekontrast i samme form som den eksisterende side, i den form at indhold er indrammet i en box som er lettere gennemsigtig, og hvor Logo, menu og footer ligger udenfor. Denne effekt gør at man kan skelne at der er forskel på indhold og fastliggende objekter. Kommunikation: I forhold til kommunikation har vi har vi fuldstændig ændret websidens kommunikative funktioner. Vi har ændret hjem, så den kun indeholder butikkens facade, og fjernet det indhold som før var på siden. Derudover har vi fjernet kontakt information som før var på alle sider og samlet det i en side, så brugeren mere overskueligt ville kunne finde de oplysninger som de søger efter. Vi har også samlet alle sider som havde det tilfælles at de gav informationer om produkt og køb af produkt, nu findes alle disse information under en under side og ikke tre som før. Vi har valgt at fjerne siderne, spørgsmål og svar, og testimoniels, da vi mente at om siden i forvejen indeholdte det budskab som brugerne søger efter, og dette har vi gjort for at brugere lettere danne et indtryk af butikkens budskab. Redesignet af websiden har medført at målgruppe aldersmæssigt muligvis er breder, dog appellere den stadig til det grønne segment og det senmoderne menneske. Vores redesign opfylder også stadig det funktionelle behov, da det er tydligt hvilke funktioner diverse elementer på websiden har. Vi har forsøgt at forøge synligheden ved at ændre menuen og de tilhørende sider. Det er nu mere tydligt en før hvor menuen er og hvad menuen gør. Vi har også nogenlunde bibeholdt strukturen, som fortsat er simpel og klassisk opbygget. I forhold til relevans, er vores billeder stadig relevante. Siden sender et tydeligt budskab om at websiden har et forhold til bagværk. Vi har lavet små ændringer til logoet, så det blev en lille smule mere relevant. Vi har fjernet de blå bobler, som før fandtes i logoet. Dette har vi gjort da vi ikke mente det sendte de rigtige signaler med hensyn til butikkens produkt. Vi har dog beholdt den runde cirkel fra logoet og centret den rundet om ordet good, da tydelige gøre budskabet om at dette er godt bagværk. I forhold til det emotionelle behov, har vi bibeholdt deres personlige skrivestil, da vi mente at det er en del af deres udtryk.

1.semester Multimediedesign Gruppe:Alba,Jacqueline,NadiaogAnneMai Uge40 Gruppeopgave Design: I redesignet af websiden er der forsat en rødtråd i de design elementer der findes på siden. Farver, bokse, typografi og baggrund går igen på alle sider, med undtagelse fra hjem siden der har en anden baggrund for at tydeligøre at dette er den overordnede side. Vores stilart minder også meget om den eksisterende webside, da den er simpel og enkel. Vi har valgt at ændre farvepaletten da vi mente at en mere neutral farvepalette ville være mere passende i forhold til butikkens budskab. Vores farvebrug er ikke ekstensiv, men indeholder dog farve kontrast i form af hvid og sort og harmoniske brunlige nuancer i vores baggrundsbillede. Vi har også lavet ændringer til typografien, dog mest fordi de skrifttyper som den eksisterende side indeholder er købeskrifter. Vi har derfor ændret skrifttyperne, men samtidig forsøgt at finde nogle som til dels mindede om de eksisterende. Vi har bibeholdt display skrift i logoet, brødtekst til den informative tekst og konsultativ til kontakt. Vores skrift typer er american typewriter, regular og adelle, den ene er pladeserif og den anden sans-serif. American type writer har vi valgt som vore primære font type, den bruge både til logo og brødtekst, hvor adelle bruges til navigationen. Interaktion: @! Beskrivelse af vores proces: Vi har forsøgt at strukturere vores proces ud fra den proces som var forslået i opgave beskrivesen. Alt i alt har vi overholdt forslaget, dog har css delen optaget det meste af fredagen, da vi ikke er så stærke i det endnu. Vi har gennem hele opgavens forløb forsøgt at dele opgaven mellem os, så vi hurtigst muligt har kunne færdiggøre opgaven. Sener fandt vi dog ud af at vi måske skulle have haft en mere klar plan over opdeling af opgave, så vi ikke var kommet til at arbejde på de samme elementer og side med de samme problemer, da dette har medført en del spild tid. Vanskeligheder vi har stødt på undervejs:

1.semester Multimediedesign Uge40 Gruppeopgave Gruppe:Alba,Jacqueline,NadiaogAnneMai De vanskeligheder vi er stødt på undervejs er lidt af det hele, da dette emne er nyt for os alle sammen. Dog findes de fleste af vores vanskeligheder i udførelsen af css, herunder placering af elementer, navigation, media quaries, breakpoints og scalering af billeder Hvad fungere godt? Det der fungere godt på vores redesign efter megen frustration er navigationen, da den er nem at navigere i, synlig og overskuelig. Vores layout, da den er simple og overskuelig. Hvad kan forbedres?: Der er selvfølgelig en del ting som ville forbedre vores redesign. Vores billede valg, billede opløsning, en fungerende webshop med tilhørende undersider til køb af vare, footer og sikkert andre ting.