Eksamensopgave
1. Semester

vinteren 22/23
eksamen
‹ ›

Opgavebeskrivelse

Med udgangspunkt i det jeg havde lært i løbet af 1. semester, skulle jeg udvikle en portfolio på et website.

Udformningen af denne portfolio skulle demonstrere mine evner inden for design, visualisering og interaktionsudvikling. Dokumentation af udviklingen skal demonstrere at jeg kan planlægge et projekt bl.a. ved at udarbejde en projektplan.

Jeg skulle også udarbejde en videosekvens, som skulle indgå i portfolien som en del af præsentationen.
Portfolien skal præsentere og dokumentere resultatet af de 4 flowprojekter, som jeg har arbejdet med på semestret:

  • Billedbehandling og website protoype
  • Visuelt koncept til digitale og printede medier
  • Byg dit første website
  • SoMe video produktion

Hvis jeg havde forbedringer til tideligere projekter, måtte jeg gerne rette og vise hvor jeg var blevet klogere/bedre.

Projektplanlægning

Jeg startede med at strukture hvad projektet skulle indholde, ved at lave en WBS. Den hjalp med at danne et overblik over projektets omfang. Da det var mit første store solo projekt, var afsætningen af tid, noget jeg måtte sjusse mig frem til ud fra min erfaringer fra undervisningen.

Derefter lavede jeg en Figjam, hvor jeg kunne sammle mine inspirationskilder og recheach af hvad en portfolio kunne indeholde. Jeg har fundet stor inspiration på Pinterest og ud fra de mange pins, kunne jeg brainstorme hvad mit site skulle indholde.
Da jeg havde mine ideer samlet, kunne jeg lave et moodboard, så jeg kunne udvælge farver, stemning, designs og stil for portfolien. Udtrykket på siden skulle være grafisk, med det clean look man så før i tiden fra Bauhaus plakater. Feminint og let.
Hele grundlaget for portfolien, skulle være mig. Hvem jeg er, hvad jeg kan og kan lide. Derfor er farverne taget ud fra et foto af mig. De komblimentere hinanden godt, og giver det feminine, friske og moderne udtryk jeg ønsker.

Derefter lavde jeg en PBS, så jeg kunne få struktur over hvilke sider/undersider websitet skulle indholde.
Jeg fandt stor inspiration fra Pernille Linds opbygning af hendes sitemap. Det ville jeg bruge lidt i min PBS så jeg ved hvor og hvad jeg skal have på websitet.

Se Figjam
pbs
wbs
moodboard

Photoshop

Jeg vidste, at jeg skulle bruge nogle billeder af mig på hjemmesiden. Derfor fik jeg taget nogle nye billeder, med mit ganske fine Iphone 12 kamera.

Jeg fik fjernet baggrunden i photoshop ved brug af Object Selection Tool. Jeg brugte Clone Stamp Tool til at fjerne lidt genskær fra lyset, i brillerne.
Derudover lavede jeg enkelte rettelser i Adjustments panelet. Her fik jeg lysnet billedet i Brightness/Contrast, tilpasset hvid- og sortfactoren i Levels, og justeret Color Balance, da billedet syntes gulligt inden.

Photoshop
Photoshop
Photoredigering

Wireframes & Figma

Da jeg havde min vision for websitet klart i hoved og inspirationsbilleder ved hånden, lavede jeg mine wireframes. Jeg startede med at skitse dem groft op i hånden så jeg havde en fornemmelse af hvordan jeg skulle gribe det an når jeg skulle til at kode. Jeg så for mig hvilke børnediver der skulle samles i forældrediver.
I denne fase brugte jeg især gestaltlovene som omhandler nærhed (poximity) og lukkethed (common region).
Nærhed er især brugt når det galt overskrifter og brødtekst.
Lukkethed er brugt meget, da nærmest hele sitet er opbygget af lukket kasser.

Jeg tog udgangspunkt i at det skulle være mobile-first, da jeg gerne vil gøre mit site responsivt. Jeg synes det er vigtigt at kunne se sin portfolio både på mobilen, tablet og lap-/desktop, da dem portfolien henvender sig til (kommende arbejdsgivere) ikke kun arbejder i et format.
Jeg sørgede for at det vigtigeste på min indexside var "over folden". Jeg vil gerne have besøgende til at kontakte mig i topbanneren, og i diven under er tiltænkt den mest aktuelle case. I dette tilfælde eksamensopgaven.
Da wireframesene var kridtet op, både mobile og desktop, valgte jeg at lave en simpel prototype i Figma, så jeg kunne se hurtigt om mine visuelle ideer fungerede i praksis. Det gjorde de heldigvis i høj grad.
Da min Figma var lavet og prototypen virkede fik jeg den testet. Jeg sendte den til lidt forskellige som har erfaring med webudviklig. Jeg fik en masse positiv feedback på mit design og noget konstruktivt, som jeg kunne bruge til at forbedre.
Det omfattede bla. :

  • Logo øverst fungerede som eneste mulighed for at komme til hjem, men at jeg også burde have en "hjem" nap i min nav.
  • Topbanneren på indexsiden manglede en "call to action" knap.
  • Overskrifter i "om mig" skulle aline brødteksten i desktopudgaven

Alt feedback blev implementeret, og jeg kom selv efterfølgende med rettelser. Eksamensopgave-siden blev div strukturen for desktop lavet anderledes. Jeg valgte at genbruge frontgalleriet, som jeg har på min indexside, til at vise billder fra projektet. Det gav en bedre genkendelighed synes jeg.
Tospaltestrukturen som jeg oprindeligt havde tiltænkt i min wireframe/Figma, synes jeg ikke passede så godt i den sektion (projektplanlægning). Så den genbrugte jeg i stedet i beskrivelsen af min kode.

se Figma
wireframes-mobile
wireframes-desktop
figma mockup

Kodning

Jeg startede med at kode da de fleste grafiske elementer og billeder var på plads. Normalt havde jeg brugt Lorem Ipsum tekster, men det var ikke nødvendigt, da jeg havde indholdet klar.

I min research havde jeg fundet funktioner på bl.a. w3school, youtube og codepen.io, som jeg gerne ville implementere på sitet. Jeg har hentet koder til bl.a. navigationen, filtersortering i portfolio galleriet, implementering af video, kontaktformular og hvordan jeg fik den sat op til at sende mig mails.

Det var første gang at jeg skulle kode noget af dette opfang, og samtidig have mange nye elementer/funktioner med. Jeg ved at det er vigtigt at have nogle strukturerede mapper, koder og sheets. Derfor var dette fra start en vigtig del af min proces, at sørge for at navngive mapper, filer og diver logisk. Jeg har altid orden i min mappestruktur, så jeg hurtigt og overskueligt kan finde det jeg sørger og lave ukompicerede stier, når jeg skal linke.

I head sektionen startede jeg med at skrive (! "enter") den kode der kom frem, er så websitet bliver vist korrekt i browseren.
Jeg brugte Ctrl-k-c for at ukommentere og lave noter i Html'en og i stylesheetet brugte jeg /**/. Dette gør at jeg hurtigt kan huske hvilken kode det er og hvad det gør.

mappestruktur
headsektion
udkommenteret-note

html

Jeg startede med at kode indexsiden ud fra Mobile-first. Jeg brugte min wireframe og Figma til at finde ud af hvordan jeg skulle samle mine elementer. Hvilke div’er der skulle omslutte hvilke, for at jeg kunne placere mine kasser hvor jeg ønskede.
Min opbygning af hjemmesiden startede altså med:

  • Index – Da det er det første man møder, og en vigtig del af hjemmesiden.
    Denne side er bygget op af et grid på 3 kolonner.
  • kontakt – Den var nem og overskuelig at gøre færdigt.Jeg opbyggede denne side af et grind på 2 kolonner
  • Om mig – Igen, et af de nemmere sider, dog med lidt flere elementer. Ligeså blev denne side også opbygget af et grid på 2 kolonner
  • Portfolio – Denne havde JavaScript, og var jeg usikker på om jeg kunne løse. Jeg havde derfor brug for hjem til at forstå koden.
    Denne side er bygget op af et grid på 3 kolonner.
  • Case-sider – Da jeg havde fået styr på min portfolioside, kunne jeg komme videre med undersiderne, Case-siderne.
  • Eksamensopgave-siden – Jeg lavede første denne side, da jeg havde alt på hele siden, og havde alt indhold og tekster klar. Jeg har genbrugt rigtig mange koder fra tidligere sider, så derfor hedder diverne nogle lidt mærkelige navne ind imellem. Denne side blev opbygget af et grid på 6 kolonner, da jeg gerne vil have genkendelse fra alle mine sider, så er tekst i 2 kolonner og billeder i 3.

CSS

Jeg brugte notefunktionen i mit stylesheet til at lave større afsnit, så jeg i oversigten i højre side, kunne se når en ny side begyndte. Min Media Query lagde jeg i buden i samme rækkefølge som mobile-first.

Jeg valgte at have mine overskrifter H1 H2 H3 osv. og paragraftag P placeret øverst, da jeg som udgangspunkt gerne ville have at skrifttyper var de samme på hele siden. Jeg har undervejs i opbyggelsen rettet overskrifterne en smule til med farve, og i Media Query har jeg også rettet til undervejs når jeg nåede til koden, og derfor ikke haft text-tags i toppen af min MQ, da de som udgangspunkt stadig var det samme som i Mobile-first sektion.
Mine overskrifter skiller sig altid lidt ud i størrelse og farve, og struktureres ud fra de visuelle hierakier som farvekontrast og gentagelse. Gentagelsen ses tydeligt på om-mig siden.
Headeren er også at finde for sig selv i toppen som et globalt komponent, da den er ens på alle sider. Footeren er ikke ens på alle sider, da jeg har min avatar til at stå forskellige steder i footeren, så den bliver redigeret ud fra hvert side.

Ellers kommer stylingen af koden, i den rækkefølge siden er bygget op. Jeg startede med index, så Kontakt, Om Mig, Portfolio, Cases og til sidst Eksamenssiden.
Derfor er mange af stylingskoderne af undersiderne under Index, da koderne kan gå igen.
Det ses tydeligt i Eksamenssiden, da jeg har genbrugt rigtig mange diver, for at den skulle minde om opbygningen af de andre.

Media Query

Jeg har lavet portfolien i et responsivt design. Den kan derfor ses på flere typer devices. Dertil har jeg brugt en Media Query (@media screen and (min-width: 786px){}). Jeg har brugt flere MQ for at portfolien altid vil fremstå flot uanset skærmbredde.

Det første breakpoint er sat til 786px det valgte jeg ved at højreklikke - undersøg i browseren, og derefter trykke Ctrl+Shift+M (Toggle Device Toolbar) her kunne jeg justere og se skærmbredden, og derved finde det format, hvor det gav mest mening, at skifte layoutet for websitet.
Det var også i denne ”undersøgsmenu” at jeg nemt kunne finde en fejl i koden, hvis der var noget der drillede, fordi man kan hover musen i koden og se hvilken div den høre til.
Jeg brugte den også, hvis jeg nemt ville finde ud af hvor mange pixels width en div skulle være. Så kunne jeg nemlig styre det ved hjælp scroll-funktionen på musen.

Det næste breakpoint i min media-query er sat ved 1500px. Her satte jeg margin/padding op fra 10% til 15% på de diver der går helt til den fulde bredde.
Jeg startede med at ændre min width på min body, men så gik mine bannerdiver, header og footer ikke helt ud til kandten, hvilket jeg ikke synes var pænt. Derfor måtte jeg lave lidt om i min forældrediver så jeg kunne få banner, header og footer til at fylde det hele.
Den sidste MQ jeg har sat ind, er en form for stopklods. Mit site skal ikke kunne vises i et større format. Den er sat til 2048px hvilket jeg tog ud fra en Imac skærm. Hvis men her efter eskaleres, vil der dukke hvide margener op.

media-query
Filtersortering i portfolio galleriet

Jeg havde set denne funktion på rigtig mange portfolios, og synes det gav rigtig god mening at have denne funktion også, da jeg laver meget forskelligt.
Jeg synes ikke det var muligt at lave denne, uden brug af JavaScript, så jeg fik hjælp en programmør, til at hjælpe mig med at forstå koden, som jeg havde fundet på w3school.
Jeg kopierede den, en til en, for at undgå fejl i koden. W3school bruger store bogstaver i deres koder, hvilket jeg normalt ikke ville gøre.
Vi fandt ud af at den kode og det indhold jeg havde ikke talte godt sammen, når siden loadede. Derfor lagde vi en kode ind i Javescript øverst (document.addEventListener). Den gør at siden først kører Javascript, nå indholdet er hentet.
uden den kode, blev galleriet ikke vist som default, men først når der blev klikket på en af knapperne i gallerimenuen.

Jeg bruger normalt flexbox til alt, men i dette tilfælde virkede Grid og Gap bedre. Jeg fik anbefalet Grid af en medstuderende, da vi ikke har lært om det. Jeg havde nemlig problemer med at billederne i galleriet, ikke startede i venstre side (var et problem hvis der var mindre end 3 billeder pr. række). Justify-content: Flex-start, kunne ikke bruges her. Men Grid fungerede lige som det skulle.

javascript
Hover effekt på billeder

På billederne i frontgalleriet og i portfoliogalleriet, har jeg givet mine billeder en hovereffekt. Jeg har valgt en zoomfunktion og et overlay.
Zoom funktionen havde jeg lært at gøre i undervisningen, så der tog jeg min egen kode fra tidligere. Jeg brugte en transition og transform: scale, til at gøre billedet større, og en overflow: hidden; for at skjule det overskydende når billedet eskalerede.
Overlayet, fik jeg hjælp til af en medstuderende der viste mig hvordan jeg kunne ligge et det på. Her gjorde jeg brug af opacity, som jeg først satte til 0, og ved :hover satte jeg den til at overlayet skulle blive opacity: 1;. Jeg stylede herefter overlayet i den farve og gennemsigtighed jeg ønskede.

hovereffekt
Thumbnail billede

På billederne i eksamensopgaven, har jeg lagt en kode ind, som gør at billederne bliver vist i stort format. Dette var der mange smarte måde at gøre med JavaScript, men jeg ville gerne undgå dette.
Via w3school fandt jeg en kode til thumbnails, og det var helt perfekt til at kunne vise mine billeder stort, så det var nemmere at læse teksten på billederne.

thumbnail
Favicon

Øverst i browserfanen ses mit favicon. Det er min avatar jeg har konventeret til et .ico format.
For at implementere den på siden, skulle jeg head sektionen linke til ikonet. Det gør min side let at finde, selv med mange browserfaner åbne.

thumbnail
Navigation

Jeg ville gerne have en responsiv-navbar, som var en burgermenu når det var på mobil og alm nav i stor tilstand, gerne uden brug af JavaScript, da det ikke har været noget vi har lært på semesteret.
Jeg fandt en kode via codepen.io som var lige det jeg ønskede. Jeg stylede koden selv, så den passede til min wireframe og styleguide.

burgermenu
Implementering af video

Tilføjelse af video, fungerede i høj grad som at tilføje et billede, her brugte jeg også koden jeg fik fra w3school 1:1. Jeg ændrede dog formatet så det passede med de optagelser jeg havde filmet i (1920x1080).

videokode
Kontaktformular og FormSubmit

Jeg havde tidligere i flow 3(kodning af website) brugt en kontaktformular. Jeg hentede den samme kode fra w3school og tilpassede den så den fulgte min styleguide.
Forskel fra flow3 til nu, var at jeg ønskede at få min kontaktformular til at virke, og sendte mig mail, hvis nogen ønskede at kontakte mig. Dette fandt jeg en meget brugbar video omkring på youtube, som anbefalede at bruge FormSubmit. Det var ganske enkelt, og jeg kunne bruge min one.com mail. Det fungerede rigtig godt.

kontaktformular
FontAwesome

Til at starte med havde jeg tænkt at style mine SoMe ikoner selv, for at vise min færdigheder i Illustrator, men det synes jeg, at jeg kunne vise på mange andre og federe måder. Så jeg ville hellere gøre brug af den smarte måde med fontAwesome.
Jeg hentede koden via fontAwesome, og så linke til den i head sektionen. Nede i koden i footeren kunne jeg så indsætte et a-link, med url og "i class" på det enkelte logo.
Med fontawesome kunne jeg style knapperne nemt i farve og størrelse, på samme måde som jeg ville style alt andet tekst på hjemmesiden.

fontawesome
Styleguide som pdf

Jeg har valg at sætte min styleguide ind for at vise flere forskellige måde at kode og præsentere på, på hjemmesiden. Det var ret simpelt at indsætte en PDF. Jeg lavede en iframe og via src=, så satte jeg PDFen ind, som var det et img.

pdfkode
Avatar i footer

Jeg ville gerne have et grafisk og sjovt element på websitet. Derfor lavede jeg en masse små avatars af mig selv som skulle stå forskelligt i footeren, fra site til site.
Jeg ville ikke have min avatar på mobil, da jeg syntes det fyldte for meget. Så den dukker først op efter 786px width.
Jeg ændrede rækkefølgen i min footer ved at bruge order: -1; eller order:1;. Min footer gav jeg justify-content: space-between, så ”designed by” og SoMe ikoner kom helt ud til hver side. Derefter kunne jeg give min avatar lidt margin-left eller margin-right alt afhængig af hvor i footeren jeg ønskede den skulle være.

avatar

Videoproduktion

Portfolien skulle indeholde en video om mig selv, og være tilgængelig på websitet. Jeg valgte at ligge den direkte ind i min html, så jeg kom uden om brug af youtube.
Min video ligger på forsiden som en call-to-action for "se mere om mig"






præproduktion

Processen med af fremstille min video startede med præproduktionen, hvor jeg brainstormede over hvordan jeg tænkte min video skulle filmes. Jeg vidste fra starten at jeg ikke ville tale i videoen men der skulle være musik over. Den skulle handle om mig og hvad jeg kan indenfor multimedie design og vise mine kreative færdigheder på pen og papir.

Da jeg havde ideen på plads satte jeg mig og lavede et storyboard. Jeg ville gerne have mange klip i forskellige frames. De fleste klip skulle være close-up eller medium close-up af mig der arbejder i diverse kreative programmer og på tegnebrættet. Jeg ønskede at man skulle se mine hænder i aktion, men også få stemningen af mit arbejdsværelse, med små close-up af omgivelserne.
Der var enkelte shots, hvor jeg ønskede i medium long-shot/cowboy shot, så det gav lidt dynamik i videoen at der var forskellige afstande.


Produktion

Da jeg kom til selve produktionen af videoen, fik jeg hjælp til at holde og styre kameraet, jeg instruerede vedkommende i, hvordan jeg ønskede klippene skulle være. Jeg brugte min iphone 12 mini og optog i 4k 30 fps (frames per sekond)
Jeg vil gerne filme i high-angel view og neutral view, da jeg synes det kunne vise mit arbejde bedst. Også enkelte klip over-the-shoulder for at få en fornemmelse at "point-of-view" uden at det var mit perspektiv man skulle se.
Af kamerabevægelser brugte jeg primært Panning og Zoom, det skaber et godt flow og igen, dynamik til de mange stillbilleder, som jeg også vil have i videoen.

Jeg fik min veninde til at være statist i slut af videoen for at vise at jeg også er social og kan arbejde sammen, og ikke bare er i mit kreaværelse alene. Jeg har også skift i påklædningen, for at illustrere at det ikke er en dag, men at det er forskellige dage, og understrege at jeg laver lidt forskelligt.


Post produktion

Da videoerne var skudt på en formiddag, skulle den sidste fase i gang, post produktion. Her brugte jeg udelukkende Premier Pro.

Jeg ville klippe videoen, så den passede til den musik der skulle køre gennem hele videoen.
Jeg ønskede først, at det skulle være Royksopp med nummeret Eple. Da det er er meget den stil jeg godt kan lide. Svensk elektropop. Men af rettighedsmæssige grunde ville jeg finde et stykke musik der kunne lidt det samme, men var frit tilgængeligt. Her brugte jeg pixabay.com som har en masse instrumental musik til fri afbenyttelse. Jeg fandt et nummer der kunne lidt hen ad det jeg ønskede. Et let og glad stykke musikstykke, som var den stemning jeg ønskede. Jeg tilføjede en Exponential Fade på i starten og slutningen af lydklippet, for at det ikke startede/stoppede så pludseligt.

Mit udgangspunkt var hele tiden mit Storyboard, men da jeg fik klippene ind i PremierPro kunne jeg nu se at flowet igennem filmen ville være bedre hvis jeg byttede lidt om på rækkefølgen. Jeg valgte derfor at ændre min ide fra at skulle være klip, hvor det var godt blandet, til at der var en historie - Jeg tænder lyset, gør pc klar, arbejder, skift i musik og leg på stol, til at være offline, tegne og til sidst samarbejde hvor jeg viser mit arbejde.
I denne proces blev jeg meget klogere. jeg havde alle klippene til at den nye rækkefølge gav mening. Det ved jeg til fremtiden, at jeg skal tænke mere over at det fungere bedst i en ordenlig rækkefølge og ikke så tilfældigt.

Jeg farvejusterede i Lumetri Color, hvor jeg satte Hvid balancen så mine klip havde nogenlunde samme tone, derefter justerede jeg Temperature og Tint så klippene fik det sidste til at ligne hinanden i lys og farve.

Klippet der starter i photoshop, går bag om min ryg og ender i Illustrator, er et one-take. Jeg valgte at cutte klippet over og speedede midterstykket ca. 200% op. Dette gjorde jeg i Clip - Speed/Duration. Ellers synes jeg at klippet blev for langt i forhold til mine andre, ret korte, klip.

pbs
premierpro
premierpro