Designing Grid Systems @media2010

Designing Grid Systems Mark Boulton

Lining stuff up

Lining stuff up Content

Lining stuff up Content The Web

Lining stuff up Content The Web Systems

Lining stuff up Content The Web Systems Order

Lining stuff up Content The Web Systems Order Brains

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

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

Apollo 13

DCLXVI - CCCXXXIII = ?

DCLXVI - CCCXXXIII = CCCXXXIII

666 - 333 = 333

Things

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.

Order.

Systems: Spaces to think with.

Shaping the page

‘‘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

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

The ‘Page’

The ‘Page’ = ‘Canvas-in’

The Web

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

Change is not coming. Change is here.

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

Responsive web design

Flexible grid Flexible images Viewports

Unity.

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

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

Lining stuff up

The stuff grids are made of.

Gutters

Margins

Module

Columns

Hanging lines

Fields

Types of grid

Columnar

Hiearchical

Modular

Baseline

Combining

Hierarchical + Columnar + Baseline + Modular

Less is more

Odd numbers prevail

Create connections

Find the fixed content elements

Lining stuff up

Lining stuff up Content

Lining stuff up Content The Web

Lining stuff up Content The Web Systems

Lining stuff up Content The Web Systems Order

Lining stuff up Content The Web Systems Order Brains

Grid systems exist so designers can be dumb in peace

http://www.webdirections.org	1255
http://ucd-process.blogspot.com	147
http://advtype2012s1.blogspot.com.au	58
http://lanyrd.com	37
http://inspirationscout.tumblr.com	18
http://blog.dasmith.co.uk	6
http://translate.googleusercontent.com	5
http://tumble.dasmith.co.uk	4
http://webcache.googleusercontent.com	3
http://ucd-process.blogspot.it	3
http://static.slidesharecdn.com	3
http://webdirections.org	2
http://us-w1.rockmelt.com	1
http://us-w1.rockmelt.com	1
https://remote.khm.be	1
http://www.tumblr.com	1
http://drizzlin.com	1
http://twitter.com	1
https://twitter.com	1
http://advtype2012s1.blogspot.com	1

Designing Grid Systems @media2010

by markboultondesign on Jul 15, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

20 Embeds 1,549

Statistics

Designing Grid Systems @media2010 — Presentation Transcript