There’s a great article over on Smashing Magazine looking at design patterns for portfolio websites.
In our recent study on Typographic Design Patterns and Best Practices, we asked our readers about case studies they would like us to conduct. One of the most popular suggestions was a detailed case study of portfolio websites. Following the requests of our readers, we have carefully selected 55 design agencies and Web development agencies, analyzed their porfolio websites and identified popular design patterns. The main goal of the study was to provide freelancers and design agencies with useful pointers for designing their own portfolio.
The key findings are:
- 82% of the portfolio websites we analyzed have a light design, with neutral, calm colors,
- 79% have traditional “block” layouts, with two to three columns clearly separated and a simple, conveniently located navigation menu,
- 79% of websites have some kind of introductory block in their upper area,
- 89% have horizontally centered layouts,
- 80% have large horizontal navigation,
- 51% have horizontal navigation with right-aligned elements,
- 89% do not have search functionality,
- Only 3.7% use Flash heavily throughout the website,
- A contact link appears in the upper-right corner 71% of the time, and/or in the footer 45.4% of the time,
- 89% have the link to the “about us”-page in the main navigation,
- Only 47.2% have a client page,
- 67.2% of portfolios have some form of standalone services page,
- 63.6% have a detailed page for every project, including case studies, testimonials, slideshows with screenshots, drafts and sketches,
- 74.5% of websites have no workflow page,
- The contact page should contain driving directions, a phone number, email address, postal address, vCard and online form.
Though I recommend you read the entire article as there’s a lot more detail and plenty of examples. There’s also a follow up article, due to be published in two weeks time, which will cover layout details, typography, interactive elements, navigation and footer information.