I am available for freelance work - HIRE ME

Musings on the Relationship Between Grids and Guides

posted by Matt Ward on Jun 26, 2010.

As the use of grids in web design continues to grow in popularity, I would like to consider the relationship between the grid and the use of guides. Though clearly related, these two concepts are also distinctly different, and in this article I would like to muse and ponder about those differences.

Though it has been around for years in print design, the concept of working on the grid has become really popular in web design in recent times, especially with the success and availability of CSS frameworks like the 960 Grid System. Many tutorials and articles that I have seen make explicit use if grids, even going so far as to specifically recommend the use of one particular system.

Musings on the Relationship Between Grids and Guides

Musings on the Relationship Between Grids and Guides

That’s great. Though certainly not a necessity, using a grid in web design is a great way to establish a strong, underlying structure that provides consistent, visual unity between the elements in a design. Moreover, the several different CSS grid frameworks that exist out there provide an excellent means of implementing a grid into a site, and can help with process of rapid prototyping.

Personally, I’ve been used the 960 Grid System in several designs, and will be using some form of grid in the upcoming redesign of this very blog.

As great as grids are, however, I do think that it’s important to distinguish them from another useful layout tool: guides. So, in this article I’m going to muse about some of the differences that I see between these two (admittedly related) concepts, and consider why those differences are important.

Grids

I suppose that the best place to start is with a simple definition of what the grid. Instead of turning to the dictionary, I would like to draw your attention to the opening passage of Ellen Lupton’s historical essay on the subject from her book Thinking with Type:

A grid breaks space or time into regular units. A grid can be simple or complex, specific or generic, tightly defined or loosely interpreted. Typographic grids are all about control. They establish a system for arranging content within the space of page, screen or built environment.

There are a few key elements that I want do draw out of this. The first is the concept of regular units. Any grid contains determined areas of space, repeated in a predictable and consistent manner. Any deviation or variation from this ultimately undermines this predictability and may even result in a complete breakdown of the grid itself, so that any design built on the broken structure cannot actually be said to have been built entirely on a grid.

It’s also important to understand the grid as a system for arranging content. Again, consistency comes into play here, as the grid helps to establish uniformity in the presentation of text and images, through important properties such as margins, padding, line width and alignment.

Guides

Guides, on the other hand, are much less rigid and are not governed by the same need for consistency and predictability that we see with grids. They are much more fluid and can exist independently of each other, allowing for a virtually infinite array of potential combinations. Together, they can be used to bring structure to a document, though that structure is not necessarily a grid (though it certainly can be).

The other important thing to note about guides is that they are a layout tool rather than an underlying structure in and of themselves. The structure exists within the design, while the guides simply function as a visual representation of that structure. Also, while you can use guides in applications like Photoshop, Illustrator, InDesign and so forth, these same guides do not exist in the final product – whether in print or on the web.

A grid, on the other hand, does translate into the finished design. It’s visibility remains evident through the actual structure of the completed design. I think that it is this key difference that begins to really illuminate both the separation of grids and guides and the relationship that exists between them.

Using Guides to Stay in the Grid

If you look at any of the innumerable Photoshop website layout tutorials that populate many of the design sites across the community, the chances are pretty good that the author will talk about (or at the very least mention) designing on a grid. You may even see screenshots that look something like this.

A common web grid

A common web grid

Remember, though, that what you’re seeing here is not the grid. It is a collection of guides laid out over top of the grid in order to help you visualize the structure and build your design upon it. Now, you may also see some tutorials that have horizontal lines, like this:

The same common grid with extra horizontal guides

The same common grid with extra horizontal guides

In my view, while these horizontal guides do add additional elements of structure, they do not reflect the underlying structure of the grid. I say this simply on the basis that they do not divide the page into repeated, regular units. Instead, they are simply used to establish vertical alignment of titles and other blocks of content. Are they important? Yes. Are they valuable? Certainly. Using guides in this way can be a really useful and valuable tool. It just doesn’t constitute as grid design. It’s more like a complementary structural addition that works together with the grid, rather than being an actual part of it.

The Half Grid

This distinction also raises another interesting point when it comes to grids on the web: that being that, by and large, grids in web design are more like half grids, wherein the focus is primarily on the horizontal space. The compartments or content areas of a complete or full grid will take into consideration both the horizontal and vertical space, as shown here:

A full grid works both vertically and horizontally

A full grid works both vertically and horizontally

Even if the grid is based simply on multiple columns (when working with static pages in print, for example), there are still top and bottom boundaries, as defined by margins:

Even this column based grid establishes consistent vertical space

Even this column based grid establishes consistent vertical space

However, due to the often dynamic nature of the web, it far more difficult to consistently predict the length of every single bit of content, thus making establishing any vertical consistency very difficult. I suppose that, with some clever JavaScript, we could potentially devise a method of limiting the amount of content that appears in a particular block, and then replicate as many blocks as it takes to display the content. With an interesting way of dividing these “pages” a full grid design would be theoretically possible.

It is also possible to achieve this type of design with pages where the length of content blocks is carefully controlled. A general business site with blocks of static content might benefit from this type of grid design. The same would likely also be true of any other site with consistent and controllable content blocks. The popular Design Newz site is actually a great example of this – most specifically on the home page:

Design Newz makes use of a "full grid" in part of its design

Design Newz makes use of a full grid in part of its design

This part of the site features a grid of article titles, complete with links and tags. This works because the titles and tags all fall within the same general range in terms of length. Based on this, certain assumptions can be made in terms of spacing, and a complete grid can be made to work – at least for part of the design.

For the most part, however, and with the increasing prevalence of blogs and other article driven sites, the use of the kind of full grid that we see on Design Newz is simply not widely viable.

That being said, however, I am not suggesting that the half grid that we see being used on many websites is any way a bad thing. Quite the opposite. Instead, I like to think of this discussion as more of an interesting observation on how, even as the web has incorporated (and continues to incorporate) concepts and principles from its printed predecessors, it also places its own mark on these same principles, transforming them in a manner that better suits its digital canvas.

Conclusion

I don’t really have all that much of a conclusion for this article, since I’m not really driving at any specific point (hopefully something that isn’t all that common around here). I have simply noticed a few instances where people seemed to mash the concepts of grids and guides together, and wanted to clarify that, at least in my mind, they serve distinct (though related) purposes.

Beyond that, I also just found it interesting to think about some of the further implications of this relationship, such as the way guides can simultaneously work over top of and independently of a grid, and how the grid on the internet has, by and large, become more of a half grid that focuses almost exclusively on the horizontal space.

Obviously, there’s a lot more that can be (and has been) said about the grid. I’m not claiming at being an expert on the subject. I do hope that you’ve found some of these musings interesting, and I’d love to hear your thoughts. Do you use grids and guides in your designs? How do you approach and/or differentiate between them?

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Jun 26, 2010

Keri says:

Thanks, great article. As a new designer I’m still trying to learn all about grids, and this helped me to understand more of the underlying concepts.

Jun 26, 2010

Adam says:

Nice try, but I think that there are some points missed in your article. You should have mentioned about horizontal and vertical grids which goth are correct and valid in their purpose.

Jun 27, 2010

Mark Petherbridge says:

Cheers for this, very nice :) an enjoyable read

@mgpwr

Jul 3, 2010

Vladimir Carrer says:

Nice article.

In my opinion one of the most important things when you building grid based design is the the gutter calculation. There are many factors to consider when you calculating the gutter size. I tried to find some solutions for the text based grid with the help of the golden proportion you can read more http://www.vcarrer.com/2009/05/o-rule-golden-proportion-for.html . This calculation can help you if you have text based grid.

There is one simple rule the bigger is the gutter you give more importance and focus to the grid units.

Apr 19, 2011

Patricia Irish says:

Nope. I don’t use a guide or a grid guide.

May 4, 2011

Calaveracafe says:

I summarized your “musings” in my sketch book and i must say it sounds quite logical and well pointed.

The relationship between grid and guide does really matter while building up the graphic architecture of webpages and printed pages, but i prefer to consider both of them as the further limit of my job (mainly printed pages).
Tryin’ to explain briefly: I do use the grid as the very background of the page, where often but not always anchor the main elements. On the other hand, i help myself padding and spacing the most prominent graphic boxes with guides only, in order to keep the design clean AND “nervous”.
This way, all elements seems to float orderly all over.
I do keep an eye on the gutter too; it is fundamental to me when a fresh, decompressing space is needed. That slim white basterd saved me maaany times! XD

Thx for the clear scheme, btw

Sep 10, 2011

buchanora says:

Nice article, or musings, more like. I personally feel that grids are a little bit overtly restrictive when followed to the bone. For me, it’s use the grid to help you with some semblance of sanity, then creatively break it for an air of freshness in your design.

Apr 10, 2012

Thierry says:

Earlier in my internet career, I used to fancy myself as being a bit of a web designer. That illusion ended when I sat and watched a friend of mine, who was a qualified and experienced graphic designer, putting together a design for a new website. The grid came first, mainly to give a balanced grouping of columns, and then guides went in to show titles and paragraphs, images etc. The whole thing was done in an orderly fashion, but I noticed that once the grid and guides had been decided on, everything else just seemed to fall into place and the only decisions left were fonts, colours etc. It was a useful lesson I decided there and then to leave the design to those with the training and talent for it.

Leave a Comment

Copyright © Echo Enduring Media 2009-2014