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