Craft the perfect portfolio in a day

Put your hand up if you haven't updated your design portfolio website for months. Maybe years? When you're working flat-out on final-year projects, freelance commissions or a consuming day job, sprucing up your portfolio can quickly drop down the to-do list. But it doesn't have to.

If you're a student, you can't afford to put your portfolio off; you need to be ready to leverage crucial opportunities. And if you're an established designer, it's just as important to maintain a fresh online presence.

We know you're busy, so we've put together a handy step-by-step guide for creating – or revamping – your graphic design portfolio site in 12 hours. Follow it over a day, a weekend or a series of evenings and turn a lacklustre digital portfolio into something with the 'wow factor'.

Hour 1: Write a plan

So where do you start? The best way to approach your portfolio is to treat it like a client commission and spend the first hour writing a brief. What's the purpose of your portfolio – do you want to be hired for a permanent position? Freelance? Do you want to sell products or build your reputation? Is evidence of a strong style important, or versatility? Think about your intended audience: what skills do you need to promote to achieve your goals?

To help focus your vision, it's a good idea to analyse your offering at this stage too. List your core skills and wider knowledge areas, and then condense them into one concise, compelling sentence. This will help direct what you do in the next 11 hours, and you can include it on your homepage or in your About section.

Hour 2: Pick your platform

Now think about your choice of platform. If you've already set up a portfolio site, it can be tempting to stick with the status quo, but consider a few things first. Is the layout visually pleasing or crowded and cluttered? Does the site work on different devices? Is it easy to edit and update?

If your current online presence isn't working for you
and your visitors, then it's time to rethink. Fortunately for time-pressed creatives, there are plenty of platforms that enable you to build a portfolio in minutes, with no coding required.

If you're a Creative Cloud subscriber, Adobe Portfolio is free, and it synchronises with your Behance profile automatically. Another popular option is Squarespace, which offers a mobile-optimised personal website option for £10/month or an unlimited business option for £15/month, both of which give you a free custom domain with an annual subscription.

Carbonmade lets you showcase 10 projects
 for $6/month, 50 projects for $12/month or an unlimited number for $18/month. All three tiers offer a degree of customisation. Fabrik is a relative newcomer that gives you 50 projects for £6.25/month,
 or unlimited for £15/month.

Another option is WordPress, see our list of the top portfolio Wordpress themes.

Hour 2.5: Customise your site

Whether you're choosing an off-the-shelf option or taking a more custom approach, make sure your site's layout makes your work the main focus and navigation is intuitive. "The navigation should be really simple," says Benjamin Simon, art director and 3D artist at Trier-based studio FOREAL.

People are busy and pushed for time, he explains, "so you need to get there quickly. Give people an overview straight away and invite them to go deeper if they want to." Someone landing on your site should be able to view examples of your work without too much scrolling or clicking so they can quickly and easily scan what's there and get a good feel for your style.

There are stacks of ready-made templates available for the major online platforms, including plenty of freebies. "I've used a few different ways to showcase my work," says Kefalonia-based designer and letterer Corina Nika, aka Cocorrina. "The first was a small section on my blog, but with time that felt less professional. I discovered  Cargo through a fellow designer and felt it had enough of a professional vibe to it."

Note that you're aiming for professionalism, so avoid pointlessly flashy design. The old adage about 
taking away anything unnecessary applies here, otherwise you risk irritating potential clients. "I hate it when websites are too 'designed' or won't load instantly," advises art director Natasha Tomalin, who has worked on titles such as Stylist.
"I just want to see your work nicely and cleanly presented."

"Keep your portfolio site clean, minimalist and user-friendly," agrees Michal Sycz, creative director at Warsaw-based studio Noeeko. While it can be tempting to fill your landing page with quirky biographical details, people might leave your site if they can't see visuals 'above the fold'. Sycz says that it's better to let your design and illustration work speak for itself: "Your projects should be the most prominent part of the website."

This means using a layout that's suited to displaying visuals effectively. Don't pick something overly complex with lots of columns, sidebars, bells and whistles. In fact, a simple, single-column layout can be very effective and is more likely to work well on mobile. It's also essential to use a content management system so that you can make future updates easily.

"You might not be thinking about that right now," explains Dirk Schuster, art director and illustrator at FOREAL. "But consider flexibility as well as simplicity, so you can change the site in the future." That way, you won't invest time now only to regret it later.

Using a flexible system also means you needn't delay setting up your portfolio until you've finished upcoming projects that you're dying to include. Get the framework in place now and you can easily add to it down the line. For example, Corina Nika replaces older images with new ones every three to five months. "That way, I always have fresh work up, showing newer skills and aesthetics," she says.

Hours 3-4: Curate your best work

Curating your portfolio is one of the most time-consuming parts of the process, so be prepared to put a few hours into choosing which projects to include, and preparing the assets and accompanying text. First, remind yourself of the purpose of your portfolio.

Then begin selecting projects that best serve your goals, making sure you're building a clear picture of your skill set, style (if relevant) and creative personality. Also make sure that you're showcasing the work you want to do more of.

"Choose projects wisely," warns Nika. "[The projects you include in your portfolio] should be favourite ones that reflect your style and who you are as a creative. I used to include pretty much all of my work in my portfolio, but it started to feel really crowded and difficult to maintain."

With a mish-mash of old and new projects,
styles and influences, Nika realised she wasn't clearly communicating what she wanted to say. "Always keep in mind that what your potential clients see in your portfolio is what they will expect," she adds. "So consider aesthetics and style according to the clients that you want to attract."

Similarly, the designers at FOREAL – who only upload around 10 per cent of their work online – agree that it's a good idea to focus on the sorts of projects you'd like to do more of in the future.

There's no point showing work for an impressive client if it's the kind of project you hate doing, so don't let client names drive your choice if it means overlooking your best projects because they aren't name-dropping fodder.

A simple solution is to separate showcased work from your client list – FOREAL's client list, for example, is on a different page, leaving the studio free to choose the most visually impactful images for its project section.

Diversity is important, so assemble a good cross- section of the work you've done without making things too crowded. Between 10 and 20 projects is plenty; fewer if you're a student.

If you only show food and drink branding projects, or a certain illustration style without a variety of applications, you're leaving your potential to the viewer's imagination. "I like to see a variety of subject matter – people, faces, landscapes, food, buildings and so on," says Tomalin. "Show your skills off in every area, so we can see that you are versatile."

You don't have to stick to creative that was signed off. If you did extra work, or had a solution you loved that was vetoed by a client, upload it – just make it clear that it's not the approved creative. As Nika points out: "Mockups are the best way to make your work look realistic and polished." Another great way to show additional or new skills is to include side projects as well.

Hours 5-6: Prepare your assets

When you've finalised your projects, it's time to look at how you're going to present them. "We're really picky about what we put online," says Simon. "It's so important that the visuals are the most graphical ones, with the most power at the very first glance."

Process images can add insight into what you did and how, but resist the temptation to include behind-the-scenes material that doesn't document anything significant or add to the story. A good method is to start with the finished images, then some close-ups that showcase your skill, followed by some initial concepts and early sketches.

Make sure you resize all images for the web. If you fill your site with large files, it will slow down loading times and eat up mobile bandwidth. As Dirk Schuster points out, "nobody likes waiting ages for visuals to load." In fact, make your users wait too long (and we're talking seconds here) and they'll likely abandon your site altogether. 

Also, avoid bad housekeeping habits by holding onto the original hi-res versions of your files on your hard drive and giving the resized images sensible names. Descriptive filenames look professional if text appears while an image is loading and help with search engine indexing, so 'project0135.jpg' just won't cut it.

Using an appropriate filename also ensures relevant details are imported into Pinterest if people pin your images.

Hours 7-9: Share the story

It's important to contextualise each project, but the good news about text is that you don't need to write much, says Simon. "[On our own website] we've chosen to keep information minimal and focus on visuals," he says.

For each project, explain the basics in a short paragraph or two. State the client, overall objective and key deliverables, such as a series of print posters to advertise a music festival, or a brand identity for a new clothing company. Include any constraints and the timeline. Also make your role clear: what did you contribute? Finally, include success metrics if you have them.

It's harder to write succinctly than it is to blurt out everything, so this will take time, but the ability to explain your work clearly is a sought-after skill and too much text becomes clutter.

A good rule of thumb is to ensure every sentence conveys at least one key fact about the project. Along with the initial images, the description should hook viewers and make them want to scroll down. And whatever you do, proofread the text once you've written it.

Hour 10: Order your work to create impact

Once you've chosen your projects, think about how you're going to order them on your site. Aim for a big impact. "You want to create a 'wow' effect in the first few seconds and then try to keep up the interest," says Dirk Schuster. People won't spend long looking at your website, he notes. If you want to make an impact, "that happens within the first 10 seconds."

If you have a landing page or the option to display some images at larger sizes, pick between one and five projects that you want to prioritise; if not, put these projects first so that they're the most visible.

If you're having trouble prioritising your work, take a step back and select the images you'd want to show someone who is only going to look at a few examples of your work; often this is exactly what happens. Consider pacing and rhythm.

It's fine to arrange things chronologically, but not essential, and the organisation and order may change on different screen sizes in any case. Also remember that people can only view so much on a screen at once. It's not just about time and convenience – if your folio looks like the digital equivalent of a messy corkboard, art directors may draw negative conclusions about you.

"There certainly is such a thing as too much to say," says Tomalin. "I don't have time to sift through thousands of pages of work. It also shows me you can't self-edit, and that's a big bugbear of mine."

Hours 11-12: Set your portfolio free into the world

Now make sure that your contact information is up-to-date and easy to find, and don't neglect your About page. If you're pressed for time, use the brief you wrote at the start of the process (you can expand on it later), and add a client list and links to social media channels. Consider your own branding, too.

You can make subtle use of your logo and headers without overcrowding the layout or distracting from the visuals. Ensure that every clickable link on your site works correctly. Then check how everything looks on different desktops and mobile devices. "A good portfolio website should look nice on all devices," emphasises Sycz.

Case studies give visitors a deeper view into your process, so think about adding some when you have more time. For now, though, focus on keeping your site updated with recent work. "One of my irritations is how some agencies present the same work every year," says Stephen Jenkins, an art director who's worked for The Guardian, Wallpaper* and British Vogue.

Of course, no portfolio is ever finished, but now you've spruced yours up, you're back in the game.

Illustrations: Michael Driver

This article first appeared in Computer Arts magazine issue 251. Subscribe now.

Read more:

• How to curate a creative portfolio
• How to make social media work for you
• 5 mistakes designers must make to succeed