Redesign af websitet CPH Fashion Pool

Transkript

1 Redesign af websitet CPH Fashion Pool Gruppe 12 Malene, Clara, Ann-Sofie & Signe Indhold: Formål Teori: Hvordan analyserer man en webside? Analyse af eksisterende website Persona for den valgte målgruppe Wireframes af eksisterende site Koncept og idé Styletile Redesign wireframes Layout diagrammer Kodning Beskrivelse af test og testresultater Refleksion over processen & link til redesignet website

2 Formål Vi vil i denne opgave lave et re-design af Copenhagen Fashion Pool s webside, ved hjælp af de nuværende informationer på sitet. Vi vil tage udgangspunkt i en analyse af det eksisterende site, samt en test af websiden. Til slut vil vi ligeledes afslutte med en test af vores eget eksempel på, hvordan et re-design kan se ud for Copenhagen Fashion Pool.

3 Teori: Hvordan analyserer man en webside? Det første man altid skal kigge på når det kommer til at analysere en webside, er hvilken kommunikation siden bruger til at komme i kontakt med sin læser på. Hvad er det siden vil, og hvem er siden rettet mod? Ud fra denne analyse kan man vurdere om siden fungerer eller ej. De vigtigste spørgsmål at stille er: Hvem er afsenderen, og hvem målgruppen er. Herfra kan man udarbejde en persona og finde ud af hvad afsenderens budskab er, og hvilken effekt afsenderen ønsker at opnå overfor læseren. For at få en god og dybdegående analyse, kan man tage udgangspunkt i Jens Hogman Hansens model over hvilke behov der er opfyldt og hvilke behov, der ikke er opfyldt i forhold til de grafiske, sproglige og strukturelle virkemidler. Udover dette, er det også vigtigt at kigge på det overordnede layout af siden. Det er vigtigt, at man kommer godt rundt om hvilke farver der er blevet brugt og hvorfor, hvilken typografi og tekstopsætning der er benyttet, og hvilken komposition der er blevet brugt i forhold til sidens udtryk og billedopsætning.

4 Analyse af eksisterende website Hvem er afsenderen? CPH Fashion Pool Hvem er målgruppen? - Kvinder i alderen over 25 år primært fra nordeuropa. - Forhandlere (tøjbutikker) fra hele verden - Brands (tøjmærker, der har brug for deres services) primært fra Danmark - Leverandører og andre interessenter. Hvilken effekt ønsker afsenderen at opnå? CPH Fashion Pool ønsker overordnet set af skabe et professionelt og overskueligt site, som er brugervenligt. De har skabt et meget simpelt look for siden og har ikke gjort brug af nogen form for styling. Hvad kan du forestille dig, at afsenderen ønsker, at målgruppen skal tænke om afsenderen? De vil gerne have at målgruppen tænker at det er en seriøs fashion side, som gerne vil nå mange, både på et nationalt og et internationalt niveau.

5 Målgruppe personaer KVINDER OVER 25 - Handler fra siden - Går op i tøj - Ikke nødvendigvis computer-smart, dermed brugervenligt - Travl kvinde, siden hun køber på nettet, så det skal være overskueligt

6 FORHANDLERE(TØJBUTIKKER) FRA HELE VERDENEN - Professionel - Skal bruge Fashion Pool til hurtigt at skaffe nye brands - Den primære målgruppe, den som man i første omgang taler til

7 BRANDS - Designere, der vil ud med deres tøj - Vil gerne skabe større netværk - Søger overskuelig og let løsning

8 LEVERANDØRER OG ANDRE INTERESSENTER - Ikke det store marked hos denne gruppe - Alle andre der kunne have interesse for CPH Fashion Pool

9 Wireframes af eksisterende website

10 Forside

11 About us

12 Press

13 Contact

14 Newsletter

15 Responsive Design Beskriv Responsive web design (RWD) & break points CPH Fashion Pools site har intet Responsive web design (RWD), og dermed er der heller ingen break points. Når man resizer browseren følger indholdet af siden med, og man bliver derfor nødt til at scrolle, hvis man vil læse hvad der står. Hvilket design-princip følger siden? CPH Fashion Pool tager udgangspunkt i et minimalistisk princip. Der bliver ikke brugt farver, kun sort og hvid, og der er meget udenoms whitespace.

16 Styletile Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu sapien libero. Aenean sit amet interdum orci. Phasellus tristique libero ut lobortis iaculis. Aliquam suscipit pretium nulla eu fringilla. Vestibulum vestibulum elit ut lorem condimentum pharetra. Pellentesque elit odio, cursus ac scelerisque eu, pretium eget nibh. Phasellus consequat in velit in auctor. Donec ultricies odio non turpis placerat suscipit. Duis eu augue nisl. Donec lacinia fringilla lacus id fermentum. Nunc velit nunc, sollicitudin non eros quis, imperdiet sagittis quam. Curabitur sit amet sem efficitur, vulputate quam at, iaculis arcu. Duis semper erat metus, vel commodo massa vehicula non. Mauris molestie viverra blandit. Sed et nisl feugiat, sagittis purus a, mattis neque. Curabitur vitae diam pulvinar, posuere urna nec, lacinia nisl. Morbi ultricies sed lectus in tincidunt. Praesent sit amet venenatis mauris. Sed sed tellus ac sapien congue viverra. ITC Pacella #ffffff #000000

17 Stilart, udtryk og den røde tråd Har siden en rød tråd i sine visuelle elementer? Sitet er gjort ekstremt enkelt, hvilket det gør det svært at finde en rød tråd i de visuelle elementer. Farver Der er kun blevet brugt sort og hvid, og det er ikke nok til at holde et gennemgående visuelt element af sitet. Sort og hvid skaber et meget monokromantisk look. Typografi I menilinjen og brødteksten bliver der brugt sans-serif. I overskrifterne bliver der brugt seriffer. Overskfiften har typografien ITC Pacella. Brødteksten og menulinjen er grå, og oversrifterne og logoet er sort. Overskriften og brødtekstens typografi harmoniserer ikke specielt godt sammen. Komposition Der er ikke andet end tekst og overskrifter, så der er ikke meget komposition at arbejde med. Menuen har intet navicon.

18 Kommunikation og virkemidler Hvilke behov er opfyldt/ikke opfyldt? Funktionelle behov: De har prøvet at gøre sitet meget simpelt, næsten for simpelt. De skriver meget kortfattet tekst, hvilket gør det svært at finde ud af hvad siden egentlig går ud på. De gør det ikke synligt nok hvad det er de vil med sitet. For menulinjen gælder gestaltloven om lukkethed, da menupunkterne står i samme ramme. Behov for relevans: Deres grafiske og sproglige virkemidler fungerer ikke, de er ikke illustrative nok. Deres struktur fungerer fint, da menuen er meget opdelt, så det er overskueligt at finde den information man søger. Emotionelle behov: Sitet appellerer på ingen måde til følelser, det er meget koldt, og der er ingen brug af farver til at skabe stemning. Loven om lukkethed

19 Koncept og idé Det første vi lagde mærke til ved CPH Fashion Pools hjemmeside var, at den var ret tom, samt der manglede noget struktur, for nemmere at kunne navigere rundt. Vi havde primært tre fokuspunkter: - Professionalisme - Overskueligt layout - Brugervenlighed Vi ønskede at lave et splashbillede til siden, da det giver et godt førstehåndsindtryk. Splashbilledet er med til at fortælle besøgende, hvad denne hjemmeside indeholder, samt hvad den omhandler. I dette tilfælde valgte vi at bruge et billede, som CPH Fashion Pool selv havde taget og lagt op på deres facebook. Vi har derefter redigeret billedet, for at give det præcis det look vi gik efter. Vi ønskede at billede skulle være overskueligt, give information, samt se professionelt ud. Da CPH Fashion Pool ikke selv laver og sælger deres eget tøj, var det vigtigt for os, at vi fandt et nogenlunde neutralt billede, så vi ikke fik promoveret ét mærke, som de sælger, men et billede der viser helheden af siden. Billedet viser en masse tøj på tøjstativer, hvilket giver et godt indtryk af, at denne side omhandler mode. Samtidig har vi indsat logoet i splashbilledet, da logoet identificerer hvem de er, som brand. Den blå-grå farve er med til at gøre siden mere alsidig, og giver et friskt pust i nogle ellers neutrale farver.

20 De primære farver vi har holdt os til, er meget neutrale og professionelle. Vi har valgt sort, hvid og grå som vores primære farver - med en blå-grå farve som sekundær. Samtidig har vi sørget for, at den sekundære farve skaber et fokuspunkt, når den bliver brugt så øjet automatisk tiltrækkes den sekundære farve. Vi har valgt at bruge to forskellige skrifttyper. En til overskrifter og en til brødtekst. Antic Didone til overskrifter, da den oftest bliver brugt i forbindelse med modeblade, og derfor er passende til denne hjemmeside. Antic Didone er en typografi med seriffer. Catamaran har vi valgt til brødtekst, da den er let at læse, og komplimenterer Antic Didone godt. Catamaran er en sans-serif typografi. I vores footer har vi valgt at indsætte CPH Fashion Pools kontaktinformationer, for at disse altid er tilgængelige, uanset hvilken underside man er inde på. Af samme grund har vi valgt at indsætte deres samarbejdspartnere Project AJ117, Compomaggi og MDK i footeren. Vi har valgt at lave menuen foroven, da dette er det mest normale og dermed tænkte vi at det ville hjælpe til at gøre siden mere brugervenlig, hvilket var vores mål. Vi har valgt at gøre menuen og footeren samme farve, for at følge den røde tråd.

21 Styletile

22 Redesign wireframes

23 Forside

24 Press

25 Newsletter

26 Project AJ117

27 Video Compomaggi

28 MDK

29 Layout diagrammer

30

31

32

33

34

35

36

37 Kodning - HTML

38 Kodning - CSS

39

40 I denne kode over vores newsletter boks har vi arbejdet meget med margener og borders, til at få det hele til at stå pænt og struktureret på siden. Vi synes det er interessant at man kan med en så simpel kode få noget til at se så professionelt og overskueligt ud. Vi har sørget for at lave input: placeholder sådan at man ikke først skal slette den guidende tekst der i forvejen, men at den sletter sig af sig selv, sådan at man bare kan skrive sine kontaktinformationer direkte ind.

41 Beskrivelse af test og testresultater

42 Vi kan helt klart godt se de kommentarer vores sparingsgruppe er kommet med i den heuristiske analyse. I forhold til status og synlighedsproblemet med, at vi linker til webshops, som åbner i nye faner, har vi haft den tanke at gøre det på samme måde som CPH Fashion Pools originale site. Derfor har vi ikke ændret på hvilke punkter der ligger i nav baren, men beholdt deres udgangspunkt. Vi kan sagtens se ideen i at putte samarbejdspartnerne i nav baren i stedet for i footeren, og det er klart noget vi har taget til os, men vi har valgt ikke at ændre det, da vi ikke har set det som den højeste prioritet. Derudover tænker vi at der er en grund til at CPH Fashion Pool har valgt, at samarbejdspartnernes logoer ligger på alle sider, idet at de er en vigtig del af CPH Fashion Pool. I forhold til æstetikproblemet med de fire kolonner på about siden, kan vi godt se at det bliver en smule ustruktureret med fire kolonner. Grunden til at vi har valgt at gøre det i fire kolonner, er at indholdet af teksten på aboutsiden er delt i 4 temaer, og derfor synes vi det ville være mest logisk. I forhold til æstetikproblemet med at navbaren skifter for hurtigt til hamburgermenu, er vi helt enige i, og vi har derfor ændret problemet.

43 Refleksion over processen Vores grupperarbejde har fungeret rigtig godt. Vores process har været at mødes på skolen hver dag og arbejde. Vi har været meget enige i hvad vi ville med sitet, og vores samarbejde har derfor fungeret meget godt. Vi har sørget for at alle har prøvet både at kode HTML og CSS, lave photoshop, skrive på rapporten og ideudvikle. Vi har haft forskellige problemer undervejs, mest i forhold til kodningen af websitet. Herunder var vores største problemer at lave et billede slideshow til hver af samarbejdspartnernes sider og lave en responsiv hamburgermenu. Det lykkedse os at løse begge problemer, men vi blev nødt til at gå lidt ned i javascript og bruge det ud over HTML og CSS. Vi er blevet godt tilfredse med resultatet og er enige om at vores samarbejde har været rigtig godt Link til redesignet website af CPH Fashion Pool: Username: kea Password: kea