10 Characteristics of Excellent Portfolio Sites

Recently we looked at the characteristics of effective blog theme design, and I’d like to take a similar look at the portfolio sites of freelance designers.

A designer’s online portfolio is a critical part of the business, and in some cases the most valuable asset of the business.

A good portfolio site is a constant lead-generation tool, but what is it specifically that makes a great portfolio site?

 

1. Clear Communication

A portfolio site should clearly and concisely communicate with visitors about the services that are provided and what the designer has to offer to potential clients. Because there are so many different types of design and various specializations, it’s not safe to assume that visitors will have a clear understanding of the services that are offered without them being communicated.

The purpose of a portfolio site is to show the work of the designer and to attract new clients. However, without a website that communicates effectively with visitors, it’s unlikely that visitors will make the extra effort to contact the designer about potential work.

Tony Geer not only has an attractive portfolio site, but he also uses prime screen real estate to quickly tell visitors what he offers and allows them to contact him or browse through his work.

Leigh Taylor has a little badge on her site that lets visitors know that she is currently available for work.

Some freelance designers choose to post prices on their portfolio site, whether it’s an hourly rate or project-based pricing, and others choose not to post prices. Whichever method you choose, it should be communicated clearly on the site. If you’re using set prices, the details of services provided and what fits into those packages should be listed and explained, if necessary.

If you’ve decided not to display prices, which is the choice of most freelancers, it should be clearly stated to visitors how they can get more information about services and pricing, or perhaps get a quote for their specific needs. Most freelancers accomplish this by simply asking the visitor to complete a contact form that may help to get some of the details of the project in order to get a quote.

The method you choose for pricing is a matter of personal preference, but whatever you choose, be sure that it is clearly and concisely communicated.

Adaptd offers web design, web development, and SEO services, which is very clear from their navigation menu that is on every page. Once you click on one of the options you’ll see a clear description of each of the services, and they have chosen to list prices on the site as well.

 

2. Personality

When potential clients are looking at freelancers for their project, there are a number of factors that will weigh in to their decision. Of course, they’ll expect to see that the designer has the abilities and experience to do a good job, and cost is also a common concern. Just as important as these factors is the desire of clients to work with someone that they like and someone that will give them a good overall experience.

Most business owners or decision makers who are responsible for handling and overseeing the design process of their company’s website are at least somewhat intimidated by the process. They typically want to work with someone that will help to make it a smooth, enjoyable, and successful experience. If a freelancer is able to show some personality through their portfolio site, potential clients are far more likely to feel a personal connection and to see them working together.

Winnie Lim uses a brief message as a greeting to visitors that gives a personal touch, and it encourages them to read more on her About page.

 

3. Creative

Portfolio sites often feature some of the most creative designs. Because design is an artistic and creative profession, the website of a freelance designer is seen as a true representation of their work and their skill levels. Portfolio sites sometimes take more creative liberties without the potential negative results as other types of sites. In fact, in many cases potential clients will expect to see some creativity and originality from the site of a freelance designer.

Creativity can come in any number of different forms. Maleika Attawel uses a soft textured look on her portfolio.

 

4. Lack of Excess

The first point we looked at was the need for clear communication. One of the biggest influences on the communication of a website is how much information is provided. While portfolio sites have some necessary items that need to be stated and explained, getting rid of any excess will help the existing information to stand out more and to be easily understood.

In addition to eliminating excess wording and content, excess design elements can also be avoided. Some of the most elegant and highly-respected portfolio sites are very minimal in their approach. The basics of a portfolio site are very simple: a listing of services, description of qualifications, showcase of past work, and a means of contact. Excess elements outside of the necessary can often do more harm than good. Many portfolios are now including a blog (which we’ll look at later), but most other content and excess elements in the design will do little to help attract new business.

Rob Morris has a great looking portfolio site that features a clean layout with only the relevant information.

 

5. Examples of Past Work

Of course, a portfolio site would not be a portfolio site with examples of past work. This is what most potential clients will want to see, and in most cases they’ll be gauging your skill level based on these examples.

The quality of work in your portfolio is a major factor on the success of the portfolio site, but presentation can also make a big difference. In some cases designers display their work in a creative or impressive way that almost overshadows the work itself (which can be good or bad).

Matt Dempsey’s site showcases his work with nice, full-size images.

 

6. Shows the Best Work

Not every design you’ve ever done needs to be included in your portfolio. In fact, it’s better to only showcase specific examples rather than everything. Most potential clients aren’t going to sit and look through everything anyway, so be sure that what you display has been chosen for maximum impact.

In some cases you may be offering different types of design (such as blog theme design, e-commerce sites, logo design, business cards, etc.), so it’s good to have a few high-quality examples to show for each category rather than having one big collection of all of your work. Smaller, more selective portfolios are also easier for visitors to look through in order to find something relevant to them.

Robbie Manson’s homepage showcases his featured projects prominently. Each one has more detail of his work explained if you click on the images.

 

7. Call to Action

Since the ultimate purpose of the online portfolio is to attract new customers, it only makes sense to ask visitors for their business. How you go about this is up to you, but most portfolio sites simply encourage visitors to contact them for a quote or to fill out a form for more information. It’s a simple act, but prompting potential clients to take that step can make a big difference in the number of inquiries received.

Luke Larson’s site has a link that says “hire me” that takes you right to the contact form. The link is a small change from just having a standard contact link, but it obviously encourages the visitor to take action.

 

8. Ease of Contact

Once you’ve made that call to action for visitors to contact you about your services, it’s critical that they have an easy way to contact you. Most portfolio sites use a contact form, although some will choose to just list an email address. Either way, the contact information should be easily found and accessed from any page (meaning, if you have a contact form, make sue that each page on your site links to that contact form).

Most designers want to get some basic information from potential clients about their needs at the time of initial contact. This can be easily accomplished through a form, but remember that if too much information is requested or required, some contacts may be lost. The easier you make it to contact you, the more likely people will be willing to do so. You’ll have to make a decision about what information is critical to you so that you get what’s necessary, but not enough to turn off potential clients.

Marius Roosendaal has a contact form on his homepage that requires minimal information from the visitor. Also, by having the form right on the homepage it’s even easier for people to see and to use.

 

9. Visibility

A portfolio site can do everything right and have incredible work to display, but if no one sees it, it will do no good. There are so many freelancers and design studios out there that it’s not possible to set up a small portfolio site and expect it to draw search traffic that will convert into potential clients. In order for the site to be effective it needs to be visible.

There are a few different options when it comes to getting a portfolio in the view of potential clients. First, there are literally hundreds of design galleries that showcase exemplary work. Of course, smaller ones have relatively little traffic, but many of the larger and more established galleries have helped freelancers to land a number of new clients. Almost all galleries allow anyone to submit websites to be included, and those that are worthy will get featured.

Most of the visitors that will come to a site through a design gallery will be other designers, but many designers have benefited immensely from this exposure, and the links are great for SEO purposes as well. To find galleries to submit to, see The CSS Gallery List. New galleries are popping up all the time, but this list is comprehensive enough to keep you busy for a long time.

You can see that Dawghouse Design has received a ton of exposure from galleries.

A second method that’s used by some freelancers to gain exposure is the use of a blog on the same domain as the portfolio. Blogs are great for drawing traffic, building links, demonstrating expertise, and encouraging repeat visits. the blog posts may attract visitors that wind up becoming clients. Of course, maintaining a blog takes time, but it’s one of the best methods for getting eyes on your portfolio site.

In addition to just helping your portfolio site to be more visible, blogs also help to show your personality to visitors and to start to build there trust. Earlier we looked at the need for personality on a portfolio site, and a blog is a great way to show visitors more of you.

Chris Spooner uses his blog to gain exposure and find new clients. Although he doesn’t use his blog to directly promote his services, Chris has established his name and become a repsected leader in the industry primarily through the demonstration of his expertise on his blog.

A third way to get people to see your portfolio site is to use localized SEO techniques. Although competition for general web design-related terms is very stiff, you may be able to easily rank on the first page of search engines for a local term. You may even prefer working with local clients anyway. To target local visitors use city, state or province names in your page titles and throughout your site when appropriate. Additionally, work on building links to your site with localities in the anchor text of the links. (To read more, see Search Engine Optimization for Local Business Results.)

Another method for exposure is to use Pay-Per-Click advertising. With PPC you can choose which search phrases you’d like to target and how much you’re willing to spend. You can also set geographic restrictions so you’re only targeting people who are looking for your services in your local area. PPC is a great option for a small advertising budget.

 

10. Valid Code

Some people feel that valid XHTML and CSS are important on any website, and others feel that it doesn’t really make a difference. Even if you don’t see the need for valid code in most situations, portfolio sites are an exception. A portfolio site that has all kinds of validation errors sends the wrong message to visitors. Although most potential clients won’t care about valid code, and many probably won’t even know what it means, some will. And those that will care are unlikely to consider a designer that doesn’t have a valid website of their own.

Some designers will choose to display evidence of validation and others will not. Again, this is a matter of personal preference. The little logo or icon showing that you have valid coded isn’t really what’s important. It’s more important that if visitors decide to test your code that it will validate.

Andrew Bradshaw’s site includes a simple message in the footer to show that his code validates.

 

What’s Important to You?

As a designer, what do you feel is critical to a portfolio site?

Written exclusively for WDD by Steven Snell, a web designer and freelance blogger. You can find more of his writing at the Vandelay Design blog.

  • http://www.unfinitydesign.com/ Nathan Kleyn

    This is a fantastic post Steven, once again incredibly informative and inspiring! You’ve picked some absolutely fabulous examples!

    To me, the most important aspect of any portfolio website is that is works in as many browsers as possible, or at least the major ones available today. Let’s leave IE 6 out of this, but people need to at least give some love to Firefox/Safari/IE 6+! Seems obvious to some, but it’s more overlooked than you’d think…

    I suppose this can mainly be achieved through your last point about standards, but often portfolio designers favour the latest and greatest over progressive enhancement. Exposure and visibility are both two of your points that depend on this fundamental step.

  • http://eugrafia.com eugrafia

    I think if you are designing a portfolio website, two of the most important aspects are originality and communication. Remember, you are trying to sell yourself visually, so the site´s design elements must communicate what you want, which comes from a solid planning phase.

  • http://vandelaydesign.com/blog/ Steven Snell

    Thanks for the feedback Nathan. I agree, having a site that doesn’t work in certain browsers is a bad thing when potential clients are using those browsers.

    Eugrafia,
    Yes, I agree. That’s why there are so many creative and artistic portfolio sites. In some ways you can get away with more creativity than you can at other types of websites.9

  • http://www.leightaylor.co.uk Leigh Taylor

    Great article, very informative and thanks for the mention!

    p.s. Leigh is a he, it’s ok i blame my mum too, lol

  • http://www.yensdesign.com AdrianMG

    Nice reading, thanks for the article!

  • http://www.blog.spoongraphics.co.uk Chris Spooner

    Excellent article and interesting read.
    It was also a nice surprise to find my name appear in the middle! Thanks for the inclusion.

  • Vinod

    Nice Article :)

    Thanks

  • http://www.brightorangethread.com Hendrik-Jan

    You make a lot of good points. The litmus test for many prospects is if they like the design work. So its important to make it as easy as possible for users to click thru as much of your work as possible.

    You mentioned that showing examples of work is important but you didn’t address ‘how’. Turns out there is significant usability issue with most portfolio sites. Most sites require multiple clicks and motions of the mouse and use of the back button to see the next example. Instead, the portfolio should be set up like a slide show, the user should be able to click ‘next’ (without moving their mouse a single pixel) to see the another example.

    • http://www.szilveszter.ca WSZ

      That’s not an example of good design at all. Forcing people to sit their through some predetermined slideshow is by far the best solution. Mouse movements are a thing to avoid. Usability isn’t the mere avoidance of mouse clicks or motions… it’s about reaching the goal through the lowest common denominator.

      Laying out a portfolio is best done by allowing visitors to click on the examples of work that they wish to view. Your solution seems to forbid this. A visitor is forced to view the entire gallery and they may not want to do that. I would be personally frustrated if I didn’t see large enough thumbs of the work that I could selectively view and I’m sure I’m not alone. Moreover, your system doesn’t allow navigating from the 1st piece to, say, the 7th. It restricts visitors to view entries one at a time and in sequential order. I may want to jump back to the 3rd entry I saw after seeing the 8th, but then would have to click 4 times? This seems annoying and less than efficient.

      The thing about usability is not what you find the easiest to do, but what the majority of people find. As such, only usability analysis can provide an answer. We can bounce around theory upon theory, but eventually you’d have to set up some usability studies to reach a real solution.

  • Steven

    Leigh,
    I’m sorry! My mistake.

  • Steven

    Hendrick-Jan,
    I agree with you that many portfolio sites aren’t good examples of usability. That’s definitely a subject that could have been addressed in more detail. However, I don’t agree that your suggestion is the way all portfolio sites should be set up. If every one were done that way it would be pretty boring and would take away a lot of creativity and options. There are others ways to build a usable portfolio as well.

  • http://www.leightaylor.co.uk Leigh Taylor

    @Steven

    No worries, it happens quite a lot

  • http://www.leemunroe.com Lee Munroe

    Great list Steven.

    I do believe valid code is important but I don’t see the advantage in showing it off (which you did hint at yourself).

  • http://www.soula.com lucy

    I really like dawghouse’s design of a portfolio I think it works really well, I also like hypothetical examples that really explore the creative skills of the designers. I really like the whole concept of dawghouse design, her webfolio is great

  • http://www.logodesignguru.com Dan

    Great list, thanks.

    I must say though, I miss the days of the traditional hard copy portfolio.

  • http://mikemike.com mikemike

    Yeah, 10 characteristics to impress other designers, by designers for designers, just like most of the web today.

    :)

  • http://www.tntstudio.ca TNTStudio

    @mikemike impressing other designers may result in future collaboration and business opportunities which can be just as lucrative as impressing potential clients no?

  • http://www.iamproduct.com Michal Acler

    Really great and inspiring post! There’s a lot of thing to think about…

  • Pingback: Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?()

  • http://creatinginspiration.net Joel Laumans

    Great post, one of the things I always tell people is: create a 1-minute portfolio, you can never expect visitors to stay longer than that, because they usually won’t. So make sure you communicate the most important things quickly!

  • Pingback: December’s Best: This Month in Web Design | Vandelay Website Design()

  • Pingback: Web Page Design For You » Blog Archive » December’s Best: This Month in Web Design()

  • Pingback: Guru 2.0 » 10 Tips für ein ausgezeichnetes Portfolio()

  • Pingback: MyInkTrail: Best of the Web, December 2008 | My Ink Blog()

  • http://www.agencytool.com Sheena

    Totally agree…especially with #6. Your portfolio should be the best of the best, not every single thing you have ever created. One or two not-so-great designs that you throw in there to ‘fill it out’ could turn potential clients off. I really think its better to have a few really great and representative works.

  • Alyne

    Thank you!
    Everything here it’s essential if you want to do a good job, or if you do it but you don’t know how to show. Great article!

  • http://www.creativewebolution.com Susan Jackman

    Great Article, I learned a lot in the visibility department and I found the idea of a call to action very interesting.

  • Brett

    Interesting post, and most of it is a very good idea. Other important areas that were missed are…you should decide what type of portfolio you’re designing – one designed to get freelance work, or one designed to get you a job. The focus is different, the people who may be looking at it are different, so the design requires different things.

    In either case though, and something I didnt really see mentioned here is depth. You need to show more than just pretty pictures of your work. You need to explain your work – what you did, why you did it, and most importantly, what problems you solved for the client.

    This is the type of depth that people coming to your site for the second or third time will be looking for. By saying “The basics of a portfolio site are very simple: a listing of services, description of qualifications, showcase of past work, and a means of contact.” in step 4 is not complete and over simplifies things…dont forget to add some depth, anyone can put up pretty pictures.

    There is more on my mind, but I have design work to do :)

  • http://designm.ag/ Steven Snell

    Hi Brett,
    On your first point, I agree there would be different approaches for these scenarios. My intent with this article was to focus on freelancers, not for those looking to get a job.

    By saying that the basics of a portfolio site are very simple, I meant that there are not a lot of different sections or a ton of content and pages involved. I agree with you that an explanation is better and more helpful than just pictures. Sorry I didn’t make that more clear in the article.

    • Brett

      Great! Thanks for the clarification!

  • http://airwvs.com rizal

    this post is really useful
    i try to search this article for a long week

  • Brett

    Hi Steven,

    Thanks for the clarification on your thoughts. I figured that was the case. I just felt like those additional points would be helpful for others reading the post. I spent 4 years teaching Portfolio design at The Art Institute of Seattle, so your article struck a cord with me.

    Thanks again!
    Brett

  • http://astra-design.com/pricing.html Web Design manager

    I’m absolutely agree with your article. Thank you very much for sharing your thoughts. Also I can add that a unique idea of a site is very important.

  • http://www.maxdistro.com Las vegas Web design Company

    very true …especially with point 6 and 7. show the work and ask to hire you…

  • Pingback: 构建完美作品集网站十步走 - 笨人干笨活儿()

  • http://www.datadrum.com Colin

    Some great sites in there. I’d say that points 1,7 and 8 apply to any business website, not just portfolios.

  • http://john.onolan.org JohnONolan

    Awsome article as usual, I’m redesigning my portfolio/business website at the moment so this is very handy.

  • Diana

    Nice to know all of this points.. tHankS!

  • Mark @ Alchemy United

    Nice list. Thanks!

    There are two ideas I’d like to share:

    1) IMHO a brief explanation of the context of each design is important. Good design is not just how something looks but also the (client’s brand’s) universe it’s going to exist in. To judge true quality the two can’t be separated.

    2) Don’t lose track of the fact that for the client design is a means to a business ends. You might luv design but ultimately they are just trying to solve a problem. Scream all you want about design but ultimately you need to make sure you’re perceived you as a flexible “problem solver”.

  • http://www.michalkotek.com Michal Koek

    Very nice article! Thanks

  • http://www.moinid.com Most Interesting Ideas

    Beautiful artivcle!

  • http://www.chotrul.com/ Chotrul Web Design

    It strikes me that you can’t fail to express your personality through the design and content of your website, whether you like it or not! Nevertheless, thinking this through may well prove advantageous, just as with other aspects of your site.

  • http://www.ronarts.com Ron Arts Web Design

    This is really an interesting article, very informative. Thanks for sharing your thoughts with everyone.

  • http://www.benstokesmarketing.co.uk Website design Shropshire

    I think that personality is a main seller in this industry, you need to show the client you know what you are talking about – but also bring it down to there level and be prepaired to walk them over everthing your are talking about. A client will respect you more if you tell them what they can not have as aposed to saying they can have everything, even if it will not look good or be a waste of money.

    I guess honesty and personality are the most important in my opinion.

  • http://www.wearingrainbows.com/mens-waistcoats-ties-c-2659.html Billy

    This is a good base to work from, creating your portfolio is an art and this will start you off in the right direction.

  • http://flaviopaiva.com/ Flavio

    All about good design. I’ve learned a lot here.
    Thanks for the article.
    For us designers it’s a well spent time reading this.

  • http://www.bigfork.co.uk Bigfork web design Norwich

    Lots of great info here, good article. I know from experience that your portfolio is mainly what counts when new clients come knocking.

  • PCK

    it’s hard to think of a great design for anew site or porto, so many things you have too watch out for. this article helps allot..really