Portfolio

December 2024

Abstract

This project was about creating this very website: A portfolio of the work I have created or been created in collaboration with others. The projects timeline spanned most of december, from the 1st to the 20th and is also the inspection point of an exam in january. In the sections below this abstract you will be able to see the structure of the frontpage and a limited styleguide for the site. Some parts are interated in the site, whilst other aspects are linked to.

Working on this site has helped me understand the value of planning ahead, especially buffer times. From the 9th to the 17th of december 2024 I caught an illness, that caused my presumed timeline to shift drastically. I have made a Gantt Chart, showing the original plan, and the aforementioned displacement. The timeline below is an expression of the originally planned progression.

Struktur

Noget af det første jeg arbejde på, da vi fik præsenteret projektet om vores portfolie var, hvordan min frontpage skulle se ud. En frontpage er jo ens ansigt; det første en klient, kunde, bruger, etc. møder. Jeg havde tænkt at min video om mig selv skulle være i "hero" sektionen. Det havde dog det problem at jeg så formegentligt ville skulle påtvinge en nye besøgende på siden at afspille en video med lyd fra start. Det er et internet "faux-pas" og ud fra egen erfaring: en hurtig grund til at lukke fanen.

Picture of the first mock-up for the website.

Lavet af: Emil Gray Thomsen

Man kan se at idéen om "projekter" blev beholdt, dog som områder i stedet. Jeg mener et vigtigt område af at skulle hyres som multimediedesigner er at man kan se de områder jeg har erfaring med og hvor langt min expertise rækker.

Idéen om et logo forsvandt også, selvom det faktisk stadig kan findes i hjemmesidens filer (I know, dårligt optimatiseret). Begrundelsen for ikke at have et logo endnu, er at det intet ville sige. Mit brand er ikke velkendt og derfor er en beskrivelse bedre. Ordet "Design" er også vagt, men i sammenhæng med områderne lige under, burde det give mening hurtigt.

Oprindeligt havde jeg også idéen om at have produktionen af denne portfolio på forsiden, men i opgaven var det beskrevet at det skulle kunne findes på en "underside". Dette betød at alle projekter kom ind på samme side. I spøg kaldte jeg denne sektion "Frederik Sektionen" efter den underviser der havde arbejdet med os i klassen om "Objective Breakdown Structure" [OBS] (Også kendt som "Goals Breakdown Structure" [GBS]) og de andre breakdown structures.

Planlægning

Herunder ses mit "Gantt-Chart" et visualiserings- og planlægningsredskab jeg benyttede til dette projekt.

Lavet af: Emil Gray Thomsen

Jeg oprettede ikke et element for hver delopgave jeg satte for mig selv, men benyttede det til at lave en oversigt, jeg senere oversatte til den tidslinie der også kan findes i dette projekt.

Som værktøj, ser jeg dets primære nytte i fler personers projekter. Det at skabe et visuelt overblik, er ikke så vigtigt for mig som enkelt person.

Style Guide

Main Color

#00583C

Secondary

#222531

Text Color

#EEEEEE

Text (Header)

#FFE477

Text (Contrast)

#966711

Gradient Farve

De første 10%

#002C32

de miderste 80%

#00333A

De sidste 10%

#002C32

Den oprindelige version af hjemmesiden så meget anderledes ud. På dette Figma link kan man se hvordan det oprindelige koncept var. Årsagen til ændringen var skaleringen til Desktop, da mange af elementerne virkede meget "app" lignende.

Derinde kan man også kunne se de oprindelige style-tiles.

Typografi

Jeg valgte at bruge to forskellige skrift-typer. Til titler valgte jeg en Slab-serif font der hedder "Copse". Men for den almene brødtekst valgte jeg en sans-serif font ved navn "Inria Sans".

Stemning

Jeg valgte at siden skulle være professionel men samtidig afslappet. I for kommerciel, men samtidig ikke fuld af alt muligt "rod".

Tidslinie for Projekt: Portfolio

Mock-Up

fredag d. 29-11-2024

Design af mock-up og idé generering ud fra projektets rammer.

Planlægnings møde

mandag d. 02-12-2024

Selve denne tidslinie blev planlagt her i starten af forløbet.

Gantt-kort laves.

Storyboard og Shot-liste og manusskript til videoer laves.

Frontpage

onsdag d. 04-12-2024 & torsdag d. 05-12-2024

Design af frontpage udføres i HTML og CSS.

Standard opsætning for undersider

fredag d. 06-12-2024

Design for undersider udføres i HTML og CSS.

Optagelser og tilrettelser

mandag d. 09-12-2024 til fredag d. 13-12-2024

Optagelser af videoer til hjemmeside. Fotografering til hjemmeside.

Gennemse hjemmeside og opdater style-tile med nye idéer.

Tilrettelser og Færdiggørelse

mandag d. 16-12-2024 til onsdag d. 18-12-2024

Gennemse hjemmeside, genoverveje style elementer.

Fremvisning for familie. Aflevering!

torsdag d. 19-12-2024

Fremvise produkt til familie. Afprøvning af site-navigation, læsbarhed og udtryk.

AFLEVERING!

Test af website

fredag d. 20-12-2024

Kontroler hjemmeside på flere devices og ret mulige mangler.

Kontinuerlig opdatering

Frem til eksamen

Brug lidt tid hver dag på siden, finpus og optimer koden.

ReCap

November 2024

Abstract

This project was about creating a marketing campaign and landingpage for a brand or company. Additionally we were given the task; that the product for the brand had to follow the principle of "Cirkulær" which means renewel or circular in regards to production. My group chose to work with a sustainable coffee pod solution. The idea was to give patrons the ability to leave their pods outside or schedule pick-up and for it to be gathered by one from our company "ReCap". The current solution to rid yourself of these pods are to deliever them at a store that sells them. I myself have one of the coffee machines and have to transport the pods 25km to the nearest store. During our research we did realise that the companies that sell these pods are trying similar systems and that our business model properlly wouldn't work in the long haul.

Landingpage

Som del af opgaven skulle vi designe en landingpage for vores valgte/opfundne firma. Vi valgte selvfølgelig at gå med en mobile-first fremgangsmåde. Dette er blevet standard for resten af mine produkter, da chancen for at en bruger besøger siden på sin mobil er enormt meget større end på desktop.
Læs mere her.

Vi påbegyndte vores arbejde ved at lave wireframes. Vi vidste da det skulle være en landigpage, at vi skulle være påpasselige med hvor meget information der var på siden.

Som en del af processen skulle vi også prøve at komme frem med en farve-palette. Denne udvikling var lidt udfordrende, da vi både skulle prøve at finde farver der viste "Kaffe", "Bæredygtighed" og "Ny-tænkende". Vi endte derfor med et lidt konservativt valg: En mørk men tryg grøn og en varm brun. Den hvide vi valgte som baggrundsfarve, skulle løfte energien med sin klare hue. Vi havde også en pasel-grøn, som blev brugt som en fremtrædende baggrundsfarve.

Som sidste led af landingpage processen lavede vi desktop versionen. Den største ænding var at kolapse så meget så muligt, for at skærpe brugerens fokus på det nødvendige. Som feedback fik vi faktisk flere foreslag til hvordan dette kunne optimeres yderligere.
Besøg figma for opgaven.

Video

Som en del af projekter skulle der fremstilles tre videoer til kampagner på sociale medier. En på 30 sekunder, 15 sekunder og 5 sekunder. Vi valgte at designe én lang video, der kunne brydes ned i de respektive mindre dele. Jeg stod for at være den primære kamera operatør og lavede den 30 sekunder lange video (Med feedback og i samarbejde med gruppen).

Se slides med mere information.

Første Website

Oktober 2024

Abstract

This project was about designing and coding a website for a random politician. I have chosen not to link the site, as it would then be possible to missuse the page as if it was made with the consent of the politician. If asked, I can show it on my computer, but I will not release it publicly, due to the afforementioned missinformation possiblities.

Ludovico

September 2024

Abstract

This project was about creating a landingpage for an artist and conceptualise some physical marketing options for said artist. My group chose the composer and classical musician "Ludovico Einaudi".

!!THIS PROJECT WAS NOT MADE WITH THE CONSENT OF THE ARTIST AND WAS MADE AS TRAINING MATERIAL!!

Marketings kampagne

Opgavens hovedformål (udover en landingpage) var rekalmer til digitale platforme og fysiske pladseringer. Vi valgte at lave en instagram video og nogle mock-ups til rekalmer på busser og busstoppesteder. Vores begrundelse var, at følgere af klassisk musik, nok nememst kunne nå på medier og steder med en lidt højere aldersgruppe.

Se tidligere iterationer af reklame.

Styleguide

Det var i dette projekt jeg først blev introduceret for "Style-Tiles" og for den generelle idé om Styleguides. Dette betød også at vi i gruppen fokuserede meget på at følge den fremsatte metodik om udførelsen af "Style-Tiles". Senere fandt jeg min egen metodik, der fungerede for mig, men jeg er meget glad for at være blevet introduceret til en fast metode, for nemmere at kunne kommunikere med mit team om de valg man traffer om designet.

Se alle versioner af Style-Tiles.

At have en opdeling gav mening for os dengang. Fir-delingen af: "Farver", "Typografi", "Designassociationer" og "Komponenter". Dette er super smart, når du arbejder i Figma, men personligt synes jeg at associations-ordene og komponent området ikke giver så god mening, efter konceptionalisering.

Vi arbejde også meget med brugen af AI i dette projekt. Vi brugte Adobe Firefly til at generer alle billeder brugt i projektet, med undtagelse af Ludovicos allerede ekisterende album covers; som blev brugt i reklame videoen.

Vi benyttede os også af Adobe Illustrator. Det var med dens AI værktøjer at jeg fik produceret coveret til vores fiktive "Limited Edition Vinyl". Jeg færdiggjore processen i Adobe Photoshop. Resten af landingpagen blev sammensat i Figma.
Se det hele i Figma.

Prototyper

August 2024

Abstract

This wasn't exactly a single project, but closer to an experiment. The goal was to try and create a prototype of a website in Figma. The team's main goal was to use pictures that we had taken ourselves, and to use photoshop to enhance or change any image that may need it, to better its conveying power. We were suposed to outline and prototype a website for a festival or other social event. We chose to do a one night concert, in the heart of Copenhagen.

Skål&Skrål

Hele projektet handlede om at afprøve, teste og debatere hvilke elementer der skulle være og hvordan de skulle se ud. Vi havde valgt at lave en "festival/koncert", og skulle derfor prøve at skabe et brand med en bestemt stemning.

Vi forsygte os med en typografi der var lidt legene og useriøs. Senere fik vi dog en ret hård feedback om at det var for børnet og ikke "seriøst nok". Vi mente jo nemlig at det skulle være fjollet, men det lod til at vores målgruppe synes at maskotten og tekst-typen var for fjolede.
Se det hele i Figma.

Skrivearbejde

Den første rigtige opgave på studiet var også den der lagde mest vægt på det skriftlige arbejde. Vi arbejde meget med elementer som: C.R.A.P, Gestalt love, over/under folden, sitemaps og breakdown strukturer.

Vi arbejde på at optimere vores skriftlige arbejde, da vi havde et max antal sider det måtte fylde. Skulle man være intereseret i mere information om disse elementer, kan man altid Kontakte mig.

Vi påbegyndte også vores arbejde med en sides "style". Det forholdt sig dog så simpelt som muligt, så kun font og farvepalette blev uddybet.
Læs opgaven.