Grid systems aren’t just for print work. I know you might be having flashbacks to your first-year fundamentals class right now, but using a grid system in your website designs is a godsend for visual consistency and organization.
By using the same column widths and patterns across a website, you help users feel comfortable with the content and the design. And grid systems can do so much more for your design work than simply provide order. If you use a grid system effectively, you can achieve efficiency that has a huge impact on your work, and even your bottom line.
Before we dive into the demonstration of a grid at work, I want to first show you the grid system I will be referencing: the 960 Grid System. Among the reasons why this is considered the ideal grid for the web:
- 960 is easily divisible for common 12- and 16-column grids
- 960 is inside the standard web width of 1200 pixels, meaning that the design will fit on most monitors
It’s far from the only grid system out there, but it’s one of the most powerful and common ones. (And when you download the big ol’ packet of 960 Grid stuff, it includes lots of templates, plugins and PDF sketch sheets!)
A sample system
For this article I’ll be working with Assistly.com. I like that this site relies on a grid system but the designers didn’t force it into every last corner. While there are many instances where the designers broke the columns, at critical points they follow it to the pixel. For example the home page barely conforms to the grid. I think it’s a realistic demonstration of grids at work. Let’s begin by taking a look at the product tour page:
And here’s the same page with the 960 grid on top of it:
Not everything conforms to the grid precisely, but the important parts do. For example, the white container with rounded corners does—it’s exactly five columns wide. The developer only had to code the element one time and place the appropriately sized images inside it.
If you continue onto the pricing page, you’ll find the same five-column container again.
Since the same grid is used throughout the site, these small chunks of content are portable. You might not repeat the exact same content all over, but you could reuse a design element. By sticking to the grid system, you’ve developed patterns that can be reused over and over to provide both visual consistency and efficiency in design and development.
If you use a grid structure and develop assets around it, your site will be very flexible. And every asset you develop for it will be able to live beyond its original usage. This brings great value to the site and is a true benefit to your clients.
The truth about the code for these little containers, though, is that they’re coded to be able to scale to any size, which would seem to undermine the entire concept of efficiency. After all, if it can simply change sizes, why do I need to rigidly follow the grid?
For example on the pricing page we find some three-column containers:
And some six-column containers on the customers page:
This only further proves my point. The site has at least three different container layouts, all based on the same grid. This simple element becomes a very efficient way to contain images and content on the site.
While there are many examples of situations where code can be re-used throughout a single site, I challenge you to think even bigger. For example, take the six-column container with an image, headline, text and an action button. This formula could be replicated into a whole new site design, if it used the same grid system. You could simply reskin it a bit and have an element that works perfectly in your new site. Now imagine that you treat every element you build as a component in an overall library. So say you develop a nice email signup layout that fits into a four-column sidebar. That same layout could be copied into any design you work on that has the same grid and column widths. (I’m not suggesting that you re-use the actual design, just the layout and structure. The idea is to use layouts you’ve previously built as starting points.)
Follow this formula for a few projects and you’ll soon have a tremendous library for building new designs. An even more amazing step is to apply this to the wireframing process. If you build your wireframes on a grid system such as this one you can use your library of components. This will save you time and money on every project, making your work more efficient and profitable.
- The 960 grid system
- Bookmarklet used to generate the grid overlays
- A great slideshow on the 960 Grid System