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