AFSENDER // VIRKSOMHEDEN GRAFISK DESIGN ZOLES

Transkript

1 AFSENDER // VIRKSOMHEDEN GRAFISK DESIGN ZOLES 61

2

3 BESKRIVELSE // GRAFISK DESIGN OPGAVEBESKRIVELSE Nyopsæ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. KUNDEKONTAKT Der har været korresponderet og samarbejdet med de to stiftere bag Zoles. OPGAVEANSVARLIG Opgaven er udført i samarbejde med en kollega. Vi har sammen haft ansvaret for alt markedsføringsmateriale. OPGAVENS VARIGHED To 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. PROGRAMVALG Hjemmesiden er bygget op i WordPress, mens wireframen er bygget op i indesign. Wordpress Selve hjemmesiden Photoshop Billedmateriale Illustrator Footer og pin 63

4 MÅLGRUPPEBESKRIVELSE GÆLDENDE FOR ALLE FIRE KERNEFAGLIGHEDER PREFLIGHT TEKST OG TYPOGRAFI

5 AFSENDER // VIRKSOMHEDEN AFSENDER Zoles er en lille, men ambitiøs virksomhed som fremstiller 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). KONSUMENTENHEDER SEGMENTER MÅLGRUPPE 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 ved anvendelse af deres unikke og komfortable 3D-såler. MISSION ZOLES mission er at skabe et service- og brugsprodukt baseret på nytænkning og de nyeste teknologier. Kunden 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 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 personer, som interesserer sig for sundhed og miljø i hverdagen. Zoles bestræber sig på at fremstille individuelt tilrettede såler, som kan forbedre livskvaliteten nu og her og kan afhjælpe gener forårsaget af fysiologiske ubalancer senere hen i livet. 4

6 MINERVAMODEL // VIRKSOMHEDEN MINERVAMODEL GRØN SEGMENT MODERNE Idealistisk og moderne Økologi og sundhed Dyrker naturen Går op i balance Miljøbevidst DEMOGRAFISKE FORHOLD Alder : MATERIALISTISK OG MODERNE 20 % MODERNE OG IDEALISTISK 60 % Indkomst : moderat indkomst og er villig til at ofre penge på sundhed Nationalitet : danskere Interesser : ergonomi, anatomi, krop og velvære Miljøorienteret MATERIALISTISK 10 % IDEALISTISK Bopæl : mest tendens til at bo i større byer TRADITIONEL OG MATERIALISTISK 5% IDEALISTISK OG TRADITIONEL 5% TRADITIONEL 5

7 HOVEDGREB // VIRKSOMHEDEN HOVEDGREB KOMMUNIKATIONSSTRATEGI DISTRIBUTION Jeg vil fremstille marketingsmateriale i form af en profilbrochure, header til hjemmeside, design af logo og firmanavn samt hjemmeside til profilering af Zoles over for målgruppen: Aktive personer med interresse for sundhed, aktivitet og miljø. Grønne segment. I udgangspunkt har jeg har valgt, at marketingsmaterialet 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 brochuren 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 interessen, 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 6

8 AFSENDER // VIRKSOMHEDEN HJEMMESIDE FORARBEJDE GRAFISK DESIGN PREFLIGHT TEKST OG TYPOGRAFI 111

9 RESEARCH AF KONKURRENTER// GRAFISK DESIGN 64

10 FLOWCHART OG SKITSER // GRAFISK DESIGN FLOWCHART For at arbejde mest struktureret og danne mig selv et overblik over hjemmesidens indholdssider har jeg udarbejdet et flowchart. INDEX OM ZOLES FIND FORHANDLER KONTAKT ERHVERV SKITSER Efter 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. 65

11 OVERBLIK // GRAFISK DESIGN INDEX OM ZOLES FIND FORHANDLER KONTAKT FORHANDLER LOGIN 66

12 DESIGNPARAMETRE GRAFISK DESIGN Fontvalg Farvevalg Form Animation Illustrationer Komposition AIDA

13 DESIGNPARAMETRE // GRAFISK DESIGN DE TO VALGTE FONTE For 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. ARIAL Til brødteksten på hjemmesiden er der anvendt Arial, som hører under skriftgruppen grotesk. Denne font anvendes kun på hjemmesiden, da kunden kun ønskede at betale for en font. STØRRELSE H px H2...17px p...14px 68

14 DESIGNPARAMETRE // GRAFISK DESIGN SKRIFTSNIT Arial Regular Realigned equestrian fez bewilders picky monarch Sneakers Script Narrow Realigned equestrian fez bewilders picky monarch Arial Italic Realigned equestrian fez bewilders picky monarch Sneakers Script Medium Realigned equestrian fez bewilders picky monarch Arial Bold Realigned equestrian fez bewilders picky monarch Sneakers Script Wide Realigned equestrian fez bewilders picky monarch Arial Bold Italic Realigned equestrian fez bewilders picky monarch Sneakers Script UltraWide Realigned equestrian fez bewilders picky monarch KVALITETER STABILITET KVALITET NYTÆNKNING RUNDE FORMER LET LÆSELIG FANTASI BALANCE FREMDRIFT BEVÆGELSE STABILITET ENGAGEMENT 69

15 DESIGNPARAMETRE // GRAFISK DESIGN FARVEVALG Ved fremstillingen af logoet foretog jeg mig en række farvevalg for at afgøre, hvilke der gav den bedste kontrast, og samtidigt harmonerede. For at bevare den genkendelige stil og værdier fra designlinien og logoet, har jeg valgt at sætte hjemmesiden op i samme farvetema. PRIMÆR IDENTITETSFARVE SEKUNDÆR IDENTITETSFARVE KONTRAST IDENTITETSFARVE GRADIENT PRIMÆR CMYK: RGB: HEX: #1B6E7E CMYK: RGB: HEX: #279f9f CMYK: RGB: HEX: #aecb68 CMYK: RGB: HEX: #aecb68 VÆRDIER VÆRDIER VÆRDIER SEKUNDÆR Natur Miljø Sundhed Fred Ro Stilhed Kommunikativ Miljø Glæde CMYK: RGB: HEX: #279f9f Beroligende Balance Balance Fornyelse Prestige Vækst Harmoni Beroligende Stabilitet Vækst Kreativ Prestige Afslappende farve Fantasi Helbredende Velgørenhed 70

16 DESIGNPARAMETRE // GRAFISK DESIGN PROCES AF FARVEVALG GRADIENT NEUTRAL, SEKTIONSDELING SEKUNDÆR FARVE PRIMÆR FARVE KONTRASTFARVE SEKUNDÆR FARVE PRIMÆR FARVE KONTRASTFARVE SEKUNDÆR FARVE PRIMÆR FARVE 71

17 DESIGNPARAMETRE // GRAFISK DESIGN FORM Hjemmesiden er bygget op i minimalistiske og moderne rektangulær forme, sektioner. Sektionerne forekommer 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. WIREFRAME Der er opbygget et wireframe udkast med InDesign i web mode PX 1900 PX/AUTO IMG Responsive headerbillede som tilpasser 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: 48px Mellemrubrik/h2: 17px P: 14px Rektangel indramning hvor formen går igen fra Zoles brochure. Sektion mål: 1220px x 732px Rubrik/h1: 48px Mellemrubrik/h2: 17px p: 14px, Sektion mål: 1220px x 615px Img: 707px x 446px Mellemrubrik/h2: 17px p: 14px Zoles footer med den genkendelige form og farve 72

18 DESIGNPARAMETRE // GRAFISK DESIGN ANIMATION Der er anvendt to former for animation på hjemmesiden. Den ene er hover på menu-linksene/øvrige links, og den anden er en pop-up animation. 73

19 DESIGNPARAMETRE // GRAFISK DESIGN RESPONSIVE Jeg 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 Billedet som anvendes ved skærmopløsning på under 768px 2. Billedet som anvendes ved skærmopløsning på over 768px 74

20 DESIGNPARAMETRE // GRAFISK DESIGN ILLUSTRATION Header billedet er det gennemgående genkendelige billede, som bliver anvendt i det meste af Zoles materiale. Kvinden er placeret i forgrunden med teksten i mellemgrunden 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. 75

21 DESIGNPARAMETRE // GRAFISK DESIGN GESTALTLOVENE LOVEN OM NÆRHED For 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 LUKKETHED De forskellige sektioner er inddelt i farver, som omkredser indholdet. Dette medvirker til, at vi opfanger det som separate enheder. LOVEN OM LIGHED Navigation sidder oftest øverst på hjemmesider, og denne hjemmeside overholder dette princip og giver dermed brugeren en hurtig og naturlig tilgang til navigation. LOVEN OM FORBUNDETHED Nå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. 76

22 DESIGNPARAMETRE // GRAFISK DESIGN AIDA Attention Kvinden i midten som er placeret i diagonalaksen. Interest Individual fit that matters. Desire Jeg vil gerne kunne bevæge mig sådan. Action Brugeren scroller ned og læser mere om produktet. 77

23 PROCES // GRAFISK DESIGN PROCESBESKRIVELSE Hjemmesiden skulle være minimalistisk og var nem og enkel at gå til, da hele designlinien var bestemt på forhånd fra vores side. Header billedet blev ændret undervejs da kunden ønskede damen anvendt. Dog ønskede vi ikke selv pop-up animationen anvendt, men da kunden ønskede dette, blev det til et kompromis. KVALITETSKONTROL Hjemmesiden har været vist til en del af det valgte segment 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. 78

24 KILL YOUR DARLINGS// GRAFISK DESIGN KILL YOUR DARLINGS 79