GRAFISK DESIGN - sashmat.dksashmat.dk/wp-content/uploads/2017/06/grafisk-design-zoles-1.pdf · FLOWCHART For at arbejde mest struktureret og danne mig selv et overblik over hjemmesidens

P O R T F O L I O / / S A S H A M A T H A R U / / M E D I E G R A F I K E R / / S V E N D E P R Ø V E 2 0 1 7

AFSENDER // VIRKSOMHEDEN

61

GRAFISK DESIGNZ O L E S

ZOLES


63

BESKRIVELSE // GRAFISK DESIGN

OPGAVEBESKRIVELSENyopsætning af hjemmeside til Zoles. Kunden ønsker, at hjemmesiden bliver sat op i Wordpress, så den er nem og enkel for Zoles at rette i. Opgaven er udført i min fritid.

KUNDEKONTAKTDer har været korresponderet og samarbejdet med de to stiftere bag Zoles.

OPGAVEANSVARLIGOpgaven er udført i samarbejde med en kollega. Vi har sammen haft ansvaret for alt markedsføringsmateriale.

OPGAVENS VARIGHEDTo dage

ØKONOMISKE BEGRÆNSNINGER:Nyopstartet firma, som ikke har ubegrænset økonomi, men kunden tror 100 % på projektet og er derfor villig til at ofre penge på det. Omsætningen vil gradvist stige, da Zoles bruger genanvendeligt materiale, og derved kan spare penge på sigt. I dette projekt har Zoles betalt for Wordpress tema, fonte og Colour Box billeder.

PROGRAMVALGHjemmesiden er bygget op i WordPress, mens wirefra-men er bygget op i indesign.

Wordpress Selve hjemmesiden Photoshop BilledmaterialeIllustrator Footer og pin

PREFLIGHTT E K S T O G T Y P O G R A F I

MÅLGRUPPEBESKRIVELSEG Æ 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

HJEMMESIDE FORARBEJDEG R A F I S K D E S I G N


4

AFSENDER // VIRKSOMHEDEN MINERVAMODEL // VIRKSOMHEDEN

KONSUMENTENHEDER SEGMENTER MÅLGRUPPE

Alle med fødder. • Folk som går op i anatomi og ergonomi.

• Sportsudøvere som vil øge deres performance.

• Personer som ønsker at forebygge anatomiske gener senere i livet.

• Personer som vil afhjælpe gener ved kroniske syedomme.

• Folk med en aktiv hverdag.

Jeg har valgt at fokusere særligt på aktive per-soner, som interesserer sig for sundhed og miljø i hverdagen.

Zoles bestræber sig på at fremstille indivi-duelt tilrettede såler, som kan forbedre livs-kvaliteten nu og her og kan afhjælpe gener forårsaget af fysiologiske ubalancer senere hen i livet.

AFSENDERZoles er en lille, men ambitiøs virksomhed som frem-stiller 3D-printede indlægssåler. Zoles er et søsterfirma til Shoe My Feet, men ønsker at brande sig uafhængigt. Zoles er både en B2B virksomhed, da de arbejder tæt sammen med fysioterapeuter, men henvender sig også direkte til forbrugeren (buisness to consumer).

VISIONZOLES 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 ved anvendelse af deres unikke og komfortable 3D-såler.

MISSIONZOLES mission er at skabe et service- og brugsprodukt baseret på nytænkning og de nyeste teknologier. Kun-den skal i evt fællesskab med fodspecialister udarbejde og producere fodtøj efter kundens individuelle behov og ønsker. Produktet skal fremstilles i overensstemmelse med firmaets tre nøgleord :

• Kvalitet

• Ergonomi

• Bæredygtighed


5

MINERVAMODEL // VIRKSOMHEDEN

MINERVAMODELGRØN SEGMENT• Idealistisk og moderne

• Økologi og sundhed

• Dyrker naturen

• Går op i balance

• Miljøbevidst

DEMOGRAFISKE FORHOLD• Alder : 18-50

• Indkomst : moderat indkomst og er villig til at ofre penge på sundhed

• Nationalitet : danskere

• Interesser : ergonomi, anatomi, krop og velvære

• Miljøorienteret

• Bopæl : mest tendens til at bo i større byer

MATERIALISTISK IDEALISTISK

MODERNE

TRADITIONEL

MATERIALISTISK OG MODERNE

20 %

MODERNE OG IDEALISTISK

60 %

TRADITIONEL OG MATERIALISTISK

5%

IDEALISTISK OG TRADITIONEL

5%

10 %

6


HOVEDGREB // VIRKSOMHEDEN

HOVEDGREB KOMMUNIKATIONSSTRATEGI DISTRIBUTION

Jeg vil fremstille marketingsmateriale i form af en profilbrochure, header til hjemmeside, design af logo og firmanavn samt hjemme-side til profilering af Zoles over for målgrup-pen: Aktive personer med interresse for sundhed, aktivitet og miljø. Grønne segment.

I udgangspunkt har jeg har valgt, at marke-tingsmaterialet skal være manipulativt. Jeg ønsker, at modtageren skal fornemme, at der kan opnås en let og ubesværet bevægelighed ved anvendelse af sålen.

Webbanneret er manipulativt, mens brochu-ren og selve hjemmesiden er en blanding af manipulativ og informativ marketing, da man ikke kan sælge såler alene på baggrund af manipulative billeder. Billederne fanger inte-ressen, og så vil man gerne vide mere, fx kan jeg benytte produktet, hvordan gavner det mig i min hverdag, osv.

PROFILBROCHURE• Fitness center

• Fysioterapeuter

• Helsebutikker/materialister

• Skobutikker

• Lægehus

• Sportskæder

HJEMMESIDE• Facebook

• Iform

• Instagram

GRAFISK PRODUKTIONSFORSTÅELSE

Z O L E S

ZOLES


AFSENDER // VIRKSOMHEDEN

111

PREFLIGHTT E K S T O G T Y P O G R A F I

MÅLGRUPPEBESKRIVELSEG Æ 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

HJEMMESIDE FORARBEJDEG R A F I S K D E S I G N

RESEARCH AF KONKURRENTER// GRAFISK DESIGN

64



65

FLOWCHART OG SKITSER // GRAFISK DESIGN

FLOWCHARTFor at arbejde mest struktureret og danne mig selv et overblik over hjemmesidens indholdssider har jeg udar-bejdet et flowchart.

FIND FORHANDLEROM ZOLES KONTAKT

INDEX

ERHVERV

SKITSEREfter udarbejdelsen af flowcharten har jeg tegnet skitser ud fra kundens ønsker om indhold. Index siden blev dog lavet om under opsætningen, da kunden ønskede en ekstra sektion.

66

OVERBLIK // GRAFISK DESIGN

INDEX

OM ZOLES

FIND FORHANDLER

KONTAKT

FORHANDLER LOGIN


DESIGNPARAMETREG R A F I S K D E S I G N

DESIGNPARAMETREG R A F I S K D E S I G N

Fontvalg

Farvevalg

Form

Animation

Illustrationer

Komposition

AIDA


68

DE TO VALGTE FONTEFor at skabe kontrast og movement er der anvendt to slags fonte.

SNEAKERS SCRIPT Sneakers hører under skriftgruppen display typografi, da denne er med til at understrege en stemning. Det er en moderne font, som med dens udtryk både udviser bevægelse og balance, hvilket er med til at understøtte produktets funktion og værdier. Fonten indeholder runde former, som går godt i spænd med logoets facon og værdier.

ARIALTil brødteksten på hjemmesiden er der anvendt Arial, som hører under skriftgruppen grotesk. Denne font an-vendes kun på hjemmesiden, da kunden kun ønskede at betale for en font.

STØRRELSEH1 .......... 48pxH2 ........... 17pxp .............14px

DESIGNPARAMETRE // GRAFISK DESIGN


69

SKRIFTSNIT

KVALITETER

Sneakers Script Narrow

Realigned equestrian fez bewilders picky monarch

Sneakers Script Medium


Sneakers Script Wide


Sneakers Script UltraWide


Arial Regular


Arial Italic


Arial Bold


Arial Bold Italic


STABILITET

KVALITET

NYTÆNKNING

RUNDE FORMER

LET LÆSELIG

FANTASI

BALANCE

FREMDRIFT

BEVÆGELSE

STABILITET

ENGAGEMENT



70

PRIMÆR IDENTITETSFARVECMYK: 86. 35. 38. 20 RGB: 0. 111. 127 HEX: #1B6E7E

VÆRDIER• Natur

• Miljø

• Sundhed

• Beroligende

• Fornyelse

• Harmoni

• Vækst

• Afslappende farve

• Helbredende

• Velgørenhed

SEKUNDÆR IDENTITETSFARVECMYK: 78. 12. 40. 0 RGB: 0. 161. 161 HEX: #279f9f

VÆRDIER • Fred

• Ro

• Stilhed

• Balance

• Prestige

• Beroligende

• Kreativ

• Fantasi

KONTRAST IDENTITETSFARVECMYK: 44. 0. 75. 0 RGB: 164. 202. 97 HEX: #aecB68

VÆRDIER• Kommunikativ

• Miljø

• Glæde

• Balance

• Vækst

• Stabilitet

• Prestige

GRADIENTPRIMÆR CMYK: 44. 0. 75. 0 RGB: 164. 202. 97 HEX: #aecB68

SEKUNDÆRCMYK: 78. 12. 40. 0 RGB: 0. 161. 161 HEX: #279f9f

FARVEVALGVed fremstillingen af logoet foretog jeg mig en række far-vevalg for at afgøre, hvilke der gav den bedste kontrast, og samtidigt harmonerede. For at bevare den genken-delige stil og værdier fra designlinien og logoet, har jeg valgt at sætte hjemmesiden op i samme farvetema.



71

GRADIENT

NEUTRAL, SEKTIONSDELING

SEKUNDÆR FARVE

SEKUNDÆR FARVE

SEKUNDÆR FARVE

PRIMÆR FARVE

PRIMÆR FARVE

PRIMÆR FARVE

KONTRASTFARVE

KONTRASTFARVE

PROCES AF FARVEVALG



72

FORMHjemmesiden er bygget op i minimalistiske og moderne rektangulær forme, sektioner. Sektionerne forekom-mer vertikalt og understøtter designet fra brochuren. For at skabe en snært af kontrast til den kantede stil har jeg placeret en organisk formet footer.

WIREFRAMEDer er opbygget et wireframe udkast med InDesign i web mode.

Responsive headerbillede som tilpas-ser sig til de forskellige medie. Der er indsat et break point ved 768px. Her skifter billedet til en version uden tekst i baggrunden.

Sektion mål: 1220px x 732px Rubrik/h1: 48pxMellemrubrik/h2: 17pxP: 14pxRektangel indramning hvor formen går igen fra Zoles brochure.

Sektion mål: 1220px x 732px Rubrik/h1: 48pxMellemrubrik/h2: 17pxp: 14px

Sektion mål: 1220px x 615pxImg: 707px x 446px Mellemrubrik/h2: 17pxp: 14px

Zoles footer med den genkendelige form og farve

,

1220 PX

1900 PX/AUTO

IMG



73

ANIMATIONDer er anvendt to former for animation på hjemmesi-den. Den ene er hover på menu-linksene/øvrige links, og den anden er en pop-up animation.



74

RESPONSIVEJeg har sørget for hele mit layout er responsive. Jeg har indsat et breakpoint på 768px, hvilket svarer til en IPads størrelse. Her skifter baggrundsbilledet til et nyt , hvor der ikke forekommer tekst bagved kvinden.

1. Billedet som anvendes ved skærmopløsning på under 768px

2. Billedet som anvendes ved skærmopløsning på over 768px

1. 2.



75

ILLUSTRATIONHeader billedet er det gennemgående genkendelige bil-lede, som bliver anvendt i det meste af Zoles materiale. Kvinden er placeret i forgrunden med teksten i mellem-grunden og farven som baggrund. Der er et overlap, idet kvinden står foran teksten, dette giver rumvirkning i et billede. Samtidig er billedet dynamisk, idet vi opfanger bevægelse. Billedet er opbygget simpelt for at skabe større blikfang uden at forvirre modtageren.

Sålerne er Zoles egne 3D printede såler, som er blevet manipuleret og ændret til deres egne farver. Der er igen anvendt overlap for at skabe noget simpelt dynamik. Kompositionen sender energien opad og peger mod den ovenstående tekst samtidig med at den tager afsæt i den nedenstående tekst.

Footeren i bunden er inspireret af logoet og er anvendt for at skabe de bløde former og bevægelse. Samtidigt gengiver den de tre genkendelige farver, som anvendes i Zoles designlinie.


76


GESTALTLOVENELOVEN OM NÆRHEDFor at give brugeren en optimal oplevelse er det vigtigt, at vi bygger vores layout op i forhold til de ting, som hører sammen. Rubrikker og elementer forholder sig, så de får et tilhørsfohold til den tilhø-rende tekst.

LOVEN OM LUKKETHEDDe forskellige sektioner er inddelt i farver, som om-kredser indholdet. Dette medvirker til, at vi opfan-ger det som separate enheder.

LOVEN OM LIGHEDNavigation sidder oftest øverst på hjemmesider, og denne hjemmeside overholder dette princip og gi-ver dermed brugeren en hurtig og naturlig tilgang til navigation.

LOVEN OM FORBUNDETHEDNår elementerne er forbundet, hjælper vi brugeren ved hjælp af komposition, farver, elementer eller streger som forbinder tingene. På hjemmesiden er det anvendt ved hjælp af komposition fra sålerne i sidste sektion som binder forbundethed sammen med forrige sektion.



77

AIDAAttentionKvinden i midten som er placeret i diagonalaksen.

InterestIndividual fit that matters.

DesireJeg vil gerne kunne bevæge mig sådan.

ActionBrugeren scroller ned og læser mere om produktet.


78

PROCES // GRAFISK DESIGN

PROCESBESKRIVELSEHjemmesiden skulle være minimalistisk og var nem og enkel at gå til, da hele designlinien var bestemt på for-hånd fra vores side. Header billedet blev ændret under-vejs da kunden ønskede damen anvendt. Dog ønskede vi ikke selv pop-up animationen anvendt, men da kun-den ønskede dette, blev det til et kompromis.

KVALITETSKONTROLHjemmesiden har været vist til en del af det valgte seg-ment for at få et feedback. Dette har været for at sikre at hjemmesiden er logisk at tyde og navigere i samt at det valgte segment finder designet tiltalende.


79


KILL YOUR DARLINGS

KILL YOUR DARLINGS// GRAFISK DESIGN

Documents

GRAFISK DESIGN - sashmat.dksashmat.dk/wp-content/uploads/2017/06/grafisk-design-zoles-1.pdf · FLOWCHART For at arbejde mest struktureret og danne mig selv et overblik over hjemmesidens