The personal disquiet of

Mark Boulton

July 4th, 2005

Five simple steps to designing grid systems — Part 1

The first part of this Five Simple Steps series is tak­ing some of the points dis­cussed in the pre­face and put­ting it to practice.

Ratios are at the core of any well designed grid sys­tem. Some­times those ratios are rational, such as 1:2 or 2:3, oth­ers are irra­tional such as the 1:1.414 (the pro­por­tion of A4). This first part is about how to com­bine those ratios to cre­ate simple, bal­anced grids which in turn will help you cre­ate har­mo­ni­ous compositions.

Start­ing with a blank canvas

It’s always easier in these kinds of tutori­als to put the example in con­text, in some kind of real world scen­ario. So, this is it. You’ve got to design a pro­gramme for a gal­lery exhib­i­tion. You know you want the size to be A4. You also know that there are going to be pho­to­graphs and text, and the pho­to­graphs will be of vary­ing size. There you have it — your blank canvas.

Sub­divid­ing ratios

The grid sys­tem we are going to design is a simple sym­met­rical grid based on a con­tinu­ous divi­sion of the paper size in the ratio 1:1414. Using the paper size as a guide we can retain the pro­por­tion through­out the grid, this will give our ele­ments within the design a rela­tion­ship to one another, the grid and the paper size.

This is one of the easi­est ways to cre­ate a bal­anced grid. By using the size of the paper as a guide we can divide using that ratio to begin cre­at­ing the grid. You can see this through dia­grams 1 — 6 that we begin by simply lay­er­ing divi­sion upon divi­sion to slowly build up the grid. 

{title}

{title}

Dia­grams kindly updated by Michael Spence

Get­ting creative

Many have said grid sys­tems can stifle cre­ativ­ity, but I dis­agree. Grid sys­tems can facil­it­ate cre­ativ­ity by provid­ing a frame­work and already answer some design­ers ques­tions such as ‘where should the folios go’, ‘how wide should the meas­ure be?’ etc. A well designed grid sys­tem will go some way to answer these ques­tions and more.

So, we have our grid. We can now begin to exper­i­ment with type areas, shapes and com­pos­i­tion. We can explore how type and image will work together on the vari­ous types of pages our pub­lic­a­tion will have.

{title}

Dia­gram 7 shows the text area with the first ele­ments of the access struc­ture — run­ning heads and folios. Dia­grams 8 and 9 show how adapt­able the grid is to vari­ous design options.

Short but sweet

A simple step to begin with. Next we’ll go onto to more com­plex ratios, such as the Golden Sec­tion, and com­bin­ing mul­tiple ratios across spreads instead of single pages.

The series

This is the first install­ment of this “Simple Steps…” series.

  1. Sub­divid­ing ratios
  2. Ratios and com­plex grid systems
  3. Grid sys­tems for web design: Part 1
  4. Grid sys­tems for web design: Part 2 Fixed
  5. Grid sys­tems for web design: Part 3 Fluid

This entry was posted on Monday, July 4th, 2005 at 4:45 pm and is filed under Design, Simple Steps, Typography.

You can follow any responses to this entry through the RSS 2.0 feed.

Responses are currently closed, but you can trackback from your own site.

69 Responses to “Five simple steps to designing grid systems — Part 1”

  1. Maarten said on: July 4th, 2005 at 6:50 pm

    Short but goodarticle, Mark. I’m already look­ing for­ward to the other articles ;] 

    I still have a gen­eral (but related) ques­tion left though. I’m using Pho­toshop for quite some years now and one fea­ture I still miss when work­ing with grids is to cre­ate guidelines — to design grids — per layer. Do you per­haps know if there’s a work­around for this? Most of the times when design­ing a web­site I use layer — or sec­tion actu­ally — guidelines which I need for that sec­tion only.

  2. Mark Boulton said on: July 4th, 2005 at 6:55 pm

    Thanks Maarten. I wanted to give a fairly gentle intro­duc­tion to this series and also keep them a bit sim­pler than the typo series. 

    I tend to use a layer on which I draw the grid in Pho­toshop, either that or just the guides but that can tend to get a bit com­plic­ated the grid is complex.

  3. Maarten said on: July 4th, 2005 at 7:14 pm

    Yeah I already thought of that option but ofcourse it’s far from thor­ough. Guidelines in Pho­toshop have so many bene­fits which you lose with such a work­around. Hope­fully the fea­ture of guides per layer will be added someday.

  4. Thomas Krajewski said on: July 4th, 2005 at 10:27 pm

    Good and short articel. 

    I use grids some­times when im work­ing on a web­site. For print this is realy good article.

  5. Mark Boulton said on: July 4th, 2005 at 10:30 pm

    Thanks Thomas. This thoery can of course be applied to a web­site, although as we’re not deal­ing with a fixed pro­por­tion, divi­sion of ratios like this is a little tricky. I will be address­ing grid design spe­cific­ally for web stuff later in this series.

  6. Neil Ford said on: July 5th, 2005 at 12:05 am

    A nice taster Mark. I’m look­ing for­ward to the rest. 

    Thanks for sharing.

  7. Peter G. said on: July 5th, 2005 at 12:23 am

    Mark, this is all new to me, so I apo­lo­gize if this is a stu­pid ques­tion, but I don’t under­stand how you knew where to draw the lines in dia­gram 2. The rect­angles that are formed by the black lines in dia­gram 2 are clearly not all the same size. I guess I’m con­fused on how you know where to draw your guide lines. Do you just go down 1.1414 for every 1 unit you go over?

  8. Mark Boulton said on: July 5th, 2005 at 8:24 am

    Peter G — No wor­ries, that’s what these com­ments are here for :) 

    You’ll have to for­give me for my slightly inac­cur­ate dia­grams here. The rect­angles in dia­gram 2 are meant to be the same and yes I did just go down by that ratio, I just rotated the rect­angle in step 3

  9. Si said on: July 5th, 2005 at 9:06 am

    I’m a designer and I’m find­ing your ref­er­ences great. It’s a good reminder/reference — when’s your next install­ment? Can’t wait! 

    Si

  10. Nigel said on: July 5th, 2005 at 2:39 pm

    Nice art­icle Mark, looks like another great series. It wWould be nice to see an actual case study of one of your past print jobs show­ing how grid the­ory was applied.

  11. Scott Cranfill said on: July 5th, 2005 at 2:52 pm

    Mark, might I sug­gest some help­ful labels to indic­ate the applic­a­tion of your ratios?  I admit, like Peter, to being con­fused on first view­ing.  And when you say you rotated the rect­angle in Step 3, you mean going from Step 3 to Step 4, right?

  12. Mark Boulton said on: July 5th, 2005 at 5:31 pm

    Scott — I can see how this could be con­fus­ing espe­cially as I’m rotat­ing the divi­sions as well. I’ll add some nota­tion which will hope­fully make things a bit clearer. 

    The first rota­tion is from step 2 to 3. The ratio grid is rotated from por­trait to landscape.

  13. Scott Cranfill said on: July 5th, 2005 at 5:44 pm

    Still hav­ing trouble visu­al­iz­ing the rota­tion from 2 to 3, but I ima­gine that nota­tion will help out.  Thanks in advance :)

  14. Mark Boulton said on: July 5th, 2005 at 5:51 pm

    It’s actu­ally rotated and then off­set so that the centre ‘box’ of the rotated grid is centred on top of the exist­ing grid lines. Like you say, the nota­tion should help — I’ll get onto it.

  15. Scott Cranfill said on: July 5th, 2005 at 5:52 pm

    A-ha-ha!  That does make more sense now.  Great start to the series, look­ing for­ward to the rest :)

  16. Brian said on: July 5th, 2005 at 9:10 pm

    Mark,

    I’m ALMOST get­ting it. Any chance you could show us the math involved though? Or any short­cuts we could use in…say…InDesign [like cre­at­ing page grids with 2 columns, then 3, then 5, etc…? I shall wait anxiously for your notations!

  17. Paul said on: July 6th, 2005 at 1:12 am

    Mark…

    Great series…concise and to the point. Thanks for shar­ing your tal­ent & knowledge!

  18. Matthew Pennell said on: July 6th, 2005 at 9:18 am

    Great start to the series, I’ve been look­ing for­ward to this ever since the Design in Flight article.

  19. Mark Boulton said on: July 6th, 2005 at 11:16 am

    Brian — Sure, maybe I didn’t explain as well as I could have done :-P. 

    Basic­ally, you use the pro­por­tion of the paper size as a guide to cre­at­ing the grid. What I’ve done here is divide the page up into four (using that pro­por­tion) (step 1), then I’ve cre­ated a 3x3 grid of that pro­por­tion and layered it over the pre­vi­ous divi­sions. (step 2), then another divi­sion but this time I’ve rotated the whole layer ninety degrees (step 3). This time I’ve blown the pro­por­tion right up (step 4 and 5) to cre­ate the margins. 

    What I was hop­ing to illus­trate was that design­ing grid sys­tems isn’t always about ‘I’m going to design a 3 column grid’ or a ‘4 column grid’, it’s about design­ing a struc­ture or a frame­work or related shapes. This is much more flex­ible than a simple column grid — hope­fully this will be clearer as we go through the other steps.

    Hope that helps.

  20. Bob said on: July 6th, 2005 at 4:00 pm

    In my design classes we spent a great deal of time on grids, grid sys­tems, etc., but some­where along the way, I fell into the “if it feels right…” way of doing lay­outs for web and print. In the last year or so, though, I’ve gone back to grids and find that I really prefer hav­ing the struc­ture that they provide. Thanks for an excel­lent refresher!

  21. Thomas said on: July 6th, 2005 at 8:13 pm

    Ahh .. That last explin­a­tion cleared it right up for me.  I’m set­ting up a tem­plate in InDes­ign now and will do the same for Photoshop. 

    I’ve been look­ing at get­ting either Kim­berly Elam’s Grid Sys­tems or Grid Sys­tems in Graphic Design by Josef Muller-Brockmann.  Any thoughts on either of these books?

  22. Mark Boulton said on: July 6th, 2005 at 9:38 pm

    The Muller-Brockmann book is excel­lent. 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.

  23. Jia said on: July 8th, 2005 at 4:04 am

    This is prob­ably a silly ques­tion and com­pletely unre­lated to grid sys­tems, but what font did you use for the body text of this page?

  24. Noah Bradley said on: July 8th, 2005 at 4:23 am

    This looks great (I love grids)… but I, like many oth­ers, am hav­ing trouble see­ing what exactly is hap­pen­ing. See­ing some num­bers would cer­tainly help me out. 

    I look for­ward to the con­tinu­ation of this series… it’s got poten­tial. :) Thanks.

  25. Scott Cranfill said on: July 8th, 2005 at 4:37 am

    Jia, if you’re on Win­dows, you’re look­ing at Lucida Sans Uni­code.  If you’re run­ning Mac OS, you’re look­ing at Lucida Grande :)

  26. Jia said on: July 8th, 2005 at 5:39 am

    Thanks Scott, mys­tery solved. :)

  27. Steve said on: July 10th, 2005 at 7:10 am

    Mark -

    This is my first expos­ure to grid sys­tems, and I am fas­cin­ated. Thank you so much for shar­ing your knowledge! 

    Steps 1, 2 and 3 make per­fect sense, but steps 4 and 5 con­fuse me. I see the ratio, but I don’t under­stand how you determ­ined the widths of the mar­gins. Are they stand­ard­ized meas­ure­ments, or are their sizes the designer’s choice based on the para­met­ers of each project? 

    I have no train­ing in design. I’m com­pletely self-taught.

  28. Ottawa said on: July 11th, 2005 at 5:06 pm

    It’d be great if you could provide some samples for down­load­ing. Maybe a PSD file with mul­tiple lay­ers of grid.

  29. bingojackson said on: July 12th, 2005 at 12:33 pm

    I have a piece of A4 paper on my notice board fol­ded just like in the dia­gram, I’ve been using it for years. I’m look­ing for­ward to the next in the series.

  30. Ben-David said on: July 13th, 2005 at 2:52 pm

    Very nice!

    It is very refresh­ing to see an approach that doesn’t start with the stifling ques­tion ‘how many columns do I want?’ 

    I have also had suc­cess using “grids” that are not all at right angles — a friend gave me a book of Arabic geo­met­ric pat­terns, with guidelines on each illus­tra­tion show­ing how they are con­struc­ted. This res­ults is some very cool lay­out choices — and might be use­ful for web design.

  31. Yuan Hon said on: July 18th, 2005 at 5:06 pm

    For a –(novice) guy, I’m lost from 2 to 3 and then on. And I can­not see how the 1:1.1414 ratio com­ing in the pic­ture.  It would be great if there are some for­mu­las from 2 to 3 and 3 to 4, etc.  Thanks!

  32. Mark Boulton said on: July 20th, 2005 at 9:43 pm

    Steve — The mar­gin meas­ure­ments are arbit­rar­ily placed to accom­mod­ate access struc­ture ele­ments (folios etc) and other con­tent elements. 

    Yuan Hon — I’ve uploaded new images which have been updated by one of my read­ers — hope­fully this should make it a lot clearer how the ratios come in to play.

  33. Scott Cranfill said on: July 20th, 2005 at 11:04 pm

    Good stuff, Mark, cheers :)

  34. Steve said on: July 21st, 2005 at 2:37 pm

    Mark -

    It’s very help­ful to know that as long as the pro­por­tions are main­tained, the mar­gin widths are the designer’s call. 

    You’ve taken a concept that seemed very com­plex to me and sim­pli­fied it by redu­cing it to a few easy-to-understand steps. 

    Not only are you an accom­plished designer … you’re a great teacher. 

    Thank you, sir!

  35. Babu said on: January 6th, 2006 at 12:26 pm

    I look for­ward to the con­tinu­ation of this series 

    Thanks 

  36. Phil said on: January 18th, 2006 at 10:40 am

    You’ve got way too many (i.e. more than zero) JavaS­crip­ter­rors com­ing up: “mmcom­ments is undefined.” 

    Good art­icle though (once I’d cleared all the ‘Do you want to debug this JavaS­cript’ alerts.

  37. Dr. Mohamed Taher said on: January 22nd, 2006 at 6:07 pm

    I think you can get some related info. in a new book, sit­ting at my ‘to be revei­wed desk’

    Dis­trib­uted Data Man­age­ment in Grid Envir­on­ments, 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 Con­tents’

    http://search.barnesandnoble.com/booksearch/isbninquiry.asp?ISBN=0471687197&pdf=y

  38. website design said on: August 27th, 2009 at 1:30 am

    web­site design…

    Small E-commerce Web sites are best pro­duced using tem­plates. First Web Site Design .com aims to provide guid­ance for those tak­ing their early or inter­me­di­ate steps into the excit­ing medium of the Inter­net / World Wide Web.…

  39. Three Books on Web Design « Superdrivel said on: October 1st, 2009 at 11:54 pm

    […] the book I was most excited about. I read the inspir­ing Five Simple Steps blog posts about grid design a while back and was enthralled to hear a book of sim­ilar nature was in the works. Mark Boulton, […]

  40. INFLUX library user experience › ux link roundup #01 said on: October 9th, 2009 at 4:32 pm

    […] Mark Boulton’s clas­sic Five Simple Steps to Design­ing Grid Systems. […]

  41. Sugar and Spice « AVT498: Senior Design Project said on: October 13th, 2009 at 11:17 pm

    […] http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1 (Fol­low the links to parts 2 thru 5) […]

  42. Ultimate Guide To Grid-Based Web Design - Noupe said on: November 10th, 2009 at 3:26 am

    […] Five Simple Steps to Design­ing Grid Systems—Part 1 […]

  43. Ultimate Guide To Grid-Based Web Design: Techniques and Tools « Tech7.Net said on: November 10th, 2009 at 6:59 am

    […] Five Simple Steps to Design­ing Grid Systems—Part 1 […]

  44. Ultimate Guide To Grid-Based Web Design: Techniques and Tools | SeanBurdick said on: November 10th, 2009 at 8:06 pm

    […] Five Simple Steps to Design­ing Grid Systems—Part 1 […]

  45. Round-up of “Seven Steps to Writing Web Copy” « Interfaces said on: November 13th, 2009 at 4:25 am

    […] Grids for lay­out – Mark Boulton’s clas­sic guide […]

  46. Ultimate Guide To Grid-Based Web Design: Techniques and Tools | Graphic Design Pro said on: November 13th, 2009 at 10:20 pm

    […] Five Simple Steps to Design­ing Grid Systems—Part 1 […]

  47. Ultimate Guide To Grid-Based Web Design: Techniques and Tools | qface & sowmo sky said on: November 17th, 2009 at 10:53 pm

    […] Five Simple Steps to Design­ing Grid Systems—Part 1 […]

  48. To Grid or Not to Grid: Advantages and Disadvantages | Webdesigner Depot said on: November 25th, 2009 at 11:12 am

    […] […]

  49. To Grid or Not to Grid: Advantages and Disadvantages « my mcLife said on: November 26th, 2009 at 8:27 am

    […] Five simple steps to design­ing grid sys­tems — Part 1 […]

  50.  madewithpixels: design | graphics | multimedia  said on: December 8th, 2009 at 8:46 pm

    […] eagle eyed design­ers among you may spot how lovely and tight the grid and ver­tical rhythm of the typography […]

  51. AJAX sliders | WebDesignExpert.Me said on: January 6th, 2010 at 4:17 am

    […] Five simple steps to design­ing grid sys­tems – Link. […]

  52. Parsons | Web 1 » Blog Archive » Local Project – Step 4 said on: February 25th, 2010 at 7:18 pm

    […] read­ing on grids: Think­ing Out­side the Grid Five Simple Steps to Design­ing Grid Sys­tems (starts with print, ends with web) Khoi Vinh (design dir­ector of nytimes.com) has pos­ted this […]

  53. need website critique - DesignersTalk said on: March 5th, 2010 at 12:38 pm

    […] And some read­ing for you: The Grid Sys­tem Design­ing With Grid-Based Approach — Smash­ing Magazine Five simple steps to design­ing grid sys­tems — Part 1 | Mark Boulton Also a tips my my exper­i­ence in design­ing grids… Gut­ter: I use odd num­ber gut­ters (i.e 7px wide) […]

  54. Blank Bullet | Things I Did Today said on: March 8th, 2010 at 8:30 am

    […] on, I began read­ing Mark Boulton’s Five simple steps to design­ing grid sys­tems and A List Apart’s Set­ting Type on the Web to a Baseline […]

  55. Layout – Designing Grid Systems « frantik said on: March 28th, 2010 at 12:08 am

    […] Design­ing Grid Sys­tems Five simple steps to design­ing grid sys­tems. Mark Boulton dis­cusses. Read more. Pos­sibly related posts: (auto­mat­ic­ally generated)layout exercise960 Grid Sys­temS­mile like you […]

  56. Herramientas para un desarrollo web más sencillo (Parte II) said on: April 15th, 2010 at 8:28 am

    […] pad­ding, si no estamos muy rela­cion­ados con el uso de grids puedes leer el siguiente artículo http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1 donde se explica de forma con­cisa los cinco primeros pasos prin­cip­ales para dis­eñar un sistema […]

  57. Strukturert til fingerspissane! › the unborn chikken said on: April 15th, 2010 at 9:10 pm

    […] Mark Boulton har ein serie med tips og triks for kor­leis du kan lage deg dine eigne systemer å bruke i dine design. Han tek for seg alt frå byrjinga til den store finalen der du får sett det i prak­sis. Primært er det for det trykte media, men vil tru at grun­nprins­ip­pet fungerer like­godt i design på nett. […]

  58. Meine neusten Bookmarks von 01.05.2010 bis 08.05.2010 said on: May 8th, 2010 at 8:19 pm

    […] Five simple steps to design­ing grid sys­tems — Part 1 | Mark Boulton – […]

  59. A DIY Web Design Education - Noupe said on: May 17th, 2010 at 1:41 pm

    […] Five Simple Steps to Design­ing Grid Sys­tems is a five-part series from Mark Boulton on how to design and use your own grid sys­tems for bet­ter web designs. […]

  60. A DIY Web Design Education » Shai Perednik.com said on: May 18th, 2010 at 8:03 pm

    […] Five Simple Steps to Design­ing Grid Sys­tems is a five-part series from Mark Boulton on how to design and use your own grid sys­tems for bet­ter web designs. […]

  61. Bookmarks for May 21st through May 22nd | dekay.org said on: May 22nd, 2010 at 12:07 pm

    […] Five simple steps to design­ing grid sys­tems — Part 1 | Mark Boulton – (tags: grid lay­out css ) […]

  62. Graphic Design Theory: 50 Resources and Articles - Noupe said on: June 21st, 2010 at 2:35 pm

    […] Five Simple Steps to Design­ing Grid Sys­tems – Part 1 This is the first in a series of posts from Mark Boulton on grid design that delves into both the the­ory behind grid-based design and prac­tical applic­a­tion of that theory. […]

  63. Graphic Design Theory: 50 Resources and Articles « gabriel catalano | in-perfección said on: June 22nd, 2010 at 1:18 pm

    […] Five Simple Steps to Design­ing Grid Sys­tems – Part 1 This is the first in a series of posts from Mark Boulton on grid design that delves into both the the­ory behind grid-based design and prac­tical applic­a­tion of that theory. […]

  64. AnthemGDA » Blog Archive » Graphic Design Theory said on: July 8th, 2010 at 12:01 am

    […] Five Simple Steps to Design­ing Grid Sys­tems – Part 1 This is the first in a series of posts from Mark Boulton on grid design that delves into both the the­ory behind grid-based design and prac­tical applic­a­tion of that theory. […]

  65. Design Playhouse | Grid Design said on: July 21st, 2010 at 12:00 am

    […] mock up grid-based page lay­outs with set typo­graphic styles. This tool along with Mark Boultons 5 simple stems to design­ing a grid sys­tem, will be my go to guides when cre­at­ing any type of graphic or web­site that requires a grid style […]

  66. 40+ Web Design and Development Resources for Beginners said on: July 23rd, 2010 at 5:43 pm

    […] ele­ments to an evenly spaced (invis­ible) grid, which makes for an aes­thet­ic­ally pleas­ing design.5 Simple Steps To Design­ing With a GridTheGridSystem.org – An excel­lent list of resources.960 Grid Sys­tem – Design and […]

  67. 40+ Web Design and Development Resources for Beginners[Help] | WEBGR8 said on: July 24th, 2010 at 8:30 am

    […] 5 Simple Steps To Design­ing With a Grid […]

  68. Internet Goodies | iGoodi.es » 40+ Web Design and Development Resources for Beginners said on: July 25th, 2010 at 12:23 pm

    […] 5 Simple Steps To Design­ing With a Grid […]

  69. 40+ Web Design and Development Resources for Beginners said on: July 26th, 2010 at 8:35 am

    […] 5 Simple Steps To Design­ing With a Grid […]

  • Me

    Hello. My name is Mark Boulton. I’m a designer, an author, a speaker and I run a small design agency where we work with lovely cli­ents and pub­lish books as we go. This is my blog.

  • More of me

  • Publications

    Design­ing for the Web
    Start­ing from £19 + VAT for a PDF Down­load. £29 for a full col­our paperback.

  • Where I work

    Mark Boulton Design
    A small design stu­dio doing good things for nice clients.
    Five Simple Steps
    Pub­lish­ing easy to read design books.

  • See me speak

    @Media 2010
    June 8th — 11th, Lon­don, UK.
    Drupal­Con 2010
    August 23th — 27th, Copen­ha­gen, Denmark.
    dCon­struct 2010: Design 1010 workshop
    Septem­ber 1st, Brighton, UK.
    Web­d­a­gene
    Septem­ber 29th — Octo­ber 1st, Oslo, Norway
    Web Developers Conference
    Octo­ber 27th, Bris­tol, UK.
    New Adven­tures in Web Design
    Janu­ary 20th 2011, Not­ting­ham, UK.

    • Copyright © 1999–2010 Mark Boulton. Made with an Apple Mac in Wales. Running on WordPress and VPS.net.