Whitespace in Web Design, In this era where they say content is king, we are often tempted to put down every bit of information we have researched or know about a particular topic. However, have we ever tried talking to any of the end-users who consume the content? Perhaps we should measure how much of our content is actually consumed and consumed easily without much of a cognitive load.
This brings me to a very important tool in every designer’s bag, white space. Today we talk about what is white space and how it impacts our design composition. We will conclude the discussion with some challenges around the usage of white space.
What is white space?
White space or negative space is simply unmarked space in the design. It is the space between the layouts, lines of paragraphs, between paragraphs, between different UI elements, and so on. White space does not literally mean an empty space with a white background. It can be of any color, texture, pattern, or even a background image.“White Space in design composition is the same as the use of Silence in a musical composition. Without proportionate use of Silence, music is unstructured; some may call it noise. Similarly, without White Space, design is unstructured and difficult to consumeâ€
Why does white space matter and how to use it?
Designers use white space as an integral part of their design for good reasons. When used well it can transform not only the design but also the business for which the design is made. While aesthetics is one of the benefits, others revolve around tangible impacts on the effectiveness of the page. In other words, white space significantly boosts not only the UI(User Interface) but also the UX(User Experience) of the page.
Let us look at the factors other than the look and feel of the page:
1. Improved comprehension
Using white space evenly makes the content in the design easily scannable and significantly improves legibility. A study conducted indicates that proper use of white space between lines of paragraphs and its left and right margins can increase comprehension up to 20%. Such small spaces between lines, paragraphs, or between menu items are also called Micro White Spaces.
2. Focus and Attention
Large spaces between layouts and layout elements also called Macro White Spaces help greatly in guiding the users through the page and prioritizing the focus area for the user. The screengrabs from Apple.com clearly indicate what the page wants to convey to the user.
3. Increased interaction rate
As per studies, the average attention span of an internet user is 6 seconds, which is even less than what a goldfish has(7–8 seconds). Effective use of white space helps the design to get the message through the user quickly and increase the probability of interaction by highlighting the CTAs (Call to action). “As designers, it is our duty to create communication lines between the design and users and white space can help a great deal in it.â€
Have a look at the search engine giant Google’s home page. The use of white space is very evident and clearly communicates the purpose of the page; Search!
4. Guide the user through logical grouping
In this world of visual chaos, one of the aspects our mind uses to organize visual information is the Law of Proximity, established by Gestalt psychologists. It states that objects near to each other appear similar. One of the highly practiced principles of design, white spaces helps users to make logical sense of the information presented to them. Margins and gutters between grids are some ways to handle the logical grouping of layout elements.
5. Branding and Design Tone
The use of micro and macro white spaces in different proportions helps in defining the character of the web page. News websites are good examples of websites that use micro white spaces more than macro white spaces.
Heavy use of macro white spaces brings in a sense of sophistication and luxury to the web pages. Do not agree? Have a look at the websites of Apple or Microsoft. If asked to keep marketing websites aside, have a look at Google’s Mail, Drive, or Docs. A content-driven website like Medium itself displays beautiful use of white spaces.
6. Creates a breathing space for users
Have a look at the below images. There is a simple message to be given and it is about saving power for the future. In the image to the left, our eye keeps on jumping from one element to another — Brand name, Title, text, button, bulb. There is very less area where there is no element; high motor load.
