This is how you actually create good visual hierarchy

Avoid labels where it makes sense. Now what you're seeing here is just a tip from my design book which I keep talking about all the time you know in my videos. I basically wrote a book on web design and this is one of the tips in that book and we're going to discuss this and go into a bit more detail about this in this video. So yeah avoid labels where it makes sense. Now the thing with labels and I should probably mention this right from the beginning. In forms in HTML forms you always want to use labels, alright? We always want to use labels in forms because of accessibility, because of the user experience. We want to use labels in forms all the time. But when it comes to other things, like for instance, this profile card over here, and let me just zoom in so we can see this more clearly. And no need to read all the text here. This is not really important for this video. I'm going to explain everything. So just look at this profile card. Now, you can already tell that this looks horrible right this looks ugly it's poorly designed it's badly designed and there is only one reason why it's so ugly like we can we can make this a very good design in a very simple way so the only problem in this profile card is a lack of visual hierarchy now you can see that aside from this profile picture here i guess everything else is presented in this kind of label value format right like like name aaron smith job software engineer company google like everything is in this label value format and this is just not good right the problem here is that everything is given equal importance every label every piece of data in this profile card is given equal importance and so we don't know what is important we don't know what we should be focusing on here because everything is just equally important right so we don't know what to focus on if everything is important and nothing is important and so since there is no visual hierarchy in this profile card there's just we just don't know what to look at right and it's such a horrible design because of that now the thing with these labels is we don't actually need to have them over here why because we already have enough context like if i have a text like aaron smith next to a profile picture what do you think that means right it probably means the name of the of the user right And if I have software engineer at Google right below that, right? That probably means that that's his job and the company he works at, right? We don't need to specifically add these labels like name, job, company over here, right? So when we have enough context, we don't need to add labels. And I'll show that to you in the next example down here. You can see I removed all of the labels and just emphasized the important information a bit, created a sense of visual hierarchy and now it looks a lot better right so let me explain the changes i made over here you can see that this new this second version of the profile card looks a lot better the profile picture is obviously the same but the name since let's talk about visual hierarchy since the name of the user is probably the most important part of the profile card right like if you're looking at a list of user profiles probably the most important elements there are going to be the profile picture, the profile picture and the name of the user, right? So we emphasize that. We emphasize that by making it bold and by also increasing the font size here, as you can see. So that's step one of visual hierarchy, right? Then we just remove all of the labels. We just use the context to specify what information this is going to be, right? Like Aaron Smith, we already know this is going to be a name. We can tell that much. software engineer google we can probably tell that this is going to be the job the role and the company that the user works at right we don't need to add rigid labels to explain that much we can we have enough context in this piece of data that we can just infer what the what the correct label is going to be here enjoys x hobbies in his spare time so this is kind of a label because we do have some filler text over here right but it's not a rigid label like hobbies and then the list of hobbies. It's more like just a filler text over here to add some extra context, right? And so you can already tell that this is a much better version of the profile card than the one I have up here. And the only difference, the only difference that I really made, aside from the color, I guess, you don't even need to change the color here. But the only real difference I made here is the visual hierarchy. In the first example, there is no visual hierarchy. Every piece of data has the same level of importance the labels and the values are the exact same right in the second example there is a sense of visual hierarchy we know that the profile picture and the name are the most important elements on this page we know that after the name the job role and the company is probably the most important and then we also have these hobbies down here which are probably the least important elements in this in this component right and to make them easier to scan And we've also made the actual hobbies bold instead of the normal font weight. So they're easier to scan at a glance, right? And that's just a sense of visual hierarchy. We just added a sense of visual hierarchy to this component. And just by doing that, we've made it look so much better. And that's really what I want to talk about today, visual hierarchy. And you can see that just by adding a bit of visual hierarchy to your components, you can make them look so much better, right? And it's not even all that difficult. All you have to do is just first ask yourself what is the most important element on this page, right? And then once you have that just emphasize it in some way you have tools in your design belt like font size font weight color Spacing borders or shadows all these things right elevation all these different design tools that you have Use them to create a sense of visual hierarchy Figure out what is important in your component and then emphasize that or de-emphasize it in some sort of like some sort of design tactic, right? Use color, use font size, use borders, use whatever you have, but emphasize the important information in some way. Create a sense of visual hierarchy on the page like for instance okay this is the most important element this is the second most important element this is the third most important element and so on and so forth right and the best example of this i can tell you is checkout pages you've probably bought some stuff from amazon or ebay or something like that right you've probably used some sort of online store in the past have you ever had a problem with finding the payment button on a checkout page no right because in any checkout page, the pay now button is the most important elements on the page. That's why they emphasize it so much. That's why it's always easy to find, right? Like that's the simplest example of visual hierarchy that I can give you. Go to literally any e-commerce store, any e-commerce store at all, right? Open up the checkout page, add some random item to the cart and open up the checkout page. You will instantly find the payment button. Why? Because it is the most important elements on the page and they make sure to emphasize that so the user can easily find it because it is the most important elements on the page they don't make money without it right and that is the best and simplest and easiest example of visual hierarchy that i can give you you want to emphasize the important stuff and de-emphasize the less important stuff i can tell you for sure any e-commerce store in any e-commerce stores checkout page that you open up right now you're gonna find that the payment button is the easiest to find and the go back button is the hardest to find because that's something they don't want you to do, right? So that's the best example of visual hierarchy that I have for you. Emphasize the most important information. De-emphasize the less important or the less desirable information. Now let's discuss some caveats because no design rule applies to 100% of scenarios, right? No design rule at all is ever going to apply to 100% of scenarios. So let's discuss a couple caveats to this design rule of avoiding labels right first of all there are certain scenarios where some sort of labels or clarifying text is actually important and the best example i have for this is on the bionic website which i will show you right now so bionic is a supplement company and no they did not sponsor my video but it is a supplement company and if i scroll down here i need to find a certain element oh wait yeah something like this so ignore the text up here this is not part of this example you see all of this data down here these statistics here this is kind of like what i want to explain right now and remove this offer i'm not buying anything the actual data here the actual data is something like six milliliters over here 10 plus 24 plus 250k plus this is the actual data right and the labels are down here years of research global members studies published so on and so forth and the icons are just like an extra kind of a label right now what's going on here if we if we completely remove these labels if i remove this years of research text and this icon over here right you have no idea what 10 plus means 10 plus what 10 plus members 10 plus sales 10 plus what right you have no idea what this number means you have no idea what any of these numbers mean without these labels right but at the same time we don't want the labels to take up all of the like importance in the page right they don't we don't want them to be super important super emphasized on the page that data is still the most important elements on this page right so above all else what you want to avoid is the name value format which i had in this um terrible example up here no matter what happens you want to avoid something like this right where all you have is a label and then the value, right? You want to avoid this as much as possible. What they have over here, what Bionic does and how they handle this is they have the data over here, which is the largest and most important element in this whole element over here. The data is the most important piece, which is why they emphasize it so much. They have big, black, bold text over here. It is large text. It's the largest text in this whole element. So we know that the data is the most important element in this page in this in this element over here right now again these these numbers on their own don't mean anything so we do need labels to add some clarifying text to provide some much needed context in this page right and so we have labels over here but we make sure to de-emphasize them you can say that see that they're not they're not the they're not as important as the data here right there are a lot smaller text there are a lot more de-emphasized right but they're still there because we do need them to understand the data icons are the same we have icons here different icons to indicate what exactly this piece of data even means right so icons here are serving the same role as a label right the only difference is that they're also less emphasized than the data So when you want to use labels as clarifying text, right? When the data is not enough to stand on its own, right? Like if I go back over here, you can tell that Aaron Smith is going to be a name. You don't need a label there, right? You have enough context just from the data itself, but here you don have that context All of these pieces of data are just numbers right They don give you any context on their own So you do need labels here The only difference is that here you use labels as clarifying text. You make sure to emphasize the data, which is the visual hierarchy element. You want to emphasize the most important piece of the component. So you emphasize the data here because that is the most important element on the page. And you have the labels here just to provide clarifying text right so the user knows what you're talking about but the data is still the the data is still the most important element on this page that is the lesson i'm trying to pass on to you i'm sure i can find another example as well if you want to really nail this concept down probably on this page yeah see something like this so again you would have no idea what these numbers mean what does 87 percent mean right what does 75 percent mean you have no idea what this means if we don't add these labels down here. But again, the piece of data is still the most important element on this component, right? The data here, the number is the largest element on this component. Just from the font size itself, you can tell that the data is still the most important element on this page, in this section. But since these numbers don't provide any context on their own, we want to use labels as clarifying text here. We want to use icons here. Like you can see this icon here is kind of like signifying physical recovery. This label over here is regarding sleep quality. So we have a sleep kind of icon. We have a moon icon here to signify sleep, nighttime, etc. This is about energy levels. So we have an energy lightning icon over here. So we use labels and icons to provide some clarifying text to give some context so the user knows what this piece of data even means. But the data is still the most important element on this page right if I if I instead of this visual hierarchy component if instead of this all I had was the label value format over here right if all I had was something like this energy levels 75% physical recovery 87% sleep quality 95% if I had a label value format like that like something like this it would look horrible right it would look completely horrible even if you added the icons, even if you did all the other stuff, if you didn't have the sense of visual hierarchy, if you didn't emphasize the data and de-emphasize the labels, it would look horrible. And that is what I'm trying to pass on to you. Now, this is how you handle labels as clarifying text, right? We already talked about how you can completely eliminate labels when there is enough context in the data itself. Now, we also talked about how we can use labels as clarifying text When the data doesn't provide enough context to stand on its own right now, let's discuss the final caveat So what happens if you're on some information dense page, right? Like if a really if you're in our on a really information dense page Where there's just ton of information and the labels are actually more important and the data itself so on pages like Let's see. What if I show you? you so let me show you this website GSM arena and this is just a website that gives you reviews and specifications on different mobile phones right now if I just open up some random phone over here any of these will work yeah galaxy s25 let's look at this so look at all of the phone specifications over here you can you can tell that this is a very information dense page and in pages like these the labels are actually a lot more emphasized than the data itself you can see that the labels over here they're uppercase they're large text really large text and they're red they're different color as well even here the sub labels you can see that they're a different color they're bolded and the actual data here you can tell that this is just you know regular text there's no styling on it there's nothing on it it's de-emphasized completely so you can tell that on this page the data is the most important element in this entire page right and that's basically what's going on here now on information dense pages like these the labels are the most important elements on the page not the data and why is this because this is because users are looking for the labels not the values right so if you're for instance trying to find a new phone and you want to figure out if if this phone has a good camera or not you're going to be looking for the word camera, right? You're going to be looking for the labels. You're not going to be looking for something like this, like you're not going to be looking at all of this weird text, right? You're going to be scanning the page, quickly glancing at each label, trying to find the label camera so you can figure out what kind of a camera this phone has, right? If you're looking for something like battery, right? You want to find out how long this can last on a single charge or something. You're going to be scanning the page for the word battery. You're not going to be looking at looking for all of these weird words like ally ion wired wireless you're not going to be looking for these weird words you don't know what these mean right you're looking for the word battery so on the information dense pages like these these pages that are just full of information where you know that the user is going to be scanning for labels not the values on pages like these it makes sense to emphasize the labels not the values so on in all of the previous examples we've seen that we are emphasizing the data not the labels right we're emphasizing the data over here on bionic not the labels but in information dense pages like these we want to emphasize the labels not the values get it and you can see that this website does that very well you can see that the actual labels are a lot more emphasized than the than the values the values are completely just regular text no styling nothing the labels are uppercase read a different color and so on and so forth right so you can tell that the labels are a lot more emphasized in this page because that is what we're going to be scanning for on this page so you really you just have to ask yourself if you're if you're building a page where you know that the labels are going to be the most important elements then you should emphasize those right and if you think that the data is going to be the most important element then you should emphasize the data no matter which one you pick the the important thing is to just have a sense of visual hierarchy right that is the key thing that i keep emphasizing in this video so just to recap everything because yeah the video is complete guys but just to recap everything everything that we've discussed up to this point if you have let's say if you have an information dense page right full of information you know that the labels are going to be more important than the than the values you know that your users are going to be looking for the labels scanning the page for a specific label not exactly the values. In cases like that, you can just copy this design from GSM or not the exact design, but the design philosophy basically. You can just emphasize the labels more because you know that your users are going to be looking for those a lot more than the values or the data itself, right? So this applies to information dense pages. Now if your page isn't information dense, then the next question you should ask yourself is whether the data that you're trying to present has enough context to stand on its own, right? So if it has enough context to stand on its own, then we can go and use this kind of design philosophy, right? We can remove the labels entirely and just emphasize the data. We can put the most important data up here and then so on and so forth, right? Creating a sense of visual hierarchy and also just removing the labels. Now this only applies if the data that you're trying to present has enough context to stand on its own because if it doesn't, then you're gonna have to use the bionic style which we'll look at next but if the data has enough context to stand on its own like again aaron smith is a name software engineer at google is the job and the workplace that this user works at we can tell all of these things just from the looking at the data itself the data provides enough context to stand on its own so we don't need to add any labels or even clarifying text over here right so this is the design philosophy that you can follow if you have data that has enough context, right? But if it doesn't have enough context, then you should try to use this bionic philosophy, right? Design philosophy. You should emphasize the data as that's going to be the most important element. And then you should add some sort of labels or clarifying text over here. You can add icons. You can have labels over here, but you need to de-emphasize them so they don't take attention away from the data itself, right? This is the visual hierarchy component that I keep talking about. You want to emphasize the data. You want to add labels as clarifying text just so the data has enough context to feel complete, right? And obviously, you can add icons. You can do all of these other things as well. But that is the important element. You want to have a sense of visual hierarchy and you want to emphasize the data or the labels depending on what kind of page you're trying to design. Above all else, just always make sure that you have some sense of a visual hierarchy, right? Because the main problem with designs like these, where all you have is a label and value, is that there's no visual hierarchy. Every piece of data has the same level of importance, right? So there is no visual hierarchy. It's just equally important, right? That is what you're trying to avoid. So yeah, depending on what kind of page you're trying to design, you can follow any of these design philosophies. just have a good sense of visual hierarchy and your pages will look so much better than everyone else it is as simple as that anyway that is all for today i'm going to stop the recording over here if this video was helpful to you or if you liked or enjoyed watching it then consider liking it subscribing as well this is a very small channel i'm trying to build this up and grow this as fast as I can also trying to become consistent with my YouTube uploads and everything so yeah if you enjoy this kind of content then feel free to subscribe because we're only going to go up from over here and yeah if you want to find this book that I keep mentioning this is the design book that I wrote and if if you want to improve your design skills then consider checking this out as well because it is really really useful I'll have a link to this in the description or you can just go over to my website and find it there as well. And yeah, it's full of information and you can just read it and apply this and just get a ton of value from this, right? It'll improve your design skills a lot. And a lot of the videos that I make on this channel is just me adapting these tips that I wrote into some sort of a video format, right? So yeah, if you want to get this as well, it's completely free by the way, just go over to my website or click the link in the description. I'm sure I'll have it somewhere in the description as well. But yeah, that is all. Thank you for watching. Like, subscribe. And if you want to work with me or something, then check out my website. Again, the link will be in the description. And that is all. Thank you for watching. And I'll see you in the next one.