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

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Tacit knowledge 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’

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

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

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Another grid system hero

Hogeschool Rotterdam Communication & Multimedia Design 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...

Hogeschool Rotterdam Communication & Multimedia Design 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!

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Even the Greek had kind of a grid system for their temples

Grid Systems & Architecture

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

It’s not just the graphic designers who like grid systems, also the architects are very fond of grids!

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Patterns emerge if you have a closer look at buildings

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Grid Systems & Architecture

Why do architects use grids?

A building consist of multiple floors, so if you design one floorplan, you can reuse this plan for all other floors.

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

It’s not only the outside of a building also the inside that can be bases on a grid system.

Grid Systems & Architecture

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Even some cities are based on grids, like New York or SimCity

Und weiter...

Hogeschool Rotterdam Communication & Multimedia Design 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?

Hogeschool Rotterdam Communication & Multimedia Design 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?

Hogeschool Rotterdam Communication & Multimedia Design 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.

Josef MĂźller-Brockmann

Why should you use grids?

Hogeschool Rotterdam Communication & Multimedia Design 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

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Doing more with less...

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?

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

But what is a grid system?

Is this a grid system?

Is this a grid system?

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Is this a grid system?

Is this a grid system?

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Is this a grid system?

Is this a grid system?

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Is this a grid system?

Is this a grid system?

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Is this a grid system?

Is this a grid system?

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Is this a grid system?

Is this a grid system?

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

What is a grid?

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

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Is this a grid system?

If ‘units’ are the building blocks of a grid...

Then this also be a grid... right?

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Is this a grid system?

The space between two columns, or rows is called a gutter

But why do you need a gutter?

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Combining units: columns

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Combining units: columns

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Combining units: columns and rows

Hogeschool Rotterdam Communication & Multimedia Design 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

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Combining units: columns and rows

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Grid systems and mathematics

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Something about numbers

The magic number 12

Hogeschool Rotterdam Communication & Multimedia Design 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

Three columns of four units

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

The magic number 12: 2 x 6

Two columns of six units

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

The magic number 12: 4 x 3

Four columns of three units

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

The magic number 12: 6 x 2

Six columns of two units

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

The magic number 12: 2 + 6 + 2 + 2

And so on, nearly inifinite possibilities...

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Some more math

Hogeschool Rotterdam Communication & Multimedia Design 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 for the real grid geeks

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Think of numbers you can divide by 2 or 3: 72 divided by 2 is 36 72 divided by 3 is 24 72 divided by 4 is 18 50 divided by 2 is 25 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...

The magic number 144

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

The magic number 180

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

An example based on the magic number 72

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

An example based on the magic number 72 (144 divided by 2)

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Grid mathematics for 端ber geeks

Hogeschool Rotterdam Communication & Multimedia Design 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

Hogeschool Rotterdam Communication & Multimedia Design 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 grid systems and the web

Hogeschool Rotterdam Communication & Multimedia Design 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.

The problem with grid systems and the web

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

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

The problem with grid systems and the web

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

On with the fancy stuff...

How to make it look good? movie

I guess that’s what you have been waiting for...

But first, back to architecture

Hogeschool Rotterdam Communication & Multimedia Design 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?

Hogeschool Rotterdam Communication & Multimedia Design 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

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Playing with grids

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Playing with grids

Hogeschool Rotterdam Communication & Multimedia Design 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

Hogeschool Rotterdam Communication & Multimedia Design 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

Hogeschool Rotterdam Communication & Multimedia Design 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

Hogeschool Rotterdam Communication & Multimedia Design 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

Hogeschool Rotterdam Communication & Multimedia Design 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

Some websites need every inch of space to get all the information on it Would white space matter for this website?

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Creating shapes with emptiness

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Creating shapes with emptiness

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Creating shapes with emptiness

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Creating shapes with emptiness

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Creating shapes with emptiness

Which one is better?

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Creating shapes with emptiness

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Creating shapes with emptiness

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Creating shapes with emptiness

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Creating shapes with emptiness

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Creating shapes with emptiness

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

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

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

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Using guidelines

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Using guidelines

stacking

hanging

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Using guidelines

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Using guidelines

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Using guidelines

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Using guidelines

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Using guidelines

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Note that the guidelines are not centered and how the image is perfectly integrated with the typography

Making the guidelines or grid visible

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Making the guidelines or grid visible

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Making the guidelines or grid visible

Tip! Use a background image of your grid, while you’re working on your CSS.

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Having a closer look at the baseline grid

All the texts are perfectly aligned to the baseline grid

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Different layers of abstraction

Hogeschool Rotterdam Communication & Multimedia Design 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?

Hogeschool Rotterdam Communication & Multimedia Design 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

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

Grid systems Josef M端ller-Brockmann 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

Hogeschool Rotterdam Communication & Multimedia Design 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

Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!

The grid system is an aid, not a guarantee.

Josef M端ller-Brockmann

The grid system is a game, not a dogma.

Bas Leurs