Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Whitespaces have powerful impact on design

Monday, December 15th, 2014 by Servage

The whitespace is a famous term in the web designing community and means empty space emerging around the elements of a web page’s UI components or layout. With whitespaces you can highlight content of your brand, boost readability of websites and improve legibility. Thus by following minimalist approaches you can let other elements stand out on the web page or application, for example:

  • Images & graphics elements
  • Gutters between columns
  • Margins between text elements

Learning how to use empty spaces to your advantage will prove to be a valuable skill when it comes to web design.

Focus on the core message

The general perception by many designers’ clients is that their website should maximize the return of investment by filling the screen with as many elements as possible. Throwing information in the face of the user seems logical to them, and therefore many designers feel required to fill the interface with too many UI elements. This usually creates too much noise and disturbance for the visitor, so while the site owner might be happy at first,  bad reception by users come as an annoying surprise afterwards.

Over time this learning curve has been repeated by many, and mostly the same conclusion is drawn: Less is more, and focus trumps diversification when it comes to delivering a clear message quickly. Therefore remember to always focus on your core message. Whitespaces are a great tool in aiding that process.

Illustrate functionality

Using generous whitespace to allow for individual features of your product to stand out will allow your users to relax and pay attention to details, instead of being hastily rushed to the next UI element. You illustrate your functionality better by making the appropriate room for it, instead of overloading the user with each single little technical detail. Save that for later, or other more technical pages the user can navigate to.

Create readability

We all know the experiences when text characters are not separated enough so we have a hard time to consume content rapidly. The same is true for the spaces between the lines as well as paragraphs. Enough line height matters for the readability and therefore ultimately also for the user experience. Try benchmarking your own content with different whitespace settings in split testing, to review this. You will likely find that users tend to stay longer on pages with better readability.

Maintain legibility

Whitespaces act as an important effect to break up UI elements for a visual separation between them. by this your user can scan the page faster and get an overview quicker. Hence your visitor is more likely to move on to the next step in your conversion funnel.

Strengthen color elements

You can drive the visitor’s attention towards specific elements by having them standout with colors and UI specific differences. For example in the form of a call to action button, engaging the user in a signup process. For this purpose whitespace can be a significant aid in making sure the user’s attention gets moved to the button, and has no distubring visual clutter in the way.

Whitespaces are often white, but essentially the desribed principles work the same way no matter which background color your are using. Being generous with space and following a minimalistic “less is more” principle will likely increase your conversion and positive user feedback.

References & more reading


Whitespaces have powerful impact on design, 3.7 out of 5 based on 3 ratings
Categories: Tips & Tricks


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.