MARK KRISTENSEN.DK
Afsluttende projekt 1. sem Inledning I denne rapport kan du læse om den udviklingsproces, der ligger til grund for min nye portfolio, de metoder jeg har brugt, mine designvalg og designprincipper. Den nye portfolio er udviklet med udgangspunkt i den feedback, jeg modtog for min forrige portfolio. Af bemærkninger var at brødkrummestien ikke altid var tilgængelig, og at jeg skulle passe på med for mange anslag pr. linje. WBS Som det første led i planlægningsprocessen udarbejdede jeg en arbejdsnedbrydningsstruktur (WBS). En metode der på simpel vis opdeler projektet og dets opgaver i et hierarki, således at det bliver nemmere og mere overskueligt at planlægge organisere opgaver. Det har været en hjælpende faktor, og været med til at effektivere hele udviklingsprocessen. (se WBS på næste side) 1
1.0 Portfolio redesign 1.1 Projektdefinering 1.2 Layout og informationsarkitektur 1.3 Udvikling og test 1.4 Færdigudvikling 1.5 Indhold 1.1.1 Formål med opgaven 1.2.1 Informationsindsamling 1.2.2 Sitemap 1.2.3 Wireframing 1.3.1 Kodning 1.4.1 Færdigudvikling 1.5.1 Redesign/remake af forrige projekter 1.1.2 Tekniske krav 1.2.1.1 Design brief 1.3.2 Brugertest 1.4. 2 Kode-validering 1.5.2 Dokumentation af udviklingsproces 1.1.3 Målsætning 1.2.1.2 Moodboard 1.5.3 Refleksion over læring 1.2.1.3 Inspiration 1.2.1.4 Brainstorm / Mindmap 2
Design Brief Indledningsvis udarbejdede jeg et kort kreativt brief, for at fastslå nogle rammer ift. målet med sitet, funktionaliteten og stemningen, og for at gøre det lettest for mig selv at nå mine måsætninger. Kort introduktion Udarbejd et portfolio-site i HTML og CSS, der skal fungere som min tilstedeværelse på nettet og demonstrere mine evner og kompetencer for eventuelle kommende arbejdsgivere samt undervisere og studerende på Cphbusiness. På hjemmesiden skal det være nemt at tilgå samtlige projektforløb, jeg har haft, samt refleksion over min personlige udvikling og læring. Mål med sitet Brugervenlighed skal være i fokus, og det skal være let at navigere rundt på siden. Brødkrummestier skal være tilgængelige, når der er brug for dem, således at brugeren ikke er i tvivl om, hvor han befinder sig på siden. Ydermere skal det være muligt at kontakte mig via en kontaktformular. - En forside og minimum fire undersider (se sitemap) - Overskuelig navigation - Brødkrummesti når brugeren bevæger sig mere end én side ned i websitets hierarki. - Venligt visuelt indtryk. Mål med sitet Et brugervenligt og lettilgængeligt site med information om mig, mit arbejde og projekter på Cphbusiness, hvor refleksion over min læring/udvikling er præsenteret på overskuelig vis. 3
Målgruppe Kommende arbejdsgivere Portfolioen kan bruges i forbindelse med fremtidige jobansøgninger, hvor min potentielt kommende arbejdsgiver kan se det arbejde, som jeg har lavet. Nuværende eller kommende medstuderende Andre studerende eller kommende studerende kan hente inspiration eller motivation ved at kigge på min portfolio. Mig selv Portfolioen kan også bruges som selvevaluerende værktøj, når jeg i fremtiden kigger tilbage på min udvikling. Design Portfolioens design skal være inspireret af den flade designstil en hyppigt debatteret designfilosofi med minimalistiske træk. Designet skal helt være foruden, eller have minimal brug af skygger, teksturer, gradients eller andet grafik der skaber dimensionalitet. Idéen med fladt design kommer fra at fokusere mere på brugervenlighed og mindre på genkendelighed. Vi behøver ikke komplicerede visuelle objekter for at forstå, hvad det er vi kigger på, som man f.eks. ser det i designstilen skeuomorphism, hvor man forsøger at imitere objekter fra den fysiske verden. Skeuomorphism Til venstre ses et velkendt eksempel af skeuomorphism i Apples Newsstand app. Denne stil blev flittigt anvendt af Apple i ios5 og 6. 4
Visuelle referencer Som en del af mit brief har jeg har anvendt et moodboard til at lave en opsamling af designs, der med sine simple elementer, typografier og flade farver, giver den flade designstil sine kendetegn. Moodboardet skal bruges til inspiration, når layoutet skal designes senere i forløbet. 5
Forside Om Mig Kompetencer Læring Projekter Kontakt 1. Semester Sitemap Et sitemap kan være et effektivt redskab i udviklingsprocessen, når man skal udvikle en hjemmeside. Det er et planlægningsredskab der kan hjælpe med at organisere og tydeliggøre det indhold, som er vigtigt at få med på din side, og det der ikke er. Det kan være med til at sørge for, at du undgår at arbejde med overflødige sider, og det kan derfor spare tid. Mit sitemap viser tydeligt, at min hjemmeside kommer til at have en forholdsvis flad hierarkisk opbygning, da der ikke er mange undermenuer. En flad hierarkisk struktur er også at foretrække til denne type af hjemmeside, da en mere kompleks hierarkisk struktur ville komplicere informationsarkitekturen, og gøre det svære at finde den information, man leder efter. Projekt 1 Projekt 2 Projekt 3 Projekt 4 Projekt 5 6
Brainstorm Mindmap Til min brainstorming har jeg valgt at bruge et mindmap. Mindmaps er en af de bedste måder at dokumentere tanker og idéer på og samtidig præsentere dem i visuel form. Og det gør det til et fremragende redskab, når man skal lave en brainstorm, da mindmaps har mange fordele over traditionel note-skrivning. Vores hjerne tænker ikke lineært, men tanker udspringer fra andre tanker, og det er netop sådan, at mindmappet fungerer. Man starter med at dokumentere sine tanker og idéer, og derefter kan man tilføje flere grene, og spørge sig selv hvorfor eller hvordan. 7
8
Designvalg Farver Den gennemgående farve i designet er en lys nuance af blå, som er med til at give et livligt og tillidsfuldt indtryk. Den blå farve optræder første gang øverst på forsiden, bag ved den introducerende tekst. Det er dog vigtigt, at den blå farve ikke bliver overanvendt, da dette kan give et uønsket koldt indtryk. Tekst på siden er ikke sort, men derimod nuancer af grå. Den grå farve er valgt, da den giver et roligere indtryk end den sorte farve, der kan resultere i et hårdt og skarpt indtryk. Den grå farve giver en tydelig kontrast med websitets hvide baggrund, og har en dæmpende effekt på den ellers livlige blå farve. 9
Typografi Roboto Roboto er en sans-serif skrifttype udviklet af Christian Robertson hos Google. En populær skrifttype der med dens venlige og åbne kurver både bliver brugt til Google+, Google Play og Google Maps. Sans-serif stilen egner sig godt til skærmlæsning og til hjemmesidens flade designstil. Montserrat Til Mark Kristensen -logoet i hjemmesidens header og footer bruges skrifttypen, Montserrat, der også er frit tilgængelig, udviklet af Julieta Ulanovsky. Roboto er gratis, og findes i Google Fonts bibliotek. Regular AaBbCcDdEeFfGgHhLiJjKkLlMmN Bold AaBbCcDdEeFfGgHhLiJjKkLlMmN Medium AaBbCcDdEeFfGgHhLiJjKkLlMmN 10
Designprincipper Minimer spørgsmålstegn Mit mål har været, at designe en hjemmeside der er indlysende at bruge, uden at der kræves nærmere forklaring for hvordan den virker. Hjemmesiden er udviklet med udgangspunkt i at fjerne spørgsmålstegnene. Navigationen er logisk og intuitivt opbygget, for at gøre det tydeligt for brugeren, hvordan han kommer fra A til B. Hvis brugeren skal lede efter svaret, for at forstå hvordan hjemmesiden virker, opstår der unødvendige spørgsmålstegn, og informationsarkitekturen bliver dårligere. Dette sikres bl.a. ved hjælp af en menu, der forbliver i toppen af skærmen, selvom brugeren scroller på siden, således at brugeren altid ved, hvor han er, og hvordan han kommer tilbage. Læsevenlighed Som det er nævnt indledningsvis i denne rapport, modtog jeg den bemærkning til min forrige portfolio, at jeg skulle passe på med at have for mange anslag pr. linje. Dette skyldes, at for lange linjer kan have en negativ indflydelse på tekstens læsbarhed, når der er meget tekst. Det kan gøre det svære for brugeren at tilpasse synet til den næste linje, eller resultere i at brugeren helt skipper dele af teksten, hvis han bliver træt af at læse en lang horisontal linje. Hvor mange anslag pr. linje man højest må have, er et vidt debateret emne, men det er efterhånden blevet en best practice for mange designere at holde sig til omkring 75 anslag pr. linje (m. mellemrum). I min forberende research stødte jeg på en undersøgelse 1 lavet af Googles nuværende user experience researcher, Dawn Shaikh. I undersøgelsen blev det undersøgt hvordan studerende læste nyheder på en skærm med forskellige antal anslag pr. linje. De testede 35, 55, 75 og 95 anslag pr. linje, og resultaterne viste, at de studerende var hurtigst til at læse med 95 og langsomst med 35 anslag pr. linje. 1 http://psychology.wichita.edu/surl/usabilitynews/72/linelength.asp 11
Jeg har antaget at en lidt større mængde anslag pr. linje er acceptabel på moderne computerskræme med widescreen, eftersom undersøgelsen er fra 2005. Jeg har derfor valgt at skrive med 90-130 anslag pr. linje. Mht. til skriftstørrelse og linjehøjde har jeg bestræbet mig efter at finde en god balance, der sikre en læsevenlig tekst. Hvis linjehøjden er for lille, kan det gå ud over brugerens læsehastighed, og tilmed få brugeren til at genlæse linjer af tekst. En for stor linjehøjde kan derimod få teksten til at flyde væk, og gøre at den ikke længere føles som en sammenhængende enhed. oplever en vis konsistens i designets opsætning mht. baggrunde, farver og navigation, således at alle siderne får en fælles følelse/stemning. Men også at man støder på mønstre, som man vil kende i forvejen fra andre hjemmesider, så hjemmesiden bliver nemmere at bruge. Forudsigelighed og konsistens Et layout der er designet og sat op efter traditionelt webdesign med konventionelle standarder sikrer, at der skabes en vis grad af forudsigelighed for brugeren. Jeg har lagt vægt på, at man som bruger af min hjemmeside 12
Wireframes Wireframes er et vigtigt trin i udviklingsprocessen, når man skal designe en hjemmeside. Ved hjælp af tekst, kasser og andre simple grafiske elementer placeret i to-dimensionelle sorte og hvide diagrammer, er det muligt at definere layoutet og planlægge informationsstrukturen tidligt i udviklingsprocessen. Wireframes kan også bruges til at planlægge hjemmesidens informationsarkitektur uden at man blive forstyrret af farver og billeder. På følgende side kan du se mine wireframes sammenlignet med den endelig version af designet. 13
Forside Om mig 14
Kompetencer Læring 15
Projekter Projektside 16
Kontakt 17
Brugertest Til slut har jeg opstillet en brugertest, for at se om mine designprincipper har båret frugt, og om brugeren kan bruge websitet til at finde de informationer og løse de opgaver, som det er udviklet til. Til denne brugertest har jeg brugt to testpersoner. Den første testdeltager er en kvinde på 64 år, som ikke er vant til at anvende internettet. Den anden testdeltager er en ung mand på 21 år der både interesserer sig for teknologi, og som er vant til at surfe på internettet. Scenarie 1 Du har brug for at vide, om jeg har forstået læremålene i mit seneste projekt. Du vil derfor gerne finde den fulde opgavebeskrivelse for projektet, da du ved, at læremålene findes deri. Du skal nu finde og se opgavebeskrivelsen for det seneste projekt. Scenarie 2 Du er interesseret i at se, hvad jeg har lært i mit projekt om Wordpress Portfolio. Du skal derfor finde læringsdelen vedr. projektet, Wordpress Portfolio. Scenarie 3 Du er interesseret i at arbejde sammen med mig i dit næste projekt. I projektet skal du have hjælp til at udvikle en hjemmeside, og derfor er det relevant for dig at vide noget om mine kvalifikationer. Du skal finde ud af, om jeg er i stand til at arbejde med HTML og CSS. Resultater Resultaterne af denne brugertest vil blive præsenteret ved fremlæggelsen af dette projekt. 18
Lavet af Mark Kristensen