As a designer, your portfolio website is key to helping you get your next job or client. It’s how you show off your skills as a designer. Without one, no one can find you.

In this article, I’ll share examples of some good portfolio websites and why they work. You’ll also learn what you must include in your portfolio and tips to help make yours better.

What works for the portfolio site

The Papestielliz

This is such a fun example of a portfolio website by The Papestielliz. There’s so much life in the design from the illustrated characters representing the designer behind this “collaborative design duo” to the micro-interactions as you navigate through the site.

They definitely stand out with their quirky typography and color choices. Think about how you can make your portfolio website memorable. How can you surprise and delight a prospective client coming to your website who might want to hire you?

Dann Petty

Dann Petty is a well-known freelance designer who specializes in designing websites and apps for big companies like Google, Airbnb, North Face, and Uber, just to name a few.

What I love about his website is how well the homepage works. First, there’s a strong statement at the top letting you know exactly what kind of design work he specializes in. He hints at past client work with the live updating text for companies like “Airbnb” to “Uber” and more. There’s a beautiful gallery of work below to scroll through to get a sense of his past work and how what he can do for the next client that comes along.

And most importantly, there is a clear call-to-action with his contact information, repeated a few times. First, after the main headline and again once you scroll all the way to the bottom, reminding you he is available for freelance work.

It’s ok to add your contact information in more than one place, especially since that’s the goal of your portfolio website. Take note from Dann’s website and find the best places to add your contact information to increase the chances of a client reaching out to you.

Adrian Z

You’ll definitely want to check out Adrian’s portfolio in your own browser tab as there are so many delightful interactions to experience.

You’ll notice the ongoing trend of a strong headline, a subtle introductory paragraph that tells you more about the designer, a quick call-to-action to contact them, and a beautiful gallery of work. But this site definitely takes it to the next level with all the quality of design mockups and stunning interactive experience.

Owltastic

There are so many great things about this design portfolio website by Owltastic. First, the branding is a big part of what makes it stand out. With a name like Owltastic, how can you not pay attention?

There’s a cute little owl as a focal point in the logo, a beautiful color palette, and little design elements that tie in the branding experience. Even the copywriting is a pleasure to read: “Designing through the night to bring wise ideas to light”.

This is a great example of one of those one-page websites where everything you need to know is on the homepage. My only point of criticism would be instead of each of the website examples linking out to Dribbble, where you can’t control the viewing experience, it would have been a better idea to create a separate webpage on the site and link internally.

One Design Company

While this isn’t a personal portfolio website but rather one for a Chicago-based web design company, it still serves as a good example. Be sure to check out the fun animation in the header design on the homepage, a great way to welcome a visitor and share more information through motion graphics.

You can usually tell the difference between a portfolio site for an individual versus an agency based on the way they present their case studies. Notice how they list all services they offer from user research to journey mapping, prototyping, interactive design, and more. They also include extensive information in their case studies including bits like this diagram on how they arrive at the right solution through iteration.

I’ll end with one last example from the creative agency Ueno. Again, we can learn a lot about how to fine-tune our portfolio websites from agency websites like this one.

Not only do they spend a lot of time and effort on the work they do for their clients but also in how they present that work in case studies to attract more of the same clients. Here’s a snippet from one of Ueno’s case studies for Verve.

One of the ways Ueno stands out from other agencies is with their snappy copywriting, notice how they show it off throughout their website while giving you the full story of how they redesigned the Verve website experience.

Aside from good design, how else can you stand out with your portfolio website? Do you take breathtaking photos, are you a talented illustrated, or maybe you have some killer motion skills? Find ways to weave them into your website.

What you must include in your portfolio

Now that you’ve seen some examples of good design portfolios and how they’ve presented their work, how can you use this information to make your portfolio site better?

While you can design your portfolio website any way you like to allow your skills and personality as a designer to shine through, there are a few key things to keep in mind. Here’s what you must include in your portfolio website.

Show 3–5 of your best work examples

So many designers make the mistake of including everything they have ever worked on in their portfolio. This is a huge mistake. Instead, you want to include 3–5 of your best pieces of work. It’s better to show fewer but better quality examples rather than a bunch of small, incomplete, and mediocre examples of work.

Show depth with case studies

When you’re thinking about what work to show in your portfolio, think about how you can showcase them in a case study. Rather than showing a one-off design, like one landing page design, think about how you show this in a better way. You don’t want to just show off your design skills but also how you’re a strategic creative partner to work with who solves creative problems.

Show in progress work along with the final outcome

Add context to your case studies by giving them a problem statement, maybe a little background into the goals you were helping this client achieve with your design. Don’t forget to show the progression of your design from beginning sketches, low-fidelity wireframes, and moodboards to the final high-fidelity UI design mockup.

Make your design mockups stand out

Instead of showing a screenshot of a landing page or an app screen flat on a white background, think about some creative ways you can mock up your designs. Really go the extra mile on this step because presentation makes all the difference in your portfolio. Remember The Papestielliz’s website I mentioned shared earlier? Take a look at how they mocked up some of their designs.

Instead of just having the UI design on the pink background, they added 3D elements and shadows to give the landing page more dimension. In the second example, notice how there is a shadow to an enlarged view of another screen. In one static image, they showed you what happens when you click on the “Buttle Tea Menu” button.

Analyze and bookmark your favorite portfolio websites

Every time you visit a new website, whether it’s a portfolio site or not, analyze what works about it and what doesn’t. Only through developing an eye for good web design will you be able to distinguish the difference between a good and bad portfolio.

Don’t forget to save a library of these portfolio websites you love so you can reference them later. I personally use Evernote to save bookmarks of not only portfolio websites I love but websites in general that are great examples of web design. Whenever I need a little inspiration, I look through the “web design” tag in Evernote and I can revisit them.