grids are good 1 - santa barbara city college...every design solution begins by defining the...
TRANSCRIPT
![Page 1: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/1.jpg)
Grids Are Good(Right?)
March 10, 2007SXSW InteractiveAustin, TX
Khoi VinhSubtraction.com
Mark BoultonMarkBoulton.co.uk
![Page 2: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/2.jpg)
About Khoi
I’m the Design Director for The New York Times Online.
I’m the author of Subtraction.com, a personal weblog where I write about design, technology and other subjects.
nytimes.com
subtraction.com
![Page 3: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/3.jpg)
Subtraction.com
![Page 4: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/4.jpg)
About Mark
I’m the Founder of a tiny design consultancy Mark Boulton Design.
I also write about design and whatever else takes my fancy at markboulton.co.uk
markboultondesign.com
markboulton.co.uk
![Page 5: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/5.jpg)
MarkBoulton.co.uk
![Page 6: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/6.jpg)
Dots to Design
![Page 7: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/7.jpg)
![Page 8: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/8.jpg)
From Dots to Design
• Any two or more marks on a single plane is a design.
![Page 9: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/9.jpg)
![Page 10: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/10.jpg)
![Page 11: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/11.jpg)
![Page 12: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/12.jpg)
Some History
The grid is the most vivid manifestation of the will to order in graphic design.
![Page 13: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/13.jpg)
A Brief History of the Grid
![Page 14: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/14.jpg)
Looking for Reason
Divining architectural proportion from nature.
Le Corbusier, “Modulor” 1948.Leonardo DaVinci, “The Vitruvian Man” 1492.
![Page 15: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/15.jpg)
Right Up to the Modern Day
![Page 16: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/16.jpg)
Ornamentation
From this…
Leopoldo Metlicovitz, “Fleurs de Mousse,” 1914.Advertising poster for French perfume.
![Page 17: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/17.jpg)
Rational Design
…to this.
Theo Ballmer, “Neues Bauen” 1928.Poster for German Werkbund exhibition.
![Page 18: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/18.jpg)
New Ideas
Rationalism became the new imperative for design.
Out with decoration and formalism, in with logic and standardization.
Jan Tschichold, “Die neue Typographie” 1928.Instructions for the standardized layout of A4 letterhead.
![Page 19: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/19.jpg)
The More Things Change…
Modernists looked to build a new aesthetic by
• Deriving beauty from the innate qualities of the machine
• Championing standardization
Sound familiar?
![Page 20: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/20.jpg)
…The More They Stay the Same
There is a strong overlap between what motivated grid usage nearly a century ago and what motivates grid usage today.
• Deriving beauty from the innate qualities of the browser
• Championing standardization
![Page 21: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/21.jpg)
Paul Rand for IBM
Paul Rand, IBM Annual Report, 1975
![Page 22: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/22.jpg)
J. Müller-Brockmann
Tonhalle-Quartett, 1955. Juni-Festwochen Zürich, 1959
Juni-Festwochen Zürich, 1962
Musica Viva, 1968
![Page 23: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/23.jpg)
Massimo Vignelli for National Park Service
Unigrid as a solution to large-scale design and production of many different publications.
![Page 24: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/24.jpg)
Grids on the Web
![Page 25: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/25.jpg)
Crate & Barrelcrateandbarrel.com
![Page 26: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/26.jpg)
Product Display
![Page 27: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/27.jpg)
‘Inventory’ Display
![Page 28: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/28.jpg)
Text Forms
![Page 29: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/29.jpg)
Comment Is Freecommentisfree.guardian.co.uk
![Page 30: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/30.jpg)
Main Page
![Page 31: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/31.jpg)
Article Comments
With horizontal hierarchy.
![Page 32: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/32.jpg)
Let’s Build a Grid
![Page 33: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/33.jpg)
The Brand
![Page 34: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/34.jpg)
What Should We Do?
Not
![Page 35: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/35.jpg)
A Good Problem
Rudimentary but unimaginative use of grid.
![Page 36: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/36.jpg)
Rather…
yeeaahh.subtraction.com
![Page 37: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/37.jpg)
Requirements
![Page 38: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/38.jpg)
Where to Start
Every design solution begins by defining the problem and establishing constraints.
• 1024 x 768 screen
• Big Ad Unit
![Page 39: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/39.jpg)
Screen Resolution
• 1024 px wide by 768 tall
![Page 40: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/40.jpg)
‘Natural’ Browser Size
• Approximately 974 px wide by 650 px tall
![Page 41: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/41.jpg)
Canvas Area
• Less left and right margins
• Approximately 960 px wide by 650 px tall
![Page 42: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/42.jpg)
The Big Ad
The most useful ad unit to design for is the Big Ad.
336 px wide by 280 px tall as established by the Internet Advertising Bureau.
![Page 43: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/43.jpg)
Big Ad width:336 px
Other Ad Sizes
A design based on the Big Ad will also accommodate the width of the other popular ad unit sizes
Medium Rectangle300 px wide by
250 px tall
Half-page300 px wide by
600 px tall
![Page 44: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/44.jpg)
The Utility of Constraints
Ad units complicate things, but they’re actually very helpful because they serve as fixed constraints.
Constraints are the mother of design invention.
![Page 45: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/45.jpg)
Units
![Page 46: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/46.jpg)
Units & Columns
Units are the basic building blocks of a grid. They’re all uniform.
Columns are the groupings of units that create the visual structure of the page. They are not necessarily uniform.
In this example, four units are combined to create a single column.
![Page 47: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/47.jpg)
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.
![Page 48: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/48.jpg)
Twelve Units Can Combine into 3 Columns…
Three columns of four units each.
![Page 49: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/49.jpg)
Into 2 Columns…
Two columns of six units each.
![Page 50: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/50.jpg)
Into 4 Columns…
Four columns of three units each.
![Page 51: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/51.jpg)
Into 6 Columns…
Six columns of two units each.
![Page 52: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/52.jpg)
Unit and Column MathFirst Try
![Page 53: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/53.jpg)
Nonconducive Size
Unfortunately, three Big Ads will not fit within our 960 px width.
![Page 54: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/54.jpg)
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.)
![Page 55: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/55.jpg)
Round-up the Ad Column
Round up the ad unit column to an even 340 px width.
![Page 56: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/56.jpg)
Divide the Ad Column
Divide the ad column into two units of 165 px each, with a 10 pixel gutter.
(340 - 10) ÷ 2 = 165
![Page 57: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/57.jpg)
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.
![Page 58: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/58.jpg)
Second Try
![Page 59: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/59.jpg)
Round-up the Ad Column
This time round up higher to 350 px width.
![Page 60: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/60.jpg)
Divide the Ad Column
Divide by three this time, with two 10 px gutters, for 110 px units.
(350 - (2 x 10)) ÷ 3 = 110
![Page 61: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/61.jpg)
Extrapolate Units
Yields 8 units of 110 px each for a total width of 950 px.
![Page 62: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/62.jpg)
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
![Page 63: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/63.jpg)
Consolidate Units into Columns
A 16-unit grid allows us to create two equal columns in the left region.
![Page 64: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/64.jpg)
Creating Smaller Columns
And to subdivide the right region into 2 or 3 columns.
![Page 65: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/65.jpg)
Left Navigation
We can also carve out 2 units at the left to create a left-navigation.
![Page 66: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/66.jpg)
Third Time’s the Charm
![Page 67: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/67.jpg)
Round-up the Ad Column
For a tighter look, we can round up the ad unit to 338 px.
![Page 68: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/68.jpg)
Divide the Ad Column
Divide by five this time, with four 7 px gutters, for 62 px units.
(338 - (4 x 7)) ÷ 5 = 62
![Page 69: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/69.jpg)
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.
![Page 70: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/70.jpg)
Consolidate Units into Columns
Allows the left region to be consolidated into 3 columns.
![Page 71: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/71.jpg)
Left Navigation
Also allows for a slightly wider and more substantial left-hand navigation column.
![Page 72: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/72.jpg)
The Grid Is Done
Time to design.
![Page 73: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/73.jpg)
Layout
![Page 74: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/74.jpg)
Header
![Page 75: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/75.jpg)
Header Placement
![Page 76: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/76.jpg)
Search Region
Use the balance of the logo area for a search region.
![Page 77: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/77.jpg)
The Box Model
![Page 78: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/78.jpg)
Grid Usage
Using a grid isn’t quite as simple as just lining elements up along its edges.
![Page 79: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/79.jpg)
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.
![Page 80: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/80.jpg)
Add Grid Lines
Divide the columns with simple rules.
![Page 81: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/81.jpg)
Visual Tightness
Such strict adherence to the grid causes visual tension.
![Page 82: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/82.jpg)
Another Problem
What happens when type needs to be inset inside a box?
![Page 83: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/83.jpg)
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.
![Page 84: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/84.jpg)
Correcting Alignment
The answer is to assume some sort of inset for all elements.
![Page 85: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/85.jpg)
Visual Consistency
This achieves visual consistency up regardless of whether text is inset, and allows breathing room next to the grid lines.
![Page 86: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/86.jpg)
Visual Consistency
![Page 87: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/87.jpg)
The Box Model
It’s actually useful to use the CSS box model as a model for imagining the visual space around any element.
Text
MARGIN
BORDER
PADDING
![Page 88: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/88.jpg)
The Box Model in Practice
Text Text
COLUMNGRID LINE
![Page 89: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/89.jpg)
Back to Search
![Page 90: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/90.jpg)
Search Region
![Page 91: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/91.jpg)
Search Placement
![Page 92: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/92.jpg)
Search Options
Also need to add search options: Web, Images, Video, Local, Shopping and More.
![Page 93: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/93.jpg)
Options Aligned on the Grid
Admittedly, probably not the most usable display, but it’ll do for now.
![Page 94: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/94.jpg)
Roll-over Behavior
Note the roll-over state aligns with the grid.
![Page 95: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/95.jpg)
Navigation (and Framing)
![Page 96: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/96.jpg)
Left-Hand Navigation Column
Consolidate two units to form the left-hand navigation column.
![Page 97: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/97.jpg)
Nav Items in Place
![Page 98: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/98.jpg)
Visual Grouping through Rules
Add rules between most nav items and to visually combine multi-item groups like Small Business and Services together.
![Page 99: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/99.jpg)
Items and Rules
Take a closer look at the placement of rules.
![Page 100: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/100.jpg)
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 left padding should be mathematically equal. The bottom should be taller.Text
![Page 101: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/101.jpg)
Place Rules on the Borders
Text
![Page 102: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/102.jpg)
Visually Balanced
The result is visually balanced.
Text
![Page 103: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/103.jpg)
Applicable to All Elements
The illusion of visual equality is enhanced when elements are stacked.Text
Text
![Page 104: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/104.jpg)
Items and Rules
Even multi-item groups should be treated the same way.
Yellow Pages
TV
Travel
Tech
Sports
Real Estate
Photos
SMALL BUSINESS• Get a Web site• Domain Names• eCommerce• Search Listings
YEEAHH SERVICES• Downloads• Health• Kids• Mobile• Voice• Yeeaahh! Broadband• Yeeaahh! Global
![Page 105: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/105.jpg)
Nav in Place
![Page 106: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/106.jpg)
Widgets
![Page 107: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/107.jpg)
Widgets
![Page 108: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/108.jpg)
Hidden Functionality
![Page 109: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/109.jpg)
Nav in Place
![Page 110: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/110.jpg)
Widget Region
![Page 111: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/111.jpg)
Alternate Region
Carve out a layer across the top and shift navigation down lower.
![Page 112: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/112.jpg)
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.
![Page 113: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/113.jpg)
Asymmetry Isn’t Bad
![Page 114: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/114.jpg)
Add Labels
![Page 115: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/115.jpg)
Add Icons
Icons from IconBuffet.com.
![Page 116: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/116.jpg)
Odd-size Column for Weather
![Page 117: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/117.jpg)
Remaining Widgets
Horoscope, local info and radio.
![Page 118: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/118.jpg)
Less Visual for Right Column
Users have learned to regard colorful imagery in far right column as advertising.
![Page 119: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/119.jpg)
The Story So Far
![Page 120: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/120.jpg)
Add Grid Lines
![Page 121: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/121.jpg)
Features Area
![Page 122: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/122.jpg)
Features Area
Consolidate seven units into a Features marquee area.Tabs for four main areas: Features, Entertainment, Sports, Life.
![Page 123: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/123.jpg)
Add Tabs
![Page 124: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/124.jpg)
Tabs
Tabs are off the grid.
Let tabs be tabs.
![Page 125: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/125.jpg)
Lead Story Layout
![Page 126: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/126.jpg)
Image Sizes
Consolidate three units into a 200 px width. Height is 120 px.
![Page 127: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/127.jpg)
Marquee Image
Breaking out of tabs for more interest.
![Page 128: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/128.jpg)
Other Stories
Proportional photo regions below.
![Page 129: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/129.jpg)
A Use for the Spare Unit
Large ‘More Stories…’ area.
![Page 130: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/130.jpg)
Nearly Complete
With images in place.
![Page 131: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/131.jpg)
Add More Interest
Shift tabs up to ‘pop’ them.
![Page 132: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/132.jpg)
Completed Feature Stories Area
![Page 133: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/133.jpg)
Headlines & Other Modules
![Page 134: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/134.jpg)
Replicate Tab Structure
![Page 135: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/135.jpg)
Flow Headlines in a List
![Page 136: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/136.jpg)
Markets Data in Right-Hand Column
![Page 137: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/137.jpg)
Appraise the Overall Effect
Problems parsing the Headlines tabs from the marquee above.
![Page 138: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/138.jpg)
Embellish with a Subtle Background
![Page 139: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/139.jpg)
Similar Approach for Markets Area
![Page 140: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/140.jpg)
Autos
Four un-aligned columns.
![Page 141: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/141.jpg)
More Features
Not necessary to stick too closely to the grid here.
![Page 142: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/142.jpg)
Most Popular
![Page 143: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/143.jpg)
Simple, Familiar
Straightforward lists. Can we make it more interesting?
Yahoo.com
NYTimes.com
![Page 144: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/144.jpg)
A Different Orientation
Change orientation to change up display.
![Page 145: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/145.jpg)
Horizontal Ordered Listing
![Page 146: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/146.jpg)
Done!
![Page 147: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/147.jpg)
Sibling Sites
![Page 148: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/148.jpg)
Personals
![Page 149: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/149.jpg)
Same Units
![Page 150: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/150.jpg)
Mixing Column Structures
![Page 151: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/151.jpg)
Mixing Column Structures
![Page 152: Grids Are Good 1 - Santa Barbara City College...Every design solution begins by defining the problem and establishing constraints. • 1024 x 768 screen • Big Ad Unit Screen Resolution](https://reader030.vdocuments.net/reader030/viewer/2022040618/5f2793a15624cb058a055770/html5/thumbnails/152.jpg)
End
Special Thanks
www.iconbuffet.com