Your SlideShare is downloading. ×
Grids are good
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Grids are good

1,239
views

Published on

Published in: Technology, Business

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,239
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
34
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Grids Are Good(Right?)March 10, 2007SXSW InteractiveAustin, TXKhoi Vinh Mark BoultonSubtraction.com MarkBoulton.co.uk
  • 2. About KhoiI’m the Design Director for The New York nytimes.comTimes Online.I’m the author of Subtraction.com, a personal subtraction.comweblog where I write about design, technologyand other subjects.
  • 3. Subtraction.com
  • 4. About MarkI’m the Founder of a tiny design consultancy markboultondesign.comMark Boulton Design.I also write about design and whatever else markboulton.co.uktakes my fancy at markboulton.co.uk
  • 5. MarkBoulton.co.uk
  • 6. Dots to Design
  • 7. From Dots to Design• Any two or more marks on a single plane is a design.
  • 8. Some HistoryThe grid is the most vivid manifestation of thewill to order in graphic design.
  • 9. A Brief Historyof the Grid
  • 10. Looking for ReasonDivining architectural proportion from nature. Leonardo DaVinci, “The Vitruvian Man” 1492. Le Corbusier, “Modulor” 1948.
  • 11. Right Up to the Modern Day
  • 12. OrnamentationFrom this…Leopoldo Metlicovitz, “Fleurs de Mousse,” 1914.Advertising poster for French perfume.
  • 13. Rational Design…to this.Theo Ballmer, “Neues Bauen” 1928.Poster for German Werkbund exhibition.
  • 14. New IdeasRationalism became thenew imperative for design.Out with decoration andformalism, in with logicand standardization.Jan Tschichold, “Die neue Typographie” 1928.Instructions for the standardized layout of A4 letterhead.
  • 15. The More Things Change…Modernists looked to build a new aesthetic by • Deriving beauty from the innate qualities of the machine • Championing standardizationSound familiar?
  • 16. …The More They Stay the SameThere is a strong overlap between whatmotivated grid usage nearly a century ago andwhat motivates grid usage today. • Deriving beauty from the innate qualities of the browser • Championing standardization
  • 17. Paul Rand for IBM Paul Rand, IBM Annual Report, 1975
  • 18. J. Müller-Brockmann Tonhalle-Quartett, 1955. Juni-Festwochen Zürich, Juni-Festwochen Zürich, Musica Viva, 1968 1959 1962
  • 19. Massimo Vignelli for National Park ServiceUnigrid as a solution tolarge-scale design andproduction of manydifferent publications.
  • 20. Grids on the Web
  • 21. Crate & Barrelcrateandbarrel.com
  • 22. Product Display
  • 23. ‘Inventory’ Display
  • 24. Text Forms
  • 25. Comment Is Freecommentisfree.guardian.co.uk
  • 26. Main Page
  • 27. Article CommentsWith horizontal hierarchy.
  • 28. Let’s Build a Grid
  • 29. The Brand
  • 30. What Should We Do? Not
  • 31. A Good ProblemRudimentary butunimaginative use of grid.
  • 32. Rather… yeeaahh.subtraction.com
  • 33. Requirements
  • 34. Where to StartEvery design solution begins by defining theproblem and establishing constraints. • 1024 x 768 screen • Big Ad Unit
  • 35. Screen Resolution • 1024 px wide by 768 tall
  • 36. ‘Natural’ Browser Size • Approximately 974 px wide by 650 px tall
  • 37. Canvas Area • Less left and right margins • Approximately 960 px wide by 650 px tall
  • 38. The Big AdThe most useful ad unit to design for is the BigAd.336 px wide by 280 px tall as established by theInternet Advertising Bureau.
  • 39. Other Ad Sizes Big Ad width: 336 pxA design based on the BigAd will also accommodate Medium Rectangle 300 px wide bythe width of the other 250 px tallpopular ad unit sizes Half-page 300 px wide by 600 px tall
  • 40. The Utility of ConstraintsAd units complicate things, but they’re actuallyvery helpful because they serve as fixedconstraints.Constraints are the mother of designinvention.
  • 41. Units
  • 42. Units & ColumnsUnits are the basic building blocks of a grid.They’re all uniform.Columns are the groupings of units that createthe visual structure of the page. They are notnecessarily uniform.In this example, four units are combined to create a single column.
  • 43. The Rule of Threes… or Fours In general, we want to create units in multiples of three or four. Twelve is ideal, because it’s a multiple of three and four.
  • 44. Twelve Units Can Combine into 3 Columns… Three columns of four units each.
  • 45. Into 2 Columns… Two columns of six units each.
  • 46. Into 4 Columns… Four columns of three units each.
  • 47. Into 6 Columns… Six columns of two units each.
  • 48. Unit and Column MathFirst Try
  • 49. Nonconducive Size Unfortunately, three Big Ads will not fit within our 960 px width.
  • 50. Formula Canvas - ((Total Units -1) x Gutter) ÷ Total Units = Unit 950 - ((16 -1) x 10) ÷ 16 = Unit (Don’t worry about doing it this way.)
  • 51. Round-up the Ad Column Round up the ad unit column to an even 340 px width.
  • 52. Divide the Ad Column Divide the ad column into two units of 165 px each, with a 10 pixel gutter. (340 - 10) ÷ 2 = 165
  • 53. Extrapolate Units Yields 5 units of 165 px each for a total width of just 865 px. These could be subdivided into 10 units but a 10 unit grid is difficult to work with.
  • 54. Second Try
  • 55. Round-up the Ad Column This time round up higher to 350 px width.
  • 56. Divide the Ad Column Divide by three this time, with two 10 px gutters, for 110 px units. (350 - (2 x 10)) ÷ 3 = 110
  • 57. Extrapolate Units Yields 8 units of 110 px each for a total width of 950 px.
  • 58. Subdivide the Units Eight units is a good number, but we can subdivide it even further into a 16-unit grid for added flexibility. These units are 50 px wide
  • 59. Consolidate Units into Columns A 16-unit grid allows us to create two equal columns in the left region.
  • 60. Creating Smaller Columns And to subdivide the right region into 2 or 3 columns.
  • 61. Left Navigation We can also carve out 2 units at the left to create a left-navigation.
  • 62. Third Time’s the Charm
  • 63. Round-up the Ad Column For a tighter look, we can round up the ad unit to 338 px.
  • 64. Divide the Ad Column Divide by five this time, with four 7 px gutters, for 62 px units. (338 - (4 x 7)) ÷ 5 = 62
  • 65. Extrapolate Units Yields 14 units of 62 px each for a total width of 959 px. Fourteen is a strange number, but sometimes that makes things more interesting.
  • 66. Consolidate Units into Columns Allows the left region to be consolidated into 3 columns.
  • 67. Left Navigation Also allows for a slightly wider and more substantial left-hand navigation column.
  • 68. The Grid Is DoneTime to design.
  • 69. Layout
  • 70. Header
  • 71. Header Placement
  • 72. Search Region Use the balance of the logo area for a search region.
  • 73. The Box Model
  • 74. Grid Usage Using a grid isn’t quite as simple as just lining elements up along its edges.
  • 75. Example Let’s typeset three elements on a 9-unit grid. The instinct is to left-align each right on the edge of each column.
  • 76. Add Grid Lines Divide the columns with simple rules.
  • 77. Visual Tightness Such strict adherence to the grid causes visual tension.
  • 78. Another Problem What happens when type needs to be inset inside a box?
  • 79. Accounting for Behavior In digital media, those boxes are often behavior. That is, they may or may not appear persistently. When they’re not there, it can cause visual misalignment.
  • 80. Correcting Alignment The answer is to assume some sort of inset for all elements.
  • 81. Visual Consistency This achieves visual consistency up regardless of whether text is inset, and allows breathing room next to the grid lines.
  • 82. Visual Consistency
  • 83. The Box ModelMARGIN It’s actually useful to use the CSS box model as a BORDER model for imagining the visual space around any PADDING element. Text
  • 84. The Box Model in Practice GRID LINE COLUMN Text Text
  • 85. Back to Search
  • 86. Search Region
  • 87. Search Placement
  • 88. Search OptionsAlso need to add search options: Web, Images,Video, Local, Shopping and More.
  • 89. Options Aligned on the GridAdmittedly, probably not the most usable display,but it’ll do for now.
  • 90. Roll-over BehaviorNote the roll-over state aligns with the grid.
  • 91. Navigation (and Framing)
  • 92. Left-Hand Navigation Column Consolidate two units to form the left-hand navigation column.
  • 93. Nav Items in Place
  • 94. Visual Grouping through Rules Add rules between most nav items and to visually combine multi-item groups like Small Business and Services together.
  • 95. Items and RulesTake a closer look at theplacement of rules.
  • 96. Adjunct to the Box Model Every box should be laid out using the same principles as used in framing. Padding for all sides should be visually equal. But only the top, right and Text left padding should be mathematically equal. The bottom should be taller.
  • 97. Place Rules on the Borders Text
  • 98. Visually Balanced The result is visually balanced. Text
  • 99. Applicable to All Elements The illusion of visual equality is enhanced Text when elements are stacked. Text
  • 100. Items and Rules Photos Real EstateEven multi-item groups Sportsshould be treated the same Techway. Travel TV Yellow Pages SMALL BUSINESS • Get a Web site • Domain Names • eCommerce • Search Listings YEEAHH SERVICES • Downloads • Health • Kids • Mobile • Voice • Yeeaahh! Broadband • Yeeaahh! Global
  • 101. Nav in Place
  • 102. Widgets
  • 103. Widgets
  • 104. Hidden Functionality
  • 105. Nav in Place
  • 106. Widget Region
  • 107. Alternate Region Carve out a layer across the top and shift navigation down lower.
  • 108. Dress Up the Layer Add a light yellow layer and divide up the area into equal areas — except the number of units don’t easily divide.
  • 109. Asymmetry Isn’t Bad
  • 110. Add Labels
  • 111. Add Icons Icons from IconBuffet.com.
  • 112. Odd-size Column for Weather
  • 113. Remaining Widgets Horoscope, local info and radio.
  • 114. Less Visual for Right Column Users have learned to regard colorful imagery in far right column as advertising.
  • 115. The Story So Far
  • 116. Add Grid Lines
  • 117. Features Area
  • 118. Features Area Consolidate seven units into a Features marquee area. Tabs for four main areas: Features, Entertainment, Sports, Life.
  • 119. Add Tabs
  • 120. TabsTabs are off the grid.Let tabs be tabs.
  • 121. Lead Story Layout
  • 122. Image SizesConsolidate three units into a 200 px width.Height is 120 px.
  • 123. Marquee ImageBreaking out of tabs for more interest.
  • 124. Other StoriesProportional photo regions below.
  • 125. A Use for the Spare UnitLarge ‘More Stories…’ area.
  • 126. Nearly CompleteWith images in place.
  • 127. Add More InterestShift tabs up to ‘pop’ them.
  • 128. Completed Feature Stories Area
  • 129. Headlines & Other Modules
  • 130. Replicate Tab Structure
  • 131. Flow Headlines in a List
  • 132. Markets Data in Right-Hand Column
  • 133. Appraise the Overall Effect Problems parsing the Headlines tabs from the marquee above.
  • 134. Embellish with a Subtle Background
  • 135. Similar Approach for Markets Area
  • 136. Autos Four un-aligned columns.
  • 137. More Features Not necessary to stick too closely to the grid here.
  • 138. Most Popular
  • 139. Simple, FamiliarStraightforward lists. Can we make it moreinteresting?Yahoo.com NYTimes.com
  • 140. A Different Orientation Change orientation to change up display.
  • 141. Horizontal Ordered Listing
  • 142. Done!
  • 143. Sibling Sites
  • 144. Personals
  • 145. Same Units
  • 146. Mixing Column Structures
  • 147. Mixing Column Structures
  • 148. Special ThanksEnd www.iconbuffet.com