Website Designers Grid System

I was rather curious to learn more from what I’ve been hearing the need to use grid systems when designing layouts. After a little Googling, I managed to find the post that I think started it all.

Mark Boulton from the UK was describing in a 5-part series; Five simple steps to designing grid systems. If you plan to read his article, just be prepared for quite a lot of absorption regarding grids as a graphic designers friend.

Mark’s description with mathematical logic explained how a grid system doesn’t constrict a graphic designer in print but actually opens up their eyes to frequent questions of how wide some areas should be.

I learnt a bit of print back in college and it wasn’t easy for me because the way I view my grid system is too much like looking at HTML tables. And if you’re already asking yourself if there is a difference between the offline and online grid system, yes.

Mark explained its differences concisely in one paragraph which made me pause and go, “Yes, that is just so true.” He said,

Designing grid systems for print is considerably more straight forward than designing grid systems for the web. First off,in print, the designer has a fixed media size – the paper size (or packaging, poster, whatever). Let’s say a print designer has designed a magazine. The reader of this magazine can’t suddenly increase the font size if they find it difficult to read – well they just move it closer to their eyes I guess. This is just one consideration, there are more but I’m sure you get the point.

Since Mark didn’t touch on most of the points, I’ll add some of mine that I’ve found in comparison from what I learnt back in college and now.

  • Difference of RGB and CMYK is not close.
  • User behaviour towards a website is different than print.
  • User expectations in a website is much higher.
  • The website design isn’t a printed poster. (CSS is there to help)
  • Limited number of columns. (Unless you make the website fluid/flexible)
  • Copy can’t be overly long or short. (There isn’t a sense of design to this.)

That’s a few at the top my mind though I know there might be some in more detail. But like Mark said, you’d get the idea.

I wasn’t really entertained but felt reading the copy of his 5-part series tiresome. Maybe because there is really a lot to explain and there isn’t any other playful method to explaining something as practical as this.

Overall, the Five simple steps to designing grid systems is a great place to start for anyone planning to improve their knowledge and skillsets in website design.

Not to mention this could actually teach some employers the difference of an actual graphic designer and a website designer.

Leave a comment