om-mig

Fase 0 - Forberedelse

Alt godt starter med et godt fundament. Derfor gik jeg igennem alle de noter jeg havde skrevet fra grundbogen og andre materialer, samt alt den feedback vi fik i tidligere flows.

Til at sammenlægge alt det jeg arbejdede med, oprettede jeg et FigJam. Personligt er det mit favorit værktøj til at brainstorme, lave noter, moodboards og gemme alt dokumentation for hele projektet.

Til at kickstarte min kreativitet brugte jeg “the six thinking hats” metoden. Denne brainstorming metode bruges ofte i grupper, men jeg valgte at bruge den til at få alle mine tanker og ideer skrevet ned på en struktureret måde. Det jeg skrev blev desuden uddybet og brugt i resten af projektet. Den “hvide hat” blev fx til starten af min OBS og PBS, mens den “grønne hat” kickstartede min brainstorming omkring min hjemmesides styling.

Fra starten af vidste jeg, at jeg ønskede at lave en meget personlig portfolio. Jeg har en unik aesthetic jeg er tiltrukket af og det ønskede jeg at fremvise. Elementer som en tegnet avatar, logo, og generelt “cute” aesthetic blev skrevet ned, samt en liste over andre projekter jeg har lavet privat, som jeg gerne ville fremvise i mit portfolio.

Fase 1 - Projekt planlægning

Til et stort projekt som dette er planlægning en must. OBS blev lavet under brainstorming. Det primære mål er at aflevere et portfolio som jeg selv har programmeret, men den skal også inkludere:

En kort video

Projekter fra tidligere flows

Min designprocces

Og fremvise min personlighed

Min PBS uddybede jeg til en mere generel liste over alle trinene, som skulle til for at færdiggøre min hjemmeside. Jeg lavede også et simpelt Gantt Chart, for at få en ide om hvor lang tid det hele ville tage, og for at kunne sætte deadlines.

Fase 2 - Research

Med fundamentet klart og et sløret billede om hvad jeg ønskede at lave, begyndte jeg at kigge på andre multimediedesigneres portfolio for inspiration. Struktur, præsentation og hvad de prioriterede at fremvise, blev noteret.

Min største inspiration blev Nintendo's Animal Crossing: New Horizons hjemmeside. Den er unik, sjov at scrolle igennem, artistisk og repræsenterer Animal Crossing perfekt, men stadigvæk struktureret og let at navigere. Der er en masse elementer, der overlapper hinanden. Billeder og tekstbokse har en border og der sker en masse visuelt, med unikke baggrunde og tonsvis af billeder.

Beskrevet kort, så ligner hjemmesiden en digital scrapbog. Det blev nøgleordet for, hvad jeg ønskede at min hjemmeside skulle ligne.

Fase 3 - Style

Jeg begyndte med det samme på mit moodboard. "Cute", “sjov” og “personlig” er de ord jeg gerne ville fange. En kort gennemgang af det mit moodboard inkludere er (fra venstre til højre):

Screenshot fra Animal Crossing's hjemmeside. Layout og borders er noget jeg gerne vil inkludere.

Klistermærker - Man kan ikke have en scrapbog uden dem. Desuden er de meget simple, hvis jeg selv ville lave nogle i min egen stil.

Plakat fra serien “Bee and Puppycat” - Det er nok et af mine favorit serier og passer perfekt til mit koncept. Serien bruger mange pastel farver, som gav mig inspiration til min colorpalette.

Natur og himmel: Alt det pinke og lilla havde brug for en kontrast, og her fandt jeg grøn til at passe perfekt. Desuden ville jeg gerne finde balancen i, ikke at gå for langt mod enten minimalistisk eller maximalistisk indhold og stilart.

Til sidst skulle et stylesheet laves. Jeg valgte at bruge 2 fonte; en til overskrifter og en til brødtekst. Overskrifterne synes jeg skulle have en serif font, for at give en “vintage vibe”. Resten af teksten valgte jeg skulle være en sans-serif, så hjemmesiden virkede mere moderne og lettere at læse. Udover min dokumentation, så er der heller ikke meget tekst på min hjemmeside, så det ville fungere fint.

Da jeg skulle vælge en farvepalette, lavede jeg mange tests for at se hvilken kombination ville være mest scanne-venlig. Jeg startede med 6, som jeg fandt online.

Her valgte jeg en, som jeg lavede flere test med, indtil jeg fik et tilfredsstillende resultat, som kunne bruges som template til hele min hjemmeside.

Som bonus vidste jeg, at jeg ville have en avatar og logo, men det skriver jeg mere om i fase 5.

Fase 4 - Wireframes

Efter min forberedelse havde jeg et klarere billede af, hvordan min hjemmeside skulle se ud. Med princippet “mobile first” begyndte jeg at tegne mine low fidelity wireframes. Fokuset her var et generelt layout, som ville komplimentere det, som jeg gerne ville fremvise. Mit portfolio er noget, jeg kommer til at bygge videre på i fremtiden. Derfor er den primære målgruppe for denne version af mit portfolio rettet mod mine underviserne. Dette ses på forsiden, hvor et link til dokumentationen er noget af det første man ser. Desuden er scope og indhold også dikteret efter, hvor meget tid jeg fik, og hvad eksamenskravene er.

Mit portfolio skal dog bruges i fremtiden, og i den sammenhæng skal den også bygges til, at kunne tiltrække potentielle klienter. Mit mål er, at kunne arbejde som freelancer, så for mig ville en potentiel klient være min persona, Lise. Mit portfolio er rettet mod hende, da hele min side skriger “cute aesthetic". Min hjemmeside indeholder mange illustrationer, og på min underside, “om-mig”, kan hun læse, at jeg også har kendskab til gaming, og specifikt den målgruppe, hun gerne vil ramme. Det kan gøre vores potentielle partnerskab meget nemmere, da vi har samme baggrundsinfo og vision.

Derfor er denne portfolio mere en “proof of concept”, for hvad mit færdige portfolio kunne være, når jeg skal begynde at søge arbejde.

Med den som reference, så byggede jeg en high fidelity wireframe i Figma. Da det her var et soloprojekt, kunne jeg med det samme bygge videre på min wireframe, og gøre det til min prototype.

I en rigtig scrapbog er det meningen, at der ikke skal være nogle regler. Den skal være sjov og fri. Det ville dog ikke fungere på en hjemmeside, specielt ikke hvis den skal være brugervenlig. Derfor satte jeg nogle grundregler, med gestaltlovene som reference. Eksempler ses i loven om nærhed, da min hjemmeside er opdelt i sektioner, der har god afstand mellem hinanden, for at vise hvad der hører sammen. Grids blev brugt til at sørge for at bokse og billeder ville have lignende bredder og afstand mellem siderne. Alle vigtige tekstbokse er grønne, mens de lilla er til ekstra kommentarer eller labels. De vigtige bokse er grønne, fordi de har større kontrast med den pinke baggrund. Derfor vil man automatisk se det grønne først. Boksene med tekst har en buet, hvid border, mens billeder har en kantet border. I mobilversionen har alle bokse med borders samme størrelse, mens i PC-versionen er der en grænse for, hvor store de må blive.

De regler vil sørge for, at selv når layoutet ændrer sig mellem hvert segment, så vil læseren stadigvæk kunne bevidst scanne det hele i den forventede rækkefølge.

high fidelity wireframe mobil version i figma

Fase 5 - Illustrationer

Som jeg også beskriver på min hjemmeside, på undersiden "om-mig", er mine styrker det artistiske. Jeg elsker at tegne, og siden det er en stor del af mig, vidste jeg at der skulle være nogle originale illustrationer til projektet.

Animal Crossing var allerede en stor inspiration for hele min hjemmeside, så jeg valgte at fortsætte med det, og tegne min karakter i Animal Crossing: New Horizons som min avatar. Min karakter i spillet lignede mig allerede, og det var en chibi-figur, som både ville passe til mit stylesheet, og være simplere at tegne. Desuden kunne karakterens hoved bruges som logo til min side. Jeg tog derfor nogle screenshots fra spillet, som jeg kunne bruge som reference.

Derefter tegnede jeg dem i Adobe illustrator, da de som vektorgrafik kan skaleres op og ned, uden at blive pixeleret.

Fase 6 - Faldet

Udefra så alt godt ud. Jeg lavede fremskridt, langsomt, da det var mit første soloprojekt, men der var fremskridt. Men under kulisserne arbejde jeg 10-11 timer hver dag. Hvert minut jeg havde, brugte jeg på projektet. Dette var en dårlig vane, jeg havde fra tidligere flows. Men dengang var det max 2 uger ad gangen, hvor jeg også var afhængig af andre, som satte en stopper for, hvor meget arbejde jeg kunne lave hver dag. I dette projekt var der ingen grænser, da jeg var min egen chef. Pauser, mad og søvn var alt sammen noget, der kunne nedskæres for mere arbejde. Efter 2 uger var jeg nødt til at lytte til min krop, hvis jeg ikke ville risikere at blive udbrændt.

Fase 7 - Håb

Jeg aftalte med det samme et møde med min SPS-mentor. Jeg snakkede med andre fra min klasse, og mine venner, om det. Sammen skabte vi en mere realistisk, og sundere, plan for resten af projektet. Den blev bygget på konceptet af “minimum viable product”. Jeg havde fokuseret så meget på mit drømme-portfolio, at scope og mine egne forventninger blev alt for urealistiske. Min underside “andre projekter” blev ændret til "work-in-progress". Mit layout ændrede jeg til en mere klassisk” 2 bokse pr. række": tekst, billede, tekst, billede osv. Og ja, jeg reducerede mine arbejdstimer drastisk.

Den nye plan ville levere et respektabelt resultat, som opfyldte alle de formelle krav. Resten af mine planer for, hvad jeg gerne ville inkludere, blev lagt til side.

Fase 8 - Kodning

Kodning er tidskrævende, og med erfaring fra tidligere projekter, vidste jeg, at jeg havde brug for så meget tid som muligt. Jeg havde tidligere i projektet kodet min navigationsmenu, da det var min største udfordring sidste gang.

Med de regler jeg lavede i min wireframe, kunne jeg begynde at kode classes, som jeg kunne kopiere til hver relevant div. Det skabte konsistens for hele hjemmesiden, og gjorde det nemt at kopiere alt det tekst, som jeg havde skrevet i min Figma-prototype. For det meste brugte jeg mit sidste kodningsprojekt fra flow 2, som reference og kopi. Nye elementer, som jeg ikke kendte til, søgte jeg om hjælp til på W3Schools. Når min kode ikke virkede, så spurgte jeg Copilot til råds. Min header på mobilversionen er som eksempel en kopi af W3Schools's “How To - Full screen Overlay Navigation”, med hjælp fra Copilot til hvordan jeg kunne tilføje en transition.

Fase 9 - Video

Min video skulle være en kort, 30 sekunder, og simpel introduktion til mig, mit arbejde og min hjemmeside.På min hjemmeside er videoen på forsiden. Men, manuskriptet skrev jeg som om, at videoen ville blive set af en person på et socialt medie (som YouTube eller Instagram). På den måde fungerer videoen både som reklame til mit portfolio, men også som en intro, hvis man allerede er på hjemmesiden. Jeg lavede et simpelt storyboard med min avatar som fokus. Videoen redigerede jeg med DaVinci Resolve, da jeg har mere erfaring med det. Videoen blev så lagt ind på forsiden af mit portfolio.

Fase 10 - Dokumentation

Jeg gemte min dokumentation (denne underside) til sidst. For at matche resten af min hjemmeside, følte jeg at min designproces skulle beskrives mere personligt. Som hvis jeg skrev det i min dagbog. Der er sket så meget i dette projekt. Det jeg lærte om projektstyring, er lige så vigtig som mine begrundelser for, hvorfor jeg valgte et specifikt design element, i forhold til hvordan det færdige resultat endte ud. Hvis jeg gerne vil være freelancer, så er de ting jeg lærte om scope og forventninger, fra andre og fra mig selv, helt uvurderlige. Desuden er hvert et design en historie, der er lige så spændende som det færdige produkt.

For links til min FigJam, Figma prototype og min litteraturliste:

Klik her

Design procces