Go back to module homepage

Importance visualized


Here's an example you've likely come across on the web, a simple listing on a card, with a possible image at the top:

Cozy Studio

Wifi · Free parking · Air conditioning

$98 / night

It doesn't have too much to it, and has obviously not had much attention put to highlighting any of the data it's displaying.

The thing is, this card doesn't look inherently bad per sé, but it's nothing to write home about. There is relatively little it does to convey additional information with contrast, color, spacing, layout, or size. Everything that is conveyed to the user by this design comes from the text alone.

We can start with one thing and work our way up.

Try switching between the better and worse states in the interactive example below to see how we'll improve the card over each of these 5 measures.

Cozy Studio

Wifi · Free parking · Air conditioning

$98 / night

  • Similar visual importance between title, price, description, and button.
  • Hierarchy of importance that differs between elements, more important = more visual importance.

In this example there are many things that changed, notice that it is not any one thing, but a combination of many things that changed to keep balance in the design and draw focus to different places within it.

From sizes of text, to contrast in fonts and borders, to spacing between elements... the game of balancing visual importance is one that is played with many pieces.

We'll peel back each layer of the changes and break them down until we're at the final state, starting with size.


Get the full course!

UI Foundations avatar
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