UI -

Whitespace

This note is about whitespace in user interfaces. Whitespace is opposite of content. It is the space between elements. Does not attract attention to itself and gives eyes a rest.

Element alignment is more important than whitespace. A lot of whitespace communicates luxury but can also backfire if the elements are not aligned properly.

There are two types of whitespace:

• Macro whitespace: space between separate groups of elements. Faster to scan the page and find a specific group.
• Micro whitespace: space inside elements and groups e.g. space between lines and space around buttons. Makes text easier to read and buttons easier and more inviting to press.

Little whitespace may communicate cheap and efficient but also has cultural differences.

Japanese websites prefer using little whitespace.