Wow that was fast, this was one of the short power sessions and  felt to me that they had crammed an hour long session it to this brief run though of designing with grids.

Mark Boulton   Owner,   Mark Boulton Design
Khoi Vinh   Design Dir,   The New York Times

After a quick run down of graphic design and how the human eye desires to see and find patterns in objects, they quickly moved to grids within websites and used yahoo as a subject.

When they say grids and term seems a little flexible as it is more about columns then grids. Now this will be quite hard to describe so bare with me as the link from their site[http://yeeaahh.subtraction.com/] appears to be down currently.

First as with all design you need to define the requirements, these should come from the problems you have defined with you site. Also you should see constraints as the mother of all design elements as they become the building blocks, with out which designers can get lost.

The example they ran through worked like this, they took the largest required element on the page or site wide i.e. a large right hand banner. Using this they divided it into columns and then used these columns as a base to design the page. There was some trial and error with this and at first two columns did not allow for the columns across the whole page to fit with out a large gap on the right hand side. Three columns was closer but 5 columns was almost perfect with the 10px gutters between columns that they suggested and allowed a total of 16 columns across the page.

Using these grids and allowing space with in the grids, i.e. Using the box model to create the gutters between grids, and padding within for spacing, etc.  Also a nice touch they mentioned is a technique employed in picture framing where you allow a larger space at the base of a picture as the human eye drops the picture within the frame naturally. This becomes increasing noticeable when items are stacked on top of each other.

To decide the horizontal grids you need to see what fits best for your design and ratios are a good way to do this for example the Greek rule of 5/8 might help. From my experience certain flexibility needs to be given as the content may define this.

The key with using grids is to maintain the design decisions you make for example padding and spacing needs to be proportional throughout the design.

The exception to these rules is where you need to provide emphasise to elements within the page, then breaking the grid rules draws the eyes attention and has the desired effect. This needs to be used sparingly to maintain is effectiveness.

My conclusion from the end of this very short sessions is that the grids system provides a uniform method of providing that valuable white/breathing space that can distinguish a good design from a great one.