Modular-A: Grid-based Design

3 min read

A lot has been written about the growth of grid-based web design recently, so I will avoid adding to the discussion of how to implement and why it is beneficial for web designers (see links below). Instead I would like to focus on my own implementation, the advantages in it and the questions I still have.

My initial interest in developing a grid was first perked back in 2008 when I saw a conference presentation by Andy Clarke. He talked about how web design could and should be looking at some of the layout patterns used in the print world. The particular focus of his speech was comic book layouts. It was a simple but intelligent discussion of the parraells we could draw form comics in using grids to help tell the narrative of our content.

I spent a while playing with the basics of grids, even going as far to experiment with it specifically in the graphic design field, before looking at what it meant with screen resolution, pixel-depth, different devices and the unique demands of reading/scanning on a digital screen.

Modular-A first began in another project back at the beginning of 2010, was redeveloped in proceeding projects before I brought it all back together in May 2011 into a complete template for WordPress, using the HTML5 Boiler Plate and the Hyrbid Core frameworks.

Modular-A’s grid system

Currently version 1.0 is designed for full desktop layout, with responsive device modfications coming in 1.1, with this in mind it is designed to:

  • A 960 pixel width.
  • To keep every grid square working towards 960 pixels (and 480 in the future)
  • Everything is designed to against a 12 pixel ratio (gutters, fonts, line heights, cells, except for the column)
  • Gutters are 24 pixels, provided by em distances.
  • Columns are 140 pixels
  • It’s based off a 6 column grid.

Advantages

  • Provides clarity and logic for considering the weight and worth of competing content.
  • With the structure already determined by the CSS, I can quickly provide mock-ups of client requests/changes.
  • Rapidly increases the speed of my workflow. With a strong foundation, half the work for all new projects is already done.
  • The standardised system allows for a better workflow when collaborating with other designers.
  • Is best suited to Responsive Web Design.
  • Allows me to rapidly test different usability ideas.
  • Can be easily integrated with a range of usability patterns.
  • Of all the methodologies I have used in web design this system lends itself most to Typography.
  • With the correct CSS3/HTML5 behind it, it allows you to design web accessible sites automatically. I don’t believe I have to set aside time for accessibility in regards to the layout anymore as it is already done. As long as my code and colour theory is prepared, then this system is accessibility ready!

Lasting Questions

  • If the content is in a container with a section, that has a contrasting colour with the background colour, should we design a different grid with that in mind? The basic grid goes to the edge, but you need additional gutters when there is contrast between the content background colour and body background colour.
  • Should we set up a few different grids? Is one over simplified and standardised?
  • How far should we go with box ratios? Should box elements on the homepage always be in exact ratios to the columns?

Resources

Leave a Reply

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