Whitespace Primer

I was recent­ly asked by a client to cri­tique a half-imple­ment­ed site as an out­side set of eyes. One thing I noticed in the stock-lay­out being used was a hor­ri­ble use of white­space, so I blithe­ly includ­ed in my cri­tique that the use of white­space was, well, terrible.

The client asked the obvi­ous ques­tion: what is white­space? I had fall­en prey to a car­di­nal sin: assum­ing that my client knows insid­er jar­gon. Ter­ri­ble com­mu­ni­ca­tion on my part, and I hope to do bet­ter in the future! I searched for some intro­duc­to­ry arti­cles regard­ing white­space to send him to, but the best one I found at A List Apart was by a design­er for design­ers, and still used too much design jar­gon. So, here’s an attempt to sim­ply spell out white­space, 99.9% jargon-free.

While the aver­age per­son has no idea what white­space is, it impacts them sub­con­scious­ly when look­ing at a design. If a design looks “relaxed,” then it’s mak­ing good use of white­space, while a “busy” design is usu­al­ly mak­ing poor use of white­space. White­space is, quite sim­ply, the emp­ty or neg­a­tive space that sep­a­rates dif­fer­ent things on a page. It might not be exact­ly white in col­or, it will sim­ply be what­ev­er col­or makes up the back­ground. Let’s have a look at some pic­tures, which I’ll use from my home page. Below is an image of my home page, which looks fair­ly relaxed:

home page screenshot

It looks relaxed because I made gen­er­ous use of white­space, which I have high­light­ed below:

home page screenshot - highlighted whitespace

If it weren’t for this white­space, the con­tent would just be a chaot­ic pile of goo. White­space also applies to small­er areas, such as inside one of the box­es on my home page:

whitespace in a box

And final­ly, to demon­strate the neces­si­ty of white­space, here’s my box as it appears on the home­page, and one with­out whitespace:

bad whitespace in a box

While the one on the right is a bit extreme, you get the point! The big trade-off when it comes to white­space is that it does­n’t allow you to fit as much con­tent into the same sized space as you oth­er­wise would be able to. This actu­al­ly turns out to be a good thing as it forces you to keep focused on what your site needs to say, while throw­ing out what all those lit­tle things that you could say that will only dilute your mes­sage. Hope­ful­ly that was help­ful to someone!

(Dis­claimer to any “true design­er” who is read­ing this: yes, I know I did­n’t say every­thing, that’s the point.)

One Trackback