GRAFISK WORKFLOW WEBSHOP TIL KLITMØLLER COLLECTIVE

Transkript

1 GRAFISK WORKFLOW WEBSHOP TIL KLITMØLLER COLLECTIVE

2

3 WEBSHOP TIL KLITMØLLER COLLECTIVE Klitmøller Collective er et nyt lifestyle brand, som udspringer fra fiskerlejet Klitmøller i det nordvestlige Jylland. I Klitmøller er en helt speciel stemning med en blanding af den traditionelle, gamle fiskekultur, surferkulturen og tilrejsende fra hele verden. I dette unikke spændingsfelt henter folkene bag Klitmøller Collective inspiration til deres simple, skandinaviske designs i de bedste materialer. Surferen Robert Sand står i spidsen for mærket, hvis fokus er en afslappet og uformel stil med høj kvalitet og perfekt pasform. Med andre ord er Klitmøller Collective en lille luksus i hverdagen, hvis man er vild med god kvalitet og skandinavisk design. OPGAVEBESKRIVELSE En fiktiv opgave hvor Klitmøller Collective skal have et nyt forslag til deres webshop. De ønsker at forny deres nuværende website, men stilen er den samme. KRAV TIL WEBSITET Enkel opsætning og hurtig for brugeren at danne et overblik Responsivt da størstedelen af kundegruppen køber via tablet eller smartphone Engelsk tekst, da firmaet har kunder i hele verden Fangende elementer på forsiden Forsiden skal indeholde nyheder og tilbud Holdes i samme stil som firmaets identitet Brug samme font som firmaet ellers bruger (Antonio) PROCESREDEGØRELSE Møde med kunden, hvor kravene til websitet drøftes Inspirationssøgning og ideudvikling Skitser Layout i Photoshop som drøftes med kunden Skelet af webshoppen Kodning af sitet Præsentation af sitet til kunden Søgeoptimering Browserkompatibilitet testes Demo sendes til kunden Enkelte rettelser til kodningen, samt tekst og billeder mediegrafiker-ats.dk/16sf35mgfkd/camilla FØLGENDE LINKS ER TILGÆNGELIGE: Index/Home Shop Shop - Men Shop - Women Shop - Sale Shop - Men - Henrik Sweater Shop - Men - Thomas Sweater Shop - Women - Aya Sweater Blue Shop - Women - Aya Sweater White Customer Service

4 INSPIRATION OG IDEUDVIKLING Inden jeg begynder at lave skitser, bruger jeg altid tid på at søge inspiration til sitet. I dette tilfælde har jeg brugt pinterest, til at finde websites som indeholder elementer, stemning og opbygning som inspirerer mig. Jeg laver så vidt muligt altid et moodboard, som jeg også præsenterer for kunden. Dette giver hurtig en fornemmelse for hvilken stemning jeg ønsker, og kunden fanger hurtigere ideen. Billeder siger mere end tusind ord. INSPIRATION

5 MOODBOARD Enkelt og overskueligt Minimum af tekst Fællesskab Havet Klitter og natur Surfer vibes Rå og barsk natur

6 SKITSER Jeg skitserer altid mine tanker og ideer, og kan på den måde hurtigt få et overblik over hvilken opbygning jeg går efter på mit website.

7 AIDA-MODELLEN 1 Attention: Det første man ser når siden loades er banner med udsalg, tilbud samt fangende og stemningsfyldte billeder. 2 Interest: For at fange kundens opmærksomhed med det samme, er der på forsiden stor fokus på tilbud samt nye varer via overskrifter og billeder. 3 Desire: Let adgang til produkter, samt top information med gratis levering og nem retur som overtaler kunden. 4 Action: Hurtig navigation, nem adgang til kurven, og direkte adgang til produkter fra forsiden Lookbook fall/winter 2016

8 PRÆSENTATION TIL KUNDEN For at kunne præsentere webshoppen til kunden, lavede jeg et hurtigt udkast i Photoshop. Det er ikke alle de korrekte billeder og tekst som er brugt, men layoutet giver et godt helhedsbillede af opbygningen og stilen PROBLEMSTILLINGER EFTER FØRSTE MØDE Ønske om let tilgængelig kundeservice information. I det nuværende design er dette en side for sig. Dette er nu rettet til at være en drop-down som er tilgængelig fra alle sider. 2 Billedet tager for meget af pladsen på index siden, og ville på mindre skærme fylde hele siden. Kunden ønsker stadig at billedet skal fylde 100% i bredden. 3 Kunden ønsker at nyheder og bedst solgte skal være en længere række af billeder, som kunden skal kunne scrolle igennen. 4 I stedet for den fortællende tekst om virksomheden og billedet som fungere som link til udsalg, ønsker kunden tre elementer som skal give køberen lyst til at købe, fx. udsalg, nyheder og så videre. 3 Elementerne til galleriet er allerede designet til lookbooken, så nu skal de blot tilpasses til webshoppen. 4 3

9 DESIGN AF ELEMENTER Inden jeg går i gang med at kode websitet, designer jeg de elementer jeg ønsker skal optræde på sitet. Jeg tager kundens feedback på første præsentation til overvejelse, og indføre de nødvendige ændringer. #navsub height 20px #logo height 40px nav height 30px FRONTPAGE BANNER Blikfang med nyheder, som kan variere fra sæson til sæson, og fange stemningen af årstiden. FIGURE + FIGCAPTION Produkt billederne samt tekst, er designet til lookbooken, og skal derfor holdes i samme stil. Her er desuden lavet en hover funktion, så produktet bliver indrammet i en tynd grå boks, SECTION IMG WIDTH 33.33% Tilbud og nyhedsboksene er lavet kvadratisk, i et enkelt og nordisk look. footer

10 OPBYGNING OG BRUGERVENLIGHED Webshoppen har en enkelt opbygning som skal forbedre brugeroplevelsen. Det skal være nemt at tilgå produkterne og læse mere. Sitet er enkelt og overskueligt, og skal være nemt at navigere rundt på. Desuden er webshoppen responsiv og alt er bygget op i procenter. Størstedelen af firmaets kunder køber via tablet eller smartphone. RESPONSIVT Køberen skal kunne tilgå websitet på alle enheder, så derfor er sitet tilpasset til den enkelte enhed.

11 NAVIGATION Navigationen er låst til toppen af browser vinduet, så det altid er let at tilgå andre sider, samt kurven. KONTAKT INFORMATION I toppen af webshoppen er der placeret en dropdown med kontakt informationer, så denne altid er let at finde.

12 MEDIA QUERIES Jeg har brugt Media Queries til at definere elementernes størrelse ved forskellige pixels-break points, for eksempel når webshoppen loades på tablet eller mobil. Jeg har anvendt følgelse Media screen and (max-width: 330px) - Dette har jeg valgt som break point for min mobile visning af screen and (max-width:520px) - Flere af elementerne fungere ikke længere i denne størrelse, så der er taget stor højde for sidens elementer, ikke bare standard mål. Her skifter index siden og de enkelte produkt sider fra strandard udseende til enkelt og tilpasset tablet/mobil design. De følgende 3 Media Queries er hovedsageligt blevet brugt til at styre produkt siderne mere screen and (min-width:331px) - Her vises 2 screen and (min-width:521px) - Her vises 3 screen and (min-width:800px) - Her vises 4 produkter. LOADING AF SITE For at loading af websitet skal ske så hurtigt som muligt, har jeg redigeret billederne i Photoshop, så de kun optræder i den størrelse de skal bruges i, og aldrig større. GOOGLE FONTS For at optimeree sitets loading tid har jeg kun anvendt 2 Google Fonts: Oswald og Roboto.

13 SEO OPTIMERING TITLE OG METATAGS For at forbedre chancerne for at søgemaskiner som Google finder netop denne webshop, har jeg oprettet metatags og title på alle mine html sider. ALT BILLEDTEKSTER Denne er vigtig at få med, når der skal søgeoptimeres. Alt teksten på billeder er nemlig den søgemaskinen bruger til at finde ud af hvad der er på billedet. Alt teksten på billeder gør også sansynligheden for at netop dette billede bliver vist i billedsøgninger på fx Google, langt større. Desuden er det også Alt teksten som bliver vist, hvis browseren ikke kan hente billedet. HTML5 - SEMANTISK OPBYGNING OG BRUG AF TAGS Webshoppen er opbygget i HTML5, som hjælper på sites loadingtid samt opdeling af vigtige og mindre vigtige elementer/indhold. Begge disse ting er med til at forbedre sitets søgeoptimering. Hele webshoppen er opbygget semantisk, og følgende block elementer er blevet brugt: Header Nav Main Section Figure Figcaption Footer Derudover er følgende inline elementer brugt: h1 h2 h3 h4 h5 h6 p

14 BROWSERKOMPATIBILITET For at optimere webshoppens brugervenlighed er sitet testet i de mest anvendte browsere for at sikre, at alt ser ud som det skal. Webshoppen er testet uden problemer i: Google Chrome, Safari, Internet Explorer, og Mozilla Firefox. VALIDERING AF HTML Alle koder lavet i forbindelse med denne webshop er valideret. Validering af koden er vigtig, hvis jeg vil være sikker på, at webshoppen vises korrekt. Korrekt valideret kode har betydning for placering i søgemaskinerne, men det der nok er vigtigst, er, at de forskellige browsere får lettere ved at vise webshoppen, sådan som den er designet. Der blev ingen fejl fundet i valideringen, men på index siden til webshoppen, får jeg to advarsler. De fortæller begge at jeg mangler en heading i min section. Ingen fejl eller advarsler til Shop, Shop-Men eller produkt siden.

15 KVALITETSVURDERING Jeg er overordnet godt tilfreds med resultatet af webshoppen. Jeg sigtede efter et udseende som matchede målgruppen, og samtidig var det vigtigt at holde udtrykket i samme stil som Lookbooken, og Klitmøller Collectives nuværende stil. Det syntes jeg lykkes. Både desktop, tablet og mobil versionen er nem at navigere rundt på, og det var et af de absolutte must! Enkelt og overskueligt. Der hvor den største udfordring lå, var i overgangen mellem desktop, tablet og mobil virsionerne. Der var mange ting som skulle ændres på, og de forskellige elementer på siden skulle tilpasses enkeltvis. Efterfølgende har kunden ønsket at fjerne søgefunktionen, da virksomheden ikke har tilstrækkelige produkter til at denne funktion vil være brugbar. mediegrafiker-ats.dk/16sf35mgfkd/camilla

16 SVENDEPRØVE - CAMILLA GREGERSEN