Three reasons your portfolio website sucks

Default avatar.
August 30, 2012
Portfolio

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 piqué 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.

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.

Read Next

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…