The A-Z of Portfolio Design

by in Design on 4th Sep 2013 · Comments

Every good web designer has a portfolio, but not all portfolios are born equal. Some of us like to use single page designs, showcasing everything we’ve done in one place; others prefer to have separate pages dedicated to a particular task. There are lots of different things you can include within a portfolio too. Do you have an about us section? Case studies? A list of your skills? It’s quite a challenge to craft something with so many demands.

Within this quick field guide, you’ll find 26 practical tips, each explaining the features that every showcase of your skills should not be without. Some of them are design related, others are technical details that should be found within the source code, there are some content considerations included for good measure, and there are some warnings for things you shouldn’t do too. Hopefully you’ll find this portfolio roundup useful!

26 Practical Tips for a Great Portfolio

A is for Achievements

If you’ve ever won an award for your design skills, or been included in CSS galleries, or articles showcasing the best of design, it’s definitely worth making a note about it on your website. While the value (outside of traffic) of these mostly made up ceremonies is questionable, the fact you’ve been included shows that people appreciate the effort you’ve put into your work. Don’t submit yourself to every site you can find though, as that will diminish the value you get from being legitimately included on the basis of quality workmanship.

Awwwards
Awwwards

CSS Design Awards
CSS Design Awards

B is for Browser Support

Whether you’re a Web designer or developer, there is no excuse for your work not being available to certain visitors. It doesn’t matter if someone is using a forsaken browser like Internet Explorer 6, every user of your site could be a potential client. There are plenty of emulators, testing services, and resources to help you get a handle on the ever growing field of rendering engines; so be sure not to end up as one of those people who unhelpfully tells visitors to upgrade their browser or go away!

The Acid3 Test
The Acid3 Test

C is for Case Studies

Having some pretty screenshots on your site is useful, especially for sites that are no longer available, but why stop there? A growing trend among designers is to attach a case study with each client project they undertake. It almost certainly takes more time to produce, but showing your creative process not only helps clients establish if your methods will match their vision, but it also showcases your abilities beyond what a simple image can offer.

ngenworks
ngenworks

D is for Disciplines

Every designer and developer is unique, and we all possess a varying range of skills and abilities. As part of a good portfolio, it’s important to describe precisely what services you offer and what you’re willing to offer clients. While you shouldn’t make a list of all the things you don’t know, or aren’t confident in using in a live project, be sure to explain where you excel, and what it means for potential clients. After all, you don’t want to waste peoples' time.

DoubleThink
DoubleThink

E is for Employment

If you’re setting up a portfolio in conjunction with your work for a business, you should say where you’re working. It could not only lead to further work for that business, but it may also positively reflect upon you as an employee, should you ever want to freelance (or build side projects) in your spare time. If you are a freelancer, list only relevant industry related places you’ve worked before. If you attended college or university, you should also list that separately giving details of what you studied, where you studied it and what you achieved.

Trent Walton
Trent Walton

F is for Frequency

Keeping your portfolio up-to-date is quite possibly one of the most important things you can do for your image, and it’s something far too many designers neglect. While you certainly may be busy with client work, try to post updates whenever you get a free moment. This can be in the form of blog posts, case studies, some new features, or some useful refinements to your site. If your site becomes stale, you might find that opportunities dry up as time goes by, and no-one wants to appear like they’ve abandoned their homepage.

Stewart's Attic
Stewart's Attic

G is for Gravitas

One thing that annoys many people in the industry is how some designers and developers portray themselves on their website. While certain portfolios showcase a subtle sense of humor and it works well, calling yourself a ninja or hyping yourself up as a world class code monkey won’t win you many fans. Web design is an industry and a profession, and as such, your portfolio should reflect that. You don’t have to be dry or boring, but be careful not to overdo your statements otherwise you’ll appear egotistical and not an ideal partner to certain clients.

Ninja Web Design
Ninja Web Design

H is for Happy Medium

As a creative industry, we suffer many of the same qualities as our artistic counterparts. One of the most popular of these traits is our need for perfection. We talk about the days of being pixel perfect as if it was something to be proud of, but in this era of device diversity, it’s not something we should be aiming for. Rather than just scrapping a design because you’ve gone through iteration 37 and still feel it’s not quite right, consider that it doesn’t need to be polished or perfect to be launched, it just needs to be at a happy medium.

1st Web Designer (Demo)
1st Web Designer (Demo)

I is for Inspiration

Designing a portfolio can be hard work. As with client projects, you have an almost endless array of choices to make, and potential pitfalls to fall into. While some people prefer not to use inspiration galleries as references for gaining a few ideas, I personally believe that examining the work of others can inspire you to do more with your own. While I’m not advocating you copy other peoples' designs, and you shouldn’t jump aboard the bandwagon as soon as the next trend like parallax occurs, it’s worth checking how others achieved success to motivate yourself.

One Page Love
One Page Love

J is for Just Enough

When it comes to any portfolio, content is king. Yet while you can certainly make the mistake of saying too little and leaving people asking questions that should have already been answered, you can also go too far and say too much. When a client visits your site, they probably don’t want to learn your life history. In most cases the first thing they want to see is your portfolio, and then get to know you better. As such, it pays to proofread your content and ensure it’s not only well written, but that it can be glanced through as a light read for those in a hurry.

Michiel de Graaf
Michiel de Graaf

K is for Kudos

Have you ever gotten some great feedback from clients? What about other designers or developers you’ve collaborated with? Maybe even a previous employer at your last design studio job? If so, asking politely for some quotes to include on your site could be invaluable. For those giving the quotes, it’s a chance to leave some useful feedback and score another link on your website. For future clients, it’s a great opportunity to gain some insight about your work practices that they wouldn’t necessarily get from a case study or elsewhere within the portfolio.

Chris Mole
Chris Mole

L is for Litmus Tests

While you should ensure that your site works correctly, a personal portfolio is one of the few places where you can push your knowledge of web technologies to the limits. Experimentation is a key part of showcasing your abilities, and while you may not be able to be as playful with another person's site, your portfolio is the best opportunity you’ll have to highlight your talent for crafting unique and interesting designs. You don’t have to do anything superhuman or over the top, but it’s worth trying for something that visitors will appreciate.

Martin Ringlein
Martin Ringlein

M is for Mobile

Responsive design is here to stay… at least for the moment! Because of this, no portfolio has an excuse for using fixed width layouts or having a design that refuses to scale correctly on mobile devices. While it’s surprising that it still happens, you really want to ensure that your portfolio functions in as many environments as possible as the number of users of handheld devices continues to escalate worldwide. After all, your next potential client could be on a train, traveling to work, and trying to find a designer like you on their phone.

Daru Sim
Daru Sim

N is for Navigation

Information architecture is not to be underestimated, and your portfolio should do everything it can to ensure a potential client won’t get lost trying to find information on your site. Never have mystery meat navigation (labels should always exist). Ensure that visitors don’t have to click too many times to reach a destination (3 clicks is an ideal maximum). Also, always label pages using the terminology and naming conventions that other portfolios use to ensure that sections can be easily identified. Navigation matters, don’t neglect your menu structure.

Oak
Oak

O is for Optimization

We are living in an age of sensitivity. We’re sensitive towards the needs of users, sensitive to the diversity of the devices visitors use, and we get sensitive when someone claims our site is broken on a device we’ve never heard of. Therefore, aside from compatibility, performance plays an ever increasingly important role in our workflow. With many users giving up if a site won’t load within 3 seconds, and connectivity issues plaguing many online experiences, you should optimize your portfolio so that it will get in front of a visitor's eyes as quickly as possible.

Yahoo! Yslow
Yahoo! Yslow

P is for Projects

If you’ve built a cool framework, a useful web app, or even if you’re involved in an open source project, these are things which should also be included in your portfolio. While you may not have made them for a paying client, the time and effort you’ve put in to them could encourage clients to come forward and hire you. If you’re not working on personal projects, perhaps you should when you have a slow patch as it all helps to build up your body of work.

Lea Verou
Lea Verou

Q is for Quotations

One of the keys to a successful portfolio is communication. While many designers choose to simply list their email address, phone number, or a form that contains little more than a name, email and message request, there is a lot of ambiguity that could unsettle a possible client. Rather than sending several emails trying to interpret their requirements past that initial contact, consider adding a project planner to your portfolio to identify their needs. If nothing else, it will help you weed out “unsuitable” client requests (we’ve all encountered them).

Built By Buffalo
Built By Buffalo

R is for Resume

If you’re building a portfolio, you should also provide a resume for potential employers or clients to save as a quick reference. Whether you provide it as HTML or PDF is entirely up to you, however, when it comes to giving visitors a simple and effective overview of everything you’ve discussed on the site, avoiding any clutter or non-worthy highlights is imperative. Most people will only glance and scan a document before reading it properly, having a simplified version of all the data included in your portfolio could be a handy and useful bonus feature.

Paul Irish
Paul Irish

S is for Social

If you get an email from someone on your portfolio, try to answer it as quickly as possible. Many of us are guilty of forgetting to reply, and it’s true that finding the time to respond to everyone is increasingly difficult. However, when it comes to client work, you don’t want to risk losing out on a special project because you couldn’t find the time to respond as you were too busy writing a blog post. You should also have a social presence on sites like Twitter and Facebook (and post regularly), as it’s a great way for clients of the future to track your progress.

Onextrapixel on Twitter
Onextrapixel on Twitter

T is for Timeframes

If you have months without client work, it’s not an ideal situation; and getting a constant flow of projects can be difficult. To overcome this issue, many designers list their schedule on their portfolio. Adding a progress report with the availability you have to timetable large, medium, or small projects would be informative for clients who desperately want your skillset. You could just say “I’m fully booked”, or go into more detail if you prefer.

Andreas Knutsson
Andreas Knutsson

U is for Usability

This one is rather self-explanatory. If your site is easy to use, people will enjoy browsing it. If people enjoy using your site, potential clients are more likely to believe you’ll give them something their customers will approve of. It’s also very important that you make your site accessible. Your portfolio might be encouraging all sorts of people to your site, and if a client finds themselves unable to work through your design, you will likely regret it. As such, you should follow the Web Content Accessibility Guidelines and support assistive tools whenever possible.

The Accessibility Project
The Accessibility Project

V is for Validation

Arguably, ensuring your site validates is something that the neurotic among us will do frequently, but it’s unlikely to cause any significant harm to your design (many of the worlds top sites don’t validate). However, when it comes to your portfolio, as a designer or developer, you can be sure that your work will be under added scrutiny and your source code will likely be the first thing that savvy clients examine. If your source code is well formed, it will reflect positively on your image. After all, the care you’ve put into your code is a likely sign of what’s to come.

W3C Markup Validation Service
W3C Markup Validation Service

W is for Workflow

We all have our own methods of building a site, and there’s no right or wrong way to get there (just as long as the site works and functions well). One thing all portfolios should consider including is a page or section of your site that declares your workflow and how your particular design process will affect clients. You don’t need to include a huge amount of detail, however, you don’t want to leave people in the dark about how you do business and the things they should expect and be expected to undertake as part of the development journey.

Zurb Studios
Zurb Studios

X is for X-Factor

No two portfolios should look alike, yours included. So many websites seem to end up as clones of some trend setting portfolio, it’s a shame to see such a lack of imagination. You might initially think that it probably doesn’t matter as the client won’t find out the truth, but it’s likely that as you went on a hunt for ideas before building your design, clients will have also had a good sniff around to find a client that they like the look of. You are trying to sell your services, as such, be as unique as possible, give your site the x-factor and don’t be a cheap knockoff!

The Worst Portfolio Ever
The Worst Portfolio Ever

Y is for YOU!

A portfolio is about a business or a person, in either case, every portfolio should include some information about the people running it. If you are running a studio or agency, don’t just list the CEO or creative directors, give every employee some space on the page. Give them a brief introduction, link to their Twitter or Facebook profile, even include a link to their site if possible. Clients who want to understand the value behind the company will likely look at that page of employees and want to know a bit about the skillset of each person contributing to their project.

Ali Namdari
Ali Namdari

Z is for Zesty

If there’s one thing you need to succeed in business, it’s positivity. There will be times when things go wrong, and certainly nobody is perfect, however, reflecting that in your portfolio is an important message to have. People want to hear positive things about the company, they want to know about your successes, goals and ongoing heroics. While you shouldn’t overplay the card and make yourself appear egotistical, ensure your site is worded positively rather than negatively. You don’t want to put clients off with tales of burnout or regrets!

Isaac Paavola
Isaac Paavola

Conclusion

As you can see, a portfolio isn’t a place to dump your resume, nor is it something to neglect (as so many of us do by our own admission). It’s a website that should be at the very center of your universe. It represents your head office; where new clients can find and potentially hire you for your skills. By making some tweaks to your current layout, content or code, it could make a real difference to your business.

What do you include in your portfolio? Are there any things which you think are off-putting to clients? How many sections does your site have? Let us know in the comments!

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.