The Grid
Bootcamp 2011 - Parsons The New School For Design
Topics
What is the grid?
Why use a grid?
How do I use a grid?
Grid resources
Breaking the grid
What is the grid?
“The grid system is an aid, not a
guarantee. It permits a number of
possible uses and each designer can
look for a solution appropriate to
his personal style. But one must learn
how to use the grid; it is an art that
requires practice.”
Josef Müller-Brockmann
(via thegridsystem.org)
A grid is a network of lines. The Lines in a
grid typically run horizontally and vertically
in evenly paced increments, grids can be
angled, irregular, or even circular as well.
They establish a system for arranging
content within the space of a page, screen,
or the built environment. Designed in
response to the internal pressure of
content (text, image, data) and the outer
edge or frame (page, screen, windwo), an
effective grid is not a rigid formula but a
flexible and resilient structure, a skeleton
that moves in concert with the muscular
mass of information.
Anatomy of a grid
Column - space where the content will go
Gutter - the space in between columns
Margin - the edge of an element
Slug - in print, the portion to be cut away from the
larger piece of paper. Can also be thought of as
extra screen space around a website or application.
Why use a grid?
Grids often serve as a crucial bridge
between the blank surface (eg. a
24x36-inch sheet of paper,
a 1280x1024-pixel monitor, a
10,000-sq. ft. parking lot), and the
information to be communicated to
the user or viewer.
Grids impose order and hierarchy on
content, which helps a user or
viewer understand the structure of
your designs.
Layout becomes a breeze when you
incorporate the grid, in most any
medium.
How do I use a grid?
How to work with grid systems
A few things to note first:
The grid is a set of guidelines,
not a rigid rule set to be adhered
to religiously (more on this
later). It is not always horizontal
and vertical only.
The grid is not just used for
laying out text and imagery,
it can become a form of art
in and of itself.
There is no single grid system
for any situation. Often, the
appropriate grid is determined
by the medium.
There are many templates for
grid systems of all kinds, most
of them are available for free,
others can be created in CS.
Knowledge of the right grid
for the right project is more
important than knowing how
to create one.
The rule of thirds
The rule of thirds is a compositional rule of thumb in visual arts such
as painting, photography and design. The rule states that an image should be imagined as divided
into nine equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines,
and that important compositional elements should be placed along these lines or their
intersections. Proponents of the technique claim that aligning a subject with these points creates
more tension, energy and interest in the composition than simply centering the subject would.
The golden ratio in grids
The Golden Ratio is also known as the Golden
Mean, Golden Section and Divine Proportion. It is a
ratio or proportion defined by the number Phi ( =
1.618033988749895... ) It can be derived with a
number of geometric constructions, each of which
divides a line segment at the unique point where:
the ratio of the whole line (A) to the
large segment (B) is the same as the ratio of the
large segment (B) to the small segment (C).
In other words, A is to B as B is to C.
This occurs only where A is 1.618
... times B and B is 1.618 ... times C.
At least since the Renaissance, many artists and
architects have proportioned their works to
approximate the golden ratio, believing this proportion
to be aesthetically pleasing.
Depiction of the proportions in a medieval manuscript. According to Jan
Tschichold: "Page proportion 2:3. Margin proportions 1:1:2:3. Text area
proportioned in the Golden Section.
Grid Index, is a “visual
dictionary on two dimensional
grids and geometric tilings” by
Carsten Nicolai, co-founder of
Raster Noton.
Grids in Adobe Creative Suite
Adobe Creative Suite has a range
of grid options. These options
tend to vary across programs.
Photoshop
Manual guides; automaticallygenerated grids (preferences or
double-click the ruler)
Illustrator
Manual guides; automaticallygenerated grids (preferences);
Object>Path>Split Into Grid
InDesign
Manual guides; automaticallygenerated grids (preferences);
Layout>Margins and Columns
AfterEffects
Manual guides; automaticallygenerated grids (preferences)
Grid resources
There are tons of grid templates, articles,
and tutorials out there for free.
The Grid System (Articles, Template files, Links, Inspiration)
http://www.thegridsystem.org/
The Design Grid (Links, Articles, Inspiration)
http://thedesigngrid.com/
960 Grid System (Template files, Links, JavaScript/CSS tools)
http://960.gs/
65 Resources for Grid-Based Design (Links)
http://vandelaydesign.com/blog/design/resources-grid-based-design/
Breaking the grid
As mentioned earlier, the grid is not the end-all
be-all of your design. Not all content will fit your
grid, your grid may not accommodate your content.
Adjust your grid carefully, know when breaking
it is the solution but do not use it as an excuse to
be lazy with your design.
Some artists consciously reject or break the grid,
but you have to know how to use the grid in order
to break it.