Grid Construction — How To Choose Constraints From Within Your Content

Posted: 24 Jun 2013 05:30 AM PDT

The benefits of using a grid are easy to see, but how do you build them? The divisions of unit, field, column, gutter, and row are based on something, but what? Where exactly does this something come from? That’s what Zell wanted to know when he asked similar questions in a comment a couple of weeks ago.

Print offers a ready made solution for the starting point in grid development; a fixed canvas. The web doesn’t provide that luxury. Mark Boulton proposed that we need to stop thinking about designing from the canvas in, and instead design from the content out. In other words we should look to something in our content as the starting point for constructing a grid.

I want to walk you through 3 examples of grid construction. The first comes from Khoi Vihn’s book, Ordering Disorder. The other two will come from sites I’ve built. I won’t walk through all the details and math. Instead I want to focus on the general process, specifically how do you find something in your content around which to build your grid.

grid with potential sources for units — Potential starting points to develop the grid should be found inside the content

Advertising Units as Starting Point

In his book, Ordering Disorder: Grid Principles for Web Design, Khoi Vihn works through an example to show how he might build a grid for a specific design.

What ultimately becomes the starting point for your grid will depend on the specific content of your design and the choices you make in setting constraints

First he looks over the requirements for the project and sketches potential layouts for different sections of content. He looks over the wireframes for consistent elements and in his example notices that several contain a rectangular ad. Given this ad offers the constraint of a fixed size it becomes the starting point for the developing the grid.

Choosing from the standard ad unit sizes, Khoi settles on 336px by 280px. The dimensions can accommodate several smaller ad sizes, which offers some additional flexibility. Khoi’s design further adds another constraint, that of fixing the canvas to 960px wide.

With constraints set it becomes a matter of trial and error to find a grid that works. First Khoi divides the page into 3 equal columns of 320px each. Unfortunately the ad is 336px wide. A 4 column grid is tried next, but it too doesn’t quite work. Khoi continues to subdivide the grid until he finds a solution (a 12 column grid) that accommodates the ad unit and provides enough flexibility for the remaining elements in the layout.

The keys to his process were finding an element with a fixed measurement within the layout, fixing the canvas itself, and using some trial and error to find a grid that works within both of those constraints. While many sites do feature ads, how about those that don’t? And given we work with an unknowable canvas how can we choose a grid without having the canvas be a constraint?

Images as Starting Point

One of my clients is a photographer and we’ve been working on a redesign of her site. There are no ads, but there are a lot of images. Because the site will feature so many images and because we want the size of images to be consistent across the site, they make for a good starting point in constructing the grid.

Like Khoi’s example I began by sketching and wireframing different layouts. Each layout calls for a narrow column of information on the right and a wider column on the left that will hold a grid of thumbnail images, a large single image, or text. The thumbnail images became the starting point and on the widest screens we decided to present 4 images per row.

My instinct was to think in multiples of 5 and I started sketching out a 10 column grid. 8 columns would hold the images and 2 would hold the text. Unfortunately it didn’t work. I hadn’t considered how much space would need to exist between images and text and everything felt cramped.

I was stubborn and tried to make it work by playing around with different sizes for the gutters between columns. As much as I tried I couldn’t make it work. Eventually I switched to a 12 column grid. 8 columns for the images, 3 for the text, and a single empty column to provide enough space between them.

Notice that I haven’t mentioned fixed sizes for the images or the canvas. They weren’t necessary to develop the grid. We needed to know what size to make them, but that came from other considerations. Making a decision about the size of the large image, the thumbnail image, or even the maximum width of the layout quickly leads to all the other sizes.

Typography as Starting Point

This site features more text than images so when I designed the current version, I decided to develop the grid around the type. One of the first things I did was choose a typeface. I then played around with font size, leading, and measure, until I found a combination I liked.

The length of a measure of text became the constraint to build the grid. Because I didn’t want the measure to grow too large or small I constrained it to a max and min width. These became fixed constraints from which the grid followed.

Again starting with some sketched layouts, I played around with different numbers of columns. Like the examples above I didn’t get it right on the first try. Initially I tried a 12 column grid because it offered the flexibility of dividing the space into multiples of both 2 and 3. However, when I placed the measure of text inside, I didn’t like the resulting space.

Trial and error led me to settle on an 8 column grid. Text occupies 5 columns on the right. A single column of empty space sits immediately to its left. 2 columns on the far left hold meta information on posts and sub-navigation on pages.

Summary

Why you would use a grid isn’t hard to understand. What’s more difficult is understanding how to build grids. While the details differed, the process for building the grid was the same in all 3 examples above.

Potential layouts are sketched and/or wireframed
Something within the content is chosen as the constraint for building the grid
Different grids are explored and through trial and error a solution is chosen

In Khoi’s example an ad unit served as the constraint. For my client’s site it was a thumbnail image. For this site it was the length of a measure of text.

What ultimately becomes the starting point for your grid will depend on the specific content of your design and the choices you make in setting constraints. You can find something that naturally occurs in your design or you can create your own constraint from which everything else follows.

You may not choose the best grid for your constraints initially, but that’s ok. Exploring a possibility that doesn’t work will reveal problems in the grid you’re exploring and the reasons why that grid doesn’t work will lead you to the eventual grid that will work.

The post Grid Construction — How To Choose Constraints From Within Your Content appeared first on Vanseo Design.