1. Page Layout

2. 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

3. Does this work?
NO
GRID!

4. Alignment

5. Designing with Grids

6. What are grids?
Grids Columns

7. One Column

8. Two Columns

9. Two Columns

12. Vertical
alignment

13. Horizontal
alignment

14. Three Columns

15. Three Columns

22. Four Columns

23. Four Columns

34. More Columns

38. The point is…

39. Grids: How-to
1. Figure out page
size
2. Divide it into a
grid
3. Start designing

40. Figure out Page Size

41. Figure out Page Size
Divisible by 3, 4, 5, 6, 8,
10, 12, 15, and 16
http://www.cameronmoll.com/archives/001220.html

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

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

44. Proportion

46. b a

47. Golden Ratio

48. b a

49. The Rule of Thirds

51. Breaking the Rules

53. Available resources

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

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

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

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