The tyranny of the grid
This is the grid I use to help me draw sketch wireframes. It may be tatty and covered in splotches, but it helps me draw straight lines quickly.
The grid also helps me sketch pages around advertising. For the last five years the two constants of virtually every project I’ve worked on have been the width of the page and the size of ad banners. Got to fit an MPU above the fold. Can’t go above 980 pixels wide. Better make that column the same width as a skyscraper, just in case…
You can see the grid in the background of nearly every sketch wireframe I’ve done in the last five years:
How scary. That the grid I’ve used to start sketching an idea has not been driven by the needs of the user or the business, or the choice of technology, but by the needs of advertisers.
I am sure that at some point I will be slapped for writing that last sentence: of course, satisfying the needs of advertisers is often a very definite business requirement. However, I look back and I’m ashamed at how much I've allowed the standard format of advertising to lead my sketches. In trying to create a starting point that was as flexible as possible, accommodating multiple ad formats, I’ve sketched myself into an advertising cul-de-sac.
I think this is why I find the new breed of content sites that are slowly colonizing the internet so refreshing. They take a new approach to advertising, white space and the vernacular of the web.
Here’s a comparison of two sites: The Verge and The Telegraph. I’ve taken a screenshot of the same news story from each publication. Both sites have an MPU and leaderboard towards the top of the page. The only thing I’ve changed is to make the ad banners the same for each site.
Even though it’s the same story, these two sites feel as if they’re from different worlds. The difference is even more noticeable when you block the designs to concentrate on the white space rather than the content. In this side by side image I've blocked with red all of white space in the original design :
This is the key difference. Typographers say that designing a font is about designing the white space that surrounds each letter, rather than designing the letter itself. The Verge has designed the white space and the content, whereas The Telegraph has only designed the content.
It’s a very different approach. To me, The Verge’s reading experience is far superior. The use of large typography, white space and a simple yet thoughtful design makes for a very compelling experience. It’s also one where the advertising sits into the page, the white space calming its obtrusiveness onto the surrounding content.
The Telegraph is more full on. The eye isn’t allowed to settle and the proximity of functionality, content and advertising puts everything onto the same plane of importance.
Of course, without access to analytics, it’s a subjective decision as to which design is best (for the record, I read both publications regularly). However, even without knowing which satisfies both readers and advertisers the most, I think the lesson to be learnt is the same.
I started this blog post with a grid that I use to draw sketch wireframes. It’s not the grid that ends up being used for the final design by a long way, but I’m sure that on a sub-conscious level the memory of that first sketch influences the final design.
In trying to sketch ideas quickly by creating a background grid that allows me to be flexible with ad units, I’ve locked myself into one way of thinking about page structure. My tight gutters, built around squeezing as many ad formats into the page, dictate the page. It’s time to remember the white space and free the grid.
1 comment
This make sense, thanks dor the article!