Portfolios are an important part of a web designer’s job hunting arsenal. In most cases they are the only thing that a prospective client or employer have to decide if you are the right person they are looking for. More importantly, portfolios are extensions of our own work so don’t just think of them as dumb pages to show off your work. Treat your portfolio design as just another piece of your own work as they deserve to be.
This is something I’m currently researching myself as I start preliminary work into redesigning my own rather dull portfolio display so it would make sense to share my findings with you all.
Previously we’ve looked at web app homepage design and the key ingredients of great single page web design and now it’s the turn of web designers’ portfolios. There are a number of different ways to present your work. Here they are as well as some of the best examples:
By far the most popular form is to display work as a grid, mainly because it is a neat and tidy way of presenting many different pieces of work. Here are some of the best grid based layouts in use by web designers.
Most suitable for: 6-9+ examples of work.
Nick uses large images split into three columns to really let his work do the talking.
Sam uses a very dark background colour to produce a big contrast between his work an the page, making the images stand out more.
The portfolio of London based designers includes a filter so visitors can narrow down the work they do as they have numerous examples.
The next most common method of displaying portfolio work is by layout each piece of work below each other. This is even simpler than a grid system and lends itself well to showcasing your absolute best work rather than every website you’ve created. This layout method gives the designer the opportunity to use large previews of their designs rather than having to click through to a separate page.
Suitable for: 4-8+ examples of work.
Mike Allan uses a linear arrangement with a minimalistic style to display his work.
Duoh have multiple pages of work but stick to five on a page preventing the view from becoming overwhelmed.
The portfolio of Jesse Bennett-Chamberlain takes full advantage of the linear layout to display not only big images but also supplementary images and illustrations of each project.
Case studies are a not-so-common way to present portfolios online. Mainly because they require considerable more work as at least semi-detailed explanations need to be written. The benefit is that anyone viewing your portfolio can see much more information about the project rather than just the name, picture and short description.
Most suitable for: 1-5 examples of work.
Miles Dowsett presents every project on his portfolio as a case study.
Rob Morris uses a standard linear style for his portfolio page but also includes case studies for key projects.
Most suitable for: 3-9+ examples of work.
On the squareFACTOR portfolio page, they confine their work to a single section where users have to click on an image to load a selection of images into the main gallery area.
Featured/Latest Work Area
Often used on web designers’ homepage, featured project(s) area are a way of focusing a visitor’s attention on a select few projects. These are usually the ones the designer holds in high regard in comparison to their other work or they can simple be used to display the most recent completed work.
This approach allows the visitor to get an immediate impression of the designer’s work before they decide if they want to drill down further to see their complete portfolio.
Most suitable for: 1-3 examples of your best or most recent work.
The homepage of Adapted’s website contains a single featured item with a brief description and a link to a case study of the project.
Steven Highlands highlights a single project for attention crossed with a brief case study style.
The homepage is one giant featured work section for the portfolio of Mike Precious.
Bespoke Design for each Project Page
Paravel take the idea of case study to the next level by creating separate designs for each individual product page. This is achieved through the use of unique header illustrations and layout of information and screenshots below.
What style or styles do you use to show off your work? Let everyone know in the comments.