Our blog

Whitespace: A Design Must

September 16 2015

Whitespace banner
SHARE ON: linkedin

You’d think that the background of a website would be the least important part or web design, because visitors are unaware of it most of the time. They’re hopefully concentrating on the content you put so much effort and care into. But in fact that’s why the background is so important, because it’s supposed to go unnoticed. The purpose of a background is to draw the user’s vision to focal points. If you’re looking at the background, then it isn’t doing the job of highlighting what you should be looking at.

Minimalism, the principle of doing more with less, is a tried and tested art style popular in all mediums, from literature and music to cinema and architecture. Web design is no different. The emphasis on the spaces between objects, on silence and stasis over noise and activity, puts as much emphasis on background as foreground. Given the importance of backgrounds it’s no wonder that minimalist websites, especially graphic design sites, are so popular.

Screen-Shot-2015-07-24-at-15.48.44

An essential part of website design is negative space or ‘whitespace’, meaning space on the page that doesn’t contain any elements. Whitespace is the background of a website. It doesn’t have to be white, it can be grey or any other single colour. It can be tempting to fill whitespace with adverts or extra content, partly because using a lot of negative space can feel lazy or simplistic, partly because of the belief that visitors don’t scroll. Designers sometimes fill the top of the page with content because they don’t trust that people will scroll down to continue reading. Don’t worry, that’s a myth. People are more than willing to scroll to continue reading.

Whitespace isn’t just an artistic choice, it makes it easy to concentrate on content. If you overload a page with stuff, it’ll be harder to pick out any single piece of information, meaning that it will take longer for users to get to what they want to know. You wouldn’t tolerate a website that took too long to load the content you need. Why would you tolerate a website that made you take just as long to find the content?

Whitespace is also important for mobile responsiveness. As we’ve said before, mobile friendly websites are the way of the future. The contemporary look that minimalistic websites have will make your mobile website look state of the art. For a website to be mobile friendly, it needs to be readable and clickable. Links and text need to be big and well-spaced so that they can be picked out. Images should have a buffer of whitespace between them and the text, creating a more balanced composition. Also, a website with a simple monochromatic background will load faster than an image-based background. With more and more people using mobiles to shop online, clever whitespace use is a must if you want to convert visitors into customers.

Case Study: Dark Backgrounds

Screen-Shot-2015-07-24-at-15.48.45

Websites with a dark background can look elegant and creative, but they’re not everyone’s cup of tea. And they can be hard to get right. Polls suggest that almost half of internet users always prefer light to dark websites. One reason for this is readability. Dark websites can be a strain on the eyes, especially for people with astigmatism, since looking at a dark screen will cause your pupils to dilate and use more of your vision. Another reason is familiarity; websites, as well as books, TV and other media generally have light backgrounds. Also, darkness can give an impression of heaviness. Light is registered by the brain as intangible, having a distant source like the Sun. Darkness, on the other hand, signals an object blocking the light. This means that black text on a white background registers as content, while white text on a black background registers as an image or signal.

But while black may be a niche background choice, it still has an appeal for some. Around one tenth of users consistently prefer dark websites to light ones. A dark background can look elegant and creative, and is especially good for design or creative themed websites. Handdrawn sites in particular look good in dark. Do it well, and it will distinguish you from everyone else. But you need to follow some style guidelines to make it work.

To ensure that a dark website works and doesn’t look too busy or illegible you need to use lots of whitespace, ironically. You can add a texture to the whitespace if it looks too stark, but it’s a delicate balance to strike between empty and crowded. Make sure that text is well spaced out. Increase the size of your fonts and decrease the contrast of text and background shade. Part of the reason why light text on a dark background is hard on the eyes is that the contrast is too harsh. So make the background a bit lighter or the text a bit darker.

When it comes to font you might want to use Serif, as it has an elegant style that goes well with dark backgrounds. But it will also make your text less readable, so what do you do? A good compromise is to use serif for headings and sans serif for the body of the text. That way you can distinguish the headings from the content, creating a text hierarchy that makes the site flow better.

When it comes to colour schemes, use a small number of colours that are very distinct, otherwise the colours will wash out in the dark background. If you want it to be more colourful, you can make the background a single dark colour, it doesn’t have to be black or grey.

A nice finishing touch, to keep everyone happy, is to set up a style switcher allowing visitors to change the background to suit their tastes. Like a light switch, or the Force, it will give them the freedom to choose the light or the dark side of your website. This instructional site shows you how to code a switch to choose between multiple style sheets.