Projektplan
Det allerførste jeg gjorde i processen, var at lave en projektplan. Dette gjorde, at jeg kunne optimere min tid bedre, og jeg havde en plan for hvad jeg skulle nå hver dag. Hele første uge af projektet gik med at researche, dette lagde et godt fundament for mit arbejde. I uge to startede jeg med at kode og brainstorme til min video. I uge tre var jeg klar til at filme og jeg redigerede min video færdig. Her den sidste uge er jeg ved at være færdig med at kode, og jeg er nu i gang med at skrive hele processen, som jeg har været igennem for at producere denne portfolio.
FigJam dokument
Research og idéudvikling
Efter jeg havde lagt en plan for projektet, startede min research. Jeg søgte på Pinterest efter inspiration til portfolio layout, jeg fandt nogle gode eksempler som jeg lagde på et FigJam dokument.
Farver og logo
Jeg fik inspiration til de farver jeg har valgt gennem nogle af de designs jeg fandt på Pinterest. Jeg har både valgt mørke og lyse nuancer, da jeg synes de går godt sammen. Grunden til jeg har valgt farven blå er fordi det er min yndlingsfarve. Lyseblå forbindes med ro og afslapning, det vil jeg gerne vise gennem min portfolio da jeg er et roligt og stabilt menneske. Jeg har også valgt at bruge farven mørkeblå da den forbindes med troværdighed, loyalitet og sikkerhed. Så den har jeg valgt da jeg gerne vil vise, at man kan stole på mig. Jeg har ligeså brugt farver som beige og lys lyserød, da jeg synes farverne passer godt sammen. Derefter søgte jeg igen på Pinterest for at finde inspiration til mit logo, mit udgangspunkt var at lave et enkelt logo som genkendeligt. Jeg fandt fire forskellige logoer som jeg kunne lide, jeg tegnede dem ned på papir og gjorde dem til mine egne.
Jeg åbnede Photoshop og begyndte at designe min logoer. Jeg legede lidt med farverne og objekterne til jeg synes det blev godt. Jeg lagde min eksempler ind på mit FigJam dokument.
Styleguide
I opgavebeskrivelsen stod der vi skulle lave en styleguide. Jeg var i tvivl om hvad det var, så jeg søgte på nettet og fulgte denne guide (Indsæt link til styleguide). Jeg fandt nogle fonts på Adobe Fonts, som passede ind til min stil som jeg lagde på et Figma dokument. På min styleguide tog jeg stilling til font til overskrifter, font til paragraffer, farver og design elementer. Jeg skrev hvorfor og hvordan jeg ville bruge det til min portfolio.
Punkter på min portfolio
For at danne mig et overblik over projektet skrev jeg alle de punkter ned, jeg gerne ville have på min portfolio. I grove træk skulle jeg have en underside med: processen af portfolio, de 4 flowprojekter, egne projekter og min video. Dertil skrev jeg også en masse punkter, som var med til at beskrive layoutet og opbygningen af min portfolio. Eks. burgermenu, overskrifter, underoverskrifter, brødtekst, billeder osv.
Video
Indholdet til min video havde jeg tænkt længe over. Jeg ville gerne lave en anderledes video, dog synes jeg det var svært at få en god idé. Det endte med at jeg valgte at lave en video om mig selv som opgavebeskrivelsen også foreslog. Da jeg skulle planlægge min video, startede jeg med at lave et manuskript. Denne video kunne egne sig til, hvis man var jobsøgende og ville vise lidt mere af sig selv. Jeg skrev nogle locations ned, så jeg kunne forholde mig til hvor jeg skulle filme. Jeg lavede et storyboard som jeg kunne bruge som inspiration i løbet at produktionen.
Til at filme min video har jeg brugt mit kamera (Canon Powershot G7 X Mark II) og et kamerastativ. Jeg har redigeret videoen i Adobe Premiere Pro. Billederne i videoen har jeg selv taget. Sagen som ligger som Underlægningsmusik har jeg købt på Apple music, den hedder Feathers (feat. JBird) og kunstneren er ESTA. Jeg har valgt denne sang da jeg synes den er behagelig og stille og rolig. Setuppet i min video er enkelt og der er ikke noget der forstyrrer i baggrunden. Jeg ser selv præsentabelt ud, har makeup på, sat mit hår og rent tøj. Jeg har valgt at have forskellige vinkler i videoen, da man ikke skal komme til at kede sig. Jeg bruger mine hænder aktivt, så man kan se mit kropssprog og at jeg er en åben person.
Typografi
For mig er skrifttypen altafgørende. Den er med til at fortælle historien og understøtte mit budskab. Det jeg kiggede efter i en skrifttype var, at den var læselig, enkel og indbydende.
Jeg fandt nogle forskellige skrifttyper på Adobe Fonts: Bilo, Fields, Mr Eaves Sans og Roca. Til brødtekst valgte jeg at gå med Bilo, da den levede op til min krav.
Jeg synes det var svært at finde en skrifttype til overskrifter. Dog fandt jeg en skrifttype fra Adobe Fonts som hed Ramport One, men da jeg begyndte at bruge den, passede den ikke til min stil alligevel. Hvis jeg ikke finder en skrifttype, jeg kan lide, kommer jeg til at lave overskrifterne en anden farve og størrelse, så man nemt kan overskue hvad man skal læse først.
Kodningen
Hele mit website er kodet fra bunden i Visual Studio Code, som vi har arbejdet med i undervisningen. Jeg har prøvet at kode så hele mit website er responsivt, dog har det været udfordrende, så det ser ikke perfekt ud alle steder.
Det har været en stor udfordring for mig at kode, og finde ud af hvordan jeg skulle sætte min kode op. Jeg har derfor brugt YouTube, som en guide og inspiration. W3Schools har også været en stor hjælp i dette forløb.
Layout
Da jeg begyndte at kode efter mine wireframes og ideer, var det for svært for mig. Jeg havde sat for høje krav og forventede mere af mig selv end jeg kunne levere. Jeg måtte derfor gå andre veje for at komme i mål. På alle mine undersider kan man se min footer. Man kan se mine sociale medier, hurtigt komme til en af de andre undersider via et link og se mine kontaktoplysninger. Dog fungerer min footer ikke helt optimalt, det kan i se ved at baggrunden på nogle af undersiderne er blå.
Jeg har brugt visuelt hierarki til at strukturere mit website, så det vigtigste træder frem først. Det er vigtigt for mig at det er nemt at finde rundt på min portfolio.
Teksten og billederne til de 4 flows har jeg sat op i sektions. Jeg synes det skaber orden og struktur. På nogle af billederne har jeg lavet en speciel funktion, så når man trykker på billederne, bliver de en større størrelse, det har jeg gjort så man kan se detaljerne i billedet.
Jeg gør brug af call-to-action funktioner. Som for eksempel på forsiden, i ”om mig” hvor man kan navigere rundt i de forskellige overskrifter. Ligeledes i footeren kan man trykke ind på mine sociale medier.
På undersiderne med de 4 flow har jeg valgt at lave en collage med billeder fra opgaverne. Det gør at man bliver interesseret og scroller ned for at læse hvad det handler om.
For at gøre undersiden, ”egne projekter” mere unik, valgte jeg at lave en timelapse, hvor jeg sidder og tegner, dette gør min portfolio mere personlig. Derudover har jeg også lavet 2 forskellige slideshow hvor jeg viser mine tegninger og fotografier.
Jeg designede min wireframes på FigJam hvor mit udgangspunkt var at designe efter dette billede.
Jeg lavede en lo-fi wireframe som er en simpel markering af hvor indholdselementerne skal placeres. Jeg har lavet wireframes til telefon-, tablet- og desktop-format så man kan se min portfolio på alle formater.
Målgruppe
Min målgruppe er virksomheder som gerne vil have lavet en hjemmeside, en plakat, taget et professionelt billede, lavet en video og redigeret den.
Modeller
AIDA-modellen: Denne model har jeg brugt på min hjemmeside for at skabe opmærksomhed, det gør jeg ved hjælp af billeder som indeholder mig og andre mennesker. Fangende typografier og ting man kan trykke på og se. For at skabe interesse for brugeren har jeg gjort brug af mange billeder. Jeg er selv meget visuel så det var oplagt for mig at have flere billeder og mindre tekst. Når brugeren begynder at trykke på knapper og links, sker der noget handling. Til slut vil jeg gerne have brugeren til at gå helt ned til min footer og forhåbentlig kontakte mig.
Crap-modellen: For at skabe kontrast har jeg valgt at bruge kontrastfarver og lave mine overskrifter store. Jeg skaber Gentagelse I form at samme skrifttype og farver, dette gør at der kommer sammenhæng på min portfolio. Jeg prøver så vidt muligt skabe Centrering så tingene står ordentligt og under hinanden. Jeg har også igennem min hjemmeside prøvet at skabe afstand mellem elementerne, så man undgår at se objekterne som en helhed.
Feedback
Undervejs spurgte jeg mine venner, studiekammerater og familie til råds om farvevalg, skriftbilleder mv. Jeg har også fået hjælp af studiekammerater, hvis der var et problem i koden jeg ikke selv kunne løse.