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.
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.
Download a free sample from my book, Design Fundamentals.
It’s really interesting to see how you have laid out other ways to create a grid in addition to Khoi Vinh’s method.
Images were one way that I really didn’t considered. That was a new insight.
Typography was something I thought was important, and I’ve just received some confirmation.
It’s also funny to see how you mentioned you were stubborn and tried to make things work by playing with different sizes and gutters. Through that, I realized that everything is a trial and error. If its so easy, then us designers would have lost our jobs 🙂
Ultimately, this article gave me the reassurance and confidence that there is no magic pill to make something work, and the time spent trying to create a great grid from trying out different combinations is well worth the effort. In the next design I try, I’m gonna spend a whole lot time more on exploring the grid rather than just hastily getting a grid up and work with it.
I think the exploration will really benefit my design skills in the long run.
It took me longer than it should have to realize trial and error should enter the picture. I originally thought the idea was to find something in the content and with dimensions in hand, most everything would just fall into place. Then I hit the, “but nothing is fixed in my design” thought and had to find another way.
On a couple of sites I chose one grid and then when I started developing with it, I realized it wouldn’t work and so I had to find another grid. That’s what led me to realize some trial and error was ok.
There’s definitely no magic pill. It would be nice if there was one, but if it’s there I haven’t found it. The good news is once you run through the trial and error a time or two it gets easier.
It is really refreshing to see that some standards transcend the Digital Age and that good design is one of them. When I used to work in graphic design before the computer, the grid was the standard for design layout. It is classic and timeless. I like the fact that in the computer age, it is even a more technical science than it was as an art pre-computers.
Thanks Alison. It’s taken the web a little time, but good design is definitely finding its way here. It’s only in the last few years where web designers started thinking of grids. Khoi Vihn who used to be a designer at the New York Times was one of the first to call attention to them.
A few other designers, most of whom, have a print background did the same. People like me started reading about and learning about them and are trying our best to incorporate them in our work.
I’m a bit surprised to hear that you custom write your grids.
One of the benefits of using a grid is it’s reusability and familiarity. Speeding up the front-end development.
I’m currently using a grid that has an option for a 12, 16 or 24 column grid. (it’s small and simple too: 1kB) A combination inside one of those will suit my needs, or to put it better: a combination inside one of those will make my content sing.
In between 1140px and 320px your photos will get rescaled. Using typography: your min and max widths will fit nicely inside any of ‘my’ columns (give or take 10?, 20? px).
Trying to reach a conclusion: I don’t think my stock grid limits me more then your custom grid.
I didn’t mean to imply I recode the grid with each project. The custom part is really about choosing which grid to use.
I’m not really a fan of grid frameworks. For example the one you’re using allows 12,16, and 24 columns. How does that help with the 8 column grid I use on the site? Also you’re saying your grid rescales photos between 320px and 1140px. Where do those numbers come from? Does every design you create need images to rescale between those dimensions?
Building the actual grid is not that hard and I have reusable code for it. The harder part is choosing which grid to use to best work with your content.
If you’re using the same grid with every project and limiting yourself to what a specific framework allows then you aren’t basing the grid on your content. You’re forcing your content into a ready made grid.
Hi Steve,i’m currently going through Khoi’s book and your article has really helped clarify a lot of stuff for me.
A quick question, how would one apply a grid in a web app where it’s mostly data entry fields? Thanks
Thanks Nyaga. I’m glad the post helps.
I can’t say I’ve worked on a web app that’s mostly data entry fields before, but I would approach it the same way as anything else. I’d sketch out some ideas and look for something to use as a starting point. One of the fields might be a good fit.
From there I start the trial and error process until I found a grid I thought worked well.
It naturally depends on the entire design, but I’d probably start by deciding on how big to make the input fields and then use those as the starting point for deciding on the size of the grid unit. If it helps to think in px at first that’s fine. Decide on the size of the fields at a given overall with to the page and work out the numbers. Then covert everything to % when you feel like you’ve found the gird.
Hope that helps.