Grids for Web Design

Transcription

1 Grids for Web Design

2 What is a Grid?

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

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

5 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.

6 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?

7 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

8 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

9 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

10 A Brief History of Grids Proportion and Geometry. Canons of page construction Van de Graaf canon Gutenberg Bible, Mainz in

11 Modernism Rational Design Jan Tschichold, 1928 On New Typography

12 Piet Mondrian, 1939

13 International Magazine for Graphic Design

14 Josef Müller-Brockmann, 1960

15 Josef Müller-Brockmann 1962

16 Wim Crouwel, 1968

17 Examples in Book Design

18 Examples in Book Design

19

20

21

22

23

24 Example in Poster Design

25 Anatomy of the Grid Field Gutter Margin Unit Hanging Line

26 Examples in Web Design

27 The Department of Advertising and Graphic Design MOMA

28 The Department of Advertising and Graphic Design MOMA 5 column grid

29 The Department of Advertising and Graphic Design MOMA 5 column grid

30 The Department of Advertising and Graphic Design MOMA 5 column grid

31 Subtraction. Khol Vinh s Website

32 Subtraction. Khol Vinh s Website 8 column grid

33 Subtraction. Khol Vinh s Website 8 column grid 95px 200px 305px 410px 515px 725px 830px 935px

34 Subtraction. Khol Vinh s Website 8 column grid

35 Subtraction. Khol Vinh s Website 8 column grid

36 Subtraction. Khol Vinh s Website 8 column grid

37 Drupal drupal.org/

38 Drupal drupal.org/ 12 column grid

39 Drupal drupal.org/ 12 column grid

40 Drupal drupal.org/ 12 column grid

41 Things That Are Brown thingsthatarebrown.com/

42 Things That Are Brown thingsthatarebrown.com/ 16 column grid

43 Things That Are Brown thingsthatarebrown.com/ 16 column grid

44 Things That Are Brown thingsthatarebrown.com/ 16 column grid

45 Designing a Grid

46

47

48 Constant factors

49 Constant factors combined with the greatest possible variability.

50

51 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

52 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