Rapport Gruppe SAAI Denne rapport omhandler re-design af Feelgood Bakerys hjemmeside og identitet. Processen startede med en analyse af deres nuværende hjemmeside, hvor vi klarlagde deres identitet, målgruppe, afsender/afsenders mål, grafiske virkemidler, komposition etc. Analyse af eksisterende website Kommunikation Hvem er afsender? To midaldrende kvinder fra Nørrebro. Speltmødre, sundheds- og miljøbevidste, Hvem er målgruppen? Allergikere, sundheds/helse-bevidste forbrugere, 20+, børnefamilier fra byen. Hvad er afsenderens budskab? At udbrede viden om glutenfrit bagværk. Gøre det nemt at bage naturligt og glutenfrit brød. Branding Kunder handler også grønt i torvehallerne. Ejerne er typerne der tager brød med til børnehavebørnene. Kunder dyrker yoga, har fine designer nipsgenstande og elsker en kop kaffe fra en lille café. 1
Hvilken effekt ønsker afsender at opnå? Få deres produkter til at virke lækre og indbydende. Nemt og simpelt at lave derhjemme. Brug af naturlige ingredienser. Hvad kan du forestille dig, at afsender ønsker, at målgruppen skal tænke om afsenderen? At virke kvalitetsbevidste, erfarne, gode til deres håndværk. Hjemmelavet, lokalt. Responsive design Wireframes: Breakpoints Ved 641px er der et breakpoint. Ved dette breakpoint skifter menuen. 2
Fra 1024px til 641px sker der ingen layoutmæssige ændringer. Fra 639px og ned er der heller ingen ændringer. Hvilket designprincip følger siden? Hjemmesiden benytter sig af designprincippet Mostly Fluid. Grafiske virkemidler Er det funktionelle behov opfyldt? Det funktionelle er opfyldt. Det der skal være der er der og er letforståeligt, fx navigation, brødtekst og overskrifter. Dog er rækkefølgen og kompositionen langt fra optimale. Er behovet for relevans opfyldt? Fotos: Både baggrundsbilledet og alle de billeder vi ser som det første på forsiden er relevante. Illustration: Deres logo benytter sig af figur-og-baggrund og kunne både ligne en blå cookie eller nogle luftbobler. Cookie-motivet er relevant for deres branche og luftboblerne signalerer økologi og miljøvenlighed. Dog er logoet ikke særlig let genkendeligt som browserikon. Grafik: Der er ikke meget grafik på siden, men de afdæmpede farver på siden, og de lettere transparente kasser brødteksten står i, er meget stilrene og signalerer simplicitet. Komposition: Nav/links forsvinder fordi de er over headeren og fordi de ikke har deres egen baggrund/forsvinder i baggrundsbilledet. Man bør overveje at placere nav en under headeren eller som en menu for sig ude i venstre side. Den første side man bliver henvist til viser kun billeder uden en overskrift/banner. Teksten til billedet er nede i bunden, så gæsten har ingen kontekst at tage udgangspunkt i. En kort beskrivelse af virksomheden og deres mission/vision ville også være til stor gavn. Engagerer siden emotionelt? Det er ikke en seamless oplevelse for brugeren. Det er rodet at navigere rundt i; webshoppen er på et andet domæne end hjemmesiden, menuen er næsten usynlig, billederne er placeret rodet på Hjem-siden og der er ingen billedbeskrivelser. 3
Hjemmesiden har potentiale, da virksomheden kender deres identitet & brand og har valgt tilsvarende grafik og farver. Alt i alt er der andre bagere med en langt bedre og mere velintegreret online-oplevelse. Stilart, udtryk og den røde tråd Visuelle elementer Farver: Hvid, grålig, brun, grøn og pink. Der er en fin sammenhæng i deres brug af naturlige farver, men de mister den røde tråd ved brugen af kraftig grøn og pink. Typografi: I menuen er der brugt sans serif. Ved både, overskrift og brødtekst er der brugt serif font (American Typewriter). Logo stil: Logoet hænger ikke sammen med konceptet. Ser man kun logoet (uden tekst), ville man ikke kunne gennemskue, at det er et logo til et bageri. Foto stil: Close-up, autencitet, uden filter, håndværket i fokus - ikke personerne bag. Hvordan vil du kategorisere stilen? Gennemgående enkel stil og naturligt udtryk. Buzzwords: Naturlig, enkel, personlig, sundhed. Farver Hvordan er sidens farvepalette? 4
Understøtter brug af farver hierarkiet og sidens indhold? Valget af farverne til menuen hænger ikke sammen med de naturlige farver, som er brugt til resten af siden. Idéen med at farverne skifter i menuen, er rigtig god. Men farvevalget giver ingen mening ift. sidens indhold og budskab. Teksten skifter farve (skrigende grøn) når man holder musen over teksten. Farven skifter igen (skrigende pink) og er konstant når man trykker på et bestemt menupunkt. Skaber farverne ro eller uro? De naturlige farver skaber ro, hvorimod de kraftige farver, de har benyttet til menuen, skaber uro og nærmest irritation over usammenhængende farvevalg. Hvilke kontraster og harmonier er der i farverne? De grønne og pink farver de har valgt i menuen er komplementærfarver. Resten af farvepaletten består af harmoniske og dæmpede farver. I forholdet mellem de kraftige og dæmpede farver opstår en kvalitetskontrast. Typografi og tekstopsætning Hvor er der brugt displayskrift, brødtekst og konsultativ tekst? Der er brugt konsultativ tekst i menuen. Overskrift, brødtekst og kontaktoplysninger: her bruges samme font (Courier New). Hvor mange forskellige skrifter er der brugt? De har benyttet to forskellige skrifter. Sans serif og serif font (Courier New). Hvilken klassificering gruppe/grupper tilhører disse skrifter? Sans serif og serif font. Passer valget af skrift til sidens budskab og indhold? De har valgt at bruge en fed og bombastisk skrift til menuteksten, hvilket ikke passer ind til hverken logoskift, overskrifter eller brødtekst. Så den skrifttype passer ikke ind til resten af siden og dens budskab. Den skiller sig ud fra resten af siden, på den dårlige måde. 5
Til overskrifter og brødtekst har de valgt en mere naturlig/klassisk skrifttype, som passer ind til resten af siden, samt budskabet. Så de to skrifttyper harmonere ikke særlig godt sammen. Komposition Kontraster og linjer i de mest fremherskende billeder De fleste billeder er closeup af brød, kager og mel. De er hovedsageligt taget oppefra eller fra siden, dette skaber lidt kontrast i linjer og perspektiv, men generelt er der ikke mange kontraster i billedstilen, hvorfor det også bliver en smule kedeligt. Komposition Deres billedkompositioner virker tilfældige og uovervejede. Man kan godt se at de ikke har haft en fotograf, men selv har taget billederne. Det ligner helt almindelige hverdagsbilleder, som man f.eks. ser på de sociale medier. Fortæller brug af de kompositoriske virkemidler noget i forhold til budskabet og afsenderen? Mangel på billedkomposition giver et hjemmelavet udtryk. Komposition i forhold til sidens struktur og hierarki: Det er tydeligt at genkende og forstå deres struktur. Det er nemt at finde rundt i sidens navigation, overskrifter, faktabokse m.m. Loven om nærhed og lighed 6
Alexander Sørensen Simone B. Nielsen 11.03.2016 Loven om lukkethed Loven om lighed og lukkethed. Loven om lukkethed 7
Sproglige virkemidler Hvordan er tonen? De bruger fagord, hvilket viser deres viden indenfor faget, dette giver en formel tone. Ved at bruge ord som vores, jeres og din, får siden en mere personlig tone. Er der meget eller lidt tekst? Teksten er generelt en meget passende, kortfattet længde, dog bliver den nogle steder ret lang, f.eks. i deres produktbeskrivelser. Er teksten relevant? Ja, teksten er relevant for virksomhedens budskab, og holder sig alle steder til emnet. Er teksten let at læse og overskuelig? Ja, teksten er letlæselig, men med grammatiske fejl og mange gentagelser. 8
Strukturelt virkemiddel Sitemap: Hvordan ser navigationen ud? Navigationen følger loven om nærhed og lighed. Visuelt er den overskuelig, men i praksis er den rodet. For mange menupunkter gør siden uoverskuelig. Kan du nævne hvilken type for navigation, der er brugt? På mobil/tablet har de valgt en dropdown menu. På PC har de valgt en primær navigation til hovedmenuen i toppen, de to links i bunden af siden er den sekundære navigation. Integrering: De har to websites i søgeresultaterne når man søger på Feelgood Bakery på Google. Forvirrende og uoverskueligt. Navngiv evt. den ene som blog/webshop? 9
Menu: Dropdown ude til venstre ville være mere overskueligt. Research http://www.odense-marcipan.dk/opskrifter/ http://www.emmerys.dk/ http://www.lagkagehuset.dk/ http://baest.dk/ http://breadalone.com/ Hvordan er det pågældende site i forhold til konkurrenternes? Hvordan ser andre sites i branchen ud? De sites vi har kigget på, virker mere professionelle. Bl.a. ved brug af fotografer til deres billeder, samt deres navigation. Hvordan ser konkurrenternes site ud? Stilrent, overskueligt og visuelt tilfredsstillende. Følger tidens trends. Følger sitet tidens og branchens trends? Sitet følger ikke tidens trends. De har hverken splashbillede eller navicon. Ift. deres konkurrenter er sitet ikke opdateret og følger ikke med tiden. Sitet er responsivt og dette fungerer godt. 10
Redesign Med afsæt i analysen og vores nyligt erhvervede viden indenfor grundlæggende webdesign, har vi foretaget følgende ændringer og gjort os nedenstående overvejelser. Wireframes Link til vores wireframe: Wireframe: http://erbouseverini.dk/wireframesaai.pdf Layoutdiagram Link til vores layoutdiagram: Layoutdigram: http://erbouseverini.dk/layoutdiagramsaai.pdf Kodning Vi har holdt vores kodning så simpel som muligt, og vi har skåret ned på antallet af menupunkter i navigationen. Siden er sat op med separate html-dokumenter til hver side. Vi har lavet fem menupunkter i navigationen, hvoraf det ene er et fotolink (logo). Alle elementer i navigationen har fået en margin på 20px for at skabe afstand mellem dem. Dog er logoet undtaget ved brug af denne regel om first child : nav ul li:not(:first-child) { } margin-left: 20px; Vi har indsat 5 splashbilleder på forsiden til hhv. laptop, tablet og telefon. Vi har brugt align-content:center og text-align:center til at centrere/få indholdet til at holde sig på midten. Sidens indhold er bygget op med wrappere, hvor der ligger divelementer som har fået enten klassen half, third eller quarter, da flere sider havde ens layout med enten 2, 3 eller 4 elementer. Dette var en måde at gøre vores stylesheet så 11
enkelt som muligt. De tre klasser deler reglen display:inline-block for at ligger sig ved siden af hinanden på langs. I css en er disse klasser angivet med width i %. I webshop og opskrifter er links til hhv. produktsider og opskrifter lavet til knapper i css (a.button) og der er desuden brugt funktionen hover til at få knappernes border til at skifte farve når curseren holdes henover. Hover er ligeledes brugt i nav (nav ul li a:hover). Footeren ligger på alle sider centreret i bunden med information om virksomheden og med position:static for at ligger sig i bunden, men samtidig nedenunder sidens indhold. Teksten er formateret med overskrifter fra h1-h5, p og a (der er på kontaktsiden indsat link til en 'Spørgsmål og svar'-side). Vi har indsat mediaqueries til at gøre siden responsiv; indholdet (på nær nav/li/ul) er i mobil-versionen sat til display:block, på tablet skaleres indholdet ned, men ændres ikke. 12
Beskrivelse af test og testresultater Fremgangsmåde: Vi har brugt den heuristisk metode til at teste vores hjemmeside med fokus på Status/Synlighed, Konsistens/Standarder og Æstetisk/Minimalistisk design. Resultater: Vurdering af testen: De fejl vi fandt er lette at løse. Vi kunne nok være kommet bredere omkring alle eventuelle fejl ved at bruge flere heuristikker. Det ville desuden have været en mere objektiv test hvis vi havde haft nogle andre til at teste siden. Refleksion Det er ses tydeligt at Feelgood Bakery har en vision, de vil gøre det nemt og lækkert for den almene dansker at spise naturligt glutenfrit bagværk. Derfor har de lavet en hjemmeside hvor de kan formidle deres vision, sælge deres produkter og besvare spørgsmål. Da hjemmesiden overordnet set mangler en rød tråd har vi kigget på alle parametre indenfor webdesign, fundet frem til en identitet og dernæst bundet det sammen med deres vision og indhold. De følgende afsnit beskriver vores ideer, refleksioner og vores bud på en ny identitet. 13
Koncept og ide Vores ide er at få Feelgood Bakery til at fremstå mere professionelle, men stadig med deres charme og personlighed i behold. Professionalismen kommer til udtryk i et velovervejet layout, med et gennemgående design. Konceptet for designet bygger på et naturligt og enkelt udtryk. Det enkle udtryk vil gøre hjemmesiden mere tidssvarende, og ved at bibeholde det naturlige holder vi på den eksisterende målgruppe. Styleguide Nedenstående styleguide illustrerer koncept og ide: Research og Inspiration I researchfasen har vi kigget på det nuværende marked og set på hvorledes konkurrenterne tager sig ud. Følger de tiden trends med splashbillede, enkle udtryk, lettilgængelige hjemmesider, navicon, etc. 14
Vi hentede meget inspiration fra virksomheden Bread Alone. De kommunikerer et intimt og simpelt udtryk som vi fandt passende for Feelgood Bakery. Vi har især ladet os inspirerere af deres dæmpede fotografi/splashbillede med hvid tekst oven på. Kommunikation og sproglige virkemidler Afsender, budskab og mål er bibeholdt. Vores æstetiske, funktionelle og sproglige ændringer vil appellere til en større målgruppe end før, da siden nu kommunikerer deres budskab tydeligt, og er blevet mere tidssvarende. Teksterne er blevet lettere at læse, kortere og med et mere præcist sprog. Det giver målgruppen et indtryk af professionalisme og seriøsitet. Grafiske virkemidler Vi har valgt at reducere mængden af billeder på hjemmesiden markant og redigere de tilbageværende, for at få en gennemgående billedstil. Reduceringen af billeder giver hjemmesiden et mere overskueligt og roligt udtryk. Mangel på billedkomposition gav et uprofessionelt og uovervejet udtryk, derfor vil det optimale være at tage nye billeder, hvor der er gjort kompositoriske overvejelser. Det funktionelle behov er opfyldt idet siden nu er nem at navigere på og menuen enkel og overskuelig. Alt der skal til for at navigere rundt på siden er til stede. Behovet for relevans opfyldes da al sidens indhold har noget at gøre med/er relevant for brugerens browsing- og købsoplevelse. Alle billeder, produkter i webshoppen, opskrifter og links har med bageriet og dets produkter at gøre. Det emotionelle behov bliver delvist opfyldt, da vores splash med det samme kommunikerer det udtryk vi gerne vil ud med: kærligt og simplistisk. Dog kunne vores webshop og opskrifter godt være mere endnu mere interaktive og evt. fylde lidt mere, fordi de - på trods af de kommunikerer et minimalistisk udtryk, som var målet, - virker lidt kølig og mindre intim end resten af hjemmesiden. 15
Man kunne evt. forsøge med en planke-tekstur baggrund for at inducere en stærkere følelse af skovhytte, lille bageri, familie, stenovn. Kvaliteten af de brugte billeder kunne også gøres bedre, da hjemmesiden - på trods af at skulle kommunikere intimitet - er et professionelt outlet, og de billeder der bruges bør vise produkterne fra deres allerbedste side. Vi har gjort brug af trenden med et formørket splash-billede med en tagline skrevet med hvid tekst. Dette er med til at give en moderne kant og samtidig give forbrugeren en følelse af intimitet. Farver De valgte farver tager udgangspunkt i Feelgood Bakery s eksisterende farvepalette. Dog har vi fravalgt kraftige og gennemtrængende farver da det ikke underbygger det naturlige og enkle budskab. Vi har udeladt komplementærfarver, men bibeholdt lysmørke/kvalitetskontraster, hvilket skaber et roligt, harmonisk og tillidsfuldt udtryk på hjemmesiden. Farver Typografi og tekstopsætning Vi har valgt at ændre teksttypen i både menuen, overskriften og brødteksten. De harmonerede ikke godt sammen, specielt teksttypen i menuen, skilte sig meget ud. Derfor har vi skiftet dem ud med nogle mere personlige og stilrene teksttyper, som harmonere sammen og giver et bedre udtryk, ift. deres budskab. Kontrasterne i typografien skaber dynamik på hjemmesiden. 16
Valgte typografier. Ift. tekstopsætning har vi sammenskrevet og slettet unødvendige tekster. Dette giver læseren mere overblik over hjemmesidens information og flere forskellige indgange til de forskellige tekster. Komposition og strukturelle virkemidler Vi har valgt at ændre hjemmesidens komposition ved at placere et splashbillede øverst ledsaget af en menu nedenunder. Dette understøtter den naturlige læseretning og gør også menuen letlæselig ved at placere den på en baggrund hvor den står i kontrast. Derudover har vi sammenskrevet flere af den tidligere hjemmesides menuer, da der var mange gentagelser. Nedenstående billeder viser menuen før og efter, her fremgår ændringerne tydeligt. Den nye menu er simpel, overskuelig og vigtigst af alt, nemt at læse. 17
Før Efter Valg og forbedringer Vi har valgt at erstatte home knappen med et billede af firmaets navn og logo, som vist på nedenstående billede. Dette er et bevidst valg, da vi mener det er en unødig gentagelse både at have firmanavn/logo og en home-knap. En analyse af konkurrenternes hjemmesider viser også en stigende tendens i brug af firmanavn/logo som home-knap. Grundet en tidshorisont på kun fem dage, mangler vi elementer på hjemmesiden. 1. Opskrifter: Her mangler vi at linke til de respektive opskrifter. Vi vil oprette en separat side for hver opskrift, hvori der vil være link til en pdf-fil som efterfølgende kan printes. 2. Webshop: Vores webshop-side er et design-mockup af hvordan vi forestiller os webshoppen skal fungere. Her mangler vi at lave en indkøbskurv, men har ikke lært den bagvedliggende kode. En løsningsmodel kunne være at bruge wordpress woocommerce, hvor man kan installere et plugin for at få en indkøbskurv. 18
3. Indhold: På Feelgood Bakerys originale hjemmeside har de oprettet et afsnit, der indeholder testimonials, også kaldet anmeldelser. På nuværende tidspunkt er dette udeladt, men vi har gjort os overvejelser om hvorledes det kunne integreres på den re-designede hjemmeside. Det er en mulighed at oprette et link på om -siden der viser hen på en underside for testimonials. Denne overvejelse har vi gjort for at imødekommende Feelgood Bakerys evt. ønske om at bevare testimonials. Konklusion Vi har haft fokus på at skabe en mere enkel hjemmeside, med et gennemført æstetisk udtryk og med en forbedret funktionalitet. Desuden har vi skåret ned på indhold, så det er blevet relevant og uden gentagelser. Vi er endt med et design-mockup, som demonstrerer både funktion og udseende, og som svarer godt til vores oprindelige style-guide, wireframes og layoutdiagram. Vores hjemmeside kan findes her: FeelgoodBakery: http://aninececilie.dk/feelgoodbakery/index.html Adgangsoplysninger: Brugernavn: kea2016 Password: mmdkode 19