Auto-generated transcript What is up guys? I hope you guys are having a fantastic day. Today I want to talk about emphasizing certain elements by de-emphasizing other elements. So for the past couple of videos we've been talking a lot about visual hierarchy, right? Visual hierarchy and how to emphasize the important information and de-emphasize the less important information on our pages. So we've been talking about that for the last couple of videos and today is no different. Today I'm going to talk about this kind of a new concept. When you're trying to design a page based on visual hierarchy you're trying to ask yourself well what's the most important information on this page right and so in this little section that i have over here this is a testimonial section and you can see that it just loops over a bunch of testimonials right you can see what the active testimonial is over here and the trick i'm using here is in order to emphasize the active testimonial right right now this is the one in order to emphasize the testimonial that's active right now, I am de-emphasizing the other testimonials. And I do this by literally just reducing their opacity, kind of like making them blend in with the white background over here, and just reducing their size as well, right? It makes it super easy to tell which testimonial is active right now, right? And that's what I want to talk about today. I want to talk about how to emphasize important information by de-emphasizing the less important information. So, if I just show you what I mean over here, just give me a second. If I go in here and I reduce or rather remove this opacity thing over here, right? If I remove these group active classes, you'll see what I mean. Let me just do this. And there we go Now I save this See now you have no idea which Testimonial is active right now right You have no idea which one is active if I instead add These classes back and what I do is I simply give all of them full opacity Right, I remove that White kind of thing up from over there. You still can't really tell which testimonial is active I mean, you can because like the images get bigger when the testimonial is active. So you can kind of tell which testimonial is active, but it's not really it's not really easy to tell that from just a glance. Right. And that's the problem here. Now, if you look at these images, it's really hard to emphasize them even more. Right. Like if we have a if we have an active testimonial over here, how do we emphasize it even more? right obviously the active testimonial is the most important element in this whole section right so in terms of visual hierarchy we want to emphasize it more right but we can't do that we already increase the image size already right so what more can we do to emphasize it and there's very little you can do and this is where this technique comes in handy all right so in situations like these where you've already emphasized an element as much as you can, you want to emphasize it even more, then you should try to de-emphasize the other elements around it, right? And by doing that you can kind of relatively increase the emphasis on this one element. So I'll I'll add the opacity back and you'll see what I mean. There we go, save this. And this is what I mean basically In order to emphasize the active testimonial even more we basically de all of the other inactive testimonials to the point where they barely visible in a sense right? Now this technique is best used when your elements are already heavily emphasized. So think something like large images like these, large text, bold text, and stuff like that, right? Elements that are already heavily emphasized, right? When you want to emphasize them even more, then you would try using this technique and just de-emphasize all of the inactive elements and emphasize only the active or the important elements, right? And this technique is especially useful when you have a list of information or a series of elements where only one or two elements can be active at a time, right? So something like this testimonial section, this is a really great example of this technique and what I'm trying to show here. We can only have one testimonial active at a single time, right? and so this technique works really great in situations like these where you only have one element to emphasize at a certain time and you can just increase its emphasis by simply decreasing the emphasis on all of the other elements and this is just one more little neat visual hierarchy trick that you can use to design better pages and have a better sense of visual hierarchy and on a side note i know we've been talking about visual hierarchy a lot for the past couple of videos but that should just show you that how important visual hierarchy really is right like if i'm spending so many videos talking about this one concept it it's probably very important right so pay attention make sure you have a good sense of visual hierarchy on your page and this is just another trick that you can use that will help you to design better pages in terms of visual hierarchy again if i simply um didn really do anything to the opacity and just increase the that still emphasizing the active element but it not de the inactive elements And so it becomes just a little bit difficult to tell which testimonial is active right now, because the size increase isn't all that much, right? So it's still difficult to tell which element is currently active. That's why, and since we can't emphasize the active testimonial any further, right? I mean, what am I supposed to do here right i've already increased the image size i can't do much more to the active testimonial right and that is why i want to decrease the emphasis on all of the inactive elements whenever you have whenever you have a situation where you have a bunch of elements and you want to emphasize one element and you can't really emphasize it anymore because you've already emphasized it a lot you've increased its size you've increased the font weight you've you've done all these other things to emphasize it but it's still not enough in those situations the best thing you can do is just de-emphasize the other elements around it right de-emphasize the related elements and only emphasize the active element if you do that then you can kind of like give the illusion of emphasizing the active element without actually emphasizing it even more right like over here i'm not really doing much to the active element i'm just increasing the image size and that's it the only reason you can tell the active testimonial here so easily is because I'm de-emphasizing all of the other elements around it right so go ahead and try this out open up any design that you've got where you have a list of information a series of elements and just apply this technique over there try to de-emphasize the inactive elements in the series and emphasize the active element and just see how you can apply this little design trick in all sorts of ways right that's all for this video like, subscribe and if you want to work with me check out my website link in the description. Thank you for watching and bye bye.