Learn5 Tips for Creating the Perfect Web Design Portfolio

If you’re a freelance designer or if you’re looking for your next design job, a portfolio of work is essential. Clients and employers want to see your capabilities and form a quick impression. If you don’t have a portfolio yet, you may want to start with the course How to Make a Website on Treehouse in which I show the process of building a portfolio website step by step. If you don’t have any work yet, here’s a post about how to get web design experience.

Screenshot of the website http://treehousewebsite.com

On Treehouse, you can learn how build a portfolio with the course How to Make a Website.

Assuming you do have some work, it’s important to organize it all in one place. Here are five tips that can help you create the perfect portfolio website.

1. Dress for the Job You Want

The adage “dress for the job you want, not the one you have” applies to design portfolios. If you want to do web work, then make sure that’s exactly what you’re highlighting on your portfolio. Furthermore, if you’re just one designer or a small team, focusing on a specific market niche can be highly beneficial. When all of your clients share a common industry, it’s easier to anticipate their needs, even before a meeting. For example, if you want to specialize in a particular vertical (such as websites for apartment complexes or doctors offices), then you should highlight that type of work.

Free trial on Treehouse: Do you want to learn the design skills that employers want? Click here to try a free trial on Treehouse.

Everyone has a mixed bag of experience, so even if you don’t feel like a designer, you’ve probably done some design work. If someone browsing your site is looking for a good web designer, they may not want to see all of your video work, T-shirts you made, and so on (unless, of course, you’re known for that and you want to do more of it).

This is also true if you’re trying to transition to a new focus. If you’ve done a lot of web design, but you want to design logos instead, then isolate any prior graphic design work you’ve done. In the design industry, perception is reality, so if you’re able to show good logo design work, then people will take your word for it that you are indeed a logo designer.

2. Edit Yourself

At first, it might seem like you want to showcase everything you’ve ever done so that you can demonstrate your breadth of skill. This is usually a mistake; less is more.

Instead, it’s better to create a potent mix of your best work. When people are looking for a designer, they don’t have time to dig through hundreds of portfolios and then subsequently dig through all of your work. Impressions are formed instantly, so a small selection of quality should be front and center. Your portfolio should still be you, but only the best you.

Screenshot of Jessica Hische's portfolio at http://jessicahische.is/working

Jessica Hische is a letterer, illustrator, and type designer with a massive portfolio. In this case, it’s a good thing.

I said including everything is usually a mistake. However, if you know that all of your work is at a very high level of quality, then filling the screen with a huge amount of stellar pieces can create a powerful effect. Jessica Hische is a great example of this; her self-described “unabridged portfolio” overwhelms the page (in a good way) and leaves a lasting impression.

3. Tell a Story

Every piece you choose to include in your portfolio should tell a story, either visually or with words. If you’ve made a website for a local food truck that’s known for gourmet quality food, the aesthetics should correspond and fit the message. Websites are a communication medium, so clients want to see work that really says something.

Beyond the visuals, you may want to consider turning each portfolio piece into a case study. If website visitors want to know more, allow them to click through to additional detail for each piece. Tell them about the needs of each client, what problems each client tried to overcome, and how the solutions you provided worked. Carry visitors’ interest by telling a short story that has a beginning and a conclusion, and be sure to underscore how you played the role of a problem-solver.

4. Don’t Overthink It

Business owners understand that time is their most precious resource. They don’t want to waste time drowning in dozens of your portfolio pieces or dealing with complicated navigation.

Your portfolio should maintain a crystal-clear intent throughout the entire site. Your work should be visible immediately and it should only be your best work. Don’t slow visitors down by getting too creative with the navigation or trying something you’ve never done before. Chances are, it won’t impress them. Instead, go for something simple and elegant. In fact, your portfolio site itself should really just fade into the background and act as a frame for the work you’re presenting.

It’s also important to make sure a portfolio site works well across popular browsers. If visitors are browsing the web in the previous version of Internet Explorer and your website looks broken to them, then you’ve made a poor impression; they’re not going to give it another shot in Chrome or Firefox. The simpler you make your site, the easier it will be to resolve any cross-browser issues.

5. Keep It Fresh

Crafting a great portfolio is like gardening. Every so often you need to prune and selectively remove pieces that are no longer representative of your best work. You also need to make sure you plant the seeds for new work and look for opportunities to expand your portfolio.

Every time you work on a new project, you’re not only making work for a client, you’re also potentially creating a new portfolio piece. If the money or the project isn’t very motivating, you should still make sure you’re injecting quality work. That way, you’ll have an easier time landing gigs you do want to work on with better pay.

Share Your Tips

This is not an exhaustive guide, but hopefully these five tips help you create a more perfect portfolio. If you have any tips of your own, please share them in the comments!

41 Responses to “5 Tips for Creating the Perfect Web Design Portfolio”

  1. Web Design on February 3, 2018 at 9:03 pm said:

    You may also find our portfolio layout interesting on our website.

  2. Web Design on February 3, 2018 at 9:01 pm said:

    Really good points. Going to use some of these ourselves. Appreciate it.

  3. Hi to every one, as I am really eager of reading this blog’s post to be updated regularly.
    It contains good data.

  4. Wow, this poѕt is nice, my younger sister іs analyzіng thesе things, so I am going to let know her.

  5. Chris Winters on June 27, 2017 at 7:39 am said:

    Nick, I like the idea to try to tell a story through web design. It seems like most business happens to be conducted online these days. I can definitely see how web design would be an excellent way to grab people’s attention and make them excited about your product or service.

  6. Arif Gangji on May 8, 2017 at 10:08 pm said:

    One thing to consider is the mix of projects you showcase. If you service various sizes of companies, you would want to make sure you show off smaller and larger clients so that visitors know you don’t just focus on one or the other.

  7. Web Design in India on April 22, 2017 at 6:01 am said:

    I am so glad you have this posting. My portfolio website needs a major face lift. This article sparked some inspiration to start changing my website and is a great aid in doing so. Thanks!

  8. web design on March 8, 2017 at 2:23 am said:

    Magnificent challenges entirely, you only need to received any company logo fresh viewer. Quantity a person suggest with regards to this page that you choose to developed a couple of days in the past? Any . web designoptimistic?

  9. Sharon Hamlin on January 4, 2017 at 6:52 am said:

    Hello Nick!
    These tips are really appreciable.It can help one to create a perfect web design portfolio.
    Just give ones best part into it can make a classy portfolio. I would thanks to the writer for this amazing post.

  10. Andreas Pazer on October 26, 2016 at 11:32 pm said:

    Hey Nick, nice article. I often overthink it too much 😉

  11. Alan @ psdtohtmlpro.com on September 12, 2016 at 10:14 pm said:

    Thanks for sharing your web designing tips. A portfolio is really essential since it provides an idea to your clients about your work.

  12. Albert Wilson on May 26, 2016 at 11:50 pm said:

    A portfolio is really essential since it provides an idea to your clients about your work. TO be precise, it is the best means to impress your clients. You can put the reviews of your former clients in your portfolio.

  13. Nick Wedgewood on May 25, 2016 at 11:05 am said:

    Hi Nick,

    Huge praise from New England to you and Treehouse for providing this quality article. I’m applying to full time design positions in Boston and this will greatly inform my portfolio building process. A tip I recently received was to write about my portfolio work in terms of *achievements* instead of *duties*. So instead of simply “I created this business directory website for wedding vendors in New England.” You could say, “Within the first year, our wedding vendor directory received over 500 business sign ups all throughout New England.” Business owners are thinking about their bottom line. So write with that in mind. 🙂

  14. Murli Joshi on May 15, 2016 at 12:03 pm said:

    Great tips. I can say that if you do not have any existing portfolio then your website should be your portfolio. You should make your website in such a way that people can know your expertise and abilities. I have seen many new web designers who do not have portfolio represented their website as a portfolio with creative design.

  15. One very good article with 5 excellent and up to date tips. These are definitely some to keep in mind whenever creating a web design portfolio 🙂

  16. Very informative post..

    The first thing I will do is to choose an amazing theme. Great theme can attract customers eyes and leave deep impression. As you say, it is important to make the website responsive, which might be conducive to attract web traffic.

    All the points are very useful for any web designer working on a certain project.

    Thanks for sharing…

  17. Best Web Design Tips | Abishek Writes on March 17, 2016 at 12:34 pm said:

    Thanks for sharing your web design tips.

    Yes, I think it is very crucial to have a nice looking professionally designed website as it helps build trust and confidence among website users.

    It is also important to keep everything simple. Too many ads and banners will only scare the visitors away.

    Just make sure what your goals are. If you want to increase leads or make sales happen, then design your pages keeping those goals in mind. This will help you increase your earning through your website.

    Thank you

  18. samdani on March 2, 2016 at 3:05 am said:

    Off course the nice portfolio presents you to clients as elegant person . And that portfolio must be planned with nice decoration . And for this we have to know the ways to create perfect webdesign portfolio . In this case this article would be tonic . I convey thanks a lot for sharing this awesome article here .

  19. Great work. I am a professional designer, So, as a designer point of view, a portfolio must be original and only display your best work. You don’t have a long time to create an impression.I like things to be clean on a white background.

  20. Another Thing I would have liked to have seen was a number for CMS’s as that is all the rage, WordPress, Joomla and Drupal being the most popular.

  21. Rachel Cowart on December 3, 2015 at 9:33 pm said:

    I was wondering what I should do to get a job as a web designer. I am currently in college and will be graduating in May 2016. What type of portfolio should I make? I don’t really have any websites that I created that I think are good enough.

    • Nick Pettit on December 7, 2015 at 7:59 am said:

      Hi Rachel,

      If you don’t feel like you have enough quality work, then you should make some! 🙂

      My advice is to find local businesses in need of a website. You can either do it for free or charge a fee, and you’ll create great portfolio pieces.

  22. CarlJameson on September 29, 2015 at 4:09 am said:

    Great article, I am a bit nervous about starting a professional portfolio. Thanks for all the advice!

  23. John Abay on September 22, 2015 at 1:47 am said:

    Very good to see this kind of tips available for web design. It helps me lots in my daily life project and i like thank this post owner. One point i like is last that is regularly update your site that makes keep indexing your site in search engine.

  24. John Methew on September 21, 2015 at 12:49 pm said:

    These are awesome tips! I am going to use all of them on my new portfolio design. I never thought about a lot of these, and just took them for granted!

    Thanks for this a lot!

  25. Leah Webber on September 21, 2015 at 4:18 am said:

    Thanks for sharing so much useful information with all! Simple and good tips

  26. Latierra GmbH on September 17, 2015 at 9:53 pm said:

    Thanks mate for sharing such an informative blog post ab these 5 tips will help to create a webdesign portfolio.

  27. site is powered by wordpress but gives tips on being a web developer? ok….

  28. Niloofar on August 18, 2015 at 7:28 am said:

    Very useful tips, Thanks Nick. We have also listed some of the important factors to consider when setting up a portfolio website for a freelancer which might be worth your readers’ attention:

  29. Web Wizards on August 8, 2015 at 12:19 am said:

    I think a website design portfolio needs to look great, tell the client something about the client and the work you did and link to the website so they can see it. allowing them to quickly hover over a variety makes it easier rather than linking to one site after another.
    I like the way our portfolio page looks and we get plenty of good feedback from potential clients. https://www.webwizards.com.au/portfolio/

  30. Mike Nelson on May 17, 2014 at 4:50 pm said:

    Good post. I’ve been working on and scrutinizing my own portfolio lately and I agree with your 5 points. I find myself wondering about a couple of questions:
    1) For web design portfolios, should “thumbnail” be a homepage screenshot or something more artistic?
    2) I see a lot of people calling it “Work” vs “Portfolio”. Is one better than the other?

    Thanks for posting!

    • Nick Pettit on May 19, 2014 at 11:14 am said:

      Hi Mike,

      I think the preview images should be a screenshot of whatever best represents the work. As for work vs portfolio, I’m not sure it really matters. In this context, they mean almost the same thing.

  31. I would really really love if Ben made one of these posts for aspiring mobile developers.

    • Ben Jakuben on May 12, 2014 at 11:24 am said:

      This is a great idea! I will do just that as soon as I can carve out some time to write it. Stay tuned!

  32. Lorraine on May 10, 2014 at 8:31 am said:

    Great advice, and timing as I’m currently revising mine to include newer work and try and attract similar business. It’s not easy to communicate exactly what the customer needs to know, succinctly.

  33. Orange949 on May 9, 2014 at 8:31 am said:

    I really appreciate your stuff and recommended all the developers to read this article specially point the Tell a Story.Good Post….

  34. punom on May 6, 2014 at 9:20 pm said:

    Thanks Lena for your comment

  35. Do you have any advice you could offer for a more developer-oriented portfolio?

    • A link to your Github is always good for a developer.

    • Mike Mai on May 12, 2014 at 11:45 am said:

      In addition to Github, make some Codepens and write lots of blog posts about your thoughts on web development or demos of your programming/coding experiments.

  36. Really great tips. updating portfolio is really a best idea.

Leave a Reply

Want to learn more about Design?

Design refers to visuals, interaction flows, wireframes, branding, and more. Learn how to use good design to enhance your website, mobile app, or business.

Learn more