Indledning Mit sidste projekt her på 1.semester gik ud på at jeg skulle lave et redesign af mit første portfolio, som jeg lavede i starten af semesteret. Formålet var at vise hvad jeg havde lært siden det første portfolio, som jeg lavede i et CMS-system, og til nu hvor jeg har skulle kode hele hjemmesiden fra bunden. Formålet var også at kunne præsentere og dokumentere mit faglige niveau samt vise min udvikling. Det afsluttende projekt havde to fokusområder: - Redesign af det nuværende portfolio - Opdatering af portfoliens indhold Jeg skulle desuden også have fokus på følgende: - Portfolioudvikling - Dokumentation af tidligere projekter - Remake af tidligere projekter - Refleksioner over min læring Et krav til portfolien var at det skulle udvikles fra bunden uden brug af CSS-frameworks, samt HTML og CSS skulle valideres uden fejl. Mit portfolios målgruppe er primært mine undervisere og potentielle arbejdsgivere. Denne rapport vil vise hele min arbejdsprocess, og de tanker jeg har gjort mig.
Det første jeg startede med at lave var en PBS, der viser i hvilken rækkefølge jeg havde tænkt mig at klare opgaverne.
Brugertest af mit wordpress portfolio Jeg havde til opgave at lave en brugertest af mit wordpress portfolio for at finde eventuelle fejl og forbedringer. Jeg valgte at lave en gangstertest, som er en god og nem måde at teste ens websites informationsstruktur. Kort fortalt består det af: - Den samlede struktur: Den sammenhæng, der udgør websitets struktur, for eksempel hierarkier, niveauer og grupperinger. - Værktøjer til at bevæge sig rundt i strukturen: For eksempel navigation (menuer) og sitemap. - Navngivning og sprog: Det, der står på knapper, overskrifter og andre hjælpemidler til indholdet. - Søgning: Opbygning og funktion af websitets søgemaskine 1 Testen er med til at sikre, at brugeren kan navigere rundt i strukturen, og forstår menuerne og overskrifterne på websitet. Der gives point fra 1-3 og man kan max score 18 point. Jeg placerede min testdeltager under læring - projekt 1 og stillede ham følgende spørgsmål: 1. Hvilket website befinder du dig på? 3 point 2. Hvilke overordnede sektioner findes på websitet? 2 point 3. Hvilken underside befinder du dig på? 0 point 4. hvilke muligheder har du på dette niveau? 1 point 5. Hvor er du i den samlede struktur? 0 point 6. Hvor kan du søge? 3 point = 9 point 1 Usability - testmetoder til mere brugervenlige websites på internettet - side 43
Konklusion af gangstertesten Mit wordpress portfolio er jo ikke en hjemmeside med masser af indhold og mange undersider, så det behøver ikke at score 18 point for at være godt struktureret. Jeg vidste dog godt at der var nogle ting, der kunne forbedres, og bagefter testen fik min testdeltager og jeg, en snak om det. Jeg kunne konkludere at strukturen ikke var helt i top, da det var svært at se hvilken underside man befandt sig på, og ikke helt indlysende hvordan man kommer tilbage til læringsfanen når man har læst om et projekt. Min testdetalger kom også ind på at min fane gøgl måske ikke var helt passende og seriøst nok, da selve siden skal vise mit selvstændige arbejde.
Moodboard
Wireframe - Forside
Wireframe - projektside
Mockup Her har jeg kodet forsiden, som jeg havde tænkt det skulle være. Det ligner stort set slutproduktet bortset fra at jeg har fjernet logoet, og ændret i designet.
Layout, struktur og design Før projektet blev skudt i gang, havde jeg gjort mig end del tanker om hvordan jeg gerne ville have mit nye portfolio skulle se ud og fungere. Som du kan se på mit moodboard ville jeg bruge sort og hvid, som de grundlæggende farver, fordi de giver en god kontrast til hinanden, som også er forbundet med noget pænt, ordentligt og lækkert. Jeg brugte også en rød farve til at vise hvilket semester man er placeret på, da rød symboliserer energi, lidenskab og passion, hvilket gerne skulle fremgå når man læser om min projekter på de forskellige semestre. Header og footer: CMYK (50%, 41%, 44%, 45%) RGB (71, 71, 71) HEX (#474747) Infobox og portrait - forside: CMYK (7%, 5%, 5%, 0%) RGB (227, 227, 227) HEX (#E3E3E3) Semester-farve: CMYK (7%, 97%, 99%, 1%) RGB (197, 45, 45) HEX (#C52D2D) Baggrundsfarven til indholdet: CMYK (1%, 0%, 0%, 0%) RGB (252, 252, 252) HEX (#FCFCFC) Jeg brugte en lidt mere grålig hvid til baggrunden på indholdssiderne for at gøre det mere behageligt for øjnene.
Som person er jeg meget struktureret, så derfor skulle mit portfolio være ligeså. Mit mål var at gøre hjemmesiden brugervenlig, så man nemt kan finde rundt. Jeg har også valgt at bruge mange billeder, da det visuelle er en hurtig måde at fortælle en historie i stedet for en masse tekst. Jeg fik desuden noget kritik på mit wordpress portfolio om at strukturen ikke var logisk nok, hvilket jeg har prøvet at rette op på. Navigation: Min navigationsmenu ligner meget den gamle bortset fra et par enkelte ting. Med brugertesten i baghovedet, så valgte jeg at ændre gøgl til arbejde. Jeg har også gjort så man kan se hvilken side man er på, og gjort det lettere at komme tilbage til sit forrige standpunkt ved hjælp af arrows, som man kan trykke på. Forside: På forsiden ville jeg gerne give et hurtigt indblik i hvem jeg er, og hvad mit mål er med min uddannelse. Jeg satte derfor et billede ind af mig selv, og skrev noget information med relevans til min uddannelse. Jeg syntes også at det var vigtigt, at man kunne se det seneste projekt, og en opsummering af mine kompetencer, som gør det let at se hvad jeg kan, frem for at skrive om det. Læring-side: Som man kan se på mit wireframe, så ville jeg gerne have at man kunne vælge imellem de forskellige semestre, og se de projekter der hører til. Jeg har igen lagt vægt på det visuelle, så hvert projekt viser selve produktet eller noget der er relevant for projektet. Typografi: Jeg ville gerne bruge en web safe font samt en god sans-serif font, så valget faldt på klassikeren helvetica. Den er let at læse på skærm, og findes på de fleste computere.
Reflektion Hvad har jeg lært under forløbet? Overblik og struktur er nøglen til succes. Planlægning har aldrig været min stærke side når det kommer til projekter, men ved at dele alle opgaverne op, så har man et bedre overblik over hvad man skal nå. Normalt ville jeg have gået i gang med at kode hjemmesiden fra begyndelsen, men ved at planlægge det hele først, så har jeg højst sansynligt sparet en masse tid. Min PBS holdte dog ikke helt stik, da der blev byttet lidt rundt i opgaverne, men den gav mig et godt overblik. Hvordan hænger det sammen med mit forhåndskendskab til emnet og denne opgavetype? Det forrige projekt handlede også om at kode et website, så det har hjulpet mig at have prøvet det en gang før. Det her projekt har dog været meget mere omfattende, men det har været en god udfordring, som jeg har set frem til siden starten af semesteret. Hvad forventede jeg at lære? Jeg forventede at få mere styr på selve kodningen af et website, og dermed selv kunne skabe strukturen. Da jeg lavede mit wordpress portfolio, så følte jeg mig for fanget i det tema jeg havde valgt, så havde svært ved at lave det som jeg gerne ville have det. Jeg kunne dog heller ikke så meget dengang. Jeg er desuden også glad for at optimere og manipulere med billeder i photoshop, så det har været sjovt at bruge en masse tid på det, da jeg har brugt en del billeder på min hjemmeside. Hvad har jeg mere brug for at lære? Da det er kodning som jeg finder spændende, så er det lidt ærgerligt at jeg ikke har mere styr på jquery og Javascript. Jeg var i en længere periode uden computer pga. noget reparation, så det var lidt svært at få følge med i timerne med kodning, men jeg vil gøre alt for at få styr på det de kommende semestre. Ud over det, så vil jeg arbejde videre på at blive bedre til det grafiske. Hvad vil jeg foretage mig for at komme til lære dette? Jeg synes selv at jeg generelt har fulgt godt med i undervisningen, så det vil jeg fortsætte med. Jeg vil også prøve at være så flittig og aktiv i projektarbejdet som muligt, så jeg ikke går glip af noget.
Konklusion Dette projekt har været en heftig omgang og en tidsrøver. Jeg har taget mig selv i at bruge flere timer på at rette små fejl for at gøre det så perfekt som muligt. Det endelige resultat er jeg godt tilfreds med, og det er næsten ligesom jeg havde forestillet mig. Jeg havde oprindeligt tænkt mig at lave et logo på min side, men jeg besluttede at der ikke var behov for det, fordi jeg kunne godt lide at min header ikke var så høj. Jeg havde fra start en idé om hvordan jeg ville lave mit portfolio, og havde suget så mange guldkorn til mig fra undervisningen som muligt, så jeg var ved godt mod da jeg gik i gang. At jeg planlagde mit projektforløb har også været en væsentlig faktor, som har hjulpet mig med at nå i mål til tiden med en god mavefornemmelse. Da jeg startede med at kode min hjemmeside, så brugte jeg noget jquery fra undervisning til min image slider på forsiden, men jeg var aldrig rigtig tilfreds med den, fordi det så ikke godt ud når den slidede. Det var dog en lettelse at man nemt kunne lave en image fader som jeg har kaldt den i min HTML, der kunne lave en glidende transition med fade effect i Edge Animate. Alt i alt føler jeg at mine evner indenfor kodning og billedoptimering er blevet betydeligt bedre, og jeg ser frem til at lære mere på 2. semester. Jeg kan huske da jeg startede, så virkede det som noget af en bedrift at skulle kode en hel hjemmeside fra bunden med indhold, men nu har jeg klaret det og jeg føler mig lidt stolt.