GRAFISK DESIGN D E S I G N O G O P S Æ T N I N G A F H J E M M E S I D E DESIGN OLES PARAMETRE GRAFISK DESIGN
GRAFISK DESIGN DOKUMENTATION DOKUMENTATION OPGAVEBESKRIVELSE Opgaven gik ud på at designe og fremstille en overskuelig og enkel hjemmeside, www.zoles.eu. Siden måtte samtidig gerne udstråle energi og aktivitet, sammensat med et professionelt og stilrent layout. ANSVAR FOR OPGAVELØSNING Opgaven er udarbejdet i samarbejde med en medstuderende. KUNDEKONTAKT OG VARIGHED Der blev inden påbegyndelse af opgaven, holdt et skype-møde med kunden, omkring ønsker og layout, til hjemmesiden. Derefter er der udarbejdet et layout, som kunden godkendte. Opgavens varighed strækte sig over to dage. PROGRAMVALG WORDPRESS: der er til opbygningen af hjemmesiden anvendt Wordpress, da dette var et krav fra kunden. PHOTOSHOP: der er til billederedigering anvendt PhotoShop. ILLUSTRATOR: der er til effekter anvendt illustrator (vektorgrafik). KOMMUNIKATIONSSTRATEGI Der er til udførsel af hjemmesiden, primæet taget brug af den informative kommunitationsstrategi, da siden primært består af information omkring Zoles og deres produkter. Dog optræder headerbilledet, som er den manipulativ kommunikationsstrategi. ØKONOMISKE BEGRÆNSNINGER Der har til udførsel af siden, været økonomiske begrænsninger, da Zoles er en nyopstartet virksomhed, med en snæver økonomi. Dog tror de 100 % på deres ide, og var derfor alligevel villige til at ligge lidt penge i projektet, for at få et så godt resultat som muligt: WordPress BeTheme: 520kr. Font: Sneakers Script: 213kr. Colorbox headerbillede, dame: 74,50kr. Colorbox headerbillede, fod: 74,50kr. SVENDEPRØVE 2017 DITTE VIUM OVERGAARD 45
MÅLGRUPPEBESKRIVELSE G Æ L D E N D E F O R A L L E F I R E K E R N E F A G L I G H E D E R 46
GRAFISK DESIGN AFSENDER AFSENDER Virksomheden Zoles er oprettet af far og datter, Per og Cecilie, som også ejer firmaet Shoe My Feet. Virksomheden blev oprettet i 2016, men er allerede under stor udvikling, og har planer om at udvide til Sverige, Norge og Tyskland. Zoles er både B2B virksomhed, da de arbejder sammen med en række professionelle fysioterapeuter, men de henvender sig også direkte til forbrugeren (buisness to consumer). VISION Zoles vision er at give den enkelte bruger af deres 3D-fremstillede produkter en individuel og forbedret oplevelse, af både komfort og performance i kroppens bevægelsesmønster. MISSION Zoles mission er at skabe et service- og brugsprodukt ved hjælp af nytænkning, og de nyeste teknologier på markedet. Kunden skal i fællesskab med fodspecialister udarbejde, og producere fodtøj efter kundens individuelle behov og ønsker. KONSUMENTENHED Alle mennesker med fødder SEGMENT Mennesker som går op i kroppens anatomi og ergonomi. Mennesker som vil være på forkant med eventuelle gener og skavanker senere i livet. Mennesker som vil afhjælpe en medfødt sygdom. Sportsudøvere som ønsker at forbedre deres performance. Mennesker med en aktiv hverdag. VÆRDIER Zoles ligger i deres produktion af 3D-såler, stor vægt på kvalitet, ergonomi og bæredygtighed. KONSUMENTENHED Zoles primære konsumentenhed, ligger hos mennesker med en aktiv hverdag, som derfor går op i kroppens velvære og anatomi. Samt mennesker med sans for bæredygtighed. SVENDEPRØVE 2017 DITTE VIUM OVERGAARD 47
GRAFISK DESIGN MINERVAMODELLEN MINERVAMODELLEN GRØN SEGEMNT Idialistisk og moderne Økologi, sundhed og bæredygtighed Dyrker naturen Interesse for sport, krop og velvære DEMOGRAFISKE FORHOLD Nationalitet: danskere Mænd og kvinder Alder 18 50 år Middel indkomst, men villig til at ofte penge på sundhed, og produkter med høj bæredygtighed Miljøbevidst DET BLÅ SEGMENT MODERNE DET GRØNNE SEGMENT MATERIALISTISK OG MODERNE 20 % MILJØBEVIST OG IDEALISTISK 60 % PRAGMATISK DET GRÅ SEGMENT 10 % IDEALISTISK STATUS OG MATERIALISTISK 5 % FAMILIEBUNDET OG TRADITIONEL 5 % DET VIOLETTE SEGMENT DET ROSA SEGMENT TRADITIONEL SVENDEPRØVE 2017 DITTE VIUM OVERGAARD 48
HEJMMESIDE DESIGN G R A F I S K D E S I G N 49
GRAFISK DESIGN RESEACH RESEACH SVENDEPRØVE 2017 DITTE VIUM OVERGAARD 50
ROUGHS FORSIDE FIND FORHANDLER ERHVERVS LOGIN OM ZOLES KONTAKT SVENDEPRØVE 2017 DITTE VIUM OVERGAARD 51
GRAFISK DESIGN OPBYGNING OPBYGNING Udarbejdelse af flowchart og wireframe, for at gøre det nemt og overskueligt, at gå til opbygning af hjemmesiden. Hjemmesiden er bygget op i WordPress, ved brug af Pagebuilder, som sættes op med moduler, som er opbygget i procenter, og derved er med til at gøre siden responsive. 1220PX 1920PX Logo: 100px x 46px Responsive headerbillede Breakpoint 768px INDEX OM ZOLES Sektion: 1500px x 732px Tekst felter: W362px H1: 48px p: 14px FIND FORHANDLER KONTAKT Sektion: 1500px x 732px Tekst felter: W362px H1: 48px H2: 17px p: 14px ERHVERVS LOGIN Img: 707px x 446px Sektion: 1500px x 615px Tekst felter: W362px H2: 17px p: 14px Img: H 209px Footer: H 86px SVENDEPRØVE 2017 DITTE VIUM OVERGAARD 52
GRAFISK DESIGN OPBYGNING LAYOUT Der er udarbejdet et visuelt layout af hjemmesiden, som kunden godkendte. Siden er derefter bygget 100% op efter layoutet. FORM Siden er opbygget af et minimalistisk layout, samt rektangulære former, for at skabe en forbindelse til profilbrochurens form. For at bryde det meget kantede layout, og understøtte Zoles værdier, med de organiske og naturlige former, er der anvendt et udsnit af logoet som footer. ZOLES ZOLES OM ZOLES FIND FORHANDLER KONTEKT ERHVERV FREMTIDENS FODTØJ KOMMER HER VI HAR EN MISSION SÅLER LAVET KUN TIL DIG! SÅDAN FOREGÅR DET DE BASALE FORDELE PERSONLIGGØR 3D PRINT YDEEVNE KOMFORT PASFORM INDIVIDUALITET FODSTILLING ZOLES 2017 OLE SVENDEPRØVE 2017 DITTE VIUM OVERGAARD 53
GRAFISK DESIGN SIDERNE UDFØRT FORSIDE FORSIDE FORSIDE OM ZOLES OM ZOLES FIND FORHANDLER KONTAKT KONTAKT FORHANDLER LOGIN SVENDEPRØVE 2017 DITTE VIUM OVERGAARD 54
GRAFISK DESIGN SIDERNE UDFØRT RESPONSIVE FORSIDE BURGER MENU OM ZOLES FIND FORHANDLER KONTAKT FORHANDLER LOGIN Fortsættes SVENDEPRØVE 2017 DITTE VIUM OVERGAARD 55
GRAFISK DESIGN FARVER FARVEVALG Der er i forhold til opbygningen af siden, lagt stor vægt på at skabe harmoni mellem Zoles primære og sekundære identitetsfarver. PRIMÆRE IDENTITETSFARVE SEKUNDÆR IDENTITETSFARVE SEKUNDÆR IDENTITETSFARVE GRADIENT ANVENDT I HEADERBILLEDE NEUTRAL BAGGRUNDSFARVE FARVEVÆRDIER RGB: 133. 205. 110 HEX: #006f80 FARVESYMBOLIK Natur Vækst Afslappende farve Ballance Harmoni FARVEVÆRDIER RGB: 0. 174. 169 HEX: #00a0a1 FARVESYMBOLIK Prestige Beroligende Kreativitet Fantasi FARVEVÆRDIER RGB: 0. 166. 129 HEX: #a1c85e FARVESYMBOLIK Kommunikation Miljø Glæde Ballance Vækst FARVEFORLØB PRIMÆRE FARVE RGB: 133. 205. 110 HEX: #006f80 SEKUNDÆR FARVE RGB: 0. 174. 169 HEX: #00a0a1 FARVEVÆRDIER RGB: 0. 0. 0 HEX: #e6e6e6 Stabilitet SVENDEPRØVE 2017 DITTE VIUM OVERGAARD 56
GRAFISK DESIGN FARVER PRIMÆRE IDENTITETSFARVE Den primære identitetsfarve er den mørkeblå, som derfor er den mest dominerende på hjemmesiden. Denne anvendes derfor til de objekter, som skal have ekstra fokus: Headerbillede Topmenu Mapicon»Send kanp«ved mailformular Footer MAILFORMULAR MAPICON PRIMÆR IDENTITETSFARVE RGB: 133. 205. 110 HEX: #006f80 SVENDEPRØVE 2017 DITTE VIUM OVERGAARD 57
GRAFISK DESIGN FARVER SEKUNDÆRE IDENTITETSFARVE De to sekundære identitets farver, er anvendt til mindre, men betydningsfulde detaljer, for at skabe harmoni, balance samt brugervenlighed på hjemmesiden: Footer illustration Mailformular Illustrationer Erhvervs login FOOTER MAILFORMULAR SEKUNDÆR IDENTITETSFARVE SEKUNDÆR IDENTITETSFARVE NEUTRAL BAGGRUNDSFARVE RGB: 0. 174. 169 HEX: #00a0a1 RGB: 0. 166. 129 HEX: #a1c85e RGB: 0. 0. 0 HEX: #e6e6e6 SVENDEPRØVE 2017 DITTE VIUM OVERGAARD 58
GRAFISK DESIGN FARVER FARVEHIERAKI - FONTE Der er ved tekstmateriale på siden, lagt stor vægt på anvendelse af Zoles tre identitetsfarver, og deres farvehieraki. PRIMÆRE IDENTITETSFARVE Rubrikker og konsultativ tekst. SEKUNDÆRE IDENTITETSFARVE Den mest dominerende af de to sekundære farver, er den lyseblå, og er derfor anvendt til alt brødtekst. SEKUNDÆRE IDENTITETSFARVE Den grønne som er den mindst anvendte på siden, bruges til mindre, men betydningsfulde detaljer i menuen, for at skabe konktrast, og brugervenlighed. PRIMÆR IDENTITETSFARVE SEKUNDÆR IDENTITETSFARVE SEKUNDÆR IDENTITETSFARVE RGB: 133. 205. 110 HEX: #006f80 RGB: 0. 174. 169 HEX: #00a0a1 RGB: 0. 166. 129 HEX: #a1c85e SVENDEPRØVE 2017 DITTE VIUM OVERGAARD 59
GRAFISK DESIGN FONT VALG FONT VALG RUBRIK Her er anvendt fonten Sneakers Script, 48px. Dette er en moderne display font, og anvendes for at give blikfang, samt skabe en rød tråd til logoet, hvor samme font er anvendt. Fonten udviser movement og energi, som er med til at understøtte produktets, funktion og værdier. UPLOAD AF CUSTOM FONT BRØDTEKST, UNDERRUBRIK, MENU Her er anvendt fonten Arial Narrow. Brødtekst 14px Underrubrik 17px Menu 15px Denne font anvendes da Zoles, som nyopstratet firma, kun havde økonomi til at købe en font, og derfor fandt det vigtigst at købe fonten»sneakers Script«, som også anvendes til logoet, og er et af deres identitets kendetegn. Dette er en grotesk sansserif. Fonten er anvends til web, da den er let læselig, og derved gør der rart for øjnene at kigge på skærmen. KONSULTATIV TEKST Her er anvendt fonten Arial Narrow, 14px. Der anvendes til konsultativ tekst, Zoles primære identitetsfarve, for at gøre brugeren ekstra opmærksom på disse, og derved styrke brugervenligheden. SVENDEPRØVE 2017 DITTE VIUM OVERGAARD 60
GRAFISK DESIGN ILLUSTRATIONER ILLUSTRATIONER Der er på siden bevidst taget brug af meget få illustrationer, for at holde et enkelt og stilrent layout, samt da de tre anvendte farver, tager meget fokus. Der er anvendt et helsidet headerbillede, med Zoles tre identitetsfarver, og produkt. Der er ved opbygning af billedet, anvendt det gyldne snit. Billedet er opbygget med damen i forgrunden, og Zoles slogan i baggrunden. Der er tilføjet skygger, for at give billedet perspektiv. Damen er placeret centreret i billedet, for at fange brugerens opmærksomhed. Sloganet er placeret bagerst, i den vandrette akse. Dette resultere i en modvægt og skaber harmoni. Det samme gælder for sålerne. Disse er lagt i lag, med skygge, for at tilføje noget dybte til siden. Sålene er Zoles egne 3D-printede såler, som er manipuleret, for at give dem et 3D-look, og derefter Zoles identitetsfarver. SVENDEPRØVE 2017 DITTE VIUM OVERGAARD 61
GRAFISK DESIGN ILLUSTRATIONER ILLUSTRATIONER Som footer dekoration, er der anvendt et udsnit, af Zoles logo ikon, hvor alle tre identitetsfarver optræder. Den bølgede footer, slutter siden af med et indirekte budskab, om Zoles værdier: Bløde organiske former Bølgende landskabshorisont Kroppens naturlige opbygning ZOLES SVENDEPRØVE 2017 DITTE VIUM OVERGAARD 62
GRAFISK DESIGN ANIMATION ANIMATION Der er på menupunkterne anvendt en mouse-over effekt, for at forstærke brugervenligheden. Menupunkterne, hover fra hvid, til grøn, som er et af Zoles sekundære identitetsfarver. Der er anvendt et Plugin, til at lavet en pop-up funktion på siden. RESPONSIVE Hjemmesiden er opbygget, så den er responsive. Dette ses bla. på headerbilledet, som skifter mellem billede med og uden slogan. Der er sat et breakpoint på 768px. SVENDEPRØVE 2017 DITTE VIUM OVERGAARD 63
GRAFISK DESIGN BRUGERVENLIGHED BRUGERVENLIGHED TOP OF PAGE FUNKTION Der er på siden indsat en»top Of Page«funktion. FIXED TOPMENU Topmenuen bliver i toppen, når der scrolles, ned på en side. BURGERMENU Der er på mobil og tablet version, indsat en burgermenu. SVENDEPRØVE 2017 DITTE VIUM OVERGAARD 64
GRAFISK DESIGN ÆSTETIK OG FUNKTION AIDA MODELLEN ATTENTION Kvinden som hopper og giver bevægelse i billedet INTEREST Slogan»Individual fit that matters«desire Brugeren ønsker mere information og scroller ned på siden ACTION Brugeren klikker sig ind på den ønskede side, via topmenuen ÆSTESTIK OG FUNKTION Der er ved udarbejdelse af hjemmesiden, lagt lige stor vægt på æstetik og funktion. Menuen er overskuelig, samt placeret som en»fixed menu«, øverst på siden, hvilket gør det let for brugeren at navnigere rundt. Æstetik: helsidet headerbillede Funktion: fixed topmenu SVENDEPRØVE 2017 DITTE VIUM OVERGAARD 65
GRAFISK DESIGN GESTALTLOVENE GESTALTLOVENE Der er til opbygning af hjemmesiden, taget brug af gestaltlovene, for at skabe harmoni på siden. LOV OM NÆRHED Der er lagt stor vægt på afstand mellem rubrik, underrubrik og brødteksten, for tydeligt at vise hvad der høre sammen. Billedet er placeret med største vægten ved teksten under, for tydeligt at vise, at det er en samlet enhed. ZOLES ZOLES OM ZOLES FIND FORHANDLER KONTEKT ERHVERV LOV OM LUKKETHED Sektionerne på siden er delt op med forskellige baggrundsfarver, for tydeligt at illustrere, hvilke elementer på der høre sammen. LOV OM FORBUNDETHED Billedet er placeret med vægten til teksten under, da det er dette den tilhøre, men ved hjælp af dens komposition og udformning, leder den øjet op af på siden, og skaber derved forbundethed, til resterende indhold. VI HAR EN MISSION FREMTIDENS FODTØJ KOMMER HER SÅLER LAVET KUN TIL DIG! SÅDAN FOREGÅR DET DE BASALE FORDELE PERSONLIGGØR 3D PRINT YDEEVNE KOMFORT PASFORM INDIVIDUALITET FODSTILLING ZOLES 2017 OLE SVENDEPRØVE 2017 DITTE VIUM OVERGAARD 66
GRAFISK DESIGN KVALITET OG PROCES PROCESBESKRIVELSE Selve opbygningen af siden var nem at gå til, da hele designlinjen på forhånd var bestemt, samt der var udarbejdet et layout, som hjemmesiden 100% blev bygget op efter. Dog har der været en del udfordringer, da kunden efterfølgende selv, har forsøgt sig med at tilføje flere ting på siden, som derfor ikke har overholdte hverken designlinjen eller de grafiske regler. Bl.a. ønskede vi ikke pop-up funktionen på siden, dette var dog et ønske fra kunden, og vi har derfor været nødsaget til at gå på kompromis, for også at imødekomme kunden ønsker. Desuden er der tilføjet en webshop, samt Facebook link, som kunden selv har udarbejdet. Jeg er ikke helt tilfreds med tekstfordelingen alle steder på siden, hvilket jeg også havde en snak med kunden omkring, men der var efter kundens valg, desværre ikke mulighed for at ændre på dette. KVALITETS VURDERING Jeg er godt tilfreds med det endelige resultat af hjemmesiden, da den er blevet enkel og nem at navigere rundt på, ved brug af den fixed topmenu. Der er lagt stor vægt på at skabe et enkelt layout, med massere af blikfang, ved brug af farverige illustrationer, samt ved Zoles tre indetitets farver. Specielt synes jeg at det fungere rigtig godt med headerbilledet, som giver siden noget power!, og derved skaber et godt førstehåndsindtryk, når man besøger siden. Der er taget højde for Zoles målgruppe, og siden er derfor lavet responsive, så den også kan benyttes på mobil og tablet, hvilket jeg synes er en vigtig funktion. I det store hele, synes jeg siden er blevet rigtig god, og lever op til Zoles værdier. Kunden er rigtig glad for siden, og er enige i at den passer perfekt til deres stil og værdier. Tilføjelse af webshop og facebook ikon Ulige tekstfordeling SVENDEPRØVE 2017 DITTE VIUM OVERGAARD 67