Projekt redesign af Kyoto.dk Hold A - gruppe 20 INDHOLD I RAPPORTEN Analyse, persona og idégenerering Wireframes og styletiles Layoutdiagrammer Uddrag af kode Evaluering s feedback Reflektion og reslutat Link til site 1
Analyse, persona og idégenerering Kommunikation Afsenderen er tøjbutikken Kyoto som er beliggende på Istedgade. Målgruppen for websitet er modeinteresserede mænd og kvinder under 40 år, som prioriterer tøjbudgettet og værdsætter hele købsoplevelsen bl.a. butikkens indretning. Afsenderens budskab er at skabe opmærksomhed omkring butikken og fortælle hvem de er og hvad de sælger. Afsenderen ønsker, at målgruppen skal tænke om butikken som en eksklusiv, high-end fashion butik. De ønsker at give et billede af en stilren butik, med inspiration fra New York. Persona Navn: Noah Sylvester Kristensen Alder: 28 år Civilstatus: Single Bopæl: Vesterbro Arbejde: Reklamefotograf Indkomst: 24.000 kr. før skat /måned Interesser: Han kan lide at gå på café med vennerne, og han interesserer sig for landskabsfotografi og bruger meget tid på dette. Noah er modeinteresseret og kan godt lide at bruge tid og penge på at købe moderne tøj. Mediebrug: Hans profil på Instagram er offentlig og han har 1000 følgere. Han bruger kun Facebook til privatforbrug og har 400 venner. 2
Responsive design Wireframe over siden Siden er responsive, men har kun et breakpoint, i form af menuen, som bliver ændret. Udover det bliver siden bare gjort større/mindre. Breakpointet sker ved 768px. Kommunikation og virkemiddel Grafisk virkemiddel Er det funktionelle behov opfyldt? Man kan godt se og forstå hvad der er hovedindholdet på siden. Det er dog svært at se menuen og logoet på det første billede, men overordnet er det funktionelle behov inden for de grafiske virkemiddel opfyldt. Er behovet for relevans opfyldt? De fotos der er brugt på siden er meget relevante i forhold til sidens indhold og funktion. De giver den rigtige stemning og man forstår hvorfor netop de billeder er blevet brugt. Der bliver ikke anvendt nogle farver på siden, kun forskellige nuancer af sort. Engagerer siden emotionelt? Siden følger trenden lige nu, men den er meget kedelig at se på, da der intet interaktivt er på siden overhovedet. Budskabet med hjemmesiden virker ikke overbevisende, og siden virker halvfærdig og lavet på budget. Stilen er ikke velvalgt i forhold til målgruppe og budskab da det ikke kommer til udtryk. 3
Sprogligt virkemiddel Er det funktionelle behov opfyldt? Teksten kan forstås men det virker uhensigtsmæssigt at have teksten på engelsk i forhold til hvilke kunder man kan forvente de har og hvem der har interesse i at kigge på deres hjemmeside. Er behovet for relevans opfyldt? Hashtags er unødvendige på et website, da de hører til på Instagram/Facebook henvis til disse i stedet. Teksten omhandlende butikken virker relevant i forhold til butikkens historie og opstart, da den bruges til at få en stemning omkring hvilken butik det er. Det er dog malplaceret at de sammenligner Istedgade med Soho i NY, da kunderne godt ved hvordan atmosfæren er på Istedgade. Engagerer siden emotionelt? Siden får ikke overbevist sine kunder til at besøge butikken, deres sproglige virkemidler virker ikke overbevisende da de bruger deres Instagram feed på deres startside, frem for at komme med noget nyt og fortælle hvilken butik de er. Sprogligt virkemiddel Er det funktionelle behov opfyldt? Menuen er meget svær at se på det første billede på startsiden, men derudover er den nem at se. Det er meget nemt at finde rundt på siden og i sidens hierarki. Der er gjort brug af rule og thirds. Teksten er centreret i midten med lige meget white space på begge sider. Er behovet for relevans opfyldt? Det er ikke særlig relevant information man får serveret på websitet. Der er meget lidt indhold på siden. Enten skal prisen være ved alle billeder ellers skal den ikke. Engagerer siden emotionelt? Siden får ikke overbevist sine brugere jo længere man bliver på siden, og man har ikke lyst til at blive på siden. Struktureren understøtter ikke budskabet med websitet. 4
Sprogligt virkemiddel - forsat Tonen i teksten er tør og snæver. Der er meget begrænset tekst og teksten virker ikke relevant for at tiltrække kunder. Teksten er overskuelig at læse og nem at scanne da det meste står i punkter. De benytter hashtags til deres billedtekster, og deres typografi har ingen indflydelse på sidens formål og budskab da den er standard. Strukturelt virkemiddel Er det funktionelle behov opfyldt? Menuen er meget svær at se på det første billede på startsiden, men derudover er den nem at se. Det er meget nemt at finde rundt på siden og i sidens hierarki. Der er gjort brug af rule og thirds. Teksten er centreret i midten med lige meget white space på begge sider. Er behovet for relevans opfyldt? Det er ikke særlig relevant information man får serveret på websitet. Der er meget lidt indhold på siden. Enten skal prisen være ved alle billeder ellers skal den ikke. Engagerer siden emotionelt? Siden får ikke overbevist sine brugere jo længere man bliver på siden, og man har ikke lyst til at blive på siden. Struktureren understøtter ikke budskabet med websitet. Sitemap over det eksisterende site 5
Navigation Navigationen er overskuelig så snart den ikke er på et billede. Når den ikke står på billedet er den meget kontrastfuld da teksten er sort og baggrunden hvid. Loven om lighed er benyttet. Der er en størrelseskontrast mellem menuen og det øverste billede. Der er benyttet Navicon/hamburgermenu i primær navigation når websitet er i mobilformat og normal primær navigation når størrelsesformatet er over 768px. Research Sitet har et splash-billede, der bliver anvendt meget lidt tekst og en simpel topmenu. Generelt har siden et minimalistisk look, som er trendy i denne branche. Sitet følger tidens tendens. Samtidig er siden kun en smule responsiv. I forhold til konkurrenterne har Kyoto ikke webshop på deres hjemmeside, Kyoto s website skiller sig lidt ud ved at have deres Instagram feed i fokus på deres startside. Stilart og farver Websitets udtryk læner sig op af stilarten minimalisme, der er meget få elementer på siden, der er klare linjer og ikke anvendt nogle farver. Der er anvendt lys/mørk kontrast. Typografi og tekstopsætning Der er anvendt to forskellige skrifttyper, Helvetica Neue og Open Sans begge disse typografier er klassificeret under Sans serif Grotesque, da de ingen fødder har, og har en lige tyk streg. Tekstopsætningen følger reglerne for en god tekstopsætning, der er ingen lange linjer da de fleste sider er opsat i kolonner. Der bliver anvendt fast forkant og løs bagkant. Valget af typografien passer til sidens budskab og indhold, da den er meget stilren og enkel. Komposition Der er i dette splashbillede, som er det første man ser på siden, en diagonalkomposition. Det er et dynamisk billede men det fortæller ikke meget om butikken. Reolen/frontdisken tager fokus væk fra tøjet i baggrunden. 6
Styletile til det eksisterende site Idégenerering Ændre i logoet Sprogmuligheder (dansk/engelsk) Lave en ekstra side / ny startside slideshow af butikkens indretning Væk fra Instagram looket få lavet et showroom der er mere elegant og stilrent Gøre så man kan se der sker ændringer på siden, når man klikker på nav-menuen Udvide responsive Contact site skal centreres teksten skal have samme margin (stå under hinanden) Anvende en mere spændende typografi Henvise mere synligt til butikkens Facebook, Twitter, Instagram og Tumblr Anvende mere interaktivitet på siden Skabe favicons Transperente tiles under ny side som bliver helt synlige når musen holdes over 7
Wireframes og styletile Den overordnede idé med sitet er at holde websitet stilrent og enkelt. Vi ligger vægt på at siden skal være brugervenlig, minimalistisk og overskuelig. Vi vil implementere flere billeder på alle sider og gøre siden mere interaktiv. Startsiden skal bestå af et slideshow med billeder af butikken. Ydermere vil vi implementere en ny side med butikkens showroom, hvor der vil være billeder af butikkens udvalg af tøj og sko, sat op i tiles. På siden About vil vi indsætte billeder af butikkens ydre vinduer og et billede af Istedgade for at fortælle om atmosfæren visuelt. Under siden Brands vil vi øverst implementere logoer fra de mest sælgende brands for at gøre siden mere visuelt spændende. Til sidst vil vi udvide Contact med en FAQ samt en kontaktformular direkte til butikkens mail. Wireframes til nyt site 8
Styletile til nyt site 9
Layoutdiagrammer 10
Uddrag af kode Vi har brugt mange timer på at få lavet vores forside, som et slideshow - og det lykkedes til sidst, med stor begejstring! 11
Evaluering s feedback Vi har fået evalueret vores site af en anden gruppe, og dette var vores feedback. 12
Refleksion og resultat Homepage Vi har valgt at beholde de store billeder da det giver en følelse af man står i butikken. Ydermere har vi valgt at lave et slideshow så man kan se hele butikken og fordi det skaber noget liv på siden. Showroom Vi har valgt at lave et showroom for at fremvise de mange produkter, på en anderledes måde end den daværende. Førhen lignede det mere en blog/instagram side, og vi har derfor forsøgt at skabe en bedre præsentation af produkterne. Vi har opbygget showroomet i tiles, både for at bibeholde det gamle look med billederne, og for at skabe et bedre overblik. Ved at bruge tiles kan man se flere produkter ad gangen, frem for at skulle scrolle længere ned på siden. Tiles har forskellige størrelser, både for at skabe dynamik samt skabe muligheden for at fremhæve visse produkter. Hvis tiden havde været til det ville vi gerne havde haft en klik effekt på billederne, som ville resultere i at se sådan ud: 13
Om Vi har sat billeder ind af både butiksfacaden, for at kunden bedre skal kunne genkende butikken, samt af Istedgade, da butikken ligger meget vægt på dens omgivelser og atmosfære. Ydermere har vi ændret layoutet, med underoverskrifter så det har et mere indbydende og overskueligt look. Brands Vi har valgt at fremhæve de mest populære brands i form af store illustrationer fordi det oftest er de mærker, som forbrugeren søger. Ligeledes har vi delt de andre mærker i varesortimentet op i alfabetisk rækkefølge og delt dem ind i mænd, kvinder og sko. Kontakt Vi har valgt at ændre i layouten så der er bedre overblik over de vigtige informationer. Ydermere har vi lavet en FAQ, for at forbrugeren hurtigst muligt kan få svar på de mest stillede spørgsmål. Til sidst har vi tilføjet en kundeformular, så kunden har mulighed for at stille de spørgsmål der nu måtte være. Link til site http://milleadinesen.dk/kea/kyoto/index.html Brugernavn: Adgangskode: kea kea 14