Lessons
Go back to module homepage

Introduction to Visual Importance

Incomplete

Every element on the page has a different level of importance to the user of an app or site. A key purpose of design, is making it intuitive to the user which element matters most, and which ones don't.

Perhaps the single most important thing you can do to make an interface look better is to pay attention to what really matters, and emphasize that.

Consider the following example below.

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

In it, a domain search interface is displayed with a single search result in a state that is balanced visually. There are a few buttons, labels, and badges to provide context around the result of the search. Look at the information and consider what you think would be most important to a user looking up a domain.

Would you emphasize price? Draw attention to the sort selector?

Visual importance is about identifying those elements that are most crucial, and employing tactics to bring them out.

Next, look at the interactive example below and drag the slider on the bottom to see what the interface could look like if it were under or over emphasized in different areas. UIs like the ones in this example aren't uncommon (in either direction).

Balanced Visual Importance
Drag the slider to transform the example
Domain Search
1 search result
uihero.io
Pro
$49/yr

There are techniques that can swing both directions in giving, or removing visual importance, we'll go over 5 of them at a high level.

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