Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

Creating A Successful Online Portfolio


Your portfolio is the showcase of your work, your skills and your potential for your future employers. The more time and effort you dedicate for a usable and nice-looking design, the higher are your chances for getting better account balance in the end of the month. So how can you make sure your portfolio is better than the portfolios of your competitors? How can you point employer’s attention to your works?

Creating a successful portfolio is easier than you think. Focus on simplicity, ease of use, hitting your objectives, professionally managing the project, and you’ll end up with a successful portfolio. In this article we’ll review 5 pitfalls that commonly plague portfolio design. Then we’ll cover Portfolio Tips that if carefully considered and well executed will deliver quality results for your portfolio.

There are some common mistakes designers make in their portfolios. Let’s review these common pitfalls first to make sure you don’t fall into one of these traps.

Pitfall #1: Obfuscation Link

Clarity and focus should permeate your portfolio. With language don’t use twenty words when seven will do. Push your best content to the front. When possible place your important content above the fold. Avoid meandering in your language or paths in your website. Keep your portfolio to the minimum of levels deep, while still accomplishing your goals.

Over at Copyblogger there is an article that covers a simple list of writing tips from the man known for cutting out the fluff from writing in the early twentieth century. See the article Ernest Hemingway’s Top 5 Tips for
Writing Well
1. Hemingway championed using short sentences, strong forceful language, and clarity. All principles that make for effective writing on the Web.

Evan Eckard Portfolio
The Portfolio of Evan Eckard is an example of a website that promotes the work from the first page and Gets to it quickly.

In the article Creating The Perfect Portfolio author Collis Ta’eed offers portfolio advice from the perspective of a potential employer. One of his section titled Get to it on the reasons to limit the number of portfolio pieces you have and make finding your best portfolio pieces easy. A potential employer needs to review many potential applicants quickly. You are more likely to make the cut if your best work is promoted prominently. The Portfolio of Evan Eckard is an example of a website that promotes the work from the first page and Gets to it quickly.

Pitfall #2: Information Cramming Link

There is an issue of wanting to say too much in too little space when creating your portfolio. There is a balance that needs to be achieved with how many pages deep you have users clicking for more information and how much information you try to fit on a page. This is an issue to be aware of when constructing your portfolio.

The tighter you pack your portfolio the more likely it will appear cluttered. If you do need to put a large amount of information on a page see the post Grid and Column Designs2 over at Web Designer’s wall. It will give you some great ideas on how you can use the grid to your advantage when presenting a vast amount of information.

Web Designers Wall Grid3
This4 article will give you some great ideas on how you can use the grid to your advantage when presenting a vast amount of information.

Pitfall #3: Overdoing It Link

You’re less likely to go wrong if you keep things simple and organized. You can apply this mindset to all areas of your portfolio. Less is more. The more you try to do in your portfolio the more chances there are for things to go wrong.

If you’re trying to showcase eighteen services you offer you’ll have less success than promoting a few prominently. If you show too many types of work or try to show too much work of any type than you’ll likely to drown the user. They won’t find your prominent pieces that show how great your work is.

Pitfall #4: Uncommon Navigation Link

Designers have an urge to stand out as unique. The last place to follow this urge is in your site’s navigation. It’s a matter of numbers. If a large number of people coming to see your portfolio will have difficulty navigating through it, your portfolio will fail to meet its goals.

On the blog Astheria in the post My Last Portfolio Sucked, Yours Might Too5 the author points out some excellent examples of navigation choices to avoid. In this article Kyle Meyer reviews 200 portfolios and points out the problems with using them. Navigation problems made up over 32 percent of the issues encountered.

Astheria Navigation6
This7 article presents some excellent examples of navigation choices to avoid.

Pitfall #5: Visual Clutter Link

Consider the purpose of any decorative element you bring to your portfolio. If they fit your goals and compliment your work that’s great. Otherwise remove them. White space helps to give a professional feel to your portfolio. The more visual elements you try to push into an area the more difficult it will be to maintain a feeling of professionalism.

In the interview Where Visual Design Meets Usability – An Interview with Luke Wroblewski, Part II8 both page hierarchy and visual clutter are addressed. In the article he summarizes some of Edward Tufte’s9 teachings on avoiding superfluous data.

12 Principles of Effective Portfolio Design Link

Below you’ll find 12 suggestions which you can use to improve your portfolio or get it right first time when designing from scratch. Please keep in mind that some of these suggestions require patience, time and quite a lot of planning. However, it’s worth it. And the examples provided below show that one can achieve outstanding results with just following these 12 simple rules.

1. Define your Criteria and Strategies for Success Link

As with any project it will help you to clarify your goals before you begin. Once you know your goals then it will effect every decision you make about creating your portfolio.

Below are some common portfolio goals. Also, be aware that often portfolios try to accomplish more than one goal. Or, consider creating more than one portfolio that serves a different purpose.

  • The Hire Me Portfolio focuses on getting you a job. If you are actively searching for a job then the current goal of your portfolio is to get hired. In this type of portfolio you can target the work you show to the type of company you want to work for.
  • The Sales Generation Portfolio focuses on keeping a flow of work always coming in the door. The goal here is to generate leads. And move potential customers through your sales channel.
  • The Reputation Building Portfolio focuses on building your name in the industry and online. This may take the form of an artist’s showcase. Or tie your work together with a blog on your portfolio site.
  • The Networking Portfolio focuses on building relationships. There are many networks that have excellent portfolio building tools. They have some advantages to placing your portfolio on their website. Chiefly among them is to leverage the site space for networking.

2. Consider Using Multiple Portfolios Link

There are multiple reasons to have more than one portfolio. You may have more than one skill set that you would like to promote separately. You may want to create a portfolio that is targeted to landing a specific job and send it to a marketing director at a company. They’ll appreciate that. It saves them time and shows you really want the job. Even if it’s a one-page portfolio.

Even if you are filling the portfolio with the same work you will still benefit by having multiple portfolios within different groups online. Take the case of Nik Ainley, a UK-based designer and illustrator. He has multiple portfolios that all serve complimentary goals. He chose to participate in multiple portfolio-based communities to build his reputation and network with other designers.

He has a Portfolio on Behance10. He’s involved in numerous groups there and has a large Inner Circle. And it prominently displays that he is available for Freelancing, Long-Term Contract, Full-Time Hire, or Consulting work.


Nick has a very popular Portfolio on DeviantArt12. He’s been a member there since 2004. He has over 80 Portfolio pieces and over 1,000 comments on his work there. He has a lot of fans that have his works marked as favorites.


He is less active though he does have a Gallery on CPLUV14. His Portfolio on Depthcore is really good. This site features artists that have to be invited to contribute. So, the quality of work on this site is really high.

Nik Ainley Depthcore

Overall Nik Ainley shows how you can benefit from having multiple portfolios online even when the work you are showcasing is similar in each portfolio. That is because you are taping into a different community with each portfolio you create. You’re meeting people, exposing them to your work, and making new connections by placing your portfolio within different communities.

Some portfolio communities to look at:

3. Target Your Market Link

The more you target your design to a specific market the more it will speak to the visitor within that market. If you are looking to land corporate clients in a conservative industry than present them with work that is clean, marketable, and looks successful. Don’t showcase edgy, grungy, or arty work unless that’s the market you’re going after.

In the article The Secret to Getting a Lot of Web Design Work19 the author has a section “Design the portfolio you think your clients want to see”. This is the point. Make your portfolio focused on your target market. If you’re trying to get clients then design keeping these clients in mind.

Consider this example: a web designer that specializes in designer Law Firm websites has a different target market than a company that builds Rock Band websites. The language, graphics, and approach such portfolios take will differ greatly. If a web designer has numerous successful Law Firm websites in their portfolio it will make it easier for a potential law firm client to choose them over another designer or design agency.

Dan Gilroy Portfolio20

A designer is more likely to stand out by targeting a specific market. Their success rate at landing jobs in a specific niche and being perceived as an expert in that area will increase. Take a look at the Dan Gilroy Design Portfolio21 for an example of a website that successfully targets a specific market.

Having a target market in mind is essential to choosing your portfolio pieces and your approach to designing your website.

4. Make Usability a Top Priority Link

Navigation is a top consideration as a user being able to view your portfolio is of paramount importance. See the point about Uncommon Navigation above. Some other considerations are using web standards. This is especially true if you’re looking for a job as a web designer today. Read this article Five steps to a better design portfolio22 by Jefferey Veen. In it he discusses some issues around best practices in your portfolio in relation to how you will be perceived by a potential employer.

Also, don’t discount the search bots. Work toward better Search Engine Optimization. The blog at SEOBook23 is a rich resource on this topic. Good SEO will improve the ability for potential clients to find you through the major search engines.

5. Utilize the Right Technology Link

If there are technologies inherent in your job description then it may make sense to build your portfolio with that technology. Sure Flash is cool, but is it right for your website. Probably not if you’re a logo designer. Though if you’re trying to land a job as a Flash Designer at a top notch Interactive Design Agency like Story Worldwide24 than its the right choice.

The New Media Designer Portfolio of Mathew V. Robinson25 presents an easy to use navigation. Essential to the success of a Flash site, it’s fast loading. His portfolio is highly usable and looks great.

Mathew Robinson Portfolio26

Consider maintainability when deciding on technologies. Simplifying your portfolio as much as possible will ease the time you’ll have to spend on upgrading or making changes to the website. You should consider how easy it is to add and remove portfolio pieces.

The easier it is the more likely it is you’ll update your portfolio on a regular basis. Jamie Gregory has an simple, elegant, and effective one page portfolio. He would have no trouble adding or swapping out pieces from this portfolio.

Jamie Gregory Portfolio

Consider enhancement when looking at technology. Often a wise choice is to add a little Javascript or other technologies rather than rely on them. It can help you to achieve your goals without overly complicating your portfolio design. When visiting Marius Roosendaal’s Portfolio27 take a moment to explore how clean the source code is. This is done while providing elegant Javascript-based solutions.

Marius Roosendaal Portfolio28

Choose between creating a static site or utilizing a CMS (Content Management System). One page portfolios are really easy to update and a good way to quickly show your best work. You’ll also have no issues with navigation, as there is only one page. Though there is little flexibility there and you’re not leveraging some additional features that content management systems have for promoting your work, like having a blog.

6. Plan Your Portfolio Project Link

One of the key ingredients to creating a successful portfolio is to approach it like you would a client project. Manage this project as professionally as you would any other web project you take on. Set aside the time needed to achieve the goals you’ve outlined for the portfolio. Make sure you set up deadlines so that you have key targets to hit.

7. Narrow the Scope and Type of Work Promoted Link

Your portfolio should be limited to the best work you will promote within the scope of your goals. If you are taking on website redesigns then your portfolio should consist only of that, not logo designs or print work that you’ve done. If its not the work you’re targeting than don’t include it. You will be more successful.

Jesse Bennett-Chamberlain redesigned his website 31three.com29 back in May of 2007. Before doing so he used to have print and logo designs in his portfolio. In the redesign he clarified his target market by focusing on assisting developers with design. His current portfolio only presents website and interface designs he has created because that is the type of work he is looking for. This portfolio is very successful on many points and has been referenced in many articles throughout the blogosphere.

That doesn’t mean he doesn’t do logo or identity design. He does do that, but he’s recognized that logo design is not why people come to him. They come to him for website designs for new or existing sites and logo design may be a part of the package.

Certainly some designers or firms will have mixed bag portfolios. The more types of work you do successfully the greater challenge you’ll have in promoting that work. When possible keep the work on display to a minimum. Displaying 10 of your best pieces of work is often better than displaying 50 good pieces.

8. Provide Adequate Contact Information, Documentation, and Explanations Link

Contact information should be easy to find and in the case of contact forms they should be easy to use. Prominently place this kind of information. The Hicksdesign Portfolio30 has contact information displayed well on every page.

It helps to build confidence with your target market to clarify your role in the projects you present in your portfolio. If you designed the website, but someone else coded it, then state that. If you did everything then confidently declare that as well.

The Portfolio of Cameron Moll31 employs this strategy on each portfolio piece.

Cameron Moll Portfolio32

Providing case studies gives a deeper view into your process. Once a potential employer or client has narrowed down their list they may come back and start to take more time with your portfolio. Case studies will show how competent and thorough your process is. David Airey does a good job of providing easy to find case studies33 on his portfolio pieces.

Miskeeto Process34

Client testimonials are effective for persuading those that visit your site that you will deliver on your promises. It increases the level of professionalism when tastefully incorporating testimonial into your portfolio. David Airey has an article titled The Importance of Client Testimonials35 that has useful information on this subject.

9. Present Your Work Within the Confines of Your Goals Link

Your work needs to stand out foremost in your portfolio. If your portfolio site design overpowers the work on display then you’re not likely to meet your site goals. Consider carefully every visual element you add to the design. When unsure shoot for simplicity.

10. Infuse Your Personality Into Your Design Link

Nick La has a portfolio design that shows his design style and interests. The unique background illustration stands out. It doesn’t interfere with the usability of the site, but it gives it a beautiful wrapper. For some this would be too much and interfere with the work being presented. Though the work presented in his portfolio works fine. He sets the portfolio pieces against a solid white background in a strong column-based design. The work presented fits with the style of the sites background illustration. Pulling off this kind of personal infusion into the design of your site is difficult to achieve.

Doing this well makes your portfolio not only memorable but remarkable! Nick La achieved tremendous success with his portfolio for Studio36. Being remarkable in the design of your portfolio often means bringing to fruition the personal design taste unique to you that has been cultivated over the years.

Seth Goden has some excellent points about being remarkable in his post How to be remarkable37. Here is a quote from the post “Remarkability lies in the edges. The biggest, fastest, slowest, richest, easiest, most difficult.” This is a good point, but there is a huge risk involved in that pursuing the remarkable edge you ride right off the cliff.

Carefully consider how you will blend your remarkable personal elements into your portfolio without sacrificing usability and without misaligning the balance between the prominence of your portfolio and the design of the site itself.

11. Promote and Leverage Your Work Link

There are many techniques for promoting your portfolio. Consider joining professional online communities and networking with other community members. We’ve already looked at some communities that you can place a portfolio on. Place a thread in a design forum about your portfolio. Submit your design to gallery websites. Almost any technique that can be used to promote a website can be used to promote your portfolio.

Add a blog to your website. The more traffic you can pull to your website the more exposure your portfolio will receive. Dan Cederholm was an early adopter of this technique and achieved fame with his blog Simplebits38. His portfolio resides successfully on the same site.

Leveraging your work involves linking to it when you send emails. Include a link to your portfolio site in your Facebook profile or any other community you belong to. Infuse your portfolio site within your communications and your online identity.

12. Develop Your Long-Term Portfolio Goals Link

It always helps to have a view toward the future. Your portfolio needs are likely to change many times as you develop different projects over the course of your career. Though even looking at the whole of 2008 and not only at the next week can make a big difference in the choices you make when creating your portfolio.

Putting it all together: a successful portfolio finds that perfect blend of your personality, prominence of work, simplicity, and ease of use that makes your portfolio stand out from the crowd and achieve your goals.

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Sean Hodge is the creative mind behind AiBURN, a weblog about design, creativity, inspiration and graphics.

  1. 1

    Jerome Gravel-Niquet

    March 4, 2008 11:04 am

    If you actually want to make usability the top priority, then there goes any fancy way of displaying information.

    Usability relies on commonly used and familiar elements on web pages. Yet, in my opinion, portfolio should look fancy.

    I’m not saying usability should be completely ignored, but you can certainly experiment and try it yourself or make a friend try it real quick just to see if your website is truly intuitive to use or not.

  2. 3

    Sorry, but if I´m a client and I don´t undertand your experimental portfolio, you don´t work for me.
    Really, I´m interaction design specialist and when we have looking for a web designer and see his portfolios, the first thing than I do, is looking theirs diferents works, for diferents clients, no only style.

    Believe me, follow the steps of this article.

    PD: sorry for my english.

  3. 5

    Daniel Holter

    March 4, 2008 11:21 am

    Great advice and links, as always….


  4. 6

    Great article, definitely some tips I want to be sure to keep in mind!

  5. 7

    Thomas Maurstad Larsson

    March 4, 2008 11:36 am

    Just working on one myself acctually! This was very apriciated!

  6. 8

    I’ve always been a developer interested in design, likewise, I’ve always thought a portfolio is important, but there doesn’t seem to be any sites offering guidance on what to show and what not to show for a developer (as showing off the graphical side doesn’t really sell me), any tips?

  7. 9


    March 4, 2008 11:56 am

    Really good, great collection of portoflio tecniques.. .

  8. 10

    I read your post, and I think I get the bottom line of your article.

    You have certainly addressed some fundamentals for online businesses and writing in general that any individual can put to practical use.

    What I would have hoped that you would expand upon is the focused definition of portfolio, especially with regards to the context you associated it with in your post.

  9. 11

    Very clear explanation about making Port Folio.. I like this post.. digg it … next

  10. 12


    Maybe you should hire a designer to do the graphic elements and layout . Ad a developer you probably shouldn’t have anything over the top. Just something clean and elegant that shows off your coding accomplishments. Communicate to them how your coding or your projects are innovative and a good designer can communicate that through design.

  11. 13

    Thanks for including my article. : )

  12. 14

    Evan Meagher

    March 4, 2008 1:54 pm

    Great tips, regardless of industry. Love the example sites. Wonderful post!

  13. 15

    Very cool post, I love your review on your blog from your last folio.
    Thank !

  14. 16

    Great tips – thanks. Now I just need to get around to actually creating my portfolio site…

  15. 17

    Great article as always, thank you Smashing Magazine!

  16. 18

    I agree that usability has to be the top priority. I beleive that a porfolio page is one of the most critical pages on any website. The portfolio link is what a reader clicks on after they like what they see on your home page. I beleive that if the user didn’t like what they saw on the home page they would not have gone to the portfolio page at all.
    So I think that if a user is at your portfolio page there is no need to be doing any showing off. The showing off all happened on the home page, and it worked.
    Now its a time where I would like to get serious and tell my clients how I have helped other people. I like to see the portfolio as a page where I build trust with my potential clients. If they are at my portfolio they already like my skill level. If I can just build enough trust I am on the way to landing a client.
    I think that building trust with your client isn’t a time to be using gimics, fancy navigations and other novelties. I like to just give them the information that they want to see. In a very straight forward manner.

  17. 19

    March 4, 2008 4:14 pm

    Very nice list. Very useful information. Thank you.

  18. 20

    Benjamin David

    March 4, 2008 4:46 pm

    Great article, as usual ! Thank you !

  19. 21

    John Faulds

    March 4, 2008 7:17 pm

    Another tip for success? Using good grammar. Reading this article made me cringe.

    I’ll admit to being a bit of a grammar nazi, but I think a bit of leeway should be given when the authors’ original language isn’t English.

    • 22

      Brett Beatty

      June 1, 2011 2:06 pm

      That’s exactly how I feel. I can’t stand it when people who’ve always been speaking English don’t follow the rules of grammar they’ve been taught since elementary school, but I never expect anyone to get a second language perfect. I took two years of Spanish in high school, but I can do little more than say hello in a less-than-perfect manner.

  20. 23

    Oh perfect, i was creating an online portfolio just now! Thanks!

  21. 24

    Eric Kelsey

    March 4, 2008 8:49 pm

    If your goal is to get hired by a company, you shouldn’t make your portfolio look like it is a business. This is one of the biggest mistakes I see from designers who are seeking employment. I wish they would have included that in this article.

  22. 25

    I agree 100 percent! No matter how good your site is, bad spelling and grammar make a person look unintelligent.

    Spelling and grammar are especially important when dealing with print design. Proof reading is part of the job and mistakes can be expensive.

    • 26

      Spelling is important. You’ve spelled Nik two ways (Nik and Nick) and it undermines your otherwise good advice. You could use a sharp-eyed proofreader. Why not email me?

  23. 27

    I was wandering for good advice for creating a portfolio! Thanks, Great stuff!!

  24. 28

    Great article…

    I am working on a free online portfolio website for Artists, Designers, and Activists, where users share their Creativity, Activism, Travel Adventures, and Activities with each other.

    It is still in development so it would be great to get some feedback as we continue to refine the site.

    I have always believed that art and design has the power to make the world a better place. As an artist and a industrial designer, I try to do my part every day.


  25. 29

    There is a consistent language to the web which should be broken now and then. However when trying to display your portfolio it should be as easy as flipping through a book. Potential clients want get in and out of your website asap. If a website catches their interest then they might be willing to go back and delve further.

  26. 30

    I redid my portfolio last weekend and not knowingly (I think) I followed these guidelines. But instead of separate portfolios I used different blogs to create verticals of the niche I design for.

  27. 31

    Thanks for the wonderful article SM!
    I’m sure if you’re following these steps, you can make a big impact in your life!

  28. 32

    Great article!

  29. 33

    March 5, 2008 3:12 am

    Another GREAT article.
    Iteresting and useful, thank you!

  30. 34

    great article ;)

  31. 35

    Great recolecttion as always, thank you SM!!!

  32. 36

    Pete Marshall

    March 5, 2008 7:24 am

    I wrote an article in a similar vein around crafting a great portfolio and I believe the most important factor is letting the work speak for itself.

  33. 37

    great work

  34. 38

    I always have great ideas for clients, but when it comes down to my own portfolio I usually get ‘stuck’! This article is a great way to get ‘unstuck’! Thanks

  35. 39

    Really really good article.

    Very timely as I’m in the process of finally putting together my own portfolio.

    Thanks again!

  36. 40

    Some great tips here.

  37. 41

    Very nice list… thanks for this. You got my bookmark!

  38. 42

    Great list of ideas. I’ve tried to condense my site to include the necessary info right on the homepage. This gives me an opportunity to display a list of sites right from the get go and also include information about how I can help as well as a contact form.

  39. 43

    Usability as your top criteria for designing your portfolio sit is THE WORST mistake you can make. People should find easy their way to navigate the site, no doubt of that, but if you try to attract people the worst you can do is be part of the crowd. If you take a look at some of the most successful web studios you will see they are doing more visual appealing sites instead of “do it simple”. Making a simple portfolio design and you will get simple clients with simple ideas. That’s a little bit exaggerated but you get my point.

    Actually Jerome Gravel-Niquet was right about it. If you want people to notice you that be creative. Since most of the people just follow steps in online tutorials you have the best chance to get ahead of them:-)

  40. 44

    An interesting article – usability needn’t kill how interesting something is; we should always keep usability in mind.

    Sure, a Portfolio should be interesting, but not at the expense of a user’s goals and objectives.


↑ Back to top