Feelgood Bakery Re-design. Jaqueline, Elisabeth, Caroline & Nathalie Gruppe 4

Transkript

1 Feelgood Bakery Re-design Jaqueline, Elisabeth, Caroline & Nathalie Gruppe 4 Københavns Erhversakadami Multimedie Design Marts 2016

2 Re-design af Feelgood Bakery feelg.html Brugernavn: kea2016 Kodeord:mmdkode

3 Kommunikation Analyse Hvem er afsenderen? - Feelgood Bakery. Hvem er målgruppen? - Målgruppen består af glutenallergikere, og folk som af andre årsager ønsker at udelukke gluten i deres kost. Hvad er afsenderens budskab? - Feelgood Bakerys vision og mål er, at udvikle og sælge gennemtestede hvede- og glutenfri mel-mix af høj kvalitet, så man selv kan opnå gode bage resultater i eget køkken. Man skal have oplevelsen af at være beriget, og ikke føle, at man spiser noget på bekostning af f.eks. smag, konsistens og friskhed. Hvilken effekt ønsker afsenderen at opnå? - At man kan opnå lækre og simple bage resultater, uden det behøver at indeholde gluten, hvede eller delvis sukker. Hvad kan du forestille dig afsenderen ønsker, at målgruppen skal tænke om afsenderen? - Feelgood Bakery udbyder et eksklusivt produkt, der også gør det muligt for forbrugeren at bage derhjemme, hvor de samtidig tager højde for de store forholdsregler uden at gå ned på kvalitet.

4 Grafisk virkemiddel Er behovet for relevans opfyldt? - Siden indeholder gode illustrationer i forhold til sidens formål og indhold (deres produkter). Dog virker rækkefølgen af deres elementer lidt ustruktureret og rodet. Engagerer siden emotionelt? - Siden overbeviser brugeren om, at deres varer er glutenfrit, men de sælger/promoverer ikke produkterne optimalt. Derudover er der heller ikke fokus nok på, at deres varer også er hvedefri, veganske og delvis sukkerfrie. Styleguide Farver - Naturlige farver (bagværk), menuen er holdt i pink og grøn farve, hvilket forvirrer læseren meget - logoet er blå farve (neutral farve), som fungerer godt. Farverne på billederne er med til at skabe en vis stemning, som er rolig - passer godt til sidens indhold. Den konstante baggrund af brød gør det besværligt for læseren at overskue at læse. Menuens farver og udtryk - Menuen er til at finde, men den virker uoverskuelig i sit udtryk grundet farvevalget. Pink og grøn (menuens farver) er kontrastfarver. Menuen er fuld screen menu og delvis drop down menu. Øverst på siden er der brugt display skrift til at adskille de forskellige menupunkter. Der er brugt 3 forskellige skrifter - menu-, logo- og brødtekst-skriften. Klassificerings Gruppe - Brødteksten er skrevet med en skrifttype, som indeholder fødder (dette bør helst undgås på website). Tekstopsætning - Brødteksten er meget letlæselig og passer til indholdet samt budskab. Der er en god forståelse for, hvad der er hvad. Skrifterne harmonerer sammen, idet der er brugt samme skrivestil med fødder. Den eneste skrifttype, som skiller sig ud er menu-skriften, som ikke har fødder - den er derimod stadig læsevenlig og passer sammen med de andre skrifter med sin enkelhed. Man kan sagtens finde en masse information om produkterne, butikken, personerne bag osv., som er skrevet i en kortfattet skrivestil.

5 Komposition Billederne og teksterne er harmoniske - de følger hinanden. Det er tydeligt, hvad der hænger sammen. Billederne/teksterne på hele siden forekommer symmetrisk, som gør det let for læseren at læse/forstå. Der er ikke noget tydeligt forhold mellem de kompositoriske virkemidler ift. til budskabet og afsenderen. Typografi - Meget simpelt, overkommeligt og minimalt brug af tekst på siden. Hvordan vil du kategorisere stilen? - Der er forsøgt at lave en varm og imødekommende side, men deres baggrundsbillede gør det uoverskueligt for læseren at danne sig et overblik. Der mangler i høj grad en rød tråd gennem sidens stilart.

6 Sprogligt virkemiddel Teksten er meget letlæselig og samtidig relevant ift. sidens indhold og budskab. Sidens tekst er meget overskueligt, men får ikke direkte overbevist sine brugere. Tonen er formel, delvis personlig, da sidem bruger ordet du. Teksten vil virke mere overbevisende, hvis den forekommer i en tone, som henviser mere direkte til målgruppen. Der findes ingen overflødig tekst - kort og præcis (dog findes der mange lange sætninger i opbygningen). Alligevel er det ikke en side, som man har lyst til at browse rundt på - tværtimod. Siden er derimod mere et sted, som man søger hen, hvis man leder efter konkret information. Hvis man tager sig god tid kan man blive positivt overrasket over den store mængde information, som siden oplyser. Research og inspirations kilder Meyers bageri Mette Blomsterberg Emmerys Claus Holm Meyersmad.dk Reklektion Vi har i denne uge arbejdet med redesign af Feelgood Bakery. Vi har i den forbindelse benyttet os af forskellige modeller, teorier, fagudtryk, som vi de sidste fire uger har arbejdet med. Vi har bla.a reflekteret over kompostion, sprogligt, grafisk og struktuelt virkemiddel. Inden for kommunikationsdelen har vi benyttet os af Jens Hogman Hansens kommunikationsmodel. Generelt har vi reklekteret over selve analysen af Feelgood Bakerys egen hjemmeside, samt reflekteret over de hjælpemiddler vi har brugt.

7 Koncept & idé Den grundlæggende tanke bag vores Feelgood Bakery hjemmeside er, at markedsføre vores egen hjemmeside bedst muligt, så den fremmer Feelgood Bakerys afsætning, udbredelse og serviceydelse. Ydermere er idéen, at styrke og udvikle vores egen hjemmeside, så det passer til markeds behov samt produktet kommer ud til målgruppen.

8 Wireframes Desktop version

9 Wireframes Tablet version

10 Wireframes Smartphone version

11 Kodning I følgende afsnit vil vi kort beskrive, hvilke udfordringer og problemer vi havde i forhold til kodningen af websitet. Responssiv - Vi havde en del udfordringer i forbindelse med at lave siden responssiv. Udfordringen lå især i at lave mobil versionen, eftersom at vi ikke kunne få vores tekst i sektionen: Om Feelgood Bakery til at opføre sig som vi ønskede. Først var teksten centreret, men vi ønskede, at den skulle brede sig mere ud så den tilpassede sig sitet. Dette løste vi ved at lave margen mindre i enheden procent. Generelle regler for elementerne - Et gennemgående problem vi stødte på var, at vi havde glemt at angive generelle regler for websitets kode. Problemet kom til udtryk, da vi ikke kunne ændre de enkelte elementers værdier, for de blev overskrevet af de generelle regler, som vi selv havde angivet. Navigation Menulinje - Vi havde problemer med at få vores menu til at gå direkte ned til vores overskrifter i de enkelte sektioner, dette løste vi ved at bruge padding-top på vores h2 elementer. Enheder på elementer - I løbet af processen blev vi også klar over, at det havde en betydning for vores kode, hvilke enheder vi havde angivet på elementerne. Eksempel - I forbindelse med padding-top og vores h2 elementer fandt vi ud af, at vi ikke kunne bruge px, men i stedet enheden % for at få det til at virke.

12 Test & testresultater

13 Styleguide

14 Layout diagram

15

16