Whitespace Primer

I was recently asked by a client to cri­tique a half-implemented site as an out­side set of eyes. One thing I noticed in the stock-layout being used was a hor­ri­ble use of white­space, so I blithely included 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 fallen prey to a car­di­nal sin: assum­ing that my client knows insider 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­tory arti­cles regard­ing white­space to send him to, but the best one I found at A List Apart was by a designer 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­sciously 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­ally mak­ing poor use of white­space. White­space is, quite sim­ply, the empty or neg­a­tive space that sep­a­rates dif­fer­ent things on a page. It might not be exactly white in color, it will sim­ply be what­ever color 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 fairly relaxed:

home page screenshot

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

home page screenshot - highlighted whitespace

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

whitespace in a box

And finally, to demon­strate the neces­sity 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 doesn’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­ally 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­fully that was help­ful to someone!

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

One Trackback

Post a Comment

Your email is never published nor shared. Required fields are marked *