Lessons
Go back to module homepage

Spacing for visual importance


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.

When you're designing for a certain screen size, it's natural to fit as much as you can into the screen. Don't forget that the page can scroll, and all users are used to it. Whitespace is a tool that can be used intentionally, consider how much nicer this logo looks when it's given space around it, vs. being cramped in a small vertical space:

FeedbackNext Lesson
© 2021 UI Foundations · All Rights Reserved · logos provided by Clearbit