Scribd
Upload
353 views

The Grid

This document discusses grid systems and provides five simple steps for designing them. It begins with an introduction that defines what a grid is and explains that they originated from Constructivist art to help order graphical elements. It then discusses that grid systems are based on mathematics and specific ratios. The document defines what a grid system is as a single grid that can be applied to multiple page types or uses without changing. It explains that grid systems are designed to create structure and coherence while balancing creativity. Finally, it previews the five steps that will be covered to design simple and complex grid systems for various media like print and digital.

Uploaded by

KC Porter
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
353 views

The Grid

This document discusses grid systems and provides five simple steps for designing them. It begins with an introduction that defines what a grid is and explains that they originated from Constructivist art to help order graphical elements. It then discusses that grid systems are based on mathematics and specific ratios. The document defines what a grid system is as a single grid that can be applied to multiple page types or uses without changing. It explains that grid systems are designed to create structure and coherence while balancing creativity. Finally, it previews the five steps that will be covered to design simple and complex grid systems for various media like print and digital.

Uploaded by

KC Porter
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Five Simple Steps to

Designing Grid
Systems
Application of
Designs
The Golden Grid
System
Simple
Steps to
Designing
Grid
Systems
Preface
Following my article in Design in Flight Ive received
countless emails to elaborate, in some way, on how to
correctly design grid systems. lt's quite a complicated feld
and so distilling it into Five Simple Steps has proven to
be quite tricky, so much so that I thought I needed to write
some sort of preface before we get on to the frst part.
What is a grid?
Before we even begin to tackle designing grid systems we
need to have a basic understanding of what they are, why
we use them and where they came from.
In the context of graphic design, a grid is an instrument
for ordering graphical elements. The grid is a child of
Constructivist art and came into being through the same
thought processes that gave rise to that art movement.
Clear links can also be drawn between the Concrete-
Geometrical art of the Zurich school and several notable
artists of this movement made important contributions to
typography through their fne art.
It was around this period the grid system moved from the
domain of art and into typography and commercial design.
Its about Mathematics... Mostly
First of all when talking about grid systems we have to
mentally separate form and function. We have to think
about aesthetics and proportions as a result of considered
construction. This can be quite tricky for designers who
have been schooled in the youll know its right when it
feels right school of composition. But as Ive written about
before, feel is an emotional reaction to construction, to
mathematics.
Ratios and equations are everywhere in grid system
design. Relational measurements are what defnes most
systems, from simple leaflet design to the complex of
newspaper grids. To design a successful grid system you
have to become familiar with these ratios and proportions,
from rational, whole-number ratios such as 1:2, 2:3, 3:4
and those irrational proportions based on the construction
of circles, such as the Golden Section 1:1.618 or the
standard DIN sizes 1:1.4146.
These ratios are ubiquitous in modern society, from the
buildings around us to patterns in nature. Using these
ratios successfully can be the factor in whether or not a
design, not only functions, but has aesthetic appeal too.
What is a grid system?
A grid system is a grid design which has been designed in
such a way that it can be applied to several different uses
without altering its form. An example of this would be a
grid system for a book whereby you have many different
page types - part-opening, title, half-title etc. - and would
need only one grid to use on all the page types.
The danger with designing a system to cope with many
different varients is complexity. When you add complexity,
you decrease usability and there is a danger the grid
would become so complex the designer cant use it. This
thought should always be running through your head when
designing a grid system.
Why design a grid system?
It is often said of grid systems that they limit the scope
for creativity or leave no freedom. Karl Gerstner, one of
Switzerlands preeminent graphic designers, was aware of
this confict with the designers adoption of grid systems.
The typographic grid is a proportional regulator for type-
matter, tables, pictures and so on. It is a priori programme
, ,
the balance between maximum formality and maximum
freedom, or in other words, the greatest number of constant
factors combined with the greatest possible variability.
The grid is a regulatory system which pre-empts the basic
formal decisions in the design process. its preconditions
help in the structuring, division and ordering or content.
Im not saying a well designed grid will solve all of your
compositional problems, but it goes some way in creating
a coherent structure in design which in turn creates the
aesthetic values all of us are after in our designs.
The Five Simple Steps
You should now have a clearer understanding of what grid
systems are, where they came from and what they should
do, if designed well. Ill go through the elements which
make a successful grid system and how these can be
brought together to create simple and complex systems
which can be applied to a number of media outputs.
Including that of the realms of the many different forms of
print and digital media including but not limited to tablets,
phones, and computers.
1
GETTING STARTED
Designing for the Web
The Job
Understanding
Workfow The Too|s
Work|ng for Yourse|f
3
RESEARCH/IDEAS
The Design Process
The Brief
Research
Ideas
Putting it together
2
TYPOGRAPHY
Anatomy
O|ass|fcat|on
Hierarchy
Typesetting
Pr|nt|ng the web
5
LAYOUT
The Basics of Composition
Spat|a| Re|at|onsh|ps
Grid Systems
Breaking the Grid
Br|ng|ng |t a|| together
4
COLOUR
The Oo|our Whee|
Hue, Saturation and Brightness
Oo|our Oomb|nat|ons and Mood
Des|gn|ng w|thout Oo|our
Oo|our and Brand

You might also like