OPGAVEBESKRIVELSE. Grafisk design process for Kolding Motion, logo, frontend hjemmeside samt t-shirt og skilt.

Transkript

1 01.

2 OPGAVEBESKRIVELSE Grafisk design process for Kolding Motion, logo, frontend hjemmeside samt t-shirt og skilt. OPGAVE Re-design Kolding Motions logo, nyt layout til deres hjemmeside samt kodning. Ny t-shirt design samt skilt. PROGRAMMER Adobe InDesign CC Adobe Illustrator CC Adobe DreamWeaver CC FORMAT: Responsiv px. Bred. BILLEDER Alle billeder er sat til 72 ppi. Og gemt til web. Jeg modtog billeder fra kunden, samt tekst. Jeg har brugt bootstrap til kodningen af hjemmesiden, da jeg vurdere at dette var den nemmeste løsning, for at gøre hjemmesiden responsiv. Bootstrap indeholde både HTML og CSS, derudover noget javascript. Bootstrap er delt op i 12-delt grid system, som gør at den automatisk bliver responsiv. OPGAVEBESKRIVELSE Jeg opdagede Kolding Motions hjemmeside ved et tilfælle, og synes at de tængte til et nyt design og logo. Jeg tog kontakt til dem, med skitser af et logo, wireframe af hjemmesiden og forklarede dem hvordan jeg synes den skulle se ud. Efter et par samtaler frem og tilbage og en godkendelse af logo design samt hjemmeside design, begyndte jeg med kodningen. Da det er blevet mere og mere udbredt at tjekke ting fra smartphonen eller tabletten, blev vi enig om at hjemmesiden skulle være responsiv, så den kunne fungere på et online platforme. KRAV - Brugervenlig. - Responsiv. - Indehold: Forside, information, køb t-shirt, kontigent (tilmeld), billeder, sider om træning, kontakt og log ind. - Passe til deres målgruppe. MÅLGRUPPE Kolding Motion har en meget bred målgruppe, da det egentlig er alle aldre der kan deltage. Men ud fra tidligere deltagelse, forklarede kunden at fleretallet er kvinder fra ca. 30 år og opefter. Men mænd deltager også. Derfor skulle hjemmesiden passe til den målgruppe først og fremmest, uden at udlukke andre. Layoutet skulle være mere brugervenlig, da også den lidt ældre aldresgruppe bruger hjemmesiden. Den skulle fungere på mobil, da mange gerne vil kunne logge ind på mobilen. Rød tråd og genkendlighed samt brugervenlighed, så brugerne let kan betjne hjemmesiden. SIMONE BØTTCHER GRAFISK DESIGN 3.

3 BRAINSTORM LOGO DESIGN Re-design af Kolding Motion logo. Re-design Kolding Motion logo. FONT Jeg valgte at bruge Bebas Neue til ordet Kolding og Unica One til ordet motion. Jeg designede logoet inde i illustrator, hvor jeg ændrede lidt i ordet motion. Ved M og N var der en lille spids, den valgte jeg at fjer ne for at gøre dem mere runde, som de andre bogstaver. Kolding Jeg vælger at bruge disse fonte uden serif fer, da jeg synes de passede godt sammen. De er begge groteske skrifttyper. Tilsammen er de læsevenlig, skaber en ro og balance. EFTER m FØR FARVEVALG Da stilen skal holdes ren og enkel valgte jeg at have fokus på en far ve, og der for gøre billeder ne sor te og hvide. (Bor tset fra Klub billeder ne, så kunder ne kan gemme dem i den rigtige far ve). Jeg valgte far ven rød, som symbolicere: Spænding, energi, lidenskab, hastighed, styrke, kraft, var me, kærlighed, intensitet. Hvilket jeg synes passer rigtig godt med det Kolding Motion vil udtr ykke. SKITSER Hvid og mørke grå, som sublerende far ver, men med fokus på den røde, skaber ro og balance. PR AGMATISK Kolding Kolding Motions kunder, er primær t det grønne segment. De er flest kvinder, de dyrker naturen, økologi og sundhed. De har også en fællesskabsfølelse, som også er en af de ting Kolding Motion ligger vægt på, det at være sammen om at løbe. IDEA LISTISK FÆRDIG LOGO MODERNE MINEVA MODELLEN Mineva modellen deler befolkningen op i fem værdi-segmenter. Hvor den blå,grønne,rosa og violette har de mest tydelige profiler. Mens den grå er et segment som indeholder lidt af hver t. TRADITIONEL 4. GRAFISK DESIGN SIMONE BØTTCHER SIMONE BØTTCHER GRAFISK DESIGN 5.

4 FLOWCHART Jeg har opbygget et flowchart, så jeg har overblik over mine sider og selve navigationen. WIREFRAME For at vise opbydning af hjemmesiden, har jeg lavt et wireframe, som viser side for side, og dens opbygning. 01. Forside 02. Information info.html information stylesheet.css jquery.min.js bootstrap.min.js bootstrap.min.css bootstrap-theme.min. css jquery.ui.slider.min. css log in / pop up tilmeld formular / pop up billede lightbox / pop up tshirt.html køb t-shirt kontigent.html tilmeld billeder.html billeder index.html forside 03. Købe t-shirt 04. Tilmeld 05. Billeder 06. Begyndertræning 2016 link til facebook begynder.html begynder træning marathon.html ræningsprogram til marathon jquery.ui.core.min. css kontakt.html kontakt jquery.ui.theme.min. css 6. GRAFISK DESIGN SIMONE BØTTCHER SIMONE BØTTCHER GRAFISK DESIGN 7.

5 07. Træningsprogram til marathon 08. Kontakt DESIGN Designprocess / Hjemmeside Jeg lavede først designet i Photoshop, så jeg havde mulighed for at sende et udkast til kunden om, hvordan jeg havde forestillet mig det skulle se ud. Det gjorde det også nemmere for mig, da jeg skulle i gang med at kode hjemmesiden, så jeg havde et udgangspunkt at gå ud fra. GESTALTLOVEN Loven om nærhed: Billederne står lige ud for hver tekst, så der ikke er tvivl om at tekst og billede hænger sammen. Loven om lighed: Hver siden har en rød tråd. Teksten er opstillet lidt forskelligt, men i hver sektion er teksten ens mht. fontvalg og størrelse. 09. Log ind Loven om lukkethed: Jeg har delt hjemmesiden op i sektioner og givet siderne en markering på den side brugeren er på, så er brugeren ikke i tvivl om, hvilket menupunkt der kigges på. GENKENDELIGHED Da det er det helt nyt hjemmeside design og logo, var det meget vigtigt at man kunne finde det samme ting og at opsætning mindede om det gamle design, for at der var noget genkendlighed for brugerne. Derfor var det også vigtigt at det er tydeligt hvilken hjemmeside brugeren er inde på når de åbner siden. Derfor er der en rødtråd, mellem deres nye logo, hjemmeside design og den t-shrt de kan bestille. Opsætning inde i Photoshop. 8. GRAFISK DESIGN SIMONE BØTTCHER SIMONE BØTTCHER GRAFISK DESIGN 9.

6 INDHOLD INDHOLD Kodning lavt i DreamWeaver. Kodning lavt i DreamWeaver. Jeg valgt at lave et slideshow. Det giver mulighed for at tilføje uendelige billeder, uden det skal fylde hjemmesiden helt op. Det giver brugeren en mere spændende oplevelse. RESPONSIV Hjemmesiden er kodet med Bootstrap, som gør at hjemmesiden bliver responsiv. Bootstrap er et værktøj som arbejde r med mobil first, så der for er det opdelt i 12 kolonner, så hverdan skær men blive r mindre følger indholdet med. Der for er det optimalt at bruge hvis man vil lave sin hjemmeside responsiv. B.la. bliver menuen gemt i en burger menu, når man kigger på en mindre skær m. Google Map er til for at give brugeren et hur tigt over den geografiske placering af Kolding Motion, derudover har jeg lavet en kontaktformular. Burger menu, set på en mobil enhed. Indhold på forsiden er delt op i 12 dele. Jeg skulle bruge 3 rows, så der for skulle hver row deles med 12. Det blev til 4 hver. Inde på tilmeld siden, har jeg opsat en pop op formular, ved at lave en form inde i html. Så kan brugeren tilmelde sig Kolding Motion Log ind pop up på hver side. 10. GRAFISK DESIGN SIMONE BØTTCH ER SIMONE BØTTCHER GRAFISK DESIGN 11.

7 MOCK UP - HJEMMESIDE Computer version af Kolding Motions hjemmeside. MOCK UP - MOBIL Mobil version af Kolding Motions hjemmeside. 12. GRAFISK DESIGN SIMONE BØTTCHER SIMONE BØTTCHER GRAFISK DESIGN 13.

8 T-SHIRT & SKILT DESIGN På hjemmesiden har man mulighed for at købe en t-shirt. Jeg har designet en, med deres nye logo på, samt et skilt.de. Kolding motion 14. GRAFISK DESIGN SIMONE BØTTCHER SIMONE BØTTCHER MEDIEGRAFIKER UDDANNELSE SVENDEPRØVE GRAFISK DESIGN

9