Responsive design Der er ingen breaking points på hjemmesiden. Det er et astatic website, da det ikke er responsivt.

Transkript

1 Gruppe 11 Asta, Björk, Marie-Louise, Sofie. Husk at trykke på den første ørering inde under smykker. Brug venligst inspectoren når i tjekker tablet og mobil funktionen. (Ipad og Iphone 5) Nogle af siderne skal lige refreshes, før de viser det rigtige layout. Analyse Kommunikation SCHERNING er afsenderen, målgruppen er kvinder. SCHERNING s budskab er at vise produktet og hvor de kan forhandles. Hun ønsker at sælge unikke håndlavede smykker og vise forståelse af materialerne. Finde et match mellem smykke og kunde. Ud fra vores indtryk ønsker SCHERNINGE at fortælle os at de er et stilfuldt og unikt smykkefirma, der producerer dansk håndlavet design. Responsive design Der er ingen breaking points på hjemmesiden. Det er et astatic website, da det ikke er responsivt. Kommunikation og virkemidler Hun bruger en passende stilart til sin hjemmeside. Der er meget whitespace og den virker meget clean. Hun signalerer ikke præcist hvad det er hun sælger. Hun forudsætter man kender hendes brand inden man kommer ind på siden. 1

2 Hun mangler også at fremhæve hvad hendes brand går ud på. Vi havde svært ved at se hvad hendes principper var og hvad hendes design gik ud på. Grafisk virkemiddel Det funktionelle behov er ikke opfyldt, da hendes menu ikke har sammenhæng og mangler nogle vigtige elementer. Eksempel: Nedenfor ses forsiden, hvor navne på kollektionerne står, hvilke ikke er bruger venligt. Da bruger ikke ved hvad NOR betyder. Udover det, har man ikke mulighed for at trykke `hjem når man er kommet ind i en af menuerne. Hun har et Facebook link nederst på siden, som ikke er til at overse. Overskrifterne på de forskellige undersider er gjort lidt tykkere. Man er heller ikke i tvivl om at man kan klikke på billederne af øreringene inde i webshoppen, da der kommer en stiplet linje rundt om det billede musen hover over. Sidens udtryk og stilen fungerer nogenlunde optimalt i forhold til målgruppen, da siden har et enkelt og klassisk design, dog synes vi det mangler personlighed. Den mangler også noget kant i forhold til at tilpasse sig den enkelte kunde. Budskabet kommer heller ikke helt til udtryk, man er nemlig lidt i tvivl om hvad det er for en side man faktisk er på, udover det så vi at der var en anden side der fortalt om virksomheden og dens produkt mere end SCHERING selv. Den røde tråd Siden har en rød tråd, men det vurderer vi ikke nødvendigvis er helt gennemtænkt, da man på siden ikke har taget stilling til typografi eller stil som sådan. Den røde tråd viser sig i fotostilen, da alle smykkerne er taget i sammen vinkel, hvor smykket er i fokus og baggrunden sløret. På produktsiden er der også en rød tråd, da alle produkter fremvise ens. 2

3 Farver Websitets baggrund er hvid, men ude i venstre side er der en prikket margin og det går ret godt til siden, da den ellers er meget neutral. De farver der ellers kommer frem på hjemmesiden er i billederne af hendes produkter. Hun gør brug af saturation i sit farvevalg, det kan ses i billedet på forsiden hvor der er en blå farve nederst på billedet der bliver lysere og lysere og bliver helt hvid til sidst. Sidens farver understøtter indholdet på siden, da produkterne kommer til udtryk Typografi og tekstopsætning Der er gjort brug af billedtekst under alle billeder i webshoppen, ellers er der lidt brødteksts inde under handelsbetingelser/gaveservice og kontakt. Brødteksten er lang, men der er tilpas meget mellemrum, så man stadig har overskud til at læse videre også selv om skriftens størrelse er meget lille. Der gør hun også brug af underoverskrifter, som også gør det mere overskueligt for brugeren at finde lige dét sted de søger information om. Logoet er det eneste der har anderledes typografi, men er stadig meget neutralt, men viser hvor virksomheden er. Menuen og resten af teksten på siden signalere ikke hendes kreativitet. Sidens skrifttype består af sans-serif. 3

4 Komposition Der er blevet brugt styrkekontrast mellem billedet i midten og menuen. Det er billedet der fanger ens opmærksomhed som det første. Der er blevet benyttet flere gestaltlove på forsiden. Loven om lukkethed i menuen, idet den er bundet sammen af linjerne i mellem. Søgefeltet og indkøbskurven er forbundet af de stiplede linjer. Loven om nærhed er både gældende foroven og i menuen. Siden kan betragtes som harmonisk, da øreringene ligger på en horisontal linje og der er lige meget plads på hver side af billedet, der er her også gjort brug af white space. Da der ikke er så mange ting på siden er det overskueligt, men der er for meget vægt på billedet i forhold til logo og menu. Hjemmesidens brug af kompositoriske virkemidler passer fint med smykkernes design, det er enkelt og minimalistiske. Sprogligt virkemiddel Teksten er meget overskuelig, på de individuelle sider som sagt er der kun tekst under tre af under siderne. Som kunde kunne det være godt med mere informationen om selve designen og hvad produktet faktisk er. Det under os at hendes forhandler han mere information om produktet end hun selv har på hendes hjemmeside. Teksten er meget relevant, da den er meget kort og kontant. Det emotionelle behov er delvist tilstede, vi synes at det grafiske er stilrent og let, men vi synes ikke at skrivestilen og historien ikke lever op til vores forventninger som kunder, da vi selv skal ind og søge på andre sider for at finde ud af hvad hun genre vil signalere med sit design. 4

5 Strukturelt virkemiddel Navigationen sidder lodret ude i venstre side og den er enkel, men man ved ikke hvad alting er før man klikker på det. Vi mener at der er blevet brugt en Global navigation, da den er det samme sted på alle siderne og viser alle menupunkter på alle siderne. Hvad kan forbedres Fordi du skal udføre et redesign af det pågældende site, er det en god ide at tænke nedenstående punkter ind i din analyse. Måske får du allerede nu ideer til et redesign, skitser dem ned. Udviklingen er i gang! Hvad fungerer godt? Nyhedsmail dropdown menuen Forhandlerlisten Handelsbetingelser/gaveservice Facebook linket Søgefunktionen fungere som den skal (hvis man søger på kollektionsnavn eller varenummer) Hvad kan forbedres? Den grønne prikkede venstre margin Man kan ikke komme tilbage til forsiden Der mangler en "Hjem" knap Man kan kun komme et niveau tilbage når man er inde på en produktside Man skal kunne se ALLE produkterne på en model (og ikke kun udvalgte) Man skal kunne gøre billedet stort når man trykker på billedet i stedet for at gå videre til næste billede Der burde være produktkategorier i stedet for kollektionsnavne Et webshoppunkt med dropdown menu Knap layout Hun har ikke nogle halskæder eller ringe, men hun har menupunkter til der fører til en tom side. Hun opdatere ikke siden side. o Smykker der står til at være tilgængelige medio september, kan ikke købes via webshop. o Opdaterer forhandlerliste 5

6 Research Vi har bl.a. set på Julie Sandlaus hjemmeside ( og vi blev meget inspireret af hendes global menu. Hos Pandora kan man skifte sprog og det ville være en god tilføjelse, da hun har forhandlere i syv forskellige lande. -Hvordan er det pågældende site i forhold til konkurrenternes? Det er outdatet og for simpelt i forhold til de funktioner du kan anvende på de konkurrerende sider. Koncept og idé Vores ide med denne hjemmeside er at tage udgangspunkt i hendes originale design. Vi vil have at siden udstråler mere personlighed og mere kreativitet. Derudover følte vi også at det var rigtig vigtigt at kunden ikke var i tvivl om at smykkerne er håndlavede og unikke. Det undrede os rigtig meget, at der på den nuværende hjemmeside ikke stod noget om at smykkerne er håndlavede, men da kiggede på sider hos smykkernes forhandlere, fandt vi ud af at det var netop dét, der gjorde smykkerne unikke. Vi har taget udgangspunkt i farverne på hendes smykker og de farver hun bruger på sin nuværende hjemmeside. Vi valgte at beholde den prikkede grønne bjælke, der er i venstre side af hendes site. Det var ikke før vi havde søgt på hende og lærte hende og hendes koncept bedre at kende, at vi forstod hvorfor hun havde valgt at have denne grønne bjælke. Derfor synes vi det er vigtigt at gøre mere ud af den grønne farver, derfor vil vi inføre den i logoet. 6

7 Wireframes Desktop 7

8 Wireframes Tablet 8

9 Wireframe Mobil 9

10 Styleguide 10

11 11 Layoutdiagram Desktop

12 Layoutdiagram Tablet 12

13 Layoutdiagram Mobil 13

14 Mockup Desktop 14

15 Mockup Tablet 15

16 Mockup Mobil Heuristisk evaluvering: Usability test: Testen blev vi nødt til at tage ud fra vores mockups, da vi ikke kunne følge tidplanen og ikke havde en side klar til at blive testet. Dette er de kommentare vi fik på vores hjemmeside. Enkelt og let design Gode farver valgt i designet. Ramme om video for tyk. Eventuelet en streg under den side man er på i menuen. 16

17 Refleksion: Farver: På websitet har vi valgt at lægge vægt på white-space, så smykkerne er i fokus. Vi har valgt at bruge de farver hun bruger i sine smykker i f.eks. indkøbskurven og menuen. Menuen har den samme farve som hendes gaveæsker og den farve har hun brugt meget i sit eget design. Vi har valgt at lave nogle ændringer i hendes logo og har besluttet os for at benytte den pastel/mint grønne farve, i stedet for at bruge den blå farve hun har i blomsten. Blomsten er fundet på hendes Instagram hvor den var enkeltstående, derfor valgte vi at implementere den i logoet, så hun kan bruge den enkeltstående uden at kunden tvivler på hvem der er bag logoet. Som kontrast til den mint grønne farve har vi valgt at bruge den koral farve som også bliver benyttet i indkøbskurven, grunden er at dette er mere i øjenfaldende og den besøgende har lettere ved at få overblik. Front page image: På vores landing page har vi valgt at lægge webshoppen under det store front page image, i den forbindelse kommer ux til udtryk, da den enkelte bruger ikke skal trykke unødvendigt for at se produkterne. Derudover er der også mulighed for at trykke ind på webshoppen via menulinjen. Det store front page image skal have den funktion at der skiftende kommer forskellige billeder, for eksempel et billede fra en ny kollektion, hvor man har mulighed for at trykke på billedet og blive ført til en side der indeholder hele kollektionen. Det kan også bruges til billeder af tilbudsvare og hendes 2. sorterings varer. Vi tænker det vil være en god ide at have prikker under billedet, der indikerer hvor mange billeder der er og at man har mulighed for at trykke på prikkerne for at se de enkelte billeder og navigerer sig rundt på billederne. Om Scherning: Vi har på siden Om Scherning valgt at placere en video. Videoen skal vise hvordan smykkerne bliver produceret, så vi viser kunden Den gode historie og at produkterne er håndlavet, hvilket ikke ellers fremgår nogle steder på hendes nuværende sider. Her er linket til hendes partners video, hvor vi fik vores inspiration fra ( ). I SCHERNINGS tilfælde er produkterne unikke, derfor synes vi at en sådan video ville formidle det rigtig godt. Webshop og produktside: På produktsiden har vi valgt at vise øreringene på en person, samt vise billeder af øreringene på en hvid baggrund. På den måde får man et bedre indtryk af hvordan de ser ud på og hvilken størrelse de i virkeligheden har. Da vi kun har lavet én side til webshoppen, har vi valgt at lave en filtrering, så man kan se at der er mulighed for at filtrere efter typer af smykker, farver, materiale og kollektion. Udfordringer: Da vi alle fire i gruppen ingen erfaring har med kodning, havde vi problemer med at følge tidsplanen, da vi har haft rigtig mange udfordringer undervejs. Vi havde rigtig mange problemer med vores menulinje. Den virker ikke på mobil og tablet, da vi ikke kan finde ud af hvor vi har en regel der overruler de andre. Vi har brugt to dage på at få menuen til at virke og for at blive færdige til tiden, må vi undlade at have menuen med på tablet og mobil. Vi har dog fået den til at virke på desktop versionen og der kan i se idéen med vores menu. Vi synes også det var udfordrende at lave layout diagrammer, da vi alle lavede forskellige versioner, så vi vidste ikke hvilken version der var den rigtige at bruge. Vi skulle også tilbage og ændre i både layout diagrammer og wireframes fordi vi besluttede os for at lave nogle små ændringer i vores mock-ups. Grunden til at smykkerne, både på forsiden og inde på siden smykker er længere nede end filtreringen er, at da de var på linje røg filtreringens punkter op i headeren og opførte sig virkelig underligt. 17