SXSWi 07 notes: Grids Are Good and How to Design with Them | Comments (0)
Posted in Events on 12th March 2007, 4:53 pm by Stuart
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
Article comments.
Let’s build a grid.
Not Yahoo. A good problem Rudimentary but unimaginative use of grid.
yeeaahh.subtraction.com
Requirements
Design requirements. 1024×768 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
