Grid systems have been used in print design, architecture and interior design for generations. Now, on the web, the same rules of grid system composition and usage no longer apply. Content is viewed in many ways; from RSS feeds to email. Content is viewed on many devices; from mobile phones to laptops. Users can manipulate the browser, they can remove content, resize the canvas, resize the typefaces. A designer is no longer in control of this presentation. So where do grid systems fit in to all that?

1. Designing
Grid Systems
Mark Boulton

2. Lining stuff up

3. Lining stuff up
Content

4. Lining stuff up
Content
The Web

5. Lining stuff up
Content
The Web
Systems

6. Lining stuff up
Content
The Web
Systems
Order

7. Lining stuff up
Content
The Web
Systems
Order
Brains

8. ‘The Human Brain
was never
contained in
the head’
Andy Clarke (the professor of Philosophy, not the CSS man of mystery)

9. ‘Our brains make
the world smart,
so we can be
dumb in peace’

10. Apollo 13

11. DCLXVI - CCCXXXIII = ?

12. DCLXVI - CCCXXXIII =
CCCXXXIII

13. 666 - 333 =
333

14. Things

15. We ‘embed’ stuff *
with intelligence
all around us
* Objects, processes, software applications, cars, washing machines, toasters,
smart phones, not-so-smart phones, computers, number systems, language and
on and on and on.

16. Order.

19. Systems:
Spaces to
think with.

26. Shaping the page

27. ‘‘Though largely forgotten
today, methods and rules
upon which it is impossible
to improve have been
developed for centuries.
To produce perfect books
these rules have to be
brought to life.’
Jan Tschichold

30. ‘Tangible proportion, which
together with the textblock
produce an antiphonal
geometry, which has the
capability to bind the
reader to the book’
Robert Bringhurst

31. The ‘Page’

32. The ‘Page’
= ‘Canvas-in’

33. The Web

35. ‘Your designs should embrace the
diversity of browsing experiences
offered by different devices.’

36. Change is not coming.
Change is here.

38. Smartphone sales
will overtake PC sales
by 2011
Source: ITU, Mark Lipacis, Morgan Stanley Research.

39. Responsive web
design

41. Flexible grid
Flexible images
Viewports

42. Flexible grid
Flexible images
Viewports

43. Flexible grid
Flexible images
Viewports

50. Unity.

51. Pain.

52. Canvas In
Print design legacy
Un-weblike
Disconnect between content and presentation

53. Content-out
Safer
Embraces legacy assets
Embraces the ‘way of the web’
Responsive
Creates a visual connection between content & presentation

54. Lining stuff up

55. The stuff grids are
made of.

57. Gutters

58. Margins

59. Module

60. Columns

61. Hanging lines

62. Fields

63. Types of grid

64. Columnar

66. Hiearchical

70. Modular

72. Baseline

78. Combining

82. Hierarchical +
Columnar +
Baseline +
Modular

87. Less is more

88. Odd numbers
prevail

89. Create
connections

90. Find the fixed
content elements

95. Lining stuff up

96. Lining stuff up
Content

97. Lining stuff up
Content
The Web

98. Lining stuff up
Content
The Web
Systems

99. Lining stuff up
Content
The Web
Systems
Order

100. Lining stuff up
Content
The Web
Systems
Order
Brains

101. Grid systems
exist so designers
can be dumb
in peace