PROJEKTET Udarbejdelse og idéudvikling af en fiktiv grafisk identitet til Puls Fitness. I denne kernefaglighed fremhæver jeg designet til websitet samt lidt merchandise. Derudover ses et udkast til bl.a. Instagram og en App. LAYOUT Indbydende, seriøs og inspirerende udtryk Brugervenlig, overskuelig, nem navigation Medlems login, hold booking og webshop Med på farten: sitet skal være responsivt samt der designes en app. Let at rette for kunden: CMS system med begrænsninger. De skal kunne ændre nyheder såsom nye hold eller instruktører, aflysninger, hold booking/ skema, links til facebook og instagram osv. men ikke layoutet. Sværhedsgrader og video ved holdbeskrivelser Kontakt oplysninger med link til facebook og instagram - der løbende bliver opdateret, bliver holdt konkurrencer, informeret om evt. aflysninger og rabat til fx kosttilskud. Brugere af centre ønsker nem og hurtig adgang til info, booking mm. IDEUDVIKLING - PROCESS FRA IDÉ TIL PRODUKT Her ses index og en holdbeskrivelse plano Inspirationssøgning samt ønsker fra kunde Moodboard Brainstorm Udarbejdelse af logo ( først skitser derefter Illustrator ) Udarbejdelse af flowchart Håndtegnede skitser Wireframe Layout i Photoshop - klar til at blive sliced Billede behandlet i Photoshop. Save for web : jpg og png filer Opsætning i Dreamweaver Upload via Filezilla til domæne Idégenerering til trykt materiale og merchandise
BRAINSTORM Jeg startede med at udvikle en brainstorm. Her skrev jeg alt hvad jeg kunne komme i tanke om, om og motion. Jeg lagde vægt på centerets mange muligheder for holdtræning, og viljen til at skabe et fællesskab for deres medlemmer - både mænd og kvinder. Brainstorm bruges til, at se grundlægge idéer og løse mulige udfordringer, men kan også bruges til inspiration. Generated by CamScanner from intsig.com MOODBOARD Med moodboardet arbejder jeg visuelt videre med min idé. Moodboardet hjælper mig med, at sætte billeder på det, jeg prøver at arbejde hen imod. Her kigger jeg meget på konkurrenter - og om de har fordele / ulemper jeg kan benytte / skal tage afstand fra. Det giver mig et hurtigt overblik af miljøet, fotostilen og hvilke modeller der kan bruges til et eventuelt photoshoot ved tøjssalg / merchandise. MÅLGRUPPEN Hvem taler du til? Hvad skal de vide? og hvad skal de føle? Målgruppen er i alderen 18 45. Oftest har de ikke mange forpligtelser, såsom børn, men går meget op i sig selv, maden de indtager og hvordan man opnår / bibeholder det sunde liv. Det moderne individorienterede / dynamiske segment, sin egen lykkes smed.
PULS f itness LOGO SKITSER Når tankerne omkring den grafiske identitet er udarbejdet, starter jeg på skitseringen af logoet. Jeg overvejer brugen af grafiske elementer som virkemidler til min målgruppe, men vender hele tiden tilbage til håndvægten da jeg mener, at den sammenslutter alt om på en rigtig god måde. Derudover kan denne bruges kreativt i mange sammenhænge som grafisk element. Jeg bruger hele tiden min brainstorm under processen for, at holde mig tæt på mine grundidéer. Derved ændrer jeg ikke stil undervejs og holder den røde tråd. PULS f itness Foco, Verdana og Corbel testes RENTEGNING OG FONTVALG Et par af skitserne arbejder jeg videre med i Illustrator. Puls må gerne stå stilrent, maskulint og med enkle bløde detaljer. Jeg vælger Foco hertil. Jeg laver små justeringer af den outlinede font i Illustrator bl.a. hvor det nederste af p ets overlængde mødes med stammen i x - højden. Jeg synes, at Verdana har en rigtig fin italic font, der passer til den kvindelige del af målgruppen. Jeg sammensætter Verdana og Corbel, da jeg godt kan lide det feminine f fra Corbel men itness bliver for meget. Verdana er klassisk sanserif font, men har samtidig også et moderne udseende. Puls skrives i majuskler, da det er primært. Fitness skrives i minuskler, da det er sekundært til beskueren. Jeg bruger Type touch tool til at rette graden på f et så det passer til Verdanas gradbøjning. FARVER Orange udstråler energi, balance, sundhed, ung, sjov og giver blikfang. Alle disse kerneord, der beskriver orange, passer godt på min målgruppe. Det giver et moderne og friskt udseende mod det sorte i logoet.
Index Shop Logo 120x69px Træning Medlemsskab Om Mit Puls Border 10px #FF8300 Facebook Træning Medlemsskab Om Mit Puls Instagram Beskrivelser Priser Trænings område Booking Banner 950x300px Holdplan Events kalender Nyheder i shoppen #PulsFitness på Instagram Nyheder Personlig Vejledning Kontakt Spinning Sport Poledance Boksning Footer med kontakt oplysninger Header & footer sort 95% Vægt hvid 10% 205x173px Flowchart, skitser og wireframe Generated by CamScanner from intsig.com Generated by CamScanner from intsig.com Generated by Cam
WEBSITET Sitet er opbygget med en bredde på 960 px, som er den mest anvendte opløsning, og dermed er sitet optimeret til de fleste skærme. Min målgruppe bruger mest af alt siden på mobile enheder, og derfor er den også tænkt responsiv. Der skal ydermere udvikles en app, hvor der kan bookes hold mm. Sitet skal stå side om side med deres Instagram og Facebook profil og skal derved sørge for, at brugeren føles som en del af et fællesskab. Sidens primære farve er sort og hvid, og den tertiær farve er logoets orange der anvendes for at give kontrast. Der anvendes et stort baggrundsbillede med en max - width på 100 % - herved sikres at billedet tilpasser sig enhver skærmstørrelse. Baggrundsbilledet varierer, men er altid i en træningssituation der kan motivere brugeren. OPBYGNING Layoutet er sat op i photoshop, hvor jeg bruger layer comps for at få hurtigt overblik. Tanken med websitet er, at den skal opsættes i et CMS system som fx Concrete5, Drupal eller lignende. Jeg synes, at det giver en rigtig god mulighed for centerets ansatte, til selv at rette og tilføje sider samt nyheder. Derved bliver det et dynamisk og ikke statisk site. BILLEDEFORMAT Billeder gemmer jeg som JPG eller PNG alt efter behov. De små ikoner til facebook og Instagram gemmes fx som PNG da jeg ikke ønsker et flattend billede, som giver mig en hvid baggrund. PNG giver muligheden for, at vise transparente billder. PNG er også bedre til skarpe kanter, i fx logoer, end JPG. FINISH Ved godkendt layout slices PSD en. Save for web, giver mig en mappe med slices alle i 72 ppi og RGB som er optimalt for web. Det er vigtigt med en god mappestruktur i rod mappen. Alle CSS, HTML og images bliver samlet hver for sig og index sitet ligges uden for. Alt navngives med minuskler, uden mellemrum og andre tegn. Dette gøres for at optimere browserens aflæsning af filerne og minimere fejl.
Her ses mockup af merchandise og reklameartikler