Portfolio Design

En start

Før alt, har jeg jo været inde på pinterest, neocities og rundt på nettet for at finde inspiration. Men efter det var det første trin en mockup i photoshop. Ved brug af artboards samlede jeg en masse billeder fra film og musik jeg synes om, som inspiration til farver. Men vist under er det første design på en forside. Fontene valgte jeg allerade her, og har beholdt indtil nu, samt den blå+gul forside, og en rød kontakt side. Dog nogen lidt andre nuancer.

1. Første portfolio mockup i photoshop

Herefter var det jo bare om at bringe det til virkelighed, da jeg førhen har taget en HTX, på programmeringslinjen, valgte jeg at give det et skud i CSS og HTML, da jeg ikke var fan af Wix, Canva eller nogle af de andre online hjemmesideværktøjer, da jeg syntes, de føltes restriktive. Det gik egentlig okay, men jeg blev hurtigt mindet om, hvorfor jeg skiftede fra programmering til at være mediegrafiker.

2. HTML kode til index side

Er du interesseret, kan du downloade det, jeg fik lavet, her.

Portfolio.zip

Framer

Efter at prøve mig frem i CSS / HTML var jeg bare nød til at indrømme at mine programmeringsskills bare ikke rækker, i længden vil det kræve for meget tid at blive bedre til. Så fik jeg også åbnet mine øjne for Framer, dette skal ikke være en reklame, men Framer er genialt.

Det skal dog siges at den hjemmeside du ser nu har taget lang tid at komme til. Og mit første forsøg så slet ikke lige så godt ud. Framer er man nød til at sæt sig selv ind i. Dog når man har fået ideen og en basic forståelse er det enormt stærkt til hjemmesider. Her er mit første forsøg på et portfolio med framer

3. Første portfolio side i Framer

Det første design endte jeg hurtigt med at blive træt af. Min primær kritik var at alt bare lå derpå uden system og orden. Så syntes jeg også siden var for besværlig at navigere. Så efter lidt tid satte jeg mig ned en dag og tænkte "hvordan skal jeg lave mit portfolio ordenligt og sytematisk". Og hvad er mere ordenligt og systematisk end sorteret skuffe med folderere.

Så det var næste plan, ideen var ret simpel. At lave det statisk i Framer var ikke det store besvær. Det fungerer bare som 4 kasser (frames) med tekst inden i. Så på vær ny side havde jeg så bare flyttet nogle kasser foran de andre og ændrede den primær kasse til at passe.

4. Første navbar og footer redesign

Nu fyldte forsiden ingenting i forhold til før, og det var tydeligt hvor du fandt mit arbejde og kontaktede mig. Det var jo egentlig alt jeg havde brug for. Men det var ikke nok, ikke for mig i hvert fald.

Jeg ville gerne give det en 3D effekt og animerer den, så det rent faktisk opfører sig som 3 folderer vil. Fremover vil jeg kalde folderne for min navbar (navigations bar). Jeg gjorde det vil at lave min navbar til et component, derinde lave 3 states. Ved at sæt layers og frames op ordenligt, samt en lang række små justeringer havde jeg en component der ligner det du ser nu. Men i praksis fungerede den ikke, da når mit URL skiftede, så cuttede det alt animation. For at fix det har jeg været nød til at lave et layout med min navbar, jeg laver også footer i samme layout. Det layout er så lagt på alle de sider jeg vil have en navbar + footer, så stortset alle sider. Og fordi det er 2 components i et layout derefter lagt på siderne. Så kan framer se det som sin egen individuelle ting og derfor fungerer animationer så også på URL skift.

TLDR : Den skulle se sej ud og det var en del arbejde.

5. Opdateret navbar design