What makes a GREAT UX Design Portfolio? (With examples)
In this instructional video, the presenter shares three core patterns that elevate a UX design portfolio from merely good to truly great: strong visual design, effective storytelling, and a distinct personality. Drawing on a study of over 100 top‑designer portfolios curated on Folio, he walks through three concrete examples—Michel Van Heest, Marvin Schweibold, and Perry Wang—showcasing how each pattern is manifested through typography, layout, color, imagery, and personal narrative. He explains why recruiters often spend only seconds on a portfolio and how the right combination of the three patterns can capture and retain their attention. The video then distills practical, actionable guidelines for designers with limited work: (1) visual design fundamentals—limit fonts to two, use consistent spacing, and employ neutral background colors while letting project imagery provide vibrancy; (2) storytelling tactics—"show, don’t tell" with images, animations, and concise case‑study structures; (3) personality cues—craft a compelling About Me page, embed personal interests, and use subtle visual quirks to stand out. The presenter concludes with encouragement that even modest portfolios can be transformed by applying these patterns.
Chapters
Over the last 3 years, I've been able to identify common patterns and secrets that makes a design portfolio attractive to design recruiters and design managers by collecting and studying over 100 portfolios from top designers globally. In today's video, I'm going to be sharing 3 common patterns that makes a UX design portfolio to go from good to great using real examples and references from my portfolio collection. The 3 common patterns I have observed across the portfolios I've collected so far is 1, strong visual design, 2, good storytelling, and 3, a great personality. Good portfolios are able to combine one or 2 of these patterns, but great portfolios are able to combine all 3 seamlessly. You're probably wondering, I have what I need from this video, I could as well just move on to the next video. But no, that's not all. There's a method to the madness, and I want to show you how you can weave these patterns into your own portfolio to make your portfolio go from good to great. We're using 3 clear examples from Folio, a website that curates the portfolios of top designers globally in one place. So now let's go into Folio and pick the first portfolio. The first portfolio I'm going to be picking belongs to Michel Van Heest. So let's visit his portfolio. On Michel's portfolio, we're on the homepage now, and the first thing that welcomes me on the homepage is, hey, nice to meet you, I'm Michel. And he has a really nice picture of himself which actually shows a lot of personality as well. A recruiter can most likely already connect with this and say, hey, okay, this is who I'm actually looking at right now. I already know who this person is. And now he also introduces really great visual design in how he's able to like transfer the background of his picture here, which is like the orange or yellow background here into subtle background of the entire website, which sort of blends from light orange all the way down to white. Very strong visual design. This person understands visual design and has been able to deploy it properly in his portfolio. Now, if you get into his selected works, he then also stretches that visual design further by introducing contrast and good storytelling in showing the actual work that he's done, right? So he has like all his projects into huge cards that sort of explains the project. So this is one project. And then when you get here, this is one project. And then when you scroll down again, this is another project. And when you scroll down again, this is another project. All of them have prototypes or visual mockups that show that this is what he has done. And then they have small descriptions that explains it with very good contrast. And also the layout is like simple one-grid layout for you to scroll through everything. If you go into the About Me page for Michel's portfolio, we're going to see that he also speaks a little bit about himself at the top. Top here, right? He's not writing a lot. He just speaks a little bit about himself at the top here and then introduces images again. Again, this is how to show personality on the website, right? He's been able to show it here that, hey, I'm an adventurous person. I enjoy traveling. I enjoy spending time with friends. I enjoy attending events. And then he's also able to like go into more details. If you're interested in reading about more details, he then starts to talk about what he does, when he's happy at work, what his career has brought so far, and also introduces more imagery again and also speaks about the things that he's been doing on side, learning new things, traveling, discovering beer, biking, also showing his book collection, but not even really talking about it. If you notice, I haven't even gone into his projects and I've spent about 2-3 minutes on this portfolio already. So this is an amazing portfolio that combines great visual design, good storytelling, and strong personality. Now let's go back into Folio and let's look for another portfolio to show here, right? The next portfolio I'm going to be selecting would be this portfolio that belongs to Marvin Schweibold. So with Marvin Trybold, back on the homepage now, we have Marvin's portfolio. He describes himself as a product and visual designer based in New York. But if you look at this again, he's been able to like show this in a very interesting way that shows personality. This person understands design principles and he has been able to like break some rules in this. That is a strong show of personality. He uses this really bold typeface as his header. And then when you get into like the pages of the portfolio itself, you start to see how he's able to combine different kind of layouts to show his projects. So he has like this large card here and then this small card, and then he alternates it back on the next one to a small card and a large card. And then the third one introduces even 3 cards. Really good use of layouts, really good use of grids here. If you go into the About page for Marvin's portfolio, it takes that bold typeface further in this page and he describes himself in an unconventional manner. You don't find something like this in most portfolios that you go through. This is what makes it unique and this is what makes makes it a great portfolio. So he speaks about himself, and then you get to scroll through. And then while you're scrolling through, another show of personality. As you're scrolling through each of the projects that he has that he says they are live, it just shows you a nice small animated thumbnail of those projects. Really interesting way to show your work. And then it talks about like his interviews, and it talks about some of the other things that he's been up to and what he does on the side, teaching design, featured projects, and the awards that he has won. There's no better way to show personality than this, and it also does it in a way that tells a good story of him being a design leader and someone that has some influence as a designer. Again, if you notice, I didn't check any of his works. I didn't go into any of his works. I haven't done that, and I've spent another 2 minutes on this portfolio. Keep it in mind that most times recruiters spend less than 30 seconds or less than 1 minute on a portfolio. But if the portfolio is really good and if it's a great portfolio, recruiters are going to spend time on it. They're going to have a look at it just because you've able to engage them with good storytelling, strong visual design, and great personality. So let's go into the third portfolio. This is actually my favorite one. That's why I'm actually saving the best for last. This portfolio belongs to Perry Wang. So let's visit Perry Wang's portfolio. On Perry Wang's portfolio, this is a little bit different. His portfolio is a dark-themed portfolio and his homepage is actually his about page, which is what he wants to show first. Perry wants to show a little bit about himself first before he actually gets into his project. So here is his about me page, a dark-themed, beautifully beautifully designed website. You can already see that there's a strong use of, you know, color and contrast here. You know, it's just dark neutral color, but then it allows the images to show the vibrant colors while the background is just dark. And again, Harry shows like images and text. He says this is a story. He's been on a trip to Japan. His background is in architecture, and he then goes into how he got into UX and how he's able to bring everything together. Also shows you that in his spare time he does photography, right? This is very good storytelling in the way he's able to like combine imagery and combine the text to tell the story and also shows his personality. From this, I can tell that this is a creative person. I can tell that this is somebody that likes to explore. I can tell that this is somebody that has other hobbies outside design. And then if I go into Perry's work, first of all, how he's able to like show the homepage of his work similar to the first portfolio that I showed. This is also like a one-column presentation of all the works that he's done. So if I go into this one, this is Stadia Bluetooth, which is one of his works. Again, the first thing that it shows is the outcome of the work. It's not writing anything. It's not allowing you to spend a lot of time before actually showing the outcome of the work. So the first thing that it shows here is the outcome, and then it scrolls down and then starts to talk about his role, the overview for the work, and introducing some animation. Really good storytelling here because you're able to like see imagery and animation of the work that he has done. And then once you go down as well, you start to see other components of the other work. He is showing more visuals and more images than he is writing, right? So this motivates me to actually scroll through this portfolio more, right? I can see all the components that he's able to use in his design. I can tell that the strength of this particular person is user interface design. This person has very strong visual design skills and is also able to like tell the story of how he's been able able to whip everything together, including the feedback from the community that he designed this particular product for, which is actually really interesting. So again, this portfolio is great because it combines great storytelling, great personality, and strong visual design all together. And it doesn't even stop there. It keeps talking about like the problem, and then it starts talking about like the design principles that helped him to get there, the timeline. It is not boring, you know, looking through this portfolio. And that is what you want to be able to achieve whenever you're designing your portfolio. You want to make sure that when recruiters are looking through is not the same thing that they've been seeing over and over again in other portfolios. Make sure that looking through your portfolio is not a chore for recruiters. Rather, it should excite them. You're probably thinking, how do I apply these patterns to my own portfolio? I don't even have enough work to show. My work is not even good enough. I don't even know how to tell a good story. Well, you have to start with what you have. Let me break it down for you quickly. To make the visual design of your portfolio stronger, you need to focus on 3 things. 1, typography. 2, spacing and layout. And then 3, the use of colors. If you look at the portfolios that I shared initially, you would notice that the common thing amongst all 3 portfolios is that they have a very good use of typography. None of them combine more than 2 fonts. In fact, Michelle's portfolio that I shared actually has just one font and is able to use different font weights to show hierarchy. Some of the other portfolios combine one header font and then one body font. So make sure that your portfolio has at most 2 fonts. If you can use one font with different font weights to communicate hierarchy, that's fine. But if you want to use more than one font, don't make it to be more than 2. Also, the use of spacing on the examples that I've shown as well. If you notice, there's a very good use of white space and it doesn't feel like the text or the spacing or the elements on the portfolio website are squished together. There's a consistent use of spacing across each element on the website, and that allows the elements on the website like typography, imagery, cards, and everything to breathe properly. So you want to introduce spacing into your elements that you are putting into your portfolio so you're not squishing them together. Also, with the use of colors, the examples that I show have really great use of colors in the sense that they're not just mixing different colors on the website or they're not having like colored text or colored typefaces. Instead, what they do is that they've chosen a neutral color for like the background of the website, which you would see mostly maybe white, or in the case of the dark one that I showed, which you see as dark, and then They've chosen another neutral color for the text, which is mostly white, but then they allow the imagery to bring in other colors into the portfolio. So they are showing the vibrance of the portfolio using imagery. They are showing the vibrance of the portfolio using their mockups. They are not introducing color anyhow into the website. So that's something that you want to keep in mind. Make sure that your typography is really good by introducing at most 2 fonts. Make sure that your use of spacing and layout is really good by making sure that you're not squishing your elements together on the portfolio, making sure that you are putting enough of spacing between each element and the spacing is consistent. And also make sure that your use of color is great by not adding too many colors into the website or making sure that your actual color that you use are neutral colors and you're using imagery to introduce vibrant colors into the portfolio website. To introduce good storytelling into your portfolio, the most important thing that you can do is to show, don't tell. Think about this anytime you want to write a lot of text. Is there any way I can communicate this using an image or an animated video? Storytelling is not always about writing or speaking, it's about connecting with the emotions of your audience by any means possible, and images connect faster and leave a lasting impression. When you can't use imagery, think about creative ways of landing your message better. For example, in the context of designing a movie streaming app, instead of just having a section title that says user research, you can say that we discovered that users were spending too much time before they found a movie that they could watch, and then you can talk about how you discovered this and how you solved it. To show great personality in your portfolio, think about something that makes you unique as a designer. It could be something slightly visually disruptive but it still works, or something that could make a viewer more interested in you, maybe like a personal story. Like how Marvin used this bold misaligned typeface on his website header, or how Mitchell and Perry weaved pictures of their interests and adventures into their About Me page. Pay special attention to how you craft your About Me page. A lot of designers get this wrong and they leave the About Me page as an afterthought, but most times this is where recruiters come to first, or this is where they eventually get to on your portfolio because they want to understand who they are trying to hire. So find creative ways to show who you are to the person viewing your portfolio. For example, you could talk about what your background was like, what inspires you, what are you currently listening to, what are you reading, what's your design philosophy, what are other people saying about you. I could go on and on, but I'm going to stop there, and I hope everything I've said so far helps you to take your design portfolio from good to great.
