Why is whitespace so important?
Increases legibility
The between paragraphs and lines of text (“micro” whitespace) is important because it improves the user's ability to read what is there. If the text is too tight, it will look cluttered and therefore it will be more difficult to read.
Defines relationship between UI elements
Related elements should be spaced closer together, while unrelated elements should be spaced further apart. Additionally, elements of the same type should be spaced evenly apart. This is called the Law of Proximity.
Helps define visual hierarchy
Proper use of whitespace can help draw attention to the most important features in your UI. These features will typically be given more space around them (“macro” whitespace), which turns them into a focal point for the user. More secondary features are usually given less space around the outside and placed off to the edges of the screen out of the way.
Did you know?
Whitespace is sadly one of the most refuted UI/UX guidelines by customers and even developers. Here are some things to keep in mind if you find yourself usurping a designer's decisions about whitespace:
- Whitespace is not wasted space! Think of it as a UI element used to enhance the other adjacent elements rather than unused screen real estate.
- Too much whitespace is just as bad as too little, as it could cause readability or scannability issues.
- You may need to rethink your approach if you need to decrease whitespace in order to cram more into the UI. Doing this means you are likely not following any number of UI/UX best practices.