ANALYSEOPGAVE Feelgood Bkery Kommuniktion: Helene, Loiuse, Pernille og Ndi Gruppe 14 Hvem er fsenderen? - Glutenfri bgerbrød - Christine og Louise Krogh Hvem er målgruppen? - Gluten llergikere og helsefreks Hvd er fsenderens budskb? - At deres produkt er på lige fod med lm. bgerbrød - Nordisk - Hjemmebg - Hjemmelvet - Nturligt Hvilken effekt ønsler fsenderen t opnå? - Slg - Mer slg - Udbredelse f budskb og foretning - Bredere kundeklintel Hvd skl målgruppen tænke? - Sundt brød - Gultenfri lterntiv - Nordisk hjemmebg
STYLEGUIDE
RESPONSIVT DESIGN
Jens Hogmn Hnsen model: KOMMUNIKATION OG VIRKEMIDLER
Stilrt, udtryk og den røde tråd: Siden hr en rød tråd d siden er holdt i brunlige frver, bggrundsbilledet der går igen på lle siderne er med til t binde siden flot smmen. Typogrfierne er også hold i smme stil d logotype og brødteksten begge er serif skrifttyper, dog er menu-knpperne ikke serifskrifter, men sns serif. Stilrten er meget minimlistisk og designet er rent t se på. Der er dog brugt neonfrver i menuen. Frver: - Nturfrver - Neon menupunkter der skiller sig ud - Dæmpede toner - Trnspernt - Lidt blåligt skær - Ensformigt og brugervenligt - Anlog frvehrmoni -> smme del f frvecirklen, hvilket er med til t skbe ro på siden. - Lys/mørke kontrst --> Det hvide hlvtrnspernte frve der dnner rmme for billederne, er med til t skille billed erne fr bggrunden. Typogrfier og tekstopsætning: - Disply -> logo og overskrift - Brødtekst -> på undersiderne når de omtler deres produkt osv, let læseligt og ligetil. - Konsulttiv tekst -> footerens indhold og menupunkter (opremsning-hurtigt tekst). - Forskellige skrifter -> logo, børdtekst, menu og linksne er understreget. - Slb serif - Tekstopsætning -> Brødtekst er læselig men meget bred smt mærkelig linieopdeling.
Getltlove: Loven om lukkethed d det hvide lg dnner rmme for lle billederne, smt binder det hele smmen, både logo, billeder, brødtekst og footer (se billede på næste hlvdel). Loven om nærhed gælder hvd ngår menuen d teksterne er nbrgt nær hinnden og opfttes hermed som hørende smmen. Kontrster: Stykrekontrst pg. det hvide trnspernte lg og de mørke billeder, smt størrelseskontrst pg. billederne. Frvekontrster pg. skiftende i de sorte og hvide nuncer. Whitespce: Der er gjort brug f en del whitespce, som også er med til t gøre siden overskuelig. Gyldnesnit: Det hvide lg flugter med det gyldne snits ventre og højre linier (verticlt). Symmetrisk: Bsic med bggrundbillede, menu og hvide lg. Kompositionen på siden er generelt hrmonisk, d sitet er centreret i midten og der ikke sker så meget rundt om midter sektionen. Dette gør den overskuelig og enkel. De kompositoriske virkemidler hænger smmen med budskbet i den forstnd t det skl være nyt, enkelt, ligetil og meget stilrent, lidt ligesom deres produkter. KOMPOSITION
HVAD KAN FORBEDRES? - Bggrunden burde nedtones i frverne, d den nemt tger opmærksomeheden. - Nvigtionen er uoverskuelig og ligger pt. i to lg, hvilket på ingen måde er optimlt. Den hvide font frve er også svær t se på bggrundsbilledet. - Fonten minder llermest om en hjemmeside lvet på 123hjemmeside.dk, hvilket ikke er et kompliment. - Overblikket på siden er ok, dog er der nogle problemer med menuen når siden er i mobilvisning. - Billederne på siden fungerer ikke som links, hvilket er meget irriterende og burde redesignes. - Derudover burde menupunkterne smles i færre ktegorier, dette vil gøre den lngt mere overskuelig og brugervenlig.
HVILKEN SIDE ER DETTE: Dette er et site om glutenfrit brød. Sitet viser nogle billeder f disse bgerprodukter. Altså er vi på besøg hos en bger, der hedder Feel good bkery. HVAD HEDDER DENNE SIDE: Siden hedder Feelgoodbkery nturligt og glutenfri. HVILKE SEKTIONER KAN JEG FINDE PÅ SIDEN: Deres menu er gnske uoverskuelig og svær t læse. Derud over er det svært t skelne om der er nogle f menupunkterne der skl forstille t veje tungere end ndre, d de lle hr smme størrelse og form. LOKAL NAVIGATION: Siden hr ikke som sådn lokle nvigtioner, men den hr dog et pr links til nogle f billederne. I nogle f menupunkterne findes der undermenuer. Går du ind under denne undermenu, kn du dog ikke loklt, hoppe rundt mellem de foskellige punkter i undermenuen, hvilket her ville være relevnt, d der er tle om en opskrift oversigt. HVOR ER JEG INDIKATORER : Den eneste hvor er jeg på siden - indiktor, er en neonfrve. Ved hover funktionen kommer der en neon grøn frve frem inden tryk. Og hvis du befinder dig på en f menusiderne, er menupunktet neon pink. Ikke et frvevlg vi vil benytte os f. SØGEFUNKTIONER: Siden hr ikke nogen indlgt søgefunktion. Dette er synd, d det kn smide brugeren der bre lige hurtigt sl finde noget væk fr siden. Den eneste måde mn kn søge, er ved t bruge browserens søgefunktion i form f Ctrl f / cmd f.
Feelgood Bkery brude med sit budskb stæbe efter et design der minder om Lndbgeriet, d det både er moderne, men også får vist hvd det er siden går ud på, nemlig brød og kge. RESEARCH
KONCEPT OG IDE STYLEGUIDE I vores ideproces kiggede vi på ndre hjemmesider og brinstormede. Vi sd hver i sær og prøvede t finde inspirtion til hvordn vi ville hve vores redesign til t se ud. Vi endte med t finde en nden bgeside og fndt lidt inspirtion her(lndbgeriet.dk). Vi blev enige om t vi ville hve en lidt gmmeldgs og lndlig stil med bl.. rustikt træ og rmmer i form f polroid fotos.
WIREFRAMES Desktop Tblet Mobil logo HOME OM OS OPSKRIFTER WEBSHOP Q/A section_ lndingpge HOME OM OS OPSKRIFTER WEBSHOP Q/A section_ lndingpge MENU section_ lndingpge footer(copyright, fcebook og instgrm link) footer(copyright, fcebook og instgrm link) HOME OM OS OPSKRIFTER WEBSHOP Q/A section_omos Text............ footer(copyright, fcebook og instgrm link) HOME OM OS OPSKRIFTER WEBSHOP Q/A section_omos Text... MENU section_omos Text............ footer(copyright, fcebook og instgrm link) footer(copyright, fcebook og instgrm link) HOME OM OS OPSKRIFTER WEBSHOP Q/A section_opskrifter Text...... footer(copyright, fcebook og instgrm link) HOME OM OS OPSKRIFTER WEBSHOP Q/A section_opskrifter Text... MENU section_opskrifter Text......... footer(copyright, fcebook og instgrm link) footer(copyright, fcebook og instgrm link) HOME OM OS OPSKRIFTER WEBSHOP Q/A section_q/ Text............ footer(copyright, fcebook og instgrm link) HOME OM OS OPSKRIFTER WEBSHOP Q/A section_q/ Text... MENU section_q/ Text............ footer(copyright, fcebook og instgrm link) footer(copyright, fcebook og instgrm link) MENU section_webshop HOME OM OS OPSKRIFTER WEBSHOP Q/A section_webshop footer(copyright, fcebook og instgrm link) HOME OM OS OPSKRIFTER WEBSHOP Q/A section_webshop footer(copyright, fcebook og instgrm link) footer(copyright, fcebook og instgrm link)
MOCKUP - DESKTOP
MOCKUP - DESKTOP
MOCKUP - TABLET
MOCKUP - TABLET
MOCKUP - MOBIL
MOCKUP - MOBIL
LAYOUTDIAGRAM Desktop.pgewrpper heder img(logo) nv section div img img img img footer.pgewrpper heder nv section h1 p footer.pgewrpper heder nv section div p h1 img img img img footer.pgewrpper heder nv section p h1 footer.pgewrpper heder nv section div h1 img img img img img img footer serch br serch br serch br serch br serch br Tblet og mobil.pgewrpper heder nv section div img img img img img img footer.pgewrpper heder nv section h1 p footer.pgewrpper heder nv section h1 div p img img img img footer.pgewrpper heder nv section h1 p footer.pgewrpper heder nv section div img img img img img img footer
BRUGERTEST
BRUGERTEST
BESKRIVELSE AF PROCES MANDAG: Mndg rbejdede vi med nlyse f det site vi fik til opgve t redesigne. Vi vr produktive og fik nået det vi skulle nå. Vi kiggede bl.. på design og funktionlitet og begyndte t tænke over hvd vi kunne tænke os t forbedre på websitet. Vi begyndte t gå i tænkeboks mht. design og stil på vores redesign. TIRSDAG: Tirsdg rbejdede vi med styleguide, mockups, lyoutdigrmmer og wirefrmes. Der ud over begyndte vi på t designe et nyt logo til sitet. Vi forberedte bggrunde og billeder som vi ville bruge til de forskellige sider på sitet. ONSDAG: Onsdg begyndte vi på t kode. Vi hvde hjemme færdiggjort styleguide, mockups, lyoutdigrmmer og wirefrmes. Vi strtede med t oprette bsis-kodning til de forskellige sider vi hvde vlgt t redesigne så vi kunne strte kodnings-processen. TORSDAG: Torsdg fortstte vi vores HTML kodning og CSS styling f sitet. Vi hvde en del problemer med nogle forskellige ting og fik vejledning et pr gnge i løbet f dgen. Vi fik styr på hvd vi mnglede så vi vr klr til t gå igng med de sidste ting til fredg FREDAG: Fredg fortstte vi med kodningen. Først hvde vi et foredrg om usbility som vi ikke lige hvde tget med i vores plnlægning, så her kom vi lidt under tidspres. Vi færdiggjorde vores desktop version og begyndte t kode vores tblet og mobil version. Vi hvde store problemer med t få vores sider til t være responsive. Vi hvde færdiggjort vores desktop version og stte mediquiries ind for tblet og mobil, og så fungerede vores desktop pludselig ikke.
REFLEKTION I vores redesign f websitet hr vi lgt vægt på t det skl være tydeligt hvem fsenderen er og hvd sitet omhndler. Vi hr fokuseret på t vores design skulle være lndeligt, simpelt men stdig moderne og rustikt. En ændring fr deres gmle side til den nye er t vi blndt ndet hr slået menu-bren smmen så den er blevet mere overskuelig. Vi hr ligeledes skbt en rød tråd gennem hele sitet, i form f gennemgående bggrundsbillede og nturfrver. Vi hr holdt det i en nlog frvehrmoni. Hvd ngår typogrfi hr vi vlgt fonten Rod som giver siden et gmmeldgs look som vr det en skrivemskine. Dette fungerer godt i vores design, d udtrykket er lndligt og vi hr bygget designet op så det ligner en opskrift, pg. det hvide ppir som dnner rmme for tekst og billeder. Vores site er opbygget symmetrisk og vores komposition er generelt hrmonisk, vi hr også benyttet os f white spce i form f plnkerne i bggrundsbillede. De kompositoriske virkemidler hænger godt smmen med det budskb vi vil ud med, om t det skl være enkelt, hyggeligt og lndeligt og skbe ssociering til en bger/det t bge.
VANSKELIGHEDER OG MANGLER Det hr været en kæmpe mundfuld for vores gruppe, i og med t ingen f os ldrig hr rbejdet med HTML og CSS før vi strtede her. Vi føler t opgven hr været for omfttende i forhold til tidsfristen. Derfor mngler vores side en msse. Vi hr kun fået implementeret vores desktop version, som stdig hr få mngler i form f en ikke fungerende søgebr og en mnglende webshop-side, og links på billederne under opskrifter. Tblet og mobil version mngler grundet tidsmngel, smt t når vi prøvede t kode til tblet og mobil, gjorde det t vores desktop version blev flyttet og kom ud f funktion og flere elementer forsvndt, til trods for t vi kodede det på den måde som vi hr lært(og gjort med vores portfolioer). Vi brugte lng tid på t prøve t løse problemet, men vi kunne ikke finde frem til fejlen. Så vi vlgte t priotere en velfungerende desktop version frem for et meget mngelfuldt produkt i form f tre devices som lle ville hve store mngler pg. fejl i kodningen.
LINK TIL REDESIGNET SIDE: Link til side: http://mrylund.dk/bkery/gruppeopgve_hjemmeside/ hjemmeside/home/index.html Login: Brugernvn: kemmd Kode: kode2015