Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

grids

1,444 views

Published on

Published in: Technology, Design
  • Be the first to comment

grids

  1. 1. Page Layout
  2. 2. BGW chapter 6 Layout  Layout Techniques  Consistent  Vertical lines  Focused  Constrast  Minimal  Balance  Repetition & Page Components consistency  Constraints, pitfalls solutions  Above the fold  Top left edge  Page width
  3. 3. Designing with Grids
  4. 4. What are grids? Grids Columns
  5. 5. One Column
  6. 6. Two Columns
  7. 7. Two Columns
  8. 8. Three Columns
  9. 9. Three Columns
  10. 10. Four Columns
  11. 11. Four Columns
  12. 12. More Columns
  13. 13. Grids: How-to1. Figure out page size2. Divide it into a grid3. Start designing
  14. 14. Figure out Page Size
  15. 15. Figure out Page Size Divisible by 3, 4, 5, 6, 8, 10, 12, 15, a nd 16http://www.cameronmoll.com/archives/001220.html
  16. 16. http://www.welie.com/patterns/showPattern.php?patternID=grid-based-layout
  17. 17. http://www.welie.com/patterns/showPattern.php?patternID=grid-based-layout
  18. 18. Proportion
  19. 19. b a
  20. 20. Golden Ratio
  21. 21. b a
  22. 22. The Rule of Thirds
  23. 23. Does this work?
  24. 24. Does this work? NO GRID!
  25. 25. Alignment
  26. 26. Breaking the Rules
  27. 27. http://dev.opera.com/articles/view/grid-design-basics-grids-for-web-page-l/
  28. 28. http://dev.opera.com/articles/view/grid-design-basics-grids-for-web-page-l/
  29. 29. http://www.emanuelblagonic.com/2007/02/16/developing-the-grid-that-supports-your-design/
  30. 30. http://www.emanuelblagonic.com/2007/02/16/developing-the-grid-that-supports-your-design/

×