REDESIGN AF PORTFOLIO 16. jan. 2015

Transkript

1 REDESIGN AF PORTFOLIO 16. jan Christoffer Møller Jarolics CPH Business Lyngby Multimediedesign Udviklingsprocessen af tilblivelsen af dette projekt redesign af portfolio, vil på de følgende sider blive dokumenteret. Her vil jeg komme ind på nogle forskellige ting såsom designprincipper, projektplanlægning, designskitser og andre ting der beskriver mine forskellige valg for det visuelle design jeg har gået efter og opnået på min personlige portfolio. Jeg håber dette kan tage jer lidt tættere bag mine tanker og ideer angående dette remake!

2 PLANLÆGNING I sådan et stort projekt, set i lyset af hvor på uddannelsen vi befinder os, er der ingen tvivl om at det har været utroligt vigtigt og kunne holde fokus på en overordnet plan at gå efter. På den måde undgår man at stirre sig blind på sine opgave, stå og mangle noget i sidste øjeblik og så er det generelt den bedste fremgangsmåde hvis man vil have et fuldendt resultat uden mangler eller overraskelser i sidste ende. Det skal dog ikke være nogen hemmelig at jeg ikke har benyttet mig af et decideret Gantkort, da det ikke er sådan jeg personligt arbejder bedst. Derfor har jeg ikke afsat specifikke dage eller tidspunkter til at skulle lave på pågælende dage. I stedet har jeg valgt at opstille og planlægge det efter den måde jeg mener jeg fik mest muligt ud af det på. Min plan er meget simpel, jeg har arbejdet efter det princip at jeg lister de forskellige ting jeg skulle være færdig med op i en rækkefølge, efter hvad jeg mener er det mest vigtige for mig at blive færdig med først for at processen går så gnidningsfrit som muligt præcis som et gantkort, jeg afsætter dog ikke en specifik tidsperiode da jeg ved at jeg ville komme forud, skride i tiden eller bytte om på nogle ting løbende. Jeg er meget impulsiv og hvis jeg får en idé går jeg igang med det og slutter ikke før jeg er færdig. Sådan ser min opstilling ud: Idéudvikling og skitsering af sidens opbyggelse Opbygning af HTML og CSS siderne på de 5 hovedsider Styling af forsiden rent visuelt Opbygning af navigationsbaren på alle sider Opbygning af indhold og bokse på INFO - LÆRING - KONTAKT - PROJEKTER I denne rækkefølge grundet projektsidens indhold ikke var klart. Redesign af tidligere projekter - klargøring til at opsætte selve projektsiden Formulering af det præcise tekst og rettelser hertil Validering af HTML og CSS Løbende har jeg så krydset de forskellige felter af, og på den måde har jeg følt der har været et overblik hvor jeg ikke kom til at mangle noget. Dog har jeg efterfølgende erfaret at jeg som sagt har byttet om på få af tingene og min egen fornemmelse af hvor hurtigt/lang tid det tog ikke holdte i sidste ende, men det har blot vist sig at jeg har indhentet tabt tid på andre punkter på grund af forskellige styrker. Med henhold til selve rækkefølgen fandt jeg ud af flere steder at hvis man vil undgå at lave ekstraarbejde, såsom og gå ind og tilføje links til undermenuerne på alle de andre sider, skal man tænke sig om når man laver sin HTML sider så man blot kan kopiere samme opstilling i Navigationsbaren hvor alle ting allerede linker til dokumenter. Det var et mindre irritationsmoment for mig som gentog sig flere steder hvor man ikke havde et senere html dokument klar og så blev nødt til at opdatere alle ens tidligere endnu en gang. NAVIGATION Min navigationsbar er meget simpel fra første øjekast. På forsiden har jeg kun et logo og et baggrundsbillede, derfor var tankerne bag denne navigationsbar at den skulle være så simpel som muligt og ikke fjerne fokus fra logoet. Valget faldt på og lave de 4 forskellige links (hovedmenuerne) adskilt så man ikke har en decideret bar, farven på skriften er hvid med en lavere opacity der skifter til 100 lige så snart man bevæger musen indover. Man kan umuligt tage fejl af hvor man bliver navigeret hen da det kun er hovedmenuerne der er repræsenteret: INFO - PROJEKTER - LÆRING - KONTAKT Når man kommer ind på hovedsiden vil man se at baggrundsbjælken er stylet med en baggrundsfarve der spænder fra den ene side til den anden således at man har en navigationsbar der fylder hele siden øverst. Udover det er den stadig holdt i et ultrasimpelt design, hvor eneste funktionelle forskel er at man her kan navigere til undermenuerne under projekter. Jeg har lavet det således at når man føre musen over projekter falder der automatisk en dropdown-menu ned med de forskellige semestre, og derfra går den ud til venstre med de forskellige projekter der befinder sig under de forskellige semestre. Jeg tror ikke man kan være i tvivl om hvordan man navigere på siden eller være i tvivl om hvor man befinder sig. På hver side er der en overskrift der referere til det punkt man befinder sig under.

3 DESIGNPRINCIPPER MED UDGANGSPUNT I 20 DESIGNPRINCIPPER AF IAN WISLER-POULSEN ENKELTHED - et design bør være så enkelt som muligt og unødvendige elementer bør ikke tilføjes: Lige præcis dette punkt er et af de principper jeg har bestræbet mig efter at følge. Jeg føler ofte at hjemmesider har for mange unødvendige ting, der blot fylder og forvirre brugeren af den og i sidste ende nogle gange tager fokus fra det oprindelige omhandlingspunkt. Det har været vigtigt for mig og holde fokus på det som det reelt handler: indholdet der skal vise mine kompetencer. Der kan hverken findes unødvendige billeder der er malplaceret, eller mange tekstbokse medmindre jeg har følt det var nødvendigt. Derfor ser man også at der på 3 ud af 4 sider kun findes en boks der wrapper omkring min tekst, for andet har ikke været nødvendigt og det er kogt ned i den boks i stedet for at have alle mulige andre elementer der tager fokus fra teksten. En af de få ting jeg kunne have ændret på for at holde det helt enkelt var og fjerne min forside som reelt ikke har noget og bidrage med - men jeg valgte og beholde den alligevel fordi jeg følte at hvis jeg skulle holde det enkelt nyttede det heller ikke noget at det første man bliver navigeret til er en forklarende tekst om mig som person så man får smidt en masse tekst i hoved til at starte med. Så dens vigtigste funktion er faktisk og holde enkeltheden og pakke min hjemmeside ind under dette førstehåndsindtryk, selvom man umiddelbart tror det er en ligegyldig side. ENSARTEDHED OG GENKENDELIGHED - Ensartede elementer har en større relation end ikkeensartede elementer - Brugbarhed optimeres, når ensartede elementer opleves på en genkendelig måde: Ensartheden kommer allerede til udtryk i baggrunden, som følger dig fra forsiden og til du kommer ind på hovedsiden, dette har jeg valgt for at have et stilrent look som følger dig overalt på siden. På den måde er folk heller ikke i tvivl om at de stadig er inde på den samme side, der er intet at tage fejl af. Derudover har jeg sørget for at alle sider har de samme bokse, som er stylet fuldkommen identisk, lige fra tekstbokse til kontaktformen - skyggerne og opacitet er den samme. På alle projektundersiderne har jeg lavet 3 logoer som er 90% identiske bortset fra en lille tilføjelse der skal markere hvad de forskellige ting gør. Dette gør at man ikke er i tvivl om hvad de forskellige knapper gør på siderne, og man uden at tænke over det let kan navigere til: OPGAVEBESKRIVELSE - LØSNING - REDESIGN. LUFT - Jeg har bevidst valgt at skabe luft omkring mine objekter på hjemmesiden, både på navigationsbaren er der luft i toppen og mellem hver tekstboks (læring) vil man se noget mellemrum. Jeg har valgt og lave dem i forskellige kasser med luft rundt om for at skabe følelsen af at teksten er fri og alt indhold ikke bliver klemt inde på et meget begrænset stykke. Ligeledes skaber ensartheden og den samme mængde luft imellem tekstboksene at de hverken skal kæmpe om opmærksomheden eller føle at det bliver en presset affære og skulle læse teksten. Følelsen af at man leder brugerens blik slavisk ned af siden har jeg også prøvet og skabe.

4 PRAKTISK INFO TYPOGRAFI - : Helvetica og Lobster (google font) Der er en grund til Helvetica er så populær som den er, og det er af samme grund jeg har valgt den. Den er utroligt let læselig, den bruger lige linjer - ikke noget der er curly eller besværligt for øjet og læse. Hvilket spænder utroligt meget overens med hele princippet for min webside, det er det enkle og minimalistiske design, hvor man skærer ind til benet uden at det bliver for kedeligt. Den står også til stor kontrast til fonten jeg har valgt til overskrifterne Lobster. Det er det mere curly look, hvor den skiller sig meget ud fra den anden font, hvilket bestemt også har været meningen eftersom der skulle være en synlig forskel på hvad der angiver emnet og selve tekste + underemner. Derudover er jeg vild med måden man får integreret de lidt mere krøllede afslutninger på bogstaverne samtidig med at det øverste af bogstaverne altid står snorlige: FARVEVALG - : Mørke nuancer med hvid tekst der står i kontrast til det sorte Inden projektet begyndte havde jeg en forestilling om at det skulle være i lyse farver, og gerne helt hvidt. Men jo tættere vi kom på projektstart og jo mere jeg kiggede rundt på nettet og læste om website design, jo mere skiftede jeg mening og gik hen imod de mørkere farver. Derfor valgte jeg og gå hele vejen med de mørke farver på selve indholdet af siderne. Det mørke website udstråler ofte et meget elegant look, men kan også hurtigt blive tungt og side og kigge på. Derfor ville jer gerne have et mix af noget friskt og noget mørkt og elegant, løsningen for mig blev og skifte min baggrund til et naturbillede fra snesletter med en klar himmel, som har en nedtonet hvid farve men stadig et friskt pust til den sorte kontrast. På den måde fik jeg også skabt en ekstra dimension til min tekstbokse ved hjælp af at lave skygger på den som har en lækker effekt på den hvide baggrund. En af udfordringerne bag og have en sort tekstboks var selvfølgelig skriften. Det falder hurtigt i ét med hinanden og bliver svært læseligt. Det er blandt andet også én af grundene til at mit valg faldt på så enkel og let læselig skrifttype. Samtidig har jeg udnyttet luften til at skabe plads, hvilket også skaber en effekt af at det bliver lettere læseligt og det bliver behageligt for ens øjne og kigge på. Eftersom jeg har holdt mig til et sort/hvid tema har jeg brugt oppacity som et middel til at gøre det mere spænende og kigge på, hvilket jeg har gjort alle steder og ved min navigationsbar har jeg udnyttet det til at den fremhæver de hvide links når du føre musen over det. TILBLIVELSEN AF PORTFOLIO: jeg har i løbet af projektet brugt en række forskellige programmer til at forme mit endelig resultat, nedenfor kan du se en liste af de programmer jeg har brugt til blandt andet logo, knapper, og ikoner. - Brackets (programmet jeg har valgt og kode i) - Photoshop (logoer, ikoner og knapper til kontaktformularen) - Illustrator (brugt i samarbejde med photoshop) - Pages (til at formulere min tekst i inden jeg lagde det ind i koderne) FREMTIDIG BRUGERTEST: for at kunne opnå det bedst mulige resultat af min hjemmeside, vil jeg inden eksamensforløbet lave en brugertest. Som nævnt tidligere er jeg ikke i tivl om at min navigation fungere og opsætning er lige til at finde ud af. Men det svært og vide med garanti når det kun er en selv der har siddet og arbejdet med det. Derfor vil jeg i løbet af de næste par dage få lavet en brugertest der er tilpasset mit website. Jeg har tænkt mig og tage 3 forskellige personer: ung, middelaldrende og en ældre person. På den måde skulle jeg meget gerne opnå et bredt publikum, trods de få test. Jeg forventer selvfølgelig at det ikke bliver noget problem for dem og navigere rundt, men efter testen vil jeg evaluere på hvorvidt det levede op til mine egne forventninger og hvis der er noget og forbedre vil jeg rette dem og lave en ny test på 3 nye personer. På den måde kan jeg sikre mig at et problem ikke bare bliver erstattet af et andet.

5 MINDMAP DESIGNSKITSER Indholdet i mine designskitser er utroligt minimalt, da jeg ikke har benyttet dem særlig meget. Jeg har konstant visualiseret hvordan det skulle se ud i mit hoved - og har ikke følt behovet for at have noget decideret at gå ud fra da jeg godt kan lide og prøve mig og udforske forskellige muligheder. Dog havde jeg forestillet mig helt basis hvordan jeg ville have de 3 sider her. Man kan godt se jeg har viet lidt fra det, men selve opsætningen har jeg holdt mig rimelig godt til, det er mere formerne og tildels farverne jeg har afviget fra.

6