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.

The first one we’re looking at is one page website designs. By far the most common use of single page websites are portfolios but they can be suitable to just about any business type. However, there are a few things to take note of before going down the single page route.

Navigation

Of course navigating a single page website is going to be different than any other site as there aren’t any links to take you to different pages but navigation is still a key ingredient of a one page design, although handled differently.

Navigation as Part of the Content

Clicking on the navigation in Polar Gold reveals the content for that section directly below. As such it is a great way of keeping the site compact and easy to use.

Navigation Secondary to Content

Bullet use a strong visual indicator of a line flowing from one section to another to guide users around their site but also uses navigation fixed at the bottom of the page as a secondary way of getting around.

Horizontal Navigation

A relatively new trend is to layout a one page design horizontally rater than vertically. Creative techniques of this have been put to use as on the recap of 2009′s Front-end Design Conference while also giving you an easy way to navigate from one section to the next. This is vital as while most mice these days support vertical scrolling, relatively few can scroll horizontally. Without any form of navigation, the user of a horizontal site will have a frustrating time using the scroll bar at the bottom of their browser.

No Navigation?

Some sites do away with navigation entirely such as James Lai’s portfolio who uses thumbnails of his work that load into a single large area when clicked. Doing so places the visitor’s attention purely on the content allowing it to become the focus of the site. This approach depends on how much content the site requires as ultiple sections would require some form of navigation for usability.

Creativity

Single page sites don’t have to conform to a set template and have given designers the opportunity to be more creative with layouts such as Tomáš Pojeta‘s site. Here he creates a scene consisting of one section being in the sky, another section at sea level and the final area underwater leading down towards the seabed.

Eric Johansson’s personal site sees and illustrated version of himself travelling from left to right on a scooter as you scroll along the page.

We Bleed Design gets very creative with the use of colour and transparent PNGs. As you travel down the page, a fixed image of coloured lines get hidden and revealed behind images with various transparent elements.

Content

Of course, content is a key ingredient of any site but it is slightly different for a one page design in the way it is used and displayed. It is better to keep it short and too the point, even more so than usual. After all, a one page site is a cut down version of a regular site.

Tap Tap Tap dynamically load content for each of their iPhone apps into a single, defined space on their one page site with the use of AJAX much like the example of James Lai above.

The portfolio of Fran Book also uses AJAX to load content in dynamically but with the familiar method of using tabs.