Grid Systems

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 kan geven.
Wim 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 kan geven.
Wim 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

Is this a grid system?
If ‘units’ are the building blocks of a grid... Lecture: Major Program DesignThis!

Then this also be a grid... right?

Is this a grid system? Lecture: Major Program DesignThis!

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 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

Combining units: columns and rows Lecture: Major Program DesignThis!

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 iniﬁnite 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!

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!

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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Grid Systems

Semelhante a Grid Systems (20)

Mais de Bas Leurs

Mais de Bas Leurs (6)

Último

Último (20)

Grid Systems