Analyse af website: cinnobershop.dk Gruppe 12: Brit, Caroline, Line & Søren v1_7/3-16
Indholdsfortegnelse ANALYSE Kommunikation 3 Wireframes - Home 4 - about 5 - webshop 6 - webshop/betaling 7 Grafiske virkemidler 8 Sitemap 9 Styletile 10 Sproglige virkemidler 11 Responsivt design 12 Konkurrenter 13 REDESIGN 15 (find link til ny website) Indledning 16 Designprincipper 17 Styletile 18 Responsiv design 19 Endelige Wireframes 20 Layoutdiagram 22 Sitemap 27 Testresultat 28 Refleksion 29 konklussion på analyse 14 2 2
Kommunikation Hvem er afsenderen? Cinnober er en boghandler i København med speciale i internationale bøger og magasiner om design og kunst, samt kontorartikler og kunstplakater. Hvem er målgruppen? Grafiske designere, arkitekter, kunstnere og andre med interesse i design. Hvad er afsenderens budskab? Forsiden fortæller ikke noget om hvem de er eller hvad de tilbyder. Hvilken effekt ønsker afsenderen at opnå?. flere kunder i den fysiske butik. tilmeldinger til deres nyhedsbrev. sælge et udvalg af deres sortiment online Hvad kan du forestille dig, at afsenderen ønsker, at målgruppen skal tænke om afsenderen? Cinnoble vil sandsynligvis gerne fremstå både internationale, inspirerende og som den butik med stort udvalg og ekspertise indenfor design og kunst litteratur. 3 3
Wireframes home 4 4
Wireframes about 5 5
Wireframes webshop 6 6
Wireframes webshop/betaling 7 7
Grafiske Virkemidler Det funktionelle Det funktionelle behov er okay opfyldt, siden er simpelt, og overskuelig. Vi er ikke i tvivl om hvor vi kan finde de forskellige informationer. Til gengæld er den måde man bevæger sig på siden, ikke særlig funktionel, især når man ikke kan scrolle på tastatur, men skal anvende knapper, som man i øvrigt nemt overser. Så strukturen halter lidt. Navigationen halter desværre også. Vi har en menu en som ligger i bunden, i stedet for toppen, derudover har vi en home knap, hvorimod vi hellere vil have at home-funktionen lå i logoet. Rækkefølgen i navigationen skal også rykkes om, da webshop skal stå før about. Til sidst skal sproget også rettes, da noget står på dansk og andet på engelsk. Det relevante Behovet for relevans er også ganske fint opfyldt. Måske kunne der enten anvendes flere billeder, eller skæres ned i teksten, da siden er en smule teksttung. Yderligere kunne man evt. have et billede af ejeren, for at gøre siden mere intim/personlig. Det emotionelle Siden engagerer ikke brugeren emotionelt. Allerede når man ser forsiden, er man i tvivl om hvad det omhandler. Er det et bibliotek? Et projekt? Et brand? vi skal ind og læse about, og se billeder før vi har et indblik i, hvad siden handler om. Den grafiske stilart er meget simpel. Jeg vil mene at de har lavet designet sådan, for netop at fremhæve deres design-bøger (varer). Men dette design har desværre gjort siden meget standardiseret og kedelig. 8 8
Sitemap 9 9
Styletile 10 10
Sproglige virkemidler Det funktionelle: Teksten er forståelig, men kommer hurtig til at virke meget tung. F.eks. under about har vi kun en overskrift og en brødtekst, vi kunne godt bruge en mellem eller underrubrik til at dele teksten lidt op, og derved gøre den lettere og mere letlæselig. Relevans: Teksten er relevant ift. Siden, dog er der en meget varieret tone. Den ene halvdel af siden har en meget professionel informerende tone, mens den anden halvdel er legende og poetisk. Derfor burde man have valgt en tone, eller tilgang til teksten, i stedet for to, da det skaber uro og forvirring. Emotionelt: Igen er der to meget forskellige toner i teksten. Vi er som læsere bliver i tvivl om hvem cinnober er. Er de seriøse og alvorlige? Eller er de legende og poetiske? Jeg er meget i tvivl hvorvidt de sproglige virkemidler understøtter sidens tema. 11 11
Responsiv design Der er ikke tænkt i at lave et responsiv design på cinnobershop.dk Derfor er der ingen breakpoints. Det gør hjemmesiden besværlig i forhold til de mobile platforme, hvor teksten bliver meget lille og til tider ulæselig, hvis man ikke zoomer ind på skærmen. Eksempelvis er det utrolig svært at navigere rundt i webshoppen, da teksten er for lille og de alt for små billder, ikke giver et ordenligt indtryk af produktet. 12 12
Konkurrenter Cinnobles direkte konkurrenter af uafhængige boghandlere med speciale indenfor design og kunst har alle hjemmesider med det hovedformål at sælge produkter online. Forsiderne viser typisk udvalgte produkter, nyheder og tilbud. Generelt for alle hjemmesiderne er at de kun i nogen grad er responsive. dac-bookshop.dk er Dansk Arkitektur Centers online webshop. Boghandlens fysiske butik er repræsenteret på Dansk Arkitektur Centers hovedside (dac.dk), hvor events m.m. i deres fysiske butik er tilgængelig. viking1914.com og stelling.dk har udover deres webshop også blogs, nyhedsartikler, og oversigt over kommende events og udstillinger på forsiden. Det gør det mere interessant, relevant og involverende for brugeren at besøge deres hjemmesider. DAC hovedside DAC bookstore (webshop) 13 13
Konklusion på analyse Cinnobers site er ikke særlig stærk til at formidle hvilket erhverv det handler om, vi skal som forbruger ind og læse om hvem de er og hvad de laver, før vi egentligt ved hvad det drejer sig om. Dette er det første vi ønsker at lave om på. Det skal altså være tydeligt og klart, at cinnober er en boghandel for mode, design arkitektur mm. Derfor skal splash image, samt home menuen skildre dette klart. Yderligere skal sitets struktur laves om til en one-page. Der skal anvendes en normal scroll funktion (tastatur), i istedet for knap-funktion. Navigateren vil vi gerne flytte til toppen af sitet, hvor vi også gerne vil have rykket, samt omdøbt de forskellige sektioner så det matcher sidens indhold bedre. Home knappen vil vi have slettet, og rykket home-funktionen under logoet. 14 14
redesign af website: http://britmolgaard.dk/kea/cinnobershop/index.html Brugernavn: kea2016 Kode: mmdkode
Indledning Vores formål med den ny designede hjemmeside for Cinnober er at gøre deres budskab mere klart og mere brugbart. Det har vi bl.a. gjort ved hjælp af et nyt splashbillede hvor budskabet om butikken som en egentlig boghandel, gerne skal stå klart og tydeligt med en implementeret bog i billedet. Vi har også gjort siden mere overskuelig med nye symboler af deres udvalg af forskellige produkter. Processen med udarbejdelsen af symbolerne er eksemplificeret ved en skitsetegning. Vi har valgt at beholde det enkle udseende dog med lidt flere farver. Menuen er blevet flyttet op i toppen istedet for bunden og der er tilført nye sektioner som nyeste bøger, sortiment, events nyhedsbrev og kontakt. Herunder også i et responsivt design. Dette er alle sektioner vi mener er afgørende for en butik som Cinnober, hvor fokus skal være på deres sortiment og de begivenheder de afholder i forhold til deres sortiment. Teknisk er alle sektioner blevet beskrevet i et sitemape og endivdere i wireframes i både laptop og responsiv design og efterfølgende i layoutdiagrammer. Herefter kunne vi begynde at kode. 16 16
Designprincipper Den nye Cinnober side skal, ligesom ved det tidligere design, fremstå i et simpelt og symmetrisk design, dog ønsker vi at tilføje flere farver. Selve ordet Cinnober betyder en rødorange farve, som vi derfor har valgt at inddrage. Hertil ville vi gerne beholde sidens stærke kontraster (sort/hvid), så derfor har vi yderligere anvendt en blålig nuance som er en komplementærfarve til orange. Dertil ønsker vi også at gøre kontrasten mere indirekte, ved bla. at tone farverne ned. Under sortiment sektionen (se screenshot), har vi valgt ikke at indramme sektionen. I stedet bygger denne sektionen på teorien om lighed. De forskellige bokse har samme form, farve, og størrelse, og derved skaber de et rum for sig selv. Mht. typografi har vi valgt at benytte os af sans-serif skrifttyper, igen for at understøtte det enkle design. 17 17
Styletile 18 18
Responsiv design MOBILENHED LAPTOP Hvor Cinnober s oprindelige hjemmeside ikke fungere på mobilenhed har det været afgørende at få lavet et fungrende responsiv design. Af design patteren er der på den nye hjemmeside primært gjort brug af mostly fluid, da vores ikoner i både nyeste bøger og i sortiment sektionerne, bevæger sig ned under hinanden når vi formindsker skærmen. Eksemplificeret på billlederne. Det betyder at ikonerne nu er læsevenlige på de mobile enheder på en midre skærm. 19 19
Endelige wireframes laptop 20 20
Endelige wireframes mobil 21 21
Layoutdiagram Nyeste bøger 22 22
Layoutdiagram Sortiment 23 23
Layoutdiagram Events 24 24
Layoutdiagram Nyhedsbrev 25 25
Layoutdiagram Kontakt 26 26
Sitemap 27 27
Testresultater 28 28
Refleksion Grafiske virkemidler Det funktionelle behov Vi har lavet en ny nav-bar som er blevet placeret i toppen af sitet, samt inddelt sidens indhold i nye sektioner. Dertil har vi rette scroll funktionen, så den fungere normalt, samt lagt home-funktionen under logoet. 29 29
Refleksion Grafiske virkemidler Behovet for relevans Vi har rettet en del af teksten, så alt nu står på dansk, dertil har vi givet sektionerne nye overskrifter, så der er bedre sammenhæng mellem links i menuen og sidens indhold. Et yderligere forslag til hvordan man kunne optimere sproget, var måske at tilføje en bestemt tone, evt. en legende eller poetisk, da dette vil fremhæve shoppens kreative aspekt. 30 30
Refleksion Grafiske virkemidler Det emotionelle behov Dette punkt har vi været meget fokuseret på, da den tidligere side var meget uklar i hvem de er og hvad de laver. Derfor vil vi engagere forbrugeren emotionelt ved at fremhæve hvad cinnober ernemlig en boghandel for design. Vi har anvendt et splash-billede, samt en nav-bar i toppen af siden, som begge stærkt indikere at det er en boghandel. 31 31
Refleksion Kommunikation Hvem er afsenderen? Cinnober er en boghandler i København med speciale i internationale bøger og magasiner om design og kunst, samt kontorartikler og kunstplakater. Hvem er målgruppen? Grafiske designere, arkitekter, kunstnere og andre med interesse i design. Hvad er afsenderens budskab? Den tidligere side havde et meget svagt budskab, vi er i tvivl om hvem de er, og hvad de beskæftiger sig med. Det nye budskab skal først og fremmest fremhæve at cinnober er en boghandel for design. Ydereligere har vi et mere underliggende budskab, nemlig at cinnober tilbyder en særlig expertise indenfor design. Cinnober håndplukker deres sortiment, og på den måde kan man sige at de agere som design-experter. Hvilken effekt ønsker afsenderen at opnå? At fllere kunder i den fysiske butiktilmeldinger til deres nyhedsbrevsælge et udvalg af deres sortiment online Hvad kan du forestille dig, at afsenderen ønsker, at målgruppen skulle tænke om afsenderen? At Cinnober er et unikt og inspirerende sted, med et håndplukket sortiment indenfor design. 32 32
Refleksion Proces og udfordringer Dag 1: Først lavede vi en analyse af cinnobers nuværende site, hvor vi udså de forskellige fejl, og dårlige funktioner vi ønskede at rette. Dag 2: udarbejdede vi nye wireframes og styletile samt tegne ikoner (se bilelde til højre) til siden. Dag 3: begyndte vi at kode. Vi delte sektionerne op internt i gruppen. Desværre var vores layout diagram ikke helt specifik nok, så der var lidt vanskeligheder med at få alle dokumenterne samlet, pga. manglende titler til de forskellige wrappers, artikler mm. Yderligere var det en udfordring at få alle ikoner, tekst, og knapper til at ligge i alignment vandret. Dag 3+4: har det især været det respontive design der har drillet. Især nav-baren i mobilversionen drillede, da vi i første omgang ønskede at links i menuen, skulle ligge lodret under hinanden. Vi måtte droppe dette da menuen ikke kunne folde sammen igen (hamburgermenu). Derfor endte det med at vi lod den stå som en flexboks. Til gengæld da vi validerede vores side, var der ingen fejl. Splashbillede, ikoner og logo er udarbejdet i photoshop. Opgaveaflevering er udarbejdet i indesign. 33 33