Eksamen - Projektbeskrivelsen

Opgaven lyder på at jeg skal redesigne mit website, som udgør mit nuværende portfolio. Mit nuværende portfolio blev produceret på Flow 2 på 1. semester.

Med udgangspunkt I hvad jeg har lært i løbet af 1. semester på Multimediedesign-uddannelsen, skal jeg redesigne mit Portfolio indeholdende det jeg løbende har arbejdet med, samt fremover det arbejde jeg kommer til at udføre på de kommende semestre.



Alle delopgaver til opgaven vil blive gennemgået nedenfor på denne side.


Projektstyring

WBS

I starten af min planlægningsfase lavede jeg en WBS for at nedbryde mine arbejdsopgaver til de arbejdspakker som jeg skal lave for at komme i mål med opgaven.

Gantt Chart

Jeg overførte mit WBS til et Gantt Chart for at få bedre overblik over alle elementer i projektet. Jeg lavede det som en grafisk tidsplan med start og slutdatoer for de enkelte opgaver.

Sitemap

For at få overblik over hvor mange sider min Portfolio indeholder og for at få overblik over dens hiraki lavede jeg et sitemap.

Skitser

Den indledende fase til selve opbygningen af siderne kom igennem skitser. Skitser til navigation og brug af links og knapper.

Wireframes

For at få et godt webdesign lavede jeg wireframes i Adobe XD. Jeg lavede et enkelt udkast fordi jeg godt vidste at det blev det grafiske udtryk og indholdet på siden der ville blive det centrale fokuspunkt.

Kortsorteringstest

Min testperson udførte testen stort set på den måde som jeg på forhånd havde opdelt kategorierne. Enkelte kort blev sat forkert pga. manglende viden om studiet.

Responsive image

Formål

Responsive image

Formål med hjemmesiden

Jeg vil gerne have et Portfolio der afspejler mine kompetencer. Dem jeg allerede har med mig men især de nye der kommer til igennem Multimediedesign-studiet.

Jeg håber på, at dem der besøger min hjemmesideside, vil blive nysgerrige på mig som Mulitmediedesigner og se mig som en evt. samarbejdspartner og hovedformålet vil være at få de besøgende til at udfylde min kontaktformular, min ”call-to-action” (CTA).

Mit design på siden og mit grafiske indhold skulle gerne kunne fange folks opmærksomhed og motiverer dem til at klikke. Jeg har placeret mine CTAér flere steder på min forside i håbet om at de ikke er til at overse!

Responsive image

Målgruppe

Målgruppe

Min primære målgruppe er en leder eller en mellemleder. En der via sin stilling vil kunne ansætte og have brug for en Multimediedesign-praktikant.
Personen søger efter en medarbejder der kan varetage mange dele af en grafisk produktion indenfor digitale opsætninger men også på de trykte medier.

Min sekundære målgruppe er lærere på Multimediedesign-uddannelsen. Her kan de få et overblik og min kunnen og udvikling igennem studiets forløb.

For at få en mere dybdegående redegørelse for min målgruppe, klik her

Responsive image

Brugertest

Brugertest

Jeg oprettede et spørgeskema igennem Google Docs og sendte ud til 3 potentielle målgrupper, en Direktør, en Salgs- og marketingsassistent og en Workspace and community manager.

Se spørgeskemaet og svar her

Konklusion på svarene

Negativt

  • Lignede for meget et CV
  • Mere fokus på de ydelser jeg kan tilbyde
  • Udtrykket er for ferskt

Positivt

  • Nemt at finde mine kontaktoplysninger
  • Det er nemt at se hvad jeg beskæftiger mig med

Udfordring

Ved mit spørgsmål ang. hvad der er vigtigst at fremhæve ved en praktik-ansættelse, havde alle 3 testpersoner hver deres svar. Konklusionen må derfor være at have alt med for ikke at udelukke en mulig arbejdsgiver.

Responsive image

Mindmap

Mindmap

Min idégeneringsproces startede på Pinterest.dk hvor jeg søgte inspiration ved at søge på ”Portfolio”, ”Identity”, ”Creativity” og meget mere.

Desuden søgte jeg inspiration fra andre Multimediedesigner-hjemmesider.

Jeg satte mig ned med et stykke papir og en pen og prøvede at sætte mine tanker ned på skrift.

Siden med ”Studie” skulle være overskuelig og ikke virke for tung. Det skal være nemt og overskueligt at navigerer rundt på siderne. Siden er primært til brug ved eksamen men for uforstående besøgende, så skal det hurtigt være til at forstå.

Og så vil jeg gerne have så få sider som muligt for at gøre projektet så simpelt så muligt, når jeg skal i gang med at kode hjemmesiden.

Responsive image

Moodboard, Stylescape og styletiles

Moodboard og Stylescape

Jeg har under hele processen tænkt at det er designet der kommer til at bære denne hjemmeside. Den skal have et klart grafisk udtryk men også spille sammen med mine kompetencer indenfor kodning.

Udtrykket fik jeg samlet sammen i mit moodboard efter jeg fandt et billede på Unsplash.com hvor en pige går tværs over billedet med solen skinnende lige hen over hendes hoved. Det er ikke helt tydeligt hvem hun er men der er en stemning af noget uhøjtidligt, frisk og øjeblikkeligt som tiltalte mig meget. Dette var en stemning jeg ville gå efter. Jeg fandt andre billeder med samme farvesammensætning og stemning og hurtigt blev mit moodboard skabt.

Ud fra de valgte billeder, teksturer og farvevalg, gik jeg videre med at forme mit stylescape. Jeg fik udarbejdet nogle grafiske elementer i Illustrator. F.eks. tog jeg det originale billede af Terazzo og vektoriserede det og gjorde det unikt ved at ændre i farverne, så det matchede min farvepalette.

Herfra kunne jeg også gå i gang med mit logo. Jeg brugte den grønne ”krussedulle” fra mit moodboard og tænkte den ind i logoet. Jeg prøvede først med et horizontalt logo men fandt ud af at det optog for meget plads i toppen af siden og besluttede derfor at lave det vertikalt.

Jeg valgte mine fonte ud fra min originale portfolio, nemlig en Serif-font der hedder ”Roboto Slab” og en Sans Serif-font der hedder ”Poppins”.

Under min søgning på inspiration til portfolioen faldt jeg over en side med royalty-free ikoner. Og her fandt jeg en samling ikoner som jeg har arbejdet videre med i Illustrator. Jeg har ændret i farven og form.

Styletiles


At arbejde med mockups er for mig den sjove og kreative del af opbygningsfasen. Her begynder alle elementerne at samle sig og man finder hurtigt ud af hvad der fungerer og hvad der ikke gør!

På dette tidspunkt havde jeg været ude og filme til videoén og samtidig tage nye profilfotos. Og jeg kunne se at det materiale jeg havde, matchede ret godt overens med mit moodboard.

Så da jeg laver mockups i photoshop kan jeg nu fornemme det kommende færdige resultat.

Responsive image

Kodning

Kodning

Her er min største udfordring…kodning, html, bootstrap, responsivt design…!

Den største udfordring for mig har været at forstå og lære dette sprog. Jeg startede ud som total ”Newbee” og med en smule frygt for ikke at kunne forstå. Jeg havde lidt undervisning af kodning med fra min Mediegrafiker-uddannelsen tilbage i 2007 men meget har ændret sig siden da og derfor tog jeg ja-hatten på og startede helt forfra.

Det har været en sjov rejse indtil nu og jeg finder stor tilfredsstillelse i at få selve kodningen i Visuel Studios ud til skærmen hvor ens layout langsom bliver udfoldet.

Med denne nye Portfolio har jeg startet ud med at koncentrere mig om at få lavet ”div-bokse” der er responsive i forhold til hinanden og forskellige skærme/devices. Herefter tog jeg fat i styling af fonte og fik nogle gode råd med på vejen af mine medstuderende.

Jeg har taget et skrift ad gangen og fokuseret på en problemstilling ad gangen. F.eks. har jeg arbejdet med en nav-bar fra Bootstrap som er responsiv, indeholdende mine undersider og et LinkedIn-ikon.

Henover mit forside-billede har jeg fået indsat tekst og en ”Kontakt”-knap. Både billedet og teksten er responsivt men jeg har et ønske om at udskifte billedet, ved mobilvisning, til et mere egnet ”højde-bredde”-billede. Dette har jeg ikke fundet en løsning på men arbejder videre med problemet.

Jeg har arbejdet meget med tekstbokse ved siden af et billede, en svg. Illustration med gule prikker som opdeling, enkelte tekstbokse med terazzo-baggrund. Det hele enkelt og med logiske opdelinger.

Efter en søgning fandt jeg en løsning på at kunne komme til toppen af siden, når du har scrollet ned på siden, så nav-baren forsvinder. Dette mener jeg er nødvendigt når jeg ikke bruger en ”Sticky” nav-bar.

Jeg har taget en standard Bootstrap kontaktformular og tilpasset den mit layout ifh. font og farver. Men jeg har endnu ikke fået selve funktionen til at virke.

Ved galleri-visningen af mine opgaver fandt jeg en hoover-effekt som jeg også fik tilpasset mit layout. Der er lidt udfordringer i den responsive visning hvor margin og padding driller. Men overordnet er det en sjov effekt som skaber lidt ”interaktion” på min side.

Jeg har et stort ønske at vise mit arbejde i et pop-op vindue når der klikkes på billedet. Dette har jeg endnu ikke fundet en løsning på og overvejer at åbne billederne i en ny fane indtil problemet er løst.

Den sidste udfordring jeg har løst er at jeg har oprettet en ”link”-menu før afsnittet ”Projektstyring” på denne side. Disse links henviser til det aktuelle afsnit længere nede på siden.

Status på min læringskurve mht. kodning er pt. at den er kraftigt stigende. Der er flere og flere ting der giver mening for mig og det bliver nemmere at løse de udfordringer der opstår. Jeg er blevet skarpere til at søge på de rigtige problemstillinger og det hjælper rigtig meget at sidde og kode hver dag. Det er jo så sandt når man siger at ”Øvelse gør mester!”


Hele min kodning kan ses på Github her

Responsive image

Video

Responsive image

Video

Med min præsentationsvideo har jeg haft fokus på at vise så mange facetter af mine kompetencer som muligt. Den oprindelige idé var at følge en opgave fra start til slut, f.eks. en af flow-opgaverne på 1. semester.

Jeg tegnede mit storyboard og tog det med ud den dag jeg skulle filme. Jeg valgte at optage mange af mine scener på DTU i Lyngby. Jeg havde udset mig en af DTU´s nye bygninger, som har en guld-farvet facade, som min baggrund, da den matchede mit moodboard rigtig godt. Jeg fik desuden mulighed for at filme inde i FutureBox som er en bygning sat sammen af en masse containere. Igen et godt match til moodboardet.

Jeg fik filmet flere scener, både indendørs og udendørs og fornemmede hurtigt at mit storyboard havde ændret sig til at handle om udviklingen af min egen portfolio i stedet for en allerede udført opgave.

Da jeg endnu ikke er så vant til at arbejde i Adobe premiere Pro valgte jeg at arbejde i Adobe Premiere Rush i stedet for. Jeg brugte dog Adobe Premiere Pro til at stabilisere mine optagelser.

Jeg har anvendt beskæringer i mine klip, både total, halvtotal og halvnær. Jeg har gået efter at sammensætte scenerne så det virker harmonisk og balanceret. Jeg har desuden valgt at indsætte tekster for at understrege hvilke programmer jeg bruger undervejs i et sådanne projekt.

Som intro og outtro har jeg valgt at bruge ”Terazzo”-elementet for at skabe bro mellem videoén og hjemmesiden.

Jeg har anvendt bløde overgange og musik for at ophøje stemningen i videoen

Responsive image

Konklusion

Responsive image

Konklusion

Nu har jeg skrevet det sidste slut tag. I hvert fald i denne omgang. For mit portfolio vil jo udvikle sig, sammen med mig.

Overordnet syntes jeg at jeg er kommet godt i mål med mit portfolio. Jeg er glad for at jeg fik lagt en god plan for mit projekt. Især mit WBS og Gannt Chart har jeg lænet mig meget op ad og fulgt slavisk. Det har givet mig en ro til at kunne have overskud til at finpudse de små detaljer.

At jeg også brugte en del tid på at tænke over mit farvetema og tænke detaljerne ind i mit foto- og video-shoot har resulteret i et harmonisk udtryk med en gennemgående rød tråd.

Jeg håber meget på at kunne få mine test-personer til at lave en ny test på mit nye portfolio for at se om de kan se, at jeg har lyttet til dem.

Mange af de ønsker jeg havde til min Portfolio er næsten alle lykkedes og jeg kan se at jeg har rykket mig meget i min forståelse af at kode og forstå de responsive regler. Jeg ved at jeg kan få proppet en masse nye fede effekter ind på siden i fremtiden i takt med at vi får det introduceret på de næste semestre.

Responsive image