Pernille Larsen D
IG
I TA L
N DESIG
Typografi & omb
ER
Grafisk design
Produktion & w
Billedbehandling
Wunderwear
Grafisk design Id Ps Ai Dw Wunderwear grafisk oplæg I forbindelse med et salgsoplæg, har jeg lavet et designforslag til Wunderwears onlineshop. Jeg har taget udgangspunkt i en produktliste, da der i forbindelse med grafikken skal tages meget hensyn til konvertering og usability. Desværre fik vi ikke opgaven, så dette design er ikke tilgængeligt. Microsoft
Visual Studio
Design, idé & målgruppe Wunderwear er et brand inden for lingeriverdenen til den moderne og raffinerede kvinde. Idéen med designet kom både ud fra Wunderwears designmanual mht. fonte, logo og grafikelementer men også ud fra min egen opfattelse af design til lingeri.
Arbejdsprocessen Wireframe: Jeg starter med at lave et moodboard med inspiration af billeder, stil og farver. Efter en dialog med kunden laver vores grafiske chef en wireframe i Balsamic (se bilag) i stedet for en skitsetegning. I en wireframe sætter vi de vigtige elementer op i den rækkefølge, de skal fremgå. Logo, kurv, menu, navigering, produkter, footer osv. Herefter skal kunden godkende wireframen, og så lægges der grafik på. Dette sparer både vores og kundens tid, så meget af dialogen imellem forsvinder inden det endelige resultat. Derefter startes designet op i photoshop (sRGB). På min arbejdsplads bruger vi kun gridsystemet 960–grid (960 px). Dette findes i en udgave af 12, 16 og 24. Dette får designet til at danne et bedre overblik overfor bruge-
2
ren, idet alt følger de lodrette kolonner (Se screendump). Indholdet har en bredde på kun 940 px, hvoraf de sidste 10 px til hver side er hjælpelinier. Så for at gøre det nemmest kodemæssigt, benytter vi ikke de sidste 20 px.
Konvertering & usability Der er vigtige regler mht. konverteringen, når et layout sættes op, hvis man vil have flest mulige kunder til at foretage et endeligt køb. Toppen skal indholde logo, stort søgefelt, synlig kurv, som er højrejusteret med stor knap, links til bla. kunderservice og handelsbetingelser. Der findes også tryghedssignaler såsom e-handelsmærket. Det signalerer professionalisme fra shoppens side af. Dog er der nogle bestemte krav, man skal opfylde for at få dette. Body: Nem navigering vha. en venstremenu. En venstremenu skal være et fast element med filtrering, så brugeren hele tiden har den ved sin side lige meget hvor på sitet, man er. Den kan især gavne, hvis man kommer ind på sitet gennem et banner fra en anden
Pernille Larsen
Wunderwear
Mediegrafiker Svendeprøve december 2012
3
Wunderwear
Nuværende website www.wunderwear.dk
hjemmeside. Så kommer man ofte til en landingpage, hvor brugeren nemt og hurtigt derfra evt. kan få flere varer med i kurven.
Desire: Lækre billeder, som vil få en kvinde til at føle sig sofistikeret, anderledes og sexet. Gode tilbud, brugeren vil ikke kunne leve uden dette produkt.
Footer skal indeholde links med betalingsbetingelser, kundeservice, genveje, mersalg vha. små teasere som “Gratis levering, 30 dages returret og 1-5 dages levering”. Call–to–action er det vigtigste på sitet. Det at brugeren nemt kan lægge i kurv og finde til kassen. Oftest vises “læg i kurv” knappen også direkte på produktlisten, men i dette tilfælde er det ikke muligt, da man skal videre ind på en produktside og vælge størrelse og farve.
Action: Nem navigering og troværdighed. Et kort og præcist købsflow er bla. vigtigt for at bringe brugeren helt til enden; Tak fordi du handlede hos Wunderwear.
SWOT:
AIDA-modellen
Svagheder: De har endnu ikke deres shop online. Kun den i forbindelse med Tryde Andrés. Få butikker i landet.
Attention: Kurvknap i højre hjørne. Denne del er som regel placeret i toppen, da man starter med at se siden oppe fra og ned. Interest: Lækre billeder og produkter. Gode tilbud som fanger og lækkert design, som får det til at se troværdigt ud. Interest er det, som får brugeren til at blive på siden.
4
Styrker: En af Danmarks største lingerikæder med 26 butikker i landet. Tryde Andrés, hvilket er et kendt brand, er et led under Wunderwear.
Muligheder: Få deres online shop igang, flere butikker og mere branding. Skille sig ud fra mængden, de vil gerne give deres kunder en helt speciel oplevelse, når de handler. Trusler: Andre udbydere af lingeri på nettet, samt kon-
Pernille Larsen
Wunderwear
960–grid slået til
kurrenterne i bylivet, hvor du kan prøve lingeriet med det samme i butikken.
De 4 designparametre Form: Jeg har valgt at bruge et firkantet udtryk mht. grafik. Dette gør det stilrent at se på. Dog er der lagt en skygge under produkterne, således at de giver en ekstra feature af blødhed. For at bryde det kantede og få call– to–action frem har jeg valgt, at knapperne og søgefeltet skal være runde som det eneste. Farve: Jeg har valgt at beholde det elegante look fra deres alm. website. Det lyse med gradienter. Dog bryder jeg det med den farve, jeg har brugt på købsknappen.
Typografi: Det er vigtigt, når man vælger fonte til web, at man sikrer sig at de er websafe, også selvom designmanualen siger noget andet. Her er der brugt en Arial til brødtekst som er standard. Perla Regular og Bickham Script Pro til billeder og bannere, men disse er ikke websafe, så derfor integreres disse oftest på billederne.
Kvalitetsvurdering Jeg synes det er lykkedes at få et flot design frem, som henvender sig den modne og raffinerede kvinde, som vil have lidt ekstra. Jeg har overholdt designmanualen, og alligevel givet det et nyt pift. Konverteringen er helt i top, og det er kun Wunderwears egen skyld, at de ikke valgte vores oplæg. Dette kommer de nok til at fortryde på længere sigt.
Illustration: Jeg har brugt grafik som blondekant og tapet i menuen for at give det lidt ekstra i stedet for en farve. Billederne er fiktive og ikke deres egne, da vi gerne ville vise et nyt udtryk. Måden, billederne bliver skudt på, kan påvirke udtrykket meget, hvorvidt der er personer på eller ej.
Mediegrafiker Svendeprøve december 2012
5
Wunderwear
Wireframe lavet i Balsamic
6
Pernille Larsen
Wunderwear
Tapet
Blondekant
Logo m. 3 farver
Version 1. Logo udg. til hvid baggrund
Version 2. Logo udg. til grå baggrund
Version 3. Logo udg. til mørk baggrund
50% sort
100% sort
40% sort
80% sort
0% sort
70% sort
Mediegrafiker Svendeprøve december 2012
7
Wunderwear
Moodboard m. inspiration
8
Pernille Larsen
Wunderwear
ABC123 Perla Regular Benyttes primært til priser, rubrikker og billedtekst på tryk. Dog kun få steder på web, da det er en meget tynd font.
ABC123 Helvetica Neue Light
ABC123 Benyttes til priser, billed- og brødtekst.
Bickham Script Pro
Benyttes KUN til logo payoff og navnetræk på facade, samt overskrifter teasers og billeder.
Mediegrafiker Svendeprøve december 2012
9