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.
With the Pinterest board in mind I started boiling it down to a simpler moodboard, the final moodboard is what you can see below.
The final Moodboard i built my whole portfolio’s mood upon.
Having the general mood defined I pursued creating a stile tile to further define the portfolios look.
The style tile i developed after the moodboard foundation.
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.
Lo-fi wireframe sketches of my portfolio.
With the rough layout from my Lo-Fi sketches I went into Adobe Xd to further define my design idea.
Hi-Fi Wireframe for my portfolio.
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.
On this picture you can see the key light being my ceiling lamp.Here is my fill light with a piece of cloth over it as a light diffuser.
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.
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
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.
In this project we had to create a portrait of our selves in Adobe illustrator using only the pen tool.
The method
Before making our self portrait we had to make sure that we understood how to pen tool works. Our first task was then to recreate the lines you can see above.
Process
With the pen tool basics out of the way, I went on and made my self portrait. For some reason I decided to start with the hair, which ended up looking a bit bit funny. After my hair was done, I drew my visible body parts so face & hand. In the process of drawing my face i decided to leave out my eyes because they were hidden behind my hair anyway. it also looked kind of creepy when the eyes drawn.
With most of the work done i finnished drawing my shirt and added 2 different solid color backgrounds.
The Self Portrait
Conclusion
I had a lot fun drawing my portrait. If i had to do this again i would probably apply some more techniques other than just pen tool. I would also like to play a little more around with gradients to make it a look a bit more realistic.
But in general I think i ended up with a good looking portrait that resembles the picture and me pretty good.
In this project I redesigned the ordering food experience through a phone app. In the proces of creating this app, I went through 8 phases that guided me to what i have designed.
Interviewing the target audience
Before starting with the prototyping i had 7 phases infront of me to help understand the food ordering experience. First i had to gain empathy by interviewing my target audience. In my first interview i learned that my audience is often hungry and lazy. They eat freezer food once every 2 weeks, make food themselves every second day but it’s usually healthy foods like chicken & greens. They prefer door 2 door delivery and it’s usually when together with friends or drunk they order food.
After getting some ground understanding I went in to dig a little bit deeper from what i learned in my first interview. I learned that the audience would really like some more healthy options that isn’t extremely expensive. Even though my target audience is really interested in healthy food they also think desserts would be a cool edition for food ordering. The part of being lazy was also very prominent in this interview.
Here’s my notes from the interviews.
With the interviews done i went in to capture the main findings and afterwards define the problem. My audience needs is cheap healthy food, but they’re also very lazy.
So my audience needs a way to get cheap healthy food because they’re lazy and there’s not enough availability on the market.
Reframing the problem from what i learned during the interviews.
With a understanding of the problem i’m trying to solve i went on to start ideating some app ideas. After having doing some sketches i got some feedback based on what i had sketched.
Process of sketching
After getting the feedback i changed some small things and went with the first design
Final sketch idea
After being done with the last sketch I finnished my project in Adobe Xd.
On my final prototype i have some mistakes that i will have in mind the next time i design an app. I accidently did a hover effect which doesn’t make any sense on a phone app, I also forgot a checkout menu for entering card details and such. I also had plans to make a profile tab but sadly didn’t get it done in time.
Besides those mistakes i’m pretty confident and happy with the general look and design of my final protoype.
In this project we had to make a short story using Adobe Animate.
Storyboard
I decided to try something new which was making my storyboard in Photoshop instead of drawing it by hand. It ended up alright and definitely helped with the vision of what i was aiming for.
Adobe Animate Process
In the process of creating the animation it self i used 5 symbols to make everything work out. As a challenge to myself i choose to create everything inside Adobe Animate so i could learn from its available drawing tools. I also used a bunch of classic tweens to make the trees, car & wheels move.
As my moving art artwork i choose the album cover of The Velvet Underground & Nico’s Debut album “The Velvet Underground”. The album cover is a banana painted by the artist Andy Warhol in 1966. I’ve always had this exact album cover on my cornea as an interesting art piece. I was especially interested in choosing this album due the albums alternative cover which is a peeled banana i thought it could be cool to show what’s behind the iconic banan. I had this great idea to peel the original banana cover and then make the alternative album cover be eaten, then close it up again and repeat the whole process.
“The original album cover ↑““The alternative album cover ↑“
Preperation in Photoshop
I started out by isolating all my components for the animation in Photoshop.
I also made a story board to show the general idea and define the states the banana would go through
After isolating my components in photoshop and making a story board i decided to make a quick gif using my photoshop knowledge and the Timeline feature. I ended up with a pretty good result and made my idea very obvious.
Here’s a pic of my workspace in photoshop. I used the transform warp feature frame for frame.
Here’s the process of my animate project. For the peeling of the banana i used to asset warp tool and for the biting of the banana white circles for making it look like bite marks.
In my animation i’ve used stretching of the banana peel to make things a little interesting to look at. I did this by warping it the 2 isolated peels. i’ve also used the principle of appeal since I believe i’m not the only one who wonders what the inside of the banana looks like. I’ve also somewhat used the principle of anticipation in the way that the banana peel kinda slowly opens and closes between the biting actions.
For our introproject we drew the notes loving coffe and hating stress. With those 2 themes in mind we decided to make a brainstorm in our group on what we could create with that. Since we our theme basically went hand in hand we obviously had a lot of ideas.
Brainstorm
Our first idea
Topic – Stress & Coffee Title – Evil circle of overwhelming stress Focus Points – Coffee, Time, Notes, Stress
Frame 1: In medias res – loud alarm, start of the day (black screen) Frame 2: Arrival at the office, dark and still Almost no posting or work assignments Frame 3: The light comes on, ready for the working day Frame 4: Coffee is made – coffee in picture Enjoy it and the silence before the chaos starts Frame 5: Ready to start, almost completely neat and tidy To-Do Frame 6: The PC starts, notifications loud noises and pop-ups Perspective to the post and today’s tasks Deadlines! Frame 7: Working day, several posted The clock is in focus as time goes by less coffee Frame 8: Empty coffee pot Makes more coffee Frame 9: Focus on the clock, the day almost finished Almost no one posted back Frame 10: Piles of paper, posted – DEADLINE sound image: loud bang heavy
Our Second Idea
Morning routine: Car stress, driving towards campus Campus is crowded, no parking Goes to wrong building Change by class local Halter out making coffee in the hallway color and light spectrum is in class doing project
Our Third Idea
Coffee bar: See picture of latte art Employee loves to make coffee Then the store opens More and more customers are filling the store Lots of queuing making coffee, stressful Spills coffee, burns themself more depressed mood queue is endless finally finished
Our Fourth Idea
Coffee advertising: Atmosphere over nuances High brightening screen 3rd person working partner comes in with coffee color spectrum change more elated
Story board
After brainstorming taking a look at our ideas we decided to take the first idea. We believed it was the most plaussible project to finalize within the timeframe we got.
Before beginning taking pictures for our stop motion movie we thought it’d be a good idea to make a storyboard so we all understood what sequence of pictures we were about to take.
Recording The Production
When we all had our mindset in the same place we began setting up for the shoot. We found a nice quiet place on UCL where we could work undisturbed. Due having access to a nice DLSR camera we concluded we had to use it. We sat everything up on a table for it self so we didn’t have any shaking problems.
Speaking of shaking we were kind of scared that clicking a button on the DSLR every time would make a shaking result. We solved this by installing an app that could connect up with the DSLR and remotely take pictures for us.
With all of our pictures taken we agreed to do the editing in the in the evening together on discord. And of cause that’s what we did.
In our call i sat and edited everything together while everybody gave immediate feedback and came with sound effects that we could use.
In the whole process of editing we used Premiere pro.
As our target audience we choose 18-25 year olds. Our main plan was redesigning the interaction between people on dating apps.
With our minds in the right place we decided to find 2 people that fit our target audience and asked them both the same questions.
Questions Round 1 “Where do you live? What do you do in your sparetime? What are your preferences in gender? Have you tried dating before? > Which apps have you used? > How often do you use dating apps? > How do you interact with possible hookups on dating apps? > Why not? What would make you use a dating app What is important to have in a dating app What is something problematic with dating apps that you’ve experienced before?”
Our first person Peter is from Odense Centrum he has a lot of interests like sailing, gaming, football, basket, D&D and much more. He prefers dating females and have used apps like Tinder, Snapchat & Facebook to make new connections. He doesn’t use those apps anymore but used to for hookups. He would be interested in using a dating app again it it means a new easier way to find women or new social groups. When he interacted with women on the apps they usually were talking interests, finding common ground and possibly doing something together. Peter really liked the way you can see how you’re linked to your match kind of like the way Facebook shows you your mutual friends. Peter really dislikes the way people are able to not be themselves on most of the possible apps out there.
Our second person Bea is from Odense Vestby she enjoys being with her friends & boyfriend, training in fitness and playing tennis. She has tried dating apps before like Tinder and Happn to find hookups with men she usually did this on saturdays. They interacted by chatting, having some conversations and sometimes linked up face to face. She would be interested in using a dating app again if she was single. She liked using Tinder but never really had anything she disliked about the app.
Dig Deeper
After having spoken to Peter & Bea we got a better idea of what current dating apps were missing. But we needed to go a little deeper. So after listening to our 2 target audiences we formulated a 2nd round of questions from what we’ve heard.
Questions round 2 “How important is having friends with similar interests in activities just for you? Would like to see if the people you’re interested in have mutual friends? If you could make new friends on an app would you be interested? How would you feel about the picture on the profile would be smaller than fx. Tinder so there would be more focus on the bio/interests How would you feel about connecting all your media up in one app?”
Peter thinks it’s very important to have friends with mutual interests, he also thinks it would be nice if he could see if people he is interested in have any mutual friends. Peter is also open to make new friends and not just a possible partner. He doesn’t think appearance is top priority when it comes to making new friends or partners. Peter would be open to use his Address/phone book to find new friends, but he’s a little bit skeptical of connecting most social media.
Bea doesn’t mind making new friends with dissimilar interests. She also thinks it would be nice to see if possible friends or partners have mutual friends. All though she has a boyfriend right now she be interested in using an app where she could get new friends and possibly even new career acquaintances. She doesn’t really care for appearance when it comes to making a new friends. Bea is not interested in connecting her phonebook up but open to use her social medias.
Capture findings
Needs: A new way to connect with new people with the same interests as yourself
Insight: Profile picture isn’t as important as currently are on other dating apps, so it would be nice with more focus on interests and bio.
Define problem statement
Name: Peter Needs a way to: Connect with people who has the same interests as himself But: He would also like a way to make networking connections, so he can find people who are already done with the same major as himself so he can talk/ get help from them.
Name: Bea Needs a way to: Connect with people who has the same interests as herself Because: She already has a boyfriend, so has no need to find people to date.
Sketch at least 5 radical ways to meet your user’s needs
We then proceeded to create 3 quick wireframes each
Share your solutions and capture feedback
We then shared our wireframes to get some feedback from our audience.
Peter said : Use the best from all 3 and combine them in 1
Bea said : Use the emojis Description on the emojies The first profile setup
With that feedback in mind we decided to create a final Lo-Fi Wireframe
Reflect and generate a new solution
We hadn’t thought about messaging and profile settings and small ways to interact with the interface. So we added a messaging page where you can see your contacts and write to them, a profile page where you can change your own profile like the bio, picture and interests.
Hi-Fi wireframe
We also decided to make a style tile to make it would be easier for us to style the Hi-Fi Wireframe.
“The alternative album cover ↑“
“