Journal
Five simple steps to designing grid systems - Part 1
- Posted on: July 04, 2005
- In: Design, Simple Steps, Typography
- Comments closed
The first part of this Five Simple Steps series is taking some of the points discussed in the preface and putting it to practice.
Ratios are at the core of any well designed grid system. Sometimes those ratios are rational, such as 1:2 or 2:3, others are irrational such as the 1:1.414 (the proportion of A4). This first part is about how to combine those ratios to create simple, balanced grids which in turn will help you create harmonious compositions.
Starting with a blank canvas
It's always easier in these kinds of tutorials to put the example in context, in some kind of real world scenario. So, this is it. You've got to design a programme for a gallery exhibition. You know you want the size to be A4. You also know that there are going to be photographs and text, and the photographs will be of varying size. There you have it - your blank canvas.
Subdividing ratios
The grid system we are going to design is a simple symmetrical grid based on a continuous division of the paper size in the ratio 1:1414. Using the paper size as a guide we can retain the proportion throughout the grid, this will give our elements within the design a relationship to one another, the grid and the paper size.
This is one of the easiest ways to create a balanced grid. By using the size of the paper as a guide we can divide using that ratio to begin creating the grid. You can see this through diagrams 1 - 6 that we begin by simply layering division upon division to slowly build up the grid.
Diagrams kindly updated by Michael Spence
Getting creative
Many have said grid systems can stifle creativity, but I disagree. Grid systems can facilitate creativity by providing a framework and already answer some designers questions such as 'where should the folios go', 'how wide should the measure be?' etc. A well designed grid system will go some way to answer these questions and more.
So, we have our grid. We can now begin to experiment with type areas, shapes and composition. We can explore how type and image will work together on the various types of pages our publication will have.
Diagram 7 shows the text area with the first elements of the access structure - running heads and folios. Diagrams 8 and 9 show how adaptable the grid is to various design options.
Short but sweet
A simple step to begin with. Next we'll go onto to more complex ratios, such as the Golden Section, and combining multiple ratios across spreads instead of single pages.
The series
This is the first installment of this "Simple Steps..." series.
Most recent entries
- Coolspotters: Where people and products meet
- Alys Rose Boulton
- abcdefghijklmnopqrstuvwxyz
- From Poly to Pole
- Ten Crimes Against Web Typography (and how to avoid them)
- Start Your Own Business
- Coolspotters and Garcia Media
- Sir Edmund Hillary: 1919 - 2008
- Twitter didn’t eat my blogging, 2007 did
- BBC redesign: tellys have rounded corners, right?
Categories
Search
Journal feeds
Books
Stuff I like
Powered by Expression Engine
I'm a graphic designer from near Cardiff in the UK. I've been a designer for over ten years now and primarily work on the web. I'm still partial to a bit of print every now and then though. I used to work for Agency.com in London as an Art Director before working as a Senior Designer for the BBC in sunny Cardiff. This was all before I took leave of my senses and formed my own design consultancy, Mark Boulton Design Ltd.
I've got a thing about grids and typography and occasionally ramble on about them to anyone who will listen.
Mark Boulton Design
If you're after simple, clean and effective web design; let me know.
Comments
Short but goodarticle, Mark. I’m already looking forward to the other articles ;]
I still have a general (but related) question left though. I’m using Photoshop for quite some years now and one feature I still miss when working with grids is to create guidelines - to design grids - per layer. Do you perhaps know if there’s a workaround for this? Most of the times when designing a website I use layer - or section actually - guidelines which I need for that section only.
Maarten
Tue 5th Jul 2005
at 12:50 am
Thanks Maarten. I wanted to give a fairly gentle introduction to this series and also keep them a bit simpler than the typo series.
I tend to use a layer on which I draw the grid in Photoshop, either that or just the guides but that can tend to get a bit complicated the grid is complex.
Mark Boulton
Tue 5th Jul 2005
at 12:55 am
Yeah I already thought of that option but ofcourse it’s far from thorough. Guidelines in Photoshop have so many benefits which you lose with such a workaround. Hopefully the feature of guides per layer will be added someday.
Maarten
Tue 5th Jul 2005
at 1:14 am
Good and short articel.
I use grids sometimes when im working on a website. For print this is realy good article.
Thomas Krajewski
Tue 5th Jul 2005
at 4:27 am
Thanks Thomas. This thoery can of course be applied to a website, although as we’re not dealing with a fixed proportion, division of ratios like this is a little tricky. I will be addressing grid design specifically for web stuff later in this series.
Mark Boulton
Tue 5th Jul 2005
at 4:30 am
A nice taster Mark. I’m looking forward to the rest.
Thanks for sharing.
Neil Ford
Tue 5th Jul 2005
at 6:05 am
Mark, this is all new to me, so I apologize if this is a stupid question, but I don’t understand how you knew where to draw the lines in diagram 2. The rectangles that are formed by the black lines in diagram 2 are clearly not all the same size. I guess I’m confused on how you know where to draw your guide lines. Do you just go down 1.1414 for every 1 unit you go over?
Peter G.
Tue 5th Jul 2005
at 6:23 am
Peter G - No worries, that’s what these comments are here for :)
You’ll have to forgive me for my slightly inaccurate diagrams here. The rectangles in diagram 2 are meant to be the same and yes I did just go down by that ratio, I just rotated the rectangle in step 3
Mark Boulton
Tue 5th Jul 2005
at 2:24 pm
I’m a designer and I’m finding your references great. It’s a good reminder/reference - when’s your next installment? Can’t wait!
Si
Si
Tue 5th Jul 2005
at 3:06 pm
Nice article Mark, looks like another great series. It wWould be nice to see an actual case study of one of your past print jobs showing how grid theory was applied.
Nigel
Tue 5th Jul 2005
at 8:39 pm
Mark, might I suggest some helpful labels to indicate the application of your ratios? I admit, like Peter, to being confused on first viewing. And when you say you rotated the rectangle in Step 3, you mean going from Step 3 to Step 4, right?
Scott Cranfill
Tue 5th Jul 2005
at 8:52 pm
Scott - I can see how this could be confusing especially as I’m rotating the divisions as well. I’ll add some notation which will hopefully make things a bit clearer.
The first rotation is from step 2 to 3. The ratio grid is rotated from portrait to landscape.
Mark Boulton
Tue 5th Jul 2005
at 11:31 pm
Still having trouble visualizing the rotation from 2 to 3, but I imagine that notation will help out. Thanks in advance :)
Scott Cranfill
Tue 5th Jul 2005
at 11:44 pm
It’s actually rotated and then offset so that the centre ‘box’ of the rotated grid is centred on top of the existing grid lines. Like you say, the notation should help - I’ll get onto it.
Mark Boulton
Tue 5th Jul 2005
at 11:51 pm
A-ha-ha! That does make more sense now. Great start to the series, looking forward to the rest :)
Scott Cranfill
Tue 5th Jul 2005
at 11:52 pm
Mark,
I’m ALMOST getting it. Any chance you could show us the math involved though? Or any shortcuts we could use in...say...InDesign [like creating page grids with 2 columns, then 3, then 5, etc...? I shall wait anxiously for your notations!
Brian
Wed 6th Jul 2005
at 3:10 am
Mark…
Great series...concise and to the point. Thanks for sharing your talent & knowledge!
Paul
Wed 6th Jul 2005
at 7:12 am
Great start to the series, I’ve been looking forward to this ever since the Design in Flight article.
Matthew Pennell
Wed 6th Jul 2005
at 3:18 pm
Brian - Sure, maybe I didn’t explain as well as I could have done :-P.
Basically, you use the proportion of the paper size as a guide to creating the grid. What I’ve done here is divide the page up into four (using that proportion) (step 1), then I’ve created a 3x3 grid of that proportion and layered it over the previous divisions. (step 2), then another division but this time I’ve rotated the whole layer ninety degrees (step 3). This time I’ve blown the proportion right up (step 4 and 5) to create the margins.
What I was hoping to illustrate was that designing grid systems isn’t always about ‘I’m going to design a 3 column grid’ or a ‘4 column grid’, it’s about designing a structure or a framework or related shapes. This is much more flexible than a simple column grid - hopefully this will be clearer as we go through the other steps.
Hope that helps.
Mark Boulton
Wed 6th Jul 2005
at 5:16 pm
In my design classes we spent a great deal of time on grids, grid systems, etc., but somewhere along the way, I fell into the “if it feels right...” way of doing layouts for web and print. In the last year or so, though, I’ve gone back to grids and find that I really prefer having the structure that they provide. Thanks for an excellent refresher!
Bob
Wed 6th Jul 2005
at 10:00 pm
Ahh .. That last explination cleared it right up for me. I’m setting up a template in InDesign now and will do the same for Photoshop.
I’ve been looking at getting either Kimberly Elam’s Grid Systems or Grid Systems in Graphic Design by Josef Muller-Brockmann. Any thoughts on either of these books?
Thomas
Thu 7th Jul 2005
at 2:13 am
The Muller-Brockmann book is excellent. I haven’t read the Elam’s, but from what I can gather it’s more of a ‘here’s another example of a nice grid’ book than Muller-Brockmann’s.
Mark Boulton
Thu 7th Jul 2005
at 3:38 am
This is probably a silly question and completely unrelated to grid systems, but what font did you use for the body text of this page?
Jia
Fri 8th Jul 2005
at 10:04 am
This looks great (I love grids)… but I, like many others, am having trouble seeing what exactly is happening. Seeing some numbers would certainly help me out.
I look forward to the continuation of this series… it’s got potential. :) Thanks.
Noah Bradley
Fri 8th Jul 2005
at 10:23 am
Jia, if you’re on Windows, you’re looking at Lucida Sans Unicode. If you’re running Mac OS, you’re looking at Lucida Grande :)
Scott Cranfill
Fri 8th Jul 2005
at 10:37 am
Thanks Scott, mystery solved. :)
Jia
Fri 8th Jul 2005
at 11:39 am
Mark -
This is my first exposure to grid systems, and I am fascinated. Thank you so much for sharing your knowledge!
Steps 1, 2 and 3 make perfect sense, but steps 4 and 5 confuse me. I see the ratio, but I don’t understand how you determined the widths of the margins. Are they standardized measurements, or are their sizes the designer’s choice based on the parameters of each project?
I have no training in design. I’m completely self-taught.
Steve
Sun 10th Jul 2005
at 1:10 pm
It’d be great if you could provide some samples for downloading. Maybe a PSD file with multiple layers of grid.
Ottawa
Mon 11th Jul 2005
at 11:06 pm
I have a piece of A4 paper on my notice board folded just like in the diagram, I’ve been using it for years. I’m looking forward to the next in the series.
bingojackson
Tue 12th Jul 2005
at 6:33 pm
Very nice!
It is very refreshing to see an approach that doesn’t start with the stifling question ‘how many columns do I want?’
I have also had success using “grids” that are not all at right angles - a friend gave me a book of Arabic geometric patterns, with guidelines on each illustration showing how they are constructed. This results is some very cool layout choices - and might be useful for web design.
Ben-David
Wed 13th Jul 2005
at 8:52 pm
For a --(novice) guy, I’m lost from 2 to 3 and then on. And I cannot see how the 1:1.1414 ratio coming in the picture. It would be great if there are some formulas from 2 to 3 and 3 to 4, etc. Thanks!
Yuan Hon
Mon 18th Jul 2005
at 11:06 pm
Steve - The margin measurements are arbitrarily placed to accommodate access structure elements (folios etc) and other content elements.
Yuan Hon - I’ve uploaded new images which have been updated by one of my readers - hopefully this should make it a lot clearer how the ratios come in to play.
Mark Boulton
Thu 21st Jul 2005
at 3:43 am
Good stuff, Mark, cheers :)
Scott Cranfill
Thu 21st Jul 2005
at 5:04 am
Mark -
It’s very helpful to know that as long as the proportions are maintained, the margin widths are the designer’s call.
You’ve taken a concept that seemed very complex to me and simplified it by reducing it to a few easy-to-understand steps.
Not only are you an accomplished designer ... you’re a great teacher.
Thank you, sir!
Steve
Thu 21st Jul 2005
at 8:37 pm
I look forward to the continuation of this series
Thanks
Babu
Fri 6th Jan 2006
at 7:26 pm
You’ve got way too many (i.e. more than zero) JavaScripterrors coming up: “mmcomments is undefined.”
Good article though (once I’d cleared all the ‘Do you want to debug this JavaScript’ alerts.
Phil
Wed 18th Jan 2006
at 5:40 pm
I think you can get some related info. in a new book, sitting at my ‘to be reveiwed desk’
Distributed Data Management in Grid Environments, by Michael Di Stefano (2005)
http://www.amazon.com/gp/product/0471687197/qid=1137949426/sr=1-1/ref=sr_1_1/102-3282801-1448154?s=books&v=glance&n=283155
See ‘Table of Contents’
http://search.barnesandnoble.com/booksearch/isbninquiry.asp?ISBN=0471687197&pdf=y
Dr. Mohamed Taher
Mon 23rd Jan 2006
at 1:07 am