Using White Space to Make Handsome UI

What makes good looking interfaces?

It’s one question that we as designers always ask ourselves every once in awhile. And it’s difficult to give an answer that can cover all the aspects of what makes a UI design look great, because the definition of great UI changes as design standards evolves, trends come and go, and new technology continues to develop.

Nevertheless, some basic principles that never get old, and if I have to choose one as the most significant ingredient for great design out of personal experiences, I will go for the use of spaces.

“Music is not in the notes, but in the silence between.” — Wolfgang Amadeus Mozart

I love Mozart’s interpretation of music. Beautiful musical compositions are not just about notes, without silences and rests intentionally left in between, notes are just a series of constant noises. Interestingly, a good design is not so different from a good piece of music. One could say that good music is a design well done in the arrangement of silences between notes.

As we have been getting better at designing interfaces since the history of the internet, the art of using white spaces has come a long way. From this:

Yahoo home page 17 years ago.

To something like this:

Airbnb home page early 2017.

Well, you can tell the difference.

Back to the day when screens were small and not so wide, most websites exploited white spaces to put as much content on as possible, and that was when we didn't have a lot of contents compared to what we have today. With the amount of data has become so huge and screens have gotten much bigger, shouldn't we utilize the extra spaces to fill as much content as possible?

There're many reasons why interfaces today have so much more white spaces than before due to the continuous development of content strategy, user interactions, visual design, and technology. In this post, I will just discuss the aesthetic aspect of great UI.

White space (aka negative space) distribution is vital to create beautiful and usable interfaces for the following reasons:

1. Balance

Like any other visible elements like texts or photos, space has its weight that can be used to balance the elements and contents. Personally, I believe this is the biggest factor that affects how harmony a layout looks.

How space balance works.

2. Emphasis

Put a painting in a big empty room and everyone comes in will be naturally drawn toward that chair. Similarly, surround your hero line with lots of white spaces to make it standout. highlights their hero line with white spaces.

3. Readability

Right distribution of spaces between text lines can drastically improve the reading experience, for examples, you can take a look at how sets the line height for the paragraph texts.

Different line heights affect reading experience.

4. Hierarchy

White space can act as dividers between groups of component or sections making the interface easier to skim through and digest. Plus, white space helps to smoothen flows and transitions for the eyes.

Blog section on home page

5. Simplicity

After all, interfaces are made for humans to work with machine painlessly. If there's no good reason to occupy a free space, it's best to leave nothing there to simplify the interface. It's simply less work for everyone.

6. Comfort

Spaces give freedom for the eyes to breath and rest. Even in daily life, we often like to hang around or work in places that offer great space rather than sitting in tight and crowded cubicles. You can take Google or Facebook office for examples. It’s not much different when it comes to what displayed on a screen.

In conclusion, great use of white space makes your interfaces look handsome. White space distribution is the backbone skeleton that supports the content which appears on your site. Would you want your design to look clean, organized and well spaced rather than a bunch of graphics and contents squeezed together, it's time to learn to work with white space. And good space distribution is already 60% of a job well done for your upcoming epic design in term of appearance.

Besides, one of the most frequent problems I face when taking designs to development is that you need to collaborate closely with developers on the spacing. As developers don’t focus on spaces as we do, plus that often the measurement in Photoshop or Sketch doesn’t translate well onto the browser, the final UI could look surprisingly far from what you got in Sketch due to wrong spacing. So it’s important to figure out how to work together through this part to ensure your design looks right on screens.

Thanks for reading, I would love to hear your opinions and discuss further with any feedback in the comments.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.