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.
0 comments:
Post a Comment