July 16th, 2005
Five simple steps to designing grid systems — Part 2
In part one of this Simple Steps series I talked about how to use a simple ratio, that of the paper size you are using, to create a symmetrical grid on which to create your designs. This, the second part in the series, will deal with other ratios and how they can be combined to create more complex grid systems.
Relating to grid systems
I’ve talked a few times about using the Golden, or ‘Divine’, Section in the grid systems you design. So, before you continue I suggest you read the background in this article and my article in Design in Flight. For those who don’t want fork out your hard earned cash on the DiF article, I’ll summarise:
The Golden Section is a ratio which is evident throughout the universe as the number Phi. You can use this ratio to good effect in design by making sure that elements of your grid conform to this ratio. Using the Golden Section can ensure a natural sense of correct composition, even though it is based in mathematics it will ‘feel’ right.
This is an important point and has been argued and debated for ages. Aesthetics can be measured and more importantly can be constructed. If you want something to be aesthetically pleasing there are steps you can take to make sure it is going in the right direction. Now I’m not saying that ‘follow these rules and you will create something beautiful’. What I am saying is that by following a few of these guidelines can go some way into creating something compositionally balanced, which will inherently be more aesthetically pleasing.
Composition can make things more usable
This is a theory that exists called the ‘Aesthetic Usability Effect’. I have written about this as well in the past, I find it a really interesting theory. This theory suggests that things which are designed to be beautiful are inherently more usable as a result. It is an interesting theory and can certainly challenge the usability field, which is often tarnished with the ‘ugly brush’.
Composing grids using theory and balanced ratios (such as the Golden Section), which in turn enable the creation of beautiful, balanced designs. These designs then have a quality which will make them more usable, according to the theory. Perhaps I’m labouring the point here, but in short:
Well designed grid systems can make your designs not only more beautiful and legible, but more usable.
Putting it into practice
As in the first article I’m going to be desiging this grid in context. For those of you who are primarily web based I’m afraid this is going to be another print example, but that doesn’t mean this theory can’t applied to web. It can of course be applied to lots of different medium, from architecture and interior design to product design and art, you just have to apply it to a different ‘canvas’.
So, as in the DiF article the brief is to design a book. Unlike the first article in this series, I’m going to be applying the grid to a double page spread rather than a single page, this is called an asymmetrical grid as opposed to the symmetrical grid I designed in the last article.
Shaping the page
For this grid, we’re going to use the ratio of the page to define the main text, or content, area of the pages. There’s a very simple way of reducing this page size down to make sure the ratio is correctly placed and balanced. See diagram.
We now have an area, shown in red, in which to construct the grid.
Applying the Golden Section
Now you’ve read the other articles you will see that applying the ratio to this area is pretty straight forward. The area is divided using Phi which gives us two columns, A and B.
Creating the system
So, we’ve got the columns, we now need to flesh out the grid to be able to cope with the different content and page types. First off, we extend the lines of the content area and the columns.
We then apply a horizontal rule cutting across content area creation lines. I call these ‘hanging lines’, not too sure what the correct terminology is. But anyway, the content ‘hangs’ from these lines giving us consistency throughout the book. It gives the reader a line, in the same place, to rest their eyes on page after page.
Using the extended lines we can then add areas for the access structure of the book—folios etc. These typically sit outside of the content area, usually with plenty of white space around them, as to show that they are different ‘types’ of content.
We can then add various designs to this grid comfortable in knowing that the individual elements of the design—text, images, access structure elements—will all have a relationship to each other and to the book size.
Relating to grid systems
Creating grid systems in this way—using ratios to create related lines on which to construct composition—ensures a balanced grid.
I’m afraid it isn’t an exact science though. A lot of grid design is experimentation with ratios, it’s experimentation with using white space and elements of content such as photographs and text. It’s also about conventions. Don’t reinvent the wheel needlessly, study the conventions used in magazines from all sectors—from architecture to nursing (seriously, some magazines from unexpected professional sectors have fantastic grid designs).
What I’m saying is, have a play with grid design. Just because I’m talking about ratios, subdivisions and modularisation, doesn’t mean designing grids should be dull. Have a mind on the end product, but not at the expense of the process of designing your grid.
The series
This is the second installment of this “Simple Steps…” series.
- Subdividing ratios
- Ratios and complex grid systems
- Grid systems for web design: Part 1
- Grid systems for web design: Part 2 Fixed
- Grid systems for web design: Part 3 Fluid
In diagram (2), are A and B divinely proportional because the splice line falls in the middle of each page or are the dimensions of the pages such that the split of the page just happens to fall near the middle of the page?
(Thanks for the articles!)
Ian — A and B are divinely proportional because the content area is divided — it just so happens they fall near the middle. Sorry for any confusion.
Mark,
Once again, thanks for this series — and links to past articles. I’m using these steps when laying out a newsletter I’ll be updating later this month. So this series is perfect timing.
Hey, have you given thought about taking over Design-In-Flight, since Andy doesn’t have time time — not to say you do. ;-)
Very nice article, thanks.
Can’t say a thing but GREAT ARTICLE.
Ohhhhhhhh, Phi. Okay.
First off, just want to say that I really dig your current series on grid design and your past posts on the topic.
My question is how can we apply the grid design theory on page whose length is determined by data and is not fixed?
Do you arbitrarily set a height and based the design on that?
Sean — thanks for your comments!
I presume you’re talking about website design or some kind of online/screen based application?
Well, I am going to be discussing this in one of the parts of this series, but in the mean time…
I’ve been looking into this in some detail. Most grid system theory is based on fixed ‘canvas’ sizes — eg page sizes etc. But that doesn’t mean grids can be adapted depending on size. It really is a challange when a grid system has to adapt to not only a different canvas, or screen size, but also has to adapt to different type sizes. That is without getting into the whole fixed/fluid debate at the moment.
I’m trying to get my head around all the different aspects at the moment to make sure I can distill it all down to a small article. I’m not sure that’s going to possible.
Mark -
As I became interested in design, I could always recognize strong, beautiful layouts, but creating them eluded me.
Now I understand why. I am reading and re-reading your articles in this series, and the lightbulb is coming on.
Thank you so much!
I remember my favorite thing from Geometry class in high school was learning about the golden ratio and how it could be used to make perfect rectangles. In a perfect rectangle, the long side is always 1.6? longer than the short side. These dimensions are used everywhere; in flags, crosses, and logos. Now I finally know why 1.6 was that magic number. I’ve always been interested in learning to use the golden ratio in my designs, and now I finally know how. Thanks, Mark.
Mark, wouldn’t the narrow gutter in the example spread hurt readability in a perfect-bound publication (or a publication bound in some other way such that it can’t open flat without damaging the binding)?
More, more, more.
Another well written and imensely useful article. Keep them coming.
Thanks very much for the articles. I cant wait to apply this to my site.
Scottish, it’s something of an old wive’s tale that gutters have to be especially large for perfect binding. Book pages are nearly always more attractive when the outside margin is set larger than the inside margin, and an inside margin as small as 3p is still legible.
An excellent book on grids (for both print and web is “Grid Systems” by Kimberly Elam (Princeton Architectural press). In addition to showing the basics, it works through case stuies of sites and books, posters, etc. to show actual grids in action.
Scottish — Mandy is right. Smallish gutters work find with perfect binding, although it is somethign you have to be mindful of. Having a larger outside margin is a practical consideration, especially for books, because the reader has to have somewhere for their thumb!
Ben — Thanks, and good to see you commenting! I get the feeling you’ve been a long-time lurker ;-)
Hah, I didn’t even think about the thumb thing… Thanks for reminding me :)
Even apart from thumbs–some of us need space to (gasp) writein the margins …
You can’t write in books, have you gone mad? Books are precious things, to be loved, not to be scrawled all over! ;-)
Mark — I think what you just mentioned are two of the fundamental reasons why the web is so different from any other media. The fact that your canvas does grow and is somewhat fluid throws a wrench in it all.
I am anxiously awaiting to see how you will tackle this particular problem.
Sean — Me too! No, seriously, the reason why I’m using ratios in these first two articles is an indication on where I think grids for web can go, that and repetition of grid elements. As long as the proportions remain, then it goes some way to answer the problem for the grid systems on the web.
The potential problems arise when you try and have a proportional grid, which is fluid, that has a clear and direct relationship with the typography. So, as the typography changes size (cos the user changes it), then the grid must adapt and change to make sure the grid/typography link is still retained.
A bit fiddly, but by no means impossible.
Mad? Oh, aye, absolutely … but sometimes love involves (ahem) interaction, no?
It will be interesting to apply your ratios to specific web-page sizes. Granted, browser windows are maddeningly changeable, but I often wonder if static forms–if they’re the right ones–might sometimes give the reader/viewer a more pleasant experience.
Your article makes me want to re-layout my previous megazine project :p.
Keep ‘em coming please..
Regarding the application of grids to web pages:
Although the content is not necessarily bound by a page size, the DISPLAY is — and that is the key to good website design.
In addition, the ability to combine scrolling/flowing and static elements allows the designer to subtly reinforce the grid as the content changes.
People from the print side of graphics tend to view the grid as a “foundation layer” onto which graphic elements are pasted. It is more useful in web applications to view the grid more “cinematically” as a mask or screen (or series of scrims) through which the user views dynamic content.
Also: your description of how you acheived the red rectangles is a bit misleading/imprecise.
The red rectangles do not have the same proportions as each single page. They are narrower.
The imaginary rectangle enclosing both red rectangles and their inner gutters(across the 2-page spread) has the same proportions as the entire 2-page spread.
It is interesting to me that your use of phi only starts within these (somewhat arbitrary) red rectangles. So on a solidly filled page of text and graphics, the major design proportion is still your arbitrary selection of of that red rectangle out of many possibilities.
Why not use phi to divide the page or the spread initially into active and marginal areas?
Isn’t the standardization on A4 page sizes supposed to allow relation of the entire grid to the golden section, or to the family of square-root-of-2 rectangles?
Ben-David — Let me first address your first comment post.
I disagree. The ‘canvas’ isn’t the display at all, the canvas is the browser window– the user can of course resize this to any dimension they choose. The canvas is also different on different media types, from PDA’s and mobile phones to Screenreaders.
I’m not too sure about your cinematic comment there.
Your second comment:
You could of course use Phi to divide the page, but for this example I chose not to. This article is very much a second part to the first )if you’ve read that) and shouldn’t necessarily be seen as a single article.
The standardization of A4, I dont think, is related to the Golden Section, but (like you say) to square root of 2.
Let me just say that this article isn’t supposed to be a definitive guide on how to create a grid for A4. It’s just a quick (simple steps) post to explain some of the theory which goes into grid system design.
Hi!
[…] aspects of grid-based design and walks your through designing a grid from scratch. Here are parts 2, 3, 4, and 5, and the preface to the […]
[…] aspects of grid-based design and walks your through designing a grid from scratch. Here are parts 2, 3, 4, and 5, and the preface to the […]
[…] aspects of grid-based design and walks your through designing a grid from scratch. Here are parts 2, 3, 4, and 5, and the preface to the […]
[…] aspects of grid-based design and walks your through designing a grid from scratch. Here are parts 2, 3, 4, and 5, and the preface to the […]