The stupid simple way to learn UI/UX design in exactly 10 minutes transcript

This is the first design I ever made, and it's awful. Eight years later, here's exactly how I'd learned design if I had to start over. Broken down into a 28-day plan that I would actually give myself. Before we get to designing, we need to start by training our design eye, which might sound stupid, but take a look at this. Now, these designs might look totally different to you at first glance, but every single one of them has the same skeleton.

They all break down into the same four zones and the same flow. And once you understand it, you're going to start seeing it everywhere. Those main sections consist of the main text block, the navbar, the stats below, and the image itself. So, let's start with the main text block. Notice how it doesn't dominate the page, and the spacing around it is very intentional. The subtext is only 8 pixels away, while the eyebrow text above is 12 pixels, and the buttons are 32 pixels away.

That creates a grouping where we associate the heading and subtext most closely, then the eyebrow, and finally the buttons below that. And notice the text itself. It's only seven words in the header and 14 below to communicate the message as quick as possible. Next up, the navbar has become a member as its most prominent feature, but otherwise it's pretty small and stays out of your way just like most modern navs. Coming on over to the image.

Having a highquality asset is what makes or breaks most landing pages. You'll notice that the focal point of the image is never obstructed since everything sits above, below, or to the left of it, leaving the center and right wide open for some imagery. Also notice that the background of the image isn't too busy. If we swap it out for an image like this, things get a little more chaotic and the text is harder to read.

And then with this, the text is basically gone on the left. Finally, the stats down below are a great example of using color, not just size, to create some hierarchy. These two font sizes are the same 15 pixels, but the second line, of course, doesn't jump out as much because it only has 55% opacity, blending it into the background a little bit more. >> [music] >> The point of this entire exercise was before you ever even get into Figma, it's important to take a look at all of these tiny design details that often get glossed over.

For yourself, pick any site you like and pull it apart the same way, and you'll start to see the decisions behind the design. And with each of these, the pattern recognition of things like proximity, contrast, consistency, and hierarchy start to become a whole lot easier to see. Now comes time to actually start building. This is where everyone starts. At least that's what I tell myself. But hopefully this should speed things up.

The most common advice is to take an app or a website you like and redesign it. And personally, I think that's pretty bad advice. We instead want to learn how to create good design. And all the best creation comes from stealing. So pick a design you like and don't redesign it. Literally copy it. This is essentially the same exercise that we did with that superpower website, but now you're forced to notice all the little details.

How far apart are the cards? How tall is the nav? And what's the padding on these buttons? Once you do this on a few websites, you should start to see some patterns emerging that there are only a handful of options at any point when it comes to layout. If we start with the hero section, we might start with an image and text pair. Text on the left, image on the right, or image full screen underneath the text. More modern designs sometimes have the text up top and the image below, too.

We can even in rare occurrences put the text below the image as well. So with the text up top, image down below. Then we can focus on the text. This can be centered most commonly. We could left align or we can kick the body and CTA out to the right. Then we focus on the visual. Well, what do we want? We could have the image where the borders are defined. We can go full width with an image that bleeds into the background.

Or we can have a carousel of images. Maybe it even slowly rotates through them. But all of these layout decisions come down to one thing, and that is what is the content trying to do. For example, if you're trying to have a profound statement, you'd center the text, bump up the font size, and you give it a lot of space to breathe. But if you're trying to display a features list, the text is really just there to support the visuals.

But if there are many features that run off the screen, you would want them all to be seen by the user. So, you'd swap this out for a bento grid so nothing is lost as the user scrolls down. And to start identifying those patterns, having highquality curated visuals at your fingertips is super useful, which is exactly what Mobin, the sponsor of today's video, does. You can browse hundreds of thousands of screenshots from websites and apps you might not even know exist and easily export them out to Figma.

And I use this exact flow when I work with clients or create these videos. For example, if you get stuck on a section like features, just search for it and browse through over 3,000 examples to see how designers from top companies are approaching the same problems. If you are interested in checking out Mobin, you can use the very first link down below to get yourself 20% off. Now, let's get back to the video. Now that we have the design down, we need to start thinking like a designer.

And to do so, we need to untangle the two very distinct parts of design, UI and UX. UI is all about adding the flavor to a website. How the same layout can have a dramatically different look and feel. And then there's UX. This is more about the thought process of design. For example, how you would structure something like this onboarding process. Let's start with UI. If we were trying to make this feel very friendly and welcoming, we might add a nice warm background, some very colorful visuals, round out all the corners, and make the buttons large and bubbly.

But if you wanted to make the same site more modern and professional, the corners would be much less rounded. The imagery would change substantially to something with less color and a more premium feel. And maybe we'd add in some noise to the background. The product is technically the same. The layout is basically identical, but we've transformed how the website feels at the same time. This is exactly what I mean when I say flavor.

Being able to take a few words and turn it into a feeling when you land on a website is a very special skill to have. And then on the other side of the spectrum, we have UX, which you might also refer to sometimes as product design. And onboarding might seem like a fairly simple set of steps. So, let's walk through one and actually see. You'll probably start with asking them for their name and email address. Many people end up on this page unintentionally, so we'll have an escape hatch to the login page.

Now, you'll probably want to verify the user's email by sending them a link or a code. As the product designer, you can either block them from finishing the process until they've input the code, or you can give them a gentle reminder and allow them to continue. And neither of those decisions is wrong. Next, we might invite the user to create their workspace and at the bottom ask them what their team size is. This is important because it's going to shape how the next steps of our onboarding function.

From there, we split into two flows. one where the user has identified as being part of a team and the other where the user is identified as an individual. For the team, the next step could be to invite team members whereas the individual would completely bypass this step altogether. Hopefully, this illustrates that there's a lot of design thinking behind just the five screens we went through. And each of these decisions wasn't about the spacing or the typography.

It was rather about the user's journey. So with all that in mind, just before we get to the road map, the biggest mistake that you could make as someone learning design right now would be to go and start your portfolio right now. It's exciting to think about, of course, but this is my portfolio from about 3 years ago. Very in-your-face. Huge animations, giant text, everything had to move. Compare that to what I have now, which is a little more refined with some smaller, more tasteful animations.

Neither is wrong, but the point is the huge difference between the two. Just imagine how your taste will start to change over the next one to two months as you start learning. So considering that, here is a rough road map if you're just getting into UIUX and product design. It's 28 days broken into four main stretches. Week one is all about training your eye. Start by building yourself a swipe file, 20 or so hero sections and feature sections that really inspire you, pulled from Mobin, Dribble, Pinterest, or wherever.

Once you've got that, pick a couple and actually annotate them the way we did with superpower, spacing, hierarchy, and what's grouped with what. Then comes actually building the skill. This is where you pick one design you genuinely love from the swipe file and clone the hero section exactly. After that, do the feature section from that same site and then grab a second site with totally different layout and go ahead and clone that too.

And then finally, it's time to think like a designer. First, on the UI side, take one of the layouts you've already built and restyle it twice. Once warm and friendly, kind of like how we did it, and once modern and premium. That's how you develop different flavors of website. Then we'll switch to the UX side. Take that onboarding concept that we broke down earlier and design the two screens where the user journey splits.

The first screen will be the invite your team page for the manager and then the second screen will be the setup page for the solo user. And that's it. After 28 days, you should be well on your way to learning design. And don't worry about your portfolio yet. Just focus on creating the skill. And with that, you should have a very solid plan for how to learn UIU, UUX, and product design in 2026. If you are interested in checking out Mobin, it'll be the very first link down below.

And the link to all of the Figma assets used in this video will be down there, too. Thank you so much for watching, and I will see you in the next one.