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.

What is another design term synonomous with Visual Importance?
Feedback

Get the full course!

UI Foundations avatar
129
Yours Forever

Build Beautiful UIs

Includes 3 modules (+ access to future modules as they are released):
  • Visual Importance
  • Design Systems
  • Color
  • Space & Size (in progress)
  • Data (in progress)
  • Typography
  • Details
  • Animations
As well as...
  • Access to UI Foundations Kit
© 2021 UI Foundations · All Rights Reserved · logos provided by Clearbit