Grids for Web Design 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 Graphic Design 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