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.
