Grid Systems: An Introduction To Modular Design

Hogeschool Rotterdam
Communication & Multimedia Design

Lecture: Major Program DesignThis!
Grid systems
An introduction to modular design
Bas Leurs january 7, 2009
b.l.f.leurs@hro.nl
vakgroep.cmd.hro.nl/designthis
Tacit knowledge Lecture: Major Program DesignThis!
Er zijn boekenkasten vol geschreven

over typografie.
Echter… er is niemand
die je een formule of
vast recept kanWim
geven.
Crouwel
Alias ‘Gridnik’
Co-founder of Total Design, ‘godfather’ of
Dutch Design. Very well known of his
functional approach and his grid based
designs.
Dit hoorcollege is een wegwijzer in
de wereld van de ‘stille kennis’
Tacit knowledge Lecture: Major Program DesignThis!
Er zijn boekenkasten vol geschreven

over typografie.
Echter… er is niemand
die je een formule of
vast recept kanWim
geven.
Crouwel
Co-founder of Total Design
Alias ‘Gridnik’
Dit hoorcollege is een wegwijzer in

de wereld van de ‘stille kennis’
Crouwel and grid systems Lecture: Major Program DesignThis!
Another grid system hero Lecture: Major Program DesignThis!
Josef Müller-Brockmann
He’s even more than a hero... he’s a legend!
Text
This is the real godfather of

grid systems, he turned
gridsystems into big business!
He made a brand of Swiss
Design
But... Lecture: Major Program DesignThis!
Crouwel and Müller-Brockmann

were not the first designers who
used grids
In old manuscripts you’ll

find two columns grids,
and even baseline grids
Of course it all started in Greece! Lecture: Major Program DesignThis!
Even the Greek had kind

of a grid system for their
temples
Grid Systems & Architecture Lecture: Major Program DesignThis!
It’s not just the

graphic designers
who like grid
systems, also the
architects are very
fond of grids!
Patterns emerge if Communication & Multimedia Design
you have a closer

look at buildings
It’s not only the outside of a

Why do architects use grids? building also the inside that
can be bases on a grid
A building consist of multiple floors, so if you system.
design one floorplan, you can reuse this plan for
all other floors.
Even some cities are based on grids, like New York or SimCity
Und weiter... Lecture: Major Program DesignThis!
That’s enough
about architecture
for now...
Let’s continue to have a look at graphic / visual

design and grid systems... but first...
Why should you use grids anyway? Lecture: Major Program DesignThis!
Your goal is to establish a

consistent, logical screen layout,
one that allows you to “plug in”
text and graphics without having
to stop and rethink your basic
design approach on each new
page.
webstyleguide.com/page/grids.html
Why should you use grids? Lecture: Major Program DesignThis!
It’s a professional ethos:
The use of a the grid as an

ordering system is the expression
of a certain mental attitude
inasmuch as it shows that the
designer conceives his work in
terms that constructive and
oriented to the future.
Why should you use grids? Lecture: Major Program DesignThis!
Grids create visual

harmony
Grids provide coherence
to complexity
Grids allow you to do
more with less
Gordon Brander
www.slideshare.net/gordonbrander/grid-based-layout-presentation
Doing more with less... Lecture: Major Program DesignThis!
Would you redesign the

newspaper every day?
Again, and again?
Sounds boring right?, but it’s also very expensive.
Do you think you can

publish a daily
newspaper if you have to
design it all over again?
Sometimes information products need to be
designed and produced fast and efficiently
The typographic
complexity of a
newspaper is high.
Brief articles, more indepth
articles, pictures of different
sizes.
How to design a grid system? Lecture: Major Program DesignThis!
But what is a
grid system?
Is this a grid system?
Is this a grid system? Lecture: Major Program DesignThis!
What is a grid? Lecture: Major Program DesignThis!
So a grid is not just a bunch of

fancy lines
The lines are just guides
What we need are 'units'

Units are the building blocks of the grid
And the units are defined by the lines (guides) in order to
form squares or rectangles
If ‘units’ are the building blocks of a grid... Lecture: Major Program DesignThis!
Then this also be a grid... right?

The space between

two columns, or
rows is called a
gutter
But why do you need a gutter?

Combining units: columns Lecture: Major Program DesignThis!
Combining units: columns Lecture: Major Program DesignThis!
Combining units: columns and rows Lecture: Major Program DesignThis!
Columns and rows are the

groupings of units that
create the visual structure
of the page.
Colums for vertical structure
Rows for horizontal structure
Grid systems and mathematics Lecture: Major Program DesignThis!
Something
about numbers
The magic number 12 Lecture: Major Program DesignThis!
Khoi Vinh and Mark Boulton say:
“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.”
The magic number 12: 3 x 4 Lecture: Major Program DesignThis!
Three columns of four units

Two columns of six units

Four columns of three units

Six columns of two units

The magic number 12: 2 + 6 + 2 + 2 Lecture: Major Program DesignThis!
And so on, nearly inifinite possibilities...

Some more math Lecture: Major Program DesignThis!
What should be the

size of your
columns?
Khoi Vinh and Mark Boulton have a nice theory, check their presentation:
www.subtraction.com/pics/0703/grids_are_good.pdf
But here is mine...

Grid systems and mathematics Hogeschool Rotterdam
for the real grid geeks Lecture: Major Program DesignThis!
Think of numbers
you can divide by
2 or 3:
72 divided by 2 is 36
50 divided by 3 is... oh well that’s not going to work...
50 divided by 4 is... and that’s not going to work either...
An example based on the magic Hogeschool Rotterdam
number 72 Lecture: Major Program DesignThis!
An example based on the magic Hogeschool Rotterdam
number 72 (144 divided by 2) Lecture: Major Program DesignThis!
Grid mathematics for über geeks Lecture: Major Program DesignThis!
You can also think of grid systems

based on:
Fibonacci numbers:
0, 1, 1, 2, 3, 5, 8, 13, 21, 55, 89, etc
Or prime numbers:
2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, etc
Enough with the geeky math stuff Lecture: Major Program DesignThis!
This website is obviously based on a grid, but it looks a bit unorganized though, and it’s a lot of
information too.
The problem with Hogeschool Rotterdam
grid systems and the web Lecture: Major Program DesignThis!
We always want to cram

as much information as
possible on one page.
The size of webpages is not fixed, that’s for sure.
Especially vertical space is scarce, often you have to scroll (so you never get to see the whole page, or a
brilliantly designed page as a whole)
The amount and type of information (text, movies,

images) are for dynamic websites hard to control.
Tip:
Think about what kind of information should fit on
the page
movie
movie movie
movie
For movies and images, think of constraint proportions

A 4:3 ratio (as default for photographs) should relate to the size of
you ‘units’.
On with the fancy

stuff...
How to make it movie
look good?
I guess that’s what you have been waiting for...
But first, back to architecture Lecture: Major Program DesignThis!
This building looks rock

solid, very well structured.
Perhaps it’s a nice office
building for a bank.
But... is it sexy enough?
movie
How to make grids sexy? Lecture: Major Program DesignThis!
Play with the

grid system movie
Consider it as a playground instead of a jail

Use the grid as a basis, and play with the elements:
text, lines, images etc.
Playing with grids Lecture: Major Program DesignThis!
A very simple
and rigid grid.
Note that the architect is playing
with space, not with the grid itself.
Imagine if the extensions are not

there, that would be quite a
mediocre building right?
It’s about space Lecture: Major Program DesignThis!
As you have seen, what the

architect does, is playing with
space, by adding or removing it
For graphic or visual design this works as well.

It’s called white space, or negative space.
White space Lecture: Major Program DesignThis!
As you have seen, what the

architect does is playing with
space, by adding or removing it
this is ‘white space’ (although it looks pink now)
For graphic or visual design this works as well.

It’s called white space, or negative space.
Negative space Lecture: Major Program DesignThis!
The space around the

vase forms a silhouette.
What the negative

space does is defining
a shape.
This principle gives the

eye a place ‘to rest’, so
the observer can focus.
en.wikipedia.org/wiki/Negative_space
Lack of negative space Lecture: Major Program DesignThis!
There is no negative or
white space in this
example
Nearly every square

inch is filled with text or
images.
There is no place for

‘rest’, no silence.
It’s bit like being stuck in an
elevator with 30 screaming
teenagers.
Lack of negative space Lecture: Major Program DesignThis!
Some websites need every inch of space to

get all the information on it
Would white space matter for this website?
Creating shapes with emptiness Lecture: Major Program DesignThis!
Which one is better?

This is a perfect example of how to play with a grid system

Besides ‘white space’,

there is another principle
that can be used to make
your design more fancy.
By defining ‘virtual guidelines’
These virtual guidelines are used to align elements to
Using guidelines Lecture: Major Program DesignThis!
stacking
hanging
Note that the guidelines are not centered and how the
image is perfectly integrated with the typography
Making the guidelines or grid visible Lecture: Major Program DesignThis!
Tip! Use a background image of your grid, while

you’re working on your CSS.
Having a closer look at the Hogeschool Rotterdam
baseline grid Lecture: Major Program DesignThis!
All the texts are perfectly aligned to the

baseline grid
Different layers of abstraction Lecture: Major Program DesignThis!
A grid system can have several layers of abstraction:

the virtual guidelines (which are the ‘anchors’ of the grid)
the colums and rows (defined by the units) and combined columns and rows
the baselines grid (for line-height)
So... what’s a good grid system? Lecture: Major Program DesignThis!
A good grid systems provides

solutions to several levels of
complexity
A good grid system is robust and

versatile
A grid solves many design problems (common and uncommon)
A good grid is sustainable

Some resources Lecture: Major Program DesignThis!
Grid systems
Pretty expensive book, a must-have for every grid geek.
Design Visual Interfaces

Mullet & Sano
Pretty expensive book, but worth every penny. A genuine classic (1st edition
is from 1995)
Grid systems
Kimberly Elam
Some resources Lecture: Major Program DesignThis!
Websites about grids

www.markboulton.co.uk/journal/comments/simple_steps_to_designing_grids/
www.subtraction.com/
www.subtraction.com/pics/0703/grids_are_good.pdf
www.thegridsystem.org
www.webstyleguide.com/page/grids.html
Examples
www.visualspace.nl
www.uxmag.com
www.becausestudio.co.uk
www.premsela.org
www.michaelpaulyoung.com
www.makeblijde.nl
www.corporateriskwatch.com
www.guardian.co.uk
www.thegridsystem.org
Thank you Lecture: Major Program DesignThis!
The grid system is an aid,

not a guarantee.
The grid system is a

game, not a dogma.
Bas Leurs

Grid Systems: An Introduction To Modular Design

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Grid Systems: An Introduction To Modular Design

Uploaded by

Copyright:

Available Formats

Hogeschool Rotterdam

Communication & Multimedia Design

Bas Leurs january 7, 2009

Er zijn boekenkasten vol geschreven

Er zijn boekenkasten vol geschreven

Dit hoorcollege is een wegwijzer in

This is the real godfather of

Crouwel and Müller-Brockmann

In old manuscripts you’ll

Even the Greek had kind

It’s not just the

you have a closer

It’s not only the outside of a

Let’s continue to have a look at graphic / visual

Your goal is to establish a

It’s a professional ethos:

The use of a the grid as an

Grids create visual

Would you redesign the

Do you think you can

So a grid is not just a bunch of

What we need are 'units'

Then this also be a grid... right?

The space between

But why do you need a gutter?

Columns and rows are the

Khoi Vinh and Mark Boulton say:

“In general, we want to create units in multiples of

Three columns of four units

Two columns of six units

Four columns of three units

Six columns of two units

And so on, nearly inifinite possibilities...

What should be the

But here is mine...

You can also think of grid systems

We always want to cram

The amount and type of information (text, movies,

For movies and images, think of constraint proportions

On with the fancy

This building looks rock

Play with the

Consider it as a playground instead of a jail

Imagine if the extensions are not

As you have seen, what the

For graphic or visual design this works as well.

As you have seen, what the

this is ‘white space’ (although it looks pink now)

For graphic or visual design this works as well.

The space around the

What the negative

This principle gives the

Nearly every square

There is no place for

Some websites need every inch of space to

Which one is better?

This is a perfect example of how to play with a grid system

Besides ‘white space’,

Tip! Use a background image of your grid, while

All the texts are perfectly aligned to the

A grid system can have several layers of abstraction:

A good grid systems provides

A good grid system is robust and