1. Semester afsluttende Projekt Charlotte Bruhn MUL A December Januar 2015

Størrelse: px

Starte visningen fra side:

Download "1. Semester afsluttende Projekt Charlotte Bruhn MUL A December Januar 2015"

Astrid Beck
7 år siden
Visninger:

1 1. Semester afsluttende Projekt Charlotte Bruhn MUL A December Januar 2015 Redesign af online portfolio Side 1

2 Indholdsfortegnelse Formål 3 Planlægning 4 Designvalg 5 Moodboard 6 Informationsarkitektur 7 Mockups 8 Wireframe 9 Konklusion 10 Bilag 1: Gantt Kort 11 Bilag 2: Logo Udvikling 12 Bilag 3: Hjemmeside Udvikling 13 Side 2

3 Formål Formålet med denne portfoilo er at præsentere, samt dokumentere mit faglige niveau og udvikling. Den vil også vise hvad jeg har arbejdet med og hvad jeg har lært. Udgangspunktet for projektet er at lave en komplet online portfolio, der kan opdateres efterhånden som vi arbejder os igennem multimediedesigner uddannelse. Så vi har et grundlæggende fundament at arbejde videre på, så vi nemt kan vise mulige arbejdsgivere. Side 3

4 Planlægning Jeg valgte at lave et Gantt kort over projektforløbet, til at hjælpe mig med at komme i gang tidligt i forløbet og undgå stress i slutningen. Jeg har haft en måned til dette projekt, jeg havde allerede en menu kodet, som jeg valgte at bruge. Så jeg har haft mulighed for at fokusere på selve designet af hjemmesiden længere tid end forventet. Jeg havde oprindeligt en buffer til slut, men valgte at bruge nogle af de dage til at holde fri omkring jul og nytår. Jeg har ikke haft noget stress undervejs og føler selv at jeg har overholdt mit Gantt kort nogenlunde. Se bilag 1 Side 4

5 Designvalg Farver Jeg startede med at vælge en grundfarve, som ville danne primær farve på min hjemmeside, her valgte jeg farven grøn. Da farven repræsenterer vækst og er afslappende der er behagelig at se på. Det er også en farve der inspirer mig til at være positiv, som er en egenskab, jeg gerne vil have at min hjemmeside udstråler. Derfor brugte jeg en lysere grøn (#429939) som min primær farve, til min menu og knapper. Sammen med den valgte jeg 2 nuancer af grøn, en lidt mørkere (#3D8A34), som jeg har brugt til at skabe kontrast i min menu. Sammen med en endnu mørkere grøn (#336633), som bliver brugt til hyperlinks. Jeg bruger også en lys grå (#E0E0E0) til baggrunds farven for hele <body>, dette var for at sikre at det grønne springer i øjnene og også at teksten på siden er nemt at læse. Selve hjemmesidens content har en endnu lysere grå (#ECECEC), denne farve har jeg skabt ved at have et png billede over den grå baggrund. Dette var for at jeg eventuelt kunne redigere png billedet senere for en baggrunds effekt. #3D8A34 # # #E0E0E0 #ECECEC Logo Mit Logo tager udgangspunkt i mine initialer (CB), da jeg som udgangspunkt ville vise hvem jeg er. På grund af formen et C har, kom ideen med at sætte et b i ind den, relativt hurtigt. Jeg afprøvede flere fonte før jeg kom frem til at bruge Segoe Script, da det ser meget håndtegnet og derfor hjælper med at bringe meget personligt til min side. Font Min primære font til teksten på min hjemmeside er Trebuchet MS, dette er en sans-serif font fra Microsoft, som er perfekt til at skabe god læselighed. Da den er fra Microsoft, findes den på de fleste Windows computere og programmer. Da min hjemmeside er en online portfoilo, er læselighed meget vigtig, da jeg har meget tekst på siden. Mine overskrifter er i Verdana, dette er en endnu en sans-serif font fra Microsoft, som jeg brugte til at få mine overskrifter til at skille sig ud fra brødteksten. Jeg valgte at have min menu tekst i Arial, da den i uppercase virker perfekt, til at give min menu et sterilt look og nemt at læse menupunkterne. Det er ligesom de andre også en sans-serif font, fra Microsoft. Side 5

6 Moodboard Da jeg gik i gang med mit projekt, lavede jeg et moodboard. Først startede jeg med at skrive alle de ord ned, som jeg ville have min online portfoilo til at være. F.eks. var nogle af de ord: - Simpel design - Grøn - Rene linjer - Tegnet ikoner Moodboardet hjalp mig med at finde det design og hvilket udtryk min online portfoilo udsender. Side 6

7 Informationsarkitektur Navigationen på siden er lavet meget simpelt. Øverst ligger forsiden, da det danner grundlaget for nye besøgene, samt giver et overblik over de nyeste opdateringer til hjemmesiden. Der er fra menuen genveje til alle de 3 primære sider, her er det kun projekter som har flere undersider. Projekter indeholder 1semester undersiden, som indeholder alle projekter, som alle har deres egen sider. Side 7

8 Mockups Header Øverest har jeg min header, som indeholder mit logo som er centreret på siden. Menu En simpel hovedmenu som er centreret lige under logoet. Content Midt på siden er min content boks, hvor alt information for hver underside befinder sig. Footer Nederst på siden sidder min footer, her er mit navn, copyright og de emner jeg arbejder med lokaliseret. Side 8

9 Wireframe Jeg lavede et enkelt wireframe, for at hjælpe med at beslutte, hvor interesse punkterne på min forside skulle være. Jeg ville ligge særlig vægt på at min boks med nyheder ligger synligt fremme, da hjemmesiden vil blive opdateret regelmæssigt. Side 9

Konklusion Formålet med projektet var at danne en god grund for en online portfolio, en hjemmeside hvor jeg har mulighed for at vise og dokumentere min vej gennem multimediedesigner uddannelsen.

10 Konklusion Formålet med projektet var at danne en god grund for en online portfolio, en hjemmeside hvor jeg har mulighed for at vise og dokumentere min vej gennem multimediedesigner uddannelsen. Med det i tankerne, synes jeg selv at jeg kom godt i mål. Min redesignede hjemmeside blev som jeg gerne ville have den, nemlig en overskuelig udstilling af mine erfaringer. Jeg er meget tilfreds med resultatet af dette projektets arbejdsgang og de valg jeg tog undervejs. Side 10

11 Bilag 1: Gantt Kort Side 11

12 Bilag 2: Logo Udvikling Side 12

13 Bilag 3: Hjemmeside Udvikling Side 13

Relaterede dokumenter

Portfolioudvikling. Line la Fontaine. Multimediedesigner

Portfolioudvikling. Line la Fontaine. Multimediedesigner Portfolioudvikling Line la Fontaine Multimediedesigner Indholdsfortegnelse - Designvalg s. 1-9 - Målgruppe s. 1 - Wireframes/skitser s. 1-5 - Informationsarkitektur s. 6-7 - Farver s. 8 - Typografi s.