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

Visualbox

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.

Cesar Villegas

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,

Teacake Design

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

Pea Creative

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.

Ryan McCullah

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 Steffen

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

Swissted

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.

0 shares
  • http://www.fadamakis.com/ Fotis Adamakis

    I am glad that this reasons doesn’t apply to my portfolio. I usually test modern portfolios in older browsers and I am suprized that most of them don’t have fallbacks.

  • jaystrab

    Reason 4…you have a responsive web design. No one cares about viewing portfolio sites on their mobile phone. Portfolio sites are for viewing on large screens, iPad or bigger. Responsive sites will actually HURT a viewer’s perception of your portfolio.

    • http://twitter.com/urgan urgan

      Seriously? Wow. Just… wow. Because you don’t do it doesn’t mean nobody does.

      • jaystrab

        In addition, I have yet to see a responsive design that looks as good as one that is not. Why? Because you have to make designs reflow for different sized screens. Therefore, you can basically only use squares. Look at the sites listed above. While they look ok, they do not in any way look amazing. Nor do they make me want to hire anyone based on their web design capability. Boring!!!

      • http://about.me/evanjacobs Evan Jacobs

        Sounds like you’ve just been looking at sites made by people without CSS3 chops. :before, :after and border effects (radius, CSS shapes, etc.) can be the difference between meh and wow.

    • bgbs

       If the mobile version of the portfolio puts content first, then it would work fine on a phone, if the opposite is true, then yes, the site would be a disaster.

    • http://about.me/evanjacobs Evan Jacobs

      … just, no.

    • http://twitter.com/TunjiAdeyeri tunji

      Lol.. sorry jay but that is just a load of balls.. how bout you just say “i suck at responsive design so it sucks”?
      Lol.. i have seen lots of responsive portfolios and they are quite amazing

    • Walter

      jaystrab, the purpose of responsive design is to create a website that works equally well on a variety of different devices. If as you suggest, no one cares about viewing a portfolio site on their mobile, then they simply won’t see the ‘version’ optimised for mobile viewing; they’ll only view the desktop version.

      Responsive design doesn’t compromise the desktop experience, so it’s very unlikely that using it will hurt a viewer’s perception of your portfolio in any way.

  • http://www.dessign.net Dessign

    Great Article… If people spend 3 seconds on your homepage make sure its clean, easy to navigate and they know exactly what kind of work/design you do..

  • http://www.joomladesignservices.com/ Smith Warnes

    Yes using small thumbnails can make the website look clutter
    .Everything should be clean and well organized with superb design and easy
    navigation. I liked Cesar Villegas and swissted site.:)

  • Webdesign Seoservice

    Nice post! Not only post your images are so good.

  • Walter

    That’s exactly why you would use responsive design; so that you don’t need a separate mobile version :)

    • jaystrab

      That is an even worse idea, because then your visitor has absolutely NO choice but to view what you give them in your sized-down responsive page.