SXSWi 07 notes: Grids Are Good and How to Design with Them

The following are my panel notes from SXSW. As I am not the fastest typer I have paraphrased what was said. Should you notice any mistakes please do point them out in the comments for corrections.

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

Any two dots on a plane makes a design.

The grid is the most vivid manifestation of the will to order in graphic desing.

A brief history of the grid.

Started with Leaonard da Vinci, Le courboursier.

Modernism wanted to rationalise desing. Jan Tshichold the new typography.

J Muller Brockman embraced the limitations of print

Massimo Vignelli for National Park Service

Examples of Grids -

Create&Barrel

http//commentisfree.co.uk

Article comments.

Let's build a grid.

Not Yahoo. A good problem Rudimentary but unimaginative use of grid.

yeeaahh.subtraction.com

Requirements

Design requirements. 1024x768 actually 960px by 650px

Big ad unit: 336px wide by 280px

Constraints are the mother of design invention.

Units

Units are the building blocks of grid design.

Multiples of 3 and 4 are best. 12 is good.

Unit and column math first try...

Can't have 3x336px within the 960px

Round up to 340px

Second try. Round up to 350px 8 units of 110px.

A 16 unit grid is a good start. We can carve out 2 units at the left coloumn for nav.

Divide the ad to 5. 14 units is an odd number to use but sometimes this can make things more interesting.

This allows for a wider and more substantial nav on the left.

Layout

Header and search area at the top.

The box model comes in handy for aligning the content to the grid.

Put the nav content in the left. Adding space at the bottom of the frame through padding will make the eye see visual balance all the way around.

Adding widgets to the page.

We add the widgets to underneath the header. Added the weather icons to the right hand side.

The remaining widgetsa are added to above the ad on the right hand side. We add grid lines between those areas.

Features area.

Is a tabbed area. We break the grid to bring the content to the fore for the user.

Sometimes it's not important to stick to the grid.

Most Popular.

We span the bottom area.

Sibling sites.

Yeeaahh Personals.

Same 14px grid. TRied to be more playful combined the units into columns.

Questions

Q: how do you work out the grids.

Mark: I use ratios. Golden mean. The horizontal rules are dictated by the content.

Khoi: I just eyeball it