Opstart

Det første jeg foretog mig, var at samle et dokument hvor jeg stillede kravene til eksamensprojektet op i en overskuelig punktform, med det formål at kunne bruge den til at udarbejde en PBS. Derudover lavede jeg et andet dokument, hvor jeg samlede læringsmålene fra første semester, for at kunne bruge denne som en tjekliste undervejs, så jeg følte mig mere sikker på at jeg i projektet kom rundt om det vigtigste.

Målgruppe

Herefter definerede jeg en primær og en sekundær målgruppe, mine undervisere som primær og arbejdsgivere som sekundær. Dette kommer eksempelvis til udtryk ved at jeg har min dokumentation som en tydelig og let tilgængelig del af mit website. Min sekundære målgruppe er dog vigtig at forholde mig til, da den jo er grunden til at det giver mening at have et portfolio. Derfor vil jeg løbende forholde mig til eventuelle ændringer der kan laves efter eksamensperioden. Dette er også grunden til at jeg gerne vil inkludere nogle personlige projekter. Disse er som udgangspunkt ikke så relevante for min eksamen, men for en arbejdsgiver kan det være et relevant sammenligningsgrundlag, der kan holdes op imod min løsning af konkrete opgaver.

Pre-research

Før jeg kunne komme i gang med min projektplanlægning, havde jeg brug for at danne mig et overblik over mine forventninger til mit portfolio. Jeg lavede derfor en kort research, hvor jeg noterede nogle ønsker til mit portfolio og nogle ting at have for øje: - Simpelt/minimalistisk layout, med let adgang til mere information. - Effekt eller lignende i baggrunden, for at skabe liv på min side. - Fremvise et projekt ad gangen, så det ikke bliver overvældende og farverne ikke clasher. - Table of content i siden, for nem navigation og overblik. - Klar og præcis forside.

Indholdsoversigt

Det sidste jeg lavede inden min projektstyring, var en oversigt over hvad mit website som minimum skulle indeholde. På den måde kunne jeg skabe overblik over hvor mange sider der skulle kodes, hvilket gav mig mulighed for at lave en mere realistisk projektstyring.

Projektstyring

OBS

PBS

WBS

Gantt Chart

Styletiles

Moodboards + Værdiord

For at give mig en retning for det visuelle arbejde, lavede jeg 3 moodboards;

En samling af idéer til portfolio layouts, som jeg synes var godt designet.

En samling af æstetiske referencer der ikke som sådan havde noget med portfolios at gøre.

En samling af de 2 første, hvor jeg tog de koncepter med, der talte mest til mig.

Jeg kom i den proces frem til 3 værdiord;

- Luftigt: Jeg vil bruge whitespace til at fremhæve mine projekter, ved fysisk at adskille dem. På den måde undgår jeg at de clasher visuelt.

- Organisk: Jeg vil gerne have nogle elementer der føles håndtegnede og bryder med den typiske “kassede” struktur.

- Stringent: Især de organiske former, kan give et rodet og kaotisk layout. Dette vil jeg forsøge at modarbejde, ved at holde mit design strømlinet og sørge for at mine elementer bliver brugt med omtanke.

Typografi

Jeg begyndte at teste forskellige fonte. Dette gjorde jeg for at se dem op imod hinanden, og se hvad der talte mest til mig.

Jeg blev ved med at fange ordet “jazz” der stod på mit moodboard, og ville gerne genskabe noget af den energi der var i den skrifttype. Jeg valgte fonten “Montserrat”.

Dette er en sans-serif font, der gør sig godt til forskellige formål. Den kan både bruges til overskrifter og et logo, når man bruger den i de tungere vægtninger, hvor den minder mig om min reference. I de lette vægtninger er den relativt stringent og elegant, og så “larmer” den ikke for meget - det var især vigtigt for mig at have en font der ikke kommunikerede for meget i min brødtekst, når nu jeg ville gøre brug af de her grafiske elementer.

Farver

Jeg udviklede en farvepalette og valgte herefter 3 farver, som jeg primært ville arbejde med. Jeg valgte disse 3 på grund af deres samspil.

Rød, med inspiration fra jazz logoet, og fordi den udstråler passion og energi.

En gullig sandfarve, hvilket var et tema, der gik igen i mit moodboard, og skabte et varmt og inviterende udtryk.

Til sidst en grøn, som jeg primært ville bruge til min grafik. Jeg startede med en triadisk harmoni af rød, gul (sand) og blå. Men da jeg skulle bruge den til grafik, valgte jeg at gå med en grøn i stedet for at undgå at den skulle kæmpe for meget med min tekst, og at den ikke skulle stjæle for meget opmærksomhed.

Logo

Jeg havde stadig ordet “jazz” fra mit moodboard, i baghovedet, da jeg skulle lave mit logo. Logoet består af mit navn med rød og en meget tung vægtning. Logoet har fået en lille smule tekstur og blur, for at skabe et udtryk der minder om blæk, trykt på papir. Jeg fandt frem til det endelige logo, igennem en test.

Jeg viste 6 versioner til en testperson, og bad vedkommende om at vælge de to, der umiddelbart var mest iøjnefaldende. Herefter viste jeg de to valgte versioner igen, men nu med ca 3 meters afstand mellem testpersonen og min skærm, og bad personen om at vælge det bedste.

Grafik

Da jeg skulle udvælge min grafik, havde jeg behov for at de sagde noget mere, end bare at være pynt. Jeg undersøgte græsk og romersk mytologi og historie, og kom frem til følgende: - Lyre: Harpe lignende instrument, der symboliserer kunst, musik, poesi og skaberkraft. - Muse: En statue inspireret af de 9 muser, symbol på kunst, idéer og fantasi. - Olivengren: Forbundet med Athene, symboliserer kløgt, strategi og fornuftsbaseret problemløsning. Jeg fandt fotos på Unsplash af mine elementer og brugte photoshop til at lave dem i 2 farver: grøn og sand. For at de ikke skulle forstyrre for meget, satte jeg opaciteten ned på 40%, og lavede så 3 layouts med dem; desktop, tablet og mobile.

Website forarbejde

Informationsarkitektur

Jeg vidste at dokumentationen var vigtig for min primære målgruppe, og valgte derfor at placere den tydeligt direkte i min navigationsbar, da dette er det mest intuitive sted at lede efter noget konkret. I forhold til selve dokumentationssiden, besluttede jeg at lave et simpelt layout, hvor jeg kronologisk gennemgår min proces, med tydelige overskrifter og billeder, for at gøre det nemt at danne sig et overblik. Jeg vidste at min forside skulle være simpel, og besluttede at inkludere følgende elementer: Foto, logo, kort tekst og videoproduktion. Jeg havde besluttet at mit showroom skulle have meget whitespace og plads til at projekterne kommer til sin ret. Jeg valgte derfor at hvert projekt skulle have et enkelt foto, en forklarende rubrik og et link til en underside. På undersiderne går jeg i dybden med flere eksempler fra designet og noget tilhørende tekst. Min kontakt side ville jeg have helt enkel. Navn/logo, foto, mail og telefonnummer.

Skitser og flowchart

Jeg lavede nu håndtegnede skitser af mine sider og flowchart. Her havde jeg særligt reglerne om nærhed og lighed for øje. Nærhed fordi jeg ved netop at undgå nærhed, vil tydeliggøre at der er tale om forskellige projekter. Lighed ved at lave et genkendeligt layout, der giver en fornemmelse af at det stadig er et sammenhængende portfolio, og ikke bare en tilfældig fremvisning af projekter. Reglen om lighed var især relevant i forhold til opbygningen af mine undersider, hvor jeg brugte de samme retningslinjer for mit layout, hvor det gav mening.

Flowchart

Forside

Kontakt

Showroom

Showroom undersider

Dokumentation

Website kodning

Jeg startede med at kode min navigationsbar, med udgangspunkt i en opgave vi har lavet tidligere. Herefter oprettede jeg html dokumenter til alle mine sider, undersider og tidligere projekter, og linkede dem sammen. De første sider jeg kodede var min forside og kontaktside. Dette var 2 relativt simple sider, og så havde jeg mere tid til at fokusere på mit showroom, som jeg vidste ville blive den største opgave. Jeg samlede mine projekter i en enkelt kolonne i midten, for at have plads omkring projekterne. På undersiderne lavede jeg en struktur hvor tekst og billede skiftede mellem højre og venstre side. Det gav en dynamik på siderne, der gjorde at den var mere indbydende. Jeg lavede skabeloner af de boxe hvor jeg havde mit indhold, som jeg kunne genbruge på andre sider. På den måde skulle meget af mit indhold også kun styles én gang, da de allerede havde en class der blev ramt i mit stylesheet, når jeg oprettede dem. Jeg valgte dog også med flow 2 og 4, hvor vi havde kodet hjemmesider, at fokusere på at guide brugeren ind og opleve disse sider. Jeg implementerede links, der åbnede siderne som et nyt vindue, for at undgå at “skubbe” brugeren væk fra min side. For at lave en lettere navigation imellem mine flows, lavede jeg en ekstra navigationsmenu i siden af skærmen. Den gør det let og overskueligt at bladre imellem mine projekter, uden at skulle tilbage til mit showroom og scrolle. Jeg lavede min side responsiv med media queries ved 1000 og 780 pixels. Her samlede jeg mit indhold i en enkelt kolonne. I mobile versionen, er projekt-navigationen rykket ned i en footer, for at holde mit layout stringent og luftigt. Jeg har også fjernet mit logo fra forsiden på mobile versionen, fordi den i forvejen står i hjørnet, og fremstod som en form for visuelt ekko på min side.

Video

Idé generering og Pre-production

Jeg havde en idé fra start af, om at lave en video der refererer til en kampagnevideo fra brandet Aimé Leon Dore. Reference video

Jeg skrev mine umiddelbare ideer ned, hvor jeg forholdt mig til koncept, stemning og nødvendige scener.

Jeg lagde mine scener ned over berettermodellen, for at efterprøve om det gav mening, og skabe overblik over hvordan handlingen skulle udspille sig.

Herefter lavede jeg en shotlist, med de scener der var essentielle for at fortælle historien.

Production

Da jeg selv skulle være på kamera, havde jeg en ven til at være kamera mand. Optagelserne er næsten alle sammen close-up og håndholdte. Dette er et af de vigtige elementer i min reference video, og derfor valgte jeg at gøre det samme. Da vi skulle lave optagelserne, havde vi uheldigvis en fejl på kameraet, der derfor ikke kunne bruges til at filme det hele. Dette resulterede i at vi måtte optage nogle af scenerne på en iPhone, hvilket gav nogle ret store udfordringer senere.

Post-production

Fordi nogle af optagelserne var lavet på iPhone, samt udendørs i mørket, var de enormt grynede. Det var nogle scener der spillede en vigtig rolle i fortællingen, og de kunne derfor ikke blive klippet ud. Jeg løste det delvist med en de-noise effekt. Derudover gav jeg optagelserne fra kameraet noget noise, for at undgå en alt for tydelig forskel. Jeg fokuserede min colorgrading på at skabe et mere ensartet udtryk, men kom ikke udenom at klippe iPhone optagelserne ned til et absolut minimum. Min intro scene er skudt på 2 forskellige lokationer, men skal i videoen være samme sted. Dette var også en udfordring, fordi der var en markant forskel på lyset. Dette forsøgte jeg også at forbedre i min colorgrade. Jeg brugte Lumetri Color til at matche mine skud. Derudover brugte jeg en Lut ved navn Godfather, der fremhæver orange og gule toner, i varierende grad for at kompensere for forskellene. Jeg brugte også en faded film effekt, på optagelserne fra kameraet, for at gøre forskellene mindre markante. Klipningen er inspireret af min reference video, og bærer præg af mange hurtige klip, der medvirker til at skabe en stemning af at tingene går stærkt og at der er fart på. Med undtagelse af den sidste scene, hvor jeg lader klippene trække ud op til klimaks. Lydsiden består af en sang jeg fik igennem Upright Music, med udgangspunkt i min reference video. Sangen har en mere stille sekvens, den klippede jeg ind i min afsluttende scene, hvor klipningen bliver langsommere, for at understøtte dette skift. Derudover har jeg lagt nogle lydeffekter ind over, for at understrege nogle stemninger og noget handling.

Ai

Jeg har løbende ført en log over mine prompts, og skrevet dem ind i et skema for at dokumentere