UI/UX Design Tips - Emphasize by de-emphasizing

UI/UX Design Tips: Emphasize by de-emphasizing

Written by Kars van Iersel on January 20, 2021

Often with Front End Development, or UI and UX work, you will notice that some important element is just not getting the attention it deserves, but you feel like you cannot adjust the element anymore to emphasize it more.

You try to make fonts bolder or you change color to make it stand out a bit more. Like in the following example, you try giving the vote count a heavier to attract more attention to it. But as you can see, it doesn't add all that much emphasis on the most important features of this component

Wrong example of how to emphasize important content
Wrong example of how to emphasize important content

When you find yourself in this situation, try to de-emphasize the less important elements. You will see that you need to do very little to emphasize the important elements now.

A clear example of how de-emphasizing makes important content stand out
A clear example of how de-emphasizing makes important content stand out

You will see that the important content now draws way more attention to itself. A lot of people focus on emphasizing the important parts, while it is way easier to de-emphasize the less important elements! By doing very few changes, you can achieve a lot.

Now to emphasize a bit more, and add some extra touch to your important elements, try adding a color. Of course, it should be in-line with your brand colors. Try using your accent color to make those important items stand out!

Emphasize even more by incorporating brand colors
Emphasize even more by incorporating brand colors

These types of changes take less than 5 minutes to implement but make your components stand out to your users. Not only will this trick make your website a lot easier to navigate it will also help to make your site look clean.

As you can see from the before and after shots, it adds a lot of readability for your user.

The clear difference between the two
The clear difference between the two

Like what you see? Consider following me on Twitter.