Go back to module homepage

Tools for visual importance


Learning to style elements in the right way will help you urge or push the user to the right place in an interface. These are 5 concepts that when used, can make elements standout or take the backseat, consider:

  • Size: how large or small elements are
  • Layout: placement of elements inside a view
  • Spacing: distance between elements
  • Color: rgb, hex, hsl, or other respresentations of digital pigment
  • Contrast: difference between lightness and darkness on near elements

Each of these elements has its own module on UI Foundations, because each has specific applications of how visual importance can be impacted.

Think of each concept like a slider or lever on an audio board that can be adjusted up or down, either increasing or decreasing the importance of an element (instead of volume).


For each slider, adjusting up would increase the visual importance, and adjusting down would decrease it. We'll start with a component that sits somewhere right in the middle on each of these scales, and tweak elements up and down to draw out the information that matters, and give less relevance to the parts that don't.

What is another design term synonomous with Visual Importance?

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