Grid Systems
Transcript of Grid Systems
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis!
Grid systemsAn introduction to modular design
Bas Leurs january 7, 2009
[email protected]/designthis
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Tacit knowledge
Er zijn boekenkasten vol geschreven over typografie.
Echter… er is niemand die je een formule of vast recept kan geven.
Dit hoorcollege is een wegwijzer in de wereld van de ‘stille kennis’
Wim CrouwelAlias ‘Gridnik’Co-founder of Total Design, ‘godfather’ of Dutch Design. Very well known of his functional approach and his grid based designs.
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Tacit knowledge
Er zijn boekenkasten vol geschreven over typografie.
Echter… er is niemand die je een formule of vast recept kan geven.
Dit hoorcollege is een wegwijzer in de wereld van de ‘stille kennis’
Wim CrouwelCo-founder of Total Design Alias ‘Gridnik’
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Crouwel and grid systems
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Another grid system hero
Josef Müller-BrockmannHe’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
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! But...
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
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Of course it all started in Greece!
Even the Greek had kind of a grid system for their temples
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Grid Systems & Architecture
It’s not just the graphic designers who like grid systems, also the architects are very fond of grids!
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Patterns emerge if
you have a closer look at buildings
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Grid Systems & Architecture
It’s not only the outside of a building also the inside that can be bases on a grid system.
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 RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Grid Systems & Architecture
Even some cities are based on grids, like New York or SimCity
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Und weiter...
That’s enough about architecture for now...
Let’s continue to have a look at graphic / visual design and grid systems... but first...
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Why should you use grids anyway?
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
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Why should you use grids?
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
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Why should you use grids?
Grids create visual harmonyGrids provide coherence to complexityGrids allow you to do more with lessGordon Branderwww.slideshare.net/gordonbrander/grid-based-layout-presentation
Hogeschool RotterdamCommunication & Multimedia DesignLecture: 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.
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! How to design a grid system?
But what is a grid system?
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Is this a grid system?Is this a grid system?
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Is this a grid system?Is this a grid system?
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Is this a grid system?Is this a grid system?
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Is this a grid system?Is this a grid system?
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Is this a grid system?Is this a grid system?
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Is this a grid system?Is this a grid system?
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! What is a grid?
So a grid is not just a bunch of fancy linesThe lines are just guides
What we need are 'units'Units are the building blocks of the gridAnd the units are defined by the lines (guides) in order to form squares or rectangles
Hogeschool RotterdamCommunication & Multimedia DesignLecture: 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 RotterdamCommunication & Multimedia DesignLecture: 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 RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Combining units: columns
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Combining units: columns
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Combining units: columns and rows
Columns and rows are the groupings of units that create the visual structure of the page. Colums for vertical structureRows for horizontal structure
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Combining units: columns and rows
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Combining units: columns and rows
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Grid systems and mathematics
Something about numbers
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! The magic number 12
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.”
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! The magic number 12: 3 x 4
Three columns of four units
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! The magic number 12: 2 x 6
Two columns of six units
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! The magic number 12: 4 x 3
Four columns of three units
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! The magic number 12: 6 x 2
Six columns of two units
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! The magic number 12: 2 + 6 + 2 + 2
And so on, nearly inifinite possibilities...
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Some more math
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...
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis!
Grid systems and mathematicsfor the real grid geeks
Think of numbers you can divide by 2 or 3:72 divided by 2 is 3672 divided by 3 is 2472 divided by 4 is 18
50 divided by 2 is 2550 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...
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! The magic number 144
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! The magic number 180
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis!
An example based on the magicnumber 72
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis!
An example based on the magicnumber 72 (144 divided by 2)
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Grid mathematics for über geeks
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
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Enough with the geeky math stuff
This website is obviously based on a grid, but it looks a bit unorganized though, and it’s a lot of information too.
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis!
The problem with grid systems and the web
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.
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis!
The problem with grid systems and the web
Tip:Think about what kind of information should fit on the page
For movies and images, think of constraint proportionsA 4:3 ratio (as default for photographs) should relate to the size of you ‘units’.
moviemovie
movie
movie
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis!
The problem with grid systems and the web
On with the fancy stuff...How to make it look good?I guess that’s what you have been waiting for...
movie
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! But first, back to architecture
This building looks rock solid, very well structured. Perhaps it’s a nice office building for a bank. But... is it sexy enough?
movie
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! How to make grids sexy?
Play with the grid systemConsider it as a playground instead of a jailUse the grid as a basis, and play with the elements: text, lines, images etc.
movie
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Playing with grids
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Playing with grids
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Playing with grids
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?
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! It’s about space
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.
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! White space
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.
this is ‘white space’ (although it looks pink now)
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Negative space
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
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Lack of negative space
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.
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! 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 RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Creating shapes with emptiness
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Creating shapes with emptiness
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Creating shapes with emptiness
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Creating shapes with emptiness
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Creating shapes with emptiness
Which one is better?
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Creating shapes with emptiness
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Creating shapes with emptiness
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Creating shapes with emptiness
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Creating shapes with emptiness
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Creating shapes with emptiness
This is a perfect example of how to play with a grid system
Hogeschool RotterdamCommunication & Multimedia DesignLecture: 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
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Using guidelines
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Using guidelines
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Using guidelines
hanging
stacking
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Using guidelines
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Using guidelines
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Using guidelines
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Using guidelines
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Using guidelines
Note that the guidelines are not centered and how the image is perfectly integrated with the typography
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Making the guidelines or grid visible
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Making the guidelines or grid visible
Hogeschool RotterdamCommunication & Multimedia DesignLecture: 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 RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis!
Having a closer look at the baseline grid
All the texts are perfectly aligned to the baseline grid
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Different layers of abstraction
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 rowsthe baselines grid (for line-height)
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! So... what’s a good grid system?
A good grid systems provides solutions to several levels of complexity
A good grid system is robust and versatileA grid solves many design problems (common and uncommon)
A good grid is sustainable
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Some resources
Grid systemsJosef Müller-BrockmannPretty expensive book, a must-have for every grid geek.
Design Visual InterfacesMullet & SanoPretty expensive book, but worth every penny. A genuine classic (1st edition is from 1995)
Grid systemsKimberly Elam
Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Some resources
Websites about gridswww.markboulton.co.uk/journal/comments/simple_steps_to_designing_grids/www.subtraction.com/www.subtraction.com/pics/0703/grids_are_good.pdfwww.thegridsystem.orgwww.webstyleguide.com/page/grids.html
Exampleswww.visualspace.nlwww.uxmag.comwww.becausestudio.co.ukwww.premsela.orgwww.michaelpaulyoung.comwww.makeblijde.nlwww.corporateriskwatch.comwww.guardian.co.ukwww.thegridsystem.org