Portfolio Design Study: Design Patterns and Current Practices

Advertisement

In our recent study on Typographic Design Patterns and Best Practices1131, 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 agencies2 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.

We have brainstormed on the most important design issues and asked designers across the globe what design decisions they often have to make when designing a portfolio website. We also asked designers what questions they would like answered or analyzed in our case study. In the end, we came up with a bag of 40 solid portfolio-related questions — sorted, grouped and ranked according to importance. Finally, we searched for a good mix of established design agencies and well-designed portfolio websites of small and large agencies.

Finally, we created a questionnaire with these 40 questions and went through the websites of all of these design agencies, noticing design patterns and filling out our quite lenghty forms. Overall, the study took over 75 hours to prepare.

This post presents the initial results of our big portfolio design study. Below, we discuss the visual design, structure, layout and navigation of portfolio websites. We also get into the design details of every single section, including the about, clients, services, portfolio, workflow and contact pages. Of course, you do not necessarily have to follow the findings presented here; rather, use them to get a general idea of what other portfolios look like, and then come up with something of your own that is usable, distinctive and memorable. We would like to thank Mark Nutter for helping us gather data for this study.

The second part of the study will be published here, on Smashing Magazine, in two weeks. Hence, please subscribe to our RSS-feed1053 and follow us on Twitter1074.

Any ideas or suggestions? Maybe there is something else that you would like us to analyze additionally in this study? Comment on this article — we are listening!

1. Light vs. Dark Design

A general question that comes up often is whether to design a visually appealing dark website (that is, use big bold typography and vivid colors to give the user a colorful and memorable experience) or a softer lighter website (one that has a simple structure and clean typography).

Surprisingly, according to our studies:

Of course, picking a dark or light design depends strongly on your personal approach and individual goals for your portfolio. Saying that the “trend” strong favors light designs would be inaccurate because each type serve its purpose in its particular context.

2. How Many Columns?

Interestingly, many of the portfolio websites we researched tend to vary the number of columns between sections. Client and about pages usually have two columns, while front pages often have three to four columns and present the most important sections of the website in a compact overview. In fact, we see pages getting more and more columns: every sixth portfolio website we saw has at least one page with four columns.

Screenshot

According to our study, few websites risk experimenting with so-called out-of-the-box layouts20, or navigation like JavaScript scrolling or other kinds of original layouts. Most portfolios have traditional block-style layouts, with two to three clearly separated columns and a simple, convenient navigation menu.

Screenshot21
carrot creative22 has an original one-page layout with JavaScript-scrolling navigation, which is unusual and memorable but not necessarily intuitive.

Also, most portfolio websites consist of multiple, detailed pages, with relatively deep sub-sections. Minimalist one-page portfolios are rarely encountered: only 5.4% of the portfolio websites we saw have simple and minimalist designs (namely, Neutron Creations23, Fish Marketing24 and 80/20257).

3. Introductory Block On Top?

Portfolio websites commonly have a large introductory block in the header of the page, essentially a short friendly statement about what the agency offers and what advantages a customer will gain by using its services. The block will usually blend vivid imagery with big typography. It conveys both the company’s overall image and the personal tone of the agency’s staff, making it equally professional and friendly. Such blocks usually appear immediately below the logo on the front page.

Screenshot

According to our study, 79% of portfolio websites have some kind of an introductory block in their upper region. We noticed, though, that some portfolios forgo an introductory block in favor of showcasing their recent projects (concentric studio26, HUGE inc.27 and Wishingline28 being examples). For such designs, a small “About us” block is placed somewhere else on the page, often below the fold.

Screenshot29
45royale Inc.30 has friendly introductory text on its front page. It communicates that the website belongs to a Web design studio that is located in Canton, Georgia and that creates clean, unique and usable websites and Web applications.

4. Layout Alignment

Back in ’90s, website layouts were traditionally left-aligned, with either vertical navigation in the left sidebar or horizontal navigation near the head. With growing adoption of wide-screen displays, this has changed. More and more designers are horizontally centering their layouts so that the passive white space around the page balances the layout. We did notice a trend towards more original, even right-aligned, layouts at the beginning of the year, but not a single portfolio in our current survey has a right-aligned layout.

Layout alignment

According to our study,

  • no portfolio layouts are right-aligned,
  • 89% of portfolio layouts are horizontally centered,
  • the rest have either original adaptive layouts (Method31 and Carrot Creative32), a vivid background image that fills the remaining screen space (Duoh33) or just left it empty (e.g. Ideo1004934, maybe.for.you35 and Area1736) – of course, you will see the remaining screen space only if your display has a wide-screen resoluton.

5. Navigation Alignment

Where to put the main navigation in the layout? The question isn’t trivial and often leads to a debate among designers. Surprisingly, our study revealed that most portfolio designers place the main navigation in the upper-right corner of the layout. In fact:

Main Horizontal Navigation: Study

Vertical navigation is rarely used, and other approaches (such as horizontal navigation at the bottom of the page) are found on unconventional out-of-the-box layouts, though still uncommon.

Main Horizontal Navigation: Study44
Area1745 has a left-aligned layout with left-aligned navigation. Each navigation element is a fairly large clickable block element.

6. Search Box Design

While many portfolio websites are quite small, presenting visitors with only some general information about the studio and its design process, some portfolios go the length and present a variety of case studies, a blog and detailed information about its every major project. In general, if a website contains a lot of information, search functionality would very likely benefit some visitors to the website. As it turns out, very few companies integrate search functionality into their website.

  • 89% of the portfolio websites we studied have no search functionality,
  • Only 11% of websites have a search box, usually a simple, clean one. Most of the owners of these portfolios have a blog that they update regularly (including pod110246, OmniTI47, fortyseven media48, Ideo1004934, Viget50).

7. Flash Elements

Flash, which is an established technique for rich interactive design, seems to be losing popularity among Web designers — at least among designers of portfolio websites. The reason is probably that certain Flash effects can be replaced by advanced JavaScript techniques, which are often available from popular JavaScript libraries as easy-to-use plug-ins.

Slideshows, animation effects and transition effects can now be created with JavaScript solutions that are lightweight, quicker and much easier. Rich Flash animation and video effects are being replaced with simpler, subtler JavaScript techniques. Flash is still sometimes used, though — for instance, for dynamic text replacement.

A portfolio site with Flash-elements51
BKWLD52 is one of the few portfolios in our study that uses Flash heavily throughout the website.

In our study, only 3.7% of portfolio websites used Flash heavily (notably, Lift Interactive53, Bkwld54, and others, but mainly for slideshows and presentations). The reason is very probably because we did not include any interactive motion design agencies, Flash design studios or video production studios in our study.

8. Where To Put Contact Information?

One important objective of our study was to understand how designers generally convey information about contact options. Do visitors have to click on a “Contact us” button to get in touch with a design agency? Or is contact information placed prominently at the top of the page? Or do most designers put contact information in the footer – the place where most users are expecting it anyway?

The websites we analyzed put contact information in almost every area of the page: top, right, left, bottom, even the middle of the page. But we also noticed some interesting patterns. Note that we were interested in a) where the link to the “Contact us” page is and b) where the actual contact information is positioned.

Where is the link to contact information placed?

It turns out that:

  • Only 12.7% of websites display a phone number in the header of the page (e.g. Things That Are Brown55, Headscape56, Clearleft57 and Concentric Studio58),
  • Only 9.1% of websites display their email address in the header of the page (e.g. buffalo978659, Kyan media60),
  • A postal address usually isn’t displayed at all (54.5%) or else is placed in the footer (40%) or upper area of the website (5.4%),
  • A “contact” link usually appears in the upper-right corner (71%) and/or the footer (45.4%),
  • “Contact” (59.7%) and “Contact us” (21%) are most popular wordings for the link to the contact page.

Wording for the link to contact information61

9. “About Us” Page

The about page is used on portfolio websites to present the members of the team, explain the philosophy of the agency and prove the company’s expertise and professionalism. The page gives the design studio a personal touch and — if designed properly — elicits the trust of potential customers.

Weightshift.com's about page shows team members and describes who they are.62
Weightshift.com’s “About us” page63 shows team members and describes who they are.

An about page is clearly a must for portfolios: 89% of those we analyzed included a link to the page in their main navigation (exceptions include 31three64 and Huge Inc65 and others).

The level of detail you use to describe your agency is up to you. 59.1% of about pages we surveyed have no sub-pages and offer visitors a brief, compact overview. Photos of team members, their personal information and information about the design process are very common on such pages. The tone of the main copy is usually informal, friendly and sometimes even funny. The most popular wordings for the link to the about page is “About” (43.6%), “About us” (27.3%) and “Who we are” (7.2%).

10. Client Page

One of the surest signs of professionalism and a good reputation in the industry is a solid list of clients with whom your company has worked. Of course, the more prominent the companies in the list, the more likely potential customers will turn their attention to you. In our experience, many customers seek out a client list, case studies, and testimonials when searching for a design agency. So we were surprised to find only a few agencies that have a standalone page listing their clients.

The client list at Squared eye66
The client list on Squared Eye67 lists every important client this company has worked with. With names such as the Gates Foundation, the US Institute of Peace, Fox Television and the US Postal Service, the company certainly seems trustworthy.

Of the portfolios we analyzed, only 47.2% have a client page (either as a standalone page or part of a portfolio page). In most cases, clients are represented by their logos, which are often linked to detailed case studies that discuss the work done by the agency and client testimonials. The most popular wording for the link to this page is “Our clients” (46.1%), “Clients” (39.6%) or “Client list” (15.4%).

11. Services Page

Given that visitors usually come to such websites because they are looking for services, validating their search with clear introductory text on the front page or with a standalone services page is reasonable. Potential clients usually have a pretty good understanding of what they are looking for (motion design, print design, Web design, CD/DVD jacket design, etc.), so putting your major offerings on the services page is a good idea.

Signalfeuer's 'service'-page68
Singalfeuer’s services page69 explains what the company offers very concisely. Icons and small illustrations are used to good effect.

67.2% of the portfolios we looked at have a standalone services page of some kind. The rest put their information on the about page or the front page. The services pages sometimes have sub-pages (35.1%), but in most cases the single page is quite long and detailed.

Linking your portfolio page to your services page is definitely a good idea because it bridges theory and practice and shows exactly what your agency is capable of. The most popular wording for links to such pages is “Services” or “Our Services” (75.7%), followed by “What we do” (10.8%).

12. Portfolio Page

Potential customers obviously want to see what a design agency is capable of. Does its style match theirs? What aesthetic does it communicate for visual design, typography and usability? Do its designs feel intuitive and look pleasant? These are the questions potential customers want answered when they become interested in a design agency. So, a solid showcase of previous work could close the deal and convince the customer to contact the agency.

Huge Inc's case study70
Huge Inc’s case study71: an example of one of dozens of fairly detailed case studies.

In general, be selective with the work you showcase, and let the visitor order and filter the projects by style, industry and year. Also provide some information about the project, or even conduct a detailed case study, with testimonials and insight into your workflow. Unfortunately, few portfolios do that.

According to our study:

  • 7.2% of websites don’t have a portfolio at all,
  • 12.7% have only logos or screenshots, without any description or case study,
  • 16.4% briefly describe each project next to a logo and/or screenshot,
  • 63.6% have a very detailed page for every project, including case studies, testimonials, slideshows of screenshots, drafts and sketches (see Bright Creative72, Weightshift73, Huge Inc.74, Happy Cog75, 45royale76).

Surprisingly, the most popular wording for the link to the portfolio page is “Work” or “Our work” (47.2%), followed by “Portfolio” (27.2%).

13. Workflow Page

Actually, the workflow page works rather well as a sub-section of the about page, rather than as a standalone page. However, some designers want to make their explanation of their workflow more prominent. While 74.5% of websites do not have a workflow page at all, the rest go to rather great lengths to explain to potential customers how their process works and what expectations both parties should have.

45royale's workflow page77
45royale’s process78: the company explains how its process works and how customers will be involved throughout the design process.

Giving potential customers a better understanding of how they will be involved throughout the design process is certainly a good idea. The most popular wordings for the link to this page are “How we work” or “Working with us” (42.8%), “Process” or “Our process” (35.7%), and “Approach” (7.1%).

14. Contact Page

If everything goes right, and your portfolio has earned the visitor’s interest, then the contact page will be their final destination. Do everything you can to make it as easy as possible for them to contact you. Make sure the customers provides all necessary information by presenting a simple, clean Web form that can accommodate the essential information about their project. You could also provide your phone number, postal address and email address: the more, the better. Driving directions, social profile buttons and vCards are a good idea, too.

Omni TI's contact page79
Omniti’s contact page80 has driving directions, an office address, personal contact information, vCards, telephone numbers and working hours. It also tells the visitor whether the office is closed right now. An example of a good contact page.

According to our study:

  • 9% of websites don’t have a contact page (instead, contact information is included in the footer of each page),
  • Driving directions (often with an interactive Google map) are given on 45.4% of portfolio websites (!),
  • 83.6% provide a phone number and email address on the contact page,
  • 76.7% provide a postal address on the contact page,
  • 69% of websites have a contact Web form,
  • 14.5% offer a vCard for downloading, usually next to the email address,
  • Links to social networking websites such as Facebook, Twitter and LinkedIn are often used (14.5%).

15. Specials And Extras

We also noticed a few distinctive elements that some design agencies offer potential customers. One popular approach is to offer some kind of project or proposal request form, which prospective clients are expected to fill out with their project’s main details when submitting a request (e.g. Mark Boulton Design81, stuff and nonsense82, 45royale83, Duoh84 and Clearleft85)

Also, some design agencies offer a project planner (including buffalo978659, Happy Cog87 and 45royale88) or help customers estimate costs (such as OnWired89) or offer a more detailed pricing guide (like Blue Flavor90).

Buffalo's project planner91
Buffalo’s online project planner92 guides potential customers smoothly through the project worksheet, making it easier for them to fill in data and avoid mistakes or missing information.

Among the other interesting things we noticed were a chat window on the contact page (e.g. Agami Creative93, a “Stress-o-meter” that displays the company’s current availability (e.g. Bright Creative94), a quote calculator, and a “Capabilities and Credentials” presentation (usually in PDF).

16. Other Findings

We also found out that:

Summary

  • 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.

Stay Tuned!

This article covers only the first 15 findings of our big portfolio study. The second part will be published in two weeks. We’ll cover layout details, typography, interactive elements, navigation and footer information. Please subscribe to our RSS-feed1053 Subscribe to our RSS-feed106 and follow us on Twitter1074 Follow us on Twitter108.

Any ideas or suggestions? Maybe there is something else that you would like us to analyze additionally in this study? Comment on this article — we are listening!

Related Posts

You may be interested in the following related posts:

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2009/09/portfolio-study-sites.txt
  3. 3 http://rss1.smashingmagazine.com/feed/
  4. 4 http://twitter.com/smashingmag
  5. 5 http://www.happycog.com/
  6. 6 http://simplebits.com/
  7. 7 http://www.8020studio.com/
  8. 8 http://concentric-studio.com/
  9. 9 http://www.45royale.com/
  10. 10 http://www.hicksdesign.co.uk/
  11. 11 http://www.duoh.com/
  12. 12 http://www.frexy.com/
  13. 13 http://odopod.com/
  14. 14 http://adaptd.com/
  15. 15 http://orderedlist.com/
  16. 16 http://carsonified.com/
  17. 17 http://www.blueflavor.com/
  18. 18 http://sidebarcreative.com/
  19. 19 http://www.pod1.com/
  20. 20 http://www.smashingmagazine.com/2008/09/03/40-creative-design-layouts-getting-out-of-the-box/
  21. 21 http://carrotcreative.com/
  22. 22 http://carrotcreative.com/
  23. 23 http://www.neutroncreations.com/
  24. 24 http://www.fishmarketing.net/
  25. 25 http://www.8020studio.com/
  26. 26 http://concentric-studio.com/
  27. 27 http://www.hugeinc.com/
  28. 28 http://www.wishingline.com/
  29. 29 http://www.45royale.com/
  30. 30 http://www.45royale.com/
  31. 31 http://method.com
  32. 32 http://carrotcreative.com
  33. 33 http://www.duoh.com
  34. 34 http://www.ideo.com
  35. 35 http://www.maybeinc.com
  36. 36 http://www.area17.com
  37. 37 http://concentric-studio.com
  38. 38 http://www.markboultondesign.com
  39. 39 http://www.squaredeye.com
  40. 40 http://www.adaptd.com
  41. 41 http://www.barbariangroup.com
  42. 42 http://www.builtbybuffalo.com/
  43. 43 http://www.simplebits.com
  44. 44 http://www.area17.com/
  45. 45 http://www.area17.com/
  46. 46 http://www.pod1.com
  47. 47 http://omniti.com/
  48. 48 http://www.fortysevenmedia.com
  49. 49 http://www.ideo.com
  50. 50 http://www.viget.com
  51. 51 http://www.bkwld.com/
  52. 52 http://www.bkwld.com/
  53. 53 http://www.liftinteractive.com
  54. 54 http://www.bkwld.com
  55. 55 http://thingsthatarebrown.com
  56. 56 http://headscape.co.uk
  57. 57 http://www.clearleft.com
  58. 58 http://www.concentric-studio.com
  59. 59 http://www.builtbybuffalo.com
  60. 60 http://www.kyanmedia.com
  61. 61 wording-full.gif
  62. 62 http://weightshift.com/about/
  63. 63 http://weightshift.com/about/
  64. 64 http://www.31three.com
  65. 65 http://www.hugeinc.com
  66. 66 http://squaredeye.com/work/clients/
  67. 67 http://squaredeye.com/work/clients/
  68. 68 http://www.signalfeuer.info/leistungen.html
  69. 69 http://www.signalfeuer.info/leistungen.html
  70. 70 http://www.hugeinc.com/casestudies/scientific-american
  71. 71 http://www.hugeinc.com/casestudies/scientific-american
  72. 72 http://brightcreative.com/portfolio/
  73. 73 http://weightshift.com/design/born-magazine-inferno-minor
  74. 74 http://www.hugeinc.com/casestudies/
  75. 75 http://www.happycog.com/design/mozilla/creativecollective/
  76. 76 http://www.45royale.com/work/articulate/
  77. 77 http://www.45royale.com/about/
  78. 78 http://www.45royale.com/about/
  79. 79 http://omniti.com/is/here
  80. 80 http://omniti.com/is/here
  81. 81 http://www.markboultondesign.com/
  82. 82 http://stuffandnonsense.co.uk/company/contact
  83. 83 http://www.45royale.com/contact/rfp/
  84. 84 http://www.duoh.com/portfolio
  85. 85 http://clearleft.com
  86. 86 http://www.builtbybuffalo.com
  87. 87 http://www.happycog.com/contact/
  88. 88 http://www.45royale.com/contact/
  89. 89 http://onwired.com/contact/
  90. 90 http://www.blueflavor.com/contact/
  91. 91 http://planner.builtbybuffalo.com/
  92. 92 http://planner.builtbybuffalo.com/
  93. 93 http://agamicreative.com/contact/
  94. 94 http://www.brightcreative.com
  95. 95 http://bkwld.com
  96. 96 http://www.area17.com
  97. 97 http://www.builtbybuffalo.com
  98. 98 http://www.viget.com/contact
  99. 99 http://www.45royale.com
  100. 100 http://www.ideo.com
  101. 101 http://www.omniti.com
  102. 102 http://www.pod1.com
  103. 103 http://www.erskinedesign.com
  104. 104 http://www.wishingline.com
  105. 105 http://rss1.smashingmagazine.com/feed/
  106. 106 http://rss1.smashingmagazine.com/feed/
  107. 107 http://twitter.com/smashingmag
  108. 108 http://twitter.com/smashingmag
  109. 109 http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/
  110. 110 http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/
  111. 111 http://www.smashingmagazine.com/2008/07/24/a-small-study-of-big-blogs/
  112. 112 http://www.smashingmagazine.com/2008/07/31/a-small-survey-of-big-blogs-further-findings/
  113. 113 http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/

↑ Back to topShare on Twitter

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops and loves solving complex problems in large companies. Get in touch.

Advertising
  1. 1

    Great ‘study’…and good that it’ll be continued!

    0
  2. 2

    Awesome write up. I am going to refer back to this article when I redesign my portfolio site in the coming weeks. Thank you for doing this research, helps out a lot!

    0
  3. 3

    Awesome article! Would be even more awesome to see a list of portfolio sites that use these techniques.

    (SM) The list of analyzed web-sites is available as well – please see the first paragraphs of the article!

    0
  4. 4

    Very interesting article, thank you. I’m waiting for the next part.

    0
  5. 5

    Awesome, thanks SM.

    I have been struggling for a while to come up with ideas on my portfolio creation, it’s been the lngest project i have ever done and i have still not opened PS yet! I’ll DEFINATELY be coming back to this article when im not at work, but it seems no matter what i try i end up using the same colourscheme as my CSS gallery site. Think im hooked on dark blue, GAAAAAAHHHH!!!

    0
  6. 6

    Interesting findings.

    I would be interested to see similar reviews of design trends in product-centric sites (e.g. http://expressionengine.com) and web application sites (e.g. http://www.ruwaiting.com)

    0
  7. 7

    Great study!

    0
  8. 8

    Great article… I’m never satisfied with my portfolio site, and re-design it constantly. This will be really helpful for the next version :)

    0
  9. 9

    Pretty brilliant study. Way to keep the best agencies and designers at the forefront. These design cues subliminal…but putting it in a quantitative form to identify the trends makes sense of it all. Thanks.

    0
  10. 10

    Awesome study! Great imagery and details. I’m eager to see a study on other site types!

    0
  11. 11

    Great job sir, very helpful!

    0
  12. 12

    Awesome research and data. Thanks alot. Helps with the new site development

    0
  13. 13

    Very nice article. It would be nice to see this same writeup on corporate websites as well. Looking forward to the second part!

    0
  14. 14

    Great study! Very very useful information.

    0
  15. 15

    very interesting. thank you for your work !

    0
  16. 16

    This is really great and I look forward to reading the next installment. Wondering if you have done or will do as comprehensive a study on individual portfolios. There are many of us out here who are freelancing on our own, who need to communicate our services and work but are not looking to compete with agencies.

    I would love to see your findings in that domain.

    thanks!

    1
  17. 17

    Just the reason y smashing magazine is the best informative resource for ui enthusiasts. Keep rocking smashing :) loved it and the effort spent !

    0
  18. 18

    Pretty useful, working on our website at the moment i’ll pass this around

    0
  19. 19

    Thanks for this great study! It’s really useful

    -1
  20. 20

    Thank you Smashing for featuring us (bkwld.com)! We all love your mag! Thanks!

    0
  21. 21

    Wow, very nice and thanks…

    0
  22. 22

    Great stuff, i’m gonn update my portfolio (fahdos.com ) according to these informations

    0
  23. 23

    I had been looking for these kind of stats since the past few days.

    Absolutely awesome!
    Thanks a lot!

    0
  24. 24

    This is one of the BEST articles you guys have every put together! The information is invaluable and I cannot wait to start implementing the tips and suggestions in this article! Everyone should see this whether going to school for a design degree or the owner of a large ad firm! This is something everyone should have bookmarked! Wow! You guys rock!

    0
  25. 25

    This article was extremely helpful and provided great example portfolio websites of each topic. I will be sure to refer to this often and look forward to the next update.

    0
  26. 26

    Enjoyed the article! Very useful information. These studies will definitely come in handy. Thanks!

    0
  27. 27

    I only see one Flash element on bkwld.com. Is that considered “heavy use” these days?

    0
  28. 28

    I don’t have anything bad to say. So why comment? Sheesh. . . Just kidding this is an excellent article one of the best SM has has in a while.

    0
  29. 29

    Great study and very helpful. I’m wondering how much this applies to individual freelancers’ portfolio sites, though. I’m sure many of the findings would be the same but the differences would be very interesting to find out.

    Again, awesome article and a wealth of useful knowledge. Thank you very much for this study.

    0
  30. 30

    My own portfolio is right-aligned! The ONLY reason why I have it right-aligned is to stand out from the rest. Update in progress. B3

    0
  31. 31

    It is noted in your survey that none of the sites contained a FAQ page, just thought I’d mention that a link you provided for IDEO contains a FAW named 20 Questions. Although it could be argued it’s not a traditional FAQ, I believe it’s the design equivalent. All the questions they obviously get frequently asked about the studio.

    IDEO 20 Questions

    (SM) Actually, you are right, and we’ve seen it. But it’s not a “traditional” FAQ. But yes, your point is valid.

    0
  32. 32

    Woah. This is epic. Thanks for doing this.

    0
  33. 33

    good article. it demonstrates how completely standardized the portfolio site has become. -dp

    0
  34. 34

    This really is a nice and dense article raising the signal / noise ratio on SM higher again.

    0
  35. 35

    wonderful article, thanks!

    0
  36. 36

    Great post.

    Not design patterns.

    0
  37. 37

    My earlier point aside this is a great article. I shall be taking many of these “patterns” into consideration when I redesign my portfolio later this year.

    0
  38. 38

    Outstanding. Thanks for going to all the effort to study and publish the findings here. Now, to save to delicious and apply a bit of insight to the ongoing adventure of application. Awesome!

    0
  39. 39

    heii, it’s very usefull
    nice .

    0
  40. 40

    This provides some great insights into shops doing the work for themselves in terms of creative, process and information architecture. It’s nice to see articles like these as much of the work you show is created by some of these shops. Huge is a great example as well.

    One of the aspects that you didn’t touch upon which may fall into more of the development side, but requires consideration on the content + design-side is social elements. Infusing the social content offered via Twitter, Facebook and blogs becomes quite a piece of the puzzle. Even for our own agency, we tried to balance those design elements with ones you mentioned above.

    0
  41. 41

    Really insightful article! Especially helpful since I’m currently building my own portfolio site.

    0
  42. 42

    Really nice article. I’m using vertical right aligned navigation in my site, it’s fixed and I have a one column layout. Though I do have an introduction and I’m currently in a redesign for a two-column layout.

    0
  43. 43

    Great article, finaly something back on 100% sm level!

    0
  44. 44

    This is brilliant. You guys rock…
    ILSM ( I love Smashing Magazine) :)

    0
  45. 45

    Really interesting article, Thank you. Good to know for any portfolio designs I might be doing in the future.

    0
  46. 46

    Great article. Thanks, its very useful.

    0
  47. 47

    Nice article. I’ve got a major re-design coming up and this will certainly help.

    Thanks

    0
  48. 48

    Awesome article. I used some of these practices in my new portfolio

    0
  49. 49

    It’s interesting to see that the bigger agencies are opting for a less is more approach with their designs and the smaller / individual sites opt for bigger text and bolder colours.

    Huge Inc is a long time favourite and a good example of how an agency site should be organised.

    James

    0
  50. 50

    I hadn’t though about creating a ‘clients’ page separate from the portfolio. Makes sense as an easy way viewers can quickly scan who I worked with.

    0
  51. 51

    Alright! Now let’s all create portfolios that meet the lowest common denominator! If my portfolio looks just like everyone else’s, that means it will be successful right?

    Seriously, I don’t know how this information is supposed to be useful. Decisions like these need to be made on an individual basis depending on your work, your clients, your niche and your goals…not whatever everyone else is doing.

    0
    • 52

      You’re right in a way, Rachel, and seeing several of the comments here, it’s clear that’s what some people are going to do (but then some people are always derivative). And, of course, all sites need to be focused on the users’ needs.

      Nonetheless, it’s interesting to see what the competition is up to. After all, when you’re designing a site one of the important factors to keep in mind is whether there are any established conventions in the field that users expect to find. For example, if *everyone* else had a page called ‘portfolio’, your users might well expect to find one on your site too, and if they couldn’t, you might either lose them or frustrate them. Equally, if everyone else is doing something, you might well decide to not do that, to stand out. Of course, this will be part of your research when you’re putting your site together, but it never hurts to have this kind of article as input.

      0
  52. 53

    really cool tips

    0
  53. 54

    awesome article :)

    0
  54. 55

    Nice to know. But isn’t the number of studied websites a little too small to possibly value the results?

    0
  55. 56

    I just wanted to say that the site for Fish Marketing put a big smile on my face. It’s definitely got something different going on.

    0
  56. 57

    Great article, designing my portfolio at the moment so some of these tips have come in handy

    0
  57. 58

    Great list, now I know what not to include in m next portfolio ;)

    0
  58. 59

    great study!

    0
  59. 60

    Great article. Thanks.

    0
  60. 61

    I really like to see what the rest of the world doing about their portfolios to get a feel. However I strongly feel that portfolios are not the websites they are your own area to play around so would say please don’t follow standards try to unique :)

    Smashing Magazine is doing really gr8 work… I do like to follow this to get a feel how others are doing :)

    0
  61. 62

    I really wish you guys would run something on text heavy portfolios, say for copywriters. Seems most portfolio articles are really focused on designers.

    0
  62. 63

    That’s an absolutely informative article. Thanx a lot. The summary in the end is pretty helpful.

    0
  63. 64

    Thanks for taking the time to write this article. These findings confirm general feelings of layout and trends for when visiting portfolio sites. I agree with some comments that I think more websites should be included in the review (at least 100+). Also, it seems like the article references the same handful of portfolios throughout (45Royale, Huge, Happycog, Buffalo, etc.) I’d like to see a review of portfolios that break the mold.

    0
  64. 65

    I have one question:
    I’ve developped and designed a website last year. It has been taken over by someone else and redesigned since.
    How do I showcase this site now ?
    I’m not sure what’s the best practice in that case.

    Cheers

    0
  65. 66
  66. 67

    Great article..did you ever post the 2nd part? I don’t see it and would love to read more!

    0
  67. 68

    Where’s part 2? I keep checking back hoping to find it.

    0
  68. 69

    I’m waiting for part two as well. Very eagerly. Thanks

    0
  69. 70

    “The second part of the study will be published here, on Smashing Magazine, in two weeks”, dating from when?

    0
  70. 71

    This is really great, but is it just me or wouldn’t it be nice to know if these findings resulted in increased business.

    Maybe part two will cover this, but then again, where’s part months later?

    0
  71. 72

    thanks for sharing such a great knowledge…the best informations for a best blog…anyway i was planning to create a website,all these infos are really useful…tnx buddy..
    regards
    Som

    0
  72. 73

    thanks for the share!…

    0
  73. 74

    Spectacular article!!! Extremely informative and very well laid out. Thank you for taking the time to share.

    0
  74. 75

    What a great piece of research, very informative and yet concise. Thanks !!

    0
  75. 76

    Nice article. Confirms what I had already noticed about the trend in portfolio sites from research for my own portfolio design. :)

    0
  76. 77

    Deep research! Very practical and useful! Thanks for sharing!

    0
  77. 78

    Great Study. I especially like the way it is presented – I will be using this format at work next go round. Thanks for the inspiration.

    0
  78. 79

    Great research on portfolio sites. I’m curious how it compares from freelancer to company. I’m also curious about the statics of the landing page content. What do most people put on their initial page? Samples? a service listing? About information? Some things I’m considering right now as I am looking to decrease my bounce rate.

    Thanks for the post and research!

    0
  79. 80

    wow! amazing study!
    thank you so much. this’s helping me a lot with my portfolio design :D

    0
  80. 81

    This is an excellent source of information :) Amazing study! Thank you for sharing.

    0
  81. 82

    @Antsiou

    I recently had a client sell his security business to a large, out-of-state company and the Web site I created now re-directs to their existing corporate Web site. As a result, I opted to simply point to the version in my development environment. Obviously, it’s not the optimum solution, but I figured at least I can showcase my work.

    -MC

    0
  82. 83

    That was simply Smashing. Now I know what’s important in a portfolio and I already think about redesign.

    0
  83. 84

    construction project management

    March 1, 2011 8:28 am

    i tried looking for synonyms for pink and got like blush, cerise, etc but no good ones for black?
    construction project management

    0
  84. 85

    Wow! Amazing study!
    Thank you so much.

    0
  85. 86

    That was simply Smashing. Now I know what’s important in a portfolio and I already think about redesign.

    0
  86. 87

    I’ve been wondering about people’s thoughts regarding mobile optimization for portfolio sites? Was this discussed or explored at all during the study? I’ve been debating with myself for a while if I wanted to begin optimizing my personal site for mobile viewing or not…

    0
  87. 88

    You mean to tell me Part 2 was never posted? It’s been a little over 2 weeks. Try 4+ years. That’s pretty sad for a reputable company like Smashing. I’m disappointed. I was looking forward to the rest of the study.

    0

↑ Back to top