FEELGOOD BAKERY KEA Multimediedesign Ugeopgave 40 Redesign af website Afleveringsdato: 02.10.15 Gruppe 13 Christine Islev-Noes Martin Bøje Petersen Martin Just Petersen Sabine Tollgaard Koch 1
DISPOSITION Analyse af oprindeligt site Side 3-11 - Kommunikation & responsive design - Kommunikation & virkemidler o Grafiske virkemidler Stilart, udtryk og den røde tråd Styleguide Farver Typografi og tekstopsætning Komposition o Sproglige virkemidler o Strukturelle virkemidler - Hvad kan forbedres - Research Koncept & idé. Side 12 Wireframes...Side 13-15 Styleguide.. Side 16 Mockups. Side 17-23 Layoutdiagrammer.. Side 24-26 Beskrivelse af test og testresultater.side 27-29 - Skema til Heuristisk evaluering - Skema til Usability test Refleksion..Side 30-32 Link til redesignet hjemmeside..side 33 2
ANALYSE KOMMUNIKATION OG RESPONSIVE DESIGN Afsender Feelgood Bakery (glutenfrit bagværk) Målgruppe Glutenallergikere og forbrugere der ønsker at spise bagværk uden gluten. Derudover hele den kostmoderne befolkning, som har fået akut glutenskræk. Budskab Lækkert, sikkert og glutenfrit brød, som er let at lave - selv hjemme i eget køkken Hvilken effekt ønsker afsenderen at opnå? Øget interesse for produktet hvor produktet er det glutenfrie bagværk Hvad kan du forestille dig, at afsenderen ønsker, at målgruppen skal tænke om afsenderen? Kvalitet, friskhed indenfor glutenfrit bagværk. (...)bage et friskt, naturligt og nybagt alternativ til de gængse, færdigbagte produkter på markedet.(...) Hvor er break points? Breakpoints: - Desktop: 1025px - Tablet: 1024px 641px - Mobil: <640px Hvilket design princip følger siden? - Layout shifter. 3
KOMMUNIKATION OG VIRKEMIDLER Grafiske virkemidler Vi vurdere de funktionelle behov som værende opfyldt, da siden er let overskuelig og nem at navigere rundt på. Det fremgår klart af sitet, hvad der er brødtekst og hvad der er navigationsknapper/menuer. Sidstnævnte figurerer på normal vis i toppen (se nedenstående screenshot). Desuden er behovet for relevans også opfyldt, eftersom det er en hjemmeside for en bager, som afbilleder frisk bagte brød. Billederne af bagværk er med til at understrege, at det er en bager- hjemmeside, man er kommet ind på. Hjemmesiden forsøger at signalere en vis form for charme, hvilket vi ikke synes er lykkedes 100 %. Derfor ønsker vi, at fremhæve charmen og hyggen i vores design, da dette vil være med til at sende budskabet tydeligere igennem til brugerne. SCREENDUMP AF FORSIDE 4
STILART, UDTRYK OG DEN RØDE TRÅD Siden har formået at skabe en rød tråd i deres visuelle elemeter. Det har det blandt andet gjort i forhold til farvevalget og billedvalget, som alt sammen associerer til brød. Hvis man tager et kig på ovenstående styleguide, kan man se, at farverne minder meget om hinanden det er nogle brune, bagværks farver. Det eneste som går lidt galt, er de to neon farver, hhv. pink og grøn, som ikke passer ind (denne skiller sig også meget ud på styleguiden). Vi har valgt at kategorisere stilen som værende en contemporary stilart eftersom den er meget simplificeret. STYLEGUIDE FARVER Er der brugt en overskuelig farvepalette? Ja, det er nogle meget milde og harmoniske farver - hvid, beige, svag grøn etc. Det eneste der ikke fungerer så godt, er at farverne i navigationen er hhv. pink og neongrøn, når de vælges (denne kontrast er ikke god). Ellers er den gennemgående kontrast lys/mørk og styrkekontraster. Understøtter brug af farverne hierarkiet og sidens indhold? Ja, man føler klart, at hoveddelen af teksten findes i den store hvide kasse i midten af siden. Dernæst kommer logoet, der er placeret i den mere gennemsigtige, beige kasse, hvor det kan ses, men ikke distraherer fra hovedteksten. 5
TYPOGRAFI OG TEKSTOPSÆTNING Der er anvendt forskellige skrifttyper, bl.a.: I menuen er der anvendt Arial. I brødteksten er der anvendt Adele SCREENDUMP AF MENU + LOGO + BRØDTEKST I hvilke klassificeringsgrupper tilhører disse skrifter? Adelle - Serif Arial - Sans Serif Følger tekstopsætningen konventionerne? Brødteksten er let læselig og paragrafferne skifter på de rigtige tidspunkter. Passer valget af skrift til sidens budskab og indhold? Brødteksten er skrevet i Adelle, en simpel, ligetil serif skrift, med tydelige seriffer og lidt til ingen variation i streg- bredde. Bogstaverne er lette at genkende og adskille fra hinanden, og deres udformning muliggør hurtig og let læsning. 6
KOMPOSITION Der er anvendt farvekontrast, eftersom der er brugt neongrøn og lyserød oppe i navigationen. Der er blevet brugt loven om nærheden. Siden er opdelt i tre kasser, der hver især indeholder enten billeder, kontaktinformationer eller ex logo. Disse kasser opfylder loven om lukkethed. Fanen Opskrifter er opdelt i et grid, hvor lovene om nærhed og lighed bruges til at angive at opskrifterne er relaterede. Derudover er der gjort brug af en masse whitespace, som er med til at gøre siden mere simpel, hvilket vi godt kan lide i vores gruppe. Siden er bygget forholdsvist symmetrisk op med siden i midten og navigationen ovenover. Kan du identificere følgende kompositoriske elementer på sitet? Dynamisk, statisk, harmonisk, symmetrisk/asymmetrisk osv. Stjerne komposition, L komposition, cirkel komposition osv. Siden er statisk, da den er opdelt i kasser der alle ligger samlet i en ramme. Siden er også harmonisk opbygget, da der ikke er noget der specielt skiller sig ud på siden. Som før nævnt, bærer siden præg af symmetri, men under fanen Mel mix findes der en snert af asymmetri, da billeder og tekst flyttes lidt rundt i forhold til de andre faner. (se ovenstående billede). Siden gør ikke brug for af hverken stjerne komposition, L komposition eller cirkel kompositionen. Er hierarkiet mellem elementerne på siden overskuelige? Websitet er meget overskuelig. Whitespacen ude i siden er blandt andet med til at gøre det hele let og overskueligt. Der fremgår ligeledes luft mellem mange af elementerne, så det fremstår behageligt for brugeren. Der er primært gjort brug af tre hoveddele på siden header, body og footer. Headeren og bodyen har samme farve, som har en rolig effekt, når man ser siden. 7
Fortæller brug af kompositoriske virkemidler noget i forhold til budskabet? Specielt brugen af billeder med brød og mel, der oven i købet også er meget stilrene, er med til at fremme budskabet om at de laver kvalitets glutenfrit brød. Sprogligt virkemiddel Den brødtekst der fremgår på websitet er kort, præcis og letforståelig. Desuden er den givne informationen meget relevant, så behovet for relevans er i den grad opfyldt. Det handler om produktet, som i dette tilfælde er glutenfrit bagværk. Feelgood Bakery formår på én eller anden måde at personliggøre deres produkter gennem deres valg af ord og sætninger. Sproget maler et billede af et lækkert og sundt brød (eller deres mel), der smager fantastisk og er dejligt luftigt. Dette formår at overbevise forbrugeren om produktets kvalitet, med et personligt touch fra bageriet, som i den grad er med til at overbevise køberen. Bliver du fx positivt overrasket af den information du bliver præsenteret for (på rette tidspunkt)? Bliver du i længere tid på siden pga. mere relevant indhold? Eller positivt overaskende indhold? Ja, Feelgood Bakery kæler for detaljerne i sproget for at engagere fantasien omkring brødet og vække appetitten. Dette gør modtageren mere interesseret i produktet, end man umiddelbart ville tro om en hjemmeside for et bageri. Hvordan er tonen? (Er der brugt slang, fagord. Tørt og formelt kontra personligt og levende osv.) Tonen for sproget er varm, farverig, personlig og indbydende. De refererer til sig selv, når de taler om Vores brød og anbefaler deres produkt med subjektive tillægsord, såsom Velsmagende og Saftigt. De supplerer dette med fakta omkring produktet, hvor alle de praktiske informationer, der beskriver det dybt detaljeret. Dette krydres dog stadig med det personlige touch. Hvordan passer tonen til sidens indhold og budskab? Hjemmebagt brød er ment til at være varmt og personligt, så det venskabelige feel, Feelgood Bakery forsøger at bringe frem i teksten fungerer udmærket i sammenhængen. Er der meget eller lidt tekst? Lidt til medium tekst. Forsiden er næsten uden tekst og beskrivelserne er relativt korte uden for mange irrelevante fyldeord. Er teksten relevant? Ja, den bruges altid til at beskrive produktet. Er teksten let at læse? Teksten er godt grammatisk opbygget og yderst letlæselig. 8
Er teksten overskuelig? Fx nem at skanne? Teksten er relativt lille og placeret i en enkelt kolonne, med få paragraffer. Det er ikke nemt at skanne, men er overskueligt at læse. Strukturelt virkemiddel Site- arkitektur over sitet (se til højre) Hvordan ser navigationen ud? Alle menupunkter er placeret i toppen af siden, hvor logoet også fungerer som et link til landingpagen. Er den overskuelig? Menupunkterne er noget af det første, som modtageren ser på websitet placeret nær logoet (som hurtigt fanger ens blik) og placeret nær hinanden, så de virker sammenhørende. Kan du benævne hvilken type for navigation, der er brugt? Global navigation, med menupunkter placeret i toppen af siden. 9
HVAD KAN FORBEDRES? Hvad fungerer godt? Navigationen er let overskuelig Farvevalget er passende og velvalgt - lyse og harmoniske farver God funktion til de sociale medier (footer) Baggrundsbilledet er fint og formår at vække smagsløgene og modtagerens appetit Hvad kan forbedres? Sektionerne er gennemsigtige, hvilket går ud over læseligheden og virker forstyrrende. Alt for stor "footer" o Åbningstider og adresse skal IKKE stå på samtlige slides o Adresse + cvr.- nr. kan evt. stå i footer Facebook og Instagram skal i top - evt. ved siden af menu + ikoner forstørres Mere fokus på at det er glutenfrit hvordan fremmes dette mere? Redesign af menu og logo Logo- ændring (kig på logo på website + logo på Facebook) 10
RESEARCH Inspiration sites Emmery s http://emmerys.dk Johan Bülow http://m1e13m3g26.keaweb.dk Lagkagehuset http://lagkagehuset.dk Taffelbay http://www.taffelbay.dk Andre glutenfrie bagerier (konkurrenter) Vinthers bageri http://www.vinthersbageri.dk/bagerens- broed/glutenfri- broed.html Special bageriet http://www.specialbageriet.dk Svinninge bageri http://svinningebageri.dk/specialkager Hvordan ser andre sites i branchen ud? Hvordan ser konkurrenternes site ud? Forbillede etc. Vi vælger at afgrænse vores konkurrenter til andre special- bagerier, der producerer bagværk uden gluten. Andre sites i branchen sidesættes med andre bagerier, e.g. Emmery s, Lagkagehuset etc. Kigger man overordnet på sites tilhørende konkurrenterne, virker det ikke som om, der har været designere el. kodere bag. Sites ne er opbygget meget enkelt med menuer og farvekontraster, evt. få billeder og en mulig webshop. Sites ne virker ikke nødvendigvis nemme at tilgå, hvilket vi finder ret vigtigt på et website. Ydermere fremgår det ikke tydeligt af sites ne, om disse er i brug mere el. ej, hvilket kan være meget forvirrende over for forbrugeren. Derfor vurderer vi, at Feelgood Bakery s site er velopsat og overordnet velovervejet - både design- og teknikmæssigt. Ifht. sites ne i respektive branche, varierer dette meget afhængig af bageri. Emmerys.dk er et site med overvejende meget indhold - dog arrangeret på en logisk og overskuelig måde. Emmerys.dk har en lettilgængelig navigationsmenu, som fremgår tydeligt i hvid ifht. baggrunden, der er mørk. Konklusionen på Emmerys.dk er et meget overskueligt site med interessant indhold og rigtig fine illustrationer. Lagkagehuset.dk s landingpage er et enkelt billede. For at se noget som helst på sitet, er forbrugeren nødt til at tilgå siderne via navigationen. For at kunne se nogle af Lagkagehusets produkter skal man klikke ind på PRODUKTER for derefter at tilgå en undermenu. Denne har en forholdsvis lang loadingtid pr. billede, som absolut kan opstilles mere enkelt og mere tidsbesparende. Lagkagehuset har nogle rigtig flotte billeder, som desværre er meget små og forstørrelse er ikke mulig dette vil vi selvfølgelig have in mente ifht. redesign af eget site. Taffelbay.dk er under opbygning og reserverer blot et billede til forbrugeren. Skal vi tolke på de forskellige sites og på dem, som vi vurderer løber forrest designmæssigt, er disse også dem, der løber forrest i forbrugernes verden. Emmery s er blandt eet af de mest kendte bagerier i Danmark i øjeblikket og der er ligeså en del status over en Emmery s pose (økologisk, high end, friskt, dyrt, metropolsk). Lagkagehuset (og Holm s bageri, der ikke har et website) er ligeså et virkelig kendt brand og deres website er derfor heller ikke tilfældigt el. grimt - men elegant og minimalistisk med høj- pixellerede billeder. Vi vil absolut kigge på de forskellige frontløberes designs og få inspiration herfra. 11
KONCEPT & IDÉ Gruppens idé er at skabe et brugervenligt og simpelt singlepage- website til bageriet Feelgood Bakery med billeder af brød og kager - der også er responsivt. Feelgood Bakery har som udgangspunkt et velfungerende site i forvejen, med en forholdsvis brugervenlig tilgang, nem navigationsmenu og læselig, velformuleret brødtekst. Vi vurderer dog, der er visse problemer bl.a. ifht. baggrunden, som gør navigationsmenuen (som også er meget omfangsrig) næsten ulæselig, en alt for stor footer og andet. Gruppen har hentet inspiration fra andre sites i branchen (bl.a. Emmery s og Lagkagehuset - der dog har meget forskellige designs) og Feelgood Bakery s oprindelige design. Vores idé er at skabe et brugervenligt, moderne, indbydende website med farver, fonte og billeder specielt udvalgt på baggrund af den tolkning og analyse vi har gjort på det oprindelige design. Vi har valgt at skabe et singlepage- website med fire sider (udover landingpage): Om Feelgood Bakery Vores Produkter Mel Opskrifter Spørgsmål og Svar Kontakt (Derudover også en navigation til den allerede eksisterende webshop), hvilke giver os os navigationsmenu med 5 poster. Vi har udeladt en HOME post, da vores logo er interaktivt og directer forbrugeren tilbage til landingpagen. 12
WIREFRAMES DEKSTOP 13
TABLET 14
IPHONE 5 (SMARTPHONE) 15
STYLEGUIDE 16
MOCKUPS DESKTOP 17
18
19
TABLET 20
21
IPHONE 22
23
DESKTOP LAYOUTDIAGRAMMER TABLET 24
25
IPHONE 5 (SMARTPHONE) 26
BESKRIVELSE AF TEST OG TESTRESULTATER SKEMA TIL HEURISTISK EVALUERING Heuristikker Status Synlighed: Hjemmesiden skal altid holde brugerne informeret om, hvad der foregår, gennem passende feedback brugeren skal vide hvor den aktuelle placering er, hvilke muligheder der er for at navigere herfra og hvordan den nuværende position er placeret i en større sammenhæng Konsistens og standarder: Brugerne bør ikke spekulere på, om forskellige ord, situationer eller handlinger betyder det samme. Der skal være konsekvens i både navngivning, funktion og design alle links ser ud og fungerer på samme måde, menuer er placeret på samme måde og fungerer ensartet på hele sitet Æstetisk og minimalistisk design: Hjemmesiden bør ikke indeholde oplysninger, der er irrelevante eller sjældent nødvendigt man bør forenkle sit design (mængden af information og visuelle elementer) så meget som muligt for at undgå støj Beskrivelse af problem Hvilken heuristik? Link til siden hvor problemet findes Kategori (alvorsgrad) Forslag til løsning Hvor lang tid vil det tage at løse? Responsiveness Konsistens og standard www. 3 Rettelser i css 1,5-2 timer Beskrivelse Vores website opfylder teoretisk set de tre ovenstående heuristikker. I forhold til Status Synlighed er vores side meget præcis med, hvor på siden forbrugeren befinder sig, eftersom vi har sørget for at lave store overskifter som matcher med navigationen. Ex, når der trykkes ind på Om Feelgood Bakery, er der en stor overskrift som indikerer, at brugeren er på Om Feelgood Bakery. Dette leder os hen til Konsistens og standarder, hvor der er en konsekvens i både vores navngivning, funktion og design. Vi har en rød tråd gennem vores design blandt andet er designet magen til hinanden lige meget hvor på siden brugeren befinder sig. 27
Menuen er også placeret på samme måde og fungerer ensartet på hele sitet, og når man vil tilbage til home klikker man på logoet. Vores design er simpelt, brugervenligt og ingen unødig støj. SKEMA TIL USABILITY TEST Gruppe nr.:13 Test gruppe nr.: 3 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... 6. Hvordan er læsbarheden? Nr. Svar Problemer Forslag til løsning Hvor lang tid vil det tage at løse? 1 Om os > Feelgood Bakery + navne 2 Kontakt > adresse + åbningstider 3 Vores Produkter > mel Webshop > Nej Lidt Lav bedre åbningstider 10 min. Nej 4 Kontakt > mailadresse Nej 5 Kan sitet ses på tablet/mobil Nej 6 Store overskrifter, Nej Kan skriften gøres mere sort? 10 min. Klik på SoMe Lidt Åbn ny fane i stedet for site- change Beskrivelse Usability testen er en super god måde at teste sin hjemmeside på. Når man har arbejdet så intensivt med en hjemmeside i en uge, kan man hurtigt overse alle de små fejl, som er med til skabe en funktionel og brugervenlig hjemmeside. Ud fra vores test kan vi se, at brugerne havde let ved at navigere rundt på vores hjemmeside. Uden problemer fandt brugerne ud af, hvem der står bag sitet, hvor man kan købe butikkens varer, hvor butikkens mailadresse er, og at der er god læsbarhed. 28
Det eneste som brugerne ikke fandt så brugervenligt, var måden hvorpå butikkens åbningstider var skrevet. Vi havde skrevet åbningstider på samme linje (hvilket kan ses i vores MOCKUPS) og derudover så brugerne også gerne, at der åbnes en ny fane, når man klikker på de SoMe, så man stadig har hjemmesiden kørende i baggrunden. Brugervenligheden kommer naturligvis i første række, så begge dele er taget til efterretning og rettet. 29
REFLEKSION Vores refleksion er delt op i flere delafsnit i forsøg på at skabe en vis samhørighed i respektive afsnit: Kommunikation og Design (komposition) Interaktion (HTML & CSS) Processen (og vanskeligheder under vejs) KOMMUNIKATION OG DESIGN (KOMPOSITION) Indledningsvis finder vi det relevant at nævne, at vores design, valg af typografi o.a. er valgt på baggrund af en (for)tolkning og analyse af Feelgood Bakery s eksisterende website. Vi har tolket på det eksisterende websites farver, måden hvorpå Feelgood Bakery kommunikerer direkte til forbrugeren og gør sig dus o.a. Derudover har vi forsøgt at danne os en idé om deres målgruppe, og hvilke personer, der kan finde på at besøge deres website - for netop at tilpasse designet hertil. Vores design har vi ønsket at bygge op omkring enkelthed, brugervenlighed, udvalgte afdæmpede farver. Feelgood Bakery s oprindelige design var bygget op omkring lyse beige farver, let- serif brødtekst og nogle illustrerende billeder, hvilket vi har valgt at bygge videre på. Vores design er bygget op omkring et hvidt kanvas, placeret på en forholdsvis neutral baggrund, der giver et ønsket white space (centralisere det relevante og skabe ro omkring). Farver er et interessant værktøj, da disse kan fungere både som organisatorisk værktøj ligesåvel som et personligt værktøj. Kraftfulde, kontrast- farver drager opmærksomhed herpå - hvor nedtonede farver med tilføjelse af enten sort el. hvid vil falde mere i baggrunden. Vi har valgt en dæmpet beige og en blå (udvundet fra Feelgood Bakery s logo) for at fremme den beroligende, naturlige, jordnære stemning. De to farver supplerer hinanden godt og den blå farve i navigations- feltet bliver - som ønsket - fremhævet ifht. footeren; dette bl.a. grundet en vis kontrast til beige. Vores website er opbygget omkring rækker, kolonner og det geometriske - nærmere betegnet det rektangulære. Vi har valgt en kendt opstilling på vores website med navigation i toppen, webshop- tilgang yderst til højre i navigationsmenuen og en footer i bunden, der angiver en adresse på Feelgood Bakery. Generelt er information og felter i øvre højre hjørne forbundet med noget vigtigt. Ex søgefelt el. indkøbskurv, hvorfor vi har valgt at placere links til sociale medier (Facebook og Instagram) her, da vi ønsker at forbinde forbrugeren med disse to. Vi har udforsket Feelgood Bakery s Instagram og Facebook, som jævnligt opdateres med nye billeder og opdateringer fra deres mini- bageri. Det kunne være interessant at arbejde med overraskende website- elementer, men eftersom vi tolker Feelgood Bakery s målgruppe som standard- Internet brugere, har vi fravalgt dette. I vores mockups (vores oprindelige design- ide) har vi anvendt skrifttypen Bodoni 72 (bold og book) til overskrifter og brødtekst. Denne font har vi valgt grundet skriftens seriffer, samt dennes moderne udtryk. 30
Da vi nåede til kodningsdelen, var denne font ikke en del af Brackets - og denne fandtes heller ikke på Google Font, hvorfor vi på websitet anvender Arapey. Vi er selvfølgelig ærgerlige over denne ændring, da Arapey ikke har samme høje og slanke udtryk som Bodoni 72 - men umiddelbart fungerer denne OK som alternativ. Kompositionsvalget er primært det enkle, harmoniske og symmetriske. Vi har fravalgt alt for voldsomme og vulgære størrelseskontraster og farvekontraster, da vi tolker Feelgood Bakery s budskab som noget mildt, rart og behageligt (jf. Feelgood ) og knap så spraglet. Vores overskrifter er dog meget større end brødteksten, hvorfor vi selvfølgelig ikke kommer 100% uden om størrelseskontraster. Derudover er skriften sort og kanvas hvid. Vi har haft de max 65 tegn pr. linje i hovedet ved udarbejdelsen af websitet, dette har vi dog ikke fået gjort gældende ved alle sider. Vi kunne have forhindret dette (og holde de max 65 teng pr. side) ved ex at indsætte sidebar- billeder. Vi har forsøgt at anvende gestaltlovene på en sådan måde, at design og funktionalitet går hånd i hånd i stedet for at modarbejde hinanden. Vores navigationsmenu er præget af lukket- og forbundethed, da denne fremgår i en ramme (lukkethed) samt med samme farve (forbundethed). Vi kunne have anvendt loven omk. lukkethed endnu mere, hvis vi havde rammet vores brødtekst ind - dette har vi dog bevidst fravalgt - bl.a. for at forbrugeren ikke er i tvivl om, at overskriften på siden, e.g. Om Feelgood Bakery og teksten nedenfor hører sammen. Vi har valgt at anvende SoMe (social media) ikoner (Facebook og Instagram) med cirkler omkring for at følge loven om lighed - hertil kan vi tilføje, at vi selv har lavet et bageri- ikon (også med cirkel), som fremgår på KONTAKT- siden. Vi har anvendt layoutshift til at gøre vores website responsivt, der e.g. leder an til billedrokeringer. Derudover bliver vores navigationsmenu omdannet til en MENU i smartphone- versionen, hvor man trykker menuen frem her. Vi har bibeholdt en skrift, der er stor nok til at læse og benytter os af muligheden for at scrolle på de to hand- devices (tablet og smartphone). INTERAKTION (HTML & CSS) Vi startede forløbet med en vis ide om, hvordan websitet skulle udforme sig, hvilket vi afbillede i vores mock- ups. Vi har forsøgt at replikere dette design så vidt muligt, men har løbende måtte genoverveje designvalg, afhængigt af, hvad der var muligt for os at programmere med HTML og CSS. Vi har blandt andet forsøgt at lave et slideshow til landingpage og en dropdown- menu til vores mobil- udgave. Sidenhen fandt vi ud af, at dette ikke rigtigt kunne laves med blot HTML og CSS, hvorfor vi måtte redesigne websitet for at tilpasse os begrænsningerne. Andre små forhindringer har vi kunne løse, gennem vejledninger på Google- søgning og W3- schools. Gennem ugens forløb, har vi måtte bruge CSS og HTML i en grad ingen af os har gjort før. Grundet dette, har vi forbedret os meget inden for både CSS og HTML. Som nævnt ovenfor, fungerede vores mockups typografi ikke i HTML- CSS delen, hvorfor denne måtte ændres til Arapey. Arapey er ikke en fastindlagt typografi i Brackets, hvorfor denne derfor skulle installeres i editoren. 31
PROCESSEN (OG VANSKELIGHEDER UNDER VEJS) Mandag startede vi med at analysere det i forvejen eksisterende website for Feelgood Bakery. Herigennem gjorde vi os også nogle tanker omkring, hvem Feelgood Bakery er, hvem der står bag, hvad deres budskab er, hvad de sælger, hvem deres målgruppe er etc. Disse tanker (og tolkninger) videreførte vi til vores beslutninger og valg v. eget design. Vi gjorde noget research, hvor vi undersøgte andre websites fra bageri- branchen (e.g. Lagkagehuset og Emmery s) for at få nogle ideer til vores opkommende website. Vi lavede en brainstorm, hvor vi lavede pros n cons for det eksisterende website og uddrog de ting, vi ønskede at videreføre. Tirsdag producerede vi styleguide(s), wireframes og layoutdiagrammer og begyndte at udtænke designprincipper og ønskerne herfor. Onsdag og torsdag producerede vi (flere!) mockups og tilrettede designet heri og programmerede HTML og CSS i Brackets. Som start valgte vi at kode farvede bokse i HTML, indsætte korrekte billeder, farve og fonte og så tilrette disse; dette for at skabe vores grunddesign. Derudover begyndte vi at sætte opgaven sammen og opdele denne i forskellige afsnit. Fredag lavede vi tests på vores site - både heuritistisk test og usability test - hvorefter vi tilrettede dét, der fandtes fejl på. Derudover blev websitet kodet endeligt færdigt og rapporten sat fuldt sammen. Som gruppe havde vi ingen problemer - hertil har vi dog også gjort os nogle tanker. Vi greb opgaven an meget intuitivt. Dvs. at to af os primært stod for kodningen og to af os stod for design, mockups og skrivning. Denne arbejdsmetode valgte vi i teorien grundet ønsket om et færdigt produkt. Havde vi grebet opgaven an, hvor alle lavede mockups, styleguides og kodede sider, ville vi måske (?) ende ud i uenigheder, e.g. ved valg af design, psykologisk pres v. manglende programmerings- el. designkompetencer o.a. Vi oplevede i gruppen en forholdsvis nem tilgang til opgaven, da koderne var enige i designerne fra start. Dermed ikke sagt, at koderne IKKE havde del i designet, da dette blev skabt på baggrund af den samlede gruppes tanker og ideer om designet fra brainstorming om mandagen. For at gøre vores arbejde let tilgængeligt for alle, valgte vi at anvende Googledoc og Googledrive. Vi har allerede nævnt nogle vanskeligheder, bl.a. hvad programmeringen angår, hvorfor vi ikke nævner disse igen. Dog vil vi påpege en anden form for vanskeligheder, nemlig ressourcemangler, bl.a. i form af manglen på tid, professionelt fotostudie og opstartsvanskeligheder. Såfremt at vi havde mere tid, mulighed for at tage flotte billeder og var bekendte med programmering og InDesign og Photoshop, så ville vi uden tvivl kunne producere et andet - langt mere professionelt produkt. Gruppen har hele vejen igennem været gode til at give - og modtage - den eventuelle konstruktive kritik, der end måtte komme. Der har gennem hele ugen været fuldt engagement fra hele gruppen og der er blevet udvist en utrolig punktlighed hvad aftaler angår. Ydermere har vi haft det utroligt sjovt, så det har både været en positiv, lærerig og produktiv uge for os - og vi synes bestemt, at vi har fået meget ud af at arbejde sammen som gruppe. Der er absolut forskel på, når een hjerne er i spil vs. fire hjerner, der er i spil. 32
LINK TIL HJEMMESIDE http://just- mmd.dk/kea/feelgoodbakery/fgb- landingpage.html Brugernavn: keammd Kode: kode2015 33