際際滷

際際滷Share a Scribd company logo
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
14 grids
14 grids
Vertical
alignment
Horizontal
alignment
Three Columns
Three Columns
14 grids
14 grids
14 grids
14 grids
14 grids
14 grids
Four Columns
Four Columns
14 grids
14 grids
14 grids
14 grids
14 grids
14 grids
14 grids
14 grids
14 grids
14 grids
More Columns
14 grids
14 grids
14 grids
The point is
Grids: How-to

1. Figure out page
   size
2. Divide it into a
   grid
3. Start designing
Figure out Page Size
Figure out Page Size




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


http://www.cameronmoll.com/archives/001220.html
http://www.welie.com/patterns/showPattern.php?patternID=grid-based-layout
http://www.welie.com/patterns/showPattern.php?patternID=grid-
based-layout
Proportion
14 grids
b   a
Golden Ratio
b   a
The Rule of Thirds
14 grids
Breaking the Rules
14 grids
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/

More Related Content