Portfolioudvikling I denne rapport vil du kunne læse om mit porfolios tilblivelse. Det skal give læseren indblik i mine designvalg og hele processen bag projektet. Hjemmesiden er kodet fra bunden i HTML og CSS og alle illustrationer på siden er udarbejdet af mig. 1
Indholdsfortegnelse Forside 1 Indholdsfortegnelse 2 Projektplanlægning 3 PBS 3 WBS 4 Ganttkort 1 4 Ganttkort 2 5 Brugertest af WordPress 6 Ekspertvurdering 6 Designvalg 7 Generelt 7 Farver 8 Skrifttyper 9 Redesigns 9 Projekt 1 9 Projekt 2 10 Projekt 3 10 Projekt 4 10 2
Projektplanlægning PBS Product Breakdown Structure Portfolio projekt Website Rapport Redesign HTML og CSS PBS Game Design Tekst WBS Informationsgrafik Illustrationer og billeder Ganttkort Website design Brugertest Designvalg 3
WBS Work Breakdown Structure Idé udvikling (2 dage) Brugertest (2 timer) Website design (3 uger) Rapport (1 uge) Validering (2 timer) Deadline d. 16/01-2015 Søg inspiration Ekspertvurdering HTML og CSS Designvalg Designvalg Tekst Ganttkort 2 WBS, PBS og Ganttkort 1 Illustrationer Logo Ganttkort 1 Ovenfor ses mit første ganttkort altså det jeg lavede inden jeg gik i gang med projektet. 4
Ganttkort 2 Selvfølgelig gik det hele ikke som først planlagt. Der opstod problemer undervejs i min kodning så min periode til website design blev forlænget en del. Derudover overlapper website design og rapportskrivningen hinanden. Dette skete da jeg arbejdede med begge dele i dette forløb, for at skabe lidt afveksling imellem skrivning og kodning. 5
Brugertest af WordPress Jeg valgte at lave en ekspertvurdering af mit tidligere portfolio. Dette gjorde jeg for at få en god idé om hvilke forbedringer som skulle laves på mit nye portfolio. Eksperten blev en medstuderende, som kiggede hele hjemmesiden igennem og kom frem til en række problemer og mulige løsninger. Da min WordPress side ikke er en særlig stor og omfattende hjemmeside havde selv eksperten svært ved at finde frem til fejl. Til gengæld fik jeg ros for forskellige ting på siden, som fx at det var meget nemt at navigerer rundt på siden og at man altid vidste hvor man befandt sig. Det valgte jeg så at tage med mig videre da jeg skulle lave mit redesign så det ville fungerer ligeså optimalt og give brugeren en ligeså god oplevelse som på min WordPress side. Nedestående ses de fejl der blev fundet frem til på min WordPress side. Det første problem jeg blev gjort opmærksom på var skrifttypen på min forside. Jeg blev gjort opmærksom på at især F et i ordet portfolio så meget specielt ud, og for at undgå misforståelser måske skulle ændres. Derfor har jeg i mit redesign af portfolio lagt stor vægt på at vælge letlæselige skrifttyper. 6
Derudover fik jeg fortalt at der var rigtig meget tekst på nogen af mine sider. Det ser uoverskueligt ud når man kigger på det, selvom jeg har prøvet at dele det op i mindre afsnit med overskrifter. Det er dog ikke rigtig lykkedes, da det hele smelter sammen til en stor masse. Derfor satte jeg i mit redesign fokus på at sætte teksten op på en mere overskuelig og interessant måde. Dette har jeg blandt andet gjort ved at bruge spalter, lave tydeligere overgange mellem afsnittene ved hjælp af farvede underoverskrifter og større mellemrum samt benyttet illustrationer. Designvalg Generelt Mit største fokus var at min hjemmeside skulle være simpel og let at navigere rundt på. Jeg havde rigtig mange forskellige idéer til designs da jeg først gik i gang, og søgte meget inspiration i andre portfolioer. Efter at have været vidt omkring kom jeg frem til at enkelthed simpelthen var mit hovedfokuspunkt. Dette hænger delvist sammen med at jeg ikke bryder mig om for mange forstyrrende elementer på hjemmesider, at jeg godt kan lide hjemmesider som er overskuelige 7
samt at mine evner i HTML og CSS er begrænsede og jeg derfor ikke ville kaste mig ud i mere end jeg kunne gabe over. For at gøre det så let for brugeren at navigerer rundt som muligt har jeg integreret en brødkrummesti. På den måde ved brugeren altid hvor de er på siden og hvordan de er havnet der, samt hvordan de let finder tilbage. Derudover har jeg på min side om læring valgt at lave en undermenu, som gør det let og overskueligt for brugeren at navigere rundt i de forskellige undersider. Jeg har både i mit logo, i mine illustrationer og på selve hjemmesiden benyttet mange runde former i stedet for skarpe kanter og linjer. Det bløder hele hjemmesiden op, og er med til at skabe den ønskede rolige, enkle og behagelige stemning jeg søgte. Farver #BDC79F #EAEFC9 #787878 Jeg vidste fra start af at min hjemmeside ikke skulle være klinisk hvid, som man ofte ser det nu om dage. Mit farvevalg på hjemmesiden er på mange måder atypisk. Det er ikke farver jeg har set på særlig mange andre hjemmesider, men igen hænger de sammen med mit fokuspunkt om enkelthed. Det skulle være farver som var behagelige for øjet og som ikke forstyrrede sidens budskab. På mit første portfolio havde jeg valgt blålige farver, da det passede til det billede jeg havde valgt på min forside. Da jeg ikke længere ønskede dette billede på min forside eksperimenterede jeg med nye farver, og prøvede mange forskellige farver af. Det vigtigste for mig var at det var en dæmpet og jordnær farve. Jeg endte med den meget karakteristiske grønne baggrundsfarve, da jeg var vild med den rustikke og rolige stemning den gav. Supplerende til den grønne farve har jeg valgt en beige til min wrappers bagrund, en grå til mine overskrifter samt sort til mine paragraffer. Den beige farve spiller godt sammen med den grønne og fastholder den stemning jeg ønskede på siden. Jeg valgte de grå overskrifter, da jeg synes det blev en for stor kontrast til de meget dæmpede farver på resten af min hjemmeside hvis de var 8
sorte. Derimod lod jeg stadig paragrafferne være med sorte, da det gør dem letlæselige og kontrasten ikke er ligeså stor på disse. Skrifttyper Arial Lucida Sans Unicode AR BLANCA Imprint MT Shadow Overstående ses de fire fonts jeg har benyttet I mit portfolio. Til brødteksten på min hjemmeside har jeg benyttet sans-serif skrifttypen Arial. En ofte brugt og meget almindelig font, som er let læselig på en computerskærm. Lucida Sans Unicode har jeg brugt til mine overskrifter samt til min menu. Til at begynde med havde jeg også valgt Arial til mine overskrifter, men da Arials overskrifter er meget fede og bombastiske valgte jeg at skifte skrifttypen. Lucida Sans Unicode som overskrift er mindre fed, men skrifttypen passer stadig fint til brødteksten skrevet med Arial. AR BLANCA og Imprint MT Shadow er begge benyttet i illustrationer og grafik på min hjemmeside. Skrifttyperne spiller godt op imod hinanden som henholdsvis Imprint MT Shadow, som er en serif font og AR BLANCA, som er en kursiv sans-serif font. Jeg valgte dem først og fremmest til mit logo og senere hen førte jeg dem videre til resten af illustrationerne på min hjemmeside. Skrifttyperne står meget i kontrast til hinanden da de er så forskellige, men denne kontrast synes jeg fungerer rigtig godt. Imprint MT Shadow ser meget hård og rustik ud alene, og den næsten håndskrift/skråskrift-agtige font AR BLANCA bløder det hele lidt op. Redesigns Projekt 1 WordPress Mit redesign af projekt 1 er mit nye portfolio (projekt 5). Da mit første portfolio var lavet i WordPress, og mit nye er kodet fra bunden i HTML og CSS er der stor forskel på de to. Jeg har valgt en helt ny opbygning og helt nye farver i mit nye portfolio, det eneste koncept jeg tog med fra mit gamle portfolio var rent faktisk at der skulle være stor fokus på enkelthed. 9
Projekt 2 Game Design I mit redesign af projekt 2 er den mest væsentlige ændring skrifttypen. Der var valgt en meget karakteristisk, men også meget forstyrrende skrifttype i det originale projekt. Den var svær at læse, især når der var store mængder tekst. Jeg har valgt at beholde den originale skrifttype i menuen og overskriften, da passer godt til spillets indhold og ikke er ligeså forstyrrende i små mængder tekst og ændret skrifttypen i brødteksten så den bliver mere overskuelig og letlæselig. Derudover har jeg valgt at give teksten en venstremargen, for at skabe mere plads og gøre det mere overskueligt. Projekt 3 Informations Grafik Den originale hjemmeside var ikke sat særlig pænt op. Tekst og illustrationer stod på en lang række ned ad siden, og dette er hvad der er blevet ændret i redesignet. Vi havde problemer med at få teksten frem når man klikkede på billederne hvis ikke den også stod på siden. Da vi har haft mere undervisning i jquery siden vi lavede projektet, fandt vi en løsning på problemet via dette, således at teksten først kommer frem når der trykkes på illustrationerne på siden. Dette gør at siden ser meget mere overskuelig og indbydende ud. Projekt 4 Website design Som kritik til dette projekt fik vi at vide at hjemmesiden var meget farveløs. Derfor valgte jeg at give siden en stadig neutral farve, men som gør den mere levende. Jeg ville meget gerne have ændret på logoet for at give endnu mere liv til siden, men da den studerende fra vores gruppe som har den originale illustrator fil ikke har svaret mig, har jeg ikke haft mulighed for at ændre dette. En anden kritik af dette projekt var at vi havde interne styles i vores HTML dokument. Derfor har jeg valgt at overføre dette til det eksterne stylesheet så det hele blev samlet på et sted og dermed blev mere overskueligt at læse igennem. 10