Whitespace is becoming an increasingly popular design element for websites. The termwas originally coined in print design and describes “the absence of text and graphics”. At the same time, whitespace is more than an empty space. It’s also “the overall airiness or density of the page including space between lines of type (leading), text offset around graphics, size of margins, and heaviness or lightness of the fonts”.
In web design, whitespace can be defined in a similar way. The only difference is that it doesn’t have to be white. Rather, whitespace comes in forms and colors. Consider it the opposite of your content. Whitespace can create a structure, carry meaning, and guide the user, but it doesn’t attract attention to itself.
There are a lot of resources out there that explain whitespace in more detail, or bring together inspiring designs that use a lot of whitespace. Let’s not get stuck with the same questions.
Instead, let’s take a look at just what it is that makes whitespace so special. Here are 5 key effects that whitespace can have on the user experience of your site:
1. Whitespace makes your design usable
First of all, whitespace is a great design principle to help you make your design more usable. It’s not a secret that good usability is crucial for any successful site. So make sure you pay enough attention to your users and their goals: Who are the people that visit your site? Why do they visit? And what is it they do on your site?
Those are questions you need to answer before you even get started on your design. Once you have a clear design objective, you can use whitespace as effective tool to (1) guide your visitors through your site, (2) help them find what they are looking for, and (3) make interactions stand out.
The BREE webshop perfectly demonstrates what it means to make a design usable by adding some whitespace. The site is very clean and minimalistic, while using a clear hierarchy for the presented content.
On this detail view, clearly, the picture of the purse is most important to the user, followed by the name, description, price, and other product descriptions. Elements like the main site navigation are available, but stay in the background.
2. Whitespace makes your content readable
A key aspect of good usability is the readability of your content. The readability is even so critical that it deserves to be mentioned separately.
Whether your content is readable or not depends on many different factors. For example, it depends on the font you choose, the font size and color, the structure of your text, and whether or not you use highlights, images, and subheadings to make it scannable.
At the same time, whitespace plays an important role for the readability. Whitespace defines how you arrange and align different text elements – from entire paragraphs down to the single letter. For example, aligned elements look much cleaner and are easier to digest. Also, let your content breathe and mind spaces between paragraphs, line heights, and even your letter spacing.
Like mentioned before, whitespace doesn’t have to be white. Rather, it describes the spaces between your content on multiple levels. The site of WWF offers us a very positive example of how whitespace – or in this case ‘negative space’, because it’s black – possitively affect your readability.
Even though, there is quite a lot of text to read, the page doesn’t look packed. There is lot’s of space to the left and to the right of the content. Also, paragraphs are clearly separated from each other, and there is a generous space between the two columns. Besides, the line height is very user friendly, allowing you to quickly read through the text.
Of course, whitespace is not everything. Other aspects of good readability, such as a readable font, high contrast, and a well-structured text are also in place here.
3. Whitespace gives your visitors a break
The web – like most other aspects in life – become more and more advanced. We are dealing with a constant overload of information and the choices that come with it. Sometimes, this can get overwhelming. Then, all we want is silence and a mental break.
In case you haven’t noticed, the buzzword here is simplicity. There are countless websites out there and probably some of them are similar to yours. Why not stand out by spoiling your users with a break? Keep your design simple. Help your users make choices – or even better, make some of the choices for them.
Whitespace is the perfect design element to focus on what’s most important. Don’t confuse your visitors, but present them with what matters most. Don’t distract them with unnecessary clutter, but help them focus on their goals.
Whitespace can have a calming effect, drawing attention to a few key elements. Dropboxhas chosen for a very minimalistic landing page with looooots of whitespace. There is no clutter, no distraction, no choices to make.
The website is very simple and refreshing. Only when scrolling down the page, you get some extra information. Basically, once the user is looking for more info, when they are willing to engage further with the site, they can. If they don’t want to, they don’t.
4. Whitespace comes with a modern look & feel
A simple design with lots of whitespace does not only add to the usability of your site, but also to its visual appeal. Minimalism is considered a modern style and sites that work with a lot of whitespace often look very professional and trustworthy – if well-designed, of course.
Especially in e-commerce, giving products some extra space makes them look more exquisite. Not only do they get more screen real-estate, they also draw more attention, due to the lack of tangent elements.
The Rolex website has a very exquisit look & feel. Of course, this didn’t happen by chance. The brand itself is very expensive and special. Using a lot of whitespace to design the website was therefore a smart choice.
Once you open the homepage, the product is put right to the center of your attention. There is some text to accompany the image, but other than that, the page is very quiet – almost mysterious. Yet, the design is very well balanced and does not at all look empty.
The shadow of the watch adds a small 3D effect to the site, creating a sense of depth. This subtle detail gives the product even more room, making it look even more important.
5. Whitespace makes your design emotional
Last but not least, whitespace can add an emotional touch to your design. Again, it doesn’t have to be white, but can be any color, shape, or pattern you want. Just like background images, background colors can have a big emotional effect on us.
You can also use effects, such as parallax scrolling to make your whitespace interactive and more fun, or you simply use gradients or patterns to add some excitement. The tone you set with your whitespace – and that can be through the amount, or the design of it – affects how people will receive your content.
Instead of seeing whitespace as the leftovers of your screen real estate after you have placed your content, you should see it as an autonomous design element. You decide where to put it and what effect it has on the rest of your design.
Cirque du soleil creates a magical and very inviting sphere on their international site – using a lot of whitespace and integrating that space with the main visual element of the site. The visual is appealing and very interesting, drawing your immediate attention.
The design creates a very comfortable feeling of unity. At the same time, it makes you curious of what to expect once you have selected your continent. The quiet and warm background color invites you to dream away and leave room for a lot of own ideas and your own phantasy.
