The Power Of Whitespace
by Nick Babich
Whitespace (or “negative space”) is an empty space between and around elements of a page. Although many may consider it a waste of valuable screen estate, whitespace is an essential element in design:
“Whitespace is to be regarded as an active element, not a passive background” — Jan Tschichold
Today, I’ll cover how you can use whitespace in your designs to give it a clean, uncluttered feel.
Whitespace And Negative Space
The term “negative space” comes from traditional art where it is used to capture the shape of the object more accurately. Despite that is called ‘white’, the space doesn’t actually need to be colored white — any type of blank space can be classed as “whitespace.”
Whitespace In Graphical User Interfaces
Same as traditional art, objects in graphical user interfaces also require negative space — text, buttons, logos and other objects need room to breathe. All good user interfaces incorporate proper whitespace values into all page elements from top to bottom. Elements of whitespace in GUI are:
- Margins, paddings and gutters
- Space around graphic objects (imagery)
- Line-spacing and letter-spacing within text content, space between columns
The whitespace on a page can be every bit as important as the space occupied by UI elements because even empty space supports the visual integrity of a layout. Whitespace serves 4 essential functions:
1. Improving Comprehension
Whitespace should make both scanning and reading content easier and more predictable.
Prioritize Legibility And Readability
Space between text is important because it helps to define the page content itself. You should optimize your content both for legibility (how well you can discern the letters and words) and readability (how well you can scan the content).
A lab research conducted by Wichita State University confirms that increasing whitespace actually improves reading comprehension, although it may decrease reading speed. As was pointed out by Dmitry Fadeyev:
Properly using whitespace between paragraphs and in the left and right margins can increase comprehension up to 20%
Two important things to keep in mind when optimizing your text content are paragraph margins and line spacing(the space between each line). Generally, the larger the spacing, the better reading experience the user will have. But too much whitespace between lines can break the unity and make the design disconnected. Again, it’s just about finding the perfect balance.
2. Clarifying Relationships
Content relationships are defined by surrounding whitespace. The whitespace in this case acts as a visual cue—it helps users understand the layout.
Group Related Elements Together
When observing how people organize visual information, Gestalt psychologists established the Law of Proximity, which states that objects near to each other appear similar.
“unit” whereby the white space acts as a visual cue
In the context of GUI this means that objects in close proximity will appear as one unit. For example, in context of web forms, it’s a good idea to place labels closer to the relevant fields to create a single unit.
3. Attracting Attention
Many apps and websites suffer from cramming too many elements and information together without enough breathing room. Visual clutter makes UI unappealing and overloads your user with too much information. Reducing the clutter will improve comprehension: by removing extra elements, you make users to focus only on what’s immediately visible.
Lead Users Eye’s Towards Relevant Content
There’s a relationship between a distance and attention — larger distance forces attention. Use whitespace to your advantage to draw user eyes onto certain page elements. Extra padding around a particular area forces user’s attention onto that area because there’s nothing else on the screen to draw attention.
The more whitespace around an object, the more the eye is drawn to it
Create Visual Hierarchy
When whitespace is used appropriately, it allows a page to create a general flow that the user eye will follow. Whitespace can support the overall hierarchy. It possible to use whitespace to create either symmetry or asymmetry:
- Symmetrical layouts is good for creating a harmony in design.
- Asymmetrical layou is good for drawing attention. Asymmetry is great for bringing attention to a particular area on the page or a particular element in the page.
4. Creating Feeling Of Luxury
Whitespace can be used for purely aesthetic purposes—it’s great for create a feeling of elegance. Coupled with nice typography and powerful photography, generous whitespace can easily make a product look luxurious. Whitespace create a feeling that the product is more important than the real estate it lives in.
Conclusion
The application of whitespace is both art and science. Truly understanding how much whitespace should be used to create a good layout requires practice. The more you design, the more you’ll learn.
Have a question? Let me know in comments below!
Thank you!
Learn how to design user interfaces
Interactions between computers and humans should be as intuitive as conversations between two humans. Interaction Design Foundation will help you to learn how to design for efficiency and persuasion.
