For at nå det endelige resultat for designet af min portfolio, er der trin, værktøjer og modeller, der er til gavn for at opnå det bedste workflow og oversigt. Således ville jeg ikke komme ud i en situation med stilstand.
Link til min figJam er her!
I stedet for at begynde blindt på at kode og designe lige fra hoften, valgte jeg at sætte det systematisk op for mig selv. Jeg havde en plan og oversigt over, hvor jeg var i min proces og hvad jeg skulle lave undervejs. Jeg begyndte at sætte en PBS model (Production Breakdown Structure model) op så jeg havde et overblik over, hvad min portfolio skulle indeholde alt fra digitale medier til kodet sider.
Jeg delte min PBS op i tre dele, da det var den bedst mulige oversigt for mig at arbejde ud fra. I første del har vi Projekter, hvilket skulle indeholde, hvad der var blevet undervist undervejs i alle de fire forskellige flows under første semester. I anden del har vi Media, som indeholder alt optaget og fotograferet materiale, der skal bruges til hjemmesiden. Til sidst har vi den tredje del som er Hjemmeside bestående af al HTML kodningen, CSS styling og dokumentering af selve processen for udviklingen af min portfolio.
Ved brug af PBS gav det en god oversigt over de overordnede dele jeg skulle bruge til hele min proces og kunne krydse, hvad jeg havde fuldført.
Efter min PBS var sat op begyndte jeg at arbejde på en WBS (Work Breakdown Structure), som vil give mig en god oversigt over de enkelte detaljerede dele af, hvad jeg skal kunne fuldføre for at krydse de enkelte dele fra min WBS samt PBS.
En WBS giver en oversigt over en estimeret tid for hver opgave, der er blevet skrevet op i forhold til de forskellige kategorier og opgaver. For eksempel for hovedopgaven af WIreframing, er der tre andre underdele af opgaver, der skal fuldføres før hele Wireframing ville være færdig. For at give et forventet tid, er der skrevet op med den estimerede tid, der kunne forventes af opgaverne der enkeltvis ville være færdige.
Her fik jeg sat en mere detaljeret og grundig oversigt op over de enkelte dele, der skulle fuldføres. Således kunne jeg være sikker på at få det meste med, og være effektiv under min arbejdsproces med den givne tid jeg havde sat op til mig selv.
I stedet for bare at springe ud i det og arbejde uden henvisning for hvad der skal gøres først, så satte jeg også et Ghantt Chart op, som er et skema med de forskellige hovedopgaver der skal fuldføres inden for en given tid i forhold til hvor mange dage eller uger det kan tage. Ghantt Chartet gav mig en god oversigt samt en balanceret workflow så jeg vidste hvad jeg skulle begynde med og hvornår det kunne påbegyndes.
Efter planlægning gik jeg i gang med designfasen. Jeg valgte at lave et sitemap, så jeg havde et overblik over hvilke sider og undersider der skulle være i hele min portfolio. Det var en kort planlægning da hjemmesiden ikke var noget større og ikke skulle være overvældende.
Jeg gik derefter til at lave et style guide over min portfolio og valgte at gå efter en mere stilren, men velkomne hjemmeside. Jeg valgte at gå efter en dyb nedtonet mørkegrå, så den ikke var for skarp for øjnene. Min brødtekst har den samme grå farve, ellers har den en sekundær farve, som er mere cremet men en højere kontrast i forhold til den grå farve som den af og til vil dele plads med i en form af en nedtonet grå tekstboks og lys cremet tekst.
Til type af tekst til min brødtekst, gik jeg efter en font med seriffer, da det ville give min side et sofistikeret træk sammen med mit valgt at det skulle være en præsentabel og stilren design. På trods af at sans-serif tekster kunne fungere fint på grund af den digitale læsbarhed, gik jeg stadig med en font som gjaldt på hele hjemmesiden som er med seriffer. Min font hedder Solway og jeg fandt den gennem Google Fonts.
Fik også designet et simpelt logo inde på Illustrator med mit fulde navn som skulle passe ind med hjemmesiden og den stil som bliver præsenteret, samt fik den den mørkegrå farve og samme font som bliver gengivet i min portfolio.
Efter jeg havde det på plads begyndte jeg at designe min portfolio ved at tegne en low fidelity skitse over min hjemmeside indtil jeg var tilfreds og kunne komme videre til high fidelity inde på figma. Jeg gik efter simple former og enkelte sektioner med nogle gestaltlove i tankerne imens jeg designede i low fidelity, som så i færdige træk blev mere fremtrædende i min high fidelity.
Til sidst under min wireframe fase satte jeg så min high fidelity design sammen med det jeg havde lavet i min style guide og implementeret mine farver og elementer der skulle træde frem i mit design. Jeg havde så til sidst mit final design og kunne endelig begynde med at kode hele hjemmesiden.
Da jeg skulle til at begynde med at kode hjemmesiden, huskede jeg på at begynde at kode mobile first da jeg kommer til at bruge flexbox senere når jeg skal have en desktop version til sidst. Det gør det også nemmere, da mobile first altid er mere simpelt at sætte op og kode i forhold til hvis jeg begyndte med desktop version først og så gik til mobilversion.
Min fremgangsmåde med at kode mine sider, var at kode alle sider i mobilversion først og slutte af med at flexe mine hjemmesider og lave dem til desktop versioner efter. Imens det så blev gjort, havde jeg så også placeholders for alt foto og video til hvor de skulle placeres inde på hjemmesiden. På den måde kunne jeg forberede min hjemmeside for alt medie der kunne placeres direkte ind ved at ændre på mine stier inde på html koden.
Mange gange i min HTML kode bruger jeg semantisk html for at undgå at bruge for mange div til opbygningen af min hjemmeside og give mit indhold mere betydning for eventuelt andre der skal læse min kode, og for ekstra støtte placerede jeg også rigeligt med kommentarer så man kunne se hvilke elementer var hvad og hvilke funktioner de eventuelt også kunne have, specielt inde i min CSS kode.
Til funktionen af min kontaktformular byggede jeg en simpel formel op og brugte en online tutorial og brugte hjemmesider til at kunne sætte det op samt få den til at fungere. Jeg fandt en video der hjalp mig med at sætte den op så den kunne have en faktisk funktion og modtage mails ved at linke til et værktøj der ville holde styr på mine beskeder, som jeg ville kunne modtage.
For billeder havde jeg en samling af fotos som jeg havde taget hen ad årene og brugt til mine sociale medier til egen promovering og fremvisning af mine fotografiske færdigheder. Billederne har jeg urørt og ikke redigeret, men jeg valgte nogle få til fremvisning som kunne vise mine færdigheder og stil og redigerede dem inde på Photoshop eller Lightroom. Jeg placerede dem inde i et simpelt galleri, som jeg har kodet til hjemmesiden.
Til billeder til siden selv udover galleriet, såsom logo, profilbilleder og billeder til artikler. Har jeg taget nogle billeder selv hjemme af mine værktøjer og taget til lokation til brug for hvor jeg går på uddannelse. Profilbilleder var noget jeg havde i forvejen, som jeg kunne bruge til forsiden og om mig.
Til mine videoer valgte jeg at gå efter simple sekvenser som kunne være i lig med nogle valgte sider eller være i lig med bestemte kategorier og deres emner. Til det brugte jeg eget kamera og udstyr som jeg har til rådighed, da jeg har det til brug i forhold til mine egne projekter og interesse. Jeg gik efter nogle scener med panoreringer og eventuelt langsom zoom. Til præproduktionen havde jeg sat mindre storyboards op til de forskellige sekvenser, og da der var ingen dialog, havde jeg ikke brug for et script. Til selve optagelserne var lokationerne i eget hjem, hvor jeg havde sat en lille scene op til min idé af det professionelle og stilrene, så det passede med min styleguide.
Jeg har lavet en underside som hedder Projekter som skal fremvise mine forskellige projekter gennem de flows jeg har haft under første semester. Jeg fik indsamlet de vigtigste ressourcer og materiale som kunne bruges til fremvisning af forløbet gennem tiden. Jeg fik kontaktet mine adskillige studiekammerater og delte indhold af vores flows til brug af vores portfolio. Den visuelle opsætning ville være simpel og fremvise det vigtigste af indholdet samt det færdige produkt eller løsning i vores projekter.
