Digital Web Magazine

The web professional's online magazine of choice.

Creating The Perfect Portfolio

Got something to say?

Share your comments on this topic with other web professionals

In: Articles

By Collis Ta'eed

Published on January 29, 2008

If you’re a designer looking for a job—whether of the freelance or permanent variety—then an online portfolio is pretty much mandatory. In many instances, your portfolio will be looked at without you present, without any other information about you, and probably by a person who has never spoken to or seen you in person. If your portfolio has to stand alone in a critical situation like hiring, it’s worth spending some time making sure it’s going to get the job done!

I like to think I’ve seen all the angles on portfolios; I started out working as a designer, went freelance, expanded into an interactive agency where I hired designers, and finally cofounded a startup where we employ lots of freelancers. Let me share with you some of my observations and opinions—particularly from the viewpoint of an employer—on how to approach the task of building an online portfolio.

Identifying your audience

At its core, building an online portfolio is much the same as any other design brief—the only difference is that you are your own client. So as with any design brief, it’s best to begin by asking yourself, “who is my target audience?” Let’s look at two types of portfolios.

Portfolios to get hired

In this case your audience is clearly potential employers. These people will certainly have a keen sense of aesthetics, and may even be designers themselves, although that isn’t always the case. This audience will be looking to see the quality of your work, but also what involvement you had in each project, find out a bit about you, and discover how your work can help them in their business.

Portfolios to get clients

Here your audience is two-fold. On the one hand we have potential new clients, or leads as they tend to be known—these are your main target audience, as they are the ones bringing in new work. But on the other hand you also have existing clients who may also wish to see where you are at, refer you to someone else, or to complete some admin task such as finding your contact or billing details. In this article we’ll focus mostly on the leads.

The Potential Employer

As a designer looking to get hired, it’s worth taking a moment and getting into the headspace of the person who is looking to employ you. Know your audience and you know how to communicate with them.

What can we assume about a potential employer? Often they will be someone with a web and design background themselves, probably capable of doing the job they are hiring you for. Chances are this person is looking through dozens, if not hundreds, of portfolios. They are looking for a person who will fit into their organization, be able to jump in to current projects, be as capable as the person they are replacing, and who understands what to do.

With these factors in mind, here are four considerations when creating an online portfolio aimed at a potential employer:

1. Get to it

If someone needs to review a hundred portfolios, you can bet they will come up with some shortcuts to make fast decisions about their potential employee.

When I used to look through job applications, for the most part I would open the email and look for a link to click. My first thought would be “is this portfolio downright ugly or horrible?” If it managed to pass that simple test then I’d go straight to work samples, and only if the work was good would I consider reading an about page, blog, or doing anything else.

The obvious corollary is that you have to have some work to show. I would immediately reject any applicant who just sent a resumé with no portfolio of any kind. I was also extremely suspicious of web designers with no website themselves.

You should remember that a potential employer will probably make up their mind within the first half-dozen pieces you show—if you’ve got the goods, get them to the front of the portfolio so they act as a hook. Certainly when I would look through portfolios, if I didn’t see what I liked early on I wouldn’t bother going much further. And if I did go further and unearthed better work buried deep in the site, I’d inevitably wonder why it wasn’t shown early on, leaving questions about the candidate’s understanding of their own work.

The main rule here is get to your portfolio quickly and show your best hand. Only once you’ve made the cut as a potential candidate can you afford to show extra work, talk about yourself, or go off topic.

Screenshot of markwieman.com

EXAMPLE: Mark Wieman does a great job of taking you straight to his best work by having a featured case study on the homepage.

2. Explain your work

Unfortunately many portfolios show work in isolation. Design operates in context, and the business and work of design even more so. Who was the client? What was the brief? What problem was it solving? How did your work solve their needs?

Giving information about a portfolio piece not only fills the viewer in on the job, but it gives you a chance to shine. While you don’t need to write an essay, giving some details will allow the employer to appreciate it not just on an aesthetic level, but on a practical client project level too.

Another question to answer is what part you played in the project—did you do everything? If it was a website, did you build it as well as doing the design?

I’ve seen designers show work that they played only a tiny role in—and although this can get you noticed, it generally just leads to an awkward interview when the questions inevitably come up.

On the flip-side, if you did do everything, then make sure you take the credit! If you went outside your area of specialty (maybe you created the branding when you’re mainly a web designer), or were responsible for a project end-to-end, then you can impress a potential employer.

Screenshot of mariusroosendaal.com

EXAMPLE: My favourite portfolio comes from Marius Roosendaal. For every piece he includes a short description of the work, which appears when you click the description icon.

3. Choose which work you show carefully

I’ve already mentioned getting the best pieces to the front. Taking that a step further, ask yourself what your employer is going to be interested in seeing.

When I ran my small interactive agency, we used to do mostly corporate and government work, so when I would look through portfolios, that’s what I was looking to see. I didn’t want to see arty, grungy work, no matter how creative it was—I was thinking: “Show me how you can still be creative within the confines of a corporate job.” A portfolio that showed work that I could imagine handing over to a client was one I would bookmark.

Ask yourself, what type of work does this agency or company do? What projects can I show that best illustrate how I would help them with their business. Remember, your potential employer is looking at you as someone to work within their existing team, culture, and practices.

4. Wrappers should be easy to open

Have you ever bought a candy bar and had to spend ages fiddling with it just to get to the chocolate inside? No, because companies that make packaging that badly designed would go out of business.

People with not much to do may enjoy exploring a portfolio and clicking on hard to find links to see tiny thumbnails of your work, but a busy potential employer will not. Make your portfolio fast, accessible and simple. If you want to show your interactive creativity, it’s best to do it in the portfolio, not on it.

The two key concepts here are usability and showing the work properly. As far as usability is concerned, it’s really not a good idea to test out new methods of navigation and interaction on a site that is supposed to win you jobs. Interaction and navigation should be seamless and intuitive—anything else makes you look irresponsible.

When it comes to showing work, make previews large, include links to websites, and avoid popping up dozens of new windows. Nothing is more frustrating than not being able to see a candidate’s work fully—and nothing is more likely to get you booted off the short list!

Screenshot of davidloop.com

EXAMPLE: David Loop has an ultra simple portfolio that no-one could go wrong with. The work is presented in large thumbnails and requires nothing more than scrolling down the page to view it all.

The Business Lead

So that covers landing a ‘proper’ job, but what of the freelance designer? A web portfolio represents a wonderful marketing tool; whether you meet a lead and refer them to your site, or they simply find you through Google, your site needs to seal the deal and win you the job. To frame your portfolio to a freelance lead, once again you need to ask yourself: what does this type of person want to see?

There is much more variation in clients than there is in potential employers, but we can still make some general assumptions. A typical lead may be uncertain—unless they have a referral, they are looking at you out of the blue. Moreover, they may not even be sure of what they need beyond a vague idea that they “need a website”. And, of course, just like those potential employers a business lead is short on time.

1. Uncertainty

If your lead is coming to you blind—by searching, from an advertisement, or from some other anonymous source—the chances are they will be pretty uncertain about whether to hire you. And even if your lead has been referred, they will still be looking for reassurance that you are the right person for their project.

There are many things people find reassuring, but some of the simplest are:

Screenshot of trevorsaint.com

EXAMPLE: Trevor Saint has a very stylish testimonials page which holds four glowing quotes that really sell Saint as a designer.

2. Unsure of their needs

Not every lead knows what they want—even if they do, they may not know what they could have. Using your portfolio site to educate your clients about the services you offer and how they might benefit will demonstrate you know what you are talking about, while also helping them get a better grasp over how it all works.

Remember that while design services might seem simple and straight forward to us, your client possibly sees it all as a little daunting.

You might try some of the following:

Screenshot of trevorberg.com

EXAMPLE: Trevor Berg does a good job of explaining what it is he does right up front on his homepage.

3. Busy, busy, busy

Business leads are busy. They have their usual workload, plus they need to hire someone new. Consequently it’s a good idea to make your portfolio as painless and efficient as possible. You can do this by:

Screenshot of artworking.com

EXAMPLE: Artworking provide lots of calls to action including a Get a Quote button right on the homepage.

Put yourself in their shoes

So those are some considerations to help frame a portfolio, but the key thing to always bear in mind is that you must put yourself in your audience’s shoes. What do they want? What do they need to hear or see to realise that you are the designer for them? By ensuring your portfolio is communicating to the right person, you stand a better chance of winning the job you are after.

A word on aesthetics

Of course, along with all the client and employer considerations, a portfolio should always showcase your design talents and style. All the examples in this article come from the fabulous CSSRemix, where I find all my own design inspiration.

Got something to say?

Share your comments  with other professionals (26 comments)

Related Topics: Web Design, Planning, Interaction Design, Information Design, Graphic Design, Client Management, Business, Blogging, Basics

 

Collis Ta'eed is mad about the web and all things creative. You can find projects Collis is working on via Eden.cc where he spends his days slaving away behind his trusty mouse and hammering away at a clunky keyboard.

Media Temple

MailChimp

Advertise with us

Publishing services provided by Blue Flavor

Photos provided courtesy of iStockPhoto.com

Publication managed with the help of Basecamp

Newsletter powered by Campaign Monitor

Content system developed by visicswire

Code managed with help from Beanstalk