01.
OPGAVEBESKRIVELSE
Grafisk design process for Kolding Motion,
logo, frontend hjemmeside samt t-shir t og skilt.
OPGAVE
Re-design Kolding Motions logo, nyt
layout til deres hjemmeside samt
kodning. Ny t-shir t design samt skilt.
PROGRAMMER
Adobe InDesign CC
Adobe Illustrator CC
Adobe DreamWeaver CC
FORMAT:
Responsiv. 1170 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 smar tphonen eller tabletten,
blev vi enig om at hjemmesiden skulle være responsiv, så den kunne f ungere på et
online platfor me.
KRAV
- Bruger venlig.
- Responsiv.
- Indehold: Forside, infor mation, køb t-shir t, 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å.
Der for skulle hjemmesiden passe til den målgruppe først og fremmest, uden at udlukke
andre. Layoutet skulle være mere bruger venlig, da også den lidt ældr e aldresgruppe
bruger hjemmesiden. Den skulle fungere på mobil, da mange ger ne vil kunne logge ind
på mobilen.
Rød tråd og genkendlighed samt bruger venlighed, så bruger ne let kan betjne
hjemmesiden.
SIMONE BØTTCHER | GRAFISK DESIGN 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.
FLOWCHART
WIREFRAME
Jeg har opbygget et flowchar t, så jeg har
overblik over mine sider og selve navigationen.
For at vise opbydning af hjemmesiden, har jeg lavt et
wireframe, som viser side for side, og dens opbygning.
i nf o .htm l
i nf o r m a ti o n
tshi r t.h tm l
k ø b t-sh i r t
in d e x . h t m l
f o r s id e
06. Begynder træning 2016
k o n t ig e n t . h t m l
t il m e l d
b il l e d e r. h t m l
b il l e d e r
jq u e r y. u i. s l id e r. m in .
css
b il l e d e l ig h t bo x
/ pop up
b o o t s t r a p - t h e m e . m in .
css
b o o t s t r a p . m i n. js
t il m e l d f o r m u l a r
/ pop up
l o g in
/ pop up
05. Billeder
l in k ti l f a c e b oo k
be g y n d e r. h tm l
be g y n d e r t r æ n i n g
m ar at h o n . h t m l
r æ n i n g sp r o gr a m ti l
m a ra t h on
j qu e r y. u i . c o r e . m i n .
c ss
04. Tilmeld
b o o tstr a p .m i n .c ss
03. Købe t-shir t
sty l esheet.css
02. Infor mation
jq u e r y. m in . js
k on ta kt . h t ml
k o n ta kt
j q u e r y. u i. th e me . mi n .
c ss
SIMONE BØTTCHER | GRAFISK DESIGN 7.
6. GRAFISK DESIGN | SIMONE BØTTCHER
01. Forside
DESIGN
07. Træningsprogram til marathon
08. Kontakt
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:
Billeder ne 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
sider ne 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 bruger ne. Der for var det også vigtigt at det er tydeligt hvilken
hjemmeside brugeren er inde på når de åbner siden. Der for er der en rødtråd, mellem
deres nye logo, hjemmeside design og den t-shr t de kan bestille.
Opsætning inde i Photoshop.
8. GRAFISK DESIGN | SIMONE BØTTCHER
SIMONE BØTTCHER | GRAFISK DESIGN 9.
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.
MOCK UP - HJEMMESIDE
MOCK UP - MOBIL
Computer version af
Kolding Motions hjemmeside.
Mobil version af
Kolding Motions hjemmeside.
12. GRAFISK DESIGN | SIMONE BØTTCHER
SIMONE BØTTCHER | GRAFISK DESIGN 13.
T-SHIRT & SKILT DESIGN
På hjemmesiden har man mulighed for at købe en t-shir t.
Jeg har designet en, med deres nye logo på, samt et skilt.de.
Kolding
motion
14. GRAFISK DESIGN | SIMONE BØTTCH ER
SIMONE BØTTCHER
MEDIEGRAFIKER UDDANNELSE
SVENDEPRØVE | GRAFISK DESIGN