Lessons
Go back to module homepage

De-emphasizing elements

Incomplete

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

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.

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

Subscribe for more!

This is the first module in the series, subscribe to find out when the next will be released!

Feedback

Get the full course!

UI Foundations avatar
USD$ 24
Yours Forever
Includes 2 modules (+ access to future modules as they are released):
  • Visual Importance
  • Design Systems
  • Colors (in progress)
  • Space & Size (in progress)
  • Data (in progress)
  • Typography
  • Shadows
  • Pro Details
  • Animations