How to design your first UX portfolio (beginner tutorial)
🪄 Start with Framer (30% off annual pro with code ALIENA2): https://framer.link/Aliena2
📚 This is part 1 of my free portfolio course: https://www.youtube.com/playlist?list=PLKId0A0XCIbVuTS2O-XEbRMzRPgIxkd1X
📄 Free UX Portfolio Guide: https://alienacai.gumroad.com/l/uxportfolioguide
🪄 Apply to my portfolio lab: https://forms.gle/u48UCBB3F4bXcQCa8
📄 Free 2026 UX Career Guide: https://alienacai.gumroad.com/l/uxroadmap
📖 My UX Bootcamp (Official Figma Education Partner): https://fasttrackux.com
☕️ Occasional emails on design, career, and life: https://trillionscafe.substack.com/
In this tutorial, I’ll show you how to design the homepage of your first UX design portfolio in Framer. The tricky part is that, at this stage, you may only have a few personal projects from a design course or projects you created on your own. But when you apply for full-time jobs, companies usually want to see real-world experience, teamwork, and business context.
So instead of pretending your personal projects are client work, we’ll use them strategically. Your first portfolio can help you attract your first client projects. Then later, once you have stronger real-world work, you can update your portfolio and use it to apply for full-time UX or product design roles.
I’m teaching this the way I wish I had learned when I was starting out. My own first portfolio was far from perfect, and I showed fewer metrics but still managed to land a client. This tutorial reflects a higher standard, but if it feels like a lot, don’t stress. Also don’t fake anything. If something is estimated, clearly label it as an estimate, and if it’s a fictional project, say that as well. You don’t have to hold yourself to a very high standard right away, this is just meant to give you a clear direction.
Designing a good portfolio takes time, so be patient and have fun with it.If you want me to make a video teaching you how to use your first portfolio to get client projects, comment “client.”
Chapters:
0:00 - How to design your first UX portfolio (with no experience)
0:33 - Wireframe your portfolio home page
2:17 - Choose the right projects for your portfolio
3:31 - Find portfolio inspiration (steal like an artist)
4:05 - Write a hero section that gets clients
6:47 - Write a case study introduction: 0 to 1 app
8:23 - Write a case study introduction: landing page design
9:08 - Write a case study introduction: product feature
9:47 - Write a closing section that converts
11:00 - Create epic visual designs for your portfolio
11:15 - Visual design: color
13:15 - Visual design: text
14:40 - Visual design: emojis
15:05 - Visual design: buttons and pills
16:02 - Visual design: shaders
17:20 - Design thumbnails that stand out
17:45 - Thumbnail method 1: UI screens
19:04 - Thumbnail method 2: GIFs or videos
20:25 - Why feedback makes your design better
21:49 - Make everything pixel perfect
📚 This is part 1 of my free portfolio course: https://www.youtube.com/playlist?list=PLKId0A0XCIbVuTS2O-XEbRMzRPgIxkd1X
📄 Free UX Portfolio Guide: https://alienacai.gumroad.com/l/uxportfolioguide
🪄 Apply to my portfolio lab: https://forms.gle/u48UCBB3F4bXcQCa8
📄 Free 2026 UX Career Guide: https://alienacai.gumroad.com/l/uxroadmap
📖 My UX Bootcamp (Official Figma Education Partner): https://fasttrackux.com
☕️ Occasional emails on design, career, and life: https://trillionscafe.substack.com/
In this tutorial, I’ll show you how to design the homepage of your first UX design portfolio in Framer. The tricky part is that, at this stage, you may only have a few personal projects from a design course or projects you created on your own. But when you apply for full-time jobs, companies usually want to see real-world experience, teamwork, and business context.
So instead of pretending your personal projects are client work, we’ll use them strategically. Your first portfolio can help you attract your first client projects. Then later, once you have stronger real-world work, you can update your portfolio and use it to apply for full-time UX or product design roles.
I’m teaching this the way I wish I had learned when I was starting out. My own first portfolio was far from perfect, and I showed fewer metrics but still managed to land a client. This tutorial reflects a higher standard, but if it feels like a lot, don’t stress. Also don’t fake anything. If something is estimated, clearly label it as an estimate, and if it’s a fictional project, say that as well. You don’t have to hold yourself to a very high standard right away, this is just meant to give you a clear direction.
Designing a good portfolio takes time, so be patient and have fun with it.If you want me to make a video teaching you how to use your first portfolio to get client projects, comment “client.”
Chapters:
0:00 - How to design your first UX portfolio (with no experience)
0:33 - Wireframe your portfolio home page
2:17 - Choose the right projects for your portfolio
3:31 - Find portfolio inspiration (steal like an artist)
4:05 - Write a hero section that gets clients
6:47 - Write a case study introduction: 0 to 1 app
8:23 - Write a case study introduction: landing page design
9:08 - Write a case study introduction: product feature
9:47 - Write a closing section that converts
11:00 - Create epic visual designs for your portfolio
11:15 - Visual design: color
13:15 - Visual design: text
14:40 - Visual design: emojis
15:05 - Visual design: buttons and pills
16:02 - Visual design: shaders
17:20 - Design thumbnails that stand out
17:45 - Thumbnail method 1: UI screens
19:04 - Thumbnail method 2: GIFs or videos
20:25 - Why feedback makes your design better
21:49 - Make everything pixel perfect