Design Your Portfolio Site Like These

Whether you're a freelancer who has created dozens of websites or an in-house designer or developer responsible for the creation and management of just one, having a personal portfolio site as a visual résumé available to peers and potential clients is an effective way to showcase your work quickly to anyone who might be interested.

Let's take a look at four portfolio site examples, and the must-have elements that each include.

www.ericadreisbach.com

Along with getting to quickly know this Chicago-based freelance Web developer's personality, visitors immediately get a good idea of her skillset. Not only does Erica Dreisbach include development specifics under each portfolio item, she also provides a quick summary of her skills with the ability to learn more by downloading her resume. 

web design portfolio example

Notice that in one of the portfolio items above, Dreisbach adds an "award winning" banner to it, which can boost visitor confidence that this is someone they can feel comfortable with contacting and possibly working with. Dreisbach also establishes trust by including testimonials as well as listing her skills from strong in some areas to "learning" in others - that transparency likely goes a long way for potential clients looking to work with a developer they can trust. 

erica-skills

Other must-have elements to take away from this portfolio site include:

  • Prominent calls-to-action
  • Images of the developer at work
  • Social links to follow her elsewhere

www.marcosebastian.com

Portfolio sites with static images of projects and nothing else leave a lot to be desired. On Marcos Sebastian's homepage, visitors are immediately funneled into two types (people who are ready to contact him or those who want to learn more). This initial segmentation can provide a level of comfort in that people aren't being cornered to make a decision. 

At first glance, Sebastian's portfolio items seem like those included on many other sites, but once a visitor clicks on the project, they are brought into the actual development process. First, they can see screenshots of the project:
insure-well-example wireframe-notes-1Then, visitors are able to see Sebastian's wireframes, complete with client notes. On the site, his narrative of the experience is also provided, allowing potential clients to get a good feel of how he works and the reasons for different design elements.

Including wireframes and feedback is not something commonly seen on portfolio sites, and it surprises in a good way in that it adds credibility and interest. Designers considering adopting this approach, should check with their clients for approval before including these documents on their site.

Other must-have elements to take away from this portfolio site include:

  • Categorization of project type (e.g., logos, websites and UX design)
  • Case studies
  • Visible phone number
  • Contact form
  • Designers' location (with map)

www.matthewwoodard.com

value-propA Web designer's portfolio site should be a representation of what they can create, what they know and how they work. Woodard's use of a strong value proposition on his homepage indicates he understands the need for a clear and concise message of value.

From there, Woodard provides potential clients with his design process to set expectations and inform his audience (each tile "flips" to reveal more content when hovered over):
design-process

Other must-have elements to take away from this portfolio site include:

  • A list of skills presented as logos (e.g., Drupal, jQuery, etc.)
  • Social links
  • Offer for a free 30-minute evaluation
  • About "me" page
  • Photo of the professional

www.mattolpinski.com

One of the most professional-looking portfolio sites we came across, Olpinski's site includes informational articles, a scrolling effect for testimonials (see image), an email course, the ability to submit project details, a quick review of his skills, past employers and clients and his products available for purchase.
testimonials
There's no reason that a Web designer can't monetize their portfolio site whether it's an actual product or a lead-generation item (like a free template or newsletter series), but the products have to be presented in a way that represents what they know about optimizing for conversions. 

products

Other must-have elements to take away from this portfolio site include:

  • Mobile screenshots of projects
  • User-flow maps
    user-flows
  • Prominent contact options
  • Thought leadership examples (e.g., interviews)
  • Email address

Showing Off

Some of the best portfolio sites marry the owner's expertise with explanations of how they got to the end result. Alongside static project images, those sites with graphics like user-flow maps and wireframes as well as interactive elements, are ones that stand out from the digital crowd.