PORTFOLIO SEBASTIAN NYHOLM. Eksamensprojekt. 1. Semester

Transkript

1 PORTFOLIO SEBASTIAN NYHOLM Eksamensprojekt 1. Semester

2 Indledning Dette projekt gik ud på at designe og udvikle sit eget portfolio, hvor indhold fra tidligere projekter, læring, brugerteste og begrundelse for valg og udførsel blev vægtet højt. En vigtig del i projektet var også, at portfolioen skulle skrives fra bunden, uden nogen form for CMS systemer eller Frameworks i baggrunden. Indholdsfortegnelse 1. Målgruppe 2. Design 2.1 Photoshop 2.2 Onepage 2.3 Gridsystem - 960px med 12 kolonner 2.4 Less is more & Keep it simple stupid 2.5 Designprincipper 2.6 Farver 2.7 Fonts 2.8 Genkendelighed 2.9 Navigering 3. Udvikling 3.1 HTML & CSS 3.2 PHP & Javascript 3.3 Brugerteste 3.4 Tilføjelser og ændringer af brugerteste 4. Videreudvikling Sebastian Nyholm 2/8

3 1. Målgruppe Mit portfolio er ikke lavet ud fra en bestemt målgruppe, da jeg ikke søger noget konkret pt. Det henvender sig derfor mere til folk, som har hørt om mig gennem diverse kunder og gerne vil se mine værker. Designet på siden er dog til de mere moderne typer, som godt kan lide forandring og være fremme, da en onepage hjemmeside er noget relativt nyt. 2. Design I det følgende afsnit kan du læse om hvilke idéer og tanker der har været for at fremstille designet til portfolioen og hvilke designværktøjer der er blevet taget i brug. 2.1 Photoshop Jeg brugte Photoshop til at opsætte mit design i og arbejdede ud fra det, da hjemmesiden skulle opbygges i HTML og CSS. 2.2 Onepage Jeg har valgt at lave en onepage, da det kan give et flot og enkelt overblik af et portfolio. Derudover giver det også en anden oplevelse for brugeren, som bliver ført gennem hjemmesiden som en kort historiefortælling, hvor man til sidst ender i kontakt, som giver brugeren muligheden for at kontakte en, i stedet for, at man skal klikke sig frem og tibage for at finde de forskellige informationer man søger. Det er dog vigtigt at man holder det meget enkelt og rent på en onepage, da det hurtigt kan blive uoverskueligt, hvis man indsætter unødvendige informationer. Sebastian Nyholm 3/8

4 2.3 Gridsystem - 960px med 12 kolonner Jeg valgte at bruge et gridsystem til at designe mit portfolio. Jeg valgte 960px fordi, det passer til de fleste skærme og hvis skærmen er større, vil indholdet blive centreret, så det stadig ser godt ud. Ud over at det passer til hjemmesider, er det også et godt værktøj til designdelen, da man får nogle retningslinjer at følge. Her er mit grid og design: Grid: Design: Less is more & Keep it simple stupid Less is more og kiss er kendte udtryk, som forklare sig selv. Man skal gøre tingene simple og passe på med at rode. I forhold til web giver det brugerne et bedre overblik over hvad der er og gør det nemmere at finde det man søger. Jeg har derfor fuldt disse metoder og kun tilføjet de elementer jeg mente var vigtige og essentielle for at vise, hvem jeg er. 2.5 Designprincipper Designet er lavet ud fra designprincipper, som giver en hjemmeside struktur og mening. Dette giver igen brugerne et bedre overblik og hjælper dem med at skelne de forskellige elementer fra hinanden. Her kan det f.eks. være gestaltlovene, som reglen om nærhed, som giver brugerne et overblik over hvad der hører sammen og hvad der ikke gør. Sebastian Nyholm 4/8

5 2.6 Farver Jeg har valgt et en blå farve, som symbolisere troværdighed og loyalitet, da jeg gerne vil fremstå på den måde. Den er dog mindre markant end en normal blå farve, hvilket giver en mere afslappende oplevelse. 2.7 Fonts Jeg har valgt at bruge fonten Open Sans, da det er en stilren font med de krav jeg havde. Der var forskellige tykkelser af fonten, som skulle bruges til at fremhæve forskellige ting og alle tegnene havde samme bundlinje, så det ikke lignede noget hang. 2.8 Genkendelighed! Genkendelighed er vigtigt, da det giver brugeren en sikkerhed og forståelse, dog er en onepage ikke helt genkedelig for alle, men her skal det give en oplevelse i stedet. Elementerne på siden, som menu og logo (mit navn) er placeret hvor man regner med at finde dem, da de er essentielle for en hjemmeside. 2.9 Navigering! Menuen er lavet, så den følger brugeren på vej ned gennem hjemmesiden. Dette er gjort pga., at det er en onepage og man nemt skal kunne finde de forskellige informationer man søger. Menuen viser også hvor man er, med et farveskift at det pårørende menupunkt. Sebastian Nyholm 5/8

6 3 Udvikling! Udviklingen af hjemmesiden har gennemgået nogle faser, som vil blive gennemgået i det følgende afsnit. 1. Opbyning af strukturen 2. Udvikling af effekter 3. Brugertest 4. Ændringer 3.1 HTML & CSS! Da siden skulle bygges fra bunden af, skulle strukturen først opbygges. Her begyndte jeg udfra designet at opbygge hjemmesiden. Her fik jeg lavet det samme gridsystem som jeg brugte til designet, så jeg havde grundlaget for hjemmesidens opbygning. I denne fase handlede alt om opbygning, hvilket vil sige, at der ikke blev tilføjet nogle effekter i denne omgang. 3.2 PHP & Javascript Efter opbygningen af strukturen, kunne den større udfordring begynde. Nu skulle hjemmesiden nemlig blive brugervenlig og indholdet skulle styres på en anden måde. Det først af det brugervenlige lå i menuen og den måde man bliver kørt ned til det menupunkt man gerne vil se, hvilket giver et overblik over, hvor man er på siden, i stedet for bare at blive teleportet et sted hen, som normale anchor links. En anden del lå i at vise hvor på siden man er og her er der tale om de omtalte menupunkter, som bliver farvet alt efter hvor man er. En tredje og vigtig del af brugervenligheden lå Sebastian Nyholm 6/8

7 i de filtreringer der er på siden. Man kan f.eks. sortere i de projekter jeg har lavet og bestemme hvilke læringsprocesser man vil se. Indholdstyringen handlede mest om hvilke ting der skulle vises på siden. Ligesom i filtreringen skulle de forskellige landingpages for projekterne ikke vises på engang, men kun det man aktiverede. Kontaktformularen skulle også laves, så man kunne kontakte mig, hvis man gerne ville. Her skulle der derfor lidt php ind over, for at få den til at fungere, Man skulle også have en besked hvis man havde sendt en besked, hvilket javascript gjorde muligt. 3.3 Brugerteste Brugerteste er en vigtig del af opbygningen af en hjemmeside, da det er her man finder ud af om det man har lavet egentlig fungere i praksis. Jeg fik derfor lavet lidt undersøgelser i forhold til navigering, opsætning og brugervenlighed. Det feedback jeg fik af disse test, gav mig mulighed til at forbedre mit portfolio yderligere. 3.4 Tilføjelser og ændringer af brugerteste! En ting som ikke fungerede i mit portfolio var de projekter som kom frem, når man klikkede på se projekt. Her blev man i første omgang ikke kørt op til selve projektet, hvilket resulterede i, at man på små mindre skærme ikke blev gjort opmærksom på, at der faktisk var kommet noget til syne højere oppe. Dette ændrede jeg derfor til, at man blev kørt op til projektet, når man klikkede se projekt. Sebastian Nyholm 7/8

8 4 Videreudvikling! En hjemmeside kan næsten altid blive videreudviklet og i dette tilfælde er der også muligheder, som skal tages op i næste version. Her er en liste over de hidtil sete ting. 1. Kontaktvalidering 2. Bedere effekter til filtreringen, så den ikke er så direkte. Sebastian Nyholm 8/8