Grids for What is a Grid? What is a Grid?

›› Modular and systematic approach to the layout What is a Grid?

›› Modular and systematic approach to the layout ›› Ordering system for structuring and dividing content What is a Grid?

›› Modular and systematic approach to the layout ›› Ordering system for structuring and dividing content ›› The grid divides a two-dimensional plane into smaller compartments. The fields or compartments may be the same or different in size. What is a Grid?

›› Modular and systematic approach to the layout ›› Ordering system for structuring and dividing content ›› The grid divides a two-dimensional plane into smaller compartments. The fields or compartments may be the same or different in size.

Why use Grids? What is a Grid?

›› Modular and systematic approach to the layout ›› Ordering system for structuring and dividing content ›› The grid divides a two-dimensional plane into smaller compartments. The fields or compartments may be the same or different in size.

Why use Grids?

›› To incorporate structures and organizing principles to design projects What is a Grid?

›› Modular and systematic approach to the layout ›› Ordering system for structuring and dividing content ›› The grid divides a two-dimensional plane into smaller compartments. The fields or compartments may be the same or different in size.

Why use Grids?

›› To incorporate structures and organizing principles to design projects ›› To provide consistency across different pages and sections What is a Grid?

›› Modular and systematic approach to the layout ›› Ordering system for structuring and dividing content ›› The grid divides a two-dimensional plane into smaller compartments. The fields or compartments may be the same or different in size.

Why use Grids?

›› To incorporate structures and organizing principles to design projects ›› To provide consistency across different pages and sections A Brief History of Grids

Proportion and Geometry. Canons of page construction

Van de Graaf canon Gutenberg Bible, Mainz in 1452-3 Modernism Rational Design

Jan Tschichold, 1928 On New Typography Piet Mondrian, 1939 International Magazine for 1958 - 1965 Josef Müller-Brockmann, 1960 Josef Müller-Brockmann 1962 Wim Crouwel, 1968 Examples in Book Design Examples in Book Design

Example in Poster Design Anatomy of the Grid

Field Gutter

Margin

Unit

Hanging Line Examples in Web Design The Department of Advertising and Graphic Design MOMA http://www.momadesignstudio.org/ The Department of Advertising and Graphic Design MOMA www.momadesignstudio.org/

5 column grid The Department of Advertising and Graphic Design MOMA www.momadesignstudio.org/

5 column grid The Department of Advertising and Graphic Design MOMA www.momadesignstudio.org/

5 column grid Subtraction. Khol Vinh’s Website http://www.subtraction.com/ Subtraction. Khol Vinh’s Website http://www.subtraction.com/

8 column grid Subtraction. Khol Vinh’s Website http://www.subtraction.com/

8 column grid

95px 200px 305px

410px 515px 725px 830px 935px Subtraction. Khol Vinh’s Website http://www.subtraction.com/

8 column grid Subtraction. Khol Vinh’s Website http://www.subtraction.com/

8 column grid Subtraction. Khol Vinh’s Website http://www.subtraction.com/

8 column grid Drupal drupal.org/ Drupal drupal.org/

12 column grid Drupal drupal.org/

12 column grid Drupal drupal.org/

12 column grid Things That Are Brown thingsthatarebrown.com/ Things That Are Brown thingsthatarebrown.com/

16 column grid Things That Are Brown thingsthatarebrown.com/

16 column grid Things That Are Brown thingsthatarebrown.com/

16 column grid Designing a Grid

Constant factors Constant factors combined with the greatest possible variability.

Designing a Grid

1. Canvas Browser window size, which is in turn determined by the user’s screen resolution. These are not fixed

2. Dimensions Total width in pixels, columns width, gutter width

3. Design Consistently align items on the grid lines

4. From sketches to the browser Start with HTML and CSS “The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.” Josef Müller-Brockmann