Author: victorsehested

Under vores første møde ved studiemakker på tværs introduktionen lærte jeg nogle af de nye multimediedesigner på 1 semester at kende.

Vi fortalte hinanden omkring vores ambitioner, hvad vi kunne og hvad vi forventede af uddannelsen. Her var vi alle tredje semestre meget åben for at kunne stå til rådighed når det kom til feedback og at kunne hjælpe de nye hvis de stødte på problemer.

Til dette event fik vi mulighed for at mingle, snakke og fremvise vores AR/VR projekt fra dynamo til de nytilkommende studerende.

Refleksioner

Jeg føler studiemakker på tværs projektet er en super god ide men kunne havde været udført lidt bedre. Føler at forskellige perspektiver og sparringer med sin gruppe kunne generelt kan sætte nye tankegange i gang og måske hjælpe på ens projekter.
Dog har vores gruppe været besværlig fra start grundet mangel på kommunikation.

Vi i vores gruppe havde meget svært ved at komme i kontakt med hinanden da google sheets dokumentet var fyldt med fejl i navnene. Her var det rigtig svært at få hinandens kontakt oplysninger da navnene var forkert og man ikke kunne slå hinanden op ud fra oplysningerne.

Jeg synes eventet var super hyggeligt og føler det var en rigtig god måde at samles på, Dog kunne man godt have påkrævet at man skulle lave en gruppechat eller discord server hvor alle er på.

Introduction

In this project we had to convey a user manual in a website context together with developing content for different medias. This was all done with the intend of improving on the company NORQi’s problems. We worked through their defined requirements which was convey and intrigue their core audience

My Responsibilities

My responsibilities have ranged a lot in this project. As one of the main things i’ve worked on is the general design solution for our conveyed user manual.
The whole process was first sketching some lo-fi wireframes, defining higher quality hi-fi wireframes in Adobe Xd and at last defining a slightly functional prototype for our own developing pleasure.

Below you can see a the process of what i’ve defined above.

• 

• 

• 

• 

• 

• 

• 

• 

• 

Besides the user manual I also worked on a Adobe Xd prototype for our facebook content page which can be accessed here: https://projects.animaapp.com/p/5AKO14J/ya45GCY/facebook/prototype

For this facebook mockup i took screenshots of NORQi’s existing facebook page and modified preferences so it was relevant with our 5 P approach & messagedesign methodologies.

Since i took some pictures at the company visits I decided to edit some of them and apply them to the facebook mockup. Here i edited the pictures in lightroom to what i felt like fitted the general feel and style of the facebook.

• 

• 

• 

• 

• 

I also had my hand in the user manual developing process, here i worked on making some content svg’s interactive. I did this by using JavaScript & HTML.

I also edited the presentation video for the client which can watched here:

Since we needed a lot of different important assets for the website I had to work on illustrations & pictures. Here i did things like illustration touch ups, the polka dot design element & patterns.

Short Summary

In this project I’ve worked on things like Facebook mockups, After Effects Info graphics, Adobe Xd Wireframes, Photography, HTML, CSS, JavaScript & Illustration

Reflection

I’m very happy with our outcome and think we did NORQi’s requirements its justice. I think the general project was a little vague in some areas but i feel like i’ve learned a lot from this semester that i could apply to this project. It also helped with general good morale in the group, we all worked hard and good together which really shows in our final solution.

Introduction

In this project we’ve designed some digital content for a what could of been a potential client. We picked this specific client from a selection of flyers we were given.
We choose this wood turning guy with years of expierence behind and thought it could be a fun challenge to update and improve his current content.

My Part

During this project I’ve gotten a lot better with things like HTML, CSS, JavaScript, After Effects, video recording & editing. Below you can see some of the content & graphical work I’ve done.

Reflection

From this project I’ve got a better insight in ways to go about designing content for different clients. I’m also really glad that i got to work a bit more with JavaScript & Css which I’m still planning on improving further in school & spare time.

I feel like I have a much better understanding of general After Effects navigation after this project, though i really wanna get my After Effects skills improved for the future being. Having access to the media lab could also have helped with my video and been nice in this situation but sadly wasn’t.

I think the general project was really hard to complete properly since we had problems with cooperation with our client and felt the general assignment was a bit vague and hard to put into context.

If we could go back in time and do things differently then choosing Jørn Anderson(The wood turner we made a video with) as our client would of made a lot of things easier since he was very interested in cooperation unlike our client.

Introduction

During our Project 5 we had an introduction in After Effects. During this introduction we got an exercise on making use of our newly advanced skills in After Effects. Only rule was to make it relevant to our project at hand of digital content for “Den Fynske Trædrejer”.

Project Development

For the developing my idea I wrote and drew up some ideas, here was there one idea prominent in between them all which is what i went with. I’ve always been fascinated with the use of motion tracking so I thought i would give it a shot and play around with it.

Before going out and shooting my video idea I drew up a storyboard for the video’s progression.

When i had my idea under planned out properly I went out to record my A-roll, here i found the perfect fallen tree log I wanted in woods. I went on to record this tree log as slowly and steadily as i could with my OnePlus 8 Pro phone in 4k resolution.

After having my footage recorded I headed home and started working on some graphical elements I wanted in the video. I wasn’t really sure on what i wanted in the video besides some graphical elements that follow the scene so i ended up making it like a kind of relevant as a advertisement.

I designed and created all of my elements using Photoshop and exporting them as pngs for the After Effects project. Here i mostly used googled images and what our client had on his existing webpage.

• 

• 

• 

– Keyframes
– Motion tracking (track motion) (took long time due 4k res)

As for the After Effects project I imported my footage and started tracking the whole scene using track motion. When this long process was done i added my pngs to some of the surfaces that were created from the motion tracking.

Final Product

This is what I ended up.

Reflection

The generel project was super fun to play around with but there are a lot of things i would of done differently if i were to recreate this idea. Things such rendering in 4k was a bit overkill for what the project entailed, this was just a hurdle in a time consuming way. 1080p would of done just fine for this project. The footage was also a bit shaky so the footage would really have benefitted from having gimbal during recording.

Introduction

In this exercise we had some boundaries in how the exercise normally goes due covid-19. Here it usually was done using Lego’s but we had to use collaberation software Miro instead. The exercise was about applying scrum to a scenario of urban planning.

Our solution and task at hand

We solved the problem by setting up a scrumboard for the development planning. Here we had a product backlog filled with tasks during the start of the exercise. We had a sprint backlog with the task we needed done during that exact sprint. Sprints are divided into usually multiple sprints per week basis, since this exercise was just during one day we just had 1 sprint. Then we a had a progress bar to keep track of what everyone was doing at all times. As the last 2 groupings we had the finished tasks in done and a review bar for quality control.

Here is a screenshot of our finished product in Miro.

Reflection

Scrum is a really powerful tool for organizing and keeping track of development. I can easily see myself use this tool in the future for developing different projects in a group context.

In this project we’ve developed a new subpage for House of Code with a specific focus on “user experience”. The projects goal was to create a new page for House of Code “start your project”.

The Foundation of the project

For at skabe os et bedre overblik over det generelle projekt har vi udarbejde

To create a better overview of the general project, we prepared a Stakeholder analysis, a risk analysis, PESTEL-model and a Business Model Canvas.

BMC & PESTLE

For at få et overblik af business delen lavede vi en BMC og PESTLE model. Her fik vi ord og finger på specifikt hvordan/hvad/hvor diverse elementer af projektet hører til.

To get an overview of the business part, we made a BMC and PESTLE model. Here we caught on specifically how / what / where various elements of the project belong together with what direction we had to go.

Udarbejdelse af projekt

Scrum

Til planlægning af hele vores projekt har vi brugt scrum. Det har været super fedt at kunne dele tasks op og uddelegerer nemt. Det har også været smart at kunne holde styr på hvad der sker samt hvem der laver hvad og hvornår.

We have used scrum to plan out our entire project. I found this method of working, delegating & splitting up task a really smart way of working. It was also really easy to keep track of tasks and who did what.

You can find our Scrumboard here: https://trello.com/b/FwTXKmvd/modul4-scrumboard

Animations

Illustrator –

Before I started drawing various illustrator files, I analyzed one of their pre existing animations from their website. Here I took and downloaded their animation and split it up into frames so I could work from a single finished frame. When I had the end frame I threw it into the illustrator and immediately started drawing it up so I had some parameters to work from. Here I found the exact parameters for the pattern, height & width dimensions as well as the size of the rectangle holes.

With all the critical knowledge for the Illustration in mind, I drew and colored my codelines illustrations with a randomized swatch script I found online.

Siden jeg har set en del videoer omkring lottie og after effects fandt jeg ud af at for at kunne animere ens illustration, skulle den splittes op i forskellige lag. Her tog jeg så derfor og delte alle mine block paths for hver illustration op i 3 per layer. Dette gjorde at jeg simpelt kunne forvandle min Illustrator fil til svger der kan animeres i after effects.

Since I had seen a lot of videos about lottie and after effects prior, I found out that in order to animate one’s illustration, it had to be split up into different layers. I therefore took and divided all my block paths for each illustration up to 3 per layer. This allowed me to simply turn my Illustrator file into SVG files that could be animated in after effects.

After Effects –
In order to recreate their animation, I started analyzing their animated icons again. Here i looked into things like the velocity of the lines, when they were in picture, where they came from and where they stopped. Here I found an okay similar method to be able to recreate the design of the animations.

Det krævede ikke det helt store kompleksitet for at kunne genskabe. Det var primært opbygget på en masse Position og opacity keyframes. Derudover delte jeg også mine layers op i højre og venstre så koden kom fra begge sider.

It did not require the greatest complexity to be able to recreate. It was primarily built on a lot of Position and opacity keyframes. In addition, I also split my layers up into right and left so the code block/rectangles came from both sides.

Video

Angående vores præsentations video gik det lidt ud på det samme som animationerne. Her var de fleste screenshots taget og redigeret med photoshop. Ellers har det primært gået ud på at skrive tingene inden i premiere samt animere diverse elementer i Effects Controls med keyframes.

Regarding our presentation video, I kind of used same principles as the animations above. Here, most of the screenshots were taken and edited with photoshop. Otherwise, it was primarily about writing things inside the premiere as well as animating various elements in Effects Controls with keyframes.

Git, GitHub & version control

Når det kom til versionsstyrings og samarbejde af de forskellige benyttede nogle af GitHub Desktop hvorimod andre brugte Terminal eller VSC’s inbyggede git feature. Her var det meget forskelligt hvad jeg brugte. Umiddelbart har jeg selv brugt alle nævnte metoder, dog vil jeg fremadrettet gerne have bedre styr på terminal og diverse git commands.

When it came to version control and collaboration, we used GitHub Desktop whereas others used the Terminal or VSC’s built-in git feature. Here it was very different what I used myself. I myself used all the mentioned methods, however, in the future I would like to have better control of the terminal and various git commands for better workflow.

The Websites code

CSS & Sass

Da nogle af os allerede kendte lidt til diverse compilers endte vi ud i at bruge Sass/Scss til at compile vores CSS. Det var super sjovt og fedt at bruge Sass, det skabte en stor orden i vores CSS filer og var med til sørge for struktur når ting skulle ændres.

Since some of us already knew a bit about various compilers, we ended up using Sass / Scss to compile our CSS. It was super fun and cool to use Sass, it created a really good regulation in our CSS files and helped provide structure when things needed to change.

JavaScript & Lottie.js

Under vores Style Guide har vi linket et JavaScript hvor alle har haft deres js færdigheder på spil. Da det ikke har været muligt for os alle sammen at kunne byde ind med js elementer lavede vi derfor en separat fil som viste at vi alle havde styr på deres variabler, console.log, if else statement, loops & arrays.

Under our Style Guide we have linked a JavaScript where everyone had their js skills at stake. Since it was possible for all of us to be able to bid with js elements in our final project we linked this this files up to our Style Guide. In this JavaScript file we had variables, console.log, if else statement, loops & arrays.

Siden vi var meget interesseret i at implementere animationer ud fra scroll har vi også tage brug af LottieFiles/Lottie.js. Selvom dette i teorien var et library fik vi godkendelse til at brug det, dette fordi det har været super relevant for vores koncept ideer og projekts udvikling.

Since we were very interested in implementing animations based on scroll on the page, we had to use LottieFiles / Lottie.js. Although this in theory was a library, we got approval to use it because it was super relevant to show our concept ideas and project development.
If you’re reading this please write a comment 🙂

Reflection

I have personally been really happy and proud with what we have worked out. The website became super cool and I feel like I have performed really well especially in terms of animations, video, coding & version control.
Although there are still a lot of small things one could review, I feel that overall our idea and concept has been executed really well. If it came to things we could of done better I would say the general knowledge of using JavaScript in our animation was a little bit too complex to be able to tailor to precision. Maybe this knowledge would come from working more with Lottie.js.

In addition, I also think that we have had a super good group who have really helped each other problems and learned from each other.

Introduction –

As my first semester project i had to design, develop and create a portfolio for myself. Here i took liberty to design what I’ve always wanted for a portfolio. Even though the project had some certain requirements that had to be done wasn’t I halted in creating what I’ve always wanted.

Project Development –

Moodboard & Stiletile

To get a sense of what i wanted communicate, I created a moodboard with what i found interesting in my design research. Having done this design & visual research I collected all interesting founds on a pinterest board, here I also defined some of these characteristics with keywords in the Pinterest board description.

Find the Pinterest board here – https://www.pinterest.dk/victor3dprinter/victorsehestedcom/

With the Pinterest board in mind I started boiling it down to a simpler moodboard, the final moodboard is what you can see below.

Having the general mood defined I pursued creating a stile tile to further define the portfolios look.

Wireframing

When developing my page layout I had my Pinterest board in mind a lot. My general idea was to create something easily repeatable with code without having tons upon tons of css code.

With the rough layout from my Lo-Fi sketches I went into Adobe Xd to further define my design idea.

Adobe Xd

Having my wireframes done I decided to make a prototype that i could use for coding reference. My plan was also to usertest this prototype but ended up not having enough time sadly to do so.

Reflection –

I think I’ve performed really well yet there are still plenty of room for improvement. I feel like this project help me gain a lot more knowledge and interest in improving skills. The final product i came up with is useful and looks alright for what it is going to be used for. I am interested in revisiting the project in the future though when my frontend and Ui/Ux skills have improved.

To say the least, this portfolio project laid a good foundation for presenting me & my skillsets.

Next time I’ll be revisiting this project I will be having things in mind like, proper use of semantics in the code, designing and developing for mobile first so i don’t get responsive conflicts, better attention to size on desktop (together with other C.R.A.P principles) & having subpages with descriptions for relevant projects.

In this project I have taken some product photography & videography of a garden/decoration object. Since I didn’t have a lot of advanced equipment available at home, I decided to make my own little studio with make shift objects.

Equipment

Kamera – Oneplus 8 Pro
Key light – Ceiling lamp
Fill light – iPhone 6
Tripod – ESDDI

As my equipment I used a OnePlus 8 Pro for all video recording and photography. I also my tripod together with an iPhone 6 as a type of fill light for the object. As my surface I used a glass pane under the object for some interesting reflection on the table. The glass pane can be seen in action later down in the lighting section.

Even though I used a smartphone for photography was the option to shoot in .raw files still available, so that’s of cause what I did.

Lighting

I used 2 different types of lighting for my at home studio setup. Key light & fill light.

As my key light I used the ceiling lamp in my room. My ceiling lamp already had a shade on it which basically meant that it was diffused by itself. This was also very apparent in my content since there wasn’t any hard shadows.

As my fill light I used an iPhone 6 with flash on. I decided to put a piece of cloth over the iPhone since I thought the background shadows of my object was way too sharp. This piece of cloth really helped diffuse the light & shadows.

Besides my at home studio I also used the broad daylight for my outside shots. Since the sky was filled with clouds meant that the general light was also diffused outside. My camera seemed to work very well with the outside light.

Settings

Most of my settings were on auto since it helped a lot with everything being handheld. I always made sure that my object was in focus before recording.

I also used .raw files so i could post-process my photos in Lightroom after shooting.

Shotlist

Before recording for my product video I made a shotlist of roll I could use as reference for when I was gonna record.

Object with plant on the head (Studio)
(A) – From the side
(B) – Front
Ultranear on (Studio)
(A)- Face
(A)- Face from side
(B)- Ear
(A) – Zoom in on face
Object being used (Backyard)
(A) – Dolly tracking (Though handheld)
Object being used
(B) – Object with Oranges/Limes/other fruits in it
(A) – Object with some kind of plant in it

Editing & Manipulation

Photo

For my photo editing program I used Adobe Lightroom Classic, this is a program I’ve worked in a lot so I knew the general process.

First thing i did was find a neutral target color on the background so the temperatur and tint(white balance) would fit perfectly for product photography. After this I started working a little bit on the pictures crop since the background wasn’t perfectly horizontal. With the cropping basically done I slowly started on the Tones. My main method was to create a lot of contrast so I could contrast the background from surface. I did this by sliding highlights & whites up high while sliding shadows & blacks very low. The presence sliders also helped bring out a lot of texture and detail in the object. This is what I ended up with.

After cropping some of the other pictures, I copied the preset from above and applied the preset to my other cropped pictures. With this done I was ready to export and manipulate some of them in photoshop.

For the photoshop editing i used the clone stamp tool & healing brush so I could repeat my glass pane further out from the picture, this made the overall pictures seem seamless.

Video

For my videoediting I used Adobe Premiere Pro.

I started out by scouting some free background music, here I used something I found on youtube (https://youtu.be/ZhhHzi4VnvA). I used the slient parts of this song to make the video very relaxed and calm.
After having imported all my clips and music I started on the editing proces. First I dropped one of my video clips in the timeline so the overall video dimensions was defined. Here some of my videos was for some reason 1080p which meant i had to scale them up.
I then slowly started adding the rest of the clips in an almost random order. The way I decided to edit the video was to transition in rhythm with the music.

I’ve also added an adjustment layer over all of the video so I could do the same color grading method as I did for the photos.

My Final products

• 

• 

• 

• 

• 

Reflection

I could of really used some kind of stabilization gear since some of my footage was a bit shaky, I could also have used a dolly. It would also have been nice with some better equipment in general for improvement.
Regarding the glass pane I used could also have been a little bit bigger for the video content. This was easier to fix in photoshop for the photo content being.

For some reason some of my video files was in 1080p and not 4k, I believe this is something to do with the settings on my phone. The upscaling didn’t really seem very noticeable in the end product but it’d be nice to understand why this happened.

Work files

https://drive.google.com/drive/folders/1yyM_DKsIPX6sIrlX7HO1MD0YNI1DsM5o?usp=sharing

In this project, I have developed a video of a typical everyday morning in my life. As the overall focus of my video, I had chosen the proces of producing a fresh cup of filter coffee.

Method

As a start, I wrote a short script of clips I would like. Based on each scene, I categorized them by A-Roll or B-Roll. A-Roll are the important must have scenes and B-Roll extra scenes.

Keywords: Ultra-close, Focus on my actions

A-Roll & B-Roll
(B) Scene – the light turns on (slowly), the clock rings, I put my feet in my pacifier shoes (almost ultra near)
(A) Scene – walks to the kitchen (door frame, floor creaks)
(B) Scene – The light turns on in the kitchen and you see the coffee machine (the sound of the switch)
(A) Scene – Opens the cupboard, finds the right coffee and a filter
(B) Scene – Washing the filter
(B) Scene – 2 spoons of coffee
(B) Scene – Fills the jug with water
(A) Scene – Fills the Coffee Maker with water
(A) Scene – Turns on the shower
(A) Scene – Turns on the coffee machine
(B) Scene – Pulls shower curtain closed
(A) Scene – Slowly zoom in on the coffee being brewed while there is a shower sound in the background. (the sound of the coffee slowly gets louder the more zoomed in)
(B) Scene – Pulls shower curtain open
(A) Scene – Turns off the shower
(A) Scene – Finds a cup from the cupboard
(A) Scene – Placing the cup on the table in front of the coffee machine and pours a cup of coffee, Takes the coffee out of the picture … and The end

Sound recordings (scrapped)
Bad turn on
Bad sluk
Curtains for
Curtain from
Power outlet on
Coffee machine working
Coffee machine on
floor creaks

Initially I had plans to record various audio files, but after hearing the recordings from my phone, I chose to scrap them due their poor sound quality.

In addition to the scene descriptions, I also drew the A-Roll clips to visualize my ideas a little better.

Recording

After having drawn and decided my shotlist, I gradually started filming the various recordings.

Editing

While editing, I was pretty lucky considering my DSLR camera had a better microphone than my phone. Therefore, of course, I chose to use that sound.

The entire video was edited in Premiere Pro.

I also learned this clever Adjustment Layer trick to color grade, but I had some problems with it. I’ll go into more detail on this in the reflection part.

Final product

Reflection

Since my DSLR camera is not intended for filming, I had some problems with color grading due to the video quality & compression. If i had to do something similar again, I would probably have used some better equipment this applies to both camera & microphone. Even though it is bad quality and moody i still think its entertaining and gives it some kind of charm.

Otherwise, I am very happy with the process and the methods I have used to execute my final product.

I dette projekt har jeg udarbejdet en sprite animation ved hjælp af Html, Css kode & Adobe Illustrator.

Storyboard

Before I started on my sprite animation, I decided to make a storyboard for how the animation should take place. This was very useful as I knew exactly what to draw in illustrator.

With all the frames and sizes calculated, I started drawing my animation in illustrator. I knew that I had 20 frames in total where all my frames were 300x300px therefore my whole artboard had to be 6000x300px. After I had everything drawn and adjusted correctly, I exported my sprite file from the artboard so that it retained its 6000x300px dimension.

Code

With my sprite .png file exported, I started setting up my code. Below is my html code containing the png image and a div with the class “bomb”. The div is what i’m playing my sprite animation in.

Further down I define the dimensions of the animation, where it is located , how long and how many frames / steps there are in my animation. Below my bomb class I’ve defined the width of the image above the sprite so it’s visible.

For the animation to play I used @keyframes start position that is 0px and then how to start return again that is -6000px

Final product

http://port.victorsehested.com/blogs/cssanimation/

Conclusion

Based on the 12 animation principles, I have used slow in & slow out, as the bomb drops with slightly increasing speed. I have also taken advantage of appeal & exaggeration when the bomb explosion suddenly becomes very colorful and violent with the text and illustration.

I think my final product has turned out pretty good and that I have completed the task without any major problems. If I were to use this for another time, I would probably use it in a more complex and Ui relevant situation. Otherwise, I have had a lot of fun working out the task.