Improving Your UI/UX Design – Applying White Space

Good UI design is the thoughtful application of whitespace at all scales of an interface, from component to page, micro to macro. When whitespace is used well, the result is an interface that is harmonious, legible, and, above all, effective and easy to use.

1 / Follow the Law of Proximity.

The amount of whitespace between elements in the UI indicate how the elements relate to one another. The Law of Proximity suggests that:

  1. Related elements should be spaced closer together. Conversely, unrelated elements should be spaced further apart.
  2. Elements of the same “type” should be spaced evenly apart.

Follow these basic rules to help users readily organize and perceive logical groupings in your UI.

Image for post
Whitespace works hand in hand with the size, weight, and color of the text to convey the hierarchy of elements in an interface.

2 / Start from a baseline of generous whitespace.

Let your design breathe. A reliable way to improve the usability of an interface is to ensure that there is a generous amount of whitespace between all its elements.

Image for post
The form controls here are spaced too closely together.
Image for post
The form controls here are appropriately spaced apart, and more comfortable on the eye.

There are exceptions, of course (see the last tip below), but for most UIs, having a generous amount of whitespace is usually better than having too little.

3 / Use whitespace to focus attention on particular design elements.

Having less information and fewer elements on the page can help bring clarity and focus, and draw attention to the information and elements that are on the page.

Whitespace can also be an effective way to add emphasis to text. It can be used in combination with — and even as an alternative to — bumping up the text size, or changing the color, case, or weight of the text.

̇

̇

̇

This sentence, surrounded by whitespace, is a case in point.

̣

̣

̣

Making an element bigger or brighter isn’t the only way to draw attention to it. Consider that when everything is bigger and brighter and important, nothing actually is.

4 / Use the same method for measuring space in both design and implementation.

The space between adjacent text elements can be measured in one of two ways.

Between adjacent “bounding boxes”

This method is how most UI rendering engines (eg. the Document Object Model on a webpage) measure space. However, this method is not particularly precise because there is excess space that is “unaccounted” for at the top and bottom of each bounding box.

Image for post
Measuring space between adjacent “bounding boxes”.

Between adjacent cap heights

This method is more precise, but could complicate implementation.

Image for post
Measuring space between adjacent cap heights.

Both methods are reasonable, but have different trade-offs. What is important here is that the same method for measuring space is used in both design and implementation. This is to ensure that the design can be accurately translated into code.

5 / Use a spacing system.

A spacing system specifies the set of possible spacing values to be used in a design. Using a spacing system can help bring about a sense of consistency and harmony to a UI.

Image for post
You only really need a handful of values in a spacing system. Here, four different spacing values are used, namely 12, 16, 32, and 56.

A spacing system is to whitespace what a color palette is to color. Just like a color palette, a spacing system forces you to make UI design decisions from a constrained set of options. With a spacing system in place, you need only consider the handful of spacing values from the system during the UI design process. This makes design iteration faster and more systematic.

6 / Avoid using spacing values that are visually too similar.

When spacing values are mathematically different but visually too similar, the way that users perceive logical groupings in the UI could become ambiguous. Contrast matters. If your intent is for two spacing values to be different, then make it readily obvious that they are in fact different.

Image for post
The space above and below each “actions row” are too similar, and it is unclear which video each action row is supposed to be associated with.
Image for post
Having sufficient space below each “actions row” helps to clarify the relationship between each video and its associated actions.

Consider having a wider “spread” of values in your spacing system, with a visually obvious difference between adjacent spacing values.

Image for post
This is a non-linear spacing system with a progressively larger increment going from one spacing value to the next.

7 / Reduce the line-height (ie. leading) as text size increases.

Increasing the text size while keeping the same proportional line-height will result in there being too much whitespace between each line of text. Relative to the text size, the proportional line-height of headings should generally be less than the line-height of the body copy.

Image for post
The two lines of text are too far apart from one another.
Image for post
When a smaller line-height is used, the two lines of text are perceived as a single visual group.

8 / In an information-dense UI, rely on other techniques besides whitespace to convey how elements in the UI relate to one another.

For example:

  • Adding a subtle fill or border around a group of related elements.
  • Using a line to separate adjacent elements that are closely-packed vertically. Or, using an interpunct character (“·”) to separate adjacent elements that are arranged horizontally.
  • Changing the size, case, weight, or color of the text as a way to associate or differentiate UI elements.
Image for post
Increasing information density through reducing whitespace, reducing the text size, and adding a subtle horizontal line to ensure that adjacent rows are perceived as being visually distinct from each another.

Making an interface more information dense could help to make it more efficient to use. Remember that an interface that is information dense does not necessarily need to feel cluttered or overwhelming.

An effective way to learn about whitespace — and, indeed, UI design in general — is to create a “master copy”: pick one or more screens from any app or website with an interface that you admire, and recreate it in its entirety, from scratch. You will gain an insight into the many small design decisions that were made, discover interesting patterns, and see how the above tips about whitespace actually play out in well-crafted UIs.

There are reasons for why an interface “looks right”. Through experience and practice, you can hone your visual sense and intuition about how to apply whitespace in your designs. Your users will thank you for it.

This post was first posted here.

0 0 vote
Article Rating
Creative Entrepreneurshttps://creattiv.net
My name is Reza Barauntu. I am passionate about entrepreneurship, technology, web design, art, and music. I design and develop experiences that make people's lives simpler. Follow Creative Entrepreneur on Instagram @founders.guides
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments

Sponsor

Discover

Latest

6 Simple Steps To Building A Six-Figure Online Community

A University of Michigan study found that customers spend 19 percent more after joining a company’s online community. That seemed pretty impressive to me, so...

10 Years of Designmodo: Highs, Lows, Lessons and Inspiration

This is a story of Designmodo about turning tough times into valuable lessons. About creating success in what seems like an impossible situation.

CDbaby – Small-Time Musician to Multi-Millionaire Entrepreneur

Can you start a business without knowing anything about the business and still succeed. Derek sivers did it with cdbaby. He learnt everything including programming...

USA Cities Animated | Abduzeedo Design Inspiration

Today I want to share some really cool illustrations but they are not just beautiful, they are also animated. The work was done by Latham...

The Makings of a Great Logo

6 questions to ask yourself when designing your brand Your company's logo is the fundamental foundation to your business branding. It is probably the first...
0 0 vote
Article Rating
0
Would love your thoughts, please comment.x
()
x