Page Layout
BGW chapter 6 Layout                              Layout Techniques   Consistent                           Vertical li...
Designing with Grids
What are grids?        Grids     Columns
One Column
Two Columns
Two Columns
Three Columns
Three Columns
Four Columns
Four Columns
More Columns
Grids: How-to1. Figure out page   size2. Divide it into a   grid3. Start designing
Figure out Page Size
Figure out Page Size                                              Divisible by                                      3, 4, ...
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
The Rule of Thirds
Does this work?
Does this work?                  NO                  GRID!
Alignment
Breaking the Rules
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/
grids
grids
grids
grids
grids
grids
grids
grids
grids
grids
grids
grids
grids
grids
grids
grids
grids
grids
grids
grids
grids
grids
grids
grids
grids
grids
Upcoming SlideShare
Loading in …5
×

grids

1,371 views
1,327 views

Published on

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,371
On SlideShare
0
From Embeds
0
Number of Embeds
784
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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/

×