Get our weekly updates, including high-value tips and free resources that will help you take your design career to the next level.
We’ll start by sharing some examples of good web design portfolio websites so you can see what works best and why. We’ll also share what you must include in your portfolio if you want to get hired and tips for how to improve your portfolio website or how to get started if this is your first time creating one.
🤑 FREE Portfolio Handbook 👉 Download Now! 🤑
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. It’s first as a button underneath the statement at the top of the site and here it is 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 for you to add your contact information.
This is an excellent example of a simple product design portfolio and it just so happens to be built on Webflow. The homepage has a stunningly simple design that gets right to the point, which is essential for prospective clients looking to hire a web designer. The design utilizes a split layout on the desktop version. Each of the case studies takes up a large portion of the screen in these big colorful blocks.
There are only 5 so we can quickly get a sense of their product design skills. As you’ll soon realize in the section where we share tips for what to include in your portfolio, you don’t need a lot of examples of your design work. It’s better to include fewer examples that are high-quality, show the depth of your work, and the best of your abilities. You don’t need to include every project you’ve ever designed, be selective and only show the best.
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.
There are so many great things about this web 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 part of 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. Our 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.
While this isn’t a personal portfolio website but rather one for a Chicago-based web design company, it still serves as a great 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 a company or 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.
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?
We’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 award-winning agencies. 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.
Now that you’ve seen some examples of great web design portfolios and how they’ve presented their work and skills. How can you use this information to make your portfolio better or maybe even create your first portfolio website?
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.
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.
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.
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.
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 we 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.
Every time you visit a new website, whether it’s a portfolio site or not, analyze what works about it and what doesn’t. Even a bad portfolio website can be improved but only through developing an eye for good web design will you be able to distinguish the difference.
For more information on what makes a portfolio good or bad, check out this video where Ran shares his thoughts on two different portfolio sites.
Don’t forget to save a library of portfolio websites you love so you can reference them later when you’re looking for inspiration when creating your own. 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.
First, check out our YouTube channel Flux where we share tons of free information on how to become a web designer. If you want to see more examples of web design portfolios and case studies, check out this playlist of videos.
Consider checking out one of our programs for a deep dive into a specific topic. We offer 3 different programs that go deep into design, development, and how to build a successful freelance business. We give you the path to follow so you learn only the skills you need at your pace.
In The $10k Website Process, you’ll discover a step-by-step process to design beautiful, high-value websites that achieve strategic goals for your clients. Master the art and strategy of website design, and increase the value of your services, as well as your rates.
In The Webflow Masterclass, you’ll learn how to use Webflow to build custom, fully-functional websites quickly without learning how to code. Break free from restrictive templates, regain your creative freedom, and bring your best creations to life with this powerful visual development tool.
In The 6 Figure Freelance Designer, you’ll learn how building a successful business as a freelancer is possible anywhere with an internet connection. We give you a roadmap to follow to consistently attract high-value clients and make a great living doing what you love.
Get our weekly updates, including high-value tips and free resources that will help you take your design career to the next level.
