White Space

White space is an important element in your web design, graphically it is the space that surrounds the elements in your page design. Without those spaces, your page would be cluttered and impossible to read or to navigate, and, as web designers, we have to focus on the user experience. How easy is the page to navigate? How well do the various graphical elements fit together in terms of continuity and style? These are all questions designers have to ask themselves every time they start to design a web site.

Although you might think of the spaces in a web page as “unused”, they are actually fulfilling an important visual requirement, and that is to give all your graphical elements the space they need to relate to each other and “breathe”. The space actually helps to give them meaning and dynamics and, without them, there would just be a jumble of details all competing for your attention. White space gives balance and structure to your points of interest and actually helps give them definition.

There are technically two types of white space that we have in any web page, (graphically speaking) We have the large spaces that we were talking about above, then we also have the much smaller spaces that are still important but more subtle, those are the spaces between sentences, between words, even between the letters that make up the words! We call those spaces Micro spaces and the large ones Macro spaces.

There will be smaller areas of Macro space between, say, a menu and a header or title graphic which all contribute to the overall compositional style of the page and then there will be larger, open areas of space that can be parts of the background graphic that are spacious and airy; like sky for instance, or just a block of plain colour, or maybe a subtle gradient. Either way they are sort of dead spaces that contain no text, information or controls but are important nonetheless.

The user has to be able to immediately differentiate between the various elements in the page as well as ideally realising what they represent and a white space is what is needed to truly accomplish this. Otherwise the user will find the environment cramped, confusing or just uncomfortable, particularly if there are too many different things going on and it feels “tight”. What is needed is a sense of proportion and, even though there may be a great deal of information hiding behind the buttons and menus, there will still be a friendly welcoming “spacy” feeling for the user so that they can relax and enjoy the experience without clutter and unnecessary embellishments getting in their way.

Any designer should have the concept of white space in the forefront of their mind when arranging the graphics for a page so that they can co exist in a balanced way and thus give them the best chance of looking good to the end user.

The space between the graphic elements will help the user, albeit invisibly, to find the information they want quickly and without any wrong turns or cul de sacs, instead intuitively going to the right place first time.