Grid Systems
Upcoming SlideShare
Loading in...5
×
 

Grid Systems

on

  • 111,982 views

An introduction to Modular Design.

An introduction to Modular Design.

Statistics

Views

Total Views
111,982
Views on SlideShare
20,298
Embed Views
91,684

Actions

Likes
40
Downloads
1,300
Comments
3

146 Embeds 91,684

http://guity-novin.blogspot.com 24695
http://www.uxabilidad.com 15160
http://www.uxgeek.co 9517
http://moodle.scd.ie 7127
http://guity-novin.blogspot.co.uk 5994
http://www.macromedios.net 3075
http://guity-novin.blogspot.com.au 2476
http://gda01.wordpress.com 2426
http://guity-novin.blogspot.ca 2171
http://the-noie.blogspot.jp 1599
http://guity-novin.blogspot.ch 1059
http://guity-novin.blogspot.fr 1057
http://guity-novin.blogspot.de 1026
http://guity-novin.blogspot.co.nz 1008
https://kc.columbiasc.edu 1003
http://guity-novin.blogspot.in 874
http://guity-novin.blogspot.it 819
http://guity-novin.blogspot.sg 809
http://guity-novin.blogspot.com.br 618
http://guity-novin.blogspot.nl 615
http://guity-novin.blogspot.ie 612
http://guity-novin.blogspot.com.es 580
http://guity-novin.blogspot.com.ar 537
http://guity-novin.blogspot.pt 523
http://guity-novin.blogspot.ru 452
http://guity-novin.blogspot.kr 436
http://guity-novin.blogspot.jp 416
http://pixel.csueastbay.edu 366
http://guity-novin.blogspot.co.il 351
http://guity-novin.blogspot.mx 340
http://guity-novin.blogspot.se 269
http://guity-novin.blogspot.tw 235
http://guity-novin.blogspot.dk 217
http://guity-novin.blogspot.be 212
http://guity-novin.blogspot.gr 205
http://guity-novin.blogspot.ro 199
http://guity-novin.blogspot.no 193
http://guity-novin.blogspot.hk 191
http://editdesign101.blogspot.com 189
http://translate.googleusercontent.com 184
http://guity-novin.blogspot.cz 165
http://guity-novin.blogspot.co.at 145
http://guity-novin.blogspot.hu 140
http://highmenoptera.tumblr.com 125
http://www.prospective.nl 122
http://www.archimediastudios.com 112
http://guity-novin.blogspot.com.tr 107
http://guity-novin.blogspot.fi 94
http://guity-novin.blogspot.ae 83
http://historiadesigneteoria.blogspot.com 61
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Grid Systems Grid Systems Presentation Transcript

  • 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 Lecture: Major Program DesignThis!
  • Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!
  • 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 Is this a grid system? Is this a grid system? Lecture: Major Program DesignThis!
  • Hogeschool Rotterdam Communication & Multimedia Design Is this a grid system? Is this a grid system? Lecture: Major Program DesignThis!
  • Hogeschool Rotterdam Communication & Multimedia Design Is this a grid system? Is this a grid system? Lecture: Major Program DesignThis!
  • Hogeschool Rotterdam Communication & Multimedia Design Is this a grid system? Is this a grid system? Lecture: Major Program DesignThis!
  • 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 Lecture: Major Program DesignThis!
  • Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!
  • Hogeschool Rotterdam Communication & Multimedia Design Combining units: columns Lecture: Major Program DesignThis!
  • 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 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 inifinite 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!
  • 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!
  • 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!
  • 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!
  • 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!
  • 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!
  • 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!
  • Hogeschool Rotterdam Communication & Multimedia Design Using guidelines Lecture: Major Program DesignThis!
  • 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!
  • 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