Lessons
Go back to module homepage

Importance visualized

Incomplete

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

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

In the example there are many things that changed, notice that 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.

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

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