Online publishing models: the grid system

I’m in the process of redesigning CagedEther after inspiration following a Theme Framework session. On investigating different WordPress themes, I came across a system to that may well help me juggle and organize the various pieces I want to squeeze into my blog’s latest incarnation. First though, a minor detour into my personal history, to illustrate the system’s heritage.

Somewhere in my distant past I was a sub-editor on a monthly print publication and this took me back to something I’d learnt then: the grid used heavily in the newspaper industry to construct those front page formats we’re all so familiar with.

For instance, here’s an example of a 5-column grid used by the UK’s Guardian:

Some elements such as the headline and the main image cross multiple columns, but overall they are still bounded by the lines of the grid.

Then along came the web and rather than designing for broadsheet or tabloid format, we have a screen to fill. Still, the grid format translates over into this world. However, rather than a 5-column layout, many news publications and blogs rely on different column formats, as illustrated here by Mark Porter:

In this instance, Mark points out just how similar the 12-grid layout is between between the online version of the UK’s Guardian and Telegraph.

In terms of blog templates relying on the grid system, take a look at the beautifully functional Neutica WordPress template:

and the highly flexible Basic Maths theme:

So where did the grid system come from?

Graphic designer, lecturer and author Josef Müller-Brockmann is credited with being one of the strongest evangelists of the grid system back in the early 70’s. Interestingly, he is also the creator of the Akzidenz-Grotesk font: a precursor to what we now know as Helvetica. I say ‘interestingly’ because many of the grid system designs rely heavily on this efficient sans-serif block font: Helvetica is a great compliment to a tightly-defined grid.

For more information on designing using this system, check out The Grid System website: an excellent resource pulling together snippets from across the web. And yes, the site is a testament to the visual order and composure a grid system brings.

If you have any experiences of designing with a grid, please share them in the Comments section!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>