What Makes An Effective Portfolio Website

What Makes An Effective Portfolio Website


British photographer, Dom Romney’s newly redesigned website is an excellent example.

Today, I’m going to breakdown what makes it so successful.

#1 Big, Responsive Images

The full width images on the homepage have a cinematic feel and really allow someone to take a good look at them – which is kind of the point of a portfolio site. The site itself, along with the images, is also responsive. It responds to the size of the browser or device proportionally scaling up and down to take advantage of the space available and give the user an optimum viewing experience. Responsive design is a must for all portfolio sites. Dom chose not to go full screen with the images in his galleries for good reason. He says, “We went for the full page images on the home page for the WOW factor and then scaled it down for the portfolios to ensure that the image was being seen as a whole, I’d rather clients see all of a small image than only part of a giant one.”

logo

 


#2 Branding

Dom’s logo is clearly evident in the top left corner without being so prominently displayed that it overpowers the content – namely the images. As such, it’s a good size in relation to the hierarchy of the page. A smart rollover expands the logo adding the logotype of Dom’s name. The red from the logo is used in a subtle manner as an accent and rollover color.

2

 


#3 Simplified But Not Simple

There’s a big difference between a design that’s simple and one that’s visually simplified. A simple design doesn’t have much to it, it’s pretty basic and often lacks that special something. A visually simplified design takes a more complex design problem (often with more content) and figures out a way to communicate it in a clear, relevant and engaging manner. In Dom’s website the proportions of the composition, hierarchy, typography, minimal color palette, and use of iconography all work well to present different types of elements and content in a clean, modern, polished design. Since this is a website, the thing that takes this to the next level is the ux design – the interactive and motion aspects of the site that add that element of subtle sophistication. On the homepage, there’s the animated logo, slide up panel when you click the binocular icon, fade up red rollover on the social icons and the animated slideshow. The animated slideshow allows us to see many large images within a short amount of time without having to click a bunch of times (always a plus!). All of the other interactive/motion elements work well to keep the composition clean and uncluttered with the focus only drawn to these elements (and away from the images) once the user interacts with them. Yet, the experience is richer as all of these aspects are accessible to the user at once.

Typography and layout are the hallmarks of strong design. As evidenced in this slide up panel (image below). There’s a lot of information here, but’s it’s logically grouped and appears clean and well organized thanks to a simple grid structure, dotted lines, margins of negative space around content and a tight type hierarchy.

3

 


#4 Tap into Social Media

Along with the social icons in the header, each gallery has a social share. The more places your work can be seen the better. And there’s no better way to do that than to have others share for you.

social share

 


#5 Integrated Blog

As I’ve said many times, a blog is a must for any independent creative. It works best as an integrated part of your online presence. Dom’s blog is included as a section of his website. It has well considered content and a consistent header with the rest of his site.

blog