THE GRID GRA 202

GOLDEN SECTION

 A ratio relationship between two numbers that often occurs in nature   Has been used in art and architecture for thousands of

years   The larger elements relate to the smaller the same way

when the smaller are combined

 Side a is to side b as side b is to the sum of both sides  A symmetrical relation built from asymmetrical parts

  a : b = b : (a+b)

  In numbers the smaller is to the larger as the larger is to the sum   0, 1, 1, 2, 3, 5, 8, 13   1 : 1.618…

FIBONACCI SPIRAL

THE GOLDEN SECTION

 http://www.youtube.com/watch?v=oV7qz3h2Pds&feature=related

 http://www.youtube.com/watch?v=-ncEEXekZek&feature=related

 http://www.youtube.com/watch?v=fmaVqkR0ZXg

SINGLE-COLUMN DESIGN

 By setting our margins at the outset we are designing outside in

 If you create no margins and set up boxes and guides your are working inside out

 Long documents like books and magazines are designed as spreads   Facing pages   Default is a mirror symmetrical image on either side   Increasing margins toward the spine adds interest

MULTICOLUMN GRID

 Multicolumn grids integrate images and text   They are more modular than single grid documents   The columns can be used to emphasize hierarchy

 How?

MULTICOLUMN GRID

 You can use grids to divide horizontally as well as vertically

 Body text can hang from a common line (hang line)   Music scores do this   In architecture this line called the datum   In graphic design we sometimes call it the eye-

horizon line

MODULAR GRID

 Has consistent horizontal and vertical divisions  The horizontal lines are placed relative to the

baseline grid  You can adjust the baseline grid settings in

InDesign using your preferences or the text frame options (in InDesign)

 http://modulargrid.org/  http://www.homeinteriorszone.com/interior-

decoration/furniture/19-amazing-furniture-to-make-the-most-out-of-tiny-apartment-space/

MODULAR GRID

 Step 1: decide on type size and leading 10/12  Step 2: set the baseline grid to fit  Step 3: count the number of lines in the baseline

grid  Step 4: Divide into portions evenly and put extras

into the margin  Step 5: choose your other type sizes by fitting

them into the gird

DATA TABLES

 Designing charts and graphs is an important part of design

 The grid used here can change the meaning of the table semantic significance

 Type alone can do a great job at treating a table grid   What kind of numbers would be good for tables?   Sometimes adding to many lines is overkill

DATA TABLES

 http://www.allgraphicdesign.com/graphicsblog/2008/11/30/annual-report-designs-best-of-annual-reports/

 http://www.smashingmagazine.com/2007/08/02/data-visualization-modern-approaches/

 http://www.smashingmagazine.com/2007/10/18/charts-and-graphs-modern-solutions/

 http://www.smashingmagazine.com/2010/05/10/imagine-a-pie-chart-stomping-on-an-infographic-forever/