On The Grid

From my five minute presentation at What Do You Know, an informal series of evening community events in Perth, Melbourne, Sydney and Brisbane in February 2012.

Transcript

1. Originally presented by Andy Clarke at What Do You Know in Perth, Melbourne, Sydney and Brisbane, in 2012 On the grid Andy Clarke is a digital designer, speaker, and writer whose designs have helped companies around the world to increase their sales pipeline and revenue, and charities to increase donations. He founded Stuff & Nonsense and has consulted and designed for clients including Disney Store UK, Fairfax Media, Home Office (UK), Greenpeace, ISO, SAP, STV, SunLife, WIPO, and WWF. He works on creative website and digital product designs and provides ongoing creative direction. He coaches agencies and mentors designers on dealing with clients, and delivering creative projects. If you’re looking to design better digital products and websites, develop a design system or style guide, or want to understand how design can help your business, you should talk to him. Stuff & Nonsense Ltd. Eversleigh, Lon Capel, Gwaenysgor, Flintshire, LL18 6EJ, UK For work enquiries go to stuffandnonsense.co.uk or call +44 (0)1745 851848
2. ON THE GRID with Andy Clarke
3. STV (Scottish Television)
11. OFF THE SHELF when that’s OK
18. Less Framework grid
19. 3 columns at 320px for portrait iPhone 5 columns at 480px for landscape iPhone 6 columns at 600px for Kindle 8 columns at 768px for portrait iPad 10 columns at 992px for common resolution PC 68px columns, 24px gutters
20. ROLLING YOUR OWN Like cigs, because they’re best
22. Just don’t declare any non-percentage widths.
23. ADS
24. 728 x 90 IMU (Leaderboard) 160 x 600 IMU (Wide Skycraper) 120 x 60 IMU (Button 2) 180 x 150 IMU (Rectangle) 300 x 100 IMU (3:1 Rectangle) 300 x 250 IMU (Medium Rectangle)
26. Small screens Banner
27. Medium screens Banner MMU
28. Large screens Leaderboard Banner MMU
29. 24px 24px 84px 84px 84px IMU-based grid 300 x 100 IMU (3:1 Rectangle)
30. IMU-based grid
31. 3 columns at 300px (320) 4 columns at 408px (480) 5 columns at 516px (600) 7 columns at 732px (768) 9 columns at 948px (992) 84px columns, 24px gutters
32. 300px style.css 600px 600.css 732px 768.css 948px 992.css 300 x 100 IMU (3:1 Rectangle) 300 x 100 IMU (3:1 Rectangle) 300 x 100 IMU (3:1 Rectangle) 300 x 100 IMU (3:1 Rectangle) 300 x 100 IMU (3:1 Rectangle) 300 x 100 IMU (3:1 Rectangle) 300 x 100 IMU (3:1 Rectangle)
33. 728 x 90 IMU (Leaderboard) 948px 992.css 732px 768.css 728 x 90 IMU (Leaderboard)
34. TAPS
35. The 44-pixel block is, in many ways, the basic unit of measurement for the iPhone inter­face, establishing the visual rhythm of many iPhone apps. Josh Clark
36. 44px
37. 44px
38. 44px
39. 88px
40. 22px 22px 88px 88px 88px 44px 44px 44px Fingertip-based grid
41. Fingertip-based grid
42. 3 columns at 300px (320) 4 columns at 408px (480) 5 columns at 528px (600) 7 columns at 732px (768) 9 columns at 948px (992) 88px columns, 22px gutters
43. 25px Mark Boulton’s pro-tip Use odd numbered pixels for gutters (21, 23, 25) to allow for a 1px column rule between columns 25px
44. Fingertip-based baseline 11px 22px 44px
45. 44px 44px vertical rhythm
46. 11px 44px 22px Baseline, margins and touch targets are multiples of 44px
47. SWAP GRIDS for each breakpoint
49. PHEW! @malarkey