portfolio

Billede

Startprocessen

Jeg startede processen med at oprette en oversigt på Trello, hvor jeg lavet en liste over alle de opgaver, jeg skulle få lavet. Derefter søgte jeg på nettet for at finde inspiration til min portfolio, som jeg derefter skitserede i Figma. Jeg har senere justeret portfolioen, da jeg fandt en mere æstetisk løsning, som jeg synes fungerede bedre.

Blomst 1 Blomst 2

Forsidebillede

Forsidebilledet har jeg selv tegnet, med inspiration fra en portfolio lavet af minjeaseo.com. Jeg startede med at tegne det på papir, da jeg føler mig mere komfortabel med den metode, og da jeg ikke er så erfaren med at tegne digitalt. Efterfølgende overførte jeg tegningen til min computer og arbejdede videre med den på min tablet i Adobe Illustrator for at få det til at se mere professionelt ud.

Blomst 1 Blomst 2
Billede
Billede

Kode

Jeg har valgt at kode min side med Mobile First-princippet og, Jeg har forsøgt at gøre koden så enkel og overskuelig som overhovedet muligt. Alle elementer er organiseret i klasser med navne, der gør det nemt at forstå, hvad de er – for eksempel frontpage.

Jeg har desuden anvendt grid til at organisere mine projektkasser og undersider. For projektkasserne har jeg sat et standard grid-layout til mobilversionen, hvor de vises på én række. På desktopversionen opdeles de i tre kolonner ved siden af hinanden. På mine undersider for mobil har jeg holdt designet ens, men på desktopversionen har jeg opdelt layoutet, så der er et billede ved siden af teksten.

Desuden anvender jeg også kode som jeg har fra blandt andet Uiverse.io, stackoverflow.com, codepen.io og fra w3schools.com.

Blomst 1 Blomst 2

stylingen

Jeg har valgt at style min portfolio med fokus på brugervenlighed. For eksempel har jeg inkluderet en "scroll ned"-knap for at gøre det tydeligt, at man kan scrolle ned, og for at gøre det lettere for brugeren at navigere. På forsiden har jeg også tilføjet billeder, der illustrerer indholdet af mine projekter, og tekst, der vises, når man holder musen over billederne. Jeg har valgt at inkorporere mine to yndlingsfarver, pink og blå, gennem alle undersider og andre elementer, da det hjælper med at gøre min portfolio mere personlig.

Jeg har desuden også anvendt CRAP-principperne (Contrast, Repetition, Alignment, Proximity) gennem hele designet. For kontrast har jeg brugt hvid tekst på en farverig baggrund på forsiden og hvide kasser med sort tekst på undersiderne. Gentagelse har jeg opnået gennem farverne, hvor blå og pink går igen på alle sider, og skrifttypen, som er Arial/Helvetica på alle sider, bortset fra overskriften på forsiden, hvor jeg bruger Josefin Sans.

Jeg har også sørget for at alt tekst, der ikke er overskrifter, er venstrejusteret med ens afstand mellem ord og bogstaver. Nærhed har jeg brugt i headeren og footer, hvor alle overskrifter i headeren er på samme række, og ikonerne i footeren er tæt på hinanden.

Blomst 1 Blomst 2
#ec9ad5
#febbbd
#fad0c4
#9ce6fc
#8cd9fc
#fdf9f0
#ffffff
#000000
53421 saves
Billede