Lessons
Go back to module homepage

Size for visual importance

Incomplete

Size is one of the easiest and most obvious ways to give visual importance. It should not be turned to in every occasion (as we'll learn later), but it's a great start to start conveying what matters and making your design look more polished.

Size
Smaller
Balanced
Larger

Right from the get go, we can choose to make a few elements of the UI more important just by sizing them up, and sizing other elements relative to them down.

Let's bump up the size of the title and price (2 important pieces of info), and shrink the descriptive text just a little. You can see the difference it makes animated in the example below:

Cozy Studio

Wifi · Free parking · Air conditioning

$98 / night

  • Equal sizes make all data seem of equal importance.
  • Largest element will take the most focus.
  • Shrinking secodary elements can expose information without creating too much clutter.

Or check out the difference it makes viewing them side by side:

Cozy Studio

Wifi · Free parking · Air conditioning

$98 / night

Cozy Studio

Wifi · Free parking · Air conditioning

$98 / night

Clearly, the card with adjusted font-sizes emphasizes that the title and price on the listing are the most important elements.

Already, this has helped this design to convey what it needs to, by only focusing on 1 angle of the options in the visual importance pantheon.

Good candidates for greatly increasing size that will still look great are:

  • text, especially headings
  • shapes, like for backgrounds

Worse candidates that can look awkward or strange when sized up too large are:

  • borders
  • shadows
  • icons
  • buttons, to a certain extent
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