Transcription
Grids Are Good(Right?)March 10, 2007SXSW InteractiveAustin, TXKhoi VinhSubtraction.comMark BoultonMarkBoulton.co.uk
About KhoiI’m the Design Director for The New YorkTimes Online.nytimes.comI’m the author of Subtraction.com, a personalweblog where I write about design, technologyand other subjects.subtraction.com
Subtraction.com
About MarkI’m the Founder of a tiny design consultancyMark Boulton Design.markboultondesign.comI also write about design and whatever elsetakes my fancy at markboulton.co.ukmarkboulton.co.uk
MarkBoulton.co.uk
Dots to Design
From Dots to Design Any two or more marks on a single plane is adesign.
Some HistoryThe grid is the most vivid manifestation of thewill to order in graphic design.
A Brief Historyof the Grid
Looking for ReasonDivining architectural proportion from nature.Leonardo DaVinci, “The Vitruvian Man” 1492.Le Corbusier, “Modulor” 1948.
Right Up to the Modern Day
OrnamentationFrom this Leopoldo Metlicovitz, “Fleurs de Mousse,” 1914.Advertising poster for French perfume.
Rational Design to this.Theo Ballmer, “Neues Bauen” 1928.Poster for German Werkbund exhibition.
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.
The More Things Change Modernists looked to build a new aesthetic by Deriving beauty from the innate qualities ofthe machine Championing standardizationSound familiar?
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 ofthe browser Championing standardization
Paul Rand for IBMPaul Rand, IBM Annual Report, 1975
J. Müller-BrockmannTonhalle-Quartett, 1955.Juni-Festwochen Zürich,1959Juni-Festwochen Zürich,1962Musica Viva, 1968
Massimo Vignelli for National Park ServiceUnigrid as a solution tolarge-scale design andproduction of manydifferent publications.
Grids on the Web
Crate & Barrelcrateandbarrel.com
Product Display
‘Inventory’ Display
Text Forms
Comment Is Freecommentisfree.guardian.co.uk
Main Page
Article CommentsWith horizontal hierarchy.
Let’s Build a Grid
The Brand
What Should We Do?Not
A Good ProblemRudimentary butunimaginative use of grid.
Rather yeeaahh.subtraction.com
Requirements
Where to StartEvery design solution begins by defining theproblem and establishing constraints. 1024 x 768 screen Big Ad Unit
Screen Resolution 1024 px wide by 768tall
‘Natural’ Browser Size Approximately 974 pxwide by 650 px tall
Canvas Area Less left and rightmargins Approximately 960 pxwide by 650 px tall
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.
Other Ad SizesA design based on the BigAd will also accommodatethe width of the otherpopular ad unit sizesBig Ad width:336 pxMedium Rectangle300 px wide by250 px tallHalf-page300 px wide by600 px tall
The Utility of ConstraintsAd units complicate things, but they’re actuallyvery helpful because they serve as fixedconstraints.Constraints are the mother of designinvention.
Units
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.
The Rule of Threes or FoursIn general, we want tocreate units in multiples ofthree or four.Twelve is ideal, becauseit’s a multiple of three andfour.
Twelve Units Can Combine into 3 Columns Three columns of fourunits each.
Into 2 Columns Two columns of six unitseach.
Into 4 Columns Four columns of threeunits each.
Into 6 Columns Six columns of two unitseach.
Unit and Column MathFirst Try
Nonconducive SizeUnfortunately, three BigAds will not fit within our960 px width.
FormulaCanvas - ((Total Units -1) x Gutter) Total Units Unit950 - ((16 -1) x 10) 16 Unit(Don’t worry about doing it this way.)
Round-up the Ad ColumnRound up the ad unitcolumn to an even 340 pxwidth.
Divide the Ad ColumnDivide the ad column intotwo units of 165 px each,with a 10 pixel gutter.(340 - 10) 2 165
Extrapolate UnitsYields 5 units of 165 pxeach for a total width ofjust 865 px.These could besubdivided into 10 unitsbut a 10 unit grid isdifficult to work with.
Second Try
Round-up the Ad ColumnThis time round up higherto 350 px width.
Divide the Ad ColumnDivide by three this time,with two 10 px gutters, for110 px units.(350 - (2 x 10)) 3 110
Extrapolate UnitsYields 8 units of 110 pxeach for a total width of950 px.
Subdivide the UnitsEight units is a goodnumber, but we cansubdivide it even furtherinto a 16-unit grid foradded flexibility.These units are 50 pxwide
Consolidate Units into ColumnsA 16-unit grid allows us tocreate two equal columnsin the left region.
Creating Smaller ColumnsAnd to subdivide the rightregion into 2 or 3columns.
Left NavigationWe can also carve out 2units at the left to create aleft-navigation.
Third Time’s the Charm
Round-up the Ad ColumnFor a tighter look, we canround up the ad unit to338 px.
Divide the Ad ColumnDivide by five this time,with four 7 px gutters, for62 px units.(338 - (4 x 7)) 5 62
Extrapolate UnitsYields 14 units of 62 pxeach for a total width of959 px.Fourteen is a strangenumber, but sometimesthat makes things moreinteresting.
Consolidate Units into ColumnsAllows the left region to beconsolidated into 3columns.
Left NavigationAlso allows for a slightlywider and moresubstantial left-handnavigation column.
The Grid Is DoneTime to design.
Layout
Header
Header Placement
Search RegionUse the balance of thelogo area for a searchregion.
The Box Model
Grid UsageUsing a grid isn’t quite assimple as just liningelements up along itsedges.
ExampleLet’s typeset threeelements on a 9-unit grid.The instinct is to left-aligneach right on the edge ofeach column.
Add Grid LinesDivide the columns withsimple rules.
Visual TightnessSuch strict adherence tothe grid causes visualtension.
Another ProblemWhat happens when typeneeds to be inset inside abox?
Accounting for BehaviorIn digital media, thoseboxes are often behavior.That is, they may or maynot appear persistently.When they’re not there, itcan cause visualmisalignment.
Correcting AlignmentThe answer is to assumesome sort of inset for allelements.
Visual ConsistencyThis achieves visualconsistency up regardlessof whether text is inset,and allows breathing roomnext to the grid lines.
Visual Consistency
The Box ModelMARGINBORDERPADDINGTextIt’s actually useful to usethe CSS box model as amodel for imagining thevisual space around anyelement.
The Box Model in PracticeGRID LINECOLUMNTextText
Back to Search
Search Region
Search Placement
Search OptionsAlso need to add search options: Web, Images,Video, Local, Shopping and More.
Options Aligned on the GridAdmittedly, probably not the most usable display,but it’ll do for now.
Roll-over BehaviorNote the roll-over state aligns with the grid.
Navigation (and Framing)
Left-Hand Navigation ColumnConsolidate two units toform the left-handnavigation column.
Nav Items in Place
Visual Grouping through RulesAdd rules between mostnav items and to visuallycombine multi-item groupslike Small Business andServices together.
Items and RulesTake a closer look at theplacement of rules.
Adjunct to the Box ModelEvery box should be laidout using the sameprinciples as used inframing.TextPadding for all sidesshould be visually equal.But only the top, right andleft padding should bemathematically equal. Thebottom should be taller.
Place Rules on the BordersText
Visually BalancedThe result is visuallybalanced.Text
Applicable to All ElementsTextTextThe illusion of visualequality is enhancedwhen elements arestacked.
Items and RulesPhotosReal EstateEven multi-item groupsshould be treated the sameway.SportsTechTravelTVYellow PagesSMALL BUSINESS Get a Web site Domain Names eCommerce Search ListingsYEEAHH SERVICES Downloads Health Kids Mobile Voice Yeeaahh! Broadband Yeeaahh! Global
Nav in Place
Widgets
Widgets
Hidden Functionality
Nav in Place
Widget Region
Alternate RegionCarve out a layer acrossthe top and shiftnavigation down lower.
Dress Up the LayerAdd a light yellow layerand divide up the areainto equal areas — exceptthe number of units don’teasily divide.
Asymmetry Isn’t Bad
Add Labels
Add IconsIcons fromIconBuffet.com.
Odd-size Column for Weather
Remaining WidgetsHoroscope, local info andradio.
Less Visual for Right ColumnUsers have learned toregard colorful imagery infar right column asadvertising.
The Story So Far
Add Grid Lines
Features Area
Features AreaConsolidate seven unitsinto a Features marqueearea.Tabs for four main areas:Features, Entertainment,Sports, Life.
Add Tabs
TabsTabs are off the grid.Let tabs be tabs.
Lead Story Layout
Image SizesConsolidate three units into a 200 px width.Height is 120 px.
Marquee ImageBreaking out of tabs for more interest.
Other StoriesProportional photo regions below.
A Use for the Spare UnitLarge ‘More Stories ’ area.
Nearly CompleteWith images in place.
Add More InterestShift tabs up to ‘pop’ them.
Completed Feature Stories Area
Headlines & Other Modules
Replicate Tab Structure
Flow Headlines in a List
Markets Data in Right-Hand Column
Appraise the Overall EffectProblems parsing theHeadlines tabs from themarquee above.
Embellish with a Subtle Background
Similar Approach for Markets Area
AutosFour un-aligned columns.
More FeaturesNot necessary to stick tooclosely to the grid here.
Most Popular
Simple, FamiliarStraightforward lists. Can we make it moreinteresting?Yahoo.comNYTimes.com
A Different OrientationChange orientation tochange up display.
Horizontal Ordered Listing
Done!
Sibling Sites
Personals
Same Units
Mixing Column Structures
Mixing Column Structures
Special ThanksEndwww.iconbuffet.com
The grid is the most vivid manifestation of the will to order in graphic design. A Brief History of the Grid. Looking for Reason Divining architectural proportion from nature. Leonardo DaVinci, “The Vitruvian Man” 1492. Le Corbusier, “Modulor” 1948. Right Up to the Modern Day. Ornamentation From this Leopoldo Metlicovitz, “Fleurs de Mousse,” 1914. Advertising poster for French .
