Auto-generated transcript Stop styling buttons based on semantics and start styling them based on visual hierarchy. Now let me explain. I see too many designers who design their buttons and their actions and their whole UI based on semantic styling instead of styling them based on visual hierarchy. And I'll explain what both of those terms mean but first of all I have a small exercise for you to just quickly do. quickly do. I have two designs open on my screen right now. They're both the exact same designs, the exact same UI. The only difference is the difference in color in the buttons, right? So in this first design over here, you can see that I have three different kinds of buttons, right? Green, blue, and red. Now, this design is based on semantic styling. You know that when you're styling your buttons based on semantics, there are certain colors that have certain meanings, right? So for instance, you could use a green button to signify a creation, like creating a new object or something. You can use red to signify a destructive action, like deleting your user profile or deleting some sort of object in your account or something, right? So different colors have different semantic meanings. Blue is for informational kind of stuff. Yellow and orange are often used for warnings and stuff. Red is used for errors or destructive actions. Green is used for success messages and stuff like that. So different colors have their own semantic meanings. And a lot of designers, what they do is they use these semantic meanings to choose their colors for their buttons. But the problem with this approach is that there is no visual hierarchy. And I talked about visual hierarchy in my previous video as well. You should check that out as well. The very previous video that I uploaded, I think it was about labels, basically labels and how we can use them to create a better visual hierarchy on our designs. So we're talking about the same thing over here, right? There is no sense of visual hierarchy in this design right now. every color even though we're using the proper semantic colors there's just no visual hierarchy because every color is given the exact same level of importance in our ui right which is why this design sucks in terms of visual hierarchy because every color is given the exact same level of importance you don't know what the most important action on this page is you don't know what you're supposed to do on this page right if instead i go over to the second design you'll see that this one this one has a lot better visual hierarchy. Why? Because we already know what the primary action is. We know that this preview button is the most prominent, the most primary action on the page, right? We know that the edit and delete buttons are secondary and tertiary actions on this page. So in a design such as this, where we are actually paying attention to the visual hierarchy, the preview button will stand out the most, right? The main thing that I want you to focus on in this design is the proper sense of visual hierarchy that we've established on this page, right? We know that the preview is the most important element, the most important action in this whole component We know that the edit is the next most important action the secondary most important action And we know that the delete is the least important action on this page And as a side note you want to have the delete button be the least important action on the page And why is this? Because you don't want to encourage users to delete things off of your platform, right? You want to encourage them to leave it there. So, in most cases, the delete button should be the least important action on the page. And you can obviously signify that with using this minor kind of styling and just taking attention away from that action and giving it to the creative action like preview or edit or something like that. But the main thing that I want you to look at is the visual hierarchy, alright? This design has a really great visual hierarchy. the other design, this one, where we design buttons based on semantic styling and not visual hierarchy, this one sucks. This one has no visual hierarchy. And that is what I want to talk about today. So when you're trying to, and I actually have this design open over here in my code, so I'll open that right here. So when you're trying to design a UI, you should always think about what the primary action on that UI is, what the secondary action, what the tertiary actions are, and you should then design the UI based on that. You should design the actions, the buttons, the links based on that sense of visual hierarchy that you're establishing, right? Now every app is going to be different, every website is going to be different, your needs are going to be different, the primary actions on your page are going to be different, but the main thing is you just want to think about what those primary actions are and then you want to make them more prominent like the preview button that I do here right so as a kind of like a standard practice I guess the primary buttons are usually really prominent and attention-grabbing big and bold like this one over here like the preview button right here right the secondary buttons are a lot softer than that and And I think we can improve this design right now. Where is it? Yeah, I'm gonna do some live coding during the video. There's the edit button, right. VG Blue 100, okay. Let's try this. That's a bit too much, so let's try this. There we go. And that looks a bit better, right? the main thing is primary buttons are a lot more attention-grabbing, a lot more bigger and bolder, a lot more prominent. Secondary buttons are a lot softer than that. And tertiary buttons, like the third most important actions on the page, they're the softest buttons of all, right? They're almost just like links. Like you see this delete button over here? It looks just like a link, right? And that's the thing. In a design such as this, where we have some really great visual hierarchy over here, our eyes are automatically going to be drawn to the most important action on the page. The most important action on the page right now is the preview button and that's what we're going to be focusing on, right? Then our attention is going to go to the edit button since that's the secondary most important action on the page. And then finally, if we want to delete, then our eyes are going to go over here to the delete button, right? So there's this really great sense of visual hierarchy here that really guides our eyes to the right stuff and keeps it away from the wrong stuff right And I know I sound like a broken record here when I keep talking about visual hierarchy so much so many times but it is really that important Like, if you have a good sense of visual hierarchy, that alone can take a very ugly design to a very top-tier design, right? So, it is very important that you focus on this. Visual hierarchy is probably the most important element in any design, period. because this is the kind of stuff that improves the clarity of your page and guides your users to do the right actions, right? And the best example for visual hierarchy, and I talked about this in the last video as well, but the best example of visual hierarchy is checkout pages on e-commerce stores, right? You've probably bought some stuff online. You've probably done online shopping in the past, right? Have you ever had a problem with finding the payment button on a checkout page? No, right? Because it's the most important action on the page and the company makes sure to emphasize that, right? On any checkout page in any online e-commerce store, I challenge you to find any payment button that isn't prominent, right? You will always be able to find the payment button right there. It will be staring at you in the center of the page because it is always easy to find. Now, on the other hand, the go back button is going to be the hardest to find on any checkout page. Because what is the most important action that they want you to do? Payment, right? So that's going to be the primary action and they are going to make sure that they emphasize that button and make it super easy to find, right? Whereas the go back button or shop later button, the cancel button basically, that's going to be harder to find. It's going to be a lot less style, right? It's going to look a lot more, a lot less important than the payment button. Similar to what we've done over here, right? This preview button is the most important action on the page. You can tell that very easily. This delete button is the least important action on the page, and you can tell that very easily as well, right? So yeah, that's the big thing that I want to talk about. Instead of using semantic meaning colors, use visual hierarchy to design your UIs. and just as a quick clarification, when I say buttons, I mean actions, anything that the user can do on your website, right? Now, most of the time this is buttons, but it can also be links, it can also be something else, right? Anything that the user can do on your website is an action and you want to have a sense of visual hierarchy in your actions. So you want to emphasize the most important actions and you want to de-emphasize, take attention away from the less important actions and that's how you design a good visual hierarchy at least in terms of actions on the page right now semantic colors aren't entirely all that bad the the main thing is you want to always use visual hierarchy kind of styling when you're designing a page or a design which has multiple available actions right like so on this page we have at least three actions on every single one of these items over here in this grid, right? At least three actions per item. So that's a lot of actions. And in cases like these, we should use visual hierarchy kind of styling. But we can use semantic styling as well when the only action on the page is that one action. Now let me show you what I mean over here So I have this code commented over here I uncomment it and I show you what it does I change this color as well just so you know what I mean So let say that our brand color is red, right? In most cases when you're designing the primary button on a page, you want to use your primary color as well, right? Your brand color. So over here we have a save changes button but we're using the color red to signify that. Why are we doing that? Because that's our brand color. Our brand color is red. So when we have a primary action on this whole component, right, in this whole model, let's just say this whole model is our entire design. The primary action on this page is going to be this save changes button. If we want to design the primary button, we are usually going to use our brand color, which in this case is red. Now the problem here, the problem here is that red is usually for destructive actions, right? For deletion, for showing errors, for stuff like that, right? So having a save button with the red color is just confusing for the user, right? Like it just looks weird, right? If this was a delete button, that would make sense. But since this is a save button, red just doesn't make any sense over here, but it's our brand color. So in cases like these, instead of worrying about it or using a completely different color, what you can do is you can just use either black or white because and let me just show you what that looks like over here i'll change this to gray and then there we go now what's going on over here when we use when we use black or white those are basically very neutral colors right and since they're neutral colors they don't really like interfere with all of the other colors on your page and that's really great news for us because we can freely use white or black or any shades of those colors right like gray works as well over here and we can use them in place of our brand colors when our brand colors are interfering with the semantic meaning of the of the action and just confusing our user so in cases like that when your brand color is just going to interfere with semantics and just confuse your user and make the whole ui more confusing and harder to work with. In cases like that, you should just aim to use either black or white or some kind of shade of gray because these are neutral colors. They're not going to clash with your brand colors. They're not going to interfere with the rest of your brand designs. And you can just use these instead of the brand colors when they're interfering with semantics, right? And the result is just a much better, much clearer UI with a much better sense of visual hierarchy. So yeah, that's all I want to talk about today. Basically, just have a good sense of visual hierarchy in all of the actions that you have on your page. And it's just going to make your whole design a lot better. So go ahead and implement this. Maybe open up an old design project that you have and go through the whole design. Check out the visual hierarchy. See if you're doing all of these things correctly. And if you're not, then fix your mistakes and try to improve and so on and so forth, right? And And that's how you're going to become a better designer and all that good stuff. That is all for today. If you learned something then go ahead and like or subscribe. Other than that if you want to work with me or something then my website will be linked below. You can check that out as well. And yeah, that is all. Thank you for watching and bye bye.