4 Ways To Get Ahead Of 99% Designers [Full Process]

I've designed for companies worth over $160 billion, and the thing that separates the best from the rest is nailing down the basics so that you can charge more and get more design projects. First, I'm going to dive into the fundamentals that any designer can do today to increase their odds of getting more design projects. Then I'm going to break down the process that I use for my own design projects so that you can do it too and make more money as a designer. All right, so to start, I want to talk about some fundamentals for designers that I think are super important to have. The first one would be to just show up on time. What I mean by that is we want to arrive on time. Not if the call is at 4 PM, we don't want to arrive at 4 or 2, 4:08. We arrive at 4 PM. And I think that's super important and mostly overlooked by a lot of designers. Maybe not on the first call, but once they reach that comfort zone, once they get used to like, you know, working with someone, with a client, as an employee, they can start being, you know, arriving a bit later. I feel like that's not really professional. And it's not so much about the feeling of being professional, it's about being predictable in how How much can someone trust you to up and be there when it matters? And it's more like this like compounding effect, and that's why I talk about being predictable because being predictable is know what will happen. That's pretty much what predictable is. You know what's going to happen. If someone always arrives on time, you can predict that today this designer is going to arrive on time. If you know that the designer always delivers before the deadline, you know that next deadline you're going to get the designs. And that's what being predictable means. And that's why I think showing up on time is related to being predictable because it's kind of the same thing where you. Stay consistent, and we're going to talk about that a bit later, but you— people know what to expect. It's like you work from this time to this time. I know that you're going to work because you told me that you're going to do it. And so far, every time it happened, and you want to build those habits, you want to build this comfort, this safety that you provide to teams, to companies. I think it's a really important thing that a lot of people overlook. The other thing that I think is super important is to prepare 5 to 10 minutes before a call or meeting. It can be pretty much anything. It's just being prepared. But you just kind of knowing what's going to happen on the call, whether it's going to be the story you tell when you present your new designs. You know, just like in TV shows where they say, here's what happened in the last episode. It's kind of like the same thing where you tell the big picture, summarize what happened before in the next call and the next meeting that happened and where you decided to do those things for this call or for this meeting. That's what you're going to think about before it happens. You're going to walk people through that story. What are you going to tell them? How are you going to present your new designs? Is it going to be about the potential objections that they have. Why did you make it this way? Why is this button that way? What happens if you do that? And there are a lot of different scenarios. And as a designer, especially when you become more senior, people expect you to know a lot about the product, a lot about the designs and those like a step deeper experiences. And so if you're able to think about and prepare for those objections, even if it's just a little bit, like that's what I'm saying, 5 to 15 minutes is just thinking about them. The fact that you've thought about them, you're not just going to stare at someone and just say, I don't know what happens there. You cannot be like, Well, I have some ideas. I'm not sure fully, but I kind of have some path that I want to explore regarding those potential experiences. Another thing that is also important for the call is to know the goals or objectives of that call. What— why are we here? What's the goal of the call? Do you need more clarification on some designs, on some flows? Do you need some feedback on some designs? Are you not sure what the next steps are? Like all of that you need to think about and prepare before the call so that when the call happens, you know what questions to ask and you know what you're looking for to people talking to you and what they should tell you about. Cool. The next one is to communicate clearly and often. That's probably a big difficult thing for designers because we usually like to stay in our bubble. We usually like to not communicate too much or think that people are going to magically guess what we think about or what we did. But I think communication is a super important step to take, no matter if it's face-to-face, if it's remote, like being able to clearly communicate your ideas, your opinion, your thought process regularly, being able to indicate to designers, to managers, to clients where some designs are, what you need from them, why you make certain decisions regarding your designs and the flows or experiences, and just being able to articulate ideas simply. It's all about simplifying things because people might not know certain principles you follow, rules you have with designs, or even lingo. If I hire a designer, I don't care so much about how much they know. I just care about can they deliver on the designs that I want them to do? That's why I think it's super important to be able to know how to articulate your ideas clearly and often. Frequent updates. I think another major thing that a lot of clients, a lot of teams want is that, can this person be reliable? I think ultimately it's just trust and reliability. Can I trust this person? Is this designer reliable? It's back to being predictable, showing up on time. If you communicate often and clearly, you multiply the wins, you multiply the signals that let people believe in you and trust you and give you more freedom in your designs. But also more things to handle, which I think obviously comes with a raise in your prices because the more you handle, the more you manage, the more you matter in the project. And so all of these kind of work in pair. And if you're able to do those things, you're going to really thrive as a designer. So far I have not talked about any design tips, any design processes which I'm going to cover, but all of this can be done like at your level, no matter where you are in the design experience spectrum. This is all the things that you can do right now to just improve who you are and your skills and your toolkit. Next one is to organize your designs. Okay, finally we talk about design a little bit. Organizing your designs is about Figma files and pages, like how you name them. Do you put a thumbnail to make it easy for anyone to know what it is about? Do you make your pages easy to digest, easy to go through? Do you make your flows, explorations easy to scan, easy to know what this is about? Maybe even have annotations for engineers, for other designers to get people updated. You could have comments tags to tag people specifically, or comments on clarifications or feedback you want on specific screens, specific elements. All of this is related to communication, but mostly about how you present and organize your designs, which have a big impact on the way your team sees you as a designer. They're not in your head, they're not in your process. They have to know where can I get the latest designs, where can I see what the flow is about without having to search for 10,000 years. Organization is such an important element and it's an easy win for a lot of designers no matter Your seniority or experience. It's something that you can do right now. And the last one, the final tip for the fundamentals, to be consistent. And I think being consistent is everything we talked about because consistency is like this compounding effect or factor. If you show up on time all the time, if you're predictable, people know that they can trust you. They can give you more projects. They can count on you when it matters. When there is pressure, when there are tough deadlines, they know that you're going to be there and you're going to show up. They know that you're going to ask questions, but you're going to communicate well. Organize your design so that even if they bring in other other designers. If they want to work on a deck or presentation, they can bring illustrators or graphic designers. They're going to know where the designs are. It's all of those combined that makes you consistent. But it's also what we're going to talk about, the deep dive, the core of what a designer is or how to become a better designer. It's just being consistent day in and day out. And that's what's going to get you booked as a designer more and more. You need, like, when you work with clients, clients don't know all that stuff about you, right? That's why they are unsure. That's why they need social proof. That's why they need sometimes like design tests, or they need to like see those testimonials, see the past projects, because they want to know, can I trust this person? Is this person reliable, consistent, predictable? Are they professional, or are they going to ghost me as soon as something difficult happens? And so you need those things. That's why the first project is such an important one, is because the first project sets the foundation. And if you can put those foundations correctly at the beginning, they're going to just come back for you. They're going to book you for more projects. They're going to recommend you to other people they know. That also means that you can increase your price because you have all of those things that people desperately need. Now it's about design. I have a couple of points that I want to talk about here that I think can make your designs better, but can also help you as a designer to design faster and to be consistent no matter the day you're going to shop and make good designs. And the first one is to use multiples of 4. Multiples of 4 is basically just 12 pixels, 16, 20, 24, 28, 32, et cetera. This is a multiple of 4, and you can use that for text, for spacing, for buttons, for example. But you can use this for a lot of different things. And I think it's not so much about how many, it's like how much time it's going to save you and how much more consistent you're going to get with designs. And I think once you get that in your head and you get that habit of multiples of 4, you know the numbers almost perfectly, magically. This is where it's going to really make you stand out and design so much faster than a lot of people. Like text, For example, this is take we just talked about. It could also be spacing. So for example, can make a square that's like 280. I'm going to use the ratio and I'm going to space it again, multiple of 4. It could be 24. And then I'm going to Shift and Option, drag them so they don't really move when you move your mouse. And again, 24. The cards could be multiples of 4. I can change them easily as well. And you can see it's still multiple of 4, but it's still too far. So maybe I'm going to do 16 instead because that's a multiple of 4. I could also do corner radius as a multiple of 4. I could do 8 maybe, or maybe this is too much. And you see that just, you know the number, so you can just adapt based on your feeling. I always tell people, just design a lot more volume because you need to recognize what good design looks like. As soon as you see a design, you know if it's a good design or a bad design just because you've done so much of it. And so multiple of 4 is already going to, no matter what your experience is, no matter your level, just using multiples of 4 is going to make your designs already much better. And you can also do that for buttons. So for example, I'm going to use 24. For line height, I could use percentage. I like to have multiples of 4 for the height because it's going to impact usually the buttons and spacings, but I could also do just 28. And then I'm going to press Shift+A to create a frame that's also applied as an auto layout, which we'll talk about shortly after. And this would be a multiple of 4, 48 would be nice. It could also be 52 if we want to. I'm going to apply a fill so that we can see what we're working with. What I usually like to do is the double or Maybe a little bit less than a double. Here it's 12, right, of spacing on top and bottom. So what I want to do on the paddings for left and right is a double would be 24, but that's usually too much. So I want to do 20 instead. That's usually a good ratio. And that's usually what I do. Sometimes it's going to change. Sometimes you're going to have 10 pixels or 14. It happens and I think that's fine. You can kind of break the rules once you know the rule. And that's where it depends really on cases, like like per-case scenario where maybe some designs might need those. But if you stick to the principles of 4, you are going to already like go through a lot and improve a lot your designs. The next thing is constraints. So constraint is usually used for headers, footers, floating elements, navigation, these kind of things. So like here, for example, this is a frame. One example of constraint would be that I have a navigation or sidebar right here. If I change my frame, it changes the sizes, it doesn't do anything. Like it still stays the same. So it looks good on the static screen, but once you start doing responsive designs, once you start doing more high-quality designs, or you want designers to also play around with the designs that you've done, it's going to be problematic. So what we want to do is go to constraints right here, and we want to change the constraint on the vertical to be top plus bottom. And this way, what it's going to do is going to— it doesn't really matter on the horizontal, but vertical is going to just adapt to it. You can see, like, no matter what I have, it's going to stay the same. And we anchor it on the left so that, again, the goal is that on the horizontal, it's not going to move. Because if we, for example, put it in the center, it's going to change. So it's super important to know about that. Same thing for a header. Like I'm going to put one here. I'm just going to change the opacity so we know like the difference, we can see it a bit more. And here I'm going to change the constraint for the one to be left and right. And what's really cool about this is they work together. You don't have to stick it to the edges of the screen to make it work. It can just be like right here. And then again, I can just change that. Oh, I forgot to change this one again back to the left. And then when we move that, everything changes and matches perfectly. So it's really good when you want to scaled up screen. So that's pretty much what constraints are about. Then I want to talk about auto layouts. Auto layouts, everything is an auto layout pretty much. That's just how it works. Like a button, let's make a simple button here. Again, just the text selected, Shift+A to make an auto layout. Then I'm going to just change that to be 20, this to be 24, make sure the resizing of the text is hug. And I'm going to check the spacing, so 20. Oh wait, I need to change multiple of 4. That works, so that's perfect. Again, we double it, 8 on the vertical side, 16 on the horizontal, but then it's a little too much usually, so we size it down multiple of 4 and usually it's good. If I want to add an icon by like instance for example, and I want to put it there, to select something inside of a frame inside of a frame, because that's the problem with auto layouts when you have a lot of them, it's hard to click so many times. You can just press Command select and you can just easily select anything, which is so cool. And then just change that. Usually I like to match the text style or how thick it is, and I want to match it with the icon. So this is a little too much, so I'm going to do 1.5 of weight. And then For spacing inside of the auto layout, like right here, I want to do a multiple of four. So eight is nice. I could also break the rule and maybe do six if it looks better. But here it's pretty nice. Again, we could do multiple of four for corner radius if we want to. Like here, I think it looks pretty nice. So that's another layout right here. Then I could do another auto layout inside of it. Like here, I'm going to add a stroke here, and then we want to duplicate that here and have a headline. Again, we're going to do multiple of four, probably forty because it's. It's a headline, so it's a bit bigger. Subheadline, we want it to be maybe 28. So the rule here is kind of like the bigger and more focused it is, the brighter or more visual it is. This is all black, so it's very visible, it's very big. And because it's a bit smaller, it's a subheadline, we want less focus on it. We're going to downgrade the size and also downgrade the color to be less noticeable. Then we're going to auto layout for the text. Select both, Shift+A, and no spacing because it's already well spaced. This should be probably 32. Because it could be. And then what we want to do is select the frame and we can press auto layout or Shift+A. And we're going to add padding, multiple of 4, we're going to 24, 24, and auto here so that it matches with the spacing of the card no matter what the spacing is. It's like putting constraints on all elements outside of the, like on both edges. Yeah. And then we want to align it on the left so that it's a good looking card, like right here. And here, for example, because it's auto layout, it's auto in terms of spacing, we have the freedom to change the height. So maybe we do 280 and then 400. So it looks kind of nice. And again, we could add multiples of 4 for the corner radius if we want to. And that's it. And that's kind of like, again, another layout. So we have another layout here, another layout there, and all of these also form another layout that would be part of a grid like here, which would be spaced again multiples of 4. We could do 24, maybe 3 column, and then we select all and that's another auto layout. For example, all of these are auto layouts. And that moves us to the next point, which is components. I'm going to just briefly talk about components because this could be another video whole video about it, but components is kind of like a clone. You have the source of the clone and then the clone and multiple clones. If this was the source of the clones, then it would kind of like move right away. Like it would impact those 2, right? And so if I were to change this one to be very low, then all of those would also be very low as well. That's what components are about. For example, this would be a button. That's where you kind of change it. Like the core of it is just that. If I design a card and I want to reuse it everywhere, then I just want one card to update all of those cards. I don't want to update every single card. Cards because it's just the same card. But there might be instances where we want to have variants, where I want to have the same card, right? I want the card to be the same, but sometimes I want the card to have 2 buttons instead of 1. So I'm going to select those 2. A little trick also that you can do is, you can see the problem here is that if I do fill, I need to fill the icon as well. So what we want to do is go to selection colors, which is all the colors that you've selected, no matter where they are. Here the problem is that this is a stroke and this is a fill, so it's not going to do the same thing. But when you select Inside and do selection color, then it's going to update the color where the color is pretty much. So like here is going to be a variant. This is going to be one button, for example. This could be two buttons, and these would also be components and variants. So this would be the core button, and then we would have a button with a stroke like here. This would be default. This would probably outline. This could be maybe like it's a bit different because this is on a dark background. This is not on a dark background, so it's going to change, right? But we could have ghost here, which is no outline and no fill. You know all of these. Or variants, and then you can just have— this would be the core, then it's going to impact those, and those are going to impact these. But that's kind of like what components are about. It's just one component being able to drive and impact all the other components. And I think it's really helpful when you are aligned on the design, aligned on the product, and you just want to be consistent. You don't want to explore new things. It's just consistency and also saving time because then you don't need to change, you know, you don't need to update any component. You just update the core component and everything else changes. Then the next one would be colors. Colors is always difficult because you don't really know, like, that was the problem I had when I started out as a designer is like, how do people find the good color palettes? How do they find those smooth color gradients? And an easy way I found to do that, even if it's probably not the most professional way, is just to like make a frame ratio and then maybe 100. We're going to pick a color here. So maybe like a blue like this one. Then we're going to duplicate it. So Option+Shift to keep it aligned, then Shift to select both, then Shift+A, then select one, Command+A. To select all the items inside, then Command+C, Command+V, maybe one more. And what we're going to do now is just reduce the opacity. So 80%, 60%, 40%, and 20%. And that gives us a color palette, which I think is perfect. I think it's a good stage as well, because then you can easily change the colors with this opacity and you don't really need to do anything else. And I think that's super, super cool and super easy to do. But then the problem with that is when you put it on a different surface, like here, for example, you can see the colors, the color is different because obviously the opacity let the background color go through, and that's going to change the color. But what we want to do is stay consistent. So what we need to do now is just select each card, each square, press I to pick the color, and then we'll pick the color for each of them. You might be like, whoa, it's not the same. It's because the opacity is still applied. So we're going to select all again and then press 0. So pretty easy. And now you can just make a button again. Up Shift+A, 44 is fine. Take the spacing 20, so probably 16. Then press I for the background of the button here, this one, we could try this one so it works. Or if you want more contrast, we can just pick white for the background and we could have another button where it's like the background is this very light blue and then this one. Then you've got colors and it's pretty easy to do. And finally, the last thing is screen sizes. I feel like screen sizes is also another subject that's so difficult to figure out as a young designer, but it's actually pretty easy. First of all, the minimum for desktop is 1200 by 800. Some projects you can kind of skip that and probably do 1280 by 832, but it's kind of the same. But this is like the minimum. Your designs need to look good on those screens. And if they do, then they're going to probably look good on the bigger ones. And they don't really look that good when they're on the small screens, but it's just the minimum. And engineers need that because after that limit, you move to tablet. That's kind of like the proof of how good you can be as a designer if your designs can look good on different screen sizes and not just on the perfectly sized screen size. My process, usually what I like to do as a designer when I design new projects is I feel like those screens are pretty small, and so it's very difficult sometimes for me to design new ideas and figure out how to organize the space to make really cool designs. So what I like to do is to use 1920 by 1200, and you can see that gives you so much more space. Because let's say you do like— we're going to do a card. It looks all right, it takes some space, and as soon as you put 3 together, you've got the whole screen taken. But if you take that and put it here, it looks so small. You can see the difference. Like here, almost all of And here it looks super small. And so something that might happen is you're going to try to compensate. You're going to be like, well, it looks so big, so I'm going to increase those sizes to be like 24. But if you do that, this is going to look too big. And I think that's kind of like the pros and cons of using like a widescreen or a bigger screen size is that it gives you more freedom to create stuff, which I think is really good in the beginning when you try to figure out concepts, explore both extremes of the spectrum of creativity versus traditional. And I think that's a really good way to get started on projects. But you know, at some point you still need to make it responsive. Yeah. Need to tell the designers what does the design look like on 1200 pixels? And you're like, well, it looks a little ugly. It's a great way to know if your design looks good because if you designed, if you've made a design here and you put it right there and it looks too big, then it's not good. But if your design is properly spaced and properly designed, then you just have to reduce the width and it looks good and it's responsive. Perfect. And you've done something right. If it looks too big, then probably you need to change the size. So if 24 pixels looks good here, but it looks too big here, then probably you need to reduce it down too. 20 pixels instead because you know the multiples of 4, so you just have to scale down. Knowing the 3 screen sizes is really good and it's going to give you a lot more freedoms. It's going to make you look more professional as a designer to people looking at your screen because they're going to see those explorations and then the presentation on those screens and they're going to be like, wow, that's really cool. I can see the explorations and consistency because the design looks really good on this wide fancy screen, but it's also very accessible when you have a smaller desktop size screen. That's the end of the video. I really hope you liked it. Make sure to leave a like and subscribe. Tell me in the comments below if there is anything else you'd like me to explain or walk you through. Also, YouTube thinks you will like this next video, so if you haven't already watched it, give it a try. Bye. Bye.