Let’s say you’re in a library. It wouldn’t be nice at all if you couldn’t move around because of the overcrowded shelves and halls, while the librarian was continuously prompting you with the latest books that arrived. It’s the same with white space used in web design: it gives room to breathe to many website elements.

White space is extremely important in web design for usability and readability and it emphasizes particular elements. Imagine how it would be if there were many words stuck together. User experience would definitely be very unpleasant and it would take a lot of effort to understand the messages on a website.

White space is also known as “negative space” and refers to the empty space around and between several elements of a design or page layout. It’s also known as “breathing room”. And it doesn’t have to be white. Actually, any color would fit as long as it creates a clean and nice design. Even if negative space doesn’t contain anything, it can define and enhance the positive space.

White space – an active element

Negative space has been considered a passive element, but it plays an extremely important role in enhancing brand exposure and improving the entire visual layout. Creating and delivering a great user experience involves more than using white space, but we can’t deny the huge importance of this element. It guides users on a page, creates sophistication and a harmonious layout, communicates what needs more attention on a website and facilitates scannability.

White space is used between several elements such as sidebars, texts, footers, headers and images. A cluttered page, especially if there is no hierarchy within the text, worsens reading speed and comprehension.

Negative space can become as valuable as the content itself. This applies especially to important brands because it adds a note of elegance.

The role of white space in web design

There are two types of white space: micro and macro white space. Micro white space is the space between those smaller elements: between letters, words, list items, between an image and a caption. Think, for example, about an online newspaper. It needs to have space around characters and between paragraphs in order to make the content easy to read and give the newspaper a clean and light feeling.

Macro space means the space between larger elements, which is very used for Google website, for example. It has a clean design, the focus being on the main purpose of the page, while other aspects are not so emphasized.

To test how the website you’re building looks like in terms of colors, Adobe Kuler is the right tool. You can create, edit and upload various color schemes.

Plus, if you’re in doubt and don’t know what fonts would be more appropriate try Google Webfonts. Select different fonts and see how they interwine with white space.

If you’re not sure where and how to use whitespace when building and customizing a site, Balsamiq can be helpful. It helps you work faster and easier by reproducing a sketch on a whiteboard, but through your computer.

As all websites have web forms. It’s extremely important where you place them and how you use negative space in this context. And as creating web forms usually involves coding, you need a tool to simplify your work and save your time. 123ContactForm web form builder requires no coding and is ideal also when you use white space to build a web form.

White space can be active and passive. Active negative space leads a reader from one element to another, creates harmony and can position a brand much better. Passive whitespace is actually the white space surrounding the outside of a page or blank areas inside the content, which sometimes is regarded as poor design.

Negative space creates balance, a good overall flow and influences readers, making them stay more on a page. And this applies not only to an online newspaper, but to any website. Sometimes, web designers are faced with various platforms, screen resolutions or browsers. That’s why there are compositional exercises for web design students. These exercises help them realize the importance of negative space and how to use it effectively.

Negative space has a huge influence. Find out why!

White space gives the brain visual cues regarding what elements are separated and which belong together. The best example consists of several lines of phone numbers or email addresses on a site separated by white space, which signals your brain that each is a different sequence and not a very long number.

If there is more white space, a website will look more classy. This use of negative space is common in expensive and classy magazines for women. Almost all ads feature a lot of white space, there is enough room for background photos and texts are scarce.

An opposite example is a direct email ad that we’ve all got at least once. Remember there was so little negative space combined with many and big blocks of text that didn’t look well? So, it has a huge influence. That’s why web designers have to work with it in mind before creating and customizing a particular site.

There are some basic principles to create a good web page design. Negative space should separate elements such as header, footer and navigation. And next time you design a page, analyze the margins and padding more instead of wondering how much space you need for some text.

Clients should also understand the importance of white space

If you have doubts or if your clients don’t understand quite well the importance of negative space, here’s what you can do: build your design in two different ways. One featuring less negative space to convey a more practical and down-market tone and the other one with more white space for a sophisticated feeling. Keep in mind that you should use the same elements in your two designs. The only thing that you should do differently is to change the spacing between all these elements.

Perhaps the best way to see how white space is used and learn more about its importance is to take a look at several websites. They can inspire and help you with your future projects. Just take a look at the following websites, free your imagination and results will be excellent!

Madebysofa.com uses white space to create a clean, minimalist look. This way, the emphasis is on website categories and links.

Vertigo Visual keeps it simple and uses plenty of white space to add a touch of style and personality.

Cultured Code is an example where white space is not white, but light blue. There are also a few colored geometric elements that enhance certain categories.

Philip House NYC features a lot of white space. The purpose here is to catch the eye and enhance some images and categories featured on the webpage.

Built by Buffalo uses white space very wisely. It emphasizes all categories and logo. In the centre of the page, there are several colored sections that lead to important pieces of information. While scrolling down, you can notice that whitespace still dominates, but the focus still is on other sections.

Ditto is also a website that uses white space to add sophistication and elegance. At the same time, negative space is used to better showcase the products.

Metta Skincare has a sleek design. The focus is on products, USP and website categories.

Fell Swoop included white space in order to create emotion and increase user engagement.

Attitude Design combines white space with “colored” white space to drive attention to a few key points on the website. Simple, but effective!

Super Real website has a touch of elegance and sophistication due to white space. Negative space is used here to enhance the main categories.

Handiemail features a simple, white layout that keeps visitors interested. Everything is so easy to read due to such a clean design.

Suki is a website that grabs your attention almost instantly. It’s amazing how negative space alternates with images, videos and calls to action. Just take a look!

Tom Reinert is a website on which the predominance of white space separates multiple elements. The overall impression is a clean, beautiful and easy to read page.

Webydo takes advantage of negative space, using it around images, columns and calls-to action in order to showcase various parts of the website, contact details and more.

PlainWhite is another great example of whitespace used in web design. As we can see here, it guides your eyes and contributes to a nice and airy design. This way, all website categories are beautifully displayed.

Beanstalk is a great example of how white space is not only “white”. It creates harmony, balance, makes the website look uncluttered and highlights the content.

Pulp Fingers also demonstrates the effectiveness of “colored” negative space. Here we have a bold color that highlights the messages, calls-to-action, social media buttons, contact fields and site categories.

No Leath features white space, which is actually a light grey hue combined with large graphics to display their products as well as possible.

Dropbox is an advocate of negative space. This website demonstrates that less is more. And this is achieved through keeping only those elements that are really important. White space here increases readability and usability, making everything on the website extremely easy to read and understand.

Something Splendid has a lot of white space combined with colorful elements. This makes the page extremely easy to navigate. Additionally, interacting with such a website is a pleasant experience. Each category is more noticeable, without making the design cluttered.

These are only a few of those websites that make good use of white space. Although white space is a controversial element, you’ll find multiple sites using it, due to its benefits. If used as it should be, negative space contributes to great user experiences.

White space often causes friction between web designers and their clients. Sometimes, clients don’t want to see any empty space on their website, thinking that it must be covered with content. That’s why designers have to explain their clients the role of negative space.

It may be difficult, at least for beginners, to articulate the influence of it. Nonetheless, don’t think about white space as “empty space”, without meaning. Yes, it may look empty and ordinary, but remember you’ve used it especially because it really improves the overall design, not because there wasn’t something else to add there. It can be difficult to explain it to your clients, but I hope this article will help you with that.