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

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

Hogeschool Rotterdam Communication & Multimedia Design Crouwel and grid systems Lecture: Major Program DesignThis!

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

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

Hogeschool Rotterdam Communication & Multimedia Design Of course it all started in Greece! Lecture: Major Program DesignThis! Even the Greek had kind of a grid system for their temples

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

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

Hogeschool Rotterdam Patterns emerge if Communication & Multimedia Design Lecture: Major Program DesignThis! you have a closer look at buildings

Hogeschool Rotterdam Communication & Multimedia Design Grid Systems & Architecture Lecture: Major Program DesignThis! 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.

Hogeschool Rotterdam Communication & Multimedia Design Grid Systems & Architecture Lecture: Major Program DesignThis! Even some cities are based on grids, like New York or SimCity

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

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

Hogeschool Rotterdam Communication & Multimedia Design 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. Josef Müller-Brockmann

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

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

Hogeschool Rotterdam Communication & Multimedia Design How to design a grid system? Lecture: Major Program DesignThis! But what is a grid system?

Hogeschool Rotterdam Communication & Multimedia Design Is this a grid system? Is this a grid system? Lecture: Major Program DesignThis!

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

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

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

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

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

Hogeschool Rotterdam Communication & Multimedia Design Combining units: columns and rows Lecture: Major Program DesignThis!

Hogeschool Rotterdam Communication & Multimedia Design Grid systems and mathematics Lecture: Major Program DesignThis! Something about numbers

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

Hogeschool Rotterdam Communication & Multimedia Design The magic number 12: 3 x 4 Lecture: Major Program DesignThis! Three columns of four units

Hogeschool Rotterdam Communication & Multimedia Design The magic number 12: 2 x 6 Lecture: Major Program DesignThis! Two columns of six units

Hogeschool Rotterdam Communication & Multimedia Design The magic number 12: 4 x 3 Lecture: Major Program DesignThis! Four columns of three units

Hogeschool Rotterdam Communication & Multimedia Design The magic number 12: 6 x 2 Lecture: Major Program DesignThis! Six columns of two units

Hogeschool Rotterdam Communication & Multimedia Design The magic number 12: 2 + 6 + 2 + 2 Lecture: Major Program DesignThis! And so on, nearly iniﬁnite possibilities...

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

Hogeschool Rotterdam Communication & Multimedia Design The magic number 144 Lecture: Major Program DesignThis!

Hogeschool Rotterdam Communication & Multimedia Design The magic number 180 Lecture: Major Program DesignThis!

An example based on the magic Hogeschool Rotterdam Communication & Multimedia Design number 72 Lecture: Major Program DesignThis!

An example based on the magic Hogeschool Rotterdam Communication & Multimedia Design number 72 (144 divided by 2) Lecture: Major Program DesignThis!

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

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

The problem with Hogeschool Rotterdam Communication & Multimedia Design grid systems and the web 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 Hogeschool Rotterdam Communication & Multimedia Design grid systems and the web Lecture: Major Program DesignThis! On with the fancy stuff... How to make it movie look good? I guess that’s what you have been waiting for...

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

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

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

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

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

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

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

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

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

Hogeschool Rotterdam Communication & Multimedia Design Creating shapes with emptiness Lecture: Major Program DesignThis!

Hogeschool Rotterdam Communication & Multimedia Design Creating shapes with emptiness Lecture: Major Program DesignThis! Which one is better?

Hogeschool Rotterdam Communication & Multimedia Design Creating shapes with emptiness Lecture: Major Program DesignThis!

Hogeschool Rotterdam Communication & Multimedia Design Creating shapes with emptiness Lecture: Major Program DesignThis! This is a perfect example of how to play with a grid system

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

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

Hogeschool Rotterdam Communication & Multimedia Design Using guidelines Lecture: Major Program DesignThis! stacking hanging

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

Hogeschool Rotterdam Communication & Multimedia Design Using guidelines Lecture: Major Program DesignThis! Note that the guidelines are not centered and how the image is perfectly integrated with the typography

Hogeschool Rotterdam Communication & Multimedia Design Making the guidelines or grid visible Lecture: Major Program DesignThis!

Hogeschool Rotterdam Communication & Multimedia Design 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 Communication & Multimedia Design baseline grid Lecture: Major Program DesignThis! All the texts are perfectly aligned to the baseline grid

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

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

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

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

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

http://guity-novin.blogspot.com	5577
http://www.macromedios.net	3074
http://moodle.scd.ie	2523
http://www.uxgeek.co	1100
https://kc.columbiasc.edu	509
http://pixel.csueastbay.edu	366
http://guity-novin.blogspot.co.uk	221
http://editdesign101.blogspot.com	167
http://guity-novin.blogspot.com.au	140
http://highmenoptera.tumblr.com	123
http://guity-novin.blogspot.co.nz	100
http://www.prospective.nl	82
http://guity-novin.blogspot.com.es	59
http://guity-novin.blogspot.ca	55
http://www.archimediastudios.com	51
http://guity-novin.blogspot.it	37
http://guity-novin.blogspot.com.br	36
http://guity-novin.blogspot.in	33
http://guity-novin.blogspot.fr	32
http://guity-novin.blogspot.com.ar	27
http://seeixd.posterous.com	26
http://www.slideshare.net	25
http://guity-novin.blogspot.de	24
http://guity-novin.blogspot.mx	19
http://guity-novin.blogspot.pt	19
http://translate.googleusercontent.com	16
http://guity-novin.blogspot.se	12
http://kc.columbiasc.edu	7
url_unknown	7
http://dcvcc.wordpress.com	6
http://www.editdesign101.blogspot.com	5
http://guity-novin.blogspot.jp	5
http://webcache.googleusercontent.com	4
http://posterous.com	4
http://safe.tumblr.com	2
http://bedoyoblog.blogspot.com	2
http://ohsudev.mrooms3.net	2
http://tristisbooktours.blogspot.com	1
https://blackboard.robertmorris.edu	1
http://localhost	1

Grid Systems

by Bas Leurs on Feb 14, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

40 Embeds 14,500

Statistics

Grid Systems — Presentation Transcript