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:
Grid
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.
N.Design Studio (Nick La)
Nick uses large images split into three columns to really let his work do the talking.
Massive Blue (Sam Brown)
Sam uses a very dark background colour to produce a big contrast between his work an the page, making the images stand out more.
Delete.
The portfolio of London based designers includes a filter so visitors can narrow down the work they do as they have numerous examples.
Linear
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
Mike Allan uses a linear arrangement with a minimalistic style to display his work.
Duoh!
Duoh have multiple pages of work but stick to five on a page preventing the view from becoming overwhelmed.
31Three
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
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
Miles Dowsett presents every project on his portfolio as a case study.
Digital Mash
Rob Morris uses a standard linear style for his portfolio page but also includes case studies for key projects.
Use of Javascript
Javascript can be used to aid presentation of online portfolios by making them more interactive.
Most suitable for: 3-9+ examples of work.
Branded07
The portfolio of web designer Rob Palmer uses a familiar Javascript carousel to cycle through a few select projects. Also when you hover your mouse over the image, a box appears with the name of the currently visible project.
squareFACTOR
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.
Danny Blackman
Danny Blackman uses a one-page portfolio and linear approach to displaying his work with the use of Javascript as an easy way to navigate from one example of work to the next.
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.
Albert Lo
With a combination of Javascript to show multiple images of three selected projects, Albert Lo makes effective use of a featured work area.
Adaptd
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.
Shylands
Steven Highlands highlights a single project for attention crossed with a brief case study style.
Mike Precious
The homepage is one giant featured work section for the portfolio of Mike Precious.
Bespoke Design for each Project Page
Paravel
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.
Show Yours
What style or styles do you use to show off your work? Let everyone know in the comments.
Tweet
Great list, i know I’m blowing my own trumpet but here is a link to my horizontal, linear portfolio: http://www.davidtgill.com/portfolio/
I like to think of our portfolio site as a work in progress. When we started mapping out how it would look and function, I gravitated towards something that was minimal, filterable and grid based. The end user can drill down even further to view mini case studies for each project. We are very please with the design right now, but I know myself. There will probably be a complete redesign before the end of the year.
Nice Article Tom. I personally have the linear way of presenting my portfolio pieces on my portfolio site, http://www.jadgraphics.net/
I also broke it down into different categories as well.
Nice examples that you featured here. Also, I appreciate the write-up on each one. I really like reading the commentaries that you made as well as suggestions of how many should be in a single page, etc. Well written article.
Designing your own website is always the hardest job. I set myself a tight deadline (10 days) to design, write, and build my portfolio so I wouldn’t agonise over it too much. I settled on a never-ending grid “wall”.
Hey, really cool portfolio. I like the “never-ending grid wall” I have yet to see something like this before. I digg!
Agreed, great work Andy!
Thanks guys!
I love the case study approach, but I noticed longer stays and more page views from visitors when I changed from detailed case studies complete with testimonials to a simple title big sample and link to demo.
I still think the case study approach was more informative and can’t believe that my visitors didn’t appreciate the more detailed explanations.
Also I love the example above that sues illustrations or graphical elements form the sample out into the design of the site.
I can easily see doing that in a future revision of my site. By breaking these elements out of the page is a create way to show your creativity.
I petty the fool that thinks designing their portfolio site as a chore, its probably one of the most exciting projects you’ll ever work on, its usually coupled with the stress of needing to find a job, so I suggest working on it again after you can pay your bills so you can be more relaxed and more creative
–
Thanks and Regards
Noel for Nopun.com
a graphic design studio
hay!
Thats pretty Nice way to present. I like that “Duoh” simple and soft.
Anyway guys my portfolio gonna b here soon.
thnx
Regards,
Web Design Company London
A lot of really cool ideas here! We change our portfolio around whenever we get bored with it – we figure we’re bored with it, you must be too. : P
…Our newest creation uses a gallery style layout, since that’s the general look and feel of our site. Our Portfolio!
Reuben & Sherri
Fly Media Productions
These sites are beautiful and inspiring, but I noticed most of the portfolios you mention are CSS and Blog-based, and almost all of them involve long pages that scroll. There’s a dearth of Flash-based sites, any particular reason? As a designer and Flash developer, you might say I have a vested interest in your answers.
Thanks!
I like the portfolio.Very nice list.
Beautiful! While it would be funny if the designers have done poorly their sites … Profession oblige!
I have just made my first portfolio, im pretty new to web design I have only been coding for about 6months so its probably not up to pro standards yet.
I like the linear aproach, and using a nice java script smooth scroll with a fixed position shortcut menu has i ‘hope’ given my site a nice flow.
Great article. In the process of building up mine and this will be a great help.
My site uses a grid soft-of.
You can visit is at
http://www.25thingsdesign.com/portfolio
I feel delighted to read such a good post. The author has done a great job in sharing this great piece of news with us through this blog. Thanks. Keep up the good work.