The Goal


Nestor is a filmmaker from Vienna and needed a new portfolio to show his past works.

He wanted to reach new and existing clients. He has a broad skill set and this was unclear in his past website. I highlighted his roles per project to focus on his many qualifications. Making his roles more apparent is also great for gathering new clients, since that means having more google worthy keywords on his site.

People visiting his site either are already in the industry and looking for a freelancer to help them for a specific project or people in the art scene looking for someone documenting their work.

The Research


A big problem I noticed is that many filmmakers had tons of videos on their site. Most of them were set to auto play or were used as a quick preview which slowed their sites drastically down and made the sites visually overloaded. Many used their videos as the key visual element, which resulted in them having to use very high quality files. I even saw a site that used a 50mb video file in their hero! In favor of performance I wanted to use less videos in the layout itself and compress the videos as much as possible.

The Process


First scribbles for the new site structure

I greatly reduced the complexity of the page since his clients are usually interested in specific parts of the site and were frustrated by the complexity of the old site. Another side effect was that thanks to the new small navigation I didn’t have to implement a burger menu on mobile. Not having a burger menu is great for two things: Showing the user where they are (by highlighting the active page), make the site more accessible by reducing one click/touch (to open the burger menu) and also making it more apparent what the site is offering.

Nestor is working as a filmmaker so I wanted the first impression to highlight that. I implemented a background video on the landing page. We looked through his material and found a video that was great for that cause: It wasn’t too bright, didn’t had too many movements and had a simple composition. Having the video darkened in the back and text in the front also made it possible to greatly compress the file size of the video (while hiding the worsened quality) which ensured for quick loading times.

On the landing we also showed four of his projects. I decided not to show the most recent ones but, together with Nestor, handpicked four. I did this to, once again, highlight his broad skill set and get a diverse overview of what he has done in the past and which clients he worked with.

People interested in working with Nestor often wonder if he can adapt to their tech stack. Working in film is similar to working as a developer. Everyone uses different equipment and programmes, so it was vital for people to see which one he knows and is fluent with. We grouped his knowledge into 5 core abilities.
Every core ability was accompanied by a short overview of the programmes he is working with. For example sound design showed that he is working with Adobe Audition.

A problem I noticed was that with the video on the landing, all the projects and many images the site became overwhelming. I played around with the design and settled with making the hero triangle shaped. The pointed down triangle also served as a subtle visual hint to scroll down. The triangle shape made the site more open, dynamic, less crowded and allowed for more white space.

Prototyping


I worked with Figma for designing and prototyping. The main problem people had with my first prototype was the choice of the font and the colors, which I then changed in response to the feedback.

The Finished Product


With the new site Nestor can approach clients quickly and effectively. Clients now have a immediate and clear vision on how he can assist them and what his skill set contains.

You can see the full result at nestor.video