Chapter 3: Portfolio

It's important for designers to showcase their best work online, whether it's to contribute to the design community or land a job at your dream company. It's recommended you have your own personal site, as well as with a design community like Dribbble or Behance. Joining these design communities allow you to be discovered more easily and participate in critiquing other designers work.

Your online portfolio should be tailored appropriately to the type of design you practice and/or job you're looking for. For example, UX designers might include more case studies than an animation designer who would showcase animations.

Parts of the portfolio

A typical designer portfolio might include case studies, screenshots of designs, animated gifs, and links to interactive prototypes. Some feature really thought out design with lots of animation and interactive elements. And others, not so much. It totally depends on how you want to represent yourself as a designer, and your work. Let's take a look at the various parts that go into a designer's portfolio.

The Basics

When crafting your portfolio, it's important to define who you are and what type of design your practice. A lot of portfolios will include a quick sentence that explains this on the homepage, with an about page dedicated for a more descriptive biography.

My personal preference is that less is more. For example, on my own portfolio I simply say "Chris Limbrick is a Product Designer at Datadog." When a user visits my portfolio, they quickly understand who I am, what I do and who I work for. My goal is to get viewers to visit my projects and see the work I produce.

It's a good idea to include your resume as a downloadable PDF as well as any social media and contact information. For example, if you're a designer who can code, add a link to your Github account.

Case Study

Case studies are a great way to show your UX design and explain your process. Case studies for portfolio generally answers the following:

  • The problem you are solving
  • The solution
  • Your role

When writing out the descriptions for each section, they should only be a few sentences. Your case study should also include graphics of your work, like user flows, sitemaps, wireframes, etc.


When add images of your work online, you'll want to make sure they're high quality.The last thing you want are blurry, unprofessional looking photos on your design portfolio! Some designers will add images directly of their portfolios, some might add an interesting background behind their designs or add a shadow to the design to help separate it from the background. This is all personal preference and you can see how many designs will do this on Dribbble.

I personally try to show my visitors user interfaces that I have designed, as well as very specific components and their various states. For example, I might display a checkout page I designed in one images, and another image I am showing a component for a user to add their address, the success state and the error state. I think a great designer should showcase the details of components, as they convey that you've thought about how they work and behave.


Animation designers should showcase their animates in gif format. Some designers spend extra energy in creating longer promo-like videos showcasing their animations, whether it's a micro-animation or lots of movement for layout animation. Gifs are typically used the most becuase they are smaller file sizes that load quickly and automatically play in the browser.

How to create a design portfolio

There are many online site builders you can use to create your own online portfolio. A simple, free option would be to use a Dribbble or Behance account. These online design community sites allow you to upload your designs in high quality and include a short bio along with social media links.

If you want more customization for your portfolio and don't mind paying, you might want to look at Squarespace. They offer a ton of templates geared towards online portfolios and it's pretty easy to create your own custom layouts.

If you know how to code basic HTML and CSS, you can create your own website and upload it to Github. Then you can create a Github Page, and link a domain name to make the site public.