SlideShare a Scribd company logo

Grid Systems

Bas Leurs, profile picture
Bas Leurs

This document is a lecture on grid systems and modular design. It discusses the history and uses of grid systems in graphic design, architecture, and page layout. Some key points include: - Grid systems provide order, consistency and flexibility in design by establishing a set of guidelines. - Early uses of grids can be seen in manuscripts and Greek temples, while graphic designers like Wim Crouwel and Josef Müller-Brockmann popularized grids in the mid-20th century. - Effective grids divide space into columns and rows to form a modular structure. Common module sizes are based on factors of 12 to allow for flexibility. - Negative space and variation within the grid help make designs visually

Career
Related topics:
Graphic Design
1 of 92
Downloaded 3,637 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
Most read
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
Most read
92
Most read
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

More Related Content

PDF
It's all about typography
Interactive Communications
 
PDF
Typography Essentials: Part 1
Jennifer Janviere
 
PPTX
Design elements and principles
Maged A. Morsy
 
PPTX
Principles of Design
Coky Fauzi Alfi
 
PPT
التجديد في التدريب طارق سويدان
wafaalhariri
 
PPTX
The Psychology of Logo Shapes
Anita Nipāne
 
PPTX
Strategy Pyramid - 5 Levels
Jacob Thoft-Christensen
 
PPTX
Introduction to Graphic Design- Elements and Principles of Art
moonlitaqua
 
It's all about typography
Interactive Communications
 
Typography Essentials: Part 1
Jennifer Janviere
 
Design elements and principles
Maged A. Morsy
 
Principles of Design
Coky Fauzi Alfi
 
التجديد في التدريب طارق سويدان
wafaalhariri
 
The Psychology of Logo Shapes
Anita Nipāne
 
Strategy Pyramid - 5 Levels
Jacob Thoft-Christensen
 
Introduction to Graphic Design- Elements and Principles of Art
moonlitaqua
 

What's hot (20)

PPT
Basic Design : Elements & Principles
Sujit Jadhav
 
PDF
Elements of Design
Jennifer Janviere
 
PPTX
Emphasis : Principles of design
Niranjana Madan
 
PPTX
Drawing for interior Design
Melissa Betancourt
 
PPTX
Elements and Principles of Design (Updated)
Ravi Bhadauria
 
PPTX
THEORY: Ching's Notes about Theory of Architecture Terminologies
ArchiEducPH
 
PPT
03 architectural principles & elements
Jan Echiverri-Quintano
 
PPTX
Design principal
Atikul Islam
 
PPTX
Module 1 elements of design
swetha karlmarx
 
PDF
Use of Shapes in Graphic Design | Psychology of Shapes by ADMEC (Updated)
Ravi Bhadauria
 
PDF
Principles Of Design
sharmiarchitect
 
PDF
Basic design & visual arts (Elements of design)
Panorama Visualization, Pokhariput
 
PPTX
Principles of design theory of design module 2 proportion,scale, hierarchy etc
Stanly Sunny
 
PPT
Design elements
Karthik Yadavalli
 
PPTX
Intoduction to Design Summary Presentation ( Architecture )
Jordan Paing
 
PDF
Design principles and architecture
Alshimaa Aboelmakarem Farag
 
PDF
Design Theory - Lecture 01: What is design?
Bas Leurs
 
PPTX
Architectural design - FORM AND SPACE
Bimenpreet Kaur
 
PDF
Theory of architecture unit 03
Geeva Chandana
 
PPTX
Inrto to Architectural Drawing and Graphics I
indiracad
 
Basic Design : Elements & Principles
Sujit Jadhav
 
Elements of Design
Jennifer Janviere
 
Emphasis : Principles of design
Niranjana Madan
 
Drawing for interior Design
Melissa Betancourt
 
Elements and Principles of Design (Updated)
Ravi Bhadauria
 
THEORY: Ching's Notes about Theory of Architecture Terminologies
ArchiEducPH
 
03 architectural principles & elements
Jan Echiverri-Quintano
 
Design principal
Atikul Islam
 
Module 1 elements of design
swetha karlmarx
 
Use of Shapes in Graphic Design | Psychology of Shapes by ADMEC (Updated)
Ravi Bhadauria
 
Principles Of Design
sharmiarchitect
 
Basic design & visual arts (Elements of design)
Panorama Visualization, Pokhariput
 
Principles of design theory of design module 2 proportion,scale, hierarchy etc
Stanly Sunny
 
Design elements
Karthik Yadavalli
 
Intoduction to Design Summary Presentation ( Architecture )
Jordan Paing
 
Design principles and architecture
Alshimaa Aboelmakarem Farag
 
Design Theory - Lecture 01: What is design?
Bas Leurs
 
Architectural design - FORM AND SPACE
Bimenpreet Kaur
 
Theory of architecture unit 03
Geeva Chandana
 
Inrto to Architectural Drawing and Graphics I
indiracad
 
Ad

Viewers also liked (20)

PDF
Discrete time control systems
phannahty
 
PPTX
What is grid system
chetankane
 
ODP
Grid Based Layout
gordonbrander
 
PDF
Lesson 1 • Elements & Principles of Design and Art
Marcio Sargento
 
PDF
Grid Systems: Building Blocks to a Better User Experience
Dustin DiTommaso
 
PDF
Btechfinal
Garnette Robert
 
PDF
INTEGRATION
Pengeneee Peng
 
PDF
Diseño editorial pag y reticula
Carlos E Franco R
 
PDF
Building Technology 1 Project 2
Tan Jaden
 
PDF
Building Technology 1 Construction Solutions Report
douglasloon
 
PDF
Unidad 4 - Retículas
Fidel Romero
 
PPT
Diagramacion A Base De Reticulas
tls02cv
 
PPTX
Retícula & Arq. Modular
valentinarivadeneiraz
 
PDF
BUILDING TECHNOLOGY PROJECT 2 REPORT
JoyeeLee0131
 
PPTX
Cloud vs grid
Omid Sohrabi
 
PPT
Grid Technologies in Disaster Management
Videoguy
 
PPT
Grid Presentation
Marielisa Peralta
 
PDF
Grid technology for next gen media processing
vrt-medialab
 
PPTX
Grid computing
Ramraj Choudhary
 
PPT
Grid computing ppt 2003(done)
TASNEEM88
 
Discrete time control systems
phannahty
 
What is grid system
chetankane
 
Grid Based Layout
gordonbrander
 
Lesson 1 • Elements & Principles of Design and Art
Marcio Sargento
 
Grid Systems: Building Blocks to a Better User Experience
Dustin DiTommaso
 
Btechfinal
Garnette Robert
 
INTEGRATION
Pengeneee Peng
 
Diseño editorial pag y reticula
Carlos E Franco R
 
Building Technology 1 Project 2
Tan Jaden
 
Building Technology 1 Construction Solutions Report
douglasloon
 
Unidad 4 - Retículas
Fidel Romero
 
Diagramacion A Base De Reticulas
tls02cv
 
Retícula & Arq. Modular
valentinarivadeneiraz
 
BUILDING TECHNOLOGY PROJECT 2 REPORT
JoyeeLee0131
 
Cloud vs grid
Omid Sohrabi
 
Grid Technologies in Disaster Management
Videoguy
 
Grid Presentation
Marielisa Peralta
 
Grid technology for next gen media processing
vrt-medialab
 
Grid computing
Ramraj Choudhary
 
Grid computing ppt 2003(done)
TASNEEM88
 
Ad

Similar to Grid Systems (20)

PDF
Future Trends on Software and Systems Modeling
Jordi Cabot
 
PDF
FOCUS K3D Newsletter (Feb 2010)
FOCUS K3D
 
PDF
Collaborative 3D Modelling and Printing: What you See is not Directly What Yo...
Farid Mokhtar Noriega
 
PPTX
Digital Architecture, Architectural photography and the Impacts of social med...
Ogbuagu Kelechi Uchamma
 
PDF
DNM Portfolio
dmarlatt
 
PDF
SE2018_Lec 18_ Design Principles and Design Patterns
Amr E. Mohamed
 
PDF
SE2_Lec 19_Design Principles and Design Patterns
Amr E. Mohamed
 
DOCX
Ha5 article draft
nixon2011
 
PDF
thismedia 009
thismedia
 
PDF
Advanced Master in Computational Design & Making
Design By Data
 
PDF
Hatii seminar 2014 - The emerging needs and the long standing issues curating...
Ruggero Lancia
 
PDF
Excavating the knowledge of our ancestors
Uwe Friedrichsen
 
PDF
Portfolio Franz Seher
designbusters
 
PDF
Bouwen met Staal ConcepTueel artikel.pdf
Legootje
 
PDF
Introduction to wireframes
piksels
 
PDF
[부스트캠프 Tech Talk] 안영진_Tackling Complexity with Easy Stuff
CONNECT FOUNDATION
 
PDF
Urban Design Portfolio
smit_ralph
 
PDF
ArchiMAG_BIM_evolution_by_Victor_Silva
Victor Silva
 
PDF
The Future is Big Graphs: A Community View on Graph Processing Systems
Neo4j
 
PPTX
Competing visions for the future
Lora Kratchounova
 
Future Trends on Software and Systems Modeling
Jordi Cabot
 
FOCUS K3D Newsletter (Feb 2010)
FOCUS K3D
 
Collaborative 3D Modelling and Printing: What you See is not Directly What Yo...
Farid Mokhtar Noriega
 
Digital Architecture, Architectural photography and the Impacts of social med...
Ogbuagu Kelechi Uchamma
 
DNM Portfolio
dmarlatt
 
SE2018_Lec 18_ Design Principles and Design Patterns
Amr E. Mohamed
 
SE2_Lec 19_Design Principles and Design Patterns
Amr E. Mohamed
 
Ha5 article draft
nixon2011
 
thismedia 009
thismedia
 
Advanced Master in Computational Design & Making
Design By Data
 
Hatii seminar 2014 - The emerging needs and the long standing issues curating...
Ruggero Lancia
 
Excavating the knowledge of our ancestors
Uwe Friedrichsen
 
Portfolio Franz Seher
designbusters
 
Bouwen met Staal ConcepTueel artikel.pdf
Legootje
 
Introduction to wireframes
piksels
 
[부스트캠프 Tech Talk] 안영진_Tackling Complexity with Easy Stuff
CONNECT FOUNDATION
 
Urban Design Portfolio
smit_ralph
 
ArchiMAG_BIM_evolution_by_Victor_Silva
Victor Silva
 
The Future is Big Graphs: A Community View on Graph Processing Systems
Neo4j
 
Competing visions for the future
Lora Kratchounova
 

More from Bas Leurs (6)

PDF
Design theory - Lecture 04: Design Expertise / Design Thinking / Key concepts
Bas Leurs
 
PDF
Design Theory - Lecture 03: Design as Learning / Methods & Tools
Bas Leurs
 
PDF
Design Theory - Lecture 02: Design processes & Problem solving
Bas Leurs
 
PDF
Design Scripts: Designing (inter)actions with intentions (version 2.0)
Bas Leurs
 
PDF
Design Scripts: Designing (inter)action with intent
Bas Leurs
 
PDF
Thinking about Design
Bas Leurs
 
Design theory - Lecture 04: Design Expertise / Design Thinking / Key concepts
Bas Leurs
 
Design Theory - Lecture 03: Design as Learning / Methods & Tools
Bas Leurs
 
Design Theory - Lecture 02: Design processes & Problem solving
Bas Leurs
 
Design Scripts: Designing (inter)actions with intentions (version 2.0)
Bas Leurs
 
Design Scripts: Designing (inter)action with intent
Bas Leurs
 
Thinking about Design
Bas Leurs
 

Recently uploaded (20)

PPTX
cse couse aefrfrqewrbqwrgbqgvq2w3vqbvq23rbgw3rnw345
sirajamalif
 
PPTX
Nervous_System_Drugs_PPT.pptxXXXXXXXXXXXXXXXXX
uppujrrr256
 
PPTX
_+✅+JANUARY+2025+MONTHLY+CA.pptx current affairs
SantoshRout28
 
PDF
HR Jobs in Jaipur: 2025 Trends, Banking Careers & Smart Hiring Tools
ravisalarite
 
PPTX
E-Commerce____Intermediate_Presentation.pptx
SachinBharti34
 
PPTX
Surgical thesis protocol formation ppt.pptx
spd7327
 
PPTX
PE3-WEEK-3sdsadsadasdadadwadwdsdddddd.pptx
JovenReyes5
 
PPTX
Job-opportunities lecture about it skills
acehorlador
 
PDF
Sales and Distribution Managemnjnfijient.pdf
Alka392097
 
PPTX
ESD MODULE-5hdbdhbdbdbdbbdbdbbdndbdbdbdbbdbd
sumanthveeramallu9
 
PDF
Biography of Mohammad Anamul Haque Nayan
Mohammad Anamul Haque Nayan
 
PDF
シュアーイノベーション採用ピッチ資料｜Company Introduction & Recruiting Deck
ytanimura
 
PPTX
1751884730-Visual Basic -Unitj CS B.pptx
herosupravat
 
DOCX
mcsp232projectguidelinesjan2023 (1).docx
AYUSHMANAV
 
PPTX
退学买新西兰毕业证（WelTec毕业证书）惠灵顿理工学院毕业证国外证书制作
unweq
 
PPTX
PMP (Project Management Professional) course prepares individuals
Anands850668
 
PPTX
chapter 3_bem.pptxKLJLKJLKJLKJKJKLJKJKJKHJH
kaniece
 
DOCX
How to Become a Criminal Profiler or Behavioural Analyst.docx
biloguard123
 
PPTX
internship presentation of bsnl in colllege
ashwinrai774
 
PPTX
Condensed_Food_Science_Lecture1_Precised.pptx
JyotiSharma572976
 
cse couse aefrfrqewrbqwrgbqgvq2w3vqbvq23rbgw3rnw345
sirajamalif
 
Nervous_System_Drugs_PPT.pptxXXXXXXXXXXXXXXXXX
uppujrrr256
 
_+✅+JANUARY+2025+MONTHLY+CA.pptx current affairs
SantoshRout28
 
HR Jobs in Jaipur: 2025 Trends, Banking Careers & Smart Hiring Tools
ravisalarite
 
E-Commerce____Intermediate_Presentation.pptx
SachinBharti34
 
Surgical thesis protocol formation ppt.pptx
spd7327
 
PE3-WEEK-3sdsadsadasdadadwadwdsdddddd.pptx
JovenReyes5
 
Job-opportunities lecture about it skills
acehorlador
 
Sales and Distribution Managemnjnfijient.pdf
Alka392097
 
ESD MODULE-5hdbdhbdbdbdbbdbdbbdndbdbdbdbbdbd
sumanthveeramallu9
 
Biography of Mohammad Anamul Haque Nayan
Mohammad Anamul Haque Nayan
 
シュアーイノベーション採用ピッチ資料｜Company Introduction & Recruiting Deck
ytanimura
 
1751884730-Visual Basic -Unitj CS B.pptx
herosupravat
 
mcsp232projectguidelinesjan2023 (1).docx
AYUSHMANAV
 
退学买新西兰毕业证（WelTec毕业证书）惠灵顿理工学院毕业证国外证书制作
unweq
 
PMP (Project Management Professional) course prepares individuals
Anands850668
 
chapter 3_bem.pptxKLJLKJLKJLKJKJKLJKJKJKHJH
kaniece
 
How to Become a Criminal Profiler or Behavioural Analyst.docx
biloguard123
 
internship presentation of bsnl in colllege
ashwinrai774
 
Condensed_Food_Science_Lecture1_Precised.pptx
JyotiSharma572976
 

Grid Systems

  • 1. 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
  • 2. 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’
  • 3. 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’
  • 4. Hogeschool Rotterdam Communication & Multimedia Design Crouwel and grid systems Lecture: Major Program DesignThis!
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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!
  • 9. Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!
  • 10. Hogeschool Rotterdam Patterns emerge if Communication & Multimedia Design Lecture: Major Program DesignThis! you have a closer look at buildings
  • 11. Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!
  • 12. Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!
  • 13. 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.
  • 14. Hogeschool Rotterdam Communication & Multimedia Design Grid Systems & Architecture Lecture: Major Program DesignThis! Even some cities are based on grids, like New York or SimCity
  • 15. 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...
  • 16. 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
  • 17. 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
  • 18. 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
  • 19. 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.
  • 20. Hogeschool Rotterdam Communication & Multimedia Design How to design a grid system? Lecture: Major Program DesignThis! But what is a grid system?
  • 21. Hogeschool Rotterdam Communication & Multimedia Design Is this a grid system? Is this a grid system? Lecture: Major Program DesignThis!
  • 22. Hogeschool Rotterdam Communication & Multimedia Design Is this a grid system? Is this a grid system? Lecture: Major Program DesignThis!
  • 23. Hogeschool Rotterdam Communication & Multimedia Design Is this a grid system? Is this a grid system? Lecture: Major Program DesignThis!
  • 24. Hogeschool Rotterdam Communication & Multimedia Design Is this a grid system? Is this a grid system? Lecture: Major Program DesignThis!
  • 25. Hogeschool Rotterdam Communication & Multimedia Design Is this a grid system? Is this a grid system? Lecture: Major Program DesignThis!
  • 26. Hogeschool Rotterdam Communication & Multimedia Design Is this a grid system? Is this a grid system? Lecture: Major Program DesignThis!
  • 27. 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
  • 28. 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?
  • 29. 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?
  • 30. Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!
  • 31. Hogeschool Rotterdam Communication & Multimedia Design Lecture: Major Program DesignThis!
  • 32. Hogeschool Rotterdam Communication & Multimedia Design Combining units: columns Lecture: Major Program DesignThis!
  • 33. Hogeschool Rotterdam Communication & Multimedia Design Combining units: columns Lecture: Major Program DesignThis!
  • 34. 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
  • 35. Hogeschool Rotterdam Communication & Multimedia Design Combining units: columns and rows Lecture: Major Program DesignThis!
  • 36. Hogeschool Rotterdam Communication & Multimedia Design Combining units: columns and rows Lecture: Major Program DesignThis!
  • 37. Hogeschool Rotterdam Communication & Multimedia Design Grid systems and mathematics Lecture: Major Program DesignThis! Something about numbers
  • 38. 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.”
  • 39. Hogeschool Rotterdam Communication & Multimedia Design The magic number 12: 3 x 4 Lecture: Major Program DesignThis! Three columns of four units
  • 40. Hogeschool Rotterdam Communication & Multimedia Design The magic number 12: 2 x 6 Lecture: Major Program DesignThis! Two columns of six units
  • 41. Hogeschool Rotterdam Communication & Multimedia Design The magic number 12: 4 x 3 Lecture: Major Program DesignThis! Four columns of three units
  • 42. Hogeschool Rotterdam Communication & Multimedia Design The magic number 12: 6 x 2 Lecture: Major Program DesignThis! Six columns of two units
  • 43. Hogeschool Rotterdam Communication & Multimedia Design The magic number 12: 2 + 6 + 2 + 2 Lecture: Major Program DesignThis! And so on, nearly inifinite possibilities...
  • 44. 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...
  • 45. 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...
  • 46. Hogeschool Rotterdam Communication & Multimedia Design The magic number 144 Lecture: Major Program DesignThis!
  • 47. Hogeschool Rotterdam Communication & Multimedia Design The magic number 180 Lecture: Major Program DesignThis!
  • 48. An example based on the magic Hogeschool Rotterdam Communication & Multimedia Design number 72 Lecture: Major Program DesignThis!
  • 49. An example based on the magic Hogeschool Rotterdam Communication & Multimedia Design number 72 (144 divided by 2) Lecture: Major Program DesignThis!
  • 50. 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
  • 51. 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.
  • 52. 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.
  • 53. 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’.
  • 54. 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...
  • 55. 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
  • 56. 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.
  • 57. Hogeschool Rotterdam Communication & Multimedia Design Playing with grids Lecture: Major Program DesignThis!
  • 58. Hogeschool Rotterdam Communication & Multimedia Design Playing with grids Lecture: Major Program DesignThis!
  • 59. 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?
  • 60. 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.
  • 61. 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.
  • 62. 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
  • 63. 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.
  • 64. 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?
  • 65. Hogeschool Rotterdam Communication & Multimedia Design Creating shapes with emptiness Lecture: Major Program DesignThis!
  • 66. Hogeschool Rotterdam Communication & Multimedia Design Creating shapes with emptiness Lecture: Major Program DesignThis!
  • 67. Hogeschool Rotterdam Communication & Multimedia Design Creating shapes with emptiness Lecture: Major Program DesignThis!
  • 68. Hogeschool Rotterdam Communication & Multimedia Design Creating shapes with emptiness Lecture: Major Program DesignThis!
  • 69. Hogeschool Rotterdam Communication & Multimedia Design Creating shapes with emptiness Lecture: Major Program DesignThis! Which one is better?
  • 70. Hogeschool Rotterdam Communication & Multimedia Design Creating shapes with emptiness Lecture: Major Program DesignThis!
  • 71. Hogeschool Rotterdam Communication & Multimedia Design Creating shapes with emptiness Lecture: Major Program DesignThis!
  • 72. Hogeschool Rotterdam Communication & Multimedia Design Creating shapes with emptiness Lecture: Major Program DesignThis!
  • 73. Hogeschool Rotterdam Communication & Multimedia Design Creating shapes with emptiness Lecture: Major Program DesignThis!
  • 74. 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
  • 75. 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
  • 76. Hogeschool Rotterdam Communication & Multimedia Design Using guidelines Lecture: Major Program DesignThis!
  • 77. Hogeschool Rotterdam Communication & Multimedia Design Using guidelines Lecture: Major Program DesignThis!
  • 78. Hogeschool Rotterdam Communication & Multimedia Design Using guidelines Lecture: Major Program DesignThis! stacking hanging
  • 79. Hogeschool Rotterdam Communication & Multimedia Design Using guidelines Lecture: Major Program DesignThis!
  • 80. Hogeschool Rotterdam Communication & Multimedia Design Using guidelines Lecture: Major Program DesignThis!
  • 81. Hogeschool Rotterdam Communication & Multimedia Design Using guidelines Lecture: Major Program DesignThis!
  • 82. Hogeschool Rotterdam Communication & Multimedia Design Using guidelines Lecture: Major Program DesignThis!
  • 83. 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
  • 84. Hogeschool Rotterdam Communication & Multimedia Design Making the guidelines or grid visible Lecture: Major Program DesignThis!
  • 85. Hogeschool Rotterdam Communication & Multimedia Design Making the guidelines or grid visible Lecture: Major Program DesignThis!
  • 86. 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.
  • 87. 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
  • 88. 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)
  • 89. 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
  • 90. 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
  • 91. 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
  • 92. 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