NY IDENTITET TIL SCHWARZ

Transkript

1 GRAFISK DESIGN

2 NY IDENTITET TIL SCHWARZ Redskaber: Photoshop Illustrator Kundeprofil: Schwarz er en eksklusiv forhandler af senge og tilbehør i topklavlitet. Med deres store sortiment af kvalitetsmærker som blandt andet Carpe Diem, Röwa, Dunlopillo, Getama, Tempur og Koz by Lama samt mange mærker inden for sengelinned, puder og dyner har de senge og madrasser til alle typer af mennesker. Målgruppe Ud fra Minervamodellen, befinder Schwarz s målgruppe sig primært i det blå segment, som betegner den del af befolkningen, der antages for at være meget moderne og materialistiske. Folk der går meget op i karriere, penge, luksus og kvalitet. Opgavebeskrivelse: Kunden mente ikke, at deres nuværende site afspejlede firmaet og dets produkters eksklusivitet. Derfor ville kunden have et nyt site, med det formål at skabe kundevækst. Kunden ville gerne beholde deres daværende logo, men få foretaget små ændringer, som ville få logoet til at se mere eksklusivt ud.

3 Moodboard Først laver jeg et moodboard, som kan hjælpe mig med at finde den stil jeg gerne vil hen ad. Her valgte jeg at finde nogle stilrene og eksklusive billeder, da hjemmesidens nye udtryk netop skulle udstråle modernitet, kvalitet og eksklusivitet.

4 Schwarz s tidligere website/ webshop og logo Her ses Schwarz s gamle logo, webiste og webshop. Kunden ønskede et site, der indeholdt både website og webshop. Selve logoet skulle ikke ændres, men taglinen skulle have en brush up. Forside til hjemmesiden Ankomstside til webshop

5 Logo Det gamle logo ser uoverskuligt ud. Da selve navnet er skrevet med en Slab font i bold, bør der være mere luft over og under bogstaverne. Derudover fungerer det heller ikke særlig godt at dele taglinen op. Det medfører desværre kun visuel forstyring. Kunden ville ikke have ændret fonten i Schwarz, så det var derfor kun taglinen der skulle ændres. Først gik jeg igang med at finde en ny font til taglinen. Jeg valgte her en tynd grotesk skrift ved navn Wide, da jeg mener, at fontens rene linjer giver logoet et mere eksklusivt look. Efter færdiggørelsen af taglinen, syntes jeg, at der manglede et eller andet ved logoet. Sammen med vores AD er kom vi frem til den løsning, at lave et z som et trademark eller et registration mark. De to z er er med til at give et visuelt udtryk, således at logoet udtrykker søvn. Corporate farver Jeg valgte at bruge den røde farve fra det gamle logo som corporate farve. Derudover tilføjede jeg en lidt lysere rød. Farverne skal bruges forholdsvis diskret i deres design - for eksempel som knapper på siden. Pantone 193 C CMYK 2, 99, 62, 11 RGB 191, 13, 62 Html #bf0d3e Pantone 192 C CMYK 0, 94, 64, 0 RGB 228, 0, 70 Html #e40046

6 Typografi Som kontrast til logoets bold slab font, vælger jeg at bruge fonte fra samme fontfamilie som jeg brugte til den nye tagline. Fontfamilien hedder. er en gratis webfont, som kan hentes i flere forskelling snits og skrifter. Jeg bruger, som displayfont i forskellige snit. Til rubrikken bruger jeg for eksempel bold-udgaven, hvor jeg derimod, til underrubrikken, bruger light. Regular Bold abcdefghijklmnopqrs abcdefghijklmnopqrs Jeg bruger Arial regular til brødtekst, da teksten, når den kommer ned i så lille en størrelse, er mere læsevenlig. Derfor bruger man for eksempel en websafe-font. Websafe-fonte er en standard font, som alle browsere er i stand til at læse. Thin Extra Light Regular Medium Bold ExtraBold Light SemiBlod Black Regular abcdefghijklmnopqrs Bold abcdefghijklmnopqrs Thin Regular Bold Extra Light Medium ExtraBold Light SemiBlod Black

7 Wireframes Jeg tegner en række forskellige templates. Her vises henholdsvis forside, forside til mobil og almindelig tekstside. Dette bruges til at give en fornemmelse af, hvordan layoutet kommer til at se ud. Forside Forside til mobil Tekstside Funktioner I headeren er der flere funktioner. Der er logo, log ind, kurv og en menu. På ankomstsiden er der store slides, der skal bruges til nyheder eller tilbud af mærker og senge. Under slides er der et felt, hvor der skal reklameres for forretningens tilbud om rygtests. De tre kasser er indgange til mærker. Der er lavet to typer af tekstområder med tekst til venstre, samt billeder til højre - og omvendt. Parallax er et felt, hvor der er plads til nyheder eller evt. en video. Slides med alle de mærker, der sælges i butikken/shoppen. Tilmelding til nyhedsbrev formular. Footer: I footer kommer der kontaktoplysninger og mulighed for at skrive en besked til Schwarz. En del af designet går altid igennem websitet. For eksempel header, nyhedsbrevsformular og footer, som bliver hardkodet i sitet. De andre ting bliver kodet som widgets, hvor kunden selv kan bestemme opbygningen af hver side.

8 Sitemap Der laves et sitemap, så man kan se strukturen på websitet. Deruover er det også med til at overskueliggøre hvilke sider der skal indeholde produkt, oversigt og produktside. Forside Produkter/oversigt Mærker Om Schwarz Kontakt Senge Carpe Diem Dyner Dunlopillo Puder Getama Sengetøj Jensen Beds Rullemadrasser Lamelbunde

9 Produkt struktur Her ses designet til produktstrukturen: 1. Kategoriside 2. Produktoversigt 3. Produkt

10 Responsive webdesign Hele websitet er designet til alle platforme. Det giver et langt mere brugervenligt website. Brugeren har samtidigt nemmere ved at handle via tablet eller mobile enheder. all and (min-width: 1025px) {...} all and (min-width: 768px) and (max-width: 1024px) {...} all and (min-width: 320px) and (max-width: 767px) {...} 100% Måden at kode responsive websites på er ved at fortælle CSS en hvilke koder der skal bruges, når browseren er en bestemt bredde. Disse koder hedder Media Queries. Ud over at bruge Media Queries, bruges der også procenter til at beregne størrelser med. HTLM <figure> <iframe src= youtube.com/embed/# ></iframe> </figure> CSS figure { height: 0; padding-bottom: 56.25%; /* 16:9 */ position: relative; width: 100%; } iframe { height: 80%; left: 0; position: absolute; top: 0; width: 80%; } <ifreme> <figure>

11 Responsive menu På computeren ses hover-effekter samt dropdownmenu, og kurven slået ud. På mobilen ses mobilmenu i to niveauer.

12 Gestaltlovene Ved brug af gestaltlovene skabes der et brugervenligt overblik på hjemmesider. Jeg har brugt følgende gestaltlove: Loven om figur og baggrund Loven om figur og baggrund ses tydeligt i slideren. Baggrunden skriger på opmærksomhed, men bliver tonet ned af en gradient under teksten. Loven om nærhed På forsiden har jeg tre billeder som er placeret op ad hinanden. De er placeret tæt på hinanden, og de har samme form, og opfattes derfor som en sammenhæng. Loven om lukkethed På siden er der lavet to afsnit med tekst samt et billede ved siden af. Selv om de ikke er i én kasse, opfattes de stadig som en sammenhæng. Dette ses også ved feltet med rygtesten.

13 * Forsiden er ikke i original størrelse

14 * Tekstsiden er ikke i original størrelse

15 Trykt medie Her ses en annoce, hvor Schwarz s nye identitet kommer til udtryk.