SXSW: Grids Are Good and How to Design with Them
[Panel with Mark Boulton and Khoi Vinh]
Dots to Design: How Marks Become Human Intention
Start with one dot, it is just a dot. Add another dot and humans infer design and order.
Design is about adding order to information. The grid is one of the most powerful tools in our toolbox.
Around the turn of the 20th century, graphic design was about ornamentation. A few short years later modernism hit.
See: Jan Tischold The New Typography
There is a strong overlap between the standardization of modernism and what we are doing now on the web.
So where are we with grids on the web? Crate and Barrel does this with their store but, like many retailers, they don't use web standards very well.
Comment Is Free at the Guardian is a great example of some pioneering work being done right now.
So let's build a grid.
Yahoo! is an interesting set of information challenges. Their homepage is a rudimentary use of the grid so today they will work with a similar concept.
Start with constraints.
- Full window
- Big ad
Constraints are the mother of design invention
Start off with units. Units are the building blocks of grid design. They stack to create columns and are separated by gutters. Start with three or four but twelve is ideal.
So how do you get to the size of a unit?
You can't fit three big ads on a 960px canvas.
You could start by creating a column out of the ad unit or by breaking the column into three or five which gets you fourteen columns on the page.
Once you have a great grid start laying out content.
Use the concept of the box model to build your layout. Margin = gutter, border = column, padding = padding. Always use more padding on the bottom (like in framing art) of navigation elements and other text boxes.
Certain elements, like tabs, can be off the grid. Use the grid but be flexible.
Don't just use the groups of columns, think how you can add elements to span columns to add variety.
Use ratios throughout the design for consistency.
0 TrackBacks
Listed below are links to blogs that reference this entry: SXSW: Grids Are Good and How to Design with Them.
TrackBack URL for this entry: http://www.samfelder.com/mt/mt-tb.cgi/268
Who is this guy?
Leave a comment