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.
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.
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.
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
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:
Then, 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)
A 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):
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
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.
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.
Other must-have elements to take away from this portfolio site include:
- Mobile screenshots of projects
- User-flow maps
- 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.
