Grids – The Foundation for Any Good Content Layout

The question I often find myself asking whenever I see a nice content layout is – What is it in the way this content is laid out that makes it more intuitively organized, easier to absorb and visually appealing than others? For example, why does the NY Times read better than the San Francisco Chronicle online? Love the Crate & Barrel site but Walmart.com…Not so much. And then on the iPad, I just love how content is laid out on the Flipboard, BusinessWeek and Time apps.

There are clearly a lot of design elements including colors, fonts, images, whitespace etc. that contribute to the clarity and visual appeal of the content in each of the above examples. However, the fundamental design element that pulls it all together in all those examples above, is the grid based layout. This may be obvious to design students but I know that many people around me are not so familiar with grids – just like I was, and might appreciate some insights on how grids could help better organize and layout their content.

Here are some notes and a few pointers to resources that I found useful when I was exploring and understanding the fundamentals of grid-based design.

What is a grid?

A grid is essentially a set of intersecting vertical and horizontal lines used to help with the organization of content on a two dimensional surface. Grids have their origin in the printing world where “reference grids” were used help structure the layout for print materials. Look at any newspaper’s layout and you will see how they are laid out in grid fashion. Grids are recently becoming popular if not ubiquitous in web design.

Why use Grids?

  • Grids bring structure to content thereby improving its usability. Usability studies have shown that users are better able to quickly scan and assimilate content that is logically organized using a grid-based system.
  • “The grid is the most vivid manifestation of the will to order in graphic design.” – Khoi Vinh, Ex-Design Director of NYtimes Online. Now at subtraction.com
  • “The human eye ‘sees’ a web page a certain way, roughly from the top left to the bottom right, and the eye can be guided to see elements in a pleasing and distinctive way. ” – From  When, How & Why Grids are Used

Where can I learn more about Grids?

It is worth noting that even the examples I refer to above as not being great, use a grid based design. However, they employ grids inconsistently and poorly in conjunction with other design elements. The point is, a grid-based layout by itself cannot help carry a good design.

Hopefully that was useful to some of you. BTW,  you’ll notice that I picked a grid-based layout for this blog as well.

Leave a Reply