EKSAMENS PROJEKT DECEMBER 2013 JANUAR Lærere: Thomas Hartmann. Jesper Hinchely. Ian Wisler-Poulsen. Morten Rold. Merete Geldermann Lu tzen

Transkript

1 Pia Jensen 1. semester eksamensprojekt MUL-A 2013 mul33.itkn.dk/eksamensprojekt/index.html EKSAMENS PROJEKT DECEMBER 2013 JANUAR 2014 Lærere: Thomas Hartmann Jesper Hinchely Ian Wisler-Poulsen Morten Rold Merete Geldermann Lu tzen Frederik Tang Ditlev Skanderby

2 INDHOLDSFORTEGNELSE Projektplanlægning 1 Min Wordpress portfolio 2 Gangster test 2 Min nye portfolio 4 Remake af website projekt 4 Remake af banner projekt 4 Remake af portfolio projekt 4 Wireframes 5 Skitser 8 Designprincipper 10 Farvevalg & typografi 11

3 PROJEKTPLANLÆGNING I dette projekt har jeg benyttet et Gantt kort, for at fa et overblik over, hvorna r de enkelte opgaver skulle være færdige. Jeg valgte, at disponere min tid sa ledes, at jeg havde et par dage til ra dighed til hver opgave, sa jeg selv kunne bestemme hvilke dage opgaverne blev løst, sa længe, at de blev det inden tidsfristen. Jeg na ede alle mine delma l, sa jeg er tilfreds! Nedenfor ses min informationsarkitektur, som viser strukturen og hierarkiet pa min nye portfolio. Side 1

4 MIN WORDPRESS PORTFOLIO Her ses min første online portfolio, som jeg lavede i Wordpress. Til forskel fra denne portfolio, sa er min nye portfolio ha ndkodet fra bunden med HTML/CSS. Min gamle Wordpress portfolio findes her: Min tanke med min første portfolio var, at den skulle holdes i de akromatiske farver, sa mine billeder blev mere iøjnefaldende. Jeg har valgt, at tage udgangspunkt i min gamle portfolio, dog med fa ændringer. GANGSTERTEST Jeg har foretaget en gangstertest af min gamle portfolio, for at teste, hvor god og brugbar navigationen er. Spørgsma lene, som der blev stillet, var: 1. Hvilket website befinder du dig pa? 2. Hvilke overordnede sektioner findes pa websitet? 3. Hvilken underside befinder du dig pa? 4. Hvilke muligheder har du pa dette niveau? 5. Hvor er du i den samlede struktur? 6. Kan du søge, og hvor kan du det? Side 2

5 Der gives point fra 0-3. Et website kan opna mellem 0 og 18 points, hvor 0 er et udtryk for, at navigationen er da rligt understøttet, og 18 er et udtryk for, at navigationen er meget tydelig og godt understøttet. Min gamle portfolio opna ede 14 ud af 18 points, hvilket var fint. Det, som jeg fandt ud af, ved at afholde denne gangstertest, var at der manglede en sti, sa man tydeligt kunne se hvor man befandt sig pa siden. Ud over det, var det heller ikke markeret tydeligt i menuen. Jeg valgte sa, at lave en tydelig markering i menuen pa min nye portfolio, samt en sti, sa man kunne finde ud af, hvor man befandt sig henne i den overordnede struktur. Resultatet ser her: Side 3

6 MIN NYE PORTFOLIO Design brief - Ide en med min nye portfolio var, at den skulle afspejle en del af min personlighed. Designet skulle være enkelt og struktureret. Der skulle ikke være for mange støjende elementer, og det skulle være nemt, at navigere rundt pa hjemmesiden. Min primære ma lgruppe er mine fremtidige kunder, som skal se, hvad jeg har, at byde pa. Jeg ville holde mit design i de akromatiske farver, sa det ikke virker for rodet eller barnligt. REMAKE AF WEBSITE PROJEKT Ud fra den feedback, som vi modtog i forbindelse med vores website projekt, sa har vi lavet et remake af vores hjemmeside. 1. Vores footer var førhen et billede, hvilket det ikke ma tte være. Her har jeg sa ha ndkodet vores footer. 2. Lærerne havde svært ved, at se hvor man befandt sig henne i den samlede struktur. Her har vi sa lavet en tydeligere markering i menuen. Dette skaber ogsa en kontrast, og gør det meget lettere for brugeren, at se hvor man befinder sig henne. 3. Vores forsides navn hed frontpage.html, hvilket den ikke ma tte. Her har vi sa ændret den til index.html. Vores website kan ses her: Side 4

7 REMAKE AF BANNER PROJEKT Ud fra den feedback, som vi modtog for vores banner projekt, sa har jeg lavet et remake af vores bannere. 1. Vores bannere havde ikke den samme visuelle stil, da to af bannerne var i sort/hvid, mens det sidste havde en bla baggrund fra en koncert. Her har jeg ændret det sidste banner, sa det ogsa holder sig i de sort/hvide farver, som er meget typisk for kunstneren. 2. Den sidste feedback var, at pa e t af vores bannere, kom vores kunstner op nedefra, hvilket kunne symbolisere, at han kom nede fra helvede af. Her ændrede jeg banneret, sa billedet stod stille, og teksten kom ind fra siden af, for stadig at skabe noget animation. Vores bannere og landingspage kan ses her: REMAKE AF PORTFOLIO PROJEKT Ud fra den feedback, som jeg modtog for mit portfolio projekt, sa har jeg lavet et remake af min portfolio. 1. Processen var ikke dokumenteret, og der var ikke nok om mine valg mht. design af min portfolio. Her har jeg sa uddybet mine valg mht. design, og skrevet om processen. Min Wordpress portfolio kan ses her: Side 5

8 WIREFRAMES Min nye portfolio er bygget op sa ledes, at logo, menu, indhold og footer er placeret inde i en wrapper. Nedenfor ses en skitse af mine wireframes. Side 6

9 SKITSER Mine skitser, som jeg lavede i starten af projektet, har jeg nogenlunde fulgt. Der har været nogle ændringer undervejs, men ellers har jeg beholdt min første tanke. Min første skitse med mine wireframes. Sa indsatte jeg mit logo, min menu og min footer. Side 7

10 17/ Sadan endte min portfolio med at se ud. Jeg har fulgt min tanke helt fra start, og jeg er godt tilfreds med resultatet. DESIGNPRINCIPPER Jeg har benyttet mig af designprincipperne nærhed, linjer, kontrast og enkelthed. Linjerne er benyttet, da det skaber mere struktur pa hjemmesiden. Side 8

11 Nærhed har jeg f.eks. brugt oppe i menuen, hvor menupunkterne er tæt pa hinanden, sa man fornemmer, at de hører sammen, f.eks. i forhold til overskriften. Jeg har skabt en kontrast mellem baggrundsbilledet, og den hvide baggrund, hvilket gør siden lidt mere indbydende, at se pa. Jeg har ogsa benyttet mig meget af enkelhed, da jeg kun har de mest nødvendige elementer pa hjemmesiden, for at undga støj og forvirring. Enkelthed symboliserer struktur og orden. FARVEVALG & TYPOGRAFI Jeg har valgt baggrunden og den hvide farve, fordi de giver en god harmoni. Jeg har holdt mig i de akromatiske farver, da de virker rolige, og passer til den følelse, som jeg gerne vil udtrykke. Derfor har jeg primært benyttet mig af de hvide, sorte og gra nuancer. Jeg har valgt, at holde min portfolio meget enkel. Mit fokus var pa, at den skulle være nem, at navigere rundt pa, hvilket ogsa er tilfældet. Jeg har taget udgangspunkt i min gamle portfolio, og rettet de ting, som der ikke var sa godt, ifølge den gangstertest, som jeg afholdte i starten af projektet. Jeg har valgt, at beholde en normal skrifttype, kaldet Exo 2, fordi det virker mere seriøst og giver et godt helhedsindtryk. Den er let læselig, og da man ikke ved hvilke kunder, som man fa r senere hen, sa er det godt, at have en skrifttype, som alle kan tyde. Side 9