Redesign af website. Website: Cinnobershop.dk. Lavet af gruppe 13: Freja Astrid Petersen Jannik Olaf Randrup Søren Koefoed R. Madsen Malina M.

Transkript

1 Redesign af website Website: Cinnobershop.dk Lavet af gruppe 13: Freja Astrid Petersen Jannik Olaf Randrup Søren Koefoed R. Madsen Malina M. Stevns Indhold: Analyse af eksisterende website Koncept og idé Wireframes Styleguide Layout og diagrammer Kodning Beskrivelse af test og testresultater Reflektion Link og password til websitet

2 Cinnober Analyse Af eksisterende website Indhold: Kommunikation Responsive design Kommunikation og virkemidler Research

3 Kommunikation Hvem er afsenderen? CINNOBER er en bogforhandler. Hvem er målgruppen? Studerende, kunstinteresserede og udenlandske design/kunst entusiaster. Hvad er afsenderens budskab? At gøre opmærksom på deres virksomhed/boghandel, samt at gøre opmærksom på deres faglige emner. Hvilken effekt ønsker afsenderen at opnå? At man bliver interesseret i virksomhedens indhold. At man får lysten til at besøge boghandlen og/eller købe et produkt/bøger. Hvad ønsker afsenderen at målgruppen skal tænke om afsenderen? Et troværdigt sted at opnå professionel viden om design og lign. At afsenderen/virksomheden er specialister indenfor deres fag. Screendump af Cinnober website

4 Responsivt design Billedekommentar Websitet cinnobershop.dk er pt. ikke responsivt. Derfor er der ikke nogen input til breakpoints eller designprincipper. Screendump af ikke-responsivt site

5 Responsivt design Wireframes Wireframe homepage Wireframe newsletter Wireframe contact Kommentar Opbygningen og strukturen af det nuværende site er gennemgående simpel, hvilket disse wireframes også indikerer. Enkelte elementer, billeder og tilhørende tekst-beskrivelser er det grundlæggende på Cinnober s website. Wireframe about Wireframe webshop

6 Kommunikation og virkemidler I forhold til Jens Hogman Hansens model Indhold: Grafisk virkemiddel Styletile Sprogligt virkemiddel Strukturelt virkemiddel Sitemap

7 Grafisk virkemiddel Er det funktionelle behov opfyldt? På de første 3-5 sekunder når du ser på startsiden, er det på ingen måde synligt, hvad der er hovedindholdet på siden. Menuen er tydelig, simpel og til at forstå. Overskriften på de forskellige slides er ikke lige synlige, f.eks. på About siden, hvor den står forskudt i forhold til brødteksten. Er behovet for relevans opfyldt? Der er forholdsvis mange steder på sitet, hvor billeder og grafik ikke passer sammen med indholdet. Derfor er behovet for relevans ikke til stede. Engagerer siden emotionelt? Siden får ikke rigtig overbevist brugeren. Den enkelte stil er som udgangspunkt en god ide, men når førstehåndsindtrykket og billedmateriale, samt grafik ikke spiller sammen, så mister brugeren interessen og lysten til at engagere sig på sitet. Pga. de faktorer vil brugeren hurtigt søge mod en anden udbyder og købe produktet der. Screendump af forskudt overskrift

8 Styletile Af Cinnobershop.dk Farver Siden indeholder kun sort/hvid udover de billeder der ligger på siden. Tekstopsætning Font-family brugt: Verdana, Arial, Helvetica, sans-serif; Meget basale skrifttyper. Opbrydningen af dette tekst er virkelig dårlig udført, teksten står ikke lige under hinanden og med ujævne mellemrum. Styletile af website Komposition Kompositionen af siden er ganske udmærket, der er ikke undladt meget til tilfældigheden. Simpel opbygning, nem at navigere rundt på, klare og korte budskaber. Dog er siden kedelig og virker forhastet, sløset tekst, kedelige billeder, lettere sløret og grainy og sjusket vist. Siderne varierer meget i opsætning, hvilket tyder på at der er brugt betydelig mere tid på nogle sider end andre. Newsletter -siden er fornuftig, fin side med flotte farverige billeder. Ligesådan er webshoppen, hvorimod about sejler.

9 Sprogligt virkemiddel Er det funktionelle behov opfyldt? Teksten er letlæselig med korte sætninger, som gør, at det er nemt at forstå budskabet. Er behovet for relevans opfyldt? Teksterne på de forskellige slides er pga. de korte velformulerede sætninger relevante i forhold til indhold og funktion. Engagerer siden emotionelt? Det er her sitet har sin store force, at tekstindholdet er konkret og velformuleret, så brugeren hurtigt får klar besked omkring hvem Cinnober er, og hvad boghandlen står for. Hvordan er tonen? Der bruges mange fagord og det er et formelt sprog, som giver sitet et professionelt udtryk. Er der meget eller lidt tekst? Der er lidt tekst med velformulerede, kortfattede sætninger. Tekstuddrag af letlæselig tekst og sprog

10 Strukturelt virkemiddel Er det funktionelle behov opfyldt? Ja, siden består mest af en let overskuelig menu, med få menupunkter. Gestaltlove brugt er mest af alt whitespace, loven om nærhed, lighed og størrelsesforskelle. Der er ikke store forskelle på elementernes størrelse eller farver. Er behovet for relevans opfyldt? Der er begrænset mængder af tekst-informationer på siden. Undersiderne informerer fint om behov og relevans, og formidler fint for sidens funktion, men forsiden mangler en del information. Engagerer siden emotionelt? Nej, siden informerer om det nødvendige, men inspirer ikke videre til at undersøge emnet eller blive på siden i længere tid. Screendump af enkel forside

11 Strukturelt virkemiddel Sitemap Hvordan ser navigationen ud? Navigationen er en simpel bar på linje med sidens logo. Navigationspunkter er forbundet ved nærhed og lighed. Den er nem at finde rundt i og viser det vigtigste. Hvilken type navigation er brugt? En simpel navigationsbar i bunden af siden. Sitemap af Cinnober

12 Research Benchmark Redesign af website // 1. Semester // Tema 1 // KEA Hvordan Cinnober s site ser ud i forhold til konkurrenternes: Hvordan ser andre sites i branchen ud? Professionelt layout der fylder hele siden og har nav menuer i toppen. Splash giver en idé om hvad de enkelte sites handler om. Cinnober giver derimod ikke meget indikation om hvem de er. Andre sites har oftest en footer med grundlæggende site oplysninger. Hvordan ser konkurrenternes sites ud? Mere professionelle. Følger sitet trends i branchen? Til dels. Prøver at følge et minimalistisk udtryk. Følger sitet tidens tendens? Cinnober følger en minimalistisk trend med få detaljer og overskuelighed. Selve sitet er i en boks man scroller inde i. Nav menu er i bunden af denne box. Der er et Logo der dog ikke er et link til home. Siden er ikke responsiv. Screendump af andre sites

13 Research 5-sekunders test Meget professionel udseende Overskueligt, teksten er letlæselig, flotte billeder af mørk norsk natur der virker som kontrast til den hvide baggrund og spinkle tekstfont Scroll funktionen er dynamisk, rigeligt med citater, god komposition Klart budskab (book a table), stemningen er lagt, dropdown menu med let overskuelige muligheder This site knows what it wants! slogan i midten, overskrift om de kommercielle felter det er inden for Overskuelig nav menu, animeret logo (wee!), muligheder som kontakt og showcasing af hvad de laver, START A PROJECT buy our product right here I bunden af splash siden er der en kort 4-elements portfolio Footer er måske lidt i overkanten af størrelse Flot design. Viser hvad den vil have modtageren til med det samme: at lave en hjemmeside! Animeret baggrund for at vise alle de muligheder hjemmesiden giver Nav menu: login og sidebar popup menu med rigelig muligheder, b.la. kontakt og info Scroll ned: mulige website templates, anbefalinger fra firmaer (via logoer), kendte websider, flere design muligheder, billede af smilende imødekommende kundeservice Footer med info om legale ting, endnu en get started knap. En blog. Forvirrende loading animation ved åbning af side. Header viser et screenshot af css kode. Hvad vil den her blog? hjælpe med kodning? Man kommer direkte til et blog post. Nav menu viser projekter, som er et slideshow (på tysk), agentur er en uddybende about side som ser meget business professionel ud. Forvirrende layout. forvirrende og tysk B&OPlay. lydudstyr, reklameret både i header og splash Nav menu viser liste over produkter, splash viser tilbud på høretelefoner. Rimelig simpelt at forstå budskabet: salg af udstyr Scroll ned viser flere produkter, breaks i kategorier. Layout er pænt og professionelt, har modeller og magasin-fotografier til at reklamere produkter.

14 Koncept og idé Idégenerering

15 Idégenerering Interface Redesign Pages Krav: Gør dem responsive. Mulighed: Lav websitet til en onepager. Mere interessante farver der giver en idé om, at sitet handler om design. Gennemgende engelsk sprog. Logo Mulighed: Gør noget ved logoet så det bliver et link til home. Mulighed: Redesign logoet så det ligner kviksølvsulfid, evt. bevar svovlgul farve. Stil og tone på sitet? Keywords: Professionel. Troværdig. Kortfattet. Introducerende. Inspirerende. Menuen og forsiden Mulighed: Nav menu i toppen/drop-down sidebar, hover effekt, splash billede med grundlæggende info (evt. animeret), scroll-ned funktion for mere uddybende information. Krav: Fjern boxen/indramningen, lav det til et full-width page. Implementér scrolling så man kan bruge touch pad/mus. Krav: Ret forsiden og logo. Få det til at kommunikere sitets grundbudskab bedre. Hvad er budskabet? (kort og præcist som f.eks. et slogan/tagline) gøres synligt på forsiden: Vi formidler troværdig, professionel viden indenfor vores felt. Eksempel af forside med nav i top og stort splash med slogan/ tagline

16 Idégenerering fortsat About-siden Mulighed: Gør links mere synlige (sign up til newsletter, link til webshop og kontakt) evt. henvisning til instagram-profil. Mulighed: Billede opsætning. Bedre farver (PS), spændende opsætning/fremvisning, evt. forstør via klik. Webshop Mulighed: Præsentere udvalget på en mere indbydende måde, evt. i et grid/portfolio. Eksempel på bøger præsenteret på hylder Mulighed: Lave (i PS) nogle hylder eller lign. som billederne/ bøgerne kan placeres på. Mulighed: Opsætning af webshoppen, kunne vises som f.eks. et katalog med de fine billeder, sat op forskudt, med noget informerende tekst. Footer Lav en footer med grundlæggende kontakt info, i stedet for at have det stående nederst på newsletter-siden som nu. Eksempel på et layout som katalog

17 Wireframes Som redesignet website

18 Wireframe i desktop format Wireframe tablet format Wireframe i smartphone format

19 Styleguide Af redesignet website Redesign af website // 1. Semester // Tema 1 // KEA

20 Layoutdiagram Kommentar Vi har lagt vægt på at holde sitet enkelt ved at lave et layout med simpel struktur og opbygning.

21 Kodning Redesign af website // 1. Semester // Tema 1 // KEA Proces Mht. kodning startede vi med at lave et simpelt html dokument, som fungerede som skabelon. Her sad vi hver for sig og kodede vores sider, som vi derefter satte ind i skabelonen. Vi har pakket elementerne ind i sections og div er, som giver en god og overskuelig struktur. Hvilket er vigtigt når man laver en onepager, da man arbejder i en lang.html og.css fil. Udfordringer Vi har haft udfordringer i vores kodningsproces. Det skyldes, at vi aftalte, at vi hver især skulle bruge skabelonen til at kode i onsdag, hvor vi hver for sig sad med en del af websitet, som skulle kodes. Vi havde ikke fået kommunikeret ordentlig ud, hvordan vores fremgangsmåde skulle være, når vi skulle kode i skabelonen. Aftalen var, at vi torsdag skulle samle hver vores del i én html fil og én css fil, men det var noget af en opgave, og blev besværliggjordt, fordi vi ikke havde brugt den samme kodning i skabelonen. Vi prøvede at rette det til, hvilket tog noget tid, og på et tidspunkt, da vi refreshede på lynet i Brackets manglede meget af siden. Vi formåede ikke at lokalisere problemet, og derfor måtte vi starte lidt fra scratch. Her oplevede vi første gang et større problem i vores proces frem mod at have et færdigt produkt. Løsning Vi blev hurtigt enige om at kode på ny, fremfor at forsøge at finde hoved og hale på noget kode, der ikke længere var overskueligt og mest af alt, alt for tidskrævende ift. den givende tidsplan der var lagt for os. Det resulterede i, at vi meget hurtigt fik løst problemet og fik sitet til at validere.

22 Beskrivelse af test Testresultater

23 Skema til Heuristisk evaluering Redesign af website // 1. Semester // Tema 1 // KEA

24 Testresultat og kort reflektion Testresultat Da vores site er en overfladisk skitse, har vi valgt ikke at rette de fejl som vi kom frem til i vores test. Vi har rettet det, vi fandt nødvendigt og problematisk, men webshop sektionen forbliver overfladisk, da vi ikke fandt det relevant for vores opgave at gå i dybden med at restrukturere hele webshoppen. Refleksion Testen gav os en indikation af hvordan siden kan opfattes af brugere, og hvilke elementer der evt. vil fremstå som god/dårlig brugervenlighed ift. layout, synlighed og æstetik. Vi sad alle med sitet oppe på vores skærm og gik igennem siden for derefter at komme med inputs. Vi synes ikke, at der er store usability problemer, som er nødvendige at rette. Vi har efterfølgende arbejdet med at implementere noget ekstra indhold til webshop-sektionen, således at der nu gives et eksempel på et køb i webshoppen, og kan lægges varer i kurven. Screendump af tilføjelse til webshoppen ses til højre

25 Reflektion MANDAG Mandag startede vi ud med at gå sammen i gruppen, sætte os ned og planlægge forløbet over hele ugen og uddelegere opgaver til os hver især. Vi fik udarbejdet vores analysedokument, lavet styletiles og wireframe for desktoppen. Baseret på analyseskema_opgave dokumentet, fik vi analyseret det valgte website og svaret på de dertil opgivne spørgsmål: Kommunikation Responsive Design Grafiske virkemidler Farver Typografi og tekstopsætning komposition Sproglige Virkemidler Strukturelle virkemidler Research Udfordringer Generel udfordring: få ugeplanen og uddelegeringen af opgaver til at gå op mellem os. TIRSDAG Tirsdag har vi arbejdet på vores wireframes og konkretiseret ideerne fra idégenereringen. Vi fik fastlagt et wireframe over vores eget design, og fik lavet et layoutdiagram baseret på det. Vi fik påbegyndt en HTML skabelon, som vi kunne kode i separat på hver vores laptop, med hver vores side. Derefter uddelegerede vi opgaver til hvert gruppemedlem, så vi havde styr på, hvad der blev lavet onsdag, når vi skulle arbejde hjemmme. Udfordringer Det var relativt udfordrende at blive enige om det endelige wireframe- design. Vi fik konkretiseret vores designidéer i opbygningen af vores wireframe. Vores metode var, at vi hver især tegnede et wireframe over vores vision af det nye site. Derefter sammenlignede vi alle vores ideer og kom frem til en fælles løsning. Denne fremgangsmåde var en success.

26 Reflektion fortsat ONSDAG Onsdag arbejdede vi hjemme på vores individuelle opgaver. Disse opgaver inkluderede html og css kodning (separate sider, responsive design, splash image), samt grafiske opgaver som logo-redesign, wireframe optegning og indesign rapport. Udfordringer Der var flere i gruppen, der havde arbejde om dagen, hvilket gav en smule forsinkelser. FREDAG Fredag morgen havde vi mere eller mindre fået styr på torsdagens fejl, og arbejdede på at sætte de sidste småting på plads, mest af alt æstetisk styling. Udfordringer Det tog lang tid at få overblik over og styr på de sidste detaljer før aflevering. TORSDAG Torsdag brugte vi på at sammensætte alt det materiale, vi havde lavet hver for sig onsdag. Vi satte vores html og css filer sammen og indsatte grafiske elementer som logoer. Vi brugte også tid på at arbejde på rapporten. Derudover blev der tilsidesat tid til at redesigne de elementer, vi havde lavet onsdag for at gøre siden mere farvefuld. Udfordringer Vi havde problemer med at få sat html dokumenter sammen. Der var især problemer med, at noget kode var i konflikt med noget andet kode. Det tog også lang tid at få hele vores dokument stylet i den samme stil. Vores arbejdsmetode var at sætte hver vores individuelle del af kode ind i vores skabelon, men vi havde store problemer med at få alle dele til at passe sammen.

27 Reflektion Designløsning Redesign af website // 1. Semester // Tema 1 // KEA I vores endelige design blev vi enige om at sitet skulle være en one-pager med en nav bar og et link til toppen af siden via sitets original logo. Vi har designet vores site til at være full-page, dvs. alt indhold går helt ud til hver side af skærmen, på trods af en margin i hver side. Da vores original site slet ikke var responsive, har vi lavet vores onepager responsive med Liquid modellen. Dette mente vi passer bedst til en onepager, da elementer der står sat op ved siden ad hinanden let falde under hinanden. Nav bar og drop-down i hhv. desktop og tablet format Vi har arbejdet på at gøre det mere tydeligt hvad det var sitet forsøgte at informere om ved at redesigne hele siden med et gennemgående tema om design. Da sitet reklamerer for en fysisk butik, der sælger en meget specifik genre af bøger, har vi lavet et splash image bestående af nogle af de varer, der er til salg på siden Splash image

28 Designløsning fortsat Redesign af website // 1. Semester // Tema 1 // KEA Vi har lavet en enkelt separat side til signup for newsletter. Den er ikke funktionel, men et eksperiment i at linke til separate sider. Dette gjorde vi ved at lave et almindeligt <a> link der refererede til en anden html fil, som fungerede som den separate side. Selve navigationen rundt på sitet mente vi var overskuelig nok, og den eneste ændring vi lavede har været at rykke nav baren op i toppen af siden, og sætte dens position som fixed. Derimod var indholdet på sitet rodet, og vi har derfor omstruktureret det, så det kommunikerer en mere klar besked om, hvad sitet vil. Det ser æstetisk bedre ud. Linket sign-up side Vi har fjernet en del rodede elementer, især billeder, der ikke så ud til at høre til nogen steder. Derefter har vi indsat andre op igen efter gestaltlovene om nærhed og lighed. Farvemæssigt har vi valgt at beholde det samme farveskema, men tilføjet flere farverige elementer. Eksempel på farverige elementer

29 Link og password til websitet Link: Username: kea2016 Password: mmdkode