Wireframe Effectively on the New, Improved 970 Grid System

by on 12/03/10 at 3:56 pm

Page layout is an important aspect of web design. A popular approach to designing page layouts is to use a grid system. Grid systems are generally used at the web development or visual design stage of the design process. However, because the purpose of a grid system is to help guide the placement, sizing, order, repetition and alignment of elements, using it for wireframes at the information architecture stage is not only beneficial, but necessary for designers to create a consistent and balanced page layout.

Creating your grid

Before you can design your page layout, the first step is to create your grid. You might assume this takes a long time, but it’s actually pretty easy. You only need to create the grid once. Once it’s created you can reuse the grid so that the information architecture on your wireframe stays consistent on each page.

Problems with the 960 grid system

There’s a lot of hype surrounding the 960 grid system. Personally, I think the use of 12 columns for a grid is perfect. However, the two major problems I have with the 960 grid system is that the gutters are too wide and the content width isn’t actually 960 pixels.

The gutters are 20 pixels wide, which is far too wide for a margin. It’s so wide that when you place two elements on a column next to each other the space between them is enough to make it a visual barrier that users will fixate on. The purpose of a margin is to visually separate elements in a way that does not induce visual fixations. A thinner gutter can give you better margins that meet this purpose.

The content width of the 960 grid system is actually 940 pixels. The reason it’s called 960 is because there’s an extra gutter added to the ends of the content width making it 960 pixels wide. That extra gutter at the end is useless and redundant. This is because the purpose of using a grid is to line our content up with the column edges, not the margin spacing. Therefore, a good grid should start and end with columns. A 940 pixel width is also far too small for the screen resolutions of today’s computers. What we need is a grid that’s smaller in gutter width and wider in content width.

Why the 970 grid system is best

The 970 grid system is perfect for what we need. With this grid, the gutters are 14 pixels wide. This is the ideal width for margin spacing. It’s not too wide and not too thin. It’s just right. Also, the content width is actually 970 pixels, which is ideal for screen resolutions 1024×768 and up. You won’t find any extra margin spacing at the ends of the grid. The grid starts with a column and ends with a column. It still uses 12 columns like the 960 grid system, but the columns are now 68 pixels wide.

The specifications for the 970 pixel grid are:

  • 12 columns
  • 68 pixels column width
  • 14 pixels gutter width

When you put it all together, you get a grid that looks like (click image for actual size):

Placing content boxes on your grid

Once you’ve created your 970 grid, it’s time to fill it with content boxes. When you’re at the information architecture stage of the process you should already have an understanding of the content that will go on your website. The goal to wireframing an effective information architecture is to focus on the placement, sizing and order of content, and not to focus on the look and feel. This is where content boxes come in handy.

How to use content boxes

Content boxes are simply square and rectangular blocks stretched over the grid. When you use content boxes, make sure you label them with the type of content that will go in each content box. Also, make sure that your content boxes start and end on a column. It’s fine to go over gutters, but avoid landing on them. Use the gutters as margins for your content boxes.

What’s efficient about the 970 grid is that it uses 12 columns. With 12 columns you can line your content boxes up in rows of 2, 3, 4 or 6. This gives you a flexible grid to use for a dynamic layout. You can even combine multiple rows with a different number of content boxes together and the content boxes will always stay balanced with each other. The 970 grid gives you choice and flexibility for designing your page layout.

Placing navigations on your grid

No matter what kind of navigation you want to use, the 970 grid makes it easy to lay out a variety of navigations. Adding a column navigation is easy, as well as adding a top navigation. Whatever navigation you choose to use, the grid can align your navigation with your text, images and other content. This gives your overall site a balanced and consistent look.

Placing text and images on your grid

The 970 grid is also useful for sizing and placing text and images. With text you’ll want to use margins that are wider than 14 pixels. Wider margins around text decreases paragraph lengths and gives users more whitespace around text to make it easier to read. However wide you want your text margins, the grid can accommodate your needs. Using the grid can also help you figure out the right sizes for your images. By placing your images next to your text on the grid you can find the ideal size that will make your text and images compliment each other beautifully.

When you size your and place your text and images, it’s not essential for each element to line up flush with a column. What’s essential is that each row lines up with a column. In other words, when lining things up the gestalt is most important. By following this, you’ll keep your layout consistent from one page to the next.

Wireframes are the foundation

Using the 970 grid system to wireframe can have a huge impact on your site’s information architecture. It makes wireframing fast, easy and effective. More importantly, it answers all the questions most people have during the information architecture stage of the process. Once you have the first version of your wireframe completed, you can begin showing your client. You can make your wireframes more detailed than the examples show, but a general wireframe can work just as well because the details of the look and feel will come at the visual design stage.

It’s important to not spend too much time thinking about the look and feel of the design. Remember, wireframing is not about the look and feel. That comes at the visual design stage. Wireframing is about the placement, sizing, order, repetition, and alignment of content. Once you have that figured out, move forward so you can get to the visual design stage where the details matter most. As you move forward to visual design and eventually to web development, it’s extremely important that you use the same information architecture that’s laid out in your wireframes. Wireframes are a website’s foundation, which is why it’s important that the wireframe’s integrity stays intact throughout the design process. If they don’t, all reason and purpose for wireframing is lost.

36 Responses to “Wireframe Effectively on the New, Improved 970 Grid System”

  1. Hugh Brown

    Dec 5th, 2010

    Title erroneously says, “Wireframing Effectively on the 970 Grid System” but the CSS grid system is called 960.

    • anthony

      Dec 5th, 2010

      I’m actually referring to the 970 grid system that I use that I think is better than the 960 grid system. Nevertheless, I will change the title to be more clear. Thanks for pointing out the ambiguity.

  2. Franco

    Dec 6th, 2010

    Can you provide a link to 970 grid system? I was unable to google it.

  3. suckerpunch

    Dec 6th, 2010

    Yes, you’re definitely onto something. The 960gs has been solid for a long time, but the padding on each side is a nuisance. And the gutters too.

    Could we see a demo page somewhere?

  4. Ricardo Saavedra

    Dec 6th, 2010

    I really think the 960 grid system it’s a bad solution to css framework. Din’t you guys think thgat 14px of margin between the columns are to tight ? I use myself a grid that has 978 px wide, 12 columns with 54 width each and 30px of margin.

  5. Brian Bird

    Dec 6th, 2010

    I like this a lot better than the 960px grid. A long time ago we independently determined that 984px was the maximum width we could reliably count on with a scrolling window. 960px seemed like a giant waste of space to me.

    I even like that the left over space from our findings is 1/2 of a gutter on both sides.

    I disagree that 20px is too much space between wide columns, but the benefit mathematically far outweighs any quibbles in that regard.

    • anthony

      Dec 6th, 2010

      Sorry for not explaining my reasoning clearer. I have posted a graphic of why 20px is too wide. Hope that clears it up a bit.

      • Brian Bird

        Dec 6th, 2010

        This is where wireframing is a bit misleading. 14px between two solid cells is plenty of space. However, between two blocks of text many users end up having a readability problem. There isn’t enough white-space to properly separate the two ragged edges created by the text. Once you space this back out to 20px the edges of the text become more distinct and you have increased readability with very little loss of cohesion in full-fledged designs. Its been a long time since, but our user testing brought this out and I’ve lived by it ever since.

        Your example with two small boxes is misleading in most cases. Expand that out to three or four columns wide and the white space becomes much less of a design element of its own and fades into the background properly. 20px between two 300+px blocks doesn’t look as much like a design feature as it does between two smaller boxes by themselves because the proportion is different.

        An easy work around to retain the 14px gutter is to add a bit of padding to the text blocks when they have trouble. Combined with a header, the effect is almost imperceptible to the eye, but the readability is increased.

        I created a graphic to illustrate this:
        http://twohousestudios.com/tmp/gridExamples.gif

        • anthony

          Dec 7th, 2010

          I 100% agree with you that 14px isn’t enough for text margins. They should be much more. That is why in my examples above you’ll see that I only use 14px margins for the content boxes, not for the text. Thanks for bringing up this point.

  6. sereal

    Dec 6th, 2010

    I don’t see any 970 css source code to try it out :(

  7. Chris

    Dec 6th, 2010

    I think you’re a bit absolutist in your justifications. The value or detriment of 20px gutters is very context specific. Additionally I think you place too much emphasis on the risk of white space becoming a visual fixation. The size of the text, the leading, justification and the inclusion of graphics all factor into the effect the proportion of white space has. Saying 20px is too much just can’t be supported as a universal truth. Nor can you say that 14px is ‘just right’.

    I’m not saying 970 isn’t a valuable option. I do like an option that eliminates the outer margins. But simply saying that certain gutters are absolutely too wide or two narrow just isn’t a supportable assertion.

    There are arguments both ways, which means having both options are good depending on your design.

    • anthony

      Dec 7th, 2010

      Too much whitespace between elements does yield a visual fixation. This is a fact. If it wasn’t, I would not have wrote so extensively about it and included a graphic. I’ve done testing in the past on websites with wide margins and have found this to be true, so I think saying 20 px is too much can be supported here. If you’re skeptical, test it out yourself and will see the same results. It may seem like opinion to you, but it’s actually not. Also, try to use your own sound judgment and common sense. Do a comparison of different margin sizes with your content boxes and look at each of the content boxes and see if the margin starts to become a visual barrier as the margin sizes increase.

      • Chris

        Dec 8th, 2010

        But, saying you wrote it and added a graphic does not make it fact. Saying you’ve done testing without citing the actual testing does not validate the fact.

        You are right, TOO MUCH white space can create a visual fixation, but saying 20px is that ‘too much’ without the context of resolution, text size, leading, included graphics, etc. can’t simply be stated as fact. You cannot say it will impede a design by becoming a barrier to the user. It may for certain designs, but not universally so.

        You say you think that “saying 20px is too much can be supported.” Then please do support it with your findings. That’s just it, you have not supported your findings.

        Since you have said you have done studies, please do share. I would love to see the findings and think they would be very insightful.

        • anthony

          Dec 9th, 2010

          “You are right, TOO MUCH white space can create a visual fixation…”

          Do I have the testing results that proves 20 px is “too much” whitespace? No. All I can tell you is that too much white space does create a visual fixation, and you seem to agree. Did you do any testing to come to that agreement, or did you use your design sense and judgment? That’s right. You used your design sense and judgment. If you did testing, I’d like to see it. Please attach it to this comment. :)

          By my own design sense and judgment, 20px is unnecessarily wide for images and boxes. However, I’ve mentioned before that for TEXT 20 px is fine. That’s because when we read TEXT our eyes constantly move from side to side. We need the extra whitespace so that our eyes don’t run into the next text line when we read. Brian Bird left a comment above that illustrates this point really well. Did I ask him to show me testing results for me to believe him? No. All I had to do was listen to his design rationale, and use my own design sense and judgment. That’s all.

  8. Goran Peuc

    Dec 21st, 2010

    Even tho I agree with what this article is all about (making 970 the new standard) the author has some problems adhering to the main idea of what grid is all about: consistency and predictability of content and item placement.

    For example:

    http://uxmovement.com/wp-content/uploads/2010/12/navigations.png

    The top 2 image blocks break up the grid by trying to divide 9 columns by 2.

    http://uxmovement.com/wp-content/uploads/2010/12/textimages.png

    Those bottom three images (blocks) are so out of grid it hurts when you look at it.

    So, yea, 12 column grid is nice, but you have some problems actually USING it =)

    • anthony

      Dec 22nd, 2010

      You’re right. Using a grid is about consistency in layout. However, it’s also about flexibility. You’re not always going to use the same margin spacing for every element on your wireframe. Different elements need different margin sizes. I explain in the article why you should use larger margins when you have paragraph text. I also mention that when you line things up along the column edges, you should pay attention to the gestalt of the elements, rather than individual elements. It’s okay if a few elements aren’t aligned flush with a column edge. They don’t have to, as long as the GROUP or ROW of the elements are within the grid framework. The alignment of the blocks you see were done on purpose to prove this point. If you look closely, you’ll notice that the individual blocks aren’t aligned flush to a column edge. However, the GROUP or ROW the blocks belong to are aligned to the grid. Like I said in the article, when it comes to aligning multiple elements the gestalt matters most.

      • Goran Peuc

        Dec 23rd, 2010

        The main issue here is that you are now using images (lets presume that gray boxes are images) of many different variations. You have images that are: 3 col wide, 3 and a little, 4, 4 and a little, 5, …

        If you take as an example that you are making a news-website, this means that CMS needs for each image uploaded to make variations for all of those images, because you can never be sure where the image can land. The columns and the grid is used to minimize the workload of future people working on the project, minimize the workload of server infrastructure, to help designers move objects around the grid with an ability that they always fit perfectly into place, and of course to keep things neat.

        • Mark

          May 3rd, 2012

          Limiting your capabilities and options (i.e. image sizes) because of technology is a bad idea. If the site needs 10 different sizes of images, create the CMS to handle that.

      • Adam Kochanowicz

        Mar 6th, 2012

        True, I use CSS frameworks as a point of abstraction. In other words, use a model and abstract from it as necessary.

        I’ll override the grid where needed either with an inline style (gasp!) or an extra class name, but the grid provides a way to fall back on a sensible default which is consistent with most of the layout.

  9. Pashmina

    Dec 22nd, 2010

    I had the some of the same issues as you with the 960 grid. After using it for a few projects, I found it to be more limiting and not taking advantage of screen real estate.

    I researched other grid options, and have now switched over to The Sqare Grid: http://thesquaregrid.com/

    Check it out, you might like it too.

  10. @web_boy_uk

    Jan 21st, 2011

    The 960.gs grid was perfect for the design challenges of the desktop in 2007. The Internet has now become the Splinternet and we need new ways to meet the challenge of screens that vary wildy in resolution.

    Fuild layouts as suggested by cssgrid (@andytlr ) would suggest a way forward.

    “A 1140px wide, 12 column grid. Fluid all the way down to a mobile version”

    http://cssgrid.net/

  11. bomski

    Feb 3rd, 2011

    fixed aspect ratios are dead; long live fluidic layouts!

    http://www.designinfluences.com/fluid960gs/

  12. [...] who argue it has many advantages over the traditional 960 pixel grid. For more information, read this article. To download a layered Photoshop file with grid and measurements that I developed, click [...]

  13. Chris Brauckmuller

    Apr 14th, 2011

    I’m no UX expert but if you ask me 14px is way too narrow of a gutter. Laugh if you want but my main gripe with 960gs is that the gutters were too narrow at 20px. I prefer a 30 or 40 pixel gutter between blocks of content or else it really just doesn’t have room to breathe. This is especially true when you’re setting body text at a larger font size like 14 or 16 pixels on a 22 or 23 pixel baseline, which is becoming more popular.

  14. Ilias

    Apr 14th, 2011

    It’s not fluid you’re after it’s adaptive http://lessframework.com/

  15. snake

    Jun 9th, 2011

    I agree with the 14px gutter in most cases. That’s usually the minimal width I use for spacing elements. Although, I personally don’t like to use any pre-design grid system solely on the fact that a website’s width, columns, and spacing should be determined by the amount of content it has and branding style.

  16. FBNKCMaster

    Jul 18th, 2011

    Good article. Thanks !

  17. JustInMind

    Mar 6th, 2012

    Free tool to create clickable wireframes for mobile and web apps http://tiny.cc/Free-Prototyper

  18. Adam Kochanowicz

    Mar 6th, 2012

    I love grid systems. What do you think of Twitter’s Bootstrap? I’m surprised nobody mentioned it.

    http://twitter.github.com/bootstrap/scaffolding.html

    I think that one also uses wide margins, though.

  19. valise rigide

    May 5th, 2012

    The 960.gs grid was perfect for the design challenges of the desktop in 2007. The Internet has now become the Splinternet and we need new ways to meet the challenge of screens that vary wildy in resolution.
    Fuild layouts as suggested by cssgrid (@andytlr ) would suggest a way forward.
    “A 1140px wide, 12 column grid. Fluid all the way down to a mobile version”

  20. Rich

    Dec 21st, 2012

    What do you have against negative space? 14px margins would just make everything feel very very cramped. White space makes for a much fresher and enjoyable UX in my opinion.

  21. Marta

    Mar 22nd, 2013

    just wanted to say THANKS for your great post! :)

  22. Dale Grebey

    Jun 21st, 2013

    Funny, that I wrote my own custom 970px system half-a-decade ago and have built dozens and dozens of websites on it. :) Glad to see other people coming around. Most of my sites now tend to be 970px responsive for mobile and tablet.

Leave a Comment