More Padding, Please!

The power of white space in product design

Patrick J. Condon
Sep 22, 2017 · 5 min read
Image for post
Image for post

So, why are product designers so picky about padding?

Padding, also known as white space, is the empty space between and around individual elements of a page layout; these elements could be pieces of copy, images, cards, buttons, icons, etc. When used correctly, white space brings visual clarity and balance to a layout.

How does Wayfair tackle white space?

As I mentioned earlier, there is a method to our madness. At Wayfair, our product design team follows a strict padding rule to ensure consistency and easy maintenance across site. This rule is embedded into our design toolkit, a collection of user interface design elements that are the building blocks for all of our site designs. The rule states that the spacing between every design element should be a multiple of 8 pixels; this means that the spacing could be 8, 16, 24, 32, 40 pixels and so on. This rule brings intentionality to our use of white space and creates visual consistency across our site experience.

Image for post
Image for post
“Rule of 8” in action

How can white space improve the user experience?

It helps maintain focus

White space is a tool that helps guide the user experience. We use white space to create focus points for our users drawing their attention to certain elements. The greater the padding around a particular element on a page, the greater the emphasis on that element. In the example below, focus is clearly maintained on the call to action and the primary messaging.

Image for post
Image for post
Aaaah, drink in all that white space
Image for post
Image for post
White space helps focus the user on each interaction area on the PDP

It improves visual organization

In addition to highlighting areas of focus, white space plays a huge role in the visual organization of a page. White space is essential to clarifying relationships and separating sections with different purposes; it is also the driving force behind the Gestalt Principle of Proximity, which states:

Objects or shapes that are close to one another appear to form groups.

Clearly defining different parts of a page increases our user’s confidence in the site experience; forcing our user to think through a confusing layout is something every product designer wants to avoid. The following example showcases Wayfair’s homepage, a page that could easily appear overwhelming if white space was not used properly.

Image for post
Image for post
White space clearly defines the different sections on Wayfair’s homepage

It increases readability

In addition to defining the organization of a page, white space can greatly improve the readability of a page. It’s important to be mindful about the spacing between lines of copy—and even letters—as thoughtful spacing will make it easier for the user to digest. More spacing is generally better, but too much could potentially make lines of copy feel disconnected. It’s all about finding the right balance.

What are common concerns around white space?

Image for post
Image for post
Large areas of white space do NOT need to be filled with content

Conclusion

Every product designer wants to design the best possible user experience; with this in mind, white space is a powerful tool that can help achieve this from a user interface perspective. It should be heavily integrated into the design process.

Wayfair Experience Design

Perspectives from Wayfair's Experience Design Team

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store