Grid Theory

When most people think about grids, they think about engineering and architecture. However, the grid is an essential tool for graphic design as well, and the use of grids in website design have exploded in popularity in the last few years.

Using a grid is more than just about making elements on the page be square and line up: it’s about proportion as well. That’s where the theory comes into grid theory. Many art historians credit Dutch painter Piet Mondrian as the father of graphic design for his sophisticated use of grids. Yet classical grid theory has influenced successful artistic efforts for thousands of years. The concept of dividing the elements of a composition extends back to the mathematical ideas established by Pythagoras and his followers, who defined numbers as ratios rather than single units.

The Pythagoreans observed a mathematical pattern that occurred so often in nature that they believed it to be divinely inspired. They referred to this pattern as the golden ratio or golden ratio or divine proportion. The basic idea is illustrated in Figure 1.6, “The golden ratio”.

Figure 1.6, “The golden ratio”

A line can be bisected using the golden ratio by dividing its length by 1.62. This magical 1.62 number is really 1.6180339 …, an irrational number that’s usually represented as Φ (pronounced phi). Explaining the math used to come up with this number is a bit too involved for this discussion, and is likely to be of no real help to you becoming a better designer, so I’ll spare you the details. Besides, my math is a little rusty.

So just what does this ratio have to do with graphic design? In general, compositions divided by lines that are proportionate to the golden ratio are considered to be aesthetically pleasing. The artists of the Renaissance used divine proportion to design their paintings, sculpture, and architecture, just as designers today often employ this ratio when creating page layouts, posters, and brochures. Rather than relying on artistic notion, divine proportion gives us logical guidelines for producing appealing layouts.

This sunflower is an example of the golden ratio in nature, as Figure 1.7, “The golden ratio in nature” shows. The diameter of the sunflower’s center the total diameter of the sunflower, including the petals, divided by Φ.

Figure 1.7. The golden ratio in nature

4.1. The Rule of Thirds

A simplified version of the golden ratio is the rule of thirds. A line bisected by the golden ratio is divided into two sections, one of which is approximately twice the size of the other. Dividing a composition into thirds is an easy way to apply divine proportion without your calculator.

For quick layout experimentation, I like to start off by drawing a bunch of simple rule-of-thirds grids with pencil and paper. Just draw a rectangle, divide it into thirds horizontally and vertically, then draw a line between each vertical line to create six columns to work within.

With this simple gridwork in place, we can begin to lay out our elements. The large, original rectangle represents the container that we talked about in “Web Page Anatomy”. When using this method of layout design, I like to place the biggest block first. Usually, that block represents the content. In my first rule-of-thirds grid, I place the content block within the two-thirds of the layout at the lower-right. Next, I place my navigation block in the middle third of the left-hand column. I place the text part of the identity block over the left side of the content, and the image part of the identity over the menu. Finally, I squash the copyright block below the content, in the right-hand column of the grid. The result is the top-left of the four possible layout arrangements shown in Figure 1.8, “Four layouts in grids that follow the rule of thirds”.

Figure 1.8. Four layouts in grids that follow the rule of thirds

These initial sketches provide a quick look into what general layout approaches might work for your website. No need to stop there, though—the growth in popularity of grid-based design on the Web has inspired many great articles about—and tools for—designing websites on a grid.

4.2. 960 Grid System

One of my favorite tools for laying out website components are the templates and sketch sheets from Nathan Smith’s 960 Grid System. Inspired by articles from web designers Khoi Vinh and Mark Boulton, the 960 Grid System is primarily a CSS framework. The width of the templates comes from an article by Cameron Moll. In contemplating what width would fit within 1,024px wide displays, Moll landed at 960px, and pointed out that the number was divisible by 3, 4, 5, 6, 8, 10, 12, 15, and 16—making it an ideal width for grids. Nathan combined these ideas into a framework and created three layout foundations: one with 12 columns, one with 16 columns, and one with 24. I personally prefer to work from the 12-column templates, as they allow me to easily divide content into quarters by spanning four columns, thirds by spanning three, and halves by spanning six.

As you experiment with different arrangements for your own layouts, use the columns of whatever grid you’ve chosen as alignment guides for the identity, navigation, content, and footer blocks. It’s very tempting to arrange all your elements within the same one or two blocks, but try to avoid this—it’s not very interesting visually. Instead, consider pushing some elements into another column or off the grid entirely. One of the biggest complaints new designers have about working with grids is that everything looks boxed in and griddy. To those opposed to using grids for this reason, I say take a look at websites such as 10K Apart, seen in Figure 1.9, “10K Apart website with 16-column grid overlay” (on the next page). The red columns you see are from the 16-column 960 Grid System template, and do not exist in the actual website. With those columns hidden, you might never realize this design was created on a grid.

To quote Josef Müller-Brockmann, graphic design pioneer (and author of Grid Systems in Graphic Design): “The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.”

Figure 1.9. 10K Apart website with 16-column grid overlay

The longing we have for structure, grids, and ideal proportion is deeply ingrained in human nature. A layout that “doesn’t look quite right” can often be fixed by moving elements and resizing them on the grid. So if a layout isn’t working, keep experimenting. At some point, all the pieces will click together and the Tetris level-up sound will play in your head. You will have achieved balance.

The Principles of Beautiful Web Design

This article is from Jason Beaird’s The Principles of Beautiful Web Design book (the second edition of which is out now). This is the fourth part of the first chapter.

If instead color is more your thing be sure to check out the existing digitization of the color chapter here on Design Festival.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Steve

    Sunflower seeds and petals relate to the natural Fibonacci numbers also
    http://www.popmath.org.uk/rpamaths/rpampages/sunflower.html

  • Dave

    I can see the advantages of using a grid system for your website. Hower, in my opinion, the generated HTML/CSS is just hideous. HTML should be used to structure the content of your website in a semantic way and CSS for the presentation. That is not given with those grid systems. Perhaps the ideal solution would be to integrate grid ability into the CSS specification as a standard, instead of using div-soup to achieve these results?

  • Stomme poes

    Agreed with Dave.  CSS grid systems look more and more like throwing a steaming pile of code together so you don’t have to actually write anything yourself.  This is what templates are for: people who can’t or don’t want to write code.

    You can use visual design principles and golden ratios all you want without compromising your coding principles.  You do not need 500 strangely-named classes on lots of wrapping divs to do a grid-based design.  Let us keep the templates separate from the visual ideas.

  • Jeanette Kwok Web Design

    Thanks for sharing your thoughts on the 960 grid.

  • http://twitter.com/bakkerjoeri Joeri Bakker

    This just pretty much changed my whole way of looking at layout design. Super thank you! 

    Just want to point out one thing: “quarters by spanning four columns, thirds by spanning three” should, I guess, be: “quarters by spanning three columns, thirds by spanning four”.

  • Jack Keller

    I believe your “…12-​​column templates, as they allow me to easily divide content into quarters by spanning four columns, thirds by spanning three, and halves by spanning six” is wrong.

    It should be “…12-​​column templates, as they allow me to easily divide content into quarters by spanning three columns, thirds by spanning four, and halves by spanning six.”

  • Pingback: Graphic Design and the Rule of Thirds | Sidekick Graphics