How to Design Better Than 99% Of People in 20 Mins

If you want to become a product designer, but don't know where to start, you cannot get a job or an internship, you don't have the money to pay for courses or bootcamps, then I'm going to show you the process that I wish someone taught me when I was starting out. I've worked with companies worth over $160 billion, making over $25,000 a month as a solo designer. And in this video, I'm going to show you 4 steps to become a product designer. Each step has a key action that you can take today to step up your skills. And ultimately make money designing. All right. So the first step, in my opinion, is to learn design by recreating design from other products. And so I would advise anybody to find like those design resources where they can identify, they can find real products, real interfaces is with music. We want to learn design just the way we want to learn music, which is that you learn music by learning from famous songs before creating your own songs. And that's the same thing here. We want to learn from those amazing products that have been improved over time for many years. Through user feedback, through data. So they're doing something right. Their product team is doing something right. And so a great way to learn design from actual product is just to look through those designs. Like, you're going to just scan those designs and you're going to find ones that, like, have interesting patterns, interesting designs that you want to learn about how they've been made, why they've been made this way. If we want to also become strategic designers, why the structure, why this layout, Why those paddings? And basically what we want to do is just copy the design, go over to Figma, and just look at them and analyze them. It's super basic, right? But I think it's an easy way to break down like how it looks like. And so like once that's done, something we could do, for example, is we could remove those, just focus on this. And in this frame, we could be able to dive deeper into the details on like, okay, so they have something here. So this helps the user to go from one page to the other. Then we have the title of the page. So this title is a lot bigger than this one here. So this is like a headline. This is a subheadline. So if I were to make like a text style for each text element, then probably this would be the bigger one. And then I would need to make a second one for this one here. Cool. Okay. So they have a divider. Why do they have a divider? Because they want to probably help people understand that this is kind of like the top section and then below it, this is more like the dashboard experience. Oh, I can see that they have 3. Same size rectangles, which means that probably they use a sort of grid to make their design. So the grid can expand throughout the whole page. And that's the process basically we want to take with design and breaking down the designs and analyzing them step by step, design after design. We're going to start seeing patterns, seeing how they make dashboards, how they make sidebars, how they make navigation. And throughout a lot of different products, not just one product specifically, but by analyzing and reviewing a lot of the different products. And I'm talking hundreds of products, not just a dozen, because we want to become really good designers, not just, you know. And so that just comes from volume, a lot of volume. And 2 things are going to come out of it. The first one is patterns. We're going to see patterns. We're going to know how certain design elements are made, how design layouts and structures are usually made. Basically, we're going to be able to do more and better designs for us, for projects, for clients. And designing fast and well has a price. And the second thing that comes out of it is being opinionated. More and more as a designer, I've realized that being opinionated, which means basically that when you design something, you want to have some character in your designs. You don't want just the design to morph into anything and be everything. You want to have a special, like, style to it. And that style, you're going to be able to develop it and grow it by reproducing a lot of designs. But opinionated can also be about UX. It's like, I believe that this is a better experience because I've reviewed so many designs. I've redesigned so many screens that I know that usually this feature, this experience, this design looks better and feels better for the user on this type of project. The action you can take regarding that is just to find resources like Mobbin, for example. There's also Curated.Design, which is really good for websites more specifically, but through websites you can identify products and then you can discover new products. And you also have another one, which is startups.gallery, which I think is also pretty cool for figuring out, like looking at some design like some products and companies. You can visit their websites and then probably not here in this one, but usually you can also have like maybe a, you can create an account for free and try other products. Another thing that you can do is to right-click on a page, inspect, and we're going to click on that little like thing here to inspect the code. And it's going to help us like understand, analyze a website or product, a web product design. And so it's very easy to see like Okay, they have like 3 columns here, then here they have like 24 paddings and 16 paddings. First of all, it's a really helpful tool just for you as a designer because you understand how designs are made, which is pretty much blocks within blocks within blocks. And so that's something you should reproduce as well in your designs when you design. It's not just random stuff floating around, like they should belong into something. It's also very helpful to analyze the code and see if the developers have done a good job reproducing the designs that you or your team have done. And it's just great to learn from top companies and understand how they made their sites, how they make their products, get your hands on some designs and just try to understand how they work, why they're this way, and how you can reproduce them. The second step is about being a strategic designer. It's about understanding the users. And ultimately, product design is not about design. It's about helping users achieve their goals. That is the core fundamental of what we do as designers is to help users go from point A to point B. And so instead of looking at the empty screen, the goal is to think about What is the user trying to achieve here? Another question you can think about when it's like a dashboard, when it's like a specific feature, is what can the user do? Again, it's related to the goal. It's like, what can they do about it? Like if it's a dashboard, it's like, what can they do on the dashboard? Can they create something new? Can they add someone? Can they share it? Can they build something from it? Like there should be a clear mission with whatever screen you're designing. And I think it's especially useful when you think about like flows. So for example, onboarding is like, what can they do in this onboarding overall? Like in the whole onboarding, but also on the specific screen, like what can they do here? Is it signing up? Is it building their first page? Is it inviting their family or their team? So you need to be really proactive and intentional about the features that you design. And I think the last question you need to ask is why? And also in the same way, why should they care? Like why? They can invite their family. Why should they care about that specific feature? Why would they collaborate with the team? What's the point of that? Dig deeper into the meaning of the experience. Why are we here? Why are we using this product? Why do they care about it? Why do they need it? It's very easy to make up goals and features that people could use, but it's a lot harder to dig deeper into the meaning of those features and the meaning into those designs. And so that's why I think if you already start thinking about that right now at your stage, then you're going to become a much better designer over time because you're going to keep having this habit of questioning what you design and figuring out the deeper meaning of the designs and the features that you make. Because sometimes, like, I work on projects where the team doesn't even know why they do stuff or why their product is this way or what should they do next. They don't know. And so we have to figure that out. I have to figure that out. And that's a really essential thing. And courses and bootcamps can be very misleading because they usually give you the ideal situation, the ideal project. It's very clear, all the steps, the timelines, but usually it's very chaotic. It's like one week you're hired to do this and then the next week you kind of figure out something else that the client didn't think about and then suddenly it's like an existential crisis. It's like, should we rethink the whole product experience here? Should we redo this, redo that? And so you need those strong foundations. Everybody's going to rely on you and on that to build better products in a pretty short timeline as well, usually. And so like here, for example, like onboarding for this product, we want to think about the goal that the user goes through. How can we simplify the process so that they get the most out of it? As fast as possible. And so that's going to pretty much mean that we have to prioritize some features, some flows, some experiences before others. But that also means that we sometimes have to remove stuff. We have to remove elements. Here, for example, it's just this one form. There's no navigation, there is no skip, there is nothing. It's just you fill out the form because this is what we need to get you started. And you want to make it as easy and as simple as possible to do it. Why did they auto-select the individual card instead of leaving it up to people. Because this way they thought that, okay, most people are individuals. So it's very easy then to just show individual and get the people started instead of having that first like hesitation of, wait, should I pick individual or should I pick business? You're already building momentum. It's like the first step is already done. The account type is selected. And so the key action for this step, I want you to find a screen that is cluttered and I want you to understand why it feels messy, why it feels too much like If I look at this screen, I'm like, well, I think that, for example, there are too many elements too close to each other. So maybe if we give them space, it's going to help with that. Or maybe if we change the layout, it's going to help with that. And you see, like, you start building like this hypothesis around what you think isn't right. And that's going to, first of all, give you like, again, a really strong process with your design. But that's also just going to help you become a more strategic and proactive designer. You can analyze designs and you can kind of create those like hypotheses around why the product is not good. And the is just to make it better, make it clearer. Use those principles that you've just created, like a design should be clean, it should be easy to digest, the information should not be truncated as much. All of those principles that you just created, you're going to use them and apply them to that design and make it your own. That's already like a design you can showcase to clients, to, to job interviews, anything. Quick break to show you a tool called Elementor that can seriously speed up your workflow and even help you make more money as a designer. If you haven't heard of it, Elementor is a drag-and-drop website builder plugin for WordPress, which helps you create websites without having to write a single line of code. Designing a website from scratch, as we all know, can take a ton of time, especially when you're just starting from a client call or have some rough ideas. That's where Elementor's AI Site Planner comes in. It's a completely free tool that can generate full sitemaps and wireframes from just a short description, so you never have to start from a blank page ever again. And it gets even crazier. If you use Google Meet during your discovery calls, it can take notes from the meeting and automatically turn them into wireframes. That's just magic. Now, once you've got that initial structure, here's where the Elementor plugin comes in. It's the main tool that brings wireframes to life. Basically, you can take what the AI site planner created and fully customize the layout, visuals, and content all in one place without having to switch platforms. It's quick, it's visual, and it gives you full control over what you design. The Elementor AI Site Planner is completely free, but to get the best compatibility and features, especially when you want to combine the AI Site Planner with Elementor plugin, Elementor recommends you start with the Essential plan at just $4.99 a month if you're building solo. And if you're managing multiple client projects, they have an Agency plan at $33.25 per month that supports up to 1,000 sites. And here is how you can actually make money from it. With over 40% of the web running on WordPress, And most businesses not wanting to manage their sites themselves, let's be honest. Knowing how to use Elementor with WordPress gives you the opportunity to offer ongoing support and site maintenance, turning one-off projects into recurring revenue. Check out the link in the description if you want to give it a try. You have a 30-day money-back guarantee, and it could really help you streamline your design process. More features are coming soon, like exportable assets, AI-powered global styles, and even Zoom integration for the AI note-taker. So definitely keep an eye on those. Thanks again to Elementor for sponsoring this video. And the 3rd step is to avoid the UI trap. The UI trap is pretty much what I told you about with Dribbble, is that you absolutely want to have like that super aesthetic, clean, beautiful design with a lot of like drop shadows, gradients, realistic features, and all of that. But it's actually not a good idea, especially if you're starting out and you don't really know the right way to design. For example, here— and I'm not really, you know, like I'm not blaming anybody here, I'm not bashing on designers and Like everybody has to make their bread, and I'm not really against them. I'm just showing you like it's probably not the first thing you should try to design because here it looks really amazing and beautiful. But what does it really mean in terms of experience? Like what's the edge case on that? What's the flow on that? How other features are going to interact with that design? How is it even possible to load a design like that on the web without having most of the computers crash? I know it's boring to think about that, but the reality is that you want to become a professional. You want to become a Product designers that people pay a lot of money to work with, and you should not use those cool-looking designs to learn from. Again, in my opinion, and you can see here, for example, on curated design, there are a lot of designs that look super cool. They look really cool, and there are actual designs that have been made by teams, and they're real. And so I would much rather have you focus on those designs that have been you know like people paid for those designs and actually made them real, coded them most of the time. It's a much better. Source of truth and educator than the ones you can find on Dribbble or on Behance or even on Twitter sometimes. The only case where I think that cool-looking designs would be good to have is when you want to like pitch some ideas, pitch concepts for the future, get people's attention. That's pretty much it. It's the only moment where I feel like it could really make sense to have those, but otherwise I would much rather have you focus on real actual designs. And so actually the key action for this step is a very similar thing, which is that I want you to not jump into the UI, into colors, into textiles. Now the first step should just be to create first blocks. So like you could have this here and you could say, this is the sidebar, right? Really super basic. You don't have to do anything else. And then you can make another one right here. This is the dashboard and this is the header navigation or whatever. And that's like kind of like the V1. And then we're going to refine it. We're going to remove the sidebar and we're going to make blocks instead. So we can make a block here, 60, and we can probably just duplicate it. And then we can make another one here and then 2 at the bottom like that. And then we can add text again and we can say, this is the logo, this is the home, this is the search, and so on. And you try to do that again for sidebar, for the dashboard. You can say, you could say like this, the breadcrumbs go here and then here is The title, the headline. And then here we want a subheadline, a dashboard here. And then we're going to have another headline right here, you know, and that's how you build it step by step. And then you refine again, but you don't, still don't do colors, still don't do like drop shadows, gradients. You just stay in gray or black and just taking the time. You like, the goal is to slow things down. You don't want to just jump into the design, jump into the high fidelity. You want to slow things down so that you understand how everything is built. You want to like the design because of the UX, because of the structure and the layout and the thinking behind it, not because of the aesthetic and how it looks and how it feels. If you like the design because of how it looks like here, then you will like the design how it looks like once everything is added. It's very rough, but that's the goal I'm trying to explain here with this key action. And the last step is we don't just want to design for the sake of designing. We want to design with the goal, the mission in mind. And taking the time to slow things down and to take a step back from designing and just Think about, okay, what am I trying to achieve here? What's the goal? What am I trying to help users achieve on this product? Design the easiest and best way possible to help users take action. That's pretty much what it is. And if we don't know what the actions are, then we cannot really design for it. It's like making a movie without a script. Yeah, there are some improvisations here and there, but 99% of the movie is just already predefined, pre-outlined based on the script. And then the script helps every team. Figure out what their goals are, what they have to do. And that's pretty much what we want to achieve as well as designers. Like we want to figure out the strategy behind the design so that it's a lot easier then to design. Like here, for example, like there's this flow, create a document from Grammarly. What is the goal of the page? It's to create it. You can see it's create the document, right? So like, how does it help the user create a document? Well, first there is this big green button here, new document. And this is the empty state where they have already pre-made a card. To show people our document, to show people what Grammarly is and how they can use it to help them achieve their goals faster and better. And so just right away, you can see that there is a card, there's a score. You're not sure exactly what the score is, but you're going to find out later by just opening probably the document. You can download it, you can search. So already just looking at that, you know, the first few seconds, you understand a couple of things. Then what happens when you click on new document? This is the page that they have. So they show you that you can adjust settings right here. Like there is a little hamburger menu at the top and they have some new AI features that probably can help you do your goals even faster and better. And so they want you to use it as well. There's also probably an upsell with that. Probably they're going to train their AI with that experience too. So there are also benefits for them to do it, but the goal for a user might be, oh cool, I can try to use it to make things better for me. And that's it. And then you just have this empty stage where it's like, you can type, like they give you like the information on what to do. You can upload the document or you can just type or paste. Text here, and now you like see the overall score. So you can again connect back to what you saw here, and like okay, so that's the score. So red is bad, and green is good. And so again, like I didn't design anything. I just looked at the screen. I just looked at the flow, and that really helps me to understand. Okay, so how do I become a strategic designer? Well, I need to figure out the empty state when I want to create a flow. What is the first step? What is the level zero of that experience, of that product? Well, maybe I need to create that first pre-made element. In the design so that I can teach users how it works and what can they expect once they create a new document, what's going to happen. I also want them to have an easy way to create something. Like if it's a dashboard, I want them to have the easy way to create whatever the dashboard is about. I want them to have, to be able to search something. And I want the navigation to be very easy to understand, very easy to access. And then like, okay, what happens when they click new document? Where this is the another empty state. It's like they just created a new document. I want to give them information on ways they can improve. Writing how they can get started with like the AI feature, but I also want them to like just jump right away into writing. And so I want to give them clear information about what they can do on that document to help them. And I also want to help them like understand, okay, where are the settings? Where are the preferences? How do I go back to before? Well, I want probably to be there. And so I want to point that out in the design as well. Before designing a single pixel, I want you to like map out the user experience, figure out what the steps are, what the screens are, understand the user's goals and the key features that are coming with it. This is screen 1, and it is the dashboard, and it is an empty state. That's screen 1. Then screen 2 is again the dashboard, but then the user creates a document. Cool. Okay, so what do I need for that to happen? Well, then I can maybe make something else like features, and then I want a button— create button. Helps create a new document. Like that could be the feature, right? Then I want another feature that's like upload a document. And so that helps add documents from outside the product. It's very ugly and broad, but, but the goal is just to like figure out, okay, what does the flow look like? What do the screens have? What features are important for the users to have? And just doing that before even designing anything is going to really help you define that flow, define those screens that you want to have. Define the states of those screens, and outline the features that are going to be needed to make those screens work or make the flow work. Thank you so much for watching. A big thank you to Elementor again for sponsoring this video. Make sure to check them out. It would mean a lot if you click on the link in the description. Also, YouTube thinks you will like this next video. So, you know, if you haven't watched it already, you could, you know, you could like maybe watch it. That would be pretty nice. Okay, bye.