GRUPPE. Ann Hellestrup Johannsen Clara Terese Abel Hagelund Lina Hansen Monica Jannerup Lund

Transkript

1 GRUPPE 7 Ann Hellestrup Johannsen Clara Terese Abel Hagelund Lina Hansen Monica Jannerup Lund

2 INDHOLDSFORTEGNELSE Analyse af eksisterende website...kommunikation...responsive design...kommunikation og virkemidler...grafisk virkemiddel...sprogligt virkemiddel...strukturelt virkemiddel...research Koncept og idé...moodboard...sitemap Wireframes...Web...Tablet...Mobil Styleguide...Styletile...Styleguide Layout diagrammer...diagram - Web html Refleksion...Analyse...Process...Færdig hjemmeside og fremtidig vision...evaluering

3 Analyse af eksisterende website

4 Analyse af eksisterende website Kommunikation Cinnober er en hjemmeside som promoverer en boghandel i København af samme navn. Hjemmesiden fungerer også som webshop, hvor der kan købes bøger, kontorartikler og andet inventar. Artiklerne er valgt ud fra en kunstnerisktisk og moderne æstetik og fokuserer på design. AFSENDER Cinnober MÅLGRUPPE Folk med en interesse for kunst, design, illustration. Slut teenage til midt 30; mest fokus på unge voksne. Hipsters, Alternativ hippie, Indie. Kreative sjæle BUDSKAB At sælge bøger og artikler, med fokus på design og kunst, til en kreativ målgruppe. EFFEKT Ved at bruge et moderne, enkelt og minimalistisk udtryk, giver det brugeren større overblik. Dog mangler hjemmesiden noget som udtrykker deres kreativitet.

5 Analyse af eksisterende website Responsive design HOME LOGO ABOUT

6 Analyse af eksisterende website Responsive design NEWSLETTER NEWSLETTER - READ MORE

7 Analyse af eksisterende website Responsive design WEBSHOP WEBSHOP - KATEGORI VALGT

8 Analyse af eksisterende website Responsive design WEBSHOP - KATEGORI VALGT - VARE VALGT CONTACT

9 Analyse af eksisterende website Kommunikation og virkemidler DET FUNKTIONELLE BEHOV Det funktionelle behov bliver opfyldt. Den grafiske del er meget ligetil og simpel. På grund af sidens minimalistiske udseende og mangel på farver og billeder, bliver man ikke distraheret og det er let at navigere rundt på siden. Sproget skifter mellem dansk og engelsk, hvilket kan være irriterende, men selve sproget er nemt og letlæseligt. DET RELEVANTE BEHOV Behovet for relevans bliver tildeles opfyldt. Der er som sagt ikke brugt mange farver eller billeder på siden, hvilket til dels hænger sammen med Cinnobers udtryk; den minimalistiske stil stemmer overens med deres logo, men manglen på farver og billeder går imod den kunstneriske stil. Sproget er er også minimalistisk, da der ikke er blevet brugt unødigt eller kreativt sprog. DET EMOTIONELLE BEHOV I forhold til om siden opfylder det emotionelle behov, er de visuelle virkemidler i undertal. Men man får den information og viden man skal bruge. Hvis butikken vil fremstå mere som en butik, der vægter æstetik og design højt, kan websitet komme op i en kaliber der udstråler dette ved at tilføje lækre blikfang og farver.

10 Analyse af eksisterende website Grafiske virkemidler Websiden har på alle sider det samme gennemgående tema. Sort/hvid-kontrast er det gennemgående tema, og farver skal man finde i de få billeder. Den hvide baggrund gør, at den sorte skrift og logoet samler sig og bliver sat mere i fokus. FARVER Sort og hvid skaber simpelhed og minimalisme, samt giver en stor kontrast. Siden har de nødvendige funktioner og det fungerer som det skal, men manglen på farver og billeder gør at brugeren ikke bliver stimuleret nok. LOGO Simpelt, genkendeligt og moderne. Logo og skrifttype er begge influeret af bløde former, hvilket hjælper siden med at bløde de hårde kontrater op. Siden er for kedelig at kigge på.

11 Analyse af eksisterende website Grafiske virkemidler TYPOGRAFI Siden bruger Verdana som er websikker og hører under kategorien Sans Serif Display skrift overskrift for hver menu Konsultativ tekst kontakt information har en letlæselig opsætning som også er markeret med fed, der gør at brugeren hurtigt kan finde nødvendige informationer. I brødteksten under Newletter er der brugt fast for og bagkant, hvilket gør, at der opstår mange spatiere, da linjerne skal have samme længde. KOMPOSITION Sidens simpelhed, gør at brugeren ikke bliver forstyrret af unødvendige elementer. Men det kan have en lettere kedelig effekt. Det vigtigste bliver fremhævet og sidens simple opbygning gør, at indholdet er let at forstå. Navigationen ligger i bunden af siden og danner en ramme, som man kan vende tilbage til igen og igen.

12 Analyse af eksisterende website Sprogligt virkemiddel Teksten på siden er generelt relevant og let at læse eller scanne uden at overse vigtig information. I sektionerne About og Contact er teksten kun skrevet på engelsk, og henvender sig dermed også til udenlandske kunder selvom, at webshoppen ikke som standard har levering til udlandet. Dog er nyhedsbrevet kun på dansk, på trods af at tilmeldelsen til dette foregår på engelsk. Informationen om produkterne er også kun skrevet på dansk og Informationen om det enkelte produkt varierer i både længde og relevans. Den generelle tone på siden er, ligesom sproget, letforståelig og ligetil. I nyhedsbrevet ændrer tonen sig dog, og bliver mere personlig og levende; hvor beskrivelser er skrevet mere objektivt, er nyhedsbrevene mere præget af subjektivittet. Teksten i nyhedsbrevet er overordnet relevant omend for lang, og på grund af sidens opbygning og navigation, bliver det svært at få det fulde billede når man læser et nyhedsbrev. Piletasterne som bliver brugt til at scrolle, er ikke brugervenlige, da de er for små, både udseensmæssigt så man overser dem, og trykkefladen er for lille. Generelt sikrer de sproglige virkemidler, at sidens indhold bliver formidlet forholdsvis let, men selve sidens opbygning gør det svært for brugeren at bevare fokus. Men ser man kun på sproget, så er det relevant og Cinnober får opfyldt de basale funktionelle behov. Sprogmæssigt er det relevant og enkelt, og Cinnober får opfyldt de basale beho

13 Analyse af eksisterende website Strukturelt virkemiddel Den generelle struktur på siden er præcis og enkel, dog til tider, lettere irriterende. Det er ikke svært for brugeren at navigere rundt på siden og det tager ikke lang tid at finde den søgte information. Med det sagt så understøtter strukturen af siden ikke indholdet. Cinnober er en butik, der lever af at sælge visually inspiring bøger m.m. Bøgernes indhold beskæftiger sig med kunst og grafisk design, derfor ville en mere visuel inspirerende side kunne hjælpe Cinnober til bedre at reklamere deres indhold. Et andet problem er at Cinnober, først og fremmest,er en boghandel, men der er inet øget fokus på salg af bøger i forhold til de andre boligartikler. Hvis Cinnober valgte at lægge mere vægt på, bøger, design og kunst, kunne det højne eksklusiviteten og kvaliteten af deres brand og produkter. Navigation på siden varierer fra ligetil og nemt til uoverskueligt og besværligt. Den overordnede menu fungerer fint, især på Home-siden. Der er et begrænset antal muligheder, men dem der er, er funktionelle og opfylder brugerens behov. Udseendemæssigt er det en basal horisontal menu. Den er enkel, og adskiller sig fra resten af siden uden, at man er i tvivl takket være reglerne om lighed og nærhed, som er i spil. I sektionen Newsletter benytter man sig af en navicon menu for, at brugeren kan se tidligere nyhedsbreve.på trods af at dette er en simpel struktur,engagerer det ikke brugeren eller får en til at blive længere og undersøge mere på siden, derudover ødelægger det opfattelsen af den ellers simple navigation og design, der eksisterer på siden.

14 Analyse af eksisterende website Research Vi har valgt at tage udgangspunkt i hjemmesider som har den samme målgruppe som Cinnober, og som også udbyder boligartikler udover bøger. Det betyder at bog-udbyderer som Bog & Idé, Saxo, Grafisk Litteratur og BogBasen ikke vil blive taget i betragting. HJEMMESIDER TIL SAMMENLIGNING Hjemmesider med fokus på salg af bøger, har ofte et stort udvalg og har samme layout; mange underkategorier og lister, samt et mere brugervenligt website som skal kunne fungere godt uanset platform. er den hjmmeside som minder mest om et klassisk bog-salgs-website. Der er ikke så meget fokus på, at webdesignet skal se æstetisk godt ud. På siderne og er der derimod stor fokus på æstetik og design. Grunden til denne forskel er, at Stormfashion og Justspotted fokuserer mere på kunst; de sælger kunst, design, fashion som hovedpart, hvorimod dac-bookshops fokus er bøger.

15 Analyse af eksisterende website Research Eftersom Cinnober er en boghandel, kan man konkludere at Cinnobers fokus er bøger, dog har de et mere kunstneristisk webdesign end den almindelige bog-forhandler. Dette skyldes at de har et mindre udvalg af bøger som alle fokuserer på design og kunst, derfor behøver de ikke en masse lister eller kategorier, hvilket betyder at de kan tillade sig at fokusere mere på design og layout. Det skal dog nævnes, at fordi selve sitet er så småt, så virker det uoverskueligt at hver gang man skal scrolle. Vælger man at se bort fra dac-bookshop, så er der nogle helt klare ligheder mellem de andre sider. Siderne er visuelle, men stadig minimalistiske, kvadrater er også noget som går igen på alle sider, da det er moderne og samtidig giver overblik. Siderne prøver på, udadtil, at vise, at de ved noget om design, kreativitet, og kunst. Alle følger de i forskellige grader den samme stil, samme målgruppe og samme budskab.

16 Koncept og idé Moodboard

17 Koncept og idé Moodboard

18 Koncept og idé Sitemap HOME ABOUT NEWSLETTER WEBSHOP CONTACT Read more Opbevaring Udvalgte bøger Marts 2016 Feb Jan Jan Dec Nov Okt Sep Nov 2008 Noteshæfter Kontor Særtryk Brevkort Diverse Belysning Skitsebøger Magasiner Magasiner Oversigt over produkter. Det enkelte produkt

19 Wireframes Web Vores udgangspunkt er rammer i forskellige størrelser. Det skal skabe overblik, samt give siden et kunstnerisk udseende. Rammerne skal fungere som billeder og links, samt give siden et kreativt og unikt udseende. På den nuværende side er der stor mangel på billeder, hvilket har givet hjemmesiden et koldt og minimalistisk look. Vi vil dog gerne prøve at bibehold det minimalistiske look, da det giver ro og overblik for brugeren. Vi vil derfor prøve at holde al vigitgt indhold i centrum og lave baggrunden enkel. Vi vil også afholde os fra ar bruge andre former end firkanter, fordi det vil gøre siden forvirrende at se på, da vi har mange små individuelle objekter.

20 Wireframes Web

21 Wireframes Web

22 Wireframes Web

23 Wireframes Tablet Vi vælger at gøre layoutet for tablet og web det samme. Dette kan lade sig gøre, fordi rammerne er store nok til til tablet-brug. Hvis der skulle være ændringer, kunne man gøre selve ramme-layoutet større.

24 Wireframes Tablet

25 Wireframes Tablet

26 Wireframes Tablet

27 Wireframes Mobil Layoutet for mobil ændrer sig i forhold til tablet og web, dette skyldes at mobilens skærm er for lille til at kunne understøtte ramme-layoutet. Vi vil dog stadig gerne bibeholde ramme-temaet, derfor har vi valgt at sætte rammerne op side om side, og gjort dem kvadratiske. Baggrundsfarve og rammenes indhold, i forhold til billede og tekst, vil stadig være det samme.

28 Wireframes Mobil

29 Wireframes Mobil

30 Styleguide Styletile #E4E3EB #949EAFt Nunito Regular Nunito Light Nunito Bold #E1E0DC #A2BBC6 Playfair Display SC Playfair Display SC BOLD #FAF0E4 #07637D tekstur rammer tekstur baggrund

31 Styleguide Styleguide - Web Startside - forside - home about

32 Styleguide Styleguide - Web contact webshop

33 Styleguide Styleguide - Web newsletter newsletter - newsletter valgt

34 Layout diagrammer Diagram - Web html Grundet vores ramme-layout vil det være nødvendigt at lave mange [div], dette skyldes at rammerne skal være forskelige størrelser og længder, men samtidig være på linje med hinanden. Der er en risko for at kodning kommer til at blive forvirrende, da der er mange forskellige bokse, billeder og div er der skal arbejdes med. Layout-diagrammerne er vores udgangspunkt, men vi regner med at skulle lave små ændringer undevejs i processen, da der kan fremkomme uforudsete problemer.

35 Layout diagrammer Diagram - Web html

36 Layout diagrammer Diagram - Web html

37 Layout diagrammer Diagram - Web html

38 Struktur Refleksion Analyse af ny hjemmeside Som gruppe er vi glade for vores færdige resultat. Det skal dog nævnes, at grundet sygdom hos flere gruppemedlemmer og Ann Hellestrup Johannsens udgang fra gruppen midt i ugen, har det givet tidmæssige problemer. Dette har resulteret i, at nogle ting ikke er blevet færdiggjort. Dette vil blive berørt i punktet Færdig hjemmeside og fremtidig vision. Strukturen er blevet ændret. Først og fremmest er navigationen blevet nemmere. Den simple horisontale navigationsmenu er stadig den samme, da vi mente, at den i al sin enkelhed ikke kunne forbedres. Men på siderne newsletter og webshop er man nu fri for at bruge piletaster for at scrolle. Det betyder, at strukturen nu ikke er et frustrationselement, hvilket i sig selv betyder at strukturen understøtter det visuelle udtryk, i stedet for at hæmme. Dermed er vores ide om at øge Cinnobers fokus på det eksklusive i deres brand og produkter, nu er understøttet af sidens struktur. Samtidig er der plads til et design og et layout, der er mere visuelt stimulerende end før Siden er overskuelig og enkel, men ikke kedelig. Farver På den oprindelige side var farverne holdt i sort og hvid. En beslutning der visuelt er enkelt og elegant. Vi har valgt at tilføje nogle simple farver, primært pastelfarver, og en lys baggrund hvis tekstur minder om papir. Fokusset på træ går igen i rammerne, der varierer i farverne og teksturer fra lys til mørk træ. Selvom der er flere farver og teksturer på siden end tidligere, bevares det enkle og stilrene udtryk stadig. Typografi Typografien som bliver brugt minder meget om Cinnobers egen skrift, som de bruger i deres logo. Det er en sans-serif i light, bold og regular. Tekst er ofte i andre farver end sort.

39 Refleksion Analyse af ny hjemmeside Logo Vi har valgt ikke at ændre logoet. Enkelheden i logoets udtryk passer godt sammen med det valgte design. Derudover besluttede vi at logoet hænger så meget sammen med det etablerede Cinnober-image, at det ville skabe mere forvirring end gavn at ændre det. Sprog Da vi ikke har valgt at ændre ved websidens tekst er problemerne stadig de samme. Overordnet er er tonen og sproget ligetil og letlæseligt, dog er teksten til tider for langt og uoverskueligt. Desuden er der stadig problemer med de skiftende sprog; dansk og engelsk. Sammenligning med andre sider Hvis man sammenligner vores nye webside med siden justspotted, som er en side og en butik der primært sælger plakater, er der visse ligheder. Designlayoutet på justspotted er delt op i firkanter, som gør det nemt for brugeren at navigere samt finde yderligere information. Vi håber at opnå det samme, ved at inddele menuerne i rammer. Derudover benytter vi også mange billeder ligesom justspotted til at understøtte og illustrere indholdet på siden.

40 Refleksion Analyse af ny hjemmeside AFSENDER Cinnober MÅLGRUPPE Folk med en interesse for kunst, design, illustration. Slut teenage til midt 30; mest fokus på unge voksne. Hipsters, Alternativ hippie, Indie. Kreative sjæle BUDSKAB At sælge bøger og artikler, med fokus på design og kunst, til en kreativ målgruppe. EFFEKT Ved at bruge et kunstneriskt, moderne og unikt design, udviser det en viden om kreative emner. Cinnober ved noget om kunst og design. Eksperter. Dem man skal købe bøger hos.

41 Refleksion Processen Ide og design Hele gruppen blev meget hurtigt enige om at tage udgangspunkt i skandinavisk design; vi var vilde med de matte og støvede farver, samt brugen af lyst træ. Vi valgte også at lade os inspirerer af hipster-stilen; det var især vintage-produkter, rammer og de tonede billeder som fangede os. Grunden til vores design-valg er, at vi ville have siden til at udstråle kreativitet, modernitet og design, og det mente vi kunne lade sig gøre med et unikt skandinavisk/hipster-design. Skandinavisk design, og dansk design, er utroligt moderne og er i høj kurs på det internationale marked og vi kunne ud fra hjemmesidens nuværende tekst, konkludere, at Cinnober i fremtiden gerne ville ud til et mere internationalt puplikum. Skandinavisk design med et hint af Hipster Vi besluttede, at vi gerne ville bibeholde den gamle sides overskuelighed, derfor valgte vi at tage udgangspunkt i rammer og firkanter. Men vi ville også have, at siden skulle være unik og kreativ, og derfor fandt vi på ideen om en ramme-væg. på den måde blev siden kreativ og kunstnerisk, og forblev overskuelig. Færdigt resultat Vi er overordnet tilfredse med vores side. Vi vidste godt at det ville blive en udfordring, men det færdige resultat er blevet godt, og vi er meget stolte af vores arbejde. Hvad vi ikke kunne forudse var sygdom og mangel på gruppemedlemmer; det skabte store problemer, især i forhold til tid, og det resulterede i at der var dele vi ikke kunne nå at færdiggøre.

42 Kodning Al kodning i html blev skrevet uden problemer, men på grund af det valgte layout var der problemer i css. På homesiden var der f.eks. problemer med placeringen af, og afstande imellem, rammerne. For at løse dette problem, på både homesiden og i de andre menuer, indsatte vi flere div er for, at de forskellige margins og borders ville være i overensstemmelse med designlayoutet. Siden er til dels responsivt så længe man ikke bruger koden til at centrere. Se billeder. Refleksion Processen Vi har her sat wrapperen til at centrere. Her er siden stor/fuld skærm. Det ser fint ud Vi har her sat wrapperen til at centrere. Her prøver vi at kigge på breakpoints. Det fungere ikke. Kodning var et stort problem og det var den del af opgaven som tog længst tid. Vi havde desværre ikke tid til at lave kodningen til mobil-udgaven, men wireframes er blevet lavet så det var en del af vores plan. Vi har vi slettet koden som centrere wrappern. Her prøver vi at kigge på breakpoints. Det fungere fint.

43 Refleksion Færdig hjemmeside og fremtidig vision Den færdige hjemmeside er desværre ikke fuldstændigt responsivt simpelthen på grund af tidsmangel. Der var ikke tid til at lave mediaqueries til tablet og mobil, men siden kan formindskes og forstørres på websiden. Fremtidig vision - Optimering af brandet og websiden I fremtiden er der forskellige ting, som kan videreudvikles. Først og fremmest de sociale medier, som er et vigtigt og effektivt værktøj, når det kommer til at markedsføre, ikke blot butikken og dens brand, men også de forskellige produkter de fører. Cinnober har både en facebook og en instagram side,vi har derfor lavet et eksempel på en optimeret instagramside: På denne side er der en klar sammenhæng mellem de billeder, der deles på de sociale medier med nye produkter samt de events, der reklameres for i nyhedsbrevet. I forhold til selve websidens sprog, så skal man i fremtiden skulle kunne vælge mellem dansk og engelsk. Lige nu er nyhedsbrevet skrevet på dansk, imens tilmeldelsen foregår på engelsk, dette er forvirrende, især hvis Cinnober gerne vil udvide deres brand internationalt.

44 kea2016 mmdkode

45 Skema til Heuristisk evaluering Gruppe nr. 7 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

46 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? Responsivt design Konsistens og standarder cinnober/home.html 4 Siden skal gøres responsivt. Et par timer. Layout kan være uoverskueligt, men det er først og fremmest på grund af manglen på responsivt design. Æstetisk og minimalistisk design cinnober/home.html 1 Når siden bliver responsivt burde problemet løse sig selv. Hvis det stadig virker uoverskueligt, så er det på grund af det design vi har valgt. På websiden er der indenunder webshop kun linket til særtryk. Vi havde ikke tid til at lave undersider til alle produktgenrene. Konsistens og standarder. cinnober/ webshop.html 2 Rettelser i html og rettelser css. Et par timer. På websiden indenunder newsletter er der kun linket til newsletter marts. Konsistens og standarder. cinnober/ newsletter.html 2 Rettelser i html og rettelser css. Et par timer. Lav eventuelt flere rækker selv... Kategori: 0 = I don't agree that this is a usability problem at all 1 = Cosmetic problem only: need not be fixed unless extra time is available on project 2 = Minor usability problem: fixing this should be given low priority

47 3 = Major usability problem: important to fix, so should be given high priority 4 = Usability catastrophe: imperative to fix this before product can be released