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




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.


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

http://www.slideshare.net/gordonbrander/grid-based-layout-presentation

http://www.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! 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! 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


Two columns of six units


Four columns of three units


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

http://www.subtraction.com/pics/0703/grids_are_good.pdf



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




An example based on the magicnumber 72


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.


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.



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



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



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





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

Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Using guidelines



hanging

stacking






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



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


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

http://www.markboulton.co.uk/journal/comments/simple_steps_to_designing_grids/

http://www.markboulton.co.uk/journal/comments/simple_steps_to_designing_grids/

http://www.subtraction.com

http://www.subtraction.com



http://www.thegridsystem.org


http://www.visualspace.nl

http://www.visualspace.nl

http://www.uxmag.com

http://www.uxmag.com

http://www.becausestudio.co.uk

http://www.becausestudio.co.uk

http://www.premsela.org

http://www.premsela.org

http://www.michaelpaulyoung.com

http://www.michaelpaulyoung.com

http://www.makeblijde.nl

http://www.makeblijde.nl

http://www.corporateriskwatch.com

http://www.corporateriskwatch.com

http://www.guardian.co.uk

http://www.guardian.co.uk



Hogeschool RotterdamCommunication & Multimedia DesignLecture: Major Program DesignThis! Thank you

The grid system is an aid, not a guarantee.Josef Müller-Brockmann

The grid system is a game, not a dogma.Bas Leurs

Date post:	21-Apr-2017
Category:	Career
Upload:	bas-leurs
View:	232,036 times
Download:	0 times

Grid Systems

Career