Category: Semester 2

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.