Published on | Prototyping: From UX to Front End — Medium Pratik Hegde Credits : Google

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 cognitive load.

This brings me to a very important tool in every designers 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 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, patterns or even a background image.

“White Space in design composition is same as 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 white space matters 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 UI(User Interface) but also UX(User Experience) of the page.

Let us look at the factors other than look and feel of the page:

1. Improved comprehension

Using white space evenly makes the content in 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 as Micro White Spaces.

2. Focus and Attention

Large spaces between layouts and layout elements, also called as Macro White Spaces help greatly in guiding the users through the page and prioritising the focus area for the user. The screen grabs from Apple.com clearly indicate what the page wants to convey to the user.

Credits : Apple

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 gold fish 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 actions).

“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!

Google’s Home Page

4. Guide the user through logical grouping

In this world of visual chaos, one of the aspect our mind uses to organise 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 help users to make logical sense of the information presented to them. Margins and gutters between grids are some ways to handle logical grouping of layout elements.

Spacing between the boxes clearly help to create logical groups even without explicit mention

5. Branding and Design Tone

Use of micro and macro white spaces in different proportions help in defining the character of web page. News websites are good examples of websites which 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 websites of Apple or Microsoft. If asked to keep marketing websites aside, have a look at Google’s Mail, Drive or Docs. 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 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.

In contrary, as soon as we look at the image on the right, the content is the same — brand name, title, text, button, bulb. What makes it soothing to the eyes is the white space around the content. It helps our eyes take rest, helps us breathe and not get overwhelmed with information.

Designer Challenges with White Space

White space is highly rated as Wasted Space by most businesses since they feel the space can be utilised to show more content. It is very difficult but very important for every designer to try and sensitise their clients about the value the white space will add to their business in terms of usability and conversions.

“White space isn’t neat or nice; it’s effective and valuable”

Having convinced with the value, one more challenge is the readiness of investment. More use of white spaces mean less use of content per fold which means more folds or pages to be developed to cover up content. So it becomes a costly affair especially in print design projects. During these times, it is duty of the designer to facilitate workshops and help businesses prioritise the features and content to try and establish a balance between white space and the content.

Conclusion

White space isn’t literally an empty space, it’s a powerful design tool. The application of white space is both art and science. Maintaining an optimum level of white space in the design composition and creating a balance will only come by experience and practice.

Thanks for reading. Let me know if you enjoyed reading this article. Also do comment and let me know how this can be improved further.

Claps to appreciate 🙂

Importance of White Space in Design was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Importance of White Space in Design

Cool stuff, every week

More Articles