An online portfolio is more than just a first impression; to potential clients you are that website. Mark Penfold gathers 40 pro tips for getting it right.
Design portfolios should never get between the viewer and the content. But a great online folio should convey a little something about the mind that created it - a hint of personality - and getting this balance right is what being a designer is all about.
A digital portfolio should be visually consistent and easy to navigate, while giving viewers access to the work with an absolute minimum of effort on their part. There are lots of easily customisable solutions for achieving this, so there's no need for you to sweat over coding tutorials: this is a question of finesse.
Focus your efforts on choosing the right projects, photographing your work well and presenting it as an interesting package. There's no need to embellish too much so if you feel the urge to get up close and personal with the visitors to your site, link to a blog.
As always, there are exceptions to the rule. If personality is what you're selling, it has to be on show. But if you have a tendency to over-think things, don't worry. Read on for our tips on becoming a ruthless self-editor.
Choose the best work: What you should include in your folio and why
Do Think about numbers
"For a printed portfolio I would suggest around 8 to 10 projects, but a digital one can hold more. Don't overwhelm the viewer though. And if you do have a wide selection of good quality work, think about using subtitles. I normally look at logos or identities, and judge the rest of the portfolio based on these - but that's because most of my work is in that field. Think about what's important."
Don't Leave out the news
"The calendar section on my site highlights events that aren't necessarily about my latest project, for example if a book or a magazine publishes a feature on my work, or if I do a lecture. I suppose it's more like announcements. This is why I keep the images black and white (well, black and green), so as not to distract from viewing the work itself."
Designer and Illustrator
Do Be forward-looking
"The work that you choose to showcase on your portfolio website should be the type of work that you want to be hired to produce. Only show the projects that you can see yourself producing variations of over and over again."
Don't Over share
"Show as much of each project as you need to in order to get your point across, focusing on clarity of information. What is the simplest way to show each project? Do I really need to show every page, every step, every detail? Which aspects are most important?"
Do Think like a client
"Treat your site like an interview: you wouldn't go straight in and start talking about your hobby. But once you've discussed the project and the client has got to know you a little, you can say, 'Hey, I also do these crazy illustrations!"
Don't Be sentimental
"When it's your bread and butter, you have to be ruthless. It's all about trust when you're a freelancer, so you have to put the big names at the top, the brands people know. Then add the personal work to show that you have other talents."
Do Remember: only the strongest survive
"If someone looks at five projects where one is bad, the impression will be great but also of something bad. If you only show the four great projects, the impression will be 'Holy shit, this designer does everything right all the time' - like James Dean's red leather jacket in Rebel Without A Cause."
Don't Select incomplete work
"If you've only made one poster for a client, don't show it unless it's face-meltingly perfect. Wait until you've made more - always show projects that have had a lot of work put into them, and have been executed to the highest quality."
Do Choose quality over quantity
"We only choose to show work that we have enjoyed doing in the past; stuff that we are comfortable to let people know we actually spent our time on and that we'd like to do in future. Over time, it gets easier to filter as you have more projects to choose from and become clearer about what kind of work you want to bring in."
Don't Play too many B-sides
"Treat your online portfolio as your A-side. If you do include everything, it'll bring down the overall quality of your A-sides. It's like a show being interrupted by commercials: your A-sides are your movie, and including everything in-between could prevent your audience from staying, especially when the online attention span is short."
Do Over-shoot your projects
"I tend to take way too many shots of my work and then edit them down on the computer. When I'm putting together a project, I'll start with around 15 images documenting it, and by the end I will have whittled that down to around seven or eight. I tend to be fairly ruthless and take out what I don't think needs to be there, and just end up with the images I think tell the best story of the project."
Don't Make updates a chore
"I don't get around to updating my site as much as I should do, so having a CMS that lets me do this quickly and easily is essential. There are some great platforms out there that enable people to create a website without any real knowledge of HTML or CSS, like Cargo Collective, Indexhibit and Stacey. The latest incarnation of my site that was launched late last year is based on WordPress."
Do Set up an archive
"When I created www.maurogatti.com, I just published my most recent works from the previous year or so. But I started receiving emails from people asking if they could take a look at my older works. I thought that an archive wouldn't be such an awful idea - some sort of photo album that takes you back in time. But I still haven't selected and published everything because, whenever I open my 'old works' folder, I'm slapped in the face by nostalgia..."
Don't Forget humour
"I decided not to publish pieces that don't stick to my 'no boring thoughts will fill your head' promise. I also excluded pictures of myself wearing Speedos, of my pug Ozzy dressed like Harry Potter and of myself drunk peeing on my front door thinking it's my neighbour's. I reckoned this sort of stuff might have inflicted severe visual disorders on the visitors, although in the right places, a little sexual humour can be the universal key to shredding any trace of sadness."
Do Show your evolution
"It's important to keep your portfolio up to date, but it should also somehow present the direction you had to go to get to the point you're at. It's cool to have some 'old' projects in your folio, especially when they show your evolution as a designer."
Don't Omit the details
"Since you can't give everyone who visits your website your latest printed project, you need to present it in such a way that the look and feel is at least close to holding it in your hand. I like to show a lot of pictures and don't forget about showing all those details."
Do Be consistent
"How you shoot the work - for example, what backgrounds you use, colour, type and formats - should be consistent throughout. As designers, we always bang on to clients about the importance of a graphic identity, having a diverse yet consistent feel, so I like to keep this in mind when thinking about my own website and portfolio showcase."
Don't Hide the detail
"For the image format on my website, I went for a very large size as it's sometimes difficult to see the detail in a project if the images are too small. I find the use of thumbnails and suchlike a little irritating, so I like to keep everything as simple as I possibly can."
Do Balance your portfolio
"Showing projects for well-known clients can help other clients or agencies decide to work with me, so that's important. But really, it's about getting a good mix, with all the projects showing different aspects of what I can do to help my client communicate their message. That's all I want."
Don't Post boring updates
"I update the site when I have something that's interesting for me to show. It could be as much as a few months between updates. The site showcases a small part of the projects I get involved in - 80 per cent of the work I've done is not shown because, put simply, it isn't interesting enough."
Present your projects: Everything you need to know about showcasing your work.
Do Invest in quality
"Invest time in taking good photographs and improving them in Photoshop if necessary. I don't think there's any need to pay for product shots, especially for a young designer. Time and patience will do."
Don't Push the personal
"I wouldn't include a section of personal photography work, unless you are a photographer or you really are talented. Otherwise, it just takes the focus away from your 'real' work."
Alex Le Guillou
Do Establish standards
"I use tools like Adobe Kuler to find my colours, and I assign each to a specific functionality of my interface: one colour for the titles, another for the description, and so on. It allows me to keep a consistent graphic language throughout the site."
Don't Confuse a blog with a portfolio
"A blog is the best way to show works in progress, but it's not suitable for quickly and clearly accessing all your work. For some of my projects, I show the research stages or post a more detailed description, but I'd rather stick to the essential and not overload the portfolio."
Designer and Illustrator
Do Keep a warehouse
"My style is constantly progressing, and when I do get a job I want to be hired for something new that I'm into, not something I might have been doing years back. But I also think it's good to show older works that demonstrate your progression to clients, too. On my website I have a hidden page where experiments go, and where older projects go to rest. So they are still on the site, but just not up front."
Don't Over-shadow your work
"In my opinion you should let your work show your personality, not the site itself. I have seen this over and over again on other artist's sites, so I consciously made an effort to avoid this myself. Let the work shine. Don't turn the client off with lots of unnecessary clutter. It could cripple your opportunities."
Do Keep it short and interesting
"No one wants to read about your projects for more than a couple of seconds, except your parents. People who start out with, 'I started this project by looking at pictures of the sea and then I was messing about with textures and then blah, blah' will have a hard time creating interest. Who was it for? What did you do? What was the result?"
Don't Act like a regular 'professional'
"Your job is to make brands and communication stand out. Do it for yourself as well. Be yourself and allow people to come close. Also make sure you are not afraid of making enemies. Most brands think that enemies are a bad thing, yet today Apple is taking over the world after centuries of hatred."
Do Use categories
"It gives visitors a choice of different routes through which to explore your work. This makes your projects more accessible and allows visitors to find what they're looking for quicker. I use Cargo for my folio, which has a tagging system built in and makes it easy to create category filters."
Don't Create too many of them
"If you only have one project in a certain category, look at your projects as a whole and figure out what categories would best divide them. For example, if you have designed a look-book for a fashion label but it's your only project related to fashion, do not create a 'fashion' category. Instead, include it with other print projects under a 'print' category."
Do Be honest
"You have to be honest about what you've done on a project. It's fine to show work done as part of a team, but make it clear what your role was. The freelance world is full of horror stories like this, and it's very often clear from the other work you've done whether you're being on the level."
Don't Let the site get in the way
"When I first started out I didn't have that much work but I wanted to show what I could do, so I had this complicated Flash site with purple people animated all over it. People still laugh about it now! Today I use Cargo for both my folios and you can just see the work without lots of stuff getting in the way. This shows maturity."
Do Light box DIY
"Photographs of the final printed products are the actual body of your portfolio. It's like you are making the artwork of your artworks. Cheap cameras shooting under indoor lighting against your office desk will give a cheap result, but if you have a good camera you can also do the job yourself with a DIY light box and low-cost materials. There are a lot of tutorials for this on the internet."
Don't Struggle with code
"There are many frameworks out there that you can build your portfolio on but unless you can develop a website from scratch, I think WordPress is the ultimate solution. Search for themes that are close to the layout you have in mind and customise them to your needs. Wpshower.com offers some excellent minimal themes specifically for portfolios with simple designs, all for free. I customised everything to my needs, including the flexible navigation system."
Do Think about platforms
"Think about functionality. Can this be viewed on multiple platforms? I noticed one guy on Twitter who said, 'I've just launched my new site, but don't look at it on the iPhone.' This changed my whole perception of how I wanted to approach my site. With this mind, I decided I wanted to make all my work readily available in just one flick or scroll."
Don't Use unnecessary graphics
"The way I see it is that your work is a piece of art and your site is a gallery. Treat it that way. For example, if you're going to have a place for contact information, keep it in one place, try not to splash it about. And you're a designer not a writer so keep copy to an absolute bare minimum."
Do Hold back the typography
"The typography on my folio was all set in Helvetica Light and in a percentage of black. It's a default and web-safe font and using grey type and the 'Light' weight allows the text to sit back so that the work can stand out."
Don't Complicate things
"No one likes complication - especially when using websites. I went for a fairly simple grid to begin the layout and design of my website. I wanted it to feel less designed and more default, without actually looking 'un-designed' as such."
Do Be genuine
"We try to include basic side notes about some of the production processes and stocks used, or maybe just something we'd like to share about the project at hand. Our design statement is not too formal or technical, so clients can easily understand it. This also helps add our studio personality into the site."
Don't Dress it up in fancy language
"Why talk nonsense when you can talk sense? If your work can't convince people, confusing them won't help either. If a particular job is going to feel like a standard-issue, we'd rather not put it up at all, because it just wastes everyone's time."