Much has been said about web design here in our blog, but one thing is certain: web design trends change as often as fashion and smartphone models. However, one of the lasting design techniques in any form of media is the use of whitespace.
In this article, we will delve more into what this unwavering web design strategy is, and how whitespace can benefit your web design plans.
What is Whitespace?
Based on a definition from Hubspot, whitespace pertains to “negative areas in any composition.” Think of it as the anti-matter of sorts – it’s a section where things do not exist.
Another way of thinking about whitespace is that it’s that part of your medium – whether it’s a webpage, a smartphone app, or a magazine cover – that doesn’t have text or images. On a plain piece of paper, whitespace is anything that’s white in color (hence the name).
When put to good use, whitespace can bring a whole new level of dynamism and much needed visual interruptions when looking at a page or copy.
Imagine a page in a novel that’s full of text from top to bottom, single spaced and no paragraph breaks. There’s a big chance that you’re going to experience a huge mind melt, with the load of information that’s being presented to you. Whitespace allows your eyes – and essentially your brain – to take a rest or breather from the information dump, and lets them get ready for the next bits of data that’s up ahead.
Design expert and UCLA Extension Program Instructor Alvalyn Lundgren explains whitespace on a more cognitive perspective:
Psychologically, we require white space for comfort’s sake. It helps us understand what we’re seeing because it separates information and helps create hierarchy. Without appropriate use of white space, one thing flows into another with no relief, ideas merge and the message becomes confusing. When that happens, communication ceases and the design fails in its purpose.
Despite its name, whitespace doesn’t have to be white. Any empty area of a page where elements (such as text, icons, or images) are absent can be called whitespace as well. Examples include the following:
- Any plain color that blends with the background
- A section of a large photo where text can still be written
- Margins of a page or spread
Benefits of Using Whitespace for Website Design
If you’re wondering how whitespace can be your best friend, here are some of the advantages that this type of design strategy can bring you:
1. Separation
When whitespace isn’t used, words and numbers will be smushed side by side without anything that separates them. The technique allows your eyes to separate page elements, such as columns or paragraph breaks. It also puts images separate from text, if done properly.
2. Visual oomph
It’s a design trend that has become a classic or standard for just about any kind of medium. Whitespace just brings a natural visual luxury that cannot be explained by adding more words or images on the page.
Using a lot of vacant space on your page gives an impression that you don’t care about wasted opportunities. This works well for high-end brands that use whitespace in their print ads and product designs.
3. Emphasis and focus
When you want to direct people’s attention to a specific item, make sure that it’s sitting on a wide area of whitespace. The negative space lets your brain look for the nearest item that’s visible, and this creates an opportunity to emphasize or highlight an element on the page.
This technique is best used when you want to promote your company slogan or highlight your brand logo. It’s also advantageous when you have a call-to-action that you want people to do.
4. Pleasant user experience
Using a lot of empty space relaxes the eyes of your site visitors, thereby giving them an impression that your website is a good place to stay. This restful feeling will work well in terms of user experience and the rate of returning visitors to your pages.
Examples of Whitespace in Popular Media
You may not realize it, but whitespace is all around us. Whether reading today’s newspaper or doing an online search, you’re probably exposed to this kind of design technique unknowingly.
Not convinced? Here are some samples of the use of whitespace in popular forms of media:
One of the most prominent vanguards of using this technique is Google. As soon as you land on the page, you immediately know what the site is all about: online search. Save for the minimalist top and bottom menu, the Google landing page reeks of pure, unadulterated vacant space.
If you encounter somebody who says that using whitespace is a waste of opportunity, point them to the direction of the number one website in the world.
WooCommerce
The website platform’s main page uses whitespace on its above-the-fold section, without batting an eyelash on the otherwise missed opportunity to use the space for more engagement. For an e-commerce website provider, the use of this kind of simplistic front page gives an impression that WooCommerce wants clear and transparent transactions for both store owner and customers.
Apple
Company icon Steve Jobs has always been an advocate of function over form, and it’s clear that he wants minimalism and whitespace as the company’s design ideal.
Take the case of the Apple store: Every page strategically uses whitespace to bring drama and focus into the content. Products are front and center, and call-to-action statements are displayed on top of wide whitespaces.
FedEx logo
While not necessarily a web design technique, their clever use of whitespace may be something that you’ll be hearing for the first time (especially if you’re not into graphics design).
Have you noticed that there’s a white arrow between the letters e and x? This ingenious (and partly subliminal) icon allows you to understand that the company wants things to move forward – especially in terms of cargo and package delivery.
People Magazine Cover on Princess Diana’s Death
Amidst the gruesome death of one of the world’s most iconic and beloved personalities, People Magazine celebrated the life of Princess Diana through a tasteful and whitespace-driven cover layout. The result is a design that pays respect to a celebrated member of the Royal Family.
Tips on Using Whitespace for Web Design
Eager to use this web design technique on your pages? Here are some tips and tricks to maximize the potential of whitespace to enhance your website design:
1. Know when NOT to use whitespace
We’ve been advocating the use of whitespace since we started this article, but I’m giving you a fair warning this time. In truth, there may be instances wherein whitespace may prove to be bad for your intended purpose. Here are some situations of bad use of whitespace:
- When people expect your page to have lots of text content, but you’re presenting too much empty space
- When the reason why you have empty spaces is that you don’t know what to put in them (or you’re just too lazy to think)
- When the space separates the elements too far away, as if they’re entirely unrelated
- When one of your columns has too much whitespace, while the next column is too cramped
2. Present photos edge to edge, instead of framing them
One technique in displaying photos on websites is to place them a few inches away from text or the page’s edge. Why not blow up the pictures and let them bleed through the margins? Presenting full-width or full-screen photos brings a more dynamic vibe to your pages.
This tip is powerful when you use photos as slider backgrounds, page headers, or sidebar elements.
3. Use CSS in creating layouts with whitespace
When adding more spaces in your webpage, some newbie developers use line breaks or spacer gifs to create whitespace. Don’t make this mistake!
Instead, make use of CSS to define margin, padding, span parameters, text line heights, and more. This will create the same amount of whitespace but using much lighter coding.
4. Use whitespace for drama
The inclusion of more spaces can create a dramatic reveal or suspense in your pages. One way of using spaces for dramatic effect is to choose the right color. For instance, a stark black background creates a somber or strong mood, depending on how you present the rest of the page elements.
5. Get out of the grid layout mindset
You don’t have to follow rows and columns when using whitespace. You can actually bend some layout rules by putting text a bit askew or misaligned in the default layout grid.
6. Add a splash of color
An empty space doesn’t necessarily have to be boring. On a plain white background, use a vibrant color to capture the attention of the page visitor immediately. Playing with one or two colors works excellently with a plain background.
7. Go for minimalism
Minimalist websites always use the concept of whitespace in their designs. When planning to design a page full of vacant spaces, start by thinking about the bare essentials that you need to put on the page. Put on a “less is more” mindset when starting to populate your page with content.
Having said that, don’t put trivial things on the page, say a horizontal rule or page borders. These “fillers” reduce the impact of whitespace on your pages.
8. Don’t forget the smaller spaces
By now, you’re probably thinking about how to remove entire paragraphs out of the layout. However, you also need to consider the smaller elements that may need spaces. Some of these include the following:
- Text margin, padding, line height, and character spacing
- Paragraph breaks and indents
- Button margin and padding
- Header and footer spacing
- Spaces in between navigational menu items
Final Word
Ultimately, the success of whitespace – or any web design strategy for that matter – will come from user experience. If your site visitors enjoy their time browsing your pages, that will speak a lot about how you design your pages.
