Lessons
Go back to module homepage

Spacing for visual importance

Incomplete

The elements on the listing card are packed tightly together. A quick and easy way to make any information a bit easier to scan and take in is to give it more breathing room. Whitespace can go further than you'd expect to improving a design.

Spacing
Condensed
Balanced
Spread Out

See what happens when we give the edges of the card more padding, and space out the title from the rest of the text:

Cozy Studio

Wifi · Free parking · Air conditioning

$98 / night

  • Information dense cards make text hard to scan for landmarks.
  • Extra space gives breathing room, it looks better and is easier to glance over.

It looks a little bit lighter to take in, and efforts like this will go a long way when you are rendering 15+ of these cards on a single page. Resist the urge to cram too much into one space, it's okay to let the user scroll and paginate through your data.

Cozy Studio

Wifi · Free parking · Air conditioning

$98 / night

Cozy Studio

Wifi · Free parking · Air conditioning

$98 / night

If you have the room, use it! You'll find that as products and screens grow, it can be tempting to pack in features and buttons closer and closer, resist that urge! Your designs continue to look great by keeping good amounts of space between elements.

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