Designing Grid Systems @media2010
•
92 likes•15,572 views
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?
Report
Share
Designing Grid Systems @media2010
- 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.
- 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’
- 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.
- 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
- 90. Find the fixed content elements
- 95. Lining stuff up
- 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