Mark Boulton's grid system design workshop

On November 27th, I attended Mark Boulton’s workshop about designing grid systems. It took place in Cardiff, UK, on the day before Handheld conference.

In the first half of the workshop, Mark taught us the basics of grid design theory. In the second half, we were put to work and made our own grid-based design.

Mark emphasised that the design of (the grid of) a website should be a system. He said humans are pattern-recognisable machines, that humans recognise order. Grid systems can help create such order. Hence the workshop name: it was about grid systems.

First of, Mark went through some history of grid design and type design in general. Grids have existed long before the web. Very long ago, the decorative type in books had already some kind of system, but things really started with the Swiss graphic design in the 1960s.

Odd columns can create tension and balance.

Grid systems, Mark said, are most obvious in long form editorials, such as newspapers or magazines. In those places they make the content easier to read. In a lot of print work, odd columns prevail. Print designers do this to create tension and balance. It can ‘unsettle the eye’. In web design, even columns are often used.

One grid does not fit all, in contrary. If a grid doesn’t work for your content then you need to change the grid, that’s ok. Creating a good grid takes a lot playing around with the content you have available. This is why Mark feels grid frameworks that you have just downloaded from the web (like Bootstrap or the older 960 grid solutins) often don’t work.

Types of grids

Mark explained different types of grids: columnar, hierarchical, modular, baseline and compound grids.

• columnar grids can be subdivided into regular and irregular grids. UX designers use the term ‘swim lanes’ for groups of grid columns that form one big column. There can be different ratios in between the columns
• modular grids are hard to do on the web as height in browsers and devices is difficult to work with (and perhaps not desirable)
• baseline grids are most often used to prevent ghosting (the effect that happens in books if the text on the page behind the page you’re reading does not have the same baseline). On the web, there is no ghosting, and using a baseline grid can start to dictate undesirable line-heights. See Mark’s “Incremental Leading“ about this.

Avoid too many columns, it makes the grid less powerful.

The main point of grids is that it can make different pages that use it feel like ‘one system’. The more columns a grid has, the less power it has to come across as one system. Mark recommended to avoid too many columns.

Terminology

Mark also explained some of the basic terminoloy in grid design. A grid designer needs to know what margins, gutters, modules (or ‘units’), columns, hanging lines, offsetting and fields are.

On hanging lines

Good typesetting, Mark mentioned, is like good conversations, or if you like, a good talk. A good talk makes use of pauses, inflections, etc. Something like a pause in a talk is very fragile, it is hard to say when it is ‘just right’. Hanging lines can make typography better like pauses can make talks better, Mark argued.

On gutters

If your gutter is small, you can add a line to it. Newspapers sometimes do this. On the web, if you put a 1px line in your gutter, it can be useful to have a gutter with an odd width (so that the line plus surrounding whitespace are an even number). Sometimes gutters are defined by the padding within the module. Mark mentioned that this approach can require more mark-up, I have not yet done the comparison myself.

On DNA of grids

For years, web designers and web developers have come up with solutions to create grids on the web, a famous one being 960. According to Mark, grid systems like 960 are too limiting. Also, they have their own “DNA”. If many sites use the grid system, all of those sites end up having the same DNA. That threatens original web design.

Designing a grid system

In a lot of graphic design, the design is tied to the page size, Mark called this ‘knowable space’. On the web, there are no book-like pages and thus no page size, no dimensions that you can be sure of. Yes, grid systems for the web are hard.

We should design content out, not canvas in.

For that reason, Mark argues we should design content out, not canvas in. See also his “A Richer Canvas” article from 2011. This means you use your content to derive a canvas from, rather than start with a canvas and lay-out your content on it.

During the workshop, Mark explained three steps to designing content out:

1. Find the knowable, fixed content sizes
2. If there aren’t any, make some up
3. Use them to design your grid

Grids are a system, as Mark said in the beginning. He mentioned three ways to ensure this basic principle:

• Relate everything back to the module
• Use repeated ratios
• Bind the content to the grid

Putting it into practice

The second part of the workshop day, we were put to work. We were given the choice between four projects, or could work on our own side project. The goal was to create a grid system. Mark gave us individual feedback and reviewed some of the projects in front of the class. This was of great help to those who had worked on them, but not much less for the rest of the group.

Mark Boulton’s workshop was very useful, and had a perfect mix of theory and practice.