Rapport Redesign af hjemmeside CINNOBER Gruppe 22 Anton Feldbæk Mia Winter-Queen Malou Antonius Tine De Freiesleben Røssel
Komposition Hvem er målgruppen og hvordan ser en persona ud herfor? Tendensen er kvinder mellem 30 og 50. De er detaljeorienterede, og vælger bevidst at bruge de ekstra penge på fx den læder indbundne bog, lækre materialer og vare som er limited edition. det er muligt at købe de samme produkter fra Føtex, Panduro hobby, osv, men vælger det eksklusive frem for normaliteten. Hvad er afsenderens budskab? De er en specialbutik, som gerne vil give indtrykket af, at de sælger det der ekstra. De appellerer til kunder, som går op i detaljen og som gerne vil gøre deres hjem personligt, og ikke har noget imod at bruge lidt ekstra penge på detaljen. Hvilken effekt ønsker afsenderen at opnå? De vil gerne sende et stilrent og eksklusivt budskab, men med henblik på at tiltrække alle, der interesserer sig for kunst, design og interiør. Hvad kan du forestille dig, at afsenderen ønsker, at målgruppen skal tænke om afsenderen? At de har medarbejdere, der ved, hvad de taler om, når de snakker om kunst, design og interiør. At de har eksklusive designartikler fx plakater/skitser og bøger, som er sværere at opstøve andre steder.
Responsive design Wireframe skitse Beskrivelse af RWD Som udgangspunkt ændrer siden sig ikke, hvis platformen er tablet eller smartphone. Det vil sige, at den ikke er responsiv. Teksten er for lille og man er nødt til at bruge telefonens zoom funktion for at kunne læse menu og andet tekst. Newsletter funktionen er drop-down, så man ikke behøver at bruge scroll-knappen, som ellers er tilfældet på desktop-versionen. Det er overordnet ikke ændret i siden i forhold til hverken iphone eller ipad. Hvor er break points (hvis der er nogen)? Der er ikke mange break points på siden. Der sker lidt, når undersiden newsletter skifter til telefon-format, hvor de enkelte breve bliver drop-down i stedet for med en scrollknap. Hvilket design-princip følger siden? Siden er minimalistisk, fordi den kun gør brug af sort/hvid udover billederne, der er ikke meget tekst på siden og samtidig bliver der ikke gjort brug af andre funktioner på de enkelte sider end billede, tekst og menu.
Kommunikation og virkemidler Styleguide Grafisk virkemiddel Stilart, udtryk og den røde tråd Siden er flad, intetsigende og tom. Den stemmer ikke overens med det udtryk, som vi mener de gerne vil efterlade - at de er the go to place, hvis man skal have fagbøger om grafisk design og mode. De bruger tre forskellige fonts (Helvetica, Arial og Verdana). Skriftstørrelsen er lille og sat tæt sammen uden mellem, mellemrubrikker eller andre indgange. Siden har en relativ rød tråd i det der hele vejen igennem er brugt minimale mængder af virkemidler. Farverne er sorte og hvide med lidt farve på billederne. Billederne bliver ikke brugt som illustrationer, men blot for at vise, at det her kan du købe eller i nyhedsbrevet som et artikel billede. Der er refereret til minimalisme på grund af få virkemidler og de sort/hvide farver, men der bruges forskellige slags fonte og logoet er ret abstrakt. Der bliver ikke brugt animationer eller illustrationer udover logoet. Logoet efterlader et tegnet og abstrakt udtryk, og det er svært at se, hvad det forestiller.
Farver Farvepaletten er sort/hvide. På grund af de neutrale farver, så kommer billederne meget i fokus. Det betyder, at man ser billederne som noget af det første på siden, fordi der ikke er andet, der distraherer. Farverne skaber ro på hjemmesiden, fordi det er simpelt. Typografi Der er brugt tre forskellige skrifttyper; Helvetica, Arial og Verdana. Skrifterne tilhører en sans serif gruppe. De bruger konsultativ typografi i deres menu og til webshoppen. Display-typografi er brugt i form af logoet. Brødtekst er brugt på about, newsletter og contact siderne. Der er brødtekst, men meget få overskrifter og mellemrubrikker. Overskriften er ofte placeret over billedet som på newsletter-siden, og man ligger derfor ikke mærke overskriften. På about-siden er brødteksten ud i en uden mellemrum, mellemrubrikker eller strukturerede linjeskift. Komposition Siden følger overordnet gestaltloven. Den er nem at navigere ud fra og man forstår, hvad de enkelte menupunkter indeholder. Man kan dog argumentere for at der er for meget lighed, da man ikke kan skelne imellem de forskellige elementer. Når man er inde i webshoppen har man svært ved at skelne imellem menulinjen og produktnavnet. Samt er det en smule problematisk at finde ud af hvilken vare, der bliver beskrevet - hierakiet er dermed svært at skelne mellem. Man kunne med fordel have lavet bokse istedet. Det er ikke tydeligt at finde ud af hvad sidens hovedindhold egentlig er. Det dukker ikke op på forsiden og ikonet signalerer ikke hvad siden handler om. Man skal først ind og læse i about. Navigationen er nem, men er ikke hele tiden synlig. Hvis man laver et lille vindue eller bruger en smartphone kan man ikke se navigationen.
Sproglige virkemidler Tekstens indhold og virkning Teksten er forståelig og menuen er nem at navigere i. Teksten er på engelsk, og det er lidt uklart, da fx nyhedsbrevet er på dansk. Sproget er enkelt og uden brug af fagudtryk. Der er ikke særlig meget tekst på siden udover en about-side som kort fortæller, hvad cinnober kan. Derudover er der en del tekst i nyhedsbrevet, som kan være relevant for dem, der interesserer sig for mere end, hvad man kan købe hos Cinnober. Siden fremstår kold og uinteressant og engagerer ikke emotionelt. Det er svært at connecte med Cinnober som virksomhed, og det bliver ikke gjort klart, hvorfor at netop deres butik er speciel i forhold til andre sider, hvor man kan købe bøger. Strukturelt virkemiddel - sitemap over siden Vi går ud fra, at de gerne vil fortælle, at man her kan købe bøger og grafisk deisgn, som man ikke kan købe andre steder, men det er tvivlsomt om de får dette formidlet, fordi siden )ikke er indbydende, men i stedet for enkel er blevet kold og flad. Logoet minder mere om en barnlig skitse end et stærkt voksent grafisk udtryk. Der er ikke brugt store mængder af tekst, men da der er brugt få mellemrubrikker eller linjeskift er teksten svær at scanne. Teksten er relevant, men da forsiden eller hompagen er helt fri for tekst, er det svært at finde ud af, hvad der siden handler om.
Strukturelle virkemidler Research Beskriv det funktionelle behov Ved første øjekast på hjemmesiden er det svært at finde ud af, hvad siden handler om. Webshoppen er også svær at navigere igennem, da du er ikke sikker på, hvilken vare du klikker på, fordi tekst og billede er for tæt på hinanden. Derudover skal man helt ind på varebeskrivelsen for at kunne se på prisen. Der findes heller intet responsivt design, idet hvis vinduet laves mindre så kan ikke se menuen, som er i bunden af hjemmesiden. På desktop versionen, er menuen dog synlig på alle sider i bunden af siden. Navigationen er sekundær. Siden overholder ikke nogle regler om komposition, da tekst og billeder er placeret mere eller mindre tilfældigt på siden. Eks. Arnold Buscks hjemmeside er langt mere detaljeret og effektiv. Eks. står købsprisen direkte på forsiden af webshoppen (Man skal ikke langt ind på hjemmesiden for at se prisen, som man skal på Cinnober.) På AB s hjemmeside, har du også altid kontaktinformationerne stående nederst på siden. Du forstår samtidig også budskabet med det samme, da der på forsiden af hjemmesiden bliver vist Bøger til salg, hvorimod hos Cinnober, skal man først ind på About for at vide, hvad hjemmesiden sælger. Siden følger ikke trends i branchen, da brugeren ikke har en chance for at vide hvad hjemmesiden går ud på, på første side. Der kan altså ikke bruges 5-sekunders-testen. Siden er ikke responsiv. Relevans Informationen på siden er relevant og fordelt godt på de forskellige sider. Dog mangler der tektst på siden homepage, da ved et klik på denne siden ikke er muligt at gennemskue, hvad siden drejer sig om. Får siden overbevist sine brugere? Afsenderen forsøger med nyhedsbrevet at inspirere folk til at læse mere, og dette er muligvis også tilfældet for personer, der interesserer sig mere indgående for emnerne. Det er dog svært at få et overblik over, hvad de enkelte nyhedsbreve handler om og nogle af deres posts har mere karakter af en blog end et egentligt nyhedsbrev.
Koncept og idé Wireframe Som beskrevet under punktet refleksion fandt vi frem til en række svagheder ved sitet, som især er forbundet med UX. Herefter gik vi i gang med en brainstorm udmøntet i et mindmap som ses nedenfor. Vi fokuserede på, at der skulle flere farver ind på sitet, det skulle simplificeres i form af en one-page website, da sitet ikke indholder meget tekst eller billeder i forvejen. Derudover ville vi ensrette sproget til dansk, da det forstyrrer og virker uprofessionelt, når den originale hjemmeside blander dansk og engelsk. Skitse over wireframes på redesign
Styletile Vi har valgt at bruge en lys baggrundsfarve, som står i kontrast til vores mørkegrå typografi farve. Hertil har vi to hightligtfarver, bourdeux og en grøn, som desuden også er anvendt hhv. til baggrundsfarven i Webshop - og Kontakt afsnittet. vi har valgt at bruge Bebas Neue, da den er letlæselig og ikke trækker for meget opmærksomhed fra hjemmesidens orientering om salg. Vi har beholdt billeder fra den originale hjemmeside, men selv tagt nyt billede til splashsektionen.
Layuot diagrammer
Kodning Fontface Eftersom vi ikke har hentet fonten på fonts.google.com, men derimod dafont.com, kunne man ikke linke til fonten som normalt. Derimod har vi brugt en font som skulle downloades. Derfor var vi nødt til at generere et link hos fontsquirrel og derefter indsætte indholdet i roden af vores mappe til vores hjemmeside. Dette var et element i vores kodning vi ikke kendte til, eftersom det var atypisk af hvad vi elllers har lært.
Test Refleksion over process Vi har taget udgangspunkt i, at vi i vores analyse kom frem til, at userbility på siden var lav af flere årsager. Blandt andet var farverne sort på hvid, hvilket fik hjemmesiden til at se tom ud og billederne til at træde meget frem, hvilket de ikke er gode nok til at kunne bære. Derudover kunne man ikke ud fra 5-sekunders testen genenmskue, hvad siden indeholdt. Endvidere har de brugt en scroll-knap til at navigere på siden. Denne fungerer ikke optimalt, og er for det meste ikke nødvendig, da der ikke er meget at finde på siden. Vi funderede over, hvordan vi kunne få farverne og stilen til at passe med det, som Cinnober gerne vil være: En specialiseret og lettere eksklusiv hjemmeside for bøger og kontortilbehør. Vi har ud fra testen, valgt at centrere al indhold i mobil-format og centrere footer. Vi synes, at den grønne farve passer fint ind, netop fordi den highligther lokation og hvordan man kan komme i kontakt med virksomheden, hvilket jo er et af budskaberne. Man kan ikke hoppe rundt på siden andre steder i top og bund, netop fordi sidens indhold er så minimal, så vi har vurderet at det ikke var nødvendigt. Vi har valgt farver, der minder os om ældre (dyre) bøger, men dog kun brugt farverne til highlights for at holde siden i den minimalistiske stil. Vi har gjort brug af komplementærfarver i form af den røde og grønne som highlights og basisfarverne grå, sorte og hvide. Da websitet ikke indeholder mange undersider har vi valgt at lave et one-page website. Sitet har fået et mere eksklusivt udtryk ved at give sitet sammenhæng. Dette kommer til udtryk i form af den mørkerøde kant, de enkle brug af billeder og highlights-farver til at fremhæve tekst. Derudover har vi bredt siden uden, så indholdet ikke blot er i en mindre sort kasse, som det er tilfældet med deres website. Det har vi gjort for at få websitet til at fremstå mere åbent og mindre som en plakat. Vi har gjort brug af gestaltlovene om nærhed og lukkethed (i form af den tynde røde linje, der omslutter hver sektion), og det faktum, at indholdet altid sidder i grupper, fx. tekst og billede under nyhedsbreve eller de to mørkerøde kasser i webshoppen. Her har vi også gjort brug af en størrelseskontrast for at inddele siden i flere elementer.
De tynde mørkerøde linjer om Nyhedsbrev og Om inddeler siden uden at lukke den helt om sig selv, som det var tilfældet med deres website. På grund af den enkle struktur på sitet, har vi valgt at gøre sitet responsivt ved column-drop. Vi burde have startet med at lave mobil-format i stedet for desktop-format. Vi ville have været sikker på, at designet passede helt til mobil-format og det ville være nemmere for at at kode media queries. Vi har desuden valgt at nedtone brugen af deres logo, da vi havde svært ved at finde ud af, hvad det sagde om hjememsiden. Derfor har vi valgt kun at bruge det som favicon og på splashbilledet, hvor det indgår i elementerne (cyklen og glasset) på billedet. Vi har holdt os til planen, der var skitseret i opgavebeskrivelsen, men som beskrevet ovenfor skulle vi have lavet media query til mobilversionen først. Derudover har vi undervejs haft overvejelser omkring, hvordan vi skulle bære os ad med webshoppen. Vi har valgt på forsiden at vise 3 eksempler på produkter samt at linke til den oprindelige version af webshoppen, da vi ikke har den nødvendige viden eller tid til at lave ændre webshoppen. Vi forestiller os, at en færdig udgave af webshoppen indeholder færre kategorier og prisen er vist som det første sammen med produktet. Link til vores hjemmeside: www.defreiesleben.one/cinnober/cinnober.html