One of the things you have to do to prepare for clients is to put up a portfolio.  I have always felt that your portfolio is the most important thing in selling yourself.  Your resume shows where you learned what and the things you have experienced.  It is the portfolio that you need to use to show what you can do with all of that.

    When building your portfolio, remember its purpose.  The purpose, generally, is to show off your prior work to your specifically desired clients, so that they see something they like and decide to ask you to do work.  You may need to add or subtract some things depending on what your goals are, but feel free to come up with one that’s better (feel free to share!).

Design

    Keep the interface unoriginal - This is hard for so many people.  You want to show off your ninja skills, but even thought this is your chance to go crazy, don’t.  Typically, this means a vertically scrolling, normally organized, clean site.  Avoid complex JQuery or Scriptaculous elements that need extra clicking or unobvious hovers.  Don’t use any items that hide some work and show it if the user does something special.

    Keep the design original – While the interface is going to be relatively normal, this is your site!  Go crazy.  Make sure to design the best looking site you can.  Impress your potential client. Leigh Taylor of leightaylor.co.uk in a comment on a forum says “One of the fundamentals with portfolios and should be at the forefront of all designers is to be memorable – this can be through clean or creative design. When people either from the small local agencies or the big multinationals view a portfolio they are after an experience and you need to communicate this visually within your portfolio, first impressions count! I have talked with the big agencies including Sony, Toshiba, Asda, Disney etc etc and first impressions count the most in order to enable that memorability everything after that including layout, usability, navigation either enhance their user experience or make it worse.”

    Gear it to your target client – Remember who your target client is.  If it is big corporations, keep the design professional.  If it is individuals and creatives then make it fun.  Remember what they would want to see in your designs.  Give them the right impression.

    Maintain focus on content – While your design should be a perfect design, it also needs to control visitor focus on your designs.  If the design is so eye catching that it pulls attention from your work, then you aren’t showing off all of your prior work, you’re just showing off your portfolio design.  Make sure they are forced to look at your portfolio content, so that they see a large variety of your work.

    I know I just said things that sound very opposite, but with the design you must find just the right balance.  It is hard, and you can spend days designing your portfolio.  At some point just stop, and put it up.  Otherwise you will never get things down.  Find out what really bothers you after you throw the page up online.  For developers, I recommend hiring a designer, or doing an exchange of services.

Content

    Show a large variety - The goal is to show enough to get a large base of prospects.  Make sure to show a bunch of different samples.  If you have too much work, pick the ones with that are best, and the most high profile.  When deciding ‘best’ remember that it is what your visitors want and not what you want.  This is the difference between ’staff picks’ and the ‘top 25′.

    Make sure to actually show off your work – A simple thumbnail of a design or screenshot is not enough.  You want to get leads interested any way you can.  Make sure to show off your whole design, link to it with a thumbnail if you need to.  If you are a developer, provide demos of your apps.

    Be Biased – Put your best clients up top.  Done anything for Nike?  Put that up top.  Unless you target anti-corporates?

    Show a lot on one page and a lot about each project – But How??  You want to put as many examples on one page so your client can see at least one thing they like.  But you also want a lot on each individual item so they can see a lot of the one thing they like.  To accomplish this, I would strongly recommend using thumbnails that will show more info when hovered or clicked (remember to keep it easy to use!). This way, you can show a lot in a little amount of space and a lot about each project.

    These are all some seriously specific things, so make sure to customize the content as you feel appropriate.  My own specifics are good guidelines, stray off where you want!

Case Studies

Louie Manita - http://www.louiemantia.com/portfolio.htm

This one I really like.

The good – Great design, makes me highly confident in the designer’s skills.  Which, of course, I already am, cause its Louie.  It is simple, shows off a good variety, keeps a normal interface, and keeps the content at the focus.

The bad – I was going to say it only shows thumbnails, but at a second look I say that all it shows are icons and logos.

 

Zava Design - http://www.zavadesign.com/work.php

Here is a good one as well.

The good – I like the design.  Professional, fun, and clean, and the dark design really keeps the focus on the work.  It shows a list of project screenshots, and when clicked a lightbox provides more info.

The bad – There is only one project above the fold.

 

Agencyzebra – http://agencyzebra.com/

The bad – flash.  No SEO, to complex of a UI.

Update: Max Guedy notified me of a refresh of his site, and asked me to check it out.  I must say I am floored. The new site (same link) really has it figured out. Flash is used in areas to make a great ‘wow’ effect, but important text, like the description is not in flash, and therefor entirely search engine compatible which is a big plus.  It validates XHTML and CSS. The design is clean, and really uses flash in all the ways it was meant to be used – for cool visuals.  Poke around his portfolio, it is actually pretty fun! The design is dark, which emphasizes the work. The branding is great, you can see the simple zebra silhouette in multiple places. It is very easy to skim for works that the client may like, and click for more information.

 

Deanzod - http://www.deanzod.co.uk/portfolio.php

The good – Provides a lot of info on the front.  Lists what the freelancer did on the project.

The bad – Each project takes up a lot of room, which requires a lot of scrolling just to find something visitors like.  Thumbnails are small.

 

Callide Media - http://callidemedia.com/portfolio/gemsmusicpublications.html

The good – Shows a lot of projects in a small area, and shows a lot of content on their individual pages per the project after it is clicked.  They are grouped by service, great to guide clients to what they want to see.

The bad – Plain design, although that is what the designer may have been going for.

 

I’ll be sure to provide a longer list of case studies in a soon coming post, so be sure to check back!  If you have any of your own ideas or comments, leave them on the comments page.