Designing Grid Systems @media2010

18,325 views

Published on

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?

Published in: Design
1 Comment
91 Likes
Statistics
Notes
  • Recommended by Adelle Frank on her blog.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
18,325
On SlideShare
0
From Embeds
0
Number of Embeds
2,951
Actions
Shares
0
Downloads
0
Comments
1
Likes
91
Embeds 0
No embeds

No notes for slide

Designing Grid Systems @media2010

  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.
  17. Systems: Spaces to think with.
  18. Shaping the page
  19. ‘‘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
  20. ‘Tangible proportion, which together with the textblock produce an antiphonal geometry, which has the capability to bind the reader to the book’ Robert Bringhurst
  21. The ‘Page’
  22. The ‘Page’ = ‘Canvas-in’
  23. The Web
  24. ‘Your designs should embrace the diversity of browsing experiences offered by different devices.’
  25. Change is not coming. Change is here.
  26. Smartphone sales will overtake PC sales by 2011 Source: ITU, Mark Lipacis, Morgan Stanley Research.
  27. Responsive web design
  28. Flexible grid Flexible images Viewports
  29. Flexible grid Flexible images Viewports
  30. Flexible grid Flexible images Viewports
  31. Unity.
  32. Pain.
  33. Canvas In Print design legacy Un-weblike Disconnect between content and presentation
  34. Content-out Safer Embraces legacy assets Embraces the ‘way of the web’ Responsive Creates a visual connection between content & presentation
  35. Lining stuff up
  36. The stuff grids are made of.
  37. Gutters
  38. Margins
  39. Module
  40. Columns
  41. Hanging lines
  42. Fields
  43. Types of grid
  44. Columnar
  45. Hiearchical
  46. Modular
  47. Baseline
  48. Combining
  49. Hierarchical + Columnar + Baseline + Modular
  50. Less is more
  51. Odd numbers prevail
  52. Create connections
  53. Find the fixed content elements
  54. Lining stuff up
  55. Lining stuff up Content
  56. Lining stuff up Content The Web
  57. Lining stuff up Content The Web Systems
  58. Lining stuff up Content The Web Systems Order
  59. Lining stuff up Content The Web Systems Order Brains
  60. Grid systems exist so designers can be dumb in peace

×