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.
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.
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, 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.
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:
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:
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:
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:
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.
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: