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. 9 - Brug af designprincipper s. 10-11 - Enkelthed s. 10 - Ensartethed s. 11 - Genkendelighed s. 11 - Brugertest s. 12-20 - Kortsortering s. 12-16 - Gangstertest s.17-19 - Resultat af gangstertest s. 20 - Konklusion af brugertests s. 20 - Redesign s. 21-22 - Website Design s. 21 - Infographics Design s. 22 - Game Design s. 22 - Planlægning s. 23-26 - PBS s. 23-24 - Gantt kort s. 25-26
Designvalg Målgruppe Da jeg designede min portfolio var min tanke, at den skulle virke som mit ansigt udadtil på nettet. Den er rettet mod potentielle praktikpladser, arbejdsgivere og ikke mindst de lærer, der skal bedømme den i min igangværende uddannelse. Wireframes/skitser fra designproces Portfolio Da jeg skulle starte med at designe min portfolio, gik jeg i gang med at tegne en skitse i hånden for at finde ud af hvordan min portfolio skulle se ud. Jeg tegnede en skitse for at det skulle blive nemmere for mig når jeg skulle begynde at kode. Nedenfor kan man se mine skitser. Min portfolio er blevet ændret lidt i forhold til mine skitser. Se wireframes/skitser på de følgende sider. Line la Fontaine Portfolio 2015 side 1
Skitse 1 er en skitse over hvordan jeg gerne ville have min forside skulle se ud. Ude i siden kan man se hvilke menupunkter jeg gerne ville have i min portfolio. Line la Fontaine Portfolio 2015 side 2
Skitse 2 er en skitse over hvordan jeg gerne ville have 1 af siderne skulle se ud. Line la Fontaine Portfolio 2015 side 3
Skitse 3 er en skitse over hvordan jeg gerne ville have 1 af siderne skulle se ud. Line la Fontaine Portfolio 2015 side 4
Logo Da jeg skulle designe mit logo, lavede jeg også skitser i hånden for at finde ud af hvordan mit logo skulle se ud. Jeg tegnede lidt forskelligt for at finde ud af hvilket jeg bedst kunne lide og som passede bedst til mit design. Jeg besluttede mig for et, og begyndte at arbejde videre med det i Illustrator, for at vælge skrifttype og farver. Logoet består kun af logotypes, som er skriften i logoet. Jeg har valgt den samme typografi som jeg bruger på resten af min side, Verdana, som er en Sans Serif skrift. Jeg har brugt den samme skrifttype fordi jeg gerne ville have logoet skulle passe til resten af mit design. Nedenunder kan man se mine logoskitser. Line la Fontaine Portfolio 2015 side 5
Informationsarkitektur Da jeg skulle finde ud af hvordan min informationsarkitektur skulle se ud, læste jeg grundigt opgavebeskrivelsen igennem får at se hvilke ting/elementer der skulle være med. Jeg tilføjede også selv nogle elementer som jeg synes var vigtige. Den globale navigation er hierarkisk. Alle siderne indeholder den globale navigation, for hele tiden at give et overblik over, hvor man er og mulighederne for at komme andre steder hen. Projektsiden og læringssiden har desuden deres egen lokalemenu. Projekterne er listet efter det nyeste øverst. Jeg vil gøre det samme med semestre, efterhånden som jeg kommer længere i min uddannelse. Se informationsarkitekturen på næste side. Line la Fontaine Portfolio 2015 side 6
Line la Fontaine Portfolio 2015 side 7
Farver Jeg har lige fra starten gerne ville holde mit design meget enkelt, men jeg ville også gerne have lidt farve ind. Jeg har derfor valgt at holde baggrunden i meget neutrale farver, hvid og lysegrå, og teksten i en mørkegrå farve, for at skabe lidt kontrast til den hvide baggrund. Da jeg skulle vælge hvilken farve jeg gerne ville have, kiggede jeg i en præsentation/oplæg vi havde fået og på nettet, hvad de forskellige farver symboliserer og betyder. Mit valg faldt på lilla, som symboliserer: kreativ, fremtid og fantasi. Jeg har valgt at bruge den lilla farve i mit logo og mine overskrifter. Jeg har valgt en lilla som jeg synes passer godt sammen med de grå farver. Da jeg skulle finde den lilla farve prøvede jeg mange forskellige nuancer, indtil jeg fandt den helt rigtige som passede til resten af mit design. Farvekoder: #EAEAEA: Den lysegrå som bruges til baggrund. #FFFFFF: Den hvide som bruges til baggrund. #7C7C7C: Den mørkegrå som bruges til tekst. #8a0ca8: Den lilla som bruges til logoet, overskrifter, ikon og knapper. #000000: Den sorte som bruges til logoet og ikon. Line la Fontaine Portfolio 2015 side 8
Typografi Jeg har valgt Verdana som typografi, fordi jeg ønsker en let læselig Sans Serif skrift, som jeg er sikker på funger godt i browserne. Da min skrift på hjemmesiden nogle steder er meget lille, virker det mest hensigtsmæssigt at vælge en Sans Serif skrift frem for en Serif skrift, da det ellers let kunne komme til at virket gnideret og måske i værste fald helt ulæseligt på skærmen. Jeg har valgt at alle mine overskrifter og min menu skal være i en bolde Verdana font, for at man lægger mere mærke til menu knapperne og overskrifterne før man lægger mærke til selve teksten. Line la Fontaine Portfolio 2015 side 9
Brug af designprincipper Under hele designprocessen af min portfolio, har jeg gjort brug af designprincipperne. De har fungeret som en slags retningslinje for selve grunddesignet. Nedenunder kan man se nogle af de designprincipper jeg har brugt, og hvordan de kommer til udtryk i min portfolio. Enkelthed Jeg har valgt at designe min portfolio meget enkelt, ved kun at have de mest nødvendige elementer med. Jeg har fx valgt at min undermenu kun skal være til stede på de sider hvor den kan bruges. Jeg har skåret unødvendige sider væk, fx når man klikker ind på læring, så kommer man direkte ind på den første underside, som er design og visualisering. I stedet for at man kommer inde på en side med nogle symboler/billeder hvor man så skal klikke sig ind på et af dem. Line la Fontaine Portfolio 2015 side 10
Ensartethed Mine menupunkter har samme størrelse, samme typografi og farve, de opfattes derfor som sammenhørende. Selvom min undermenu har mange af de samme karaktertræk som menu, opfattes de alligevel som en gruppe for sig selv, fordi de er mindre og er opdelt af streger mellem dem. Men fordi de også har nogle af de samme karaktertræk som menuen, vil de opfattes som en relation til menuen. Jeg har brugt de samme farver på alle mine side for at bevare ensarteheden gennem hele min portfolio. Genkendelighed Min portfolio er opbygget med en stærk ekstern genkendelighed, det kommer til udtryk ved placeringen af mit logo og menuen. Den stærke eksterne genkedelighed gør siden nem at navigere rundt på og øger brugervenligheden. Det giver en god intern genkendelighed, at jeg bruger de samme farver på elementer med samme funktion og på alle mine sider. Den interne genkedelighed er med til at give brugeren på hjemmesiden en god oplevelse. Line la Fontaine Portfolio 2015 side 11
Brugertest Det er en god ide at lave brugertests på eksisterende hjemmesider, for at se om de funger som man ønsker og om brugerne kan finde det de søger. Men det er også en god idé at lave brugertest allerede mens man er ved at designe en hjemmeside, for at se om fx den informationsarkitektur man havde tænkt, nu også funger for brugerne. Da der var en del problemer med at få adgang til min Wordpress portfolio, kunne jeg ikke lave en brugertest for at se hvad jeg skulle gøre anderledes i redesignet af min portfolio. Jeg har derfor valgt i stedet for at lave en brugertest af min redesignet portfolio, for at se om den funger for brugerne. Jeg har valgt at lave 2 brugertests: kortsortering og gangstertest. Kortsortering Jeg har valgt at lave kortsortering fordi den er enkelt og nem, og den giver et indblik i om strukturen virker på mit website/portfolio. Jeg har valgt at bruge to personer til testen, som ikke har så meget kendskab til multimediedesigner uddannelsen og hvad faget indebære, for at se om udefrakommende ville kunne forstår min struktur. Jeg valgte at lave den lukkede kortsortering på mine testpersoner. Line la Fontaine Portfolio 2015 side 12
Testpersoner Testperson 1: Mand 56 år. Tekniskmedarbejder. Testperson 2: Kvinde 57 år. Souschef i Københavns kommune. Testperson 1 valgte at ligge kortene på følgende måde: Line la Fontaine Portfolio 2015 side 13
Testperson 1 ville ligge undermenupunktet kommunikation og formidling under både home og læring. Men valgte at ligge kommunikation og formidling under home, fordi det kunne være at underpunkt på siden home, hvor man ønskede at kommunikerer/formidle noget til de besøgende. Grunden til personen ville ligge den under siden læring, var fordi personen tænkte det også kunne være et skolefag. Personen lage undermenupunktet virksomhed under kontakt fordi personen tænkte at det kunne være kontakter til virksomheder eller virksomheds kontakter til mig. Personen lage undermenupunkterne design og visualisering, og interaktion under læring, fordi personen tænkte det var skolefag. Personen lage undermenupunktet 1. semester under projekter, fordi personen tænkte at det var et projekt. Line la Fontaine Portfolio 2015 side 14
Testperson 2 valgte at ligge kortene på følgende måde: Line la Fontaine Portfolio 2015 side 15
Testperson 2 ville gerne ligge undermenupunktet design og visualisering under både projekter og læring. Men valgte at ligge den under projekter, fordi man kan se noget design og visualisering under projekter, på ting jeg har lavet. Grunden til personen ville ligge den under læring var fordi personen tænkte det er noget man lære/et skolefag. Personen ville også gerne ligge kommunikation og formidling under både kontakt og home. Men valgte at ligge den under kontakt, fordi personen tænkte at kommunikation og formidling ligger i ordet kontakt. Grunden til personen ville ligge den under home var fordi personen tænkte at kommunikation og formidling er noget som man gør på forsiden, og tænkte at home måtte være forsiden. Personen lage undermenupunktet 1. semester under om mig, fordi personen tænkte at det beskriver noget om mit 1. semester på skolen, altså noget om mig. Personen lage undermenupunktet virksomhed under projekter fordi personen tænkte at der har været noget samarbejdet med nogle virksomheder om nogle projekter. Personen lagde undermenupunktet interaktion under læring fordi personen tænkte at det er et skolefag. Line la Fontaine Portfolio 2015 side 16
Gangstertest Jeg har valgt at lave en gangstertest, fordi den kan hjælpe mig med at finde ud af om mit website/portfolio navigation er let eller svær for brugeren at forstå og bruge. Jeg har valgt at bruge de samme to personer som i kortsorteringstesten, for at se om udefrakommende ville kunne forstår min navigation. Testene kommer på de følgende sider. Line la Fontaine Portfolio 2015 side 17
Testperson 1 svaret følgende: 1. Hvilket website befinder du dig på? Line la Fontaines hjemmeside 2. Hvilke overordnede sektioner findes der på websitet? Home Om mig Projekter Læring - Kontakt. 3. Hvilken underside befinder du dig på? Virksomhed 4. Hvilke muligheder har du på dette niveau/hvilke undersider findes på samme niveau? Design og visualisering, Interaktion, Kommunikation og formidling. 5. Hvor er du i den samlede struktur/hvordan er du kommet hertil? Læring Virksomhed. 6. Kan du søge, og hvor kan du det? Nej. Line la Fontaine Portfolio 2015 side 18
Testperson 2 svaret følgende: 1. Hvilket website befinder du dig på? Line la Fontaine multimediedesigner. 2. Hvilke overordnede sektioner findes der på websitet? Home Om mig Projekter Læring - Kontakt. 3. Hvilken underside befinder du dig på? Virksomhed 4. Hvilke muligheder har du på dette niveau/hvilke undersider findes på samme niveau? Design og visualisering, Interaktion, Kommunikation og formidling. 5. Hvor er du i den samlede struktur/hvordan er du kommet hertil? Læring Virksomhed. 6. Kan du søge, og hvor kan du det? Nej. Line la Fontaine Portfolio 2015 side 19
Resultat af gangstertest I første test scorede mit website/portfolio 15 point. Testpersonen havde hurtigt og nemt ved at finde tingene og hvert punkt score 3 point, undtagen det sidste punkt søgefunktionen, den score 0 point, fordi der ikke findes en søgefunktion på websitet/portfolioen. I den anden test scorede mit website/portfolio også 15 point. Testpersonen havde også her hurtigt og nemt ved at finde tingene og hvert punkt score 3 point, undtagen det sidste punkt søgefunktionen, den score 0 point, fordi der ikke findes en søgefunktion på websitet/portfolioen. Konklusion af brugertests Ud fra min kortsorterings kan jeg se at nogle af mine undermenupunkter kan være svære at forstå hvis man ikke kender til uddannelsen/faget. Men når jeg så kigger på min gangstertest som er lavet med de samme testpersoner, kan jeg så se at de sagtens kan finde rundt i strukturen og navigationen. Jeg har derfor ikke valgt at lave om i min struktur, selvom min kortsortering godt kunne indiker at jeg skulle lave lidt om på den. Min konklusion er at selvom man ikke kender til uddannelsen/faget så kan man sagtens finde rundt og forstå mit website/portfolio. Line la Fontaine Portfolio 2015 side 20
Redesigns Jeg har været inde og læse feedbacken på alle projekterne inden jeg gik i gang med redesignprocessen. Rettelserne er dels fra feedbacken men det er også ting jeg selv synes skulle ændres. Nedeunder har jeg skrevet om hvert projekt. Website Design I website design projektet har jeg ændret tekstboksene så de passer i længden til billederne på forsiden, så det ikke så, så rodet ud. På om os siden har jeg ændret tekstboksene så de ikke var så lange, og man bedre kunne fornemme opdelingen af afsnittene. Under program og tilmelding har jeg gjort sådan at listen med programmet og afkrydsningsformularen flugter med overskriften i venstre siden, så der kommer lidt mere struktur på siderne. Jeg har rykket send knappen lidt op på kontakt siden, da jeg synes den næsten sad uden for skærmen. Jeg har også fået tilpasset siden så den passer lidt bedre i bunden af siden, hvor man før ikke kunne se afslutningen på den hvide boks. Line la Fontaine Portfolio 2015 side 21
Infographics Design I infographics design projektet har jeg ændret logoet, så B et og P et ikke længer hænger sammen, så man ikke længer kommer til at sige blastics, men i stedet for JB plastics. Jeg har også været inde og rette i kasserne i logoet, da specielt den ene kasse ikke helt passede nogle steder. Så nu skulle logoet gerne funger meget bedre. Jeg har skiftet det gamle logo ud med det nye logo på rapporten, visitkortet, brevpapiret og PowerPoint templaten. Game Design I game design projektet har jeg rettet bredden af siden, så spillet kunne være der helt. Jeg har også gjort sådan, at man kan se hvilken side man er på, da det jo er meget rart at vide hvilken af de 3 sider man er inde på. Jeg har også ændret lidt på tekst boksene, så de er i midten ligesom resten af designet. Herudover har jeg gjort sætningerne kortere, da det godt kan virke uoverskueligt, hvis sætningerne er for lange på en hjemmeside. I samme forbindelse har jeg også været inde og kigge lidt på mellemrummene mellem de forskellige afsnit, så det er blevet lettere at læse og finde ud af hvad der hører sammen. Line la Fontaine Portfolio 2015 side 22
Planlægning PBS Det første i processen mod en færdig redesignet portfolio, var at lave en Product Breakdown Structure, for at få et overblik over hvad der skulle laves. Den har været god at kigge på undervejs i forløbet. Se PBS på næste side. Line la Fontaine Portfolio 2015 side 23
Line la Fontaine Portfolio 2015 side 24
Gantt kort Nedenunder ses mit gantt kort med det planlagte arbejde og det reelle arbejde gennem projektet. De lilla barer er det planlagte arbejde og de grå barer er der hvor min tidsplan ikke har holdt. Se gantt kort på næste side. Line la Fontaine Portfolio 2015 side 25
Line la Fontaine Portfolio 2015 side 26