dokumentation-portfolio

Forside

Om mig Portfolio Kontakt

Dokumentation af webportfolio

Projektstyring

Udviklingen af min webportfolio tog udgangspunkt i en struktureret projektstyring, hvor jeg først dannede mig et overblik over den tid, jeg havde til rådighed, samt hvilket indhold portfolioen skulle rumme. Her kiggede jeg på krav, mål og potentielle ting som jeg skulle være opmærksom på i processen.

For at skabe struktur og sikre en realistisk tidsplan anvendte jeg både PBS (Product Breakdown Structure), WBS (Work Breakdown Structure) og et Gantt chart. Disse værktøjer gav mig et tydeligt overblik over opgavernes omfang, prioritering og opgavernes sammenhæng, hvilket var med til at sikre en effektiv arbejdsproces og en god fremdrift gennem hele projektet.

billede-af-PBS-model

billede-af-WBS-model

billede-af-Gant-Chart

Konceptudvikling

Brainstorm

I min idéudviklings fase startede jeg med at lave en brainstorm, hvor jeg skrev umiddelbare tanker og idéer ned i Figma. Dette tog jeg videre med, da mit koncept og visuelle udtryk skulle etableres.

Visuelle stil og koncept

Med min visuelle stil og koncept ønskede jeg, at det skulle være en blanding mellem det tekniske og det kreative, da det omfatter uddannelsen, men også mig. Da min interesse primært er på frontend udvikling, er det vigtigt at min visuelle stil indikerer det. Derfor ville jeg gerne være konsekvent med at have elementer på min hjemmeside som omfatter dette, bl.a. med mit logo, font, farver og layout.

Herefter lavede jeg en style guide, så jeg havde noget visuelt konkret at gå efter når jeg lavede diverse produkter til min hjemmeside. Det vedhæfter jeg under teksten her. Logoet satte jeg ind senere, da jeg havde lavet det.

billede-af-styleguide

Farvevalg

Jeg valgte at arbejde med rolige farver, da de afspejler mig bedst som person. Jeg er meget nede på jorden og ønsker, at min portfolio udstråler ro og overskuelighed. For at skabe kontrast og visuel dynamik tilføjede jeg en komplementær farve i den røde skala, da min primære baggrundsfarve er grøn. Jeg valgte en bordeauxrød nuance frem for en klar rød, da jeg ønskede at undgå et for aggressivt eller ”farligt” udtryk.

Farverne harmonerer godt i overensstemmelse med farvehjulets principper og skaber en sammenhængende helhed. Jeg oplevede dog udtrykket som en smule for neutralt, og derfor valgte jeg at tilføje en gul farve til knapperne for at fange brugerens opmærksomhed. Denne beslutning tog jeg med udgangspunkt i AIDA-modellen, hvor fokus er på at skabe opmærksomhed. Knapperne er et naturligt sted at fremhæve, da de opfordrer til handling, og den gule farve tydeliggør samtidig, at de er interaktive.

Målgruppe

Min primære målgruppe er mindre virksomheder, der har brug for en multimediedesigner med kompetencer inden for kodning og digitalt design. Min portfolio er derfor opbygget, så den hurtigt giver et klart overblik over mine færdigheder inden for Adobe pakken og HTML/CSS.

Min sekundære målgruppe er lærerne på min uddannelse, så de kan få et indblik i, hvem jeg er som multimediedesigner og mine færdigheder inden for diverse områder.

Mine processer kan undersøges nærmere gennem billeder i min Figma, som jeg linker til her.

Link til min Figma

Interfacedesign

Layout

I mit design har jeg bevidst arbejdet med diverse Gestaltlove, såsom nærhed, lighed og lukkethed. Elementer, der hører sammen funktionelt eller indholdsmæssigt, er placeret tæt på hinanden, hvilket gør det lettere for brugeren at afkode strukturen. Især også med de gule indramninger som jeg har lavet på mine knapper og kasser med større indhold, for at lave et overskueligt look. Derudover har jeg også haft fokus på gentagelser af farver, typografi og knapdesign, hvilket skaber genkendelighed og sammenhæng på tværs af siderne.

Jeg fik skitseret wireframes til forskellige devices, som gav mig overblik over, hvordan min hjemmeside skulle opstilles. Dette var en stor hjælp til, da jeg skulle lave prototypen i Figma, så jeg vidste, hvordan jeg konkret ville have de forskellige sider sat op. Billederne af mine wireframes ligger herunder og man kan undersøge min prototype på Figma linket, som jeg linkede til længere oppe.

billede-wireframe-iphone

billede-wireframe-tablet

billede-wireframe-desktop

Valg af font

Da min primære interesse inden for multimediedesign ligger i frontend og webudvikling, ønskede jeg at signalere dette på en diskret måde i mit visuelle udtryk. Derfor har jeg valgt fonten Genos, som med sit moderne sans serif-udtryk og afrundede former giver et let futuristisk look, der associerer til kodning og teknologi. Fonten fungerer både til overskrifter og brødtekst og bidrager til en ensartet visuel identitet. Samtidig er den letlæselig, hvilket er vigtigt for brugervenligheden og den samlede oplevelse.

Forside

Forsiden spiller en central rolle, da det er her brugerens førstehåndsindtryk skabes. Jeg overvejede i starten at anvende video som baggrund for at skabe et mere dynamisk og æstetisk udtryk. Efter at have produceret og testet løsningen, vurderede jeg dog, at det virkede for rodet og ikke levede op til det professionelle udtryk, jeg ønskede.

Jeg valgte derfor en mere minimalistisk tilgang med fokus på mit navn og uddannelse. Layoutet er luftigt og overskueligt, hvilket giver brugeren ro og et klart overblik over diverse informationer og hvordan de navigerer på hjemmesiden.

Logo

Udviklingen af mit logo var en længere proces, da jeg havde svært ved at definere præcis, hvad det skulle kommunikere. Jeg endte med et simpelt logo, der kombinerer elementer fra både kodning og det grafiske univers, samtidig med at mit navn indgår. Penselstrøget i logoet fungerer som et kontrastelement til det ellers strukturerede udtryk og tilfører noget umiddelbart og enkelt, hvilket jeg personligt finder æstetisk tiltalende.

Mit logo med mit navn og blomsten i min footer har jeg udarbejdet i Illustrator. Til at tegne blomsten og den organiske cirkel omkring mit navn i logoet har jeg anvendt værktøjet malerpensel. Den valgte streg, som hedder “kul”, giver et legende udtryk, der understøtter det umiddelbare visuelle indtryk. Dette kombineres med den tekniske del af designet, hvor mit navn er opbygget af tal og implementeret som en div.

Om mig side

Min ”Om mig” side skulle gerne afspejle, hvem jeg er som person, samt min passion for videoproduktion og film. Derudover skal den give et personligt indtryk af, hvem jeg er og skabe nysgerrig hos modtageren.

Præproduktion og produktion

Min videoproduktion består af min showreel, som jeg har valgt at placere under siden ”Om mig”. Som nævnt tidligere havde jeg også planlagt at producere en video til forsiden. Til denne video, som jeg endte med ikke at anvende, udarbejdede jeg både manuskript, storyboard og skudplan, hvorefter jeg filmede og redigerede materialet. Videoen opnåede dog ikke det ønskede visuelle udtryk, og derfor har jeg valgt ikke at have den med på min hjemmeside.

Oprindeligt havde jeg planer om at producere endnu en video, som skulle formidle noget mere personligt om mig gennem multimediedesignprogrammer og værktøjer. Projektet viste sig dog at være for omfattende, og jeg havde svært ved at gennemskue, hvordan det konkret skulle realiseres. Til en vejledning, fik jeg foreslået at kombinere denne idé med min showreel, hvilket i sidste ende blev den løsning, som min showreel tog form efter.

Showreel - videoproduktion

Min showreel består af klip fra tidligere produktioner fra højskoleophold, tidligere uddannelse og min nuværende uddannelse. Formålet har været at vise bredden i mit arbejde og min erfaring med videoproduktion.

Jeg har desuden integreret kodeelementer for at skabe en kobling til min nuværende uddannelse og interesse. Min video er produceret i Adobe Premiere Pro, hvor jeg havde fokus på mappestruktur og en overskuelig klipning, så det ikke blev for rodet.

Portræt af mig

Jeg var i tvivl om hvorvidt jeg ønskede et portrætbillede på min hjemmeside. Jeg valgte dog at inkludere det, da det bidrager til en mere personlig relation og giver modtageren et ansigt på personen bag portfolioen.

Billedet er redigeret i Photoshop med effekten Angled Strokes, som giver et malerisk og let sløret udtryk. Dette spiller sammen med det tegnede univers, som også ses i logo og footer.

Herunder kan man se, hvilken effekt jeg har brugt på mit portræt og hvor meget det er indstillet.

billede-af-photoshop-effekt

Under mit portræt billede på min "Om mig" side har jeg placeret en knap for at downloade mit CV, da det er en nem mulighed for at læse videre omkring min erhvervserfaring, hvis man ønsker det.

Portfolio side

Projektsiden var vigtig for mig at være så overskuelig som muligt, da den indebærer en del information og billeder. Derfor opsatte jeg en lille indholdsfortegnelse, som fungerer som knapper, der leder modtageren direkte ned til opgavens dokumentation. Grunden til dette var så modtageren hurtig kan danne sig et overblik over, hvilke processer jeg har lært om og kan derefter trykke efter interesse.

Jeg har bevidst begrænset brugen af billeder for at undgå visuel overload og i stedet opfordrer brugeren til selv at udforske projekterne nærmere. Jeg har dog valgt de mest relevante billeder for at man kan se resultatet.

Kontakt side

Kontaktsiden er holdt meget simpel, da formålet er at gøre det nemt at komme i kontakt med mig. Muligheden for at sende mail direkte reducerer antallet af trin og forbedrer brugeroplevelsen. Det er dog en mockup af denne funktion. Grunden til jeg ikke har kodet den er fordi jeg kunne læse mig frem til at, man skulle bruge Javascript, som vi ikke er blevet introduceret til endnu. Så ville jeg hellere holde mig til det som jeg kender og vise visuelt, hvordan det skal stilles op.

Standardtest

Da portfolioen så småt havde taget form, gennemførte jeg en standardtest ved at sende et spørgeskema til fem personer. Spørgsmålene omhandlede blandt andet førstehåndsindtryk, navigation, læsbarhed og tekniske fejl. Feedbacken var meget værdifuld, da den gav mig indsigter, jeg ikke selv havde overvejet. Blandt andet blev jeg gjort opmærksom på, at det ikke altid var tydeligt, hvad der præcist var klikbart. Dette løste jeg ved at tilføje skygger til knapperne, så de fremstår mere aktive.

Der blev også stillet spørgsmålstegn ved placeringen af min showreel. Jeg valgte dog fortsat at placere den på “Om mig”-siden, da den understøtter fortællingen om min personlige interesse for film og bidrager til et mere helstøbt indtryk af, hvem jeg er.

Derudover var der flere som synes at min brødtekst, som jeg havde centreret var for besværlig at læse, så derfor satte jeg min tekst til venstre for at optimere læseoplevelsen. Jeg gjorde også brødtekstens font større, så den står mere frem på siden, da der også var nogle som havde svært ved at læse det i normal fontstørrelse.

Kodning af hjemmeside

Til sidst vil jeg komme ind på, hvordan jeg har kodet min hjemmeside sådan overordnet set. Min hjemmeside afspejler meget at jeg har valgt af designe det efter mine evner i HTML og CSS, så det er en forholdvis simpel opsætning under mine forskellige sider. Derudover har jeg sørget for at sætte mine emner i ”containers”, så jeg kunne anvende flex værktøjet en del til at opstille og ændre mit indhold ift. det responsive design. Dertil har jeg sørget for at sætte kommentarer til de dele af min kodning, som jeg ikke havde lige så let ved, så når jeg vendte tilbage til de punkter, at jeg vidste, hvad de enkelte punkter gjorde præcis.

Jeg gjorde også stor brug af at have min CSS og HTML åben side om side. Det var en stor hjælp til at holde overblikket, og jeg ikke behøvede at gå frem og tilbage hele tiden. Herunder er der billeder af min arbejdsmåde og eksempel på kommentarer i min kodning.

billede-af-htmlogcss

Kommentarer-css-billede

Refleksionsafsnit

Selvom jeg havde lagt en detaljeret plan for projektet, indså jeg, at rækkefølgen ikke har været optimal i min projektstyring. Jeg skulle have lavet brainstorm og koncept først, så jeg var helt med på, hvilke elementer der skulle indgå i min webside, da jeg oplevede at der kom flere opgaver til undervejs. Dette gjorde at jeg var ret tidspresset til sidst og desværre måtte gå på kompromis med nogle af de ting jeg havde planlagt.

Min kodning tog en del længere tid end jeg havde regnet med, da jeg i starten havde kodet diverse elementer med en specifik pixel fremfor at bruge flex værktøjet. Dette gjorde mit responsive design ikke fungerede optimalt og jeg derefter måtte dykke mere ned i, hvad flex værktøjet kunne gøre for mig, og gøre mere brug af dette.

Brug af AI

Jeg har anvendt AI til min kode del, hvor jeg har haft Copilot slået til i Visual Code, som har hjulpet mig med stavefejl undervejs. Jeg slog det til for at gøre min proces mere effektiv, da det er rettelser jeg godt kender til. Men det hjalp mig med at være opmærksom på, hvis jeg havde stavet noget forkert.

Derudover, hvis jeg ikke kunne gennemskue, hvorfor min kodning ikke virkede, så ville jeg spørge Chat GPT, om den kunne se hvad problemet var. Jeg har ikke brugt noget kodning fra Chat GPT, men har mere brugt det som et værktøj til at tjekke min kodning igennem, for at gennemskue fejlen, hurtigere end jeg selv kunne. Den hjalp mig med at blive opmærksom på nogle ting i min kodning, som gjorde jeg kunne arbejde videre derfra.

Her er min chat/prompts som hjalp mig:

Link til prompts