Portfolio redesign Kia Dahlen cph-kd51@cphbusiness.dk 1. semester eksamen MUL-A 2013 www.mul17.itkn.dk/portfolio/index.html Underviserer: Ditlev Skanderby Frederik Tang Ian Wisler-Poulsen Jesper Hinchely Merete Geldermann Lützen Morten Rold Thomas Hartmann
Indholdsfortegnelse Portfolio redesign 1 Indholdsfortegnelse 2 Portfolio udvikling 3 Kommunikationsmodel 3 Projektplanlægning 3 Det gamle design 4 Gangster test 4 Kortsorterings test 5 Ny portfolio 6 Wireframe 6 Skitser 6 Informations arkitektur 10 Designprincipper 11 Farvevalg 11 Layout 12 Typografi 12 Gangster test af ny portfolio 12 2 af 13
Portfolio udvikling Hvad er en portfolio? En portfolio er en mappe, hvor man har alt hvad man har lavet. Hvis man var fotograf, ville man have sine billeder i mappen. Som multimediedesigner giver det mere mening, at have en online portfolio, da ens arbejde ofte er på nettet. Synlig for alle Hvad skal den bruges til? Den bruges til at vise det arbejde man har lavet og hvad man kan. Hvem skal se den? Som regel er det en potentiel arbejdsgiver/kunde. I dette tilfælde er det mine lærer. Men det kan også være familie og venner. Kommunikationsmodel Lasswell s formel. Afsenderen er i dette tilfælde mig. Formålet er at vise mine projekter, altså mine evner indenfor de forskellige områder. Mediet er internettet, det har den fordel at den er tilgængelig hele tiden. En portfolio som fysisk mappe kan kun beses når den medbringes. Modtageren er potentielle arbejdsgivere/kunder og mine lærere. Effekten skal være at få en fornemmelse af hvem jeg er og hvad jeg kan. Projektplanlægning Jeg har brugt Gantt kort til at planlægge mit projekt. Udbyttet ved brug af Gantt kortet, har været at give mig selv nogle delmål, som f.eks. at remake af gamle projekter skulle være færdigt den 3. december. Det giver også et overblik Who Says what In which channel 3 af 13 To whom With what effect Afsender Budskab Medie Modtager Effekt
Det gamle design Den originale portfolio er lavet i Wordpress. Det var mit første projekt på 1. semester. I Wordpress vælger man et tema, som bliver web sidens generelle opbygning, det kan man lave små justeringer på. Da jeg lavede Portfolioen var det ud fra hvad jeg synes var pænt/så godt ud, da vi ikke havde lært om Usability, Designprincipper osv. endnu. Gangster test 1 Her har jeg testet navigationen på min gamle portfolio. Gangster testen går ud på at, jeg vælger en underside til min testperson, og så stiller jeg disse spørgsmål: 1. Hvilket website befinder du dig på? 2. Hvilke overordnede sektioner findes der på sitet? 3. Hvilken underside befinder du dig på? 4. Hvilke muligheder har du på dette niveau? 5. Hvor er du i den samlede struktur? 6. Kan du søge? Derefter giver jeg hvert spørgsmål point ud fra hvor let eller svært det var for min testperson at finde svaret. Der gives point fra 0 til 3, hvor 3 er bedst. Den gamle Portfolio fik 17 point ud af 18. Derfor kan jeg konkludere at navigationen er i top. 1 Usability. Bog af Ian Wisler-Poulsen & Ole Gregersen. 4 af 13
Kortsorterings test 2 I en kortsorterings test, tester man om brugerne forstår de menupunkter der er. Den originale struktur: Testpersonerne vidste ikke hvad showcase betød. De havde også svært ved at placere Design & Visualisering, Interaktionsudvikling, Kommunikation og Virksomheden som hørte til under læring. Forside Projekter Showcase Læring Om mig Kontakt 1. semester Design & Visualisering Interaktions udvikling Profil CV Da jeg også selv ville have en bedre relation mellem projekter og læring, fjernede jeg titlerne under læring og ændrede det til 1. semester. Så nu kan man se alt hvad jeg har lært under 1. semester og til hvert enkelt projekt. Derudover ændrede jeg Showcase til Galleri, så alle menu punkterne er på dansk. Den nye struktur: Kommunikatio n & formidling Virksomheden Forside Projekter Galleri Læring Om mig Kontakt 1. semester 1. semester Profil CV 2 Usability. Bog af Ian Wisler-Poulsen & Ole Gregersen. 5 af 13
Ny portfolio Wireframe En wireframe er en skitse af hvordan jeg forestiller mig mit design skal se ud. Jeg forestiller mig at have 2 menuer, en hovedmenu og en undermenu. Skitser 6 af 13
Det første udkast til min nye portfolio, opbygget af an masse kasser, som udgør grundstrukturen i designet. Nu er alle firkanterne blevet hvide, og baggrunden er blevet grå, da jeg ikke ville have min portfolio til at fylde hele siden. Her har jeg tilføjet linjer for at skabe lukkethed. Så kan man se hvilke elementer der hører sammen. 7 af 13
Her prøvede jeg med violet, men det blev lidt for dunkelt. Jeg vil gerne have det simpelt, med uden at være kedeligt. Det her blev for kedeligt. 8 af 13
Jeg prøvede med symmetriske firkanter, men det blev for uoverskueligt og rodet. Asymmestriske firkanter blev ret godt, med jeg ville gerne have det mere simpelt. 9 af 13
Det færdige resultat. Elegant og simpelt med en viol i det gyldne snit. Informations arkitektur Strukturen og hierarkiet i min portfolio. Projekter Galleri Læring Om mig Kontakt HTML 1. semester 1. semester 4. projekt 3. projekt 2. projekt 1. projekt Edge- Animate Illutrator Photoshop Louisiana Malerier Forside 4. projekt 3. projekt 2. projekt 1. projekt 10 af 13 Profil CV
Designprincipper Jeg har brugt designprincipperne Linjer, Kontrast, Lukkethed, Nærhed og Enkelthed. 3 Jeg har brugt Linjer for at skabe orden og struktur på siden. Baggrunden er farvet grå og jeg har lavet en skygge effekt på siden, for at skabe kontrast. Kontrasten gør at siden bliver mere spændende at se på. Ved brug af de grå streger, har jeg brugt designprincippet Lukkethed. Det har jeg gjort for at skabe større relation mellem det indenfor stregerne end det har til det udenfor stregerne. I headeren har jeg brugt designprincippet Nærhed. Det har jeg gjort ved at placere hovedpunkterne i menuen tættere på hinanden end de er på overskriften. Enkelthed - websitet indeholder kun de nødvendige elementer. Farvevalg Hvid: Elegant, stilfuldt, sofistikeret, rent. Den violette viol: Violet er en sekundær farve. Violet stimulere intuition, fantasi, meditation, og kunstneriske kvaliteter derudover er violet kølig og afslappet samt giver en følelse af ensomhed. 4 3 20 Designprincipper. Bog af Ian Wisler-Poulsen. 4 4 colourtheory2013.ppt. Powerpoint. (undervisningsmateriale) 11 af 13
Layout Jeg ville gerne have det enkelt, simpelt og overskueligt. Citat: viol, symboliserer skønhed, beskedenhed og ydmyghed og er attribut for bl.a. Jomfru Maria og det lille Jesusbarn. En bly viol er en ung, blufærdig pige. En pige kan have violblå øjne. Farven violet betyder egentlig blå som en viol. 5 Violen er min ynglings blomst, men det er den nok mest fordi den er violet. Violen er placeret i det gyldne snit. Man finder det gyldne snit ved at dividere længden med 5, derved finder man 1 enhed. Den ganger man med 2, så man har 2 enheder. Der skal stregen tegnes. Ligeledes gør man med bredden. Det gyldne snit er der hvor linjerne mødes. Det er der øjnene først vil kigge. Typografi Derudover ville jeg gerne have den violette farve, da portfolio en skulle have et personligt præg. Skrifttypen Arial er installeret på; Mac: 98,74% Windows 99,84% Jeg har valgt at bruge skrifttypen Arial, fordi den er let læselig på en skærm. af alle computere. 6 Arial er en del af sans-serif familien. Hvilket betyder at den er uden fødder. Derudover er den mere nutidig og signalere om morderne værdier. 7 Gangster test af ny portfolio Gangster test på den nye portfolio, for at se om navigationen er lige så god som på den gamle portfolio. 1. Hvilket website befinder du dig på? 2. Hvilke overordnede sektioner findes der på sitet? 3. Hvilken underside befinder du dig på? 4. Hvilke muligheder har du på dette niveau? 5. Hvor er du i den samlede struktur? 6. Kan du søge? Igen gives der point fra 0 til 3, hvor 3 er bedst. 5 6 7 http://www.denstoredanske.dk/symbolleksikon/planter/viol http://cssfontstack.com http://www.nielsgamborg.dk/?p=typografi&u=skrifttyper 12 af 13
Den nye portfolio fik 15 ud af 18 points. Den fik 0 point i nr. 6 (søgefelt) og 3 point i resten. Søgefeltet mangler, ikke på grund af jeg ikke kan lave et, men fordi det ikke ville virke. Jeg har nemlig ikke lært at lave et fungerende søgefelt endnu. Resultatet af gangster testen er ikke lige så god som resultatet af den gamle portfolio, men så snart jeg lære at lave et fungerende søgefelt, vil resultatet sikkert være bedre. 13 af 13