Creating order through grid focused design

Posted on by KrooKedUK

I think almost all designers will be aware of the use of grids in design, whether or not they utilise this method of presenting information is a different matter altogether. It is interesting to note that the application of designing to a grid only really came in to play in the early twentieth-century; beforehand information was presented in basic 1 column or 2 column layouts, you could argue this is a very basic form of grid, which I suppose is true, but this method gave no consideration to the precise measurements that we are familiar with in today’s grid systems.

The Art movements during the early twentieth-century—futurism, dadaism, surrealism, constructivism, suprematism, and expressionism had an impact on the development of the grid as we know it today. At the time all artists were embracing the new industrial age and together were trying to reflect this new period which introduced faster travel and communication, similar to what we are doing today thanks to the extremely socialised world we now live in.

These designers/artists recognised the power of words and set aside previous print notions in favour of being more expressive and began experimenting with type at opposing angles, using type in varying sizes; using drawn, abstracted letterforms; and sometimes ignoring the vertical and horizontal nature of type altogether. This seems to completely go against the concept of the grid, but thanks to this disorder it gave the opportunity to de Stijl, the Bauhaus, and typographers like Herbert Bayer and Jan Tschichold, to bring back some harmony and organisation to the chaos.

It’s interesting to see how the development of grids came about by breaking all previous rules and then realising that to effectively communicate through design you have to create some order for the content. If they didn’t take this approach I believe design today would be very boring; designers back then needed to experiment and go wild in order to come up with new techniques and ways of displaying content, which could then be applied to a grid.

Ordering Disorder – Grid Principles for Web Design

I purchased Vinh’s book on the recommendation of the Standardista’s and I can see why. It covers everything from the Concept, Process and Execution. The book has a great layout with generous margins for the content to breathe, at 177 pages it doesn’t take long to read, especially since a lot of pages in the Execution chapter are mainly just page layouts.

Obviously I’m not going to cover the whole book, and by that I mean I’m not going to try and summarise it either, instead I will pick out the pieces that I found most interesting and useful.

The purpose of the book is to show us how the grid applies to digital media and Vinh does a great job of this by walking us through the creation of a fictional site

Benefits of Typographic Grids

In Chapter 2, Concept, Vinh gives us a list of the major benefits of designing with a typographic grid.

  • Grids add order, continuity, and harmony to the presentation of information.
  • Grids allow an audience to predict where to find information, which aids in the communication of the information
  • Grids make it easier to add new content in manner consistent with the overall vision of the original presentation.
  • Grids facilitate collaboration on the design of a single solution without compromising the overall vision of that solution.

Vinh makes the point that for some designers the idea of using a grid would restrict their design and hamper their creativity, which over time has been proven to be false and states that now a large proportion of experienced designers have embraced grids. To make his point he quotes the designer Ellen Lupton who said:

“To say a grid is limiting is to say that language is limiting, or typography is limiting.”
Ellen Lupton 2009

Vinh then likens grids to a springboard for creativity, which are a foundation through which we solve problems.

This section of the book perfectly describes me a couple of years ago. I was of the opinion that using a grid would limit my creativity, I suppose the only reason I can give for this is that I had never tried designing to a grid and didn’t know how to, or what to expect, unfamiliarity can be a dangerous thing. I don’t have a problem saying that back then I was naive in the way I perceived design. I think for many of us, we form ideas ideas about things before giving them a chance and trying them out.

Principles to keep in mind

Vinh outlines some principles that we as designers should keep in mind:

  • A grid should focus on problem solving first and aesthetics second.
  • A grid is a component of the user experience.
  • The simpler the grid, the more effective it is.

The first point is fundamental, I’d take a bet any day that the aesthetics of a site very rarely register in most users heads, instead they care much more about achieving a certain task effectively and easily. We can create this experience by carefully considering every possible interaction on the page and how these relate to each other, which is made much easier by utilising a grid.

This post does not cover any technical aspects of designing to a grid as I will cover that to some degree in a future post. Writing this post has made me even more curious about what can be achieved with grids and more importantly the types of grids we can create by using Mathematical Formula. It’s definitely something I am going to continue to research as I am considering creating my own fluid grid, or modifying an existing grid to use with


This entry was posted in Design. Bookmark the permalink.