The only video you need to nail your UX portfolio.

If you think your portfolio should be a bunch of long case studies, user flows, journey maps, and screenshots of your work in 2026, you're doing exactly what everyone else is doing, and that's why you're not getting any responses from your job applications. There's no better way to show what a good portfolio looks like than taking you behind the scenes of my own portfolio design process using Framer. So in this video, I'll walk you through the process I followed while designing the landing page of my own portfolio from scratch. By the end of this video, you will understand how I find design inspiration and combine multiple ideas from different sources, the 3 attributes every design portfolio must process to stand out, how I introduced this attribute into my own portfolio, and how I built everything in Framer, including making it accessible on mobile. If you're new here, my name is Samuel. I've been a designer for 10 years. Currently, I'm a senior product designer at a digital bank called Monzo, and this is the only video you need to nail your next design portfolio. This video is brought to you by Framer. Let's get into it. So here's the portfolio within Framer. This is the Framer interface. Framer is just like Figma— I mean, very similar to Figma. I wouldn't say like it's the exact same tool, but if you understand how to use Figma, you wouldn't have problems doing some things in Framer. So the learning curve for Framer isn't so much, but for this particular video, I'm not going to be focusing on some kind of Framer tutorial. Instead, I'll be talking about like the design decisions that helped me put this design portfolio together. The first thing that I did while I was working on this portfolio is to really think about how I can get portfolio design inspiration. And I'm optimizing for the volume of ideas that I actually get so that when I have a lot of ideas and I combine those ideas, you can't exactly tell where the idea came from, and that's how I approach creating something unique. So I went to folio.design, which is a portfolio inspiration website where I curate design portfolios of top designers globally. On this website, I just collect portfolios there. This website is also built on Framer, and it gets a lot of visitors, about 800 to 900 visitors monthly. I haven't updated it in a while, but the portfolios there currently, about 70 of them, are some of the best design portfolios on the internet. And there are 3 criteria that I use to sort out these portfolios I upload them on folio.design. The 3 criteria is that the portfolio must have strong visual design, it must have good storytelling, and the designer must show their personality in the portfolio. So the designer must also demonstrate great personality. And those are the 3 attributes that I believe that you should always show in your portfolio. Once somebody lands on it, they should be able to see signs of really strong visual design. They should be able to understand the story that you're trying to tell in a quick glance, and then they should be able to get an idea of like your personality, something that makes you unique. And those are the criteria that I use to sort or identify the kind of portfolios that qualify to be on this website. So when I started, I literally just took screenshots of a few portfolios that I really like because they really hit those criteria. But beyond taking screenshots, I also started to identify some of the things that I like in those portfolios. When you're trying to get ideas, you shouldn't just pick ideas from places. What do you actually like about that idea? So that's what I'm doing here. For example, this one, I really like the typography that is used here. I like the serif font and I like the kind of like calm background on this portfolio. On this one, I like that this designer has like a playground grid and I like how they show their playground. On this particular one, this person uses like a really nice bento grid as well. This one, this designer showed like their design values, which is something that I like too. And then on this one, this designer shows like their work experience, almost like a mini resume inside the portfolio. Another bento grid. The mockup that is used for the phone here is what I like. And also another one that has like mockup here. So you get the gist, you know, just picking ideas for like different things that I like before I come up with my own portfolio. This is the design tab in Framer, which means that this is the tab where you get to explore all of your designs. It's like so that you don't need any other tool like Figma to design and bring it into Framer. With the design page, you can just come here and explore the kind of designs. The very first thing I started exploring is how do I want the thumbnail for my projects to look like? Because your project is the center of your portfolio, literally. So I started to think about what I wanted to introduce in the thumbnail of the project and how I wanted to introduce that. So I was exploring a couple of things here. Here I was thinking about making like the thumbnail some kind of carousel that you scroll horizontally. I was trying the horizontal scroll and I realized, okay, why do I want to have a horizontal scroll? It might make it difficult for people to actually access it and even makes it more difficult in mobile. Then I thought about like this 4 2x2 grid as well. And I thought again, you know, what I'm trying to go for is something that feels unique. And most portfolios already have like this kind of similar kind of grid. So I stepped away from that idea. And then I moved more towards like this idea here where, you know, you have like big cards that shows the prototype on one side and then shows like the title of the project and some kind of subtitle. So I started to move more towards like this idea here. So you can see this feels very, very wireframey. It's not like the actual thing, but this is where I was just like exploring stuff first. I spent a lot of time on this actually because the project card is like one of the most important things. I'll come back to this page because this is basically where I was doing a lot of explorations. You would see that here I started to explore typography and how I— the kind of fonts I use and how I wanted to pair those fonts, which is another really good, um, signal for strong visual design. And you will see other things that I'm exploring here as well. But let's go back to the actual design. So in the actual design from on Framer, I have like my actual design here, which is like the full website and the mobile version of that. And then on this second tab here, I have the actual published website itself. So I would go on the actual design to show you stuff, and then I'll go on the published website as well to show you, you know, how that looks. So let's start with the hero section, this particular section of the portfolio. What are the design decisions that I made here, and why did I design this hero section like this. I wanted this hero section to do 2 things or 3 things at first glance. At first glance, I wanted a way to make the recruiter immediately start interacting with the portfolio so that the recruiter, before they even start looking at my projects, I want them to start, you know, clicking around and starting to explore things because I want to optimize for time spent on the portfolio. I want recruiters to come on this portfolio and spend time actually looking through stuff. And I believe that the more time a recruiter spends on your portfolio, the more they get to know you and the higher the chances of inviting you for an interview. The second thing I wanted to do here was to solve a personal problem that also most people have. And that problem is that most times when you're describing yourself in the header of your portfolio or in the hero section of your portfolio, you usually have a lot of descriptions in mind. You don't know if you should position yourself as somebody that designs for mobile interface, or somebody that designs for web interface or somebody that has strong brand design skills. Usually people have lots of descriptions in mind. And one of the ideas that I saw in one of the inspirations is like this tab idea here where, you know, I could actually describe myself in different ways to different people and get the recruiter to click through that. So here's what that actually looks like in the actual website. So in the actual website, my description for everyone that comes here is I help product teams and people move forward with creative problem solving, craft and storytelling. Then for recruiters who might be more interested in how many years of experience I have and the industries that I've worked in, I'm saying that I'm a product designer with 10 years experience designing for banking, food delivery, lifestyle, and golf tech. Sometimes it might be like a hiring designer that comes to check the portfolio. So for them, I'm telling them that I enjoy finding delightful ways to solve complex problems, and I sweat the small stuff when it matters. This has already introduced one thing. It has ticked the checkbox of visual design because obviously I think this is like really good visual design because It shows like some kind of like design thinking or some kind of like product thinking and how I'm thinking about the people that I want, that want to use this product or want to visit this portfolio. I also think it's good storytelling because already I've shown 3 different kind of personalities here. Like this, I think this is the kind of person I am to everyone. If you're a recruiter, this is the kind of person I am. If you're a hiring designer, I'm more interested in like the delightful things and like the craft This is who I am. So you can see how this has hit the strong visual design, good storytelling, and great personality. Also, there's like a tiny small detail that I introduced here for visual design as well. You would see that at the top here in the avatar section at the top here where you, where I have like the navbar at the top here, not really a nav, but you would see this subtle animation between like my face and the avatar profile there. Just something subtle. You might, the recruiter or somebody that's checking the website might not see it. But again, that's a really cool thing if they get to notice it. And that's how you also show personality. Let's move on to the next part. The next part of the website is the project grid. And the project grid is so important because again, why does somebody come to a website? They want to see the project and you need to make the project front and center. If you look at the initial designs that I showed you here, you would see that the project grid here is a lot more subtle and calm and it doesn't have like this kind of colors. But I wanted to introduce a way for the projects to actually stand out. That was how, why I started introducing like some these vibrant colors into the project. So I have 3 projects here. No, this is just the landing page. I didn't go ahead to write any case studies, but what I was trying to do here is to call attention to the project in a way that most people don't by doing 2 things. One, using vibrant colors to call attention to it. And then the second one is, you know, talking about the actual overall goal or outcome of the project. And then also talking about some things around the impact. For example, the very first project here is is a project at Monzo. Obviously, because I still work at Monzo, I can't show the projects that I'm working on actively. But one of like the most relatable visual artifacts for Monzo is our cards. So I had like the personal bank card, the business bank card, the kids' accounts card, and the joint accounts card here. And then I talk about like, you know, the, the whole reason, the whole point of like everybody that works at Monzo, our goal is also always to make money work for everyone. But here is where I actually talk about the actual work that I'm doing, leading design for the help support experience of 15 million personal and business banking customers. So I'm already trying to show like the impact of my work and how many people it affects. The same thing for the second one, which is like automating customer support for banking operation. Again, I go into something that looks like, you know, impact. These numbers are not real. Of course, I can't put real numbers here. But again, I'm trying to show like the impact of the work right there before you even click the thumbnail to to check the project. And that's the same thing for the third project for Deliveroo as well, where I talk about, you know, business insights for restaurants and grocers. And then I talked about the quick impact of the work. Another interesting thing here is how I decided to show the thumbnail, the actual work itself. I don't think a lot of portfolios do this kind of like shadow-like thing to show like the actual project. So I was trying to go for something that people wouldn't find in a lot of portfolios. If I look at this portfolio again, I might even change this design, but what I was trying to do is just introduce something a bit unique and kind of vibrant as well. So let's see what that looks like in the actual website. In the actual website, you would see that once I hover, it becomes— it comes in focus. So I'm trying to put a focus on each project instead of having multiple projects on the screen. Once you come here, your focus is this project, and once you scroll the focus is the next project. And then once you scroll again, the focus is the next project. And in Framer, doing this in Framer is really, really easy. All I needed to do was make this a component. So this is the actual component and then create an hover variant for the component. So on the actual component, this card is smaller and on the hover state it is bigger so that when you hover on it, it just gets bigger to show that you can actually click on it. And that also just introduces some kind of like interaction as well. And again, when you look look at all of these 3 cards, again, it shows like visual design, it shows the storytelling as well, because again, the story here is this is the impact and the goal of the work that I'm doing, and this is like how many people it impacted, or the actual full impact of the work in numbers. That's the story here that, that I'm telling. And then I use visual design to actually call attention to the work itself. So again, this section sort of hits like the storytelling and visual design part and a bit of personality as well. Because again, personality is what makes you unique. And if you look at most portfolios, you probably won't find like this kind of like really strong shadow for, for how they show their projects. The next section is one of my favorite sections, and that's like on the side. This is very important because most designers don't work on side projects. Secondly, most designers also don't show the things that they are working on on the side on their portfolio. And I think it's such a missed opportunity because, um, it's one of us— one of like the really, really good signs of, of a good designer, a designer that takes on side projects, because it means that they are willing to explore other things outside what they do in their actual 9 to 5. Um, and it also shows that they are willing to sharpen their creative muscles by taking on projects outside their 9 So in the underside section, I have folio.design here, which links to the Folio website that I just showed right now. And then I also have like the other products that I'm building, Dopo, the AI twin for creators and personal brands, which links to the website as well. The interesting thing is that all of this website was actually built with Framer. folio.design is built on Framer. It's not a portfolio website, obviously. So this feels more like a portfolio inspiration website. The other website for the startup that I'm building, doppo.ai, is also built in Framer. Like, you know, like, this is basically what it looks like. And you can see that, you know, Framer is actually capable of handling, um, personal websites, is capable of handling portfolio websites, and even marketing websites. A lot of companies find it easier to just build their marketing websites on Framer because it's easy for them to make changes. All they need to do make a few changes on the website and, you know, hit publish, and then, um, the website is live. So that's like one of the major reasons why I really like using Framer. And as a designer, if you're working on any kind of side projects, Framer is such a good tool to use as the marketing website for that side project. Or even if you really want to make some money on the side as well, if you learn Framer and you are able to tap into freelancing, you can become a freelancer that builds marketing websites for people. You can build Framer templates and money from Framer templates. So if you want to get 1 month free on the Framer paid plan, all you need to do is just go to the link in the description, go through that link, or use Samuel Fabayo at checkout, and you're going to get 1 month free on the Framer Pro plan. The next section here, actually, before I move on to the next section, I also want to talk about like these animations that I have here on this particular section. The story I'm trying to tell here is that, you know, this is folio.design, it's the handpicked portfolios from top designers globally. Well, maybe you would expect like a screenshot of folio there, but instead of that, I just use the avatars of some of those creators because I think faces are so powerful because once people see faces, they are sort of drawn to it. So I introduce like, you know, some kind of carousel avatars of the faces there. But when you want to do this, this isn't done in Framer. I had to do this with another tool called Jitter. I'll link a tutorial for how you can do something like this in Jitter in the description of this video. So if you go on the actual site and I refresh again and I go towards this section, you would see how it actually looks. So it just shows like projects on the side. Again, if I hover on it, the carousel stops. And then that's the same thing for this as well. And then what I'm doing on YouTube as well, also showing that, you know, I create content on YouTube. So this section is basically about showing my personality outside work. Again, visual design, storytelling, personality, all in one section. I'm demonstrating that here. The next section is the resume section. Remember one of the inspiration that I saw, like I really, I said I really liked how this person showed their resume here. Like, I really like this. So this is basically where the resume section is, but you can see that I haven't just lifted like the idea or like the entire thing. All I liked is that they showed their resume, but the way I showed it on my own site is, is quite different. I like the fact that they had like logos of the companies that they work with, and it just introduces like some kind of familiarity as well when you look through the website, especially if these companies are companies that recruiters already know or companies that are popular already. It's such a good way to anchor your work around, you know, some places that you've worked in the past and just introduce that section. The other section is the values that shape my work or personalities. Again, one of the things that I got from like the inspiration portfolios that I looked at, the value here is basically talking about how I work with other people. And here I'm presenting the typical process that I follow and how, what I try to, principles or design principles that I try to anchor my work around. And one of that is to start with questions. Another one is to validate assumptions. Another one is to co-create the outcome with the users and with your team. And then understanding that delight is in the details. And if you look at this section here, again, I started to introduce some interesting things here because people might look at this and like, okay, what does this mean. So when you hover, it then explains further what that particular value means. And it does the same thing for the other ones. And I'm using like similar colors that I'm already using on like the different sections of the website here. So again, this section also shows like, you know, my personality because it's showing like this is how I work with people. It's also showing some kind of like storytelling as well. And it's also, you know, showing some kind of interaction design or some kind of visual design. The next section is the background. So here I started to go more into my personality because most times when people look at your portfolio, what they start getting interested in is, okay, so who's this person? What's this person's story? What's their background? How did they come to become a designer? What are the other things that they do outside work? And that's what I try to do here in a few lines, right? Basically talk about like my background, you know, where I was born, where I was raised, how I became a product designer, the things that I did before that. And one of the things that I really like introducing in this particular section is relatable pictures that show you doing other things outside work. For example, here I introduced a picture of me speaking to a couple of designers about design portfolios. And then here I added a picture of me running my first half marathon and then the medal I got after the half marathon. I think it's just a cool way to you know, start to show your personality and who you are outside work and some of like your other interests as well. If we go back to the website, you would see what that looks like. You know, it's really, really, really simple, calm. It doesn't try to do too much. I wanted to introduce some kind of overstates to actually describe these pictures, but I didn't get the time to do that. Maybe I'll do that later. Then the final section is the footer. A lot of people ignore this section. In actual marketing websites or even in portfolio websites. Like, you've spoken about like all of the work that you've done on your portfolio. You've spoken about like all of the work that you've done before and your personality and your background. I believe that the footer is your final opportunity to impress whoever is looking through the portfolio. So you shouldn't just make it bland. So in doing that, I then introduced some like really, really huge, big text here that sort of breaks the pattern of all of the kind of text I've been using all through the website. Again, that's how I'm trying to show some personality by doing something slightly unique. And then, you know, I have like some kind of description, links to contact me on social media, and a picture of myself. So throughout this, I haven't really shown a picture of myself anywhere asides, you know, here and here, but nothing like really up close that really says, okay, this is who this person So I sort of introduced that as like the final thing on the website. So if you go all the way down to the actual website, you see what that looks like at the bottom here. The other thing now is like, what does this look like on mobile? The thing about Framer is that once you're done with this, you can easily just create like a mobile variant. I mean, not like easily because you have to then start to like adjust everything to mobile. But the good thing about Framer is that you can actually create create the different breakpoints that you want to make sure that the website responds to. So in this particular case, now I've created for like desktop and I created like a mobile variant. And you'll see some design decisions in the mobile variants. For example, on the desktop variant, this has like 3 tabs. On the mobile variant, this has 2 tabs because 3 tabs becomes too long here. But again, it still serves the purpose because now I'm just addressing everyone 1, and then recruiters. Also, if you look at this as well, the mobile variant is slightly different. And Framer allows you to do this because you would see that this is the desktop variant for this. This is the desktop variant. And then when you come here, I created a mobile variant for this and I created a mobile variant for this. So all I had to do was come here and change to mobile on this side. If I, if I change to project 1 here, for example, it's going to be, you know, can you see how, you know, it doesn't really make sense anymore because I'm now using the web or the desktop variants. But if I just come back here and change to Project 1 Mobile, I have that here. And that's how powerful variants are in Framer. So everything that I did here, I just had to create mobile variants for them so that when you're on mobile, you— what you get to see is slightly different. So if I go on the Framer site and I go inspect element, you'd see what the mobile variant actually looks like. So this is what this website looks like in mobile. Here again, I can still tap the same thing and go, you know, if I'm on mobile, and then I can go through the projects and scroll through them, go through everything so that this actually works well with the mobile variant. So the major thing that you need to take away from this is that whenever you're working on your portfolio or designing your own portfolio, Think about how to introduce, you know, strong visual design, good storytelling, and a great personality into your portfolio in some ways or in some form. Most times when a portfolio has strong visual design and good storytelling, it's probably a good portfolio. Or if it has like any of the two, it's probably a good portfolio. But to really get a great portfolio that hooks recruiters and makes them to like look through your portfolio and spend time and then ask you for, you know, to come in for an interview, you need to nail all 3: strong visual design, good storytelling, and a great personality. I'll see you in the next video.