The document discusses page layout techniques using grids. It explains that grids involve dividing the page into columns and rows to help with alignment and consistency. Some key aspects covered include figuring out the page size, dividing it into a grid structure, starting the design process within that grid, and addressing techniques like vertical lines, contrast, balance and repetition to create an organized layout. Common grid configurations with one, two, three or four columns are presented along with tips on proportion, the rule of thirds and when it may be acceptable to break from the rigid grid.

1. Page Layout

2. BGW chapter 6 Layout Consistent Focused Minimal Page Components Layout Techniques Vertical lines Constrast Balance Repetition & consistency Constraints, pitfalls solutions Above the fold Top left edge Page width

3. Designing with Grids

4. What are grids?

5. One Column

6. Two Columns

7. Two Columns

12. Three Columns

13. Three Columns

20. Four Columns

21. Four Columns

32. More Columns

36. Grids: How-to Figure out page size Divide it into a grid Start designing

37. Figure out Page Size 800 X 600 1024 X n

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

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

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

41. Proportion

43. a b

44. Golden Ratio

45. a/b = 1.75 a b

46. The Rule of Thirds

48. Does this work?

49. Does this work? NO GRID!

50. Alignment

51. Breaking the Rules

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

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

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

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