Filmaker's Portfolio

Freelance Project

Skyler's Original Site

My close friend and filmmaker Skyler Knutzen had been wanting his portfolio website redesigned for a while. We were talking one day and I filled him in on what I had been doing in UX/UI. He offered me his website and asked if I wanted to update it's design for him. Eager to take on a project outside of my coursework I immediately accepted.

His website at the time (shown here on the left) looked pretty good as is but I definitely noticed some things I would do differently with the design and functionality. For one, everything was on one page. I didn't feel like his 'about me' section or 'stills' section were given much attention or thought on the homepage. I wanted the focal to just be his film and I wanted to give each other section its own page. 

 

The next thing I saw was his header.  His navigation menu was also these tiny little circles in the top right corner. It was hard to notice and not really necessary on a fullscreen desktop site. I also felt that the social media buttons would look better in a footer, which his current site was lacking.

 

Skyler stated that he wanted to keep the same energy and color palette of his current website but he wanted the design to be updated and better reflect him and his profession.

In my first iteration, I gave his portfolio some new colors that still fit into his existing site's energy. I split it into three webpages giving the homepage exclusively to showcasing his films. I ran the films down the middle of the screen with no space between to somewhat a film reel. I also created a grainy film texture in Photoshop to use over the backgrounds of each page. You can see that his name and titles are the same just different colors. The top nav is three buttons. The bottom nav is in footer showcases his email and his socials. Its simple and to the point displaying what it needs to display to anyone who may want to explore his works.

Skyler reviewed the product and ultimately decided he wanted to keep his original color palette and keep some spacing between the films. The other changes I implemented he loved and wanted to move forward with.

The new page for his photography features a horizontal scroll of his favorite shots. All accessible upon opening the page no need to scroll down to see more. The header and footer remain the same throughout the site.

Skyler's new 'about' page features a different headshot, setting a more serious and professional tone that I felt better reflected him and what he does for a living. Attention is brought to his name with its varying font and size and then to his bio that follows.

Once you finish the bio his resume is right there at the bottom. I feel the page is set up to follow with the viewer as they read making it easy for them to access what they came to the 'about' page for.

The final design for his homepage closely resembles the original homepage that we saw. It is a blend of my first redesign iteration and his original. The redesign utilized the header and footer navigations that his website was previously lacking and it just showcases his films, removing the clutter of his bio and stills added to the bottom of the page.

Overall this was a very fun little project to do. Doing doing my course was nice too as I got to work on further developing my skills in Figma and Adobe. This probably took me about a week or so actually work broken up over a month or to while balancing my coursework. It was also nice to do 'client' work and gain some experience with that, going back and forth with Skyler and getting his input was really helpful to me and guided me to make changes and iterations before arriving at a final product. At the end of the day I was able to create a product that both he and I were happy with and I'm glad I got to help a friend out while gaining another portfolio piece that isn't another class project.

 

Check out Skyler Knutzen's website and his work here.