14 grids

826 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
826
On SlideShare
0
From Embeds
0
Number of Embeds
565
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

14 grids

  1. 1. Page Layout
  2. 2. Lab guest speaker Matthew Highstrom, Interaction Designer for GMs HMI Design department - Insiders view behind the development of the Cadillacs User Experience driver interface as found in the Cadillac XTS Tuesday (tomorrow) 1:30 pm
  3. 3. Does this work? NO GRID!
  4. 4. Alignment
  5. 5. Designing with Grids
  6. 6. What are grids? Grids Columns
  7. 7. One Column
  8. 8. Two Columns
  9. 9. Two Columns
  10. 10. Verticalalignment
  11. 11. Horizontalalignment
  12. 12. Three Columns
  13. 13. Three Columns
  14. 14. Four Columns
  15. 15. Four Columns
  16. 16. More Columns
  17. 17. The point is…
  18. 18. Grids: How-to1. Figure out page size2. Divide it into a grid3. Start designing
  19. 19. Figure out Page Size
  20. 20. Figure out Page Size Divisible by 3, 4, 5, 6, 8, 10, 12, 15, and 16http://www.cameronmoll.com/archives/001220.html
  21. 21. http://www.welie.com/patterns/showPattern.php?patternID=grid-based-layout
  22. 22. http://www.welie.com/patterns/showPattern.php?patternID=grid-based-layout
  23. 23. Proportion
  24. 24. b a
  25. 25. Golden Ratio
  26. 26. b a
  27. 27. The Rule of Thirds
  28. 28. Breaking the Rules
  29. 29. Available resources
  30. 30. http://dev.opera.com/articles/view/grid-design-basics-grids-for-web-page-l/
  31. 31. http://dev.opera.com/articles/view/grid-design-basics-grids-for-web-page-l/
  32. 32. http://www.emanuelblagonic.com/2007/02/16/developing-the-grid-that-supports-your-design/
  33. 33. http://www.emanuelblagonic.com/2007/02/16/developing-the-grid-that-supports-your-design/

×