Three reasons your portfolio website sucks

Your portfolio website sucks.

You built it to showcase your cumbersome genius, the work on there is spectacular, and it should be the envy of the entire web community.

It was designed to bring in new clients, get you picked up on design blogs, win the respect of your peers, prove to your ex-boss that you do have what it takes afterall, and impress your Mum.

And yet it still sucks. Today we’re going to tell you why, covering the three most common mistakes in portfolio websites.

Reason 1: no one, bar none, likes small thumbnail images

You will never pique anyone’s curiosity with a tiny thumbnail. If you are using them, your options are:

1. Cram everything into a very small space so the full meaning is lost
2. Crop to an interesting part of the image so the full meaning is lost

Why add that extra level of clicking? You are only adding to the user’s frustration. People want to get the information and experience they are looking for immediately. You are a designer. You know this. Have a word with yourself.

It is a truth that we hold to be self-evident that users don’t like too much clicking on a website, but let’s examine this further. Remember old stock image websites? The early Flickr site? Remember having to click on each image you were interested in, only to find that the image wasn’t all that good in the first place, and having to go back and start again? It makes you tired just thinking about it.

We all know that web users are essentially ADHD kids left overnight in a candy store. They want to get in and out with as little mental energy as possible. Fitt’s Law states that the time it takes to move to a target area — in this case each of your tiny thumbnails — is inversely proportionate to the size of the target; there is a speed to accuracy tradeoff. If you are using small images, you are slowing down your precious visitors.

To some extent thumbnails can be a necessity in web design – the confined screen size means that if we are to get a lot of information on the page, we need to reduce box sizes. But a compromise can be achieved between space and image, so that the user can get an overall view of the work and then make an informed decision about the projects they like.

Reason 2: no one cares about your client’s name

If you’re not making the thumbnail image mistake there is a good chance you are making the other big portfolio mistake: the stack of names.

You have created a minimal website where the type is the art. Jan Tschichold would be proud of you. But unless you are working for globally recognized brands likes Adidas, Radiohead and the UN, it’s unlikely the list of clients you have means anything to anyone.

They may even have local recognition where you are, but the web is a global community and if users see a list including Torque Hole, Sminky’s and RadPad, it will mean nothing to them.

And yet potential clients are coming to your website to see what a great designer you are. They want to see work that resonates with them. After a few clicks on names that sound hollow and made up, they will get tired and bored. You are taking away the user’s choice to view what they would like to view.

As with the thumbnails problem, users will get clicking fatigue if they have to click on a whole raft of meaningless names. You should let the work speak for itself.

In a previous design life I made the same mistake with my portfolio — the result? A drop-off rate that would make you wince. Visitors would spend seconds on the site and very quickly get bored of the clicking — or be appalled by the work — and leave. Mercifully, for the good of the internet, that site no longer exists.

Reason 3: half the world can’t view Flash anymore

It’s time to move on.

What you can do about it

Have your portfolio images writ large from the first moment users land on your site. Make them available and knowable at first glance.

If people want to find out more about a project then they can choose to, and you can give them a tour of that job. If you have to have thumbnails, have large thumbnails or have a rollover option to make the work pop so that your visitors can then make their informed choice.

Here are some examples of incredibly talented people who have made good use of web space to make their projects sing for their visitors

Buenos Aires-based motion graphics studio Visual Box is a superb example to kick off with. They have a large and sumptuous thumbnail set from which you can choose to view more, or you can just simply scroll down and get a good overall view of their entire portfolio. That way you can get a fantastic overview of their work without going to the monumental effort of a single mouse click.

Similarly, Cesar Villegas has all his work on the first page with images set large, and you can scroll down to view projects or click on them to view more.

Another great example is Teacake Design,

bold and beautiful, it’s a joy to spend time on this site.

Pea Creative’s site does employ the minimal Stack of Names, but the landing page drops you right into the work — and each beautiful and well sized image represents another project, giving the user a chance to organize their visit by the sound or the look of what they like.

But then we don’t all want to have portfolios that just have large images and that scroll down now do we? We don’t want clients to look at sites differentiated only by typeface choice. Here are some sites that make good use of the large thumbnail.

Large enough to get a good look at the work, small enough to get 15 images above the fold when viewed on an average screen. Ryan McCullah has an amazing portfolio of work too, the kind of design work that makes you ache that you didn’t think of it first.

Steffen Christiansen uses a clean, simple two-color site to exude a quiet confidence.

A design resource in itself, the swissted site is the perfect example of a tasty large thumbnail.

So I hope in this article I have shown you what you can do to ensure you make the best use of your work. You need to give people what you already know they want: to get the information they need as quickly as possible. Why make them wait to find out? You are a great designer. Let them feast on your talent.

Mike Kammerling

Mike Kammerling is Creative Director of London-based graphic design studio Tinder + Sparks. You can read his blog here, and follow him on Twitter here.