Page Layout<br />
BGW chapter 6<br />Layout<br />Consistent<br />Focused<br />Minimal<br />Page Components<br />Layout Techniques<br />Verti...
Designing with Grids<br />
What are grids?<br />
One Column<br />
Two Columns<br />
Two Columns<br />
Three Columns<br />
Three Columns<br />
Four Columns<br />
Four Columns<br />
More Columns<br />
Grids: How-to<br />Figure out page size<br />Divide it into a grid<br />Start designing<br />
Figure out Page Size<br />800 X 600<br />1024 X n<br />
Figure out Page Size<br />960<br />1024 X n<br />Divisible by 3, 4, 5, 6, 8, 10, 12, 15, and 16<br />http://www.cameronmol...
http://www.welie.com/patterns/showPattern.php?patternID=grid-based-layout<br />
http://www.welie.com/patterns/showPattern.php?patternID=grid-based-layout<br />
Proportion<br />
a<br />b<br />
Golden Ratio<br />
a/b = 1.75<br />a<br />b<br />
The Rule of Thirds<br />
Does this work?<br />
Does this work?<br />NO GRID!<br />
Alignment<br />
Breaking the Rules<br />
http://dev.opera.com/articles/view/grid-design-basics-grids-for-web-page-l/<br />
http://dev.opera.com/articles/view/grid-design-basics-grids-for-web-page-l/<br />
http://www.emanuelblagonic.com/2007/02/16/developing-the-grid-that-supports-your-design/<br />
http://www.emanuelblagonic.com/2007/02/16/developing-the-grid-that-supports-your-design/<br />
Upcoming SlideShare
Loading in …5
×

grids

556 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

grids

  1. 1. Page Layout<br />
  2. 2. BGW chapter 6<br />Layout<br />Consistent<br />Focused<br />Minimal<br />Page Components<br />Layout Techniques<br />Vertical lines<br />Constrast<br />Balance<br />Repetition & consistency<br />Constraints, pitfalls solutions<br />Above the fold<br />Top left edge<br />Page width<br />
  3. 3. Designing with Grids<br />
  4. 4. What are grids?<br />
  5. 5. One Column<br />
  6. 6. Two Columns<br />
  7. 7. Two Columns<br />
  8. 8.
  9. 9.
  10. 10.
  11. 11.
  12. 12. Three Columns<br />
  13. 13. Three Columns<br />
  14. 14.
  15. 15.
  16. 16.
  17. 17.
  18. 18.
  19. 19.
  20. 20. Four Columns<br />
  21. 21. Four Columns<br />
  22. 22.
  23. 23.
  24. 24.
  25. 25.
  26. 26.
  27. 27.
  28. 28.
  29. 29.
  30. 30.
  31. 31.
  32. 32. More Columns<br />
  33. 33.
  34. 34.
  35. 35.
  36. 36. Grids: How-to<br />Figure out page size<br />Divide it into a grid<br />Start designing<br />
  37. 37. Figure out Page Size<br />800 X 600<br />1024 X n<br />
  38. 38. Figure out Page Size<br />960<br />1024 X n<br />Divisible by 3, 4, 5, 6, 8, 10, 12, 15, and 16<br />http://www.cameronmoll.com/archives/001220.html<br />
  39. 39. http://www.welie.com/patterns/showPattern.php?patternID=grid-based-layout<br />
  40. 40. http://www.welie.com/patterns/showPattern.php?patternID=grid-based-layout<br />
  41. 41. Proportion<br />
  42. 42.
  43. 43. a<br />b<br />
  44. 44. Golden Ratio<br />
  45. 45. a/b = 1.75<br />a<br />b<br />
  46. 46. The Rule of Thirds<br />
  47. 47.
  48. 48. Does this work?<br />
  49. 49. Does this work?<br />NO GRID!<br />
  50. 50. Alignment<br />
  51. 51. Breaking the Rules<br />
  52. 52.
  53. 53. http://dev.opera.com/articles/view/grid-design-basics-grids-for-web-page-l/<br />
  54. 54. http://dev.opera.com/articles/view/grid-design-basics-grids-for-web-page-l/<br />
  55. 55. http://www.emanuelblagonic.com/2007/02/16/developing-the-grid-that-supports-your-design/<br />
  56. 56. http://www.emanuelblagonic.com/2007/02/16/developing-the-grid-that-supports-your-design/<br />

×