Objectives
•
•
Gain knowledge of mathematical ratios and
proportional systems
Learn about the use of the grid
Definitions
•
•
•
•
•
•
Proportion is the comparative size relationships of parts to one
another and to the whole.
Harmony is agreement within a composition, where elements
are constructed, arranged, and function in relation to one
another to a congruent effect.
A module is a self-contained, fixed unit that is combined with
others to form a larger foundational structure composed of
regular units.
Chunking is a technique where content is split or information is
grouped into chunks.
A grid is a guide—a compositional structure made up of
verticals and horizontals that divide a format into columns and
margins.
A spatial zone is a distinct field formed by grouping several grid
modules together used to organize the placement of various
graphic elements.
Mathematical Ratios and
Proportional Systems
Since the time of ancient Greece, artists, architects, and musicians
have been interested in ideal proportions. Some looked to math for
a system of creating ideal proportions that could be applied to the
visual arts, music, and architecture.
• Most designers prefer to rely on their learned and innate sense
of proportion. Others employ graphic devices that can aid in
establishing harmony.
Proportion
• Proportion is the comparative size relationships of parts to one
another and to the whole.
• Elements or parts are compared to the whole in terms of
magnitude, measure, and/or quantity.
 For designers, there is an additional implied meaning to
proportion. It is an aesthetic arrangement—a harmonious or
agreeable relationship of parts or elements within a whole.
Mathematical Ratios and
Proportional Systems
Fibonacci Numbers
• Fibonacci numbers are a numerical sequence used as a model for
constructing proportion.
• They constitute a numerical sequence where each subsequent
number in the sequence is the sum of the two preceding
numbers.
 Fibonacci squares have sides with lengths that correspond to
the numbers in the Fibonacci sequence.
 By drawing quarter circles through a set of Fibonacci
squares, you can create a Fibonacci spiral.
Mathematical Ratios and
Proportional Systems
The Golden Ratio
• The golden ratio, commonly
denoted by the Greek letter
phi (φ) refers to a geometric
relationship in which a longer
length a is to a shorter length b
as the sum of the lengths (a 1
b) is to a.
• A golden section is a line
segment sectioned into two
unequal parts, a and b, such
that the total length (a 1 b) is
to the longer section a as a is
to the shorter section b.
 Graphic designers utilize
the golden section for grid
systems and page formats.
A golden section seen in the format
of an 8 1⁄2” x 11” page
Mathematical Ratios and
Proportional Systems
Rule of Thirds
• The rule of thirds is an asymmetrical compositional technique
often used by painters, photographers, and designers to create
visual interest and balance.
 It involves overlaying the format with a grid and
positioning or aligning the focal point or primary graphic
elements of the composition along these grid lines or
especially on the intersections of the grid lines.
 Although the intersections provide guidelines for the
placement of primary elements, when working with
asymmetry, you still need to make judgments involving
balance and counterpoint.
Mathematical Ratios and
Proportional Systems
Modularity
• In graphic design, modularity is a structural principle employed
to subdivide a format into manageable smaller parts.
 A module is a self-contained, fixed unit that is combined
with others to form a larger foundational structure
composed of regular units. A module is also defined as any
single fixed element within a bigger system or structure.
Chunking
• Chunking is a technique related to modularity in graphic design,
where content is split or information is grouped into chunks.
Modular Grids: Graph Paper
and Modular Grid
The Grid
•
A grid is a guide—a compositional structure made up of verticals
and horizontals that divide a format into columns and margins.
 Grids underlie the structure of books, magazines, brochures,
desktop websites, mobile websites, and more.
 Grids organize type and images. They help you build pages,
print or digital.
Single-Column Grid
• A single-column grid is the most basic page structure; it is
also called a manuscript grid.
• This structure is defined by a single column or block of
text surrounded by margins, the blank space on the left,
right, top, or bottom edge of any printed or digital page.
• Margins function as the proportional frame structure
around visual and typographic content.
The Grid
•
Margins/Single-Column Grids
Even Margins (top)
Asymmetrical Margins (bottom)
Designing Single-Column Margins
 When you design the width of the
single column, you are designing the
proportions of the margins.
 Base the design of the margins on
function and aesthetics.
 Functional considerations include:
shape of the single-column,
accommodating marginalia or
notations, and determining where
the reader’s thumbs will hold the
page or tablet.
 Determine whether symmetrical
or asymmetrical margins and
wide or narrow margins would
best present the content.
The Grid
Multicolumn Grids
• Depending on the size and
proportions of the format,
determine the number of
columns and whether
columns can be combined to
accommodate headings and
large visuals or be divided to
accommodate captions and
smaller visuals.
• A column grid can also be
designed with dedicated
columns for text and large
visuals. Columns can be even
or uneven depending on
content and function.
Column Grids: Print Magazine
One-column (top)
Two-column (middle)
Four-column (bottom)
© Steven Brower, Designer
The Grid
Columns and Column Intervals
• Columns are vertical alignments or arrangements used to
accommodate text and images.
 In any grid, the number of columns depends on several
factors, mainly the concept, purpose, and how the
designer wants to present the content.
• The spaces between columns are called column intervals.
The Grid
Grid Anatomy
The Grid
Flowlines
• Flowlines establish horizontal alignments in a grid and can aid
visual flow. When flowlines are established at regular intervals,
a regular set of spatial units called modules is created.
Grid Modules
• Grid modules are the individual units created by the
intersection of the vertical column and horizontal flowlines.
 A text block or image is placed in a grid module.
Spatial Zones
• A spatial zone is a distinct field formed by grouping several grid
modules together used to organize the placement of various
graphic elements.
 Spatial zones can be dedicated to text, to image, or either.
The Grid
Modular Grids
• A modular grid is composed of
modules, individual units created
by the intersection of columns and
flowlines .
• Information can be chunked into
individual modules or grouped
together into zones.
 The zones should be designed
to produce a clear visual
hierarchy.
• A modular grid is very flexible,
allowing for greater variety.
 An award-winning example of
a modular grid is the Unigrid
designed by Massimo Vignelli.
Unigrid
© Massimo Vignelli
Summary
•
Artists, architects, and musicians have always been
interested in ideal proportions. Some looked to math for a
system of creating ideal proportions that could be applied
to the visual arts, music, and architecture.
•
Most designers prefer to rely on their learned and innate
sense of proportion. Others employ graphic devices such as
Fibonacci numbers, the golden ratio, and the rule of thirds
that can aid in establishing harmony.
•
A grid is a guide—a compositional structure made up of
verticals and horizontals that divide a format into columns
and margins.
•
Grids underlie the structure of books, magazines,
brochures, desktop websites, mobile websites, and more.
•
Margins function as the proportional frame structure
around visual and typographic content.