DEV Community

Cover image for UI/UX Design Tips: Emphasize by de-emphasizing
Kars van Iersel
Kars van Iersel

Posted on • Originally published at karsvaniersel.com

UI/UX Design Tips: Emphasize by de-emphasizing

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

If you liked this post let me know in the comments! Always interested in feedback. Also if you want to keep up-to-date on my weekly designs tips, consider following me on twitter.

Top comments (0)