Om mig Portfolio Kontakt

Portfolio

1. Semester

Billedbehandling og website protoype
Byg første website til kommunal kandidat
Visuelt koncept til digitale og printede medier
Kampagne på tværs af platforme
Billedbehandling og website protoype

Introduktion til opgave

Denne opgave var en introduktion til Figma, hvor vi først skulle lære at billedbehandle i programmet. Vi skulle lave en plakat med billeder fra en fotosafari, hvor vi havde taget nogle billeder til forskellige temaer i København. Vi valgte at bruge de billeder som var temaet "natur". Da vi i nogle øvelser til Figma havde lavet nogle små postkort, gik vi videre med den idé og ville lave en plakat, som omfangede de her postkort. Derudover ville vi gerne udforske, hvad Figma kunne ift. billedredigering og valgte at lege med forskellige former og figurer.

Herunder kan man se vores færdige plakat.
Billede-af-Figma-plakat
Anden del af opgaven var at lave en prototype på en hjemmeside i Figma. Målgruppen var unge, som netop var startet på en uddannelse, og hjemmesidens indhold skulle derfor tage udgangspunkt i et event relateret til studiestarten. Prototypen skulle være både visuelt appellerende og brugervenlig samt have et layout, der lever op til diverse designregler.

Proces

Vores tilgang var at skabe et ungt og moderne udtryk med friske og iøjnefaldende farver, som forhåbentlig kunne øge de unges lyst til at udforske hjemmesiden. Derudover fungerede hjemmesiden som en platform, hvor unge kunne finde og deltage i events året rundt, uafhængigt af hvilken uddannelse de går på, netop så hjemmesiden kan fungere hele tiden, fremfor til ét konkret event.

Vi gjorde brug af grids i Figma, så vi kunne skabe et linæert og nøgtern udtryk, hvor diverse elemementer og indhold flugter med hinanden. Derudover valgte vi en sans serif font, som er meget ungdommelig, samt lyse og farverigt indhold med anderledes former til knapper, for at gve det et anderledes udtryk.

Nedenfor ses det endelige resultat af vores hjemmeside.
billede-prototype
billede-2-prototype

Refleksion og resultat

Vores hjemmeside navngav vi "Eventure", som blander "adventure" og "event" sammen. Dette skulle kommunikere at det er en hjemmeside fyldt med spændende events. Prototypen er nem at navigere rundt i med store knapper og teskt, som gør brugeroplevelsen god. Med det farverige udtryk og billeder med bevægelse, håber vi på at det vil nå ud til målgruppen og at det er et koncept unge studerende faktisk gerne vil gøre brug af.

Opgaven fungerede som en introduktion til Figma, som hurtigt blev mit primære og mest anvendte værktøj i løbet af semesteret. Da programmet er meget alsidigt, brugte vi det løbende i gruppearbejde, hvor vi kunne samles om vores projekt og sikre, at vi visuelt arbejdede i samme retning. Derudover anvendte jeg Figma til at udarbejde layouts, der senere skulle omsættes til kode på hjemmesider, da programmet giver et klart visuelt overblik over struktur og opbygning. Særligt ved brug af grid-systemet og de mange fleksible værktøjer blev idéerne nærmest skabt og udviklet visuelt allerede i designfasen.

Herunder er der et link til vores protoype, hvis man har lyst til at udforske prototypen.
Byg første website til kommunal kandidat

Introduktion til opgave

Denne opgave bestod i at udvikle en hjemmeside til en valgfri kommunal kandidat. Efter et to ugers introduktionsforløb i kodning med HTML og CSS havde vi fået de grundlæggende værktøjer, der gjorde os i stand til at opsætte vores egen hjemmeside. Opgaven havde særligt fokus på responsivt design samt på at strukturere artikler og indhold i HTML på en måde, der både fremstod overskuelig, lineær og visuelt tiltalende. Derudover skulle design og layout afspejle partiets overordnede koncept, hvilket var vigtigt at have med i hele designprocessen.

Proces

Jeg valgte at arbejde med et nyere parti, da det gav mig større frihed i forhold til det visuelle udtryk. Samtidig tog jeg udgangspunkt i farver, som jeg personligt var tiltrukket af. Mit mål var at skabe et ungt og moderne udtryk, som både matchede min egen stil og harmonerede med partiets farvevalg. Derudover lagde jeg stor vægt på det responsive design, så hjemmesiden fungerede optimalt på tværs af forskellige enheder og skærmstørrelser.

Min kodeproces forløb overordnet set tilfredsstillende, men undervejs opstod der flere udfordringer, særligt i forhold til det responsive design. Jeg blev opmærksom på, hvor vigtigt det er at bevare en klar og konsekvent struktur i både HTML og CSS, da manglende struktur hurtigt kan gøre at man mister overblik og gøre arbejdet mere uoverskueligt.

Nedenunder kan man se resultatet af hjemmesiden.
resultat-kommunal-hjemmeside
hjemmeside-footer

Refleksion og resultat

Resultatet af min hjemmeside afspejler tydeligt, at det var mit første forsøg med at udvikle en hjemmeside. Selvom siden fungerer overordnet set, og holder sig inde for lige linjer og nem navigation, mangler der nogle mere bevidste og gennemarbejdede designvalg, som kunne have gjort det samlede udtryk mere markant. Jeg oplevede også at fordi jeg havde mistet overblik undervejs i min kodning, lavede jeg små fejl, som ikke ville have været sket, hvis jeg havde arbejdet mere struktureret ift. navngivning og kommentarer.

Opgaven var dog en rigtig god øvelse i at få HTML og CSS bedre ind under huden, og efter flere dages arbejde voksede både min forståelse og min interesse i kodning meget.

Herunder er der link til hjemmesiden, hvis man ønsker at udforske den nærmere.
Visuelt koncept til digitale og printede medier

Introduktion til opgave

Denne opgave gik ud på at skabe et visuelt koncept til en kunstner. Konceptet skulle skille sig lidt ud fra, hvad kunstnerens visuelle udtryk normalt er. Dette koncept skulle produceres til et LP forside cover, landingpage og digitalt banner. Så med fokus på at skabe en rød tråd til konceptet gennem forskellige platforme.

Proces

Min gruppe og jeg havde en meget omfattende brainstorm proces, hvilket vi prioterede, da det var vigtigt at have et gennemarbejdet koncept. Vi gik med en 00'er stil, da vi alle synes det kunne være spændende at dykke ned i, samt et tegneserie univers, fordi vores kunster, som er Doechii, synger om og er inspireret af anime og tegneserier. Derefter gik vi i gang med at arbejde i Photoshop, hvor vi brugte værktøjer til at kunne klippe Doechii ud af billeder og give et "kollage" udtryk, ved at tilføje papir til kanterne. Vi sørgede for at have en styleguide og moodboards, så vi kunne arbejde på forskellige opgaver, men stadig inde for de samme visuelle rammer

Derudover lavede vi en prototype til landingpage i Figma, hvor albumcoveret skulle stå klart og tydeligt. Her gjorde vi også brug af grids til at få et overskueligt layout, og vi arbejdede meget med vores styleguide, for at være sikker på at diverse produkter, havde et ensformigt look.

Herunder kan man se de udklip vi lavede, samt papireffekt på det ene.
Doechii-in-chair Doechii-on-couch

Resultat

Vores resultat af det visuelle koncept, fik et meget sammenhængende udtryk. Det lykkedes at inkorporere gennemgående elementer til hvert medie, med både tegneserie og 00'er stil. Dog kom vores landingpage lidt for langt væk fra tegneserieuniverset, selvom vi gik efter samme farver og font. Da vi havde færdigproduceret vores LP-cover anvendte vi Illustrator til at få billedet skaleret korrekt, ved at sætte det i et LP-cover skabelon. Derefter var det klar til at blive printet.

Nedenunder kan man se de tre færdige produkter. Det øverste er vores LP-cover og derefter landingpage og digitale banner.
Doechii-lp-cover
Doechii-landingpage
Doechii-digitalt-banner

Refleksion

Når jeg ser tilbage på forløbet var det rigtig spændende og vores gruppearbejde fungerede godt, da vi i dette forløb, også blev introduceret til projektstyring. Vi fik uddeligeret forskellige opgaver, så vi arbejdede produktivt. Ved hjælp af vores gennemarbejdet konceptudvikling blev det vi arbejdede på netop ensartet.

Hvis jeg skulle have gjort noget anderledes, ville jeg havde været mere opmærksom på filopløsning og eksporting af billeder, da vores resultat er til den pixelerede side på nogle af billederne. Det kom især til udtryk, da vi printede det ud som en mockup.

Herunder er der link til vores FigJam, hvor man kan se hele vores proces og resultat.
Kampagne på tværs af platforme

Introduktion til opgave

Denne opgave gik ud på at lave en kampagne til et firma som har fokus på cirkulær økonomi, hvor vi skulle lave fire videoer og en landingpage, som de kan bruge til forskellige platforme. Min gruppe og jeg valgte et nyt firma, som hedder "Freetown Skateshop", der har med fokus på at genbruge gamle skateboards.

Vores fokus i denne opgave var også at arbejde med målgrupper og persona, så vores videoer og koncept fik en konkret vej og målsætning.

Billederne nedenunder viser vores layout opsætning af landingpage og hvilke farver vi ville arbejde med, samt vores persona.
billede-af-wireframe
styleguide-kampagne
Logo-kampagne

Proces

Vi gik i gang med at brainstorme idéer til kampagneidéer og visuelle udtryk, og var hurtig enige om at det skulle være i takt med firmaets egne farver og font, som er de her stærke orange og røde farver. Målgruppen vi gerne ville ramme var unge mennesker, som ikke har så meget erfaring med skatermiljøet, men som har en interesse for det. Grunden til vi valgte denne målgruppe, var fordi at Freetown Skateshop's koncept med genbrug, gør at de sælger skateboards og reservedele billigt, så det er nemt at udforske når man er ny. Derefter skabte vi en konkret persona, så vi hele tiden havde en specifik person at fokusere på i vores proces, der gjorde vi arbejdede mere målrettet. Efter denne proces blev vi enige om at vores kampagneidé skulle være informerende og fortælle om "Freetown Skateshop" koncept med genbrug.

Derefter gik vi i gang med at skrive et manusskript, lave et storyboard og skudplan. Vi ville gerne gøre brug af stop-motion i to af videoerne, da vi synes det ville være med til at fange modtagerens opmærksomhed. Vi kunne også godt lide stilen, da det giver et legende udtryk, som man kan forbinde med aktiviteten. Storyboardet hjalp os en del til optagelserne, da vi kunne bevare overblikket over processen. Vi var også opmærksomme på at have en del nærbilleder af produktet, så det er nemt at se produktet, hvis man ser den fra en mobil.

Derudover kodede vi også landingpagen i Visual Code, hvor vi arbejdede udfra et layoutdesign, som blev skab i Figma.

Resultat og refleksion

Resultatet blev en video på 5, 15 og 30 sekunder, samt en video til landingpagen, som hver især havde noget forskelligt at fortælle. Vores 5 sekunder, ville vi fortælle skateboardes opbygning ved hjælp af genbrugsmaterialer. Vores 15 sekunder, skulle fortælle om den cirkulære økonomi, og hvordan firmaet kan bruge, selv slidte og ødelagte skateboards. Vores 30 sekunder, skulle vise stedet hos "Freetown Skateshop" og at det er et fdt sted at tage hen. Med videoen til landingpagen, ønskede vi en masse bevægelse, som skal fange folk når de kommer ind på forsiden.

Herunder kan man se skærmbilleder fra to af vores videoer, og nedenunder billederne, er der link til vores landingpage, hvor man kan finde alle fire videoer.
video-1-kampagne video-2-kampagne