Lessons
Go back to module homepage

De-emphasizing elements


There's a reason that trends like minimal design can be so compelling, because it urges a designer to remove distractions. Paradoxically, de-emphasizing and/or removing elements from a layout can actually be one of the best ways to make it look cleaner!

Like I've harped on throughout the section, your design needs balance, and balance goes both ways.

In the following domain search, the search result row has a badge with a strong color, a bolded price, and even a colored status icon. You can't do much more to call attention to the buy button with all the action going on around it, so the best bet is actually not to dial up visual importance, but dial down the importance of elements around it.

Domain search
1 search result
uihero.io
Pro
$49/yr
  • Too many elements of the search command attention.
  • Reducing colors and sizes make the buy button most prominent.

By reducing colors and sizes the buy button naturally becomes more prominent, the interface also looks a lot cleaner as a result!

Look at them side by side to really spell out the difference:

Domain search
1 search result
uihero.io
Pro
$49/yr
Domain search
1 search result
uihero.io
Pro
$49/yr

To make a clean UI, start cleaning up! Removing styles is an unintuitive strategy to great organized designs.

The first instinct of most when they see something meh, is to ask what they can add (and they're not always wrong!). Train your second instinct to be the next best thing: what can you remove?

Lessons learned

  • focus on making the information that is most important to the user the most visually important on screen
  • size, layout, spacing, color, and contrast can all be adjusted to increase or decrease visual importance
  • decreasing visual importance can be just as (if not more) helpful than adding
FeedbackEnd Module
© 2021 UI Foundations · All Rights Reserved · logos provided by Clearbit