Page Layout

Lab guest speaker

Matthew Highstrom, Interaction Designer for GM's HMI Design department - Insider's view behind the development of the  Cadillac's User Experience driver interface as found in the Cadillac XTS

Tuesday (tomorrow) 1:30 pm

Does this work?

NO GRID!

Alignment

Designing with Grids

What are grids?

Grids Columns

One Column

Two Columns

Two Columns

Column

s

Grid

Vertical alignmen

t

Grid

Horizontal

alignment

Three Columns

Three Columns

2 4 3

Four Columns

Four Columns

3333

More Columns

Limit the number of

vertical alignments!

The point is…

Grids: How-to

1.Figure out page size

2.Divide it into a grid

3.Start designing

Figure out Page Size

800 X 600

1024 X n

Figure out Page Size

960

http://www.cameronmoll.com/archives/001220.html

1024 X n

Divisible by 3, 4, 5, 6, 8, 10, 12, 15, and 16

http://www.welie.com/patterns/showPattern.php?patternID=grid-based-layout

http://www.welie.com/patterns/showPattern.php?patternID=grid-based-layout

Proportion

b a

Golden Ratio

b a

a/b = 1.75

The Rule of Thirds

Breaking the Rules

Available resources

http://dev.opera.com/articles/view/grid-design-basics-grids-for-web-page-l/

http://dev.opera.com/articles/view/grid-design-basics-grids-for-web-page-l/

http://www.emanuelblagonic.com/2007/02/16/developing-the-grid-that-supports-your-design/

http://www.emanuelblagonic.com/2007/02/16/developing-the-grid-that-supports-your-design/