Projekt beskrivelse
Første semester eksamen på Multimediedesigneruddannelsen er en mundtlig individuel eksamen, der tager udgangspunkt i den studerendes egen udarbejdede procesportfolio, præsentationsportfolio og plakat.
Procesportfolio-en blog/hjemmeside udarbejdet i starten af semesteret, der samler alt hvad den studerende har lavet af multimedieproduktioner, projekter, prototyper og procesdokumenter i løbet af semesteret, og er delt op i følgende:
- Opgavebesvarelser / dokumentation af eget arbejde.
- Som fast bestanddel vedlægges individuel kritisk refleksion over opgavebesvarelser.
Præsentationsportfolio-et website kodet fra bunden, der har til formål at brande den studerende målrettet arbejdsmarkedet. Denne portfolio udarbejdes i forbindelse med eksamensprojektet.
Plakat–en plakat der viser proces bag udviklingen af præsentationsportfolio.
Generativ AI må bruges som et værktøj til eksamensopgaven. Gøres det, skal det dokumenteressom ekstra bilag påWiseFlow, og inkludere de prompts du har brugt, samt beskrive hvordan du har arbejdet med det genererede. Har du f.eks. ændret yderligere på det, brugt det til research, osv. Hver prompt skal desuden være nummereret, så du i plakatenkan referere til den. Generativ AI må ikkeanvendes til at generere indhold til plakaten.
Hjemmeside: https://absalonsen.com/
Plakat
Afleveringsdokument
Design Thinking
Under denne opgave benytter jeg Design thinking modellen, som giver en struktureret og kreativ tilgang til at udvikle løsninger med udgangspunkt i brugernes behov. Den består af 5 faser: Discovery, Interpretation, Ideation, Experimentation og Evolution. Gennem disse faser bliver jeg guidet gennem en proces, hvor jeg først opnår en dybere forståelse af problemet, dernæst udviklere idéer, tester dem og til sidst videreudvikler løsningerne på baggrund af feedback.
Discovery
I discovery-fasen har jeg arbejdet med at opnå et klart overblik over projektets formål, krav og kontekst. Formålet med denne fase har været at lægge det strategiske fundament for den videre udvikling af min præsentationsportfolio ved at indsamle og analysere relevant vide, både om branchen og målgruppen.
Formål og målgruppe
Mit primære mål med projektet er at udvikle en engagerende og visuelt tiltalende præsentationsportfolio i form af en hjemmeside, der vækker interesse hos webdesignbureauer. Jeg ønsker at demonstrere mine evner på en måde, der ikke blot fremhæver min faglige kunnen, men også viser, hvordan jeg vil kunne indgår i et dynamisk team, som arbejder fleksibelt og tilpasser sig forskellige kundeprojekter. Jeg har derfor valgt webdesignerbranchen som min specifikke målgruppe, da det er her, jeg ønsker at bringe mine kompetencer i spil.
KWHL
For at strukturere min viden og identificere eventuelle videnshuller anvendte jeg KWHL-modellen. Denne metode hjalp mig med at kortlægge, hvad jeg allerede vidste, hvad jeg ønskede at lære, hvordan jeg ville lære det, samt hvad jeg til sidst lærte
Know – Hvad jeg allerede vidste
Under kick-off fik vi præsenteret forskellige præsentationsportfolioer fra tidligere studerende. Jeg noterede mig en række fællestræk, som gik igen ved de fleste:
- En forside med billede af dem selv
- Projektside med visuelle eksempler på tidligere arbejde
- Kontaktside med kontaktformular
Disse elementer danner et grundlag for, hvad der typisk forventes i en præsentationsportfolio inden for feltet.
What – Hvad jeg ønskede at finde ud af
Jeg ønskede at dykke dybere ned i, hvad rekrutteringsansvarlige hos webdesignbureauer konkret kigger efter, når de vurderer nye kandidaters portfolioer. Jeg ville gerne vide hvad de gerne vil se på ens præsentationsportfolier. Samtidigt ville jeg også undersøge hvordan webdesignbureauernes egne hjemmeside er opstillet, designmæssigt og hvad der bliver lagt vægt på og hvilket sprog de benytter.
Derudover ønskede jeg at få et bedre overblik over, hvordan andre webdesigneres portfolioer ser ud.
How – Hvordan jeg indsamlede ny viden
Jeg udarbejdede og udsendte en række målrettede spørgsmål til ni forskellige webdesignbureauer. To af dem vendte tilbage med brugbare svar – henholdsvis fra en tidligere medstuderendes firma, https://naemt.nu/, og https://pantsat.dk/.
Sideløbende analyserede jeg bureauernes egne hjemmesider og lavede en bred søgning på nettet, herunder Pinterest, for at finde inspiration i andres webdesigners portfolier. Målet var at identificere både visuelle og strukturelle greb samt den kommunikation og tone, der går igen i en præsentationsportfolie.
Learned – Hvad jeg lærte
Indsigter fra interviews med Næmt.nu og https://pantsat.dk/
| Ansættelsesprocessen. | https://naemt.nu/ | https://pantsat.dk/ |
| Hvad er dit navn og stilling? | Tore E. Frederiksen Direktør og medstifter | Morten D. Laursen Head of IT / CTO |
| Hvad kigger i på som virksomhed når i ansætter? Hvilke kvalifikationer søger i? | Lige nu kigger vi mest efter en ny udvikler, der kan lave hjemmesider i Breakdance. Det er selve kompetencerne, vi søger. Hvis vi skal kigge ud over kompetencer, så leder vi efter en, der passer ind i vores kultur og arbejdsgange. Vi leder selvfølgelig efter et match. Der skal gerne være en bestemt energi, når jobsamtalen er overstået. Kompetencerne skal være mødt eller overgået, og så skal der være noget venskabeligt i selskabet. | Vi kigger meget efter webdesign, men det er også rart at der er noget generel sans for æstetik, og måske endda noget, så man også kan designe fysiske ting, som fx plakater eller forsendelseskasser |
| Når i står overfor en ansættelse proces af en designer, hvem og hvor mange er med til denne proces? | I det stadie, vi er i, så vil hele ejerkredsen deltage. Det vil så kun være to | Vores direktør og vores marketingansvarlige. Og så nok en afdelingsansvarlig på en eller anden måde, hvis den potentielle medarbejder bliver tæt knyttet til en specifik afdeling. Bemærk vi er 40 ansatte så ikke så store endnu. |
| Bliver der kigget på ens portfolio i forbindelse med ansættelse? | Ja, absolut. Anse det som værende jeres CV. Gerne beskriv, om det er “concept” eller rigtige produkter, der er lavet. | Helt bestemt. Det er en stor del af vores første sorteringsrunde |
| Udsende på præsentationsportefolie | https://naemt.nu/ Tore E. Frederiksen | https://pantsat.dk/ Morten D. Laursen |
| Hvad lægger du først mærke til, når du åbner en designers portfolio? | Vi er et lille webbureau, der lægger meget vægt på det personlige og nære. Man sælger også sig selv – ikke kun produktet eller sin kompetencer. Hav endelig billeder af dig selv. Profilbillede, billeder af at du arbejder, billede af at du samarbejder med bureauer (smiler, giver hånd sådan noget). Men selvfølgelig også dit gode arbejde | Hmm. Det faktiske design. Om siden er pæn. Er den nem at bruge. |
| Hvad synes du er vigtigst at vise i en portfolio: visuelle projekter, teknisk kunnen, tekstforklaringer – eller en kombination? | Relevante projekter. Ligesom før vil jeg ikke se flyers eller kaffekopper. Jeg vil gerne se webshops eller hjemmesider, fordi det er det, jeg søger. Og billeder af dig, fordi det er dig, man vælger i sidste ende. | Visuelle projekter. Det er det i hvert fald hos os. Men det er også fordi, vi har interne udviklere på webudviklerne, så der er det ikke nødvendigt at designeren kan kode. Det er selvfølgelig et plus, hvis de kan overtage noget af frontend-udviklingen, men det er ikke et must have. |
| Foretrækker du, at alle projekter er samlet på én side, eller opdelt med tydelige kategorier/undersider? | Klart opdelt. Husk at sende relevante projekter til bureauerne. | Det kommer an på mængden, men umiddelbart vil jeg sige en side er fin. Det viser også om designeren selv kan finde ud af at udvælge deres projekter. |
| Ønsker du at kunne se, hvilke programmer en person har kompetencer i – enten generelt eller i forbindelse med specifikke projekter? | Ja for søren. Så er der allerede et emne til en evt. jobsamtale. Hvis ingen af de programmer, der er nævnt, er programmer, som min virksomhed anvender, så er der ingen grund til at fortsætte. Det kunne være fedt at have et billede af et specifikt projekt, hvor der under er en overskrift: “Programmer, der anvendt:” Og så er der en logoliste. | Det er ikke så vigtigt. |
| Hvad ville få dig til at huske eller kontakte en person ud fra deres portfolio? | Personligheden. Gør alt, hvad du kan for at blive husket i den store stak ansøgninger. Personlighed, personlighed, personlighed. Du skal sælge DIG mere end dine kompetencer, vil jeg mene. Kort sagt. | Altså en unik hjemmeside ville være super, men det skal man måske også passe på med. Jeg tror, jeg kigger meget på projekter. |
Overordnet omkring interviewet
Ansættelsesprocessen hos både Næmt.nu og https://pantsat.dk/ er præget af fokus på både faglige kompetencer og personlighed. Når de ansætter en designer, lægger de stor vægt på relevante praktiske færdigheder, især inden for webdesign og æstetik – og i særdeleshed erfaring med specifikke værktøjer. Portfolien spiller en afgørende rolle i udvælgelsen og fungerer reelt som et CV. Her fremhæves især visuelle projekter og personlig fremtoning som centrale elementer. Det er vigtigt, at portfolien afspejler både kandidatens tekniske kunnen og menneskelige egenskaber, da det sociale og kulturelle match vægtes højt i de små og tætte virksomhedsmiljøer.
Jeg undersøgte blandt andet hjemmesiderne for Kvalifik og https://roza.dk.
Begge har meget enkle og funktionelle designs med fokus på brugervenlighed og tydelig call-to-action – især kontaktknappen er fremtrædende.
- Kvalifik kommunikerer med en kreativ og professionel tone.
- Roza bruger en mere imødekommende og direkte tone, som skaber en personlig forbindelse.
Deres hjemmesider adskiller sig ikke markant visuelt – de er minimalistiske, men effektive. De præsenterer stolt deres kundecases, og tonen afspejler deres respektive værdier og målgrupper.
Som led i min desk research brugte jeg også Pinterest til at finde et bredt udvalg af webdesigneres portfolier. Her fandt jeg værdifuld visuel inspiration – både i forhold til layout, typografi, farvevalg og indholdstyper. Det hjalp mig til at identificere best practices og tendenser inden for portfolio-design. Her kan min Pinterest ses Portefolie
Interpretation
I interpretation-fasen har jeg skabt en rød tråd mellem den research, jeg udførte i dicovery-fasen, blandt andet ved at definere en persona og fastlægge en Tone of Voice. Dette har bidraget til at tydeliggøre det fundament, mit projekt skal bygge på.
Tone of Voice
På baggrund af mine indsigter har jeg udviklet en Tone og Voice, som jeg anvender i min præsentationsportfolio. Den er målrettet webdesigner branchen, men samtidig afspejler den også mig som person. Min tone skal fremstå professionel, engageret, imødekommende og have en personligtilgang.
Persona
Jeg har desuden udarbejdet en persona og et tilhørende scenarie baseret på min research. Dette værktøj hjælper mig med at bevare fokus og overblik gennem hele projektforløbet.
Ideation
I deation-fasen handler det om at generer ideer og koncepter ved at anvende divergent tankegang.
Brainstorm
Efter jeg havde analyseret og hentet inspiration fra andre portfolier, lavede jeg en brainstorm for at få alle mine idéer ned på papir og skabe et overblik over mulige retninger for min hjemmeside.
Moodboard
På baggrund af mine idéer udarbejdede jeg et moodboard, som hjalp med at definere stemning, farver og visuelle referencer til det videre designarbejde.
Experimentation
I experimentation-fasen begyndte jeg at omsætte mine idéer og viden til wireframes for både mobil og desktop. På baggrund af de tidligere faser havde jeg allerede fastlagt hvilken stemning og det visuelle udtryk, som skulle danne grundlaget for projektet.
Slient feedback
Til silent feedback havde jeg udarbejdet et wireframe til både mobil (venstre )og desktopversionen (højre) samt et delvist færdigt style tile. Her modtog jeg en række nyttige kommentarer og forslag til forbedringer.
| Pros | Cons | Ideer til forbedringer |
| Fedt med ikonerne til programmerne Rigtig flot wireframe Godt at vise kompetencer med ikoner Godt farvevalg ift. At du gerne vil fremstå professionel Fint farve og godt wireframe Lækkert flow i dine wireframes God overskuelig hjemmeside Fedt med “bladre effekt” på billederne. God Tone of Voice, der afspejles i farvevalget. Flotte farver! Meget enkelt Godt mobil wireframe | Målgruppe og hvem du er? Mangler tekst om din stil og ide? Kunne evt. mangle nogle hovedoverskrifter på undersiderne De bløde kanter på knapperne kan godt afvige lidt fra det professionelle udtryk At det kun er blålige farver gør det lidt forvirrende Hvem henvender du dig til, og hvad kan du? | En farve med kontrast Noget farve der giver mere liv til siden Husk at inddrage noget der får kunderne til at vælge præcis dig Lav monogram udgave af program ikonerne. Lidt mindre farvemætning af blå farve ville være godt. Når du bruger UI elementer, husk at bruge alle de ting folk forventer med dem. Knapperne skal alle ligne det samme, lige meget hvor de er. Gør kontakt knappen mere tydeligere |
Efter at have gennemgået feedbacken, valgte jeg at videreudvikle mit wireframe og færdiggøre style tile’et, så designet blev mere sammenhængende og gennemtænkt.
Style tile
Style tile’et viser de visuelle grundelementer i mit portfolio-design – herunder farver, typografi, ikoner og UI-elementer. Det sikrer en ensartet og professionel stil, der afspejler både min personlighed og målgruppen: webdesignbureauer.
Mockup
Da både mit wireframe og style tile var på plads, samlede jeg det hele i en mockup af hjemmesiden. Jeg udarbejdede mockups til både mobil (venstre) og desktopversionen (højre) for at sikre, at designet fungerede responsivt og for at gøre det lettere at kode layoutet senere – med en tydelig visuel reference for begge platforme.
C.R.A.P
Igennem min udarbejdelse af wireframe og mock up har jeg arbejdet ud fra C.R.A.P-principperne – Contrast, Repetition, Alignment og Proximity, da det har været vigtigt for mig at skabe et overskueligt, professionelt og brugervenligt layout.
Contrast
For at skabe visuel kontrast har jeg anvendt en stærk blå farve til knappen og menu, som skiller sig tydeligt ud den lyse baggrund og gør navigationselementerne let genkendelige. Teksten står med mørk skrift på hvid baggrund, hvilket fremmer læsbarheden på tværs af alle sider. Overskriften og brødtekst er tydeligt adskilt med både farve og størrelse, hvilket skaber et klart hierarki og gør det nemt for brugeren af navigere og forstå indholdet.
Repetition
Der er en tydelig rød tråd i designet med gentagelser af farver, skrifttype, knapdesign og layoutstruktur på tværes af alle undersider. Menulinjen og footer følger samme stil og opstilling, hvilket skaber genkendelighed og sammenhæng. De forskellige projekter vises i en ensartet skabelon og tekstblokke er struktureret på samme måde fra side til side, hvilket gør hele websitet nemt at orientere sig i.
Alignment
Elementer er konsekvent justeret for at skabe orden og et professionelt udtryk. Både tekst og billeder flugter pænt enten centralt eller langs samme lodrette akse. På portefoliosiden er projekterne placeret i kolonner med ens justering, hvilket giver et overskueligt og balanceret layout. Kontaktformularen er ligeledes centralt og simpelt opsat med veljusterede felter, hvilket gør den brugervenlig og let at udfylde.
Proximity
Relaterede elementer er placeret tæt på hinanden, hvilket gør indholdet let at forstå og navigere i. Projekttitler står lige under billederne, og tilhørende ikoner er placeret direkte under hver beskrivelse, så man hurtigt kan aflæse, hvilke programmer der er blevet brugt. I kontaktsektionen er formularfelter og kontaktoplysninger grupperet logisk, og footeren gentager den samme struktur og opdeling på alle sider. Det skaber en logisk og intuitiv brugeroplevelse.
Kodning
Jeg kunne dermed begynde kodningen af hjemmesiden ved hjælp af HTML5 og CSS. Det har været en udfordrende, men meget lærerig proces, hvor jeg har omsat mit design til en fungerende hjemmeside. Jeg startede med at opbygge desktopversionen og anvendte media queries undervejs for at sikre, at siden blev responsiv og fungerede godt på forskellige skærmstørrelser.
Billedeoptimering
For at forbedre både hastighed og brugeroplevelse, har jeg optimeret alle billeder i Adobe Photoshop. Ved at reducere filstørrelserne har jeg sikret, at hjemmesiden loader hurtigere og fungere mere effektivt.
Evolution
I den sidst fase evolution, handler det om at videreudvikle og forbedre løsningen på baggrund af feedback fra brugere. I mit projekt betyder det, at hjemmesiden skal afprøves af reelle brugere med det formål at afdække både styrker og svagheder – herunder potentielle problemer i forhold til funktionalitet, design og den overordnede brugeroplevelse.
Jeg planlægger at gennemføre brugertest, hvor testpersonerne interagere med hjemmesiden og løser konkrete opgaver, mens jeg observerer og dokumentere deres oplevelse. Efterfølgende vil jeg analysere deres feedback og anvende resultaterne til at optimere hjemmesiden.
Refleksion
Det kreative element i denne opgave har været en af de største udfordringer for mig. Jeg oplevede, at det var sværte at komme i gang, fordi jeg havde svært ved at finde den rette idé og tilgang. Kreative processer kræver ofte, at man tør tænke anderledes, eksperimentere og tager chancer – og det har jeg ikke følt mig helt tryg ved begyndelsen. Min motivation var derfor heller ikke særlig høj i starten, men den kom heldigvis, da kodningens delen begyndte.
Det meste af 1. semester har vi arbejdet meget i grupper, og det har været en arbejdsform, jeg sat pris på. I gruppearbejde føler jeg mig mere motiveret og inspireret, og jeg oplever, at idéudviklingen bliver langt nemmer, når jeg har nogen at sparre med. Samtaler og samarbejde med andre giver mig energi og hjælper mig med at se nye perspektiver, som jeg måske ikke selv ville være kommet frem til.
Derfor har det også været en stor hjælp at have en studiegruppe ved siden af det individuelle arbejde. Selvom selve opgaven skulle laves alene, har det været utrolig givende at kunne sparre med mine medstuderende, dele idéer og støtte hinanden undervejs. Vi har hjulpet med at holde motivationen oppe, givet feedback på hinandens tanker og løbende udvekslet erfaringer og udfordringer. Studiegruppen har været en form for støttepunkt, der har gjort processen mere overskuelig.
På den anden side har det været en god og vigtig erfaring at stå på egne ben i denne opgave. Det har tvunget mig til at tage ansvar for hele processen – fra idé til færdigt produkt – og det har givet mig en større forståelse for, hvordan jeg håndterer kreative opgaver, når jeg arbejder alene. Jeg har lært, at jeg godt kan finde på idéer og træffe beslutninger selv, selvom det tager længere tid, og kræver ekstra arbejde at komme i gang.
Alt i alt har denne opgave givet mig værdifuld indsigt i både mine styrker og udfordringer. Derudover har jeg fået en bedre forståelse for, hvilken arbejdsform der motivere mig mest, og hvordan jeg kan bruge den viden i fremtidige projekter – både selvstændige og i grupper.